From 7df1f9ee215670d6944b0b62ffe0f182f387ff1a Mon Sep 17 00:00:00 2001
From: ekh <ekh@anadeainc.com>
Date: Tue, 25 Feb 2025 12:04:25 +0400
Subject: [PATCH 01/77] fix: galleria item navigator disable state

---
 packages/primevue/src/galleria/GalleriaItem.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/primevue/src/galleria/GalleriaItem.vue b/packages/primevue/src/galleria/GalleriaItem.vue
index fe20beb8c..0773339fd 100755
--- a/packages/primevue/src/galleria/GalleriaItem.vue
+++ b/packages/primevue/src/galleria/GalleriaItem.vue
@@ -1,13 +1,13 @@
 <template>
     <div :class="cx('itemsContainer')" v-bind="ptm('itemsContainer')">
         <div :class="cx('items')" v-bind="ptm('items')">
-            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('prevButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('prevButton')" data-pc-group-section="itemnavigator">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('prevButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled" v-bind="ptm('prevButton')" data-pc-group-section="itemnavigator">
                 <component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('prevIcon')" v-bind="ptm('prevIcon')" />
             </button>
             <div :id="id + '_item_' + activeIndex" :class="cx('item')" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
                 <component v-if="templates.item" :is="templates.item" :item="activeItem" />
             </div>
-            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextButton')" data-pc-group-section="itemnavigator">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextButton')" @click="navForward($event)" :disabled="isNavForwardDisabled" v-bind="ptm('nextButton')" data-pc-group-section="itemnavigator">
                 <component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextIcon')" v-bind="ptm('nextIcon')" />
             </button>
             <div v-if="templates['caption']" :class="cx('caption')" v-bind="ptm('caption')">
@@ -238,12 +238,6 @@ export default {
         isIndicatorItemActive(index) {
             return this.activeIndex === index;
         },
-        isNavBackwardDisabled() {
-            return !this.circular && this.activeIndex === 0;
-        },
-        isNavForwardDisabled() {
-            return !this.circular && this.activeIndex === this.value.length - 1;
-        },
         ariaSlideNumber(value) {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
         },
@@ -258,6 +252,12 @@ export default {
 
         ariaSlideLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;
+        },
+        isNavBackwardDisabled() {
+            return !this.circular && this.activeIndex === 0;
+        },
+        isNavForwardDisabled() {
+            return !this.circular && this.activeIndex === this.value.length - 1;
         }
     },
     components: {

From 4991b82e00957b610686cd4fc9b8447fa37e45f9 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 25 Feb 2025 11:05:59 +0300
Subject: [PATCH 02/77] Fixed #7316

---
 packages/primevue/src/confirmpopup/ConfirmPopup.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/primevue/src/confirmpopup/ConfirmPopup.vue b/packages/primevue/src/confirmpopup/ConfirmPopup.vue
index 0be606d94..20afdae90 100644
--- a/packages/primevue/src/confirmpopup/ConfirmPopup.vue
+++ b/packages/primevue/src/confirmpopup/ConfirmPopup.vue
@@ -233,12 +233,12 @@ export default {
                     }
                 };
 
-                document.addEventListener('click', this.outsideClickListener, true);
+                document.addEventListener('click', this.outsideClickListener);
             }
         },
         unbindOutsideClickListener() {
             if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener, true);
+                document.removeEventListener('click', this.outsideClickListener);
                 this.outsideClickListener = null;
             }
         },

From f059452da6d0e71d6608e5ff3a2930eedac9578a Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 25 Feb 2025 11:06:54 +0300
Subject: [PATCH 03/77] Fixed #7317

---
 packages/primevue/src/inputnumber/InputNumber.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/primevue/src/inputnumber/InputNumber.vue b/packages/primevue/src/inputnumber/InputNumber.vue
index 5cbcdc0ce..d864e0b1d 100755
--- a/packages/primevue/src/inputnumber/InputNumber.vue
+++ b/packages/primevue/src/inputnumber/InputNumber.vue
@@ -580,7 +580,7 @@ export default {
             return false;
         },
         isDecimalSign(char) {
-            if (this.locale.includes('fr') && ['.', ','].includes(char) || this._decimal.test(char)) {
+            if ((this.locale?.includes('fr') && ['.', ','].includes(char)) || this._decimal.test(char)) {
                 this._decimal.lastIndex = 0;
 
                 return true;

From c0d66b86237517275b908ddfecfa67994dd918bb Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 25 Feb 2025 11:08:32 +0300
Subject: [PATCH 04/77] Fixed #7318

---
 packages/primevue/src/datepicker/DatePicker.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/primevue/src/datepicker/DatePicker.vue b/packages/primevue/src/datepicker/DatePicker.vue
index a161a14c4..b118191e3 100755
--- a/packages/primevue/src/datepicker/DatePicker.vue
+++ b/packages/primevue/src/datepicker/DatePicker.vue
@@ -1348,8 +1348,6 @@ export default {
                     if (lookAhead(match)) {
                         while (num.length < len) {
                             num = '0' + num;
-                            this.selectionStart = this.selectionStart + 1;
-                            this.selectionEnd = this.selectionEnd + 1;
                         }
                     }
 

From 05333092feb6f1a3c70696b1f1b3d4ca65c40b16 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 25 Feb 2025 11:10:16 +0300
Subject: [PATCH 05/77] Update CHANGELOG.md

---
 CHANGELOG.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 648b6fd08..6f7e6e85d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## [4.3.1](https://github.com/primefaces/primevue/tree/4.3.1) (2025-02-25)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/4.3.0...4.3.1)
+
+**Fixed bugs:**
+
+- DatePicker: selection start and end bug [\#7318](https://github.com/primefaces/primevue/issues/7318)
+- InputNumber: locale warnings [\#7317](https://github.com/primefaces/primevue/issues/7317)
+- ConfirmPopup: alignment bug on first click [\#7316](https://github.com/primefaces/primevue/issues/7316)
+
 ## [4.3.0](https://github.com/primefaces/primevue/tree/4.3.0) (2025-02-24)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/4.3.0-rc.1...4.3.0)

From a4b272d1c1b78364a1df8fe13485fa9ea54b9e0e Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 25 Feb 2025 11:10:34 +0300
Subject: [PATCH 06/77] Set new version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bc12b4ad3..73415854e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@primevue/monorepo",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "homepage": "https://primevue.org/",
     "repository": {

From fd1b5d53b053222d39ed9e2c3aa9081746876db5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20H=2E?=
 <36476318+Tamas-hi@users.noreply.github.com>
Date: Tue, 25 Feb 2025 09:11:45 +0100
Subject: [PATCH 07/77] Update OverrideDoc.vue

I think important is meant here instead of import.
---
 apps/showcase/doc/tailwind/OverrideDoc.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/showcase/doc/tailwind/OverrideDoc.vue b/apps/showcase/doc/tailwind/OverrideDoc.vue
index 0294ed445..7ad064edd 100644
--- a/apps/showcase/doc/tailwind/OverrideDoc.vue
+++ b/apps/showcase/doc/tailwind/OverrideDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Import and CSS Layer.</p>
+        <p>Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Important and CSS Layer.</p>
         <h3>Important</h3>
         <p>Use the <i>!</i> as a prefix to enforce the styling. This is not the recommend approach, and should be used as last resort to avoid adding unnecessary style classes to your bundle.</p>
 

From 8bc70ef1fdf215223f0cdcf0f1690bd4be4ab720 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 25 Feb 2025 11:20:47 +0300
Subject: [PATCH 08/77] Released 4.3.1

---
 apps/showcase/package.json                 |   4 +-
 packages/auto-import-resolver/package.json |   4 +-
 packages/core/package.json                 |   4 +-
 packages/forms/package.json                |   4 +-
 packages/icons/package.json                |   4 +-
 packages/metadata/package.json             |   4 +-
 packages/nuxt-module/package.json          |   4 +-
 packages/primevue/package.json             |   4 +-
 packages/themes/package.json               |   4 +-
 pnpm-lock.yaml                             | 289 +++++++++++++++++++--
 pnpm-publish-summary.json                  |  68 ++---
 11 files changed, 326 insertions(+), 67 deletions(-)

diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index 065e9c961..46bf3e1fe 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -1,6 +1,6 @@
 {
     "name": "showcase",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -68,4 +68,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/auto-import-resolver/package.json b/packages/auto-import-resolver/package.json
index 641af2e33..b6cdf7301 100644
--- a/packages/auto-import-resolver/package.json
+++ b/packages/auto-import-resolver/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@primevue/auto-import-resolver",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -48,4 +48,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/core/package.json b/packages/core/package.json
index c69d44fc6..b9625262c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@primevue/core",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -69,4 +69,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 1d0364f2a..bc6b8da60 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@primevue/forms",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -59,4 +59,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/icons/package.json b/packages/icons/package.json
index a8199bd86..81ddd65dc 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@primevue/icons",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -105,4 +105,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/metadata/package.json b/packages/metadata/package.json
index f0527891e..c3b5171a0 100644
--- a/packages/metadata/package.json
+++ b/packages/metadata/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@primevue/metadata",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -44,4 +44,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/nuxt-module/package.json b/packages/nuxt-module/package.json
index 437dffa3e..29765f324 100644
--- a/packages/nuxt-module/package.json
+++ b/packages/nuxt-module/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@primevue/nuxt-module",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "Nuxt module for PrimeVue",
     "homepage": "https://primevue.org/",
@@ -92,4 +92,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/primevue/package.json b/packages/primevue/package.json
index 0813067cf..61925eeb0 100644
--- a/packages/primevue/package.json
+++ b/packages/primevue/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.",
     "homepage": "https://primevue.org/",
@@ -361,4 +361,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 5301258d6..bf694ac32 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@primevue/themes",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -88,4 +88,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03d730d28..a88e1d970 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
         version: 10.0.1(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: ^5.2.3
-        version: 5.2.3(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2)
+        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2)
       eslint-plugin-vue:
         specifier: ^9.32.0
         version: 9.32.0(eslint@9.21.0(jiti@2.4.2))
@@ -956,6 +956,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.25.0':
+    resolution: {integrity: sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/android-arm64@0.17.19':
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
     engines: {node: '>=12'}
@@ -986,6 +992,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.25.0':
+    resolution: {integrity: sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm@0.17.19':
     resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
     engines: {node: '>=12'}
@@ -1016,6 +1028,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.25.0':
+    resolution: {integrity: sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-x64@0.17.19':
     resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
     engines: {node: '>=12'}
@@ -1046,6 +1064,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.25.0':
+    resolution: {integrity: sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/darwin-arm64@0.17.19':
     resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
     engines: {node: '>=12'}
@@ -1076,6 +1100,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.25.0':
+    resolution: {integrity: sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.17.19':
     resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
     engines: {node: '>=12'}
@@ -1106,6 +1136,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.25.0':
+    resolution: {integrity: sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/freebsd-arm64@0.17.19':
     resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
     engines: {node: '>=12'}
@@ -1136,6 +1172,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.25.0':
+    resolution: {integrity: sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.17.19':
     resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
     engines: {node: '>=12'}
@@ -1166,6 +1208,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.25.0':
+    resolution: {integrity: sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/linux-arm64@0.17.19':
     resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
     engines: {node: '>=12'}
@@ -1196,6 +1244,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.25.0':
+    resolution: {integrity: sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm@0.17.19':
     resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
     engines: {node: '>=12'}
@@ -1226,6 +1280,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.25.0':
+    resolution: {integrity: sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.17.19':
     resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
     engines: {node: '>=12'}
@@ -1256,6 +1316,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.25.0':
+    resolution: {integrity: sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.17.19':
     resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
     engines: {node: '>=12'}
@@ -1286,6 +1352,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.25.0':
+    resolution: {integrity: sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.17.19':
     resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
     engines: {node: '>=12'}
@@ -1316,6 +1388,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.25.0':
+    resolution: {integrity: sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.17.19':
     resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
     engines: {node: '>=12'}
@@ -1346,6 +1424,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.25.0':
+    resolution: {integrity: sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.17.19':
     resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
     engines: {node: '>=12'}
@@ -1376,6 +1460,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.25.0':
+    resolution: {integrity: sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.17.19':
     resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
     engines: {node: '>=12'}
@@ -1406,6 +1496,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.25.0':
+    resolution: {integrity: sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-x64@0.17.19':
     resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
     engines: {node: '>=12'}
@@ -1436,12 +1532,24 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.25.0':
+    resolution: {integrity: sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/netbsd-arm64@0.24.2':
     resolution: {integrity: sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-arm64@0.25.0':
+    resolution: {integrity: sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.17.19':
     resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
     engines: {node: '>=12'}
@@ -1472,12 +1580,24 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.25.0':
+    resolution: {integrity: sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/openbsd-arm64@0.24.2':
     resolution: {integrity: sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-arm64@0.25.0':
+    resolution: {integrity: sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.17.19':
     resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
     engines: {node: '>=12'}
@@ -1508,6 +1628,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.25.0':
+    resolution: {integrity: sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/sunos-x64@0.17.19':
     resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
     engines: {node: '>=12'}
@@ -1538,6 +1664,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.25.0':
+    resolution: {integrity: sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/win32-arm64@0.17.19':
     resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
     engines: {node: '>=12'}
@@ -1568,6 +1700,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.25.0':
+    resolution: {integrity: sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.17.19':
     resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
     engines: {node: '>=12'}
@@ -1598,6 +1736,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.25.0':
+    resolution: {integrity: sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-x64@0.17.19':
     resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
     engines: {node: '>=12'}
@@ -1628,6 +1772,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.25.0':
+    resolution: {integrity: sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.4.1':
     resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3409,8 +3559,8 @@ packages:
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  electron-to-chromium@1.5.103:
-    resolution: {integrity: sha512-P6+XzIkfndgsrjROJWfSvVEgNHtPgbhVyTkwLjUM2HU/h7pZRORgaTlHqfAikqxKmdJMLW8fftrdGWbd/Ds0FA==}
+  electron-to-chromium@1.5.104:
+    resolution: {integrity: sha512-Us9M2L4cO/zMBqVkJtnj353nQhMju9slHm62NprKTmdF3HH8wYOtNvDFq/JB2+ZRoGLzdvYDiATlMHs98XBM1g==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3509,6 +3659,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  esbuild@0.25.0:
+    resolution: {integrity: sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -3731,8 +3886,8 @@ packages:
       debug:
         optional: true
 
-  foreground-child@3.3.0:
-    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
   form-data@4.0.2:
@@ -6631,8 +6786,8 @@ packages:
       terser:
         optional: true
 
-  vite@6.1.1:
-    resolution: {integrity: sha512-4GgM54XrwRfrOp297aIYspIti66k56v16ZnqHvrIM7mG+HjDlAwS7p+Srr7J6fGvEdOJ5JcQ/D9T7HhtdXDTzA==}
+  vite@6.2.0:
+    resolution: {integrity: sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
@@ -7807,6 +7962,9 @@ snapshots:
   '@esbuild/aix-ppc64@0.24.2':
     optional: true
 
+  '@esbuild/aix-ppc64@0.25.0':
+    optional: true
+
   '@esbuild/android-arm64@0.17.19':
     optional: true
 
@@ -7822,6 +7980,9 @@ snapshots:
   '@esbuild/android-arm64@0.24.2':
     optional: true
 
+  '@esbuild/android-arm64@0.25.0':
+    optional: true
+
   '@esbuild/android-arm@0.17.19':
     optional: true
 
@@ -7837,6 +7998,9 @@ snapshots:
   '@esbuild/android-arm@0.24.2':
     optional: true
 
+  '@esbuild/android-arm@0.25.0':
+    optional: true
+
   '@esbuild/android-x64@0.17.19':
     optional: true
 
@@ -7852,6 +8016,9 @@ snapshots:
   '@esbuild/android-x64@0.24.2':
     optional: true
 
+  '@esbuild/android-x64@0.25.0':
+    optional: true
+
   '@esbuild/darwin-arm64@0.17.19':
     optional: true
 
@@ -7867,6 +8034,9 @@ snapshots:
   '@esbuild/darwin-arm64@0.24.2':
     optional: true
 
+  '@esbuild/darwin-arm64@0.25.0':
+    optional: true
+
   '@esbuild/darwin-x64@0.17.19':
     optional: true
 
@@ -7882,6 +8052,9 @@ snapshots:
   '@esbuild/darwin-x64@0.24.2':
     optional: true
 
+  '@esbuild/darwin-x64@0.25.0':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.17.19':
     optional: true
 
@@ -7897,6 +8070,9 @@ snapshots:
   '@esbuild/freebsd-arm64@0.24.2':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/freebsd-x64@0.17.19':
     optional: true
 
@@ -7912,6 +8088,9 @@ snapshots:
   '@esbuild/freebsd-x64@0.24.2':
     optional: true
 
+  '@esbuild/freebsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/linux-arm64@0.17.19':
     optional: true
 
@@ -7927,6 +8106,9 @@ snapshots:
   '@esbuild/linux-arm64@0.24.2':
     optional: true
 
+  '@esbuild/linux-arm64@0.25.0':
+    optional: true
+
   '@esbuild/linux-arm@0.17.19':
     optional: true
 
@@ -7942,6 +8124,9 @@ snapshots:
   '@esbuild/linux-arm@0.24.2':
     optional: true
 
+  '@esbuild/linux-arm@0.25.0':
+    optional: true
+
   '@esbuild/linux-ia32@0.17.19':
     optional: true
 
@@ -7957,6 +8142,9 @@ snapshots:
   '@esbuild/linux-ia32@0.24.2':
     optional: true
 
+  '@esbuild/linux-ia32@0.25.0':
+    optional: true
+
   '@esbuild/linux-loong64@0.17.19':
     optional: true
 
@@ -7972,6 +8160,9 @@ snapshots:
   '@esbuild/linux-loong64@0.24.2':
     optional: true
 
+  '@esbuild/linux-loong64@0.25.0':
+    optional: true
+
   '@esbuild/linux-mips64el@0.17.19':
     optional: true
 
@@ -7987,6 +8178,9 @@ snapshots:
   '@esbuild/linux-mips64el@0.24.2':
     optional: true
 
+  '@esbuild/linux-mips64el@0.25.0':
+    optional: true
+
   '@esbuild/linux-ppc64@0.17.19':
     optional: true
 
@@ -8002,6 +8196,9 @@ snapshots:
   '@esbuild/linux-ppc64@0.24.2':
     optional: true
 
+  '@esbuild/linux-ppc64@0.25.0':
+    optional: true
+
   '@esbuild/linux-riscv64@0.17.19':
     optional: true
 
@@ -8017,6 +8214,9 @@ snapshots:
   '@esbuild/linux-riscv64@0.24.2':
     optional: true
 
+  '@esbuild/linux-riscv64@0.25.0':
+    optional: true
+
   '@esbuild/linux-s390x@0.17.19':
     optional: true
 
@@ -8032,6 +8232,9 @@ snapshots:
   '@esbuild/linux-s390x@0.24.2':
     optional: true
 
+  '@esbuild/linux-s390x@0.25.0':
+    optional: true
+
   '@esbuild/linux-x64@0.17.19':
     optional: true
 
@@ -8047,9 +8250,15 @@ snapshots:
   '@esbuild/linux-x64@0.24.2':
     optional: true
 
+  '@esbuild/linux-x64@0.25.0':
+    optional: true
+
   '@esbuild/netbsd-arm64@0.24.2':
     optional: true
 
+  '@esbuild/netbsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/netbsd-x64@0.17.19':
     optional: true
 
@@ -8065,9 +8274,15 @@ snapshots:
   '@esbuild/netbsd-x64@0.24.2':
     optional: true
 
+  '@esbuild/netbsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.24.2':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.25.0':
+    optional: true
+
   '@esbuild/openbsd-x64@0.17.19':
     optional: true
 
@@ -8083,6 +8298,9 @@ snapshots:
   '@esbuild/openbsd-x64@0.24.2':
     optional: true
 
+  '@esbuild/openbsd-x64@0.25.0':
+    optional: true
+
   '@esbuild/sunos-x64@0.17.19':
     optional: true
 
@@ -8098,6 +8316,9 @@ snapshots:
   '@esbuild/sunos-x64@0.24.2':
     optional: true
 
+  '@esbuild/sunos-x64@0.25.0':
+    optional: true
+
   '@esbuild/win32-arm64@0.17.19':
     optional: true
 
@@ -8113,6 +8334,9 @@ snapshots:
   '@esbuild/win32-arm64@0.24.2':
     optional: true
 
+  '@esbuild/win32-arm64@0.25.0':
+    optional: true
+
   '@esbuild/win32-ia32@0.17.19':
     optional: true
 
@@ -8128,6 +8352,9 @@ snapshots:
   '@esbuild/win32-ia32@0.24.2':
     optional: true
 
+  '@esbuild/win32-ia32@0.25.0':
+    optional: true
+
   '@esbuild/win32-x64@0.17.19':
     optional: true
 
@@ -8143,6 +8370,9 @@ snapshots:
   '@esbuild/win32-x64@0.24.2':
     optional: true
 
+  '@esbuild/win32-x64@0.25.0':
+    optional: true
+
   '@eslint-community/eslint-utils@4.4.1(eslint@9.21.0(jiti@2.4.2))':
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
@@ -8641,7 +8871,7 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.1.1(@types/node@18.19.76)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@18.19.76)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
       vitest-environment-nuxt: 1.0.1(@types/node@18.19.76)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@1.6.1(@types/node@18.19.76)(terser@5.39.0))(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
@@ -9910,7 +10140,7 @@ snapshots:
   browserslist@4.24.4:
     dependencies:
       caniuse-lite: 1.0.30001700
-      electron-to-chromium: 1.5.103
+      electron-to-chromium: 1.5.104
       node-releases: 2.0.19
       update-browserslist-db: 1.1.2(browserslist@4.24.4)
 
@@ -10535,7 +10765,7 @@ snapshots:
 
   ee-first@1.1.1: {}
 
-  electron-to-chromium@1.5.103: {}
+  electron-to-chromium@1.5.104: {}
 
   emoji-regex@8.0.0: {}
 
@@ -10728,6 +10958,34 @@ snapshots:
       '@esbuild/win32-ia32': 0.24.2
       '@esbuild/win32-x64': 0.24.2
 
+  esbuild@0.25.0:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.0
+      '@esbuild/android-arm': 0.25.0
+      '@esbuild/android-arm64': 0.25.0
+      '@esbuild/android-x64': 0.25.0
+      '@esbuild/darwin-arm64': 0.25.0
+      '@esbuild/darwin-x64': 0.25.0
+      '@esbuild/freebsd-arm64': 0.25.0
+      '@esbuild/freebsd-x64': 0.25.0
+      '@esbuild/linux-arm': 0.25.0
+      '@esbuild/linux-arm64': 0.25.0
+      '@esbuild/linux-ia32': 0.25.0
+      '@esbuild/linux-loong64': 0.25.0
+      '@esbuild/linux-mips64el': 0.25.0
+      '@esbuild/linux-ppc64': 0.25.0
+      '@esbuild/linux-riscv64': 0.25.0
+      '@esbuild/linux-s390x': 0.25.0
+      '@esbuild/linux-x64': 0.25.0
+      '@esbuild/netbsd-arm64': 0.25.0
+      '@esbuild/netbsd-x64': 0.25.0
+      '@esbuild/openbsd-arm64': 0.25.0
+      '@esbuild/openbsd-x64': 0.25.0
+      '@esbuild/sunos-x64': 0.25.0
+      '@esbuild/win32-arm64': 0.25.0
+      '@esbuild/win32-ia32': 0.25.0
+      '@esbuild/win32-x64': 0.25.0
+
   escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
@@ -10748,13 +11006,14 @@ snapshots:
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
 
-  eslint-plugin-prettier@5.2.3(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2):
+  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2):
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
       prettier: 3.4.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
+      '@types/eslint': 9.6.1
       eslint-config-prettier: 10.0.1(eslint@9.21.0(jiti@2.4.2))
 
   eslint-plugin-vue@9.32.0(eslint@9.21.0(jiti@2.4.2)):
@@ -10976,7 +11235,7 @@ snapshots:
 
   follow-redirects@1.15.9: {}
 
-  foreground-child@3.3.0:
+  foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
@@ -11094,7 +11353,7 @@ snapshots:
 
   glob@10.4.5:
     dependencies:
-      foreground-child: 3.3.0
+      foreground-child: 3.3.1
       jackspeak: 3.4.3
       minimatch: 9.0.5
       minipass: 7.1.2
@@ -14266,9 +14525,9 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.39.0
 
-  vite@6.1.1(@types/node@18.19.76)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
+  vite@6.2.0(@types/node@18.19.76)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
-      esbuild: 0.24.2
+      esbuild: 0.25.0
       postcss: 8.5.3
       rollup: 4.34.8
     optionalDependencies:
diff --git a/pnpm-publish-summary.json b/pnpm-publish-summary.json
index a90374350..73b5783a5 100644
--- a/pnpm-publish-summary.json
+++ b/pnpm-publish-summary.json
@@ -1,36 +1,36 @@
 {
-    "publishedPackages": [
-        {
-            "name": "@primevue/core",
-            "version": "4.3.0"
-        },
-        {
-            "name": "@primevue/metadata",
-            "version": "4.3.0"
-        },
-        {
-            "name": "@primevue/themes",
-            "version": "4.3.0"
-        },
-        {
-            "name": "@primevue/auto-import-resolver",
-            "version": "4.3.0"
-        },
-        {
-            "name": "@primevue/forms",
-            "version": "4.3.0"
-        },
-        {
-            "name": "@primevue/icons",
-            "version": "4.3.0"
-        },
-        {
-            "name": "primevue",
-            "version": "4.3.0"
-        },
-        {
-            "name": "@primevue/nuxt-module",
-            "version": "4.3.0"
-        }
-    ]
+	"publishedPackages": [
+		{
+			"name": "@primevue/core",
+			"version": "4.3.1"
+		},
+		{
+			"name": "@primevue/metadata",
+			"version": "4.3.1"
+		},
+		{
+			"name": "@primevue/themes",
+			"version": "4.3.1"
+		},
+		{
+			"name": "@primevue/auto-import-resolver",
+			"version": "4.3.1"
+		},
+		{
+			"name": "@primevue/forms",
+			"version": "4.3.1"
+		},
+		{
+			"name": "@primevue/icons",
+			"version": "4.3.1"
+		},
+		{
+			"name": "primevue",
+			"version": "4.3.1"
+		},
+		{
+			"name": "@primevue/nuxt-module",
+			"version": "4.3.1"
+		}
+	]
 }

From 3b85db5603cd18c5f2b28f9f4f44bad3c24ccd74 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 25 Feb 2025 08:21:46 +0000
Subject: [PATCH 09/77] Code Format

---
 apps/showcase/package.json                 |  2 +-
 packages/auto-import-resolver/package.json |  2 +-
 packages/core/package.json                 |  2 +-
 packages/forms/package.json                |  2 +-
 packages/icons/package.json                |  2 +-
 packages/metadata/package.json             |  2 +-
 packages/nuxt-module/package.json          |  2 +-
 packages/primevue/package.json             |  2 +-
 packages/themes/package.json               |  2 +-
 pnpm-lock.yaml                             |  5 +-
 pnpm-publish-summary.json                  | 68 +++++++++++-----------
 11 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index 46bf3e1fe..35b4b1d57 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -68,4 +68,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/auto-import-resolver/package.json b/packages/auto-import-resolver/package.json
index b6cdf7301..e5764f757 100644
--- a/packages/auto-import-resolver/package.json
+++ b/packages/auto-import-resolver/package.json
@@ -48,4 +48,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/core/package.json b/packages/core/package.json
index b9625262c..eae95e599 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -69,4 +69,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/forms/package.json b/packages/forms/package.json
index bc6b8da60..82438d989 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -59,4 +59,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 81ddd65dc..1878e1130 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -105,4 +105,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/metadata/package.json b/packages/metadata/package.json
index c3b5171a0..433941b8f 100644
--- a/packages/metadata/package.json
+++ b/packages/metadata/package.json
@@ -44,4 +44,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/nuxt-module/package.json b/packages/nuxt-module/package.json
index 29765f324..c3a30ffee 100644
--- a/packages/nuxt-module/package.json
+++ b/packages/nuxt-module/package.json
@@ -92,4 +92,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/primevue/package.json b/packages/primevue/package.json
index 61925eeb0..463913748 100644
--- a/packages/primevue/package.json
+++ b/packages/primevue/package.json
@@ -361,4 +361,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/themes/package.json b/packages/themes/package.json
index bf694ac32..b2638f1c0 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -88,4 +88,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a88e1d970..94070faa1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
         version: 10.0.1(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: ^5.2.3
-        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2)
+        version: 5.2.3(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2)
       eslint-plugin-vue:
         specifier: ^9.32.0
         version: 9.32.0(eslint@9.21.0(jiti@2.4.2))
@@ -11006,14 +11006,13 @@ snapshots:
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
 
-  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2):
+  eslint-plugin-prettier@5.2.3(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2):
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
       prettier: 3.4.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
-      '@types/eslint': 9.6.1
       eslint-config-prettier: 10.0.1(eslint@9.21.0(jiti@2.4.2))
 
   eslint-plugin-vue@9.32.0(eslint@9.21.0(jiti@2.4.2)):
diff --git a/pnpm-publish-summary.json b/pnpm-publish-summary.json
index 73b5783a5..e127869e9 100644
--- a/pnpm-publish-summary.json
+++ b/pnpm-publish-summary.json
@@ -1,36 +1,36 @@
 {
-	"publishedPackages": [
-		{
-			"name": "@primevue/core",
-			"version": "4.3.1"
-		},
-		{
-			"name": "@primevue/metadata",
-			"version": "4.3.1"
-		},
-		{
-			"name": "@primevue/themes",
-			"version": "4.3.1"
-		},
-		{
-			"name": "@primevue/auto-import-resolver",
-			"version": "4.3.1"
-		},
-		{
-			"name": "@primevue/forms",
-			"version": "4.3.1"
-		},
-		{
-			"name": "@primevue/icons",
-			"version": "4.3.1"
-		},
-		{
-			"name": "primevue",
-			"version": "4.3.1"
-		},
-		{
-			"name": "@primevue/nuxt-module",
-			"version": "4.3.1"
-		}
-	]
+    "publishedPackages": [
+        {
+            "name": "@primevue/core",
+            "version": "4.3.1"
+        },
+        {
+            "name": "@primevue/metadata",
+            "version": "4.3.1"
+        },
+        {
+            "name": "@primevue/themes",
+            "version": "4.3.1"
+        },
+        {
+            "name": "@primevue/auto-import-resolver",
+            "version": "4.3.1"
+        },
+        {
+            "name": "@primevue/forms",
+            "version": "4.3.1"
+        },
+        {
+            "name": "@primevue/icons",
+            "version": "4.3.1"
+        },
+        {
+            "name": "primevue",
+            "version": "4.3.1"
+        },
+        {
+            "name": "@primevue/nuxt-module",
+            "version": "4.3.1"
+        }
+    ]
 }

From 2639193d3b296d95058f01c8e765308e58308746 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 25 Feb 2025 13:12:40 +0300
Subject: [PATCH 10/77] Use asChild for custom components, no need for to in
 d.ts in this case.

---
 apps/showcase/doc/button/LinkDoc.vue     | 18 +++++++++++++-----
 packages/primevue/src/button/Button.d.ts |  4 ----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/showcase/doc/button/LinkDoc.vue b/apps/showcase/doc/button/LinkDoc.vue
index e894c6658..68b672d79 100644
--- a/apps/showcase/doc/button/LinkDoc.vue
+++ b/apps/showcase/doc/button/LinkDoc.vue
@@ -1,11 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
+        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to customize the rendering, use the <i>as</i> to change the element or <i>asChild</i> for advanced templating.</p>
     </DocSectionText>
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,14 +20,18 @@ export default {
                 basic: `
 <Button label="Link" variant="link" />
 <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-<Button as="router-link" label="Router" to="/" />
+<Button asChild v-slot="slotProps">
+    <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+</Button>
 `,
                 options: `
 <template>
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
 </template>
 
@@ -37,7 +43,9 @@ export default {
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
 </template>
 
diff --git a/packages/primevue/src/button/Button.d.ts b/packages/primevue/src/button/Button.d.ts
index 2adc2a5b7..1993f91b4 100755
--- a/packages/primevue/src/button/Button.d.ts
+++ b/packages/primevue/src/button/Button.d.ts
@@ -207,10 +207,6 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * @defaultValue false
      */
     unstyled?: boolean;
-    /**
-     * Route Location the router-link should navigate to when clicked on.
-     */
-    to?: string;
 }
 
 /**

From 67b80d15528585fda213ba825969bb65bb976c63 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 25 Feb 2025 10:13:40 +0000
Subject: [PATCH 11/77] Update API doc

---
 apps/showcase/doc/common/apidoc/index.json | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index cd9edc5b3..69bdbca66 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -8427,14 +8427,6 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When enabled, it removes component related styles in the core."
-                        },
-                        {
-                            "name": "to",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Route Location the router-link should navigate to when clicked on."
                         }
                     ],
                     "methods": [],

From c2b551c1deb7af4c42461ca30e00ef1074c41a33 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 25 Feb 2025 13:33:59 +0300
Subject: [PATCH 12/77] Use asChild

---
 apps/showcase/doc/button/LinkDoc.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/showcase/doc/button/LinkDoc.vue b/apps/showcase/doc/button/LinkDoc.vue
index e894c6658..68b672d79 100644
--- a/apps/showcase/doc/button/LinkDoc.vue
+++ b/apps/showcase/doc/button/LinkDoc.vue
@@ -1,11 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
+        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to customize the rendering, use the <i>as</i> to change the element or <i>asChild</i> for advanced templating.</p>
     </DocSectionText>
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,14 +20,18 @@ export default {
                 basic: `
 <Button label="Link" variant="link" />
 <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-<Button as="router-link" label="Router" to="/" />
+<Button asChild v-slot="slotProps">
+    <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+</Button>
 `,
                 options: `
 <template>
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
 </template>
 
@@ -37,7 +43,9 @@ export default {
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
 </template>
 

From 7b6be96e6064435e5c59699949a8f21cdcdb91d5 Mon Sep 17 00:00:00 2001
From: Romain Grosjean <rgrosjean@intension.de>
Date: Tue, 25 Feb 2025 20:26:51 +0100
Subject: [PATCH 13/77] Rollback change from #7123

---
 packages/primevue/src/button/Button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/primevue/src/button/Button.vue b/packages/primevue/src/button/Button.vue
index ad201c7c3..d0a4828e6 100755
--- a/packages/primevue/src/button/Button.vue
+++ b/packages/primevue/src/button/Button.vue
@@ -8,7 +8,7 @@
             <slot v-else name="icon" :class="[cx('icon')]" v-bind="ptm('icon')">
                 <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
             </slot>
-            <span v-if="!hasIcon || !!label" :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
+            <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
             <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('pcBadge')"></Badge>
         </slot>
     </component>

From 9462acb06efa92875b058e49170dbf170106e36d Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 28 Feb 2025 11:32:34 +0000
Subject: [PATCH 14/77] refactor: update nuxt version and nuxt-module

---
 .gitignore                                    |   28 +-
 apps/showcase/README.md                       |    1 +
 apps/showcase/nuxt.config.js                  |   22 +-
 apps/showcase/package.json                    |   70 +-
 apps/showcase/rollup.config.js                |  296 -
 apps/showcase/tailwind.config.js              |    6 +-
 apps/showcase/tsconfig.json                   |    2 +
 package.json                                  |    5 +-
 packages/nuxt-module/README.md                |   87 +-
 packages/nuxt-module/package.json             |   38 +-
 .../nuxt-module/playground/nuxt.config.ts     |    7 +-
 packages/nuxt-module/playground/package.json  |    4 +-
 .../playground/server/tsconfig.json           |    2 +-
 packages/nuxt-module/playground/tsconfig.json |    2 +-
 packages/nuxt-module/scripts/prebuild.mjs     |    5 -
 packages/nuxt-module/src/module.ts            |   10 +-
 packages/nuxt-module/src/register.ts          |    6 +-
 packages/nuxt-module/test/basic.test.ts       |   25 +-
 .../nuxt-module/test/fixtures/basic/app.vue   |    5 +-
 .../test/fixtures/basic/nuxt.config.ts        |    8 +-
 .../test/fixtures/basic/package.json          |    6 +-
 packages/nuxt-module/tsconfig.json            |    7 +-
 pnpm-lock.yaml                                | 5223 +++++++----------
 pnpm-workspace.yaml                           |   12 +
 24 files changed, 2466 insertions(+), 3411 deletions(-)
 create mode 100644 apps/showcase/README.md
 delete mode 100644 apps/showcase/rollup.config.js
 delete mode 100644 packages/nuxt-module/scripts/prebuild.mjs

diff --git a/.gitignore b/.gitignore
index 08fa7697b..ebd85a907 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,15 +1,31 @@
-node_modules
-coverage
-*.log*
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
 .nitro
 .cache
-.output
-.env
 dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log*
+
+# Misc
 .DS_Store
+.fleet
 .idea
 .eslintcache
-api-generator/typedoc.json
+coverage
 **/.DS_Store
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# Custom
+api-generator/typedoc.json
 apps/showcase/components.d.ts
diff --git a/apps/showcase/README.md b/apps/showcase/README.md
new file mode 100644
index 000000000..3f69b4672
--- /dev/null
+++ b/apps/showcase/README.md
@@ -0,0 +1 @@
+# Showcase
diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js
index dc72a2795..fd5fd11dd 100644
--- a/apps/showcase/nuxt.config.js
+++ b/apps/showcase/nuxt.config.js
@@ -18,7 +18,8 @@ try {
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    typescript: false,
+    compatibilityDate: '2024-11-01',
+    devtools: { enabled: false },
     modules: ['@primevue/nuxt-module'],
     components: {
         path: '~/components',
@@ -28,7 +29,9 @@ export default defineNuxtConfig({
         resolve: {
             dedupe: ['vue', '@primeuix/styles', '@primeuix/themes', '@primeuix/utils'],
             optimizeDeps: {
-                disabled: true
+                disabled: true,
+                noDiscovery: true,
+                include: []
             },
             alias
         }
@@ -40,17 +43,10 @@ export default defineNuxtConfig({
         '/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } },
         '/installation': { redirect: { to: '/vite', statusCode: 301 } }
     },
-    primevue:
-        PROCESS_ENV.DEV_ENV === 'hot'
-            ? {
-                  usePrimeVue: false,
-                  autoImport: true,
-                  loadStyles: false
-              }
-            : {
-                  autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application.
-                  importTheme: { from: '@/themes/app-theme.js' }
-              },
+    primevue: {
+        autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application.
+        importTheme: { from: '@/themes/app-theme.js' }
+    },
     app: {
         baseURL: baseUrl,
         head: {
diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index 35b4b1d57..77a656563 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -13,15 +13,6 @@
     "bugs": {
         "url": "https://github.com/primefaces/primevue/issues"
     },
-    "scripts": {
-        "build": "pnpm run build:prebuild && nuxt build",
-        "dev": "nuxt dev",
-        "generate": "nuxt generate",
-        "preview": "nuxt preview",
-        "postinstall": "nuxt prepare",
-        "build:prebuild": "node ./scripts/prebuild.js",
-        "build:apidoc": "node ./scripts/build-apidoc.js"
-    },
     "keywords": [
         "primevue",
         "vue",
@@ -37,35 +28,42 @@
         "unstyled",
         "passthrough"
     ],
-    "devDependencies": {
-        "@stackblitz/sdk": "^1.8.2",
-        "autoprefixer": "^10.4.16",
-        "chart.js": "3.3.2",
-        "jsdom": "^19.0.0",
-        "nuxt": "3.3.2",
-        "postcss": "^8.4.31",
-        "prettier": "2.7.1",
-        "primeicons": "^7.0.0",
-        "quill": "2.0.0",
-        "sass": "1.45.0",
-        "sass-loader": "8.0.2",
-        "tailwindcss": "^3.4.1",
-        "tailwindcss-primeui": "^0.4.0",
-        "typedoc": "0.23.23",
-        "primevue": "workspace:*",
-        "@primevue/core": "workspace:*",
-        "@primevue/nuxt-module": "workspace:*",
-        "@primevue/forms": "workspace:*",
-        "@primeuix/themes": "catalog:",
-        "yup": "1.4.0",
-        "zod": "3.23.8",
-        "valibot": "^0.42.1",
-        "superstruct": "^2.0.2"
+    "type": "module",
+    "scripts": {
+        "build": "pnpm run build:prebuild && nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "build:prebuild": "node ./scripts/prebuild.js",
+        "build:apidoc": "node ./scripts/build-apidoc.js"
     },
     "dependencies": {
-        "@docsearch/js": "^3.3.3"
+        "@docsearch/js": "catalog:app",
+        "@primeuix/themes": "catalog:",
+        "@primevue/core": "workspace:*",
+        "@primevue/forms": "workspace:*",
+        "@primevue/nuxt-module": "workspace:*",
+        "primeicons": "catalog:",
+        "primevue": "workspace:*",
+        "chart.js": "catalog:app",
+        "quill": "catalog:app",
+        "superstruct": "^2.0.2",
+        "valibot": "^0.42.1",
+        "yup": "1.4.0",
+        "zod": "3.23.8"
     },
-    "engines": {
-        "node": ">=12.11.0"
+    "devDependencies": {
+        "@stackblitz/sdk": "^1.8.2",
+        "autoprefixer": "^10",
+        "jsdom": "^19.0.0",
+        "nuxt": "catalog:app",
+        "postcss": "^8.4.31",
+        "sass": "catalog:app",
+        "sass-loader": "catalog:app",
+        "tailwindcss": "^3",
+        "tailwindcss-primeui": "catalog:",
+        "typedoc": "0.27.9",
+        "vite": "catalog:app"
     }
 }
diff --git a/apps/showcase/rollup.config.js b/apps/showcase/rollup.config.js
deleted file mode 100644
index 1537f4ab4..000000000
--- a/apps/showcase/rollup.config.js
+++ /dev/null
@@ -1,296 +0,0 @@
-import alias from '@rollup/plugin-alias';
-import { babel } from '@rollup/plugin-babel';
-import terser from '@rollup/plugin-terser';
-import postcss from 'rollup-plugin-postcss';
-import vue from 'rollup-plugin-vue';
-
-import fs from 'fs-extra';
-import path from 'path';
-
-import viteConfig, { THEME_PRESETS } from './nuxt-vite.config.js';
-import pkg from './package.json';
-
-// globals
-const GLOBALS = {
-    vue: 'Vue'
-};
-
-// externals
-const GLOBAL_EXTERNALS = ['vue', 'chart.js/auto', 'quill'];
-const INLINE_EXTERNALS = Object.keys(viteConfig.resolve.alias);
-const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
-
-// alias
-const ALIAS_ENTRIES = Object.entries(viteConfig.resolve.alias).map(([key, value]) => ({ find: key, replacement: value }));
-
-// plugins
-const BABEL_PLUGIN_OPTIONS = {
-    extensions: ['.js', '.vue'],
-    exclude: 'node_modules/**',
-    presets: ['@babel/preset-env'],
-    plugins: [],
-    skipPreflightCheck: true,
-    babelHelpers: 'runtime',
-    babelrc: false
-};
-
-const ALIAS_PLUGIN_OPTIONS = {
-    entries: ALIAS_ENTRIES
-};
-
-const POSTCSS_PLUGIN_OPTIONS = {
-    sourceMap: false
-};
-
-const TERSER_PLUGIN_OPTIONS = {
-    compress: {
-        keep_infinity: true,
-        pure_getters: true,
-        reduce_funcs: true
-    },
-    mangle: {
-        reserved: ['theme', 'css']
-    }
-};
-
-const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS)];
-
-const ENTRY = {
-    entries: [],
-    onwarn(warning) {
-        if (warning.code === 'CIRCULAR_DEPENDENCY') {
-            //console.error(`(!) ${warning.message}`);
-            return;
-        }
-    },
-    format: {
-        cjs_es(options) {
-            return ENTRY.format.cjs(options).es(options);
-        },
-        cjs({ input, output, minify }) {
-            ENTRY.entries.push({
-                onwarn: ENTRY.onwarn,
-                input,
-                plugins: [...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
-                external: EXTERNALS,
-                inlineDynamicImports: true,
-                output: [
-                    {
-                        format: 'cjs',
-                        file: `${output}${minify ? '.min' : ''}.cjs`,
-                        sourcemap: true,
-                        exports: 'auto'
-                    }
-                ]
-            });
-
-            return ENTRY.format;
-        },
-        es({ input, output, minify }) {
-            ENTRY.entries.push({
-                onwarn: ENTRY.onwarn,
-                input,
-                plugins: [...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
-                external: EXTERNALS,
-                inlineDynamicImports: true,
-                output: [
-                    {
-                        format: 'es',
-                        file: `${output}${minify ? '.min' : ''}.mjs`,
-                        sourcemap: true,
-                        exports: 'auto'
-                    }
-                ]
-            });
-
-            return ENTRY.format;
-        },
-        umd({ name, input, output, minify }) {
-            ENTRY.entries.push({
-                onwarn: ENTRY.onwarn,
-                input,
-                plugins: [alias(ALIAS_PLUGIN_OPTIONS), ...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
-                external: GLOBAL_EXTERNALS,
-                inlineDynamicImports: true,
-                output: [
-                    {
-                        format: 'umd',
-                        name: name ?? 'PrimeVue',
-                        file: `${output}${minify ? '.min' : ''}.js`,
-                        globals: GLOBALS,
-                        exports: 'auto'
-                    }
-                ]
-            });
-
-            return ENTRY.format;
-        }
-    }
-};
-
-function addFile() {
-    fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR), { withFileTypes: true })
-        .filter((dir) => dir.isDirectory())
-        .forEach(({ name: folderName }) => {
-            fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR + folderName)).forEach((file) => {
-                let name = file.split(/(.vue)$|(.js)$/)[0].toLowerCase();
-
-                if (name === folderName) {
-                    const input = process.env.INPUT_DIR + folderName + '/' + file;
-                    const output = process.env.OUTPUT_DIR + folderName + '/' + name;
-
-                    ENTRY.format.es({ input, output });
-                }
-            });
-        });
-}
-
-function addIcon() {
-    const iconDir = path.resolve(__dirname, process.env.INPUT_DIR + 'icons');
-
-    fs.readdirSync(path.resolve(__dirname, iconDir), { withFileTypes: true })
-        .filter((dir) => dir.isDirectory())
-        .forEach(({ name: folderName }) => {
-            fs.readdirSync(path.resolve(__dirname, iconDir + '/' + folderName)).forEach((file) => {
-                if (/\.vue$/.test(file)) {
-                    const name = file.split(/(.vue)$/)[0].toLowerCase();
-                    const input = process.env.INPUT_DIR + 'icons/' + folderName + '/' + file;
-                    const output = process.env.OUTPUT_DIR + 'icons/' + folderName + '/' + name;
-
-                    ENTRY.format.es({ input, output });
-                }
-            });
-        });
-}
-
-function addStyle() {
-    fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR), { withFileTypes: true })
-        .filter((dir) => dir.isDirectory())
-        .forEach(({ name: folderName }) => {
-            try {
-                fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR + folderName + '/style')).forEach((file) => {
-                    if (/\.js$/.test(file)) {
-                        const name = file.split(/(.js)$/)[0].toLowerCase();
-                        const input = process.env.INPUT_DIR + folderName + '/style/' + file;
-                        const output = process.env.OUTPUT_DIR + folderName + '/style/' + name;
-
-                        ENTRY.format.es({ input, output });
-                    }
-                });
-            } catch {}
-        });
-}
-
-function traverseDir(dir, condition, callback) {
-    try {
-        const files = fs.readdirSync(dir);
-
-        files.forEach((file) => {
-            const filePath = path.join(dir, file);
-            const fileStat = fs.statSync(filePath);
-
-            if (fileStat.isDirectory()) {
-                traverseDir(filePath, condition, callback);
-            } else if (condition?.(file) && fileStat.isFile()) {
-                callback?.(file, filePath, dir);
-            }
-        });
-    } catch {}
-}
-
-function addThemes() {
-    traverseDir(
-        path.resolve(__dirname, process.env.INPUT_DIR + 'themes'),
-        (file) => file === 'index.js',
-        (file, filePath, folderPath) => {
-            const searchFolder = '/' + process.env.INPUT_DIR;
-            const folderName = folderPath.substring(folderPath.indexOf(searchFolder) + searchFolder.length);
-            const input = process.env.INPUT_DIR + folderName + '/' + file;
-            const output = process.env.OUTPUT_DIR + folderName + '/' + 'index';
-
-            ENTRY.format.es({ input, output });
-        }
-    );
-}
-
-function addCore() {
-    ENTRY.format.es({ input: process.env.INPUT_DIR + 'config/PrimeVue.js', output: process.env.OUTPUT_DIR + 'config/config' });
-    ENTRY.format.es({ input: process.env.INPUT_DIR + 'service/PrimeVueService.js', output: process.env.OUTPUT_DIR + 'service/primevueservice' });
-}
-
-function addPassThrough() {
-    ENTRY.format.es({ input: process.env.INPUT_DIR + 'passthrough/index.js', output: process.env.OUTPUT_DIR + 'passthrough/index' });
-}
-
-function addLibrary() {
-    THEME_PRESETS?.forEach((preset) => {
-        ENTRY.format.umd({ name: `PrimeVue.Themes.${preset[0].toUpperCase() + preset.slice(1)}`, input: process.env.INPUT_DIR + `themes/${preset}/index.js`, output: process.env.OUTPUT_DIR + `umd/themes/${preset}`, minify: true });
-    });
-
-    ENTRY.format.umd({ name: 'PrimeVue', input: process.env.INPUT_DIR + 'primevue.js', output: process.env.OUTPUT_DIR + 'umd/primevue', minify: true });
-}
-
-function addPackageJson() {
-    const outputDir = path.resolve(__dirname, process.env.OUTPUT_DIR);
-    const packageJson = `{
-    "name": "primevue",
-    "version": "${pkg.version}",
-    "private": "false",
-    "author": "PrimeTek Informatics",
-    "description": "PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.",
-    "homepage": "https://primevue.org/",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/primefaces/primevue.git"
-    },
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/primefaces/primevue/issues"
-    },
-    "keywords": [
-        "primevue",
-        "vue",
-        "vue.js",
-        "vue2",
-        "vue3",
-        "ui library",
-        "component library",
-        "material",
-        "bootstrap",
-        "fluent",
-        "tailwind",
-        "unstyled",
-        "passthrough"
-    ],
-    "unpkg": "umd/primevue.min.js",
-    "jsdelivr": "umd/primevue.min.js",
-    "web-types": "./web-types.json",
-    "vetur": {
-        "tags": "./vetur-tags.json",
-        "attributes": "./vetur-attributes.json"
-    },
-    "sideEffects": [
-        "*.vue"
-    ],
-    "peerDependencies": {
-        "vue": "^3.5.0"
-    },
-    "engines": {
-        "node": ">=12.11.0"
-    }
-}`;
-
-    !fs.existsSync(outputDir) && fs.mkdirSync(outputDir);
-    fs.writeFileSync(path.resolve(outputDir, 'package.json'), packageJson);
-}
-
-addCore();
-addStyle();
-addThemes();
-addIcon();
-addFile();
-addPassThrough();
-addLibrary();
-addPackageJson();
-
-export default ENTRY.entries;
diff --git a/apps/showcase/tailwind.config.js b/apps/showcase/tailwind.config.js
index fb7ccd868..a4331c325 100644
--- a/apps/showcase/tailwind.config.js
+++ b/apps/showcase/tailwind.config.js
@@ -1,10 +1,10 @@
 /** @type {import('tailwindcss').Config} */
-const primeui = require('tailwindcss-primeui');
+import PrimeUI from 'tailwindcss-primeui';
 
-module.exports = {
+export default {
     darkMode: ['selector', '[class="p-dark"]'],
     content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
-    plugins: [primeui],
+    plugins: [PrimeUI],
     theme: {
         screens: {
             sm: '576px',
diff --git a/apps/showcase/tsconfig.json b/apps/showcase/tsconfig.json
index d2c6af91a..5fe39d161 100644
--- a/apps/showcase/tsconfig.json
+++ b/apps/showcase/tsconfig.json
@@ -1,4 +1,6 @@
 {
+    // https://nuxt.com/docs/guide/concepts/typescript
+    "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
diff --git a/package.json b/package.json
index 73415854e..202d62e21 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "dev": "pnpm --filter showcase dev",
         "preview": "pnpm --filter showcase preview",
         "hot:dev": "DEV_ENV=hot pnpm --filter showcase dev",
+        "labs:dev": "pnpm --filter labs dev",
         "module:dev": "pnpm --filter @primevue/nuxt-module dev",
         "security:check": "pnpm audit --prod --audit-level high",
         "lint": "eslint .",
@@ -55,10 +56,10 @@
         "eslint-plugin-vue": "^9.32.0",
         "globals": "^15.14.0",
         "pnpm": "^9.6.0",
-        "prettier": "3.4.2",
+        "prettier": "^3.5.2",
         "rollup-plugin-postcss": "^4.0.0",
         "rollup-plugin-vue": "^6.0.0-beta.9",
-        "typescript": "^4.9.4"
+        "typescript": "^5.7.3"
     },
     "publishConfig": {
         "access": "public"
diff --git a/packages/nuxt-module/README.md b/packages/nuxt-module/README.md
index 3bef35cd4..b168aa115 100644
--- a/packages/nuxt-module/README.md
+++ b/packages/nuxt-module/README.md
@@ -1,39 +1,84 @@
-![@primevue/nuxt-module](https://github.com/primefaces/primevue-nuxt-module/assets/11868120/c35e1180-573f-4650-bbe9-0c79bff71f05)
+<!--
+Get your module up and running quickly.
 
-# PrimeVue Nuxt Module
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# My Module
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![Discord Chat][discord-src]](discord-href)
 [![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
 
-- [✨ Release Notes](https://github.com/primefaces/primevue/packages/nuxt-module/blob/main/CHANGELOG.md#changelog)
-- [📖 Documentation](https://primevue.org/nuxt/)
+My new Nuxt module for doing amazing things.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
 
 ## Quick Setup
 
-1. Add `@primevue/nuxt-module` dependency to your project
+Install the module to your Nuxt application with one command:
 
 ```bash
-npx nuxi@latest module add primevue
+npx nuxi module add my-module
 ```
 
-2. Add `@primevue/nuxt-module` to the `modules` section of `nuxt.config.{ts,js}`
+That's it! You can now use My Module in your Nuxt app ✨
 
-```js
-{
-    modules: ['@primevue/nuxt-module'];
-}
-```
 
-That's it! You can now use `@primevue/nuxt-module` in your Nuxt app ✨
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
 
 <!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
 
-[npm-version-src]: https://img.shields.io/npm/v/@primevue/nuxt-module/latest.svg?color
-[npm-version-href]: https://npmjs.com/package/@primevue/nuxt-module
-[npm-downloads-src]: https://img.shields.io/npm/dm/@primevue/nuxt-module
-[npm-downloads-href]: https://npmjs.com/package/@primevue/nuxt-module
-[discord-src]: https://img.shields.io/discord/557940238991753223.svg?colorB=7289da&label=chat&logo=discord
-[license-src]: https://img.shields.io/npm/l/@primevue/nuxt-module.svg?style=flat&colorB=yellow
-[license-href]: https://npmjs.com/package/@primevue/nuxt-module
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com
diff --git a/packages/nuxt-module/package.json b/packages/nuxt-module/package.json
index c3a30ffee..ebae15b3c 100644
--- a/packages/nuxt-module/package.json
+++ b/packages/nuxt-module/package.json
@@ -24,8 +24,8 @@
         "primevue nuxt3",
         "primevue 4"
     ],
-    "sideEffects": false,
     "type": "module",
+    "sideEffects": false,
     "main": "./src/module.ts",
     "types": "./src/types.d.ts",
     "files": [
@@ -58,38 +58,36 @@
         "build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
         "build:package": "pnpm run build:prebuild && pnpm run prepack",
         "build:prebuild": "node ./scripts/prebuild.mjs",
-        "prepack": "nuxt-module-build",
+        "prepack": "nuxt-module-build build",
         "dev": "nuxi dev playground",
         "dev:build": "nuxi build playground",
-        "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
+        "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
         "dev:link": "pnpm link --global && npm link",
         "test": "vitest run",
-        "test:watch": "vitest watch"
+        "test:watch": "vitest watch",
+        "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
     },
     "dependencies": {
-        "@nuxt/kit": "^3.7.3",
+        "@nuxt/kit": "^3",
         "@primeuix/styled": "catalog:",
         "@primeuix/utils": "catalog:",
         "primevue": "workspace:*",
         "@primevue/auto-import-resolver": "workspace:*",
         "@primevue/metadata": "workspace:*",
-        "unplugin-vue-components": "0.27.0",
+        "unplugin-vue-components": "28.4.1",
         "pathe": "^1.1.2"
     },
     "devDependencies": {
-        "@types/node": "^18.17.17",
-        "@nuxt/devtools": "^0.8.5",
-        "@nuxt/eslint-config": "^0.2.0",
-        "@nuxt/module-builder": "^0.8.3",
-        "@nuxt/schema": "^3.7.3",
-        "@nuxt/test-utils": "^3.7.3",
-        "changelogen": "^0.5.5",
-        "nitropack": "^2.6.3",
-        "nuxt": "3.3.2",
-        "vitest": "^1.6.0",
-        "@primeuix/themes": "catalog:"
-    },
-    "engines": {
-        "node": ">=12.11.0"
+        "@primeuix/themes": "catalog:",
+        "@nuxt/devtools": "^2.1.0",
+        "@nuxt/eslint-config": "^1.1.0",
+        "@nuxt/module-builder": "^0.8.4",
+        "@nuxt/schema": "^3",
+        "@nuxt/test-utils": "^3",
+        "@types/node": "latest",
+        "changelogen": "^0.6.0",
+        "nuxt": "catalog:app",
+        "vitest": "^3.0.7",
+        "vue-tsc": "~2.1.6"
     }
 }
diff --git a/packages/nuxt-module/playground/nuxt.config.ts b/packages/nuxt-module/playground/nuxt.config.ts
index f784e3876..87d3c078d 100644
--- a/packages/nuxt-module/playground/nuxt.config.ts
+++ b/packages/nuxt-module/playground/nuxt.config.ts
@@ -1,7 +1,9 @@
-// @ts-ignore
 import Aura from '@primeuix/themes/aura';
+import { defineNuxtConfig } from 'nuxt/config';
 
 export default defineNuxtConfig({
+    compatibilityDate: '2025-02-27',
+    devtools: { enabled: true },
     modules: ['../src/module'],
     primevue: {
         usePrimeVue: true,
@@ -32,6 +34,5 @@ export default defineNuxtConfig({
             include: undefined,
             exclude: undefined
         }
-    },
-    devtools: { enabled: true }
+    }
 });
diff --git a/packages/nuxt-module/playground/package.json b/packages/nuxt-module/playground/package.json
index 202a524bc..f2286467b 100644
--- a/packages/nuxt-module/playground/package.json
+++ b/packages/nuxt-module/playground/package.json
@@ -7,7 +7,7 @@
         "build": "nuxi build",
         "generate": "nuxi generate"
     },
-    "devDependencies": {
-        "nuxt": "3.3.2"
+    "dependencies": {
+        "nuxt": "catalog:app"
     }
 }
diff --git a/packages/nuxt-module/playground/server/tsconfig.json b/packages/nuxt-module/playground/server/tsconfig.json
index deaaf79bf..b9ed69c19 100644
--- a/packages/nuxt-module/playground/server/tsconfig.json
+++ b/packages/nuxt-module/playground/server/tsconfig.json
@@ -1,3 +1,3 @@
 {
-    "extends": "../.nuxt/tsconfig.server.json"
+  "extends": "../.nuxt/tsconfig.server.json"
 }
diff --git a/packages/nuxt-module/playground/tsconfig.json b/packages/nuxt-module/playground/tsconfig.json
index 0d9b5cbd9..4b34df157 100644
--- a/packages/nuxt-module/playground/tsconfig.json
+++ b/packages/nuxt-module/playground/tsconfig.json
@@ -1,3 +1,3 @@
 {
-    "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json"
 }
diff --git a/packages/nuxt-module/scripts/prebuild.mjs b/packages/nuxt-module/scripts/prebuild.mjs
deleted file mode 100644
index e8449e469..000000000
--- a/packages/nuxt-module/scripts/prebuild.mjs
+++ /dev/null
@@ -1,5 +0,0 @@
-import path from 'path';
-import { removeBuild, resolvePath, updatePackageJson } from '../../../scripts/build-helper.mjs';
-
-removeBuild(import.meta.url);
-updatePackageJson(path.resolve(resolvePath(import.meta.url).__dirname, '../package.json'));
diff --git a/packages/nuxt-module/src/module.ts b/packages/nuxt-module/src/module.ts
index db9f4535e..7ba65d5b7 100644
--- a/packages/nuxt-module/src/module.ts
+++ b/packages/nuxt-module/src/module.ts
@@ -73,15 +73,7 @@ export default defineNuxtModule<ModuleOptions>({
                     resolvers: [
                         PrimeVueResolver({
                             components: moduleOptions.components,
-                            directives: moduleOptions.directives,
-                            resolve: (meta: MetaType) => {
-                                registeredStyles.push({
-                                    ...meta,
-                                    name: `${meta.name}Style`,
-                                    as: `${meta.as}Style`,
-                                    from: `${meta.from}/style`
-                                });
-                            }
+                            directives: moduleOptions.directives
                         })
                     ]
                 },
diff --git a/packages/nuxt-module/src/register.ts b/packages/nuxt-module/src/register.ts
index 06d5eeadd..cc1b80848 100644
--- a/packages/nuxt-module/src/register.ts
+++ b/packages/nuxt-module/src/register.ts
@@ -45,7 +45,8 @@ function registerComponents(resolvePath: any, moduleOptions: ModuleOptions) {
             global: true
         };
 
-        !moduleOptions.autoImport && addComponent(opt);
+        //!moduleOptions.autoImport && addComponent(opt);
+        addComponent(opt);
 
         return {
             ..._item,
@@ -111,7 +112,8 @@ function registerStyles(resolvePath: any, registered: any, moduleOptions: Module
         }
     ];
 
-    if (!moduleOptions.autoImport && !options?.unstyled) {
+    if (!options?.unstyled) {
+        // !moduleOptions.autoImport && !options?.unstyled
         if (isNotEmpty(registered?.components)) {
             styles.push({
                 name: 'BaseComponentStyle',
diff --git a/packages/nuxt-module/test/basic.test.ts b/packages/nuxt-module/test/basic.test.ts
index cd7605694..5167cad11 100644
--- a/packages/nuxt-module/test/basic.test.ts
+++ b/packages/nuxt-module/test/basic.test.ts
@@ -1,16 +1,15 @@
-import { $fetch, setup } from '@nuxt/test-utils';
-import { fileURLToPath } from 'node:url';
-import { describe, expect, it } from 'vitest';
+import { fileURLToPath } from 'node:url'
+import { describe, it, expect } from 'vitest'
+import { setup, $fetch } from '@nuxt/test-utils/e2e'
 
 describe('ssr', async () => {
-    await setup({
-        rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url))
-    });
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
+  })
 
-    it('renders the index page', async () => {
-        // Get response to a server-rendered page with `$fetch`.
-        const html = await $fetch('/');
-
-        expect(html).toContain('<div>basic</div>');
-    });
-});
+  it('renders the index page', async () => {
+    // Get response to a server-rendered page with `$fetch`.
+    const html = await $fetch('/')
+    expect(html).toContain('<div>basic</div>')
+  })
+})
diff --git a/packages/nuxt-module/test/fixtures/basic/app.vue b/packages/nuxt-module/test/fixtures/basic/app.vue
index 9e8b97ed7..29a9c81fa 100644
--- a/packages/nuxt-module/test/fixtures/basic/app.vue
+++ b/packages/nuxt-module/test/fixtures/basic/app.vue
@@ -1,5 +1,6 @@
 <template>
-    <div>basic</div>
+  <div>basic</div>
 </template>
 
-<script setup></script>
+<script setup>
+</script>
diff --git a/packages/nuxt-module/test/fixtures/basic/nuxt.config.ts b/packages/nuxt-module/test/fixtures/basic/nuxt.config.ts
index b35f4bbfe..ed0c53f1a 100644
--- a/packages/nuxt-module/test/fixtures/basic/nuxt.config.ts
+++ b/packages/nuxt-module/test/fixtures/basic/nuxt.config.ts
@@ -1,5 +1,7 @@
-import MyModule from '../../../src/module';
+import MyModule from '../../../src/module'
 
 export default defineNuxtConfig({
-    modules: [MyModule]
-});
+  modules: [
+    MyModule,
+  ],
+})
diff --git a/packages/nuxt-module/test/fixtures/basic/package.json b/packages/nuxt-module/test/fixtures/basic/package.json
index 4a63509f5..decd43340 100644
--- a/packages/nuxt-module/test/fixtures/basic/package.json
+++ b/packages/nuxt-module/test/fixtures/basic/package.json
@@ -1,5 +1,5 @@
 {
-    "private": true,
-    "name": "basic",
-    "type": "module"
+  "private": true,
+  "name": "basic",
+  "type": "module"
 }
diff --git a/packages/nuxt-module/tsconfig.json b/packages/nuxt-module/tsconfig.json
index 9ece83439..0b0072f12 100644
--- a/packages/nuxt-module/tsconfig.json
+++ b/packages/nuxt-module/tsconfig.json
@@ -1,4 +1,5 @@
 {
+    "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
         "module": "es2022",
         "moduleResolution": "Node",
@@ -9,5 +10,9 @@
             "@primevue/auto-import-resolver/*": ["../../packages/auto-import-resolver/src/*"]
         }
     },
-    "exclude": ["node_modules"]
+    "exclude": [
+      "dist",
+      "node_modules",
+      "playground"
+    ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94070faa1..be72217ed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,28 @@ settings:
   excludeLinksFromLockfile: false
 
 catalogs:
+  app:
+    '@docsearch/js':
+      specifier: ^3
+      version: 3.9.0
+    chart.js:
+      specifier: 3.3.2
+      version: 3.3.2
+    nuxt:
+      specifier: 3.15.4
+      version: 3.15.4
+    quill:
+      specifier: 2.0.0
+      version: 2.0.0
+    sass:
+      specifier: 1.45.0
+      version: 1.45.0
+    sass-loader:
+      specifier: 8.0.2
+      version: 8.0.2
+    vite:
+      specifier: 6.0.11
+      version: 6.0.11
   default:
     '@primeuix/forms':
       specifier: ^0.0.4
@@ -21,6 +43,12 @@ catalogs:
     '@primeuix/utils':
       specifier: ^0.5.1
       version: 0.5.1
+    primeicons:
+      specifier: ^7.0.0
+      version: 7.0.0
+    tailwindcss-primeui:
+      specifier: ^0.5.0
+      version: 0.5.1
 
 importers:
 
@@ -46,10 +74,10 @@ importers:
         version: 9.21.0(jiti@2.4.2)
       eslint-config-prettier:
         specifier: ^10.0.1
-        version: 10.0.1(eslint@9.21.0(jiti@2.4.2))
+        version: 10.0.2(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: ^5.2.3
-        version: 5.2.3(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2)
+        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.2)
       eslint-plugin-vue:
         specifier: ^9.32.0
         version: 9.32.0(eslint@9.21.0(jiti@2.4.2))
@@ -60,8 +88,8 @@ importers:
         specifier: ^9.6.0
         version: 9.15.6
       prettier:
-        specifier: 3.4.2
-        version: 3.4.2
+        specifier: ^3.5.2
+        version: 3.5.2
       rollup-plugin-postcss:
         specifier: ^4.0.0
         version: 4.0.2(postcss@8.5.3)
@@ -69,15 +97,23 @@ importers:
         specifier: ^6.0.0-beta.9
         version: 6.0.0(@vue/compiler-sfc@3.5.13)
       typescript:
-        specifier: ^4.9.4
-        version: 4.9.5
+        specifier: ^5.7.3
+        version: 5.7.3
+
+  apps/labs:
+    devDependencies:
+      nuxt:
+        specifier: catalog:app
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+      vite:
+        specifier: catalog:app
+        version: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   apps/showcase:
     dependencies:
       '@docsearch/js':
-        specifier: ^3.3.3
+        specifier: catalog:app
         version: 3.9.0(@algolia/client-search@5.20.3)(search-insights@2.17.3)
-    devDependencies:
       '@primeuix/themes':
         specifier: 'catalog:'
         version: 1.0.0
@@ -90,63 +126,64 @@ importers:
       '@primevue/nuxt-module':
         specifier: workspace:*
         version: link:../../packages/nuxt-module
-      '@stackblitz/sdk':
-        specifier: ^1.8.2
-        version: 1.11.0
-      autoprefixer:
-        specifier: ^10.4.16
-        version: 10.4.20(postcss@8.5.3)
       chart.js:
-        specifier: 3.3.2
+        specifier: catalog:app
         version: 3.3.2
-      jsdom:
-        specifier: ^19.0.0
-        version: 19.0.0
-      nuxt:
-        specifier: 3.3.2
-        version: 3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(sass@1.45.0)(terser@5.39.0)(typescript@4.9.5)
-      postcss:
-        specifier: ^8.4.31
-        version: 8.5.3
-      prettier:
-        specifier: 2.7.1
-        version: 2.7.1
       primeicons:
-        specifier: ^7.0.0
+        specifier: 'catalog:'
         version: 7.0.0
       primevue:
         specifier: workspace:*
         version: link:../../packages/primevue
       quill:
-        specifier: 2.0.0
+        specifier: catalog:app
         version: 2.0.0
-      sass:
-        specifier: 1.45.0
-        version: 1.45.0
-      sass-loader:
-        specifier: 8.0.2
-        version: 8.0.2(sass@1.45.0)(webpack@5.98.0)
       superstruct:
         specifier: ^2.0.2
         version: 2.0.2
-      tailwindcss:
-        specifier: ^3.4.1
-        version: 3.4.17
-      tailwindcss-primeui:
-        specifier: ^0.4.0
-        version: 0.4.0(tailwindcss@3.4.17)
-      typedoc:
-        specifier: 0.23.23
-        version: 0.23.23(typescript@4.9.5)
       valibot:
         specifier: ^0.42.1
-        version: 0.42.1(typescript@4.9.5)
+        version: 0.42.1(typescript@5.7.3)
       yup:
         specifier: 1.4.0
         version: 1.4.0
       zod:
         specifier: 3.23.8
         version: 3.23.8
+    devDependencies:
+      '@stackblitz/sdk':
+        specifier: ^1.8.2
+        version: 1.11.0
+      autoprefixer:
+        specifier: ^10
+        version: 10.4.20(postcss@8.5.3)
+      jsdom:
+        specifier: ^19.0.0
+        version: 19.0.0
+      nuxt:
+        specifier: catalog:app
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+      postcss:
+        specifier: ^8.4.31
+        version: 8.5.3
+      sass:
+        specifier: catalog:app
+        version: 1.45.0
+      sass-loader:
+        specifier: catalog:app
+        version: 8.0.2(sass@1.45.0)(webpack@5.98.0)
+      tailwindcss:
+        specifier: ^3
+        version: 3.4.17
+      tailwindcss-primeui:
+        specifier: 'catalog:'
+        version: 0.5.1(tailwindcss@3.4.17)
+      typedoc:
+        specifier: 0.27.9
+        version: 0.27.9(typescript@5.7.3)
+      vite:
+        specifier: catalog:app
+        version: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   packages/auto-import-resolver:
     dependencies:
@@ -156,10 +193,10 @@ importers:
     devDependencies:
       tsup:
         specifier: ^8.1.0
-        version: 8.3.6(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
+        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
       unplugin-vue-components:
         specifier: ^0.27.0
-        version: 0.27.0(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vue@3.5.13(typescript@5.7.3))
+        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vue@3.5.13(typescript@5.7.3))
     publishDirectory: dist
 
   packages/core:
@@ -202,13 +239,13 @@ importers:
     devDependencies:
       tsup:
         specifier: ^8.1.0
-        version: 8.3.6(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
+        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
     publishDirectory: dist
 
   packages/nuxt-module:
     dependencies:
       '@nuxt/kit':
-        specifier: ^3.7.3
+        specifier: ^3
         version: 3.15.4(magicast@0.3.5)
       '@primeuix/styled':
         specifier: 'catalog:'
@@ -229,42 +266,42 @@ importers:
         specifier: workspace:*
         version: link:../primevue
       unplugin-vue-components:
-        specifier: 0.27.0
-        version: 0.27.0(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vue@3.5.13(typescript@5.7.3))
+        specifier: 28.4.1
+        version: 28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.7.3))
     devDependencies:
       '@nuxt/devtools':
-        specifier: ^0.8.5
-        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3))(rollup@4.34.8)
+        specifier: ^2.1.0
+        version: 2.1.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/eslint-config':
-        specifier: ^0.2.0
-        version: 0.2.0(eslint@9.21.0(jiti@2.4.2))
+        specifier: ^1.1.0
+        version: 1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       '@nuxt/module-builder':
-        specifier: ^0.8.3
-        version: 0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.3.2)(typescript@5.7.3)
+        specifier: ^0.8.4
+        version: 0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.2)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
       '@nuxt/schema':
-        specifier: ^3.7.3
+        specifier: ^3
         version: 3.15.4
       '@nuxt/test-utils':
-        specifier: ^3.7.3
-        version: 3.17.0(@types/node@18.19.76)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@1.6.1(@types/node@18.19.76)(terser@5.39.0))(yaml@2.7.0)
+        specifier: ^3
+        version: 3.17.0(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       '@primeuix/themes':
         specifier: 'catalog:'
         version: 1.0.0
       '@types/node':
-        specifier: ^18.17.17
-        version: 18.19.76
+        specifier: latest
+        version: 22.13.5
       changelogen:
-        specifier: ^0.5.5
-        version: 0.5.7(magicast@0.3.5)
-      nitropack:
-        specifier: ^2.6.3
-        version: 2.10.4(encoding@0.1.13)(typescript@5.7.3)
+        specifier: ^0.6.0
+        version: 0.6.0(magicast@0.3.5)
       nuxt:
-        specifier: 3.3.2
-        version: 3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3)
+        specifier: catalog:app
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       vitest:
-        specifier: ^1.6.0
-        version: 1.6.1(@types/node@18.19.76)(terser@5.39.0)
+        specifier: ^3.0.7
+        version: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
+      vue-tsc:
+        specifier: ~2.1.6
+        version: 2.1.10(typescript@5.7.3)
 
   packages/primevue:
     dependencies:
@@ -384,6 +421,9 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@1.0.0':
+    resolution: {integrity: sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==}
+
   '@antfu/utils@0.7.10':
     resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
 
@@ -911,6 +951,12 @@ packages:
     resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
     engines: {node: '>=6.9.0'}
 
+  '@clack/core@0.4.1':
+    resolution: {integrity: sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==}
+
+  '@clack/prompts@0.10.0':
+    resolution: {integrity: sha512-H3rCl6CwW1NdQt9rE3n373t7o5cthPv7yUoxF2ytZvyvlJv89C5RYMJu83Hed8ODgys5vpBU0GKxIRG83jd8NQ==}
+
   '@cloudflare/kv-asset-handler@0.3.4':
     resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
     engines: {node: '>=16.13'}
@@ -938,18 +984,16 @@ packages:
       search-insights:
         optional: true
 
+  '@es-joy/jsdoccomment@0.49.0':
+    resolution: {integrity: sha512-xjZTSFgECpb9Ohuk5yMX5RhUEbfeQcuOp8IF60e+wyzWEF0M5xeSgqsfLtvPEX8BIyOX9saZqzuGPmZ8oWc+5Q==}
+    engines: {node: '>=16'}
+
   '@esbuild/aix-ppc64@0.19.12':
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.21.5':
-    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [aix]
-
   '@esbuild/aix-ppc64@0.24.2':
     resolution: {integrity: sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==}
     engines: {node: '>=18'}
@@ -962,12 +1006,6 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.17.19':
-    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-
   '@esbuild/android-arm64@0.18.20':
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -980,12 +1018,6 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.21.5':
-    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-
   '@esbuild/android-arm64@0.24.2':
     resolution: {integrity: sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==}
     engines: {node: '>=18'}
@@ -998,12 +1030,6 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.17.19':
-    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-
   '@esbuild/android-arm@0.18.20':
     resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
     engines: {node: '>=12'}
@@ -1016,12 +1042,6 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.21.5':
-    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-
   '@esbuild/android-arm@0.24.2':
     resolution: {integrity: sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==}
     engines: {node: '>=18'}
@@ -1034,12 +1054,6 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.17.19':
-    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-
   '@esbuild/android-x64@0.18.20':
     resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
     engines: {node: '>=12'}
@@ -1052,12 +1066,6 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.21.5':
-    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-
   '@esbuild/android-x64@0.24.2':
     resolution: {integrity: sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==}
     engines: {node: '>=18'}
@@ -1070,12 +1078,6 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.17.19':
-    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@esbuild/darwin-arm64@0.18.20':
     resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
     engines: {node: '>=12'}
@@ -1088,12 +1090,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.21.5':
-    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@esbuild/darwin-arm64@0.24.2':
     resolution: {integrity: sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==}
     engines: {node: '>=18'}
@@ -1106,12 +1102,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.17.19':
-    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-
   '@esbuild/darwin-x64@0.18.20':
     resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
     engines: {node: '>=12'}
@@ -1124,12 +1114,6 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.21.5':
-    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-
   '@esbuild/darwin-x64@0.24.2':
     resolution: {integrity: sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==}
     engines: {node: '>=18'}
@@ -1142,12 +1126,6 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.17.19':
-    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-
   '@esbuild/freebsd-arm64@0.18.20':
     resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
     engines: {node: '>=12'}
@@ -1160,12 +1138,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.21.5':
-    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-
   '@esbuild/freebsd-arm64@0.24.2':
     resolution: {integrity: sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==}
     engines: {node: '>=18'}
@@ -1178,12 +1150,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.17.19':
-    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-
   '@esbuild/freebsd-x64@0.18.20':
     resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
     engines: {node: '>=12'}
@@ -1196,12 +1162,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.21.5':
-    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-
   '@esbuild/freebsd-x64@0.24.2':
     resolution: {integrity: sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==}
     engines: {node: '>=18'}
@@ -1214,12 +1174,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.17.19':
-    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-
   '@esbuild/linux-arm64@0.18.20':
     resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
     engines: {node: '>=12'}
@@ -1232,12 +1186,6 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.21.5':
-    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-
   '@esbuild/linux-arm64@0.24.2':
     resolution: {integrity: sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==}
     engines: {node: '>=18'}
@@ -1250,12 +1198,6 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.17.19':
-    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
   '@esbuild/linux-arm@0.18.20':
     resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
     engines: {node: '>=12'}
@@ -1268,12 +1210,6 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.21.5':
-    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
   '@esbuild/linux-arm@0.24.2':
     resolution: {integrity: sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==}
     engines: {node: '>=18'}
@@ -1286,12 +1222,6 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.17.19':
-    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-
   '@esbuild/linux-ia32@0.18.20':
     resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
     engines: {node: '>=12'}
@@ -1304,12 +1234,6 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.21.5':
-    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-
   '@esbuild/linux-ia32@0.24.2':
     resolution: {integrity: sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==}
     engines: {node: '>=18'}
@@ -1322,12 +1246,6 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.17.19':
-    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-
   '@esbuild/linux-loong64@0.18.20':
     resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
     engines: {node: '>=12'}
@@ -1340,12 +1258,6 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.21.5':
-    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-
   '@esbuild/linux-loong64@0.24.2':
     resolution: {integrity: sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==}
     engines: {node: '>=18'}
@@ -1358,12 +1270,6 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.17.19':
-    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-
   '@esbuild/linux-mips64el@0.18.20':
     resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
     engines: {node: '>=12'}
@@ -1376,12 +1282,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.21.5':
-    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-
   '@esbuild/linux-mips64el@0.24.2':
     resolution: {integrity: sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==}
     engines: {node: '>=18'}
@@ -1394,12 +1294,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.17.19':
-    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-
   '@esbuild/linux-ppc64@0.18.20':
     resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
     engines: {node: '>=12'}
@@ -1412,12 +1306,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.21.5':
-    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-
   '@esbuild/linux-ppc64@0.24.2':
     resolution: {integrity: sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==}
     engines: {node: '>=18'}
@@ -1430,12 +1318,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.17.19':
-    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-
   '@esbuild/linux-riscv64@0.18.20':
     resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
     engines: {node: '>=12'}
@@ -1448,12 +1330,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.21.5':
-    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-
   '@esbuild/linux-riscv64@0.24.2':
     resolution: {integrity: sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==}
     engines: {node: '>=18'}
@@ -1466,12 +1342,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.17.19':
-    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-
   '@esbuild/linux-s390x@0.18.20':
     resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
     engines: {node: '>=12'}
@@ -1484,12 +1354,6 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.21.5':
-    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-
   '@esbuild/linux-s390x@0.24.2':
     resolution: {integrity: sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==}
     engines: {node: '>=18'}
@@ -1502,12 +1366,6 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.17.19':
-    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-
   '@esbuild/linux-x64@0.18.20':
     resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
     engines: {node: '>=12'}
@@ -1520,12 +1378,6 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.21.5':
-    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-
   '@esbuild/linux-x64@0.24.2':
     resolution: {integrity: sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==}
     engines: {node: '>=18'}
@@ -1550,12 +1402,6 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.17.19':
-    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-
   '@esbuild/netbsd-x64@0.18.20':
     resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
     engines: {node: '>=12'}
@@ -1568,12 +1414,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.21.5':
-    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-
   '@esbuild/netbsd-x64@0.24.2':
     resolution: {integrity: sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==}
     engines: {node: '>=18'}
@@ -1598,12 +1438,6 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.17.19':
-    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-
   '@esbuild/openbsd-x64@0.18.20':
     resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
     engines: {node: '>=12'}
@@ -1616,12 +1450,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.21.5':
-    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-
   '@esbuild/openbsd-x64@0.24.2':
     resolution: {integrity: sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==}
     engines: {node: '>=18'}
@@ -1634,12 +1462,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/sunos-x64@0.17.19':
-    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-
   '@esbuild/sunos-x64@0.18.20':
     resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
     engines: {node: '>=12'}
@@ -1652,12 +1474,6 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.21.5':
-    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-
   '@esbuild/sunos-x64@0.24.2':
     resolution: {integrity: sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==}
     engines: {node: '>=18'}
@@ -1670,12 +1486,6 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.17.19':
-    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-
   '@esbuild/win32-arm64@0.18.20':
     resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
     engines: {node: '>=12'}
@@ -1688,12 +1498,6 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.21.5':
-    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-
   '@esbuild/win32-arm64@0.24.2':
     resolution: {integrity: sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==}
     engines: {node: '>=18'}
@@ -1706,12 +1510,6 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.17.19':
-    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-
   '@esbuild/win32-ia32@0.18.20':
     resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
     engines: {node: '>=12'}
@@ -1724,12 +1522,6 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.21.5':
-    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-
   '@esbuild/win32-ia32@0.24.2':
     resolution: {integrity: sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==}
     engines: {node: '>=18'}
@@ -1742,12 +1534,6 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.17.19':
-    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-
   '@esbuild/win32-x64@0.18.20':
     resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
     engines: {node: '>=12'}
@@ -1760,12 +1546,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.21.5':
-    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-
   '@esbuild/win32-x64@0.24.2':
     resolution: {integrity: sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==}
     engines: {node: '>=18'}
@@ -1788,6 +1568,15 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
+  '@eslint/compat@1.2.7':
+    resolution: {integrity: sha512-xvv7hJE32yhegJ8xNAnb62ggiAwTYHBpUCWhRxEj/ksvgDJuSXfoDkBcRYaYNFiJ+jH0IE3K16hd+xXzhBgNbg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^9.10.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+
   '@eslint/config-array@0.19.2':
     resolution: {integrity: sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1812,11 +1601,8 @@ packages:
     resolution: {integrity: sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@hapi/hoek@9.3.0':
-    resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
-
-  '@hapi/topo@5.1.0':
-    resolution: {integrity: sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==}
+  '@gerrit0/mini-shiki@1.27.2':
+    resolution: {integrity: sha512-GeWyHz8ao2gBiUW4OJnQDxXQnFgZQwwQk05t/CVVgNBN7/rK8XZ7xY6YhLVv9tH3VppWWmr9DCl3MwemB/i+Og==}
 
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
@@ -1849,10 +1635,6 @@ packages:
     resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
     engines: {node: '>=18.0.0'}
 
-  '@jest/schemas@29.6.3':
-    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   '@jridgewell/gen-mapping@0.3.8':
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
@@ -1880,19 +1662,11 @@ packages:
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
-  '@mapbox/node-pre-gyp@1.0.11':
-    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
-    hasBin: true
-
   '@mapbox/node-pre-gyp@2.0.0':
     resolution: {integrity: sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  '@netlify/functions@1.6.0':
-    resolution: {integrity: sha512-6G92AlcpFrQG72XU8YH8pg94eDnq7+Q0YJhb8x4qNpdGsvuzvrfHWBmqFGp/Yshmv4wex9lpsTRZOocdrA2erQ==}
-    engines: {node: '>=14.0.0'}
-
   '@netlify/functions@2.8.2':
     resolution: {integrity: sha512-DeoAQh8LuNPvBE4qsKlezjKj0PyXDryOFJfJKo3Z1qZLKzQ21sT314KQKPVjfvw6knqijj+IO+0kHXy/TJiqNA==}
     engines: {node: '>=14.0.0'}
@@ -1917,76 +1691,62 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@npmcli/agent@2.2.2':
-    resolution: {integrity: sha512-OrcNPXdpSl9UX7qPVRWbmWMCSXrcDa2M9DvrbOTj7ao1S4PlqVFYv9/yLKMkrJKZ/V5A/kDBC690or307i26Og==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@npmcli/fs@3.1.1':
-    resolution: {integrity: sha512-q9CRWjpHCMIh5sVyefoD1cA7PkvILqCZsnSOEUUivORLjxCO/Irmue2DprETiNgEqktDBZaM1Bi+jrarx1XdCg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  '@npmcli/git@5.0.8':
-    resolution: {integrity: sha512-liASfw5cqhjNW9UFd+ruwwdEf/lbOAQjLL2XY2dFW/bkJheXDYZgOyul/4gVvEV4BWkTXjYGmDqMw9uegdbJNQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@npmcli/installed-package-contents@2.1.0':
-    resolution: {integrity: sha512-c8UuGLeZpm69BryRykLuKRyKFZYJsZSCT4aVY5ds4omyZqJ172ApzgfKJ5eV/r3HgLdUYgFVe54KSFVjKoe27w==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  '@nuxt/cli@3.22.2':
+    resolution: {integrity: sha512-Xtu3Loe3fVLvOE1/NC/SrE6Buu7Aj6qrnu3hewAfamUyZ7mVUBOsJ5ScUhofSK2L6muGPvS3R1PisuJMFbdexg==}
+    engines: {node: ^16.10.0 || >=18.0.0}
     hasBin: true
 
-  '@npmcli/node-gyp@3.0.0':
-    resolution: {integrity: sha512-gp8pRXC2oOxu0DUE1/M3bYtb1b3/DbJ5aM113+XJBgfXdussRAsX0YOrOhdd8WvnAR6auDBvJomGAkLKA5ydxA==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  '@npmcli/package-json@5.2.1':
-    resolution: {integrity: sha512-f7zYC6kQautXHvNbLEWgD/uGu1+xCn9izgqBfgItWSx22U0ZDekxN08A1vM8cTxj/cRVe0Q94Ode+tdoYmIOOQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@npmcli/promise-spawn@7.0.2':
-    resolution: {integrity: sha512-xhfYPXoV5Dy4UkY0D+v2KkwvnDfiA/8Mt3sWCGI/hM03NsYIH8ZaG6QzS9x7pje5vHZBZJ2v6VRFVTWACnqcmQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@npmcli/redact@1.1.0':
-    resolution: {integrity: sha512-PfnWuOkQgu7gCbnSsAisaX7hKOdZ4wSAhAzH3/ph5dSGau52kCRrMMGbiSQLwyTZpgldkZ49b0brkOr1AzGBHQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@npmcli/run-script@7.0.4':
-    resolution: {integrity: sha512-9ApYM/3+rBt9V80aYg6tZfzj3UWdiYyCt7gJUD1VJKvWF5nwKDSICXbYIQbspFTq6TOpbsEtIC0LArB8d9PFmg==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   '@nuxt/devalue@2.0.2':
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
 
-  '@nuxt/devtools-kit@0.8.5':
-    resolution: {integrity: sha512-gkZuythYbx6ybwQc2zE1DC40B3cj3rrSxHG6GIihWseilTea7G4QMkDliEbGnqyM4cLQmMBD+SU4DxiDVSNlQQ==}
+  '@nuxt/devtools-kit@1.7.0':
+    resolution: {integrity: sha512-+NgZ2uP5BuneqvQbe7EdOEaFEDy8762c99pLABtn7/Ur0ExEsQJMP7pYjjoTfKubhBqecr5Vo9yHkPBj1eHulQ==}
     peerDependencies:
-      nuxt: ^3.7.3
       vite: '*'
 
-  '@nuxt/devtools-wizard@0.8.5':
-    resolution: {integrity: sha512-4QbI4SgzKJrJTWmObsgUAM5wZ0vlYAy0eNTpXsc2aMQZkpmb74ebY9yvgyz9e5tLOvPOjZNUkFYNmun5uy3QRA==}
+  '@nuxt/devtools-kit@2.1.1':
+    resolution: {integrity: sha512-N3+qI41d4vdwZ8LdpxppWQ5GS3oDtRp7yTbW91osj7helkPLdLvsXUNVI2pJ2OZG0zdY8UNE1TbJe3DbgZL7wQ==}
+    peerDependencies:
+      vite: '>=6.0'
+
+  '@nuxt/devtools-wizard@1.7.0':
+    resolution: {integrity: sha512-86Gd92uEw0Dh2ErIYT9TMIrMOISE96fCRN4rxeryTvyiowQOsyrbkCeMNYrEehoRL+lohoyK6iDmFajadPNwWQ==}
     hasBin: true
 
-  '@nuxt/devtools@0.8.5':
-    resolution: {integrity: sha512-xNogUcv257gj/1NreQ0TiS7SqalHRoDYkPM5zaBbimBtUa7tlmtpbI/VpFrkpVbHOvBpPWk8JMMFkIDScYyMyw==}
+  '@nuxt/devtools-wizard@2.1.1':
+    resolution: {integrity: sha512-jdKmnDJVKCRyRl+MTArSJynRrqThnvIBQqtVoMLsKHX36TMi5IfJ8MmO/NRyqubd2J+g++j7zoixk1BCJWfNEQ==}
+    hasBin: true
+
+  '@nuxt/devtools@1.7.0':
+    resolution: {integrity: sha512-uvnjt5Zowkz7tZmnks2cGreg1XZIiSyVzQ2MYiRXACodlXcwJ0dpUS3WTxu8BR562K+772oRdvKie9AQlyZUgg==}
     hasBin: true
     peerDependencies:
-      nuxt: ^3.7.3
       vite: '*'
 
-  '@nuxt/eslint-config@0.2.0':
-    resolution: {integrity: sha512-NeJX8TLcnNAjQFiDs3XhP+9CHKK8jaKsP7eUyCSrQdgY7nqWe7VJx64lwzx5FTT4cW3RHMEyH+Y0qzLGYYoa/A==}
+  '@nuxt/devtools@2.1.1':
+    resolution: {integrity: sha512-jR3QChDs1mcCgC9efNAgjqgPUTWizV5TkUKBLK/1bDHIEGzkQ5WQwJ+PnjrDd4hj3QxL7pUvPCPLW9y3io/Q6w==}
+    hasBin: true
     peerDependencies:
-      eslint: ^8.48.0
+      vite: '>=6.0'
+
+  '@nuxt/eslint-config@1.1.0':
+    resolution: {integrity: sha512-xPKoACePUL5ItyLRqsExTnuQOeOr0JiQ7ESY7XKeJZAxAUUiWRuxpxDbPoHX9REKlz2oVBSzFQZFnJzpOPNyrA==}
+    peerDependencies:
+      eslint: ^9.0.0
+      eslint-plugin-format: '*'
+    peerDependenciesMeta:
+      eslint-plugin-format:
+        optional: true
+
+  '@nuxt/eslint-plugin@1.1.0':
+    resolution: {integrity: sha512-WRN2xvEdNfqLgjllDG8jtK/31daGitVpr2yb7N9XNNYIh29mWD0GP1lN8znBbJvnG3AXwN9qOb8NAXXvekw/IQ==}
+    peerDependencies:
+      eslint: ^9.0.0
 
   '@nuxt/kit@3.15.4':
     resolution: {integrity: sha512-dr7I7eZOoRLl4uxdxeL2dQsH0OrbEiVPIyBHnBpA4co24CBnoJoF+JINuP9l3PAM3IhUzc5JIVq3/YY3lEc3Hw==}
     engines: {node: '>=18.12.0'}
 
-  '@nuxt/kit@3.3.2':
-    resolution: {integrity: sha512-mHucMYuN/nVJp0p+L6ezzEls8Y1PerAXCJi01lS3Z5ozz+l2OusEfes8EBxWcy3x0C5465ignXCujQs3/LAvnQ==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-
   '@nuxt/module-builder@0.8.4':
     resolution: {integrity: sha512-RSPRfCpBLuJtbDRaAKmc3Qzt3O98kSeRItXcgx0ZLptvROWT+GywoLhnYznRp8kbkz+6Qb5Hfiwa/RYEMRuJ4Q==}
     hasBin: true
@@ -1998,10 +1758,6 @@ packages:
     resolution: {integrity: sha512-pAYZb/3ocSC/db1EFd5y+otmgHqUkvfxfhd9EknDB5DygnJuOIQNuGJ7LMJM6S2c0DYgBIHOdEelLxKHOjwbgQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
-  '@nuxt/schema@3.3.2':
-    resolution: {integrity: sha512-M2X/iwdX4hct31A7LA2+e41F91VZUXmwS5sZ03G49RnZdEXHMOKBO67e1d+5uxYmRD6eM/EyxWdPVgyLf6wocw==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-
   '@nuxt/telemetry@2.6.5':
     resolution: {integrity: sha512-lwMp9OHML/m0mjh7P5iz9PxINnk5smGkGebh88Wh8PjvnRooY1TBsbyq7mlSrNibpwD1BkwqhV5IAZOXWHLxMQ==}
     engines: {node: '>=18.12.0'}
@@ -2043,14 +1799,11 @@ packages:
       vitest:
         optional: true
 
-  '@nuxt/ui-templates@1.3.4':
-    resolution: {integrity: sha512-zjuslnkj5zboZGis5QpmR5gvRTx5N8Ha/Rll+RRT8YZhXVNBincifhZ9apUQ9f6T0xJE8IHPyVyPx6WokomdYw==}
-
-  '@nuxt/vite-builder@3.3.2':
-    resolution: {integrity: sha512-yvJpNDkQNSHQbbsSecvrd+W3GbISwLsYougSrEKmW3KgETb7F4OXK/VQAf95Yv60Tw904Jm59n7kzFMYls13LA==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
+  '@nuxt/vite-builder@3.15.4':
+    resolution: {integrity: sha512-yBK6tWT973+ExKC3ciTWymZpjJ+enToOtYz574kXCyGO0PbSnuXdoJKTvrwXw1lK97PajCKxExlmwI/3oLOmMQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0.0}
     peerDependencies:
-      vue: ^3.2.47
+      vue: ^3.3.4
 
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
@@ -2179,11 +1932,11 @@ packages:
   '@redocly/ajv@8.11.2':
     resolution: {integrity: sha512-io1JpnwtIcvojV7QKDUSIuMN/ikdOUd1ReEnUnMKGfDVridQZ31J0MmIuqwuRjWDZfmvr+Q0MqCcfHM2gTivOg==}
 
-  '@redocly/config@0.20.3':
-    resolution: {integrity: sha512-Nyyv1Bj7GgYwj/l46O0nkH1GTKWbO3Ixe7KFcn021aZipkZd+z8Vlu1BwkhqtVgivcKaClaExtWU/lDHkjBzag==}
+  '@redocly/config@0.21.0':
+    resolution: {integrity: sha512-JBtrrjBIURTnzb7KUIWOF46vSgpfC3rO6Mm8LjtRjtTNCLTyB+mOuU7HrTkVcvUCEBuSuzkivlTHMWT4JETz9A==}
 
-  '@redocly/openapi-core@1.30.0':
-    resolution: {integrity: sha512-ZZc+FXKoQXJ9cOR7qRKHxOfKOsGCj2wSodklKdtM2FofzyjzvIwn1rksD5+9iJxvHuORPOPv3ppAHcM+iMr/Ag==}
+  '@redocly/openapi-core@1.31.3':
+    resolution: {integrity: sha512-SyE/1TwM33tgldc3k367sg2i1kqnILOJZo6J96Y/Tt1PHhJp+na637CzCuTgdyY86GTPvNw42834Ks0Lkfk3Hg==}
     engines: {node: '>=18.17.0', npm: '>=9.5.0'}
 
   '@rollup/plugin-alias@5.1.1':
@@ -2208,15 +1961,6 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/plugin-commonjs@24.1.0':
-    resolution: {integrity: sha512-eSL45hjhCWI0jCCXcNtLVqM5N1JlBGvlFfY0m6oOYnLCJ6N0qEXoZql4sY2MOUArzhH4SA/qBpTxvvZp2Sc+DQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^2.68.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/plugin-commonjs@25.0.8':
     resolution: {integrity: sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==}
     engines: {node: '>=14.0.0'}
@@ -2289,19 +2033,6 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/plugin-wasm@6.2.2':
-    resolution: {integrity: sha512-gpC4R1G9Ni92ZIRTexqbhX7U+9estZrbhP+9SRb0DW9xpB9g7j34r+J2hqrcW/lRI7dJaU84MxZM0Rt82tqYPQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/pluginutils@4.2.1':
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-
   '@rollup/pluginutils@5.1.4':
     resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
     engines: {node: '>=14.0.0'}
@@ -2406,52 +2137,35 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rushstack/eslint-patch@1.10.5':
-    resolution: {integrity: sha512-kkKUDVlII2DQiKy7UstOR1ErJP8kUKAQ4oa+SQtM0K+lPdmmjj0YnnxBgtTVYH7mUKtbsxeFC9y0AmK7Yb78/A==}
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  '@sideway/address@4.1.5':
-    resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==}
+  '@shikijs/engine-oniguruma@1.29.2':
+    resolution: {integrity: sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==}
 
-  '@sideway/formula@3.0.1':
-    resolution: {integrity: sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==}
+  '@shikijs/types@1.29.2':
+    resolution: {integrity: sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==}
 
-  '@sideway/pinpoint@2.0.0':
-    resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
-
-  '@sigstore/bundle@2.3.2':
-    resolution: {integrity: sha512-wueKWDk70QixNLB363yHc2D2ItTgYiMTdPwK8D9dKQMR3ZQ0c35IxP5xnwQ8cNLoCgCRcHf14kE+CLIvNX1zmA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@sigstore/core@1.1.0':
-    resolution: {integrity: sha512-JzBqdVIyqm2FRQCulY6nbQzMpJJpSiJ8XXWMhtOX9eKgaXXpfNOF53lzQEjIydlStnd/eFtuC1dW4VYdD93oRg==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@sigstore/protobuf-specs@0.3.3':
-    resolution: {integrity: sha512-RpacQhBlwpBWd7KEJsRKcBQalbV28fvkxwTOJIqhIuDysMMaJW47V4OqW30iJB9uRpqOSxxEAQFdr8tTattReQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
-  '@sigstore/sign@2.3.2':
-    resolution: {integrity: sha512-5Vz5dPVuunIIvC5vBb0APwo7qKA4G9yM48kPWJT+OEERs40md5GoUR1yedwpekWZ4m0Hhw44m6zU+ObsON+iDA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@sigstore/tuf@2.3.4':
-    resolution: {integrity: sha512-44vtsveTPUpqhm9NCrbU8CWLe3Vck2HO1PNLw7RIajbB7xhtn5RBPm1VNSCMwqGYHhDsBJG8gDF0q4lgydsJvw==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@sigstore/verify@1.2.1':
-    resolution: {integrity: sha512-8iKx79/F73DKbGfRf7+t4dqrc0bRr0thdPrxAtCKWRm/F0tG71i6O1rvlnScncJLLBZHn3h8M3c1BSUAb9yu8g==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@sinclair/typebox@0.27.8':
-    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
   '@sindresorhus/merge-streams@2.3.0':
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
 
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
   '@stackblitz/sdk@1.11.0':
     resolution: {integrity: sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==}
 
+  '@stylistic/eslint-plugin@4.1.0':
+    resolution: {integrity: sha512-bytbL7qiici7yPyEiId0fGPK9kjQbzcPMj2aftPfzTCyJ/CRSKdtI+iVjM0LSGzGxfunflI+MDDU9vyIIeIpoQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=9.0.0'
+
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -2460,20 +2174,15 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
-  '@tufjs/canonical-json@2.0.0':
-    resolution: {integrity: sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  '@tufjs/models@2.0.1':
-    resolution: {integrity: sha512-92F7/SFyufn4DXsha9+QfKnN03JGqtMFMXgSHbZOo8JG59WkTni7UzAouNQDf7AuP9OAMxVOPQcqG3sB7w+kkg==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   '@types/chai-subset@1.3.5':
     resolution: {integrity: sha512-c2mPnw+xHtXDoHmdtcCXGwyLMiauiAyxWMzhGpqHC4nqI/Y5G2XhTampslK2rb59kpcuHon03UH8W6iYUzw88A==}
 
   '@types/chai@4.3.20':
     resolution: {integrity: sha512-/pC9HAB5I/xMlc5FP77qjCnI16ChlJfW0tGa0IUcFn38VJrTV6DeZ60NU5KZBtaOZqjdpwTWohz5HU1RrhiYxQ==}
 
+  '@types/doctrine@0.0.9':
+    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
+
   '@types/eslint-scope@3.7.7':
     resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
 
@@ -2483,14 +2192,20 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/http-proxy@1.17.16':
     resolution: {integrity: sha512-sdWoUajOB1cd0A8cRRQ1cfyWNbmFKLAqBB89Y8x5iYyG/mkJHc0YUH8pdWBy2omi9qtCpiIgGjuwO0dQST2l5w==}
 
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/node@18.19.76':
-    resolution: {integrity: sha512-yvR7Q9LdPz2vGpmpJX5LolrgRdWvB67MJKDPSgIIzpFbaf9a1j/f5DnLp5VDyHGMR0QZHlTr1afsD87QCXFHKw==}
+  '@types/node@22.13.5':
+    resolution: {integrity: sha512-+lTU0PxZXn0Dr1NBtC7Y8cR21AJr87dLLU953CWA6pMxxv/UDc7jYAY90upcrie1nRcD6XNG5HOYEDtgW5TxAg==}
+
+  '@types/normalize-package-data@2.4.4':
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
   '@types/parse-path@7.0.3':
     resolution: {integrity: sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==}
@@ -2498,134 +2213,150 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
-  '@types/semver@7.5.8':
-    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@typescript-eslint/eslint-plugin@6.21.0':
-    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/eslint-plugin@8.25.0':
+    resolution: {integrity: sha512-VM7bpzAe7JO/BFf40pIT1lJqS/z1F8OaSsUB3rpFJucQA4cOSuH2RVVVkFULN+En0Djgr29/jb4EQnedUo95KA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/parser@6.21.0':
-    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/parser@8.25.0':
+    resolution: {integrity: sha512-4gbs64bnbSzu4FpgMiQ1A+D+urxkoJk/kqlDJ2W//5SygaEiAP2B4GoS7TEdxgwol2el03gckFV9lJ4QOMiiHg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/scope-manager@6.21.0':
-    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/scope-manager@8.25.0':
+    resolution: {integrity: sha512-6PPeiKIGbgStEyt4NNXa2ru5pMzQ8OYKO1hX1z53HMomrmiSB+R5FmChgQAP1ro8jMtNawz+TRQo/cSXrauTpg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@6.21.0':
-    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/type-utils@8.25.0':
+    resolution: {integrity: sha512-d77dHgHWnxmXOPJuDWO4FDWADmGQkN5+tt6SFRZz/RtCWl4pHgFl3+WdYCn16+3teG09DY6XtEpf3gGD0a186g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/types@6.21.0':
-    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/types@8.25.0':
+    resolution: {integrity: sha512-+vUe0Zb4tkNgznQwicsvLUJgZIRs6ITeWSCclX1q85pR1iOiaj+4uZJIUp//Z27QWu5Cseiw3O3AR8hVpax7Aw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@6.21.0':
-    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/typescript-estree@8.25.0':
+    resolution: {integrity: sha512-ZPaiAKEZ6Blt/TPAx5Ot0EIB/yGtLI2EsGoY6F7XKklfMxYQyvtL+gT/UCqkMzO0BVFHLDlzvFqQzurYahxv9Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/utils@6.21.0':
-    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/utils@8.25.0':
+    resolution: {integrity: sha512-syqRbrEv0J1wywiLsK60XzHnQe/kRViI3zwFALrNEgnntn1l24Ra2KvOAWwWbWZ1lBZxZljPDGOq967dsl6fkA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/visitor-keys@6.21.0':
-    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/visitor-keys@8.25.0':
+    resolution: {integrity: sha512-kCYXKAum9CecGVHGij7muybDfTS2sD3t0L4bJsEZLkyrXUImiCTq1M3LG2SRtOhiHFwMR9wAFplpT6XHYjTkwQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@unhead/dom@1.11.19':
-    resolution: {integrity: sha512-udkgITdIblEWH3hsoFQMKW+6QXNO2qFZlZ2FI37bVAplQSnK/PytTPt/5oA1GWkoVwT0DsQNGHbU6kOg/3SlNg==}
+  '@unhead/dom@1.11.20':
+    resolution: {integrity: sha512-jgfGYdOH+xHJF/j8gudjsYu3oIjFyXhCWcgKaw3vQnT616gSqyqnGQGOItL+BQtQZACKNISwIfx5PuOtztMKLA==}
 
-  '@unhead/schema@1.11.19':
-    resolution: {integrity: sha512-7VhYHWK7xHgljdv+C01MepCSYZO2v6OhgsfKWPxRQBDDGfUKCUaChox0XMq3tFvXP6u4zSp6yzcDw2yxCfVMwg==}
+  '@unhead/schema@1.11.20':
+    resolution: {integrity: sha512-0zWykKAaJdm+/Y7yi/Yds20PrUK7XabLe9c3IRcjnwYmSWY6z0Cr19VIs3ozCj8P+GhR+/TI2mwtGlueCEYouA==}
 
-  '@unhead/shared@1.11.19':
-    resolution: {integrity: sha512-UYE9EIeQLJOhx8vC71bWGkAGY4Zzq/H8qYlihowUg4NiFOfL+KKMnj96datb74PRxSDvHac9V3OLktNcsX2NuA==}
+  '@unhead/shared@1.11.20':
+    resolution: {integrity: sha512-1MOrBkGgkUXS+sOKz/DBh4U20DNoITlJwpmvSInxEUNhghSNb56S0RnaHRq0iHkhrO/cDgz2zvfdlRpoPLGI3w==}
 
-  '@unhead/ssr@1.11.19':
-    resolution: {integrity: sha512-OH+rj6xBTdYyLsSntk4lEQyR+z57aEUZIiR2UpPl1zWGtBZPIr5zs3GY5+EyJ8t8e0zLemPR/Pu7VembTJ8o1w==}
+  '@unhead/ssr@1.11.20':
+    resolution: {integrity: sha512-j6ehzmdWGAvv0TEZyLE3WBnG1ULnsbKQcLqBDh3fvKS6b3xutcVZB7mjvrVE7ckSZt6WwOtG0ED3NJDS7IjzBA==}
 
-  '@unhead/vue@1.11.19':
-    resolution: {integrity: sha512-/XATTP8wVLs3+2Pkj2crvr/Z55nybVQyOwISh+sAlr/48/9n3jGNiCZHKpHgL4MpOnGT4krwzWzbfhBO/G2BSQ==}
+  '@unhead/vue@1.11.20':
+    resolution: {integrity: sha512-sqQaLbwqY9TvLEGeq8Fd7+F2TIuV3nZ5ihVISHjWpAM3y7DwNWRU7NmT9+yYT+2/jw1Vjwdkv5/HvDnvCLrgmg==}
     peerDependencies:
       vue: '>=2.7 || >=3'
 
-  '@vercel/nft@0.22.6':
-    resolution: {integrity: sha512-gTsFnnT4mGxodr4AUlW3/urY+8JKKB452LwF3m477RFUJTAaDmcz2JqFuInzvdybYIeyIv1sSONEJxsxnbQ5JQ==}
-    engines: {node: '>=14'}
-    hasBin: true
-
   '@vercel/nft@0.27.10':
     resolution: {integrity: sha512-zbaF9Wp/NsZtKLE4uVmL3FyfFwlpDyuymQM1kPbeT0mVOHKDQQNjnnfslB3REg3oZprmNFJuh3pkHBk2qAaizg==}
     engines: {node: '>=16'}
     hasBin: true
 
-  '@vitejs/plugin-vue-jsx@3.1.0':
-    resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  '@vitejs/plugin-vue-jsx@4.1.1':
+    resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^4.0.0 || ^5.0.0
+      vite: ^5.0.0 || ^6.0.0
       vue: ^3.0.0
 
-  '@vitejs/plugin-vue@4.6.2':
-    resolution: {integrity: sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  '@vitejs/plugin-vue@5.2.1':
+    resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^4.0.0 || ^5.0.0
+      vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
   '@vitest/expect@0.29.8':
     resolution: {integrity: sha512-xlcVXn5I5oTq6NiZSY3ykyWixBxr5mG8HYtjvpgg6KaqHm0mvhX18xuwl5YGxIRNt/A5jidd7CWcNHrSvgaQqQ==}
 
-  '@vitest/expect@1.6.1':
-    resolution: {integrity: sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog==}
+  '@vitest/expect@3.0.7':
+    resolution: {integrity: sha512-QP25f+YJhzPfHrHfYHtvRn+uvkCFCqFtW9CktfBxmB+25QqWsx7VB2As6f4GmwllHLDhXNHvqedwhvMmSnNmjw==}
+
+  '@vitest/mocker@3.0.7':
+    resolution: {integrity: sha512-qui+3BLz9Eonx4EAuR/i+QlCX6AUZ35taDQgwGkK/Tw6/WgwodSrjN1X2xf69IA/643ZX5zNKIn2svvtZDrs4w==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.0.7':
+    resolution: {integrity: sha512-CiRY0BViD/V8uwuEzz9Yapyao+M9M008/9oMOSQydwbwb+CMokEq3XVaF3XK/VWaOK0Jm9z7ENhybg70Gtxsmg==}
 
   '@vitest/runner@0.29.8':
     resolution: {integrity: sha512-FzdhnRDwEr/A3Oo1jtIk/B952BBvP32n1ObMEb23oEJNO+qO5cBet6M2XWIDQmA7BDKGKvmhUf2naXyp/2JEwQ==}
 
-  '@vitest/runner@1.6.1':
-    resolution: {integrity: sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA==}
+  '@vitest/runner@3.0.7':
+    resolution: {integrity: sha512-WeEl38Z0S2ZcuRTeyYqaZtm4e26tq6ZFqh5y8YD9YxfWuu0OFiGFUbnxNynwLjNRHPsXyee2M9tV7YxOTPZl2g==}
 
-  '@vitest/snapshot@1.6.1':
-    resolution: {integrity: sha512-WvidQuWAzU2p95u8GAKlRMqMyN1yOJkGHnx3M1PL9Raf7AQ1kwLKg04ADlCa3+OXUZE7BceOhVZiuWAbzCKcUQ==}
+  '@vitest/snapshot@3.0.7':
+    resolution: {integrity: sha512-eqTUryJWQN0Rtf5yqCGTQWsCFOQe4eNz5Twsu21xYEcnFJtMU5XvmG0vgebhdLlrHQTSq5p8vWHJIeJQV8ovsA==}
 
   '@vitest/spy@0.29.8':
     resolution: {integrity: sha512-VdjBe9w34vOMl5I5mYEzNX8inTxrZ+tYUVk9jxaZJmHFwmDFC/GV3KBFTA/JKswr3XHvZL+FE/yq5EVhb6pSAw==}
 
-  '@vitest/spy@1.6.1':
-    resolution: {integrity: sha512-MGcMmpGkZebsMZhbQKkAf9CX5zGvjkBTqf8Zx3ApYWXr3wG+QvEu2eXWfnIIWYSJExIp4V9FCKDEeygzkYrXMw==}
+  '@vitest/spy@3.0.7':
+    resolution: {integrity: sha512-4T4WcsibB0B6hrKdAZTM37ekuyFZt2cGbEGd2+L0P8ov15J1/HUsUaqkXEQPNAWr4BtPPe1gI+FYfMHhEKfR8w==}
 
   '@vitest/utils@0.29.8':
     resolution: {integrity: sha512-qGzuf3vrTbnoY+RjjVVIBYfuWMjn3UMUqyQtdGNZ6ZIIyte7B37exj6LaVkrZiUTvzSadVvO/tJm8AEgbGCBPg==}
 
-  '@vitest/utils@1.6.1':
-    resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
+  '@vitest/utils@3.0.7':
+    resolution: {integrity: sha512-xePVpCRfooFX3rANQjwoditoXgWb1MaFbzmGuPP59MK6i13mrnDw/yEIyJudLeW6/38mCNcwCiJIGmpDPibAIg==}
+
+  '@volar/language-core@2.4.11':
+    resolution: {integrity: sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==}
+
+  '@volar/source-map@2.4.11':
+    resolution: {integrity: sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==}
+
+  '@volar/typescript@2.4.11':
+    resolution: {integrity: sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==}
+
+  '@vue-macros/common@1.16.1':
+    resolution: {integrity: sha512-Pn/AWMTjoMYuquepLZP813BIcq8DTZiNCoaceuNlvaYuOTd8DqBZWc5u0uOMQZMInwME1mdSmmBAcTluiV9Jtg==}
+    engines: {node: '>=16.14.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.2.25
+    peerDependenciesMeta:
+      vue:
+        optional: true
 
   '@vue/babel-helper-vue-transform-on@1.2.5':
     resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
@@ -2655,9 +2386,39 @@ packages:
   '@vue/compiler-ssr@3.5.13':
     resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
 
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
+  '@vue/devtools-core@7.6.8':
+    resolution: {integrity: sha512-8X4roysTwzQ94o7IobjVcOd1aZF5iunikrMrHPI2uUdigZCi2kFTQc7ffYiFiTNaLElCpjOhCnM7bo7aK1yU7A==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@vue/devtools-core@7.7.2':
+    resolution: {integrity: sha512-lexREWj1lKi91Tblr38ntSsy6CvI8ba7u+jmwh2yruib/ltLUcsIzEjCnrkh1yYGGIKXbAuYV2tOG10fGDB9OQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@vue/devtools-kit@7.6.8':
+    resolution: {integrity: sha512-JhJ8M3sPU+v0P2iZBF2DkdmR9L0dnT5RXJabJqX6o8KtFs3tebdvfoXV2Dm3BFuqeECuMJIfF1aCzSt+WQ4wrw==}
+
+  '@vue/devtools-kit@7.7.2':
+    resolution: {integrity: sha512-CY0I1JH3Z8PECbn6k3TqM1Bk9ASWxeMtTCvZr7vb+CHi+X/QwQm5F1/fPagraamKMAHVfuuCbdcnNg1A4CYVWQ==}
+
+  '@vue/devtools-shared@7.7.2':
+    resolution: {integrity: sha512-uBFxnp8gwW2vD6FrJB8JZLUzVb6PNRG0B0jBnHsOH8uKyva2qINY8PTF5Te4QlTbMDqU5K6qtJDr6cNsKWhbOA==}
+
+  '@vue/language-core@2.1.10':
+    resolution: {integrity: sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@vue/reactivity@3.5.13':
     resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
@@ -2733,9 +2494,6 @@ packages:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
     deprecated: Use your platform's native atob() and btoa() methods instead
 
-  abbrev@1.1.1:
-    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
-
   abbrev@2.0.0:
     resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -2787,10 +2545,6 @@ packages:
     resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
     engines: {node: '>= 14'}
 
-  aggregate-error@3.1.0:
-    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
-    engines: {node: '>=8'}
-
   ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
@@ -2819,6 +2573,9 @@ packages:
     resolution: {integrity: sha512-iNC6BGvipaalFfDfDnXUje8GUlW5asj0cTMsZJwO/0rhsyLx1L7GZFAY8wW+eQ6AM4Yge2p5GSE5hrBlfSD90Q==}
     engines: {node: '>= 14.0.0'}
 
+  alien-signals@0.2.2:
+    resolution: {integrity: sha512-cZIRkbERILsBOXTQmMrxc9hgpxglstn69zm+F1ARf4aPAzdAFYd6sBq87ErO0Fj3DV94tglcyHG5kQz9nDC/8A==}
+
   ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
@@ -2847,6 +2604,10 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
+  ansis@3.16.0:
+    resolution: {integrity: sha512-sU7d/tfZiYrsIAXbdL/CNZld5bCkruzwT5KmqmadCJYxuLxHAOBjidxD5+iLmN/6xEfjcQq1l7OpsiCBlc4LzA==}
+    engines: {node: '>=14'}
+
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -2854,33 +2615,17 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  aproba@2.0.0:
-    resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
-
-  archiver-utils@2.1.0:
-    resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==}
-    engines: {node: '>= 6'}
-
-  archiver-utils@3.0.4:
-    resolution: {integrity: sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==}
-    engines: {node: '>= 10'}
-
   archiver-utils@5.0.2:
     resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
     engines: {node: '>= 14'}
 
-  archiver@5.3.2:
-    resolution: {integrity: sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==}
-    engines: {node: '>= 10'}
-
   archiver@7.0.1:
     resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
     engines: {node: '>= 14'}
 
-  are-we-there-yet@2.0.0:
-    resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
-    engines: {node: '>=10'}
-    deprecated: This package is no longer supported.
+  are-docs-informative@0.0.2:
+    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
+    engines: {node: '>=14'}
 
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
@@ -2888,13 +2633,21 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-
   assertion-error@1.1.0:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  ast-kit@1.4.0:
+    resolution: {integrity: sha512-BlGeOw73FDsX7z0eZE/wuuafxYoek2yzNJ6l6A1nsb4+z/p87TOPbHaWuN53kFKNuUXiCQa2M+xLF71IqQmRSw==}
+    engines: {node: '>=16.14.0'}
+
+  ast-walker-scope@0.6.2:
+    resolution: {integrity: sha512-1UWOyC50xI3QZkRuDj6PqDtpm1oHWtYs+NQGwqL/2R11eN3Q81PHAHPM0SWW3BNQm53UDwS//Jv8L4CCVLM1bQ==}
+    engines: {node: '>=16.14.0'}
+
   async-sema@3.1.1:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
 
@@ -2911,9 +2664,6 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  axios@1.7.9:
-    resolution: {integrity: sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==}
-
   b4a@1.6.7:
     resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
 
@@ -2941,10 +2691,6 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  big-integer@1.6.52:
-    resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
-    engines: {node: '>=0.6'}
-
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
@@ -2958,16 +2704,12 @@ packages:
   birpc@0.2.19:
     resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==}
 
-  bl@4.1.0:
-    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+  birpc@2.2.0:
+    resolution: {integrity: sha512-1/22obknhoj56PcE+pZPp6AbWDdY55M81/ofpPW3Ltlp9Eh4zoFFLswvZmNpRTb790CY5tsNfgbYeNOqIARJfQ==}
 
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  bplist-parser@0.2.0:
-    resolution: {integrity: sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==}
-    engines: {node: '>= 5.10.0'}
-
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -2986,9 +2728,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
   buffer-crc32@1.0.0:
     resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
     engines: {node: '>=8.0.0'}
@@ -2996,15 +2735,12 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  buffer@5.7.1:
-    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
-
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  bundle-name@3.0.0:
-    resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==}
-    engines: {node: '>=12'}
+  builtin-modules@4.0.0:
+    resolution: {integrity: sha512-p1n8zyCkt1BVrKNFymOHjcDSAl7oq/gUvfgULv2EblgpPVQlQr9yHnWjg9IJ2MhfwPqiYqMMrr01OY7yQoK2yA==}
+    engines: {node: '>=18.20'}
 
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
@@ -3016,14 +2752,6 @@ packages:
     peerDependencies:
       esbuild: '>=0.18'
 
-  c12@1.11.2:
-    resolution: {integrity: sha512-oBs8a4uvSDO9dm8b7OCFW7+dgtVrwmwnrVXYzLm43ta7ep2jCn/0MhoUFygIWtxhyy6+/MG7/agvpY0U1Iemew==}
-    peerDependencies:
-      magicast: ^0.3.4
-    peerDependenciesMeta:
-      magicast:
-        optional: true
-
   c12@2.0.1:
     resolution: {integrity: sha512-Z4JgsKXHG37C6PYUtIxCfLJZvo6FyhHJoClwwb9ftUkLpPSkuYqn6Tr+vnaN8hymm0kIbcg6Ey3kv/Q71k5w/A==}
     peerDependencies:
@@ -3040,14 +2768,18 @@ packages:
       magicast:
         optional: true
 
+  c12@3.0.1:
+    resolution: {integrity: sha512-xuYi2qvu3ne8+5KchFjNLeK/j7Antw/18JCJyMI7lPoBeZ2aF1wK6rILCBkCoD+H2zG2SfjlanfLUNQ6v1bbNQ==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  cacache@18.0.4:
-    resolution: {integrity: sha512-B+L5iIa9mgcjLbliir2th36yEwPftrzteHYujzsx3dFP/31GCHcIeS8f5MGd80odLOjaOvSpU3EEAmRQptkxLQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -3063,13 +2795,17 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001700:
-    resolution: {integrity: sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==}
+  caniuse-lite@1.0.30001701:
+    resolution: {integrity: sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==}
 
   chai@4.5.0:
     resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
     engines: {node: '>=4'}
 
+  chai@5.2.0:
+    resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
+    engines: {node: '>=12'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -3081,8 +2817,8 @@ packages:
   change-case@5.4.4:
     resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
 
-  changelogen@0.5.7:
-    resolution: {integrity: sha512-cTZXBcJMl3pudE40WENOakXkcVtrbBpbkmSkM20NdRiUqa4+VYRdXdEsgQ0BNQ6JBE2YymTNWtPKVF7UCTN5+g==}
+  changelogen@0.6.0:
+    resolution: {integrity: sha512-bw9NbPIpPxZbjbIxvXqs39qKwPIV3VsFbRdXPCphWsEp84mBCAEszBj67AqBXN719zPs/x5ABFFRoLoANMJSeQ==}
     hasBin: true
 
   chart.js@3.3.2:
@@ -3091,6 +2827,10 @@ packages:
   check-error@1.0.3:
     resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
 
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -3111,15 +2851,16 @@ packages:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
 
+  ci-info@4.1.0:
+    resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
+    engines: {node: '>=8'}
+
   citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
-  clean-stack@2.2.0:
-    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
-    engines: {node: '>=6'}
-
-  clear@0.1.0:
-    resolution: {integrity: sha512-qMjRnoL+JDPJHeLePZJuao6+8orzHMGP04A8CdwCNsKhRbOnKRjefxONR7bwILT3MHecxKBjHkKL/tkZ8r4Uzw==}
+  clean-regexp@1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
 
   cli-truncate@3.1.0:
     resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
@@ -3148,19 +2889,12 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color-support@1.1.3:
-    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
-    hasBin: true
-
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
   colorette@1.4.0:
     resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
 
-  colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
-
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -3184,16 +2918,16 @@ packages:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
 
+  comment-parser@1.4.1:
+    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
+    engines: {node: '>= 12.0.0'}
+
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
   compatx@0.1.8:
     resolution: {integrity: sha512-jcbsEAR81Bt5s1qOFymBufmCbXCXbk0Ql+K5ouj6gCyx2yHlu6AgmGIi9HxfKixpUDO5bCFJUHQ5uM6ecbTebw==}
 
-  compress-commons@4.1.2:
-    resolution: {integrity: sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==}
-    engines: {node: '>= 10'}
-
   compress-commons@6.0.2:
     resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
     engines: {node: '>= 14'}
@@ -3210,28 +2944,23 @@ packages:
   config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
-  consola@2.15.3:
-    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
-
   consola@3.4.0:
     resolution: {integrity: sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
-  console-control-strings@1.1.0:
-    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
-
   convert-gitmoji@0.1.5:
     resolution: {integrity: sha512-4wqOafJdk2tqZC++cjcbGcaJ13BZ3kwldf06PTiAQRAB76Z1KJwZNL1SaRZMi2w1FM9RYTgZ6QErS8NUl/GBmQ==}
 
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie-es@0.5.0:
-    resolution: {integrity: sha512-RyZrFi6PNpBFbIaQjXDlFIhFVqV42QeKSZX1yQIl6ihImq6vcHNGMtqQ/QzY3RMPuYSkvsRwtnt5M9NeYxKt0g==}
-
   cookie-es@1.2.2:
     resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
 
+  copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+
   core-js-compat@3.40.0:
     resolution: {integrity: sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==}
 
@@ -3243,21 +2972,18 @@ packages:
     engines: {node: '>=0.8'}
     hasBin: true
 
-  crc32-stream@4.0.3:
-    resolution: {integrity: sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==}
-    engines: {node: '>= 10'}
-
   crc32-stream@6.0.0:
     resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
     engines: {node: '>= 14'}
 
-  create-require@1.1.1:
-    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-
   croner@9.0.0:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
+  cronstrue@2.55.0:
+    resolution: {integrity: sha512-ZsBZNtQWb0Rk6CNGJlzpPBYqNE7t93Aez5ZCExLihGwmIpE5qThSTDQzDV8Z1Nw6ksmLkwI98nPKyciZ5sH7dw==}
+    hasBin: true
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -3361,9 +3087,6 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  cuint@0.2.2:
-    resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==}
-
   data-urls@3.0.2:
     resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
     engines: {node: '>=12'}
@@ -3391,6 +3114,9 @@ packages:
       sqlite3:
         optional: true
 
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -3399,6 +3125,14 @@ packages:
       supports-color:
         optional: true
 
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -3415,6 +3149,10 @@ packages:
     resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
     engines: {node: '>=6'}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -3422,18 +3160,10 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
-  default-browser-id@3.0.0:
-    resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==}
-    engines: {node: '>=12'}
-
   default-browser-id@5.0.0:
     resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
     engines: {node: '>=18'}
 
-  default-browser@4.0.0:
-    resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
-    engines: {node: '>=14.16'}
-
   default-browser@5.2.1:
     resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
     engines: {node: '>=18'}
@@ -3453,9 +3183,6 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
-  delegates@1.0.0:
-    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
-
   denque@2.1.0:
     resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
     engines: {node: '>=0.10'}
@@ -3464,9 +3191,6 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
-  destr@1.2.2:
-    resolution: {integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==}
-
   destr@2.0.3:
     resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
 
@@ -3483,17 +3207,20 @@ packages:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
 
+  devalue@5.1.1:
+    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
-  diff-sequences@29.6.3:
-    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
 
+  diff@7.0.0:
+    resolution: {integrity: sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==}
+    engines: {node: '>=0.3.1'}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -3501,6 +3228,10 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
@@ -3529,10 +3260,6 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
-  dot-prop@7.2.0:
-    resolution: {integrity: sha512-Ol/IPXUARn9CSbkrdV4VJo7uCy1I3VuSiWCaFSg+8BdUOzF9n3jefIpcgAydvUZbTdEBZs2vEiTiS9m61ssiDA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   dot-prop@9.0.0:
     resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
     engines: {node: '>=18'}
@@ -3559,8 +3286,8 @@ packages:
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  electron-to-chromium@1.5.104:
-    resolution: {integrity: sha512-Us9M2L4cO/zMBqVkJtnj353nQhMju9slHm62NprKTmdF3HH8wYOtNvDFq/JB2+ZRoGLzdvYDiATlMHs98XBM1g==}
+  electron-to-chromium@1.5.109:
+    resolution: {integrity: sha512-AidaH9JETVRr9DIPGfp1kAarm/W6hRJTPuCnkF+2MqhF4KaAgRIcBc8nvjk+YMXZhwfISof/7WG29eS4iGxQLQ==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3580,16 +3307,6 @@ packages:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
-  encoding@0.1.13:
-    resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
-
-  end-of-stream@1.4.4:
-    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
-
-  enhanced-resolve@4.5.0:
-    resolution: {integrity: sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==}
-    engines: {node: '>=6.9.0'}
-
   enhanced-resolve@5.18.1:
     resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
     engines: {node: '>=10.13.0'}
@@ -3601,20 +3318,15 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  env-paths@2.2.1:
-    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
-    engines: {node: '>=6'}
-
-  err-code@2.0.3:
-    resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
-
-  errno@0.1.8:
-    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
-    hasBin: true
-
   error-stack-parser-es@0.1.5:
     resolution: {integrity: sha512-xHku1X40RO+fO8yJ8Wh2f2rZWVjqyhb1zgq1yZ8aZRQkv6OOKhKWRUaht3eSCUbAOBaKIgM+ykwFLE+QUxgGeg==}
 
+  error-stack-parser-es@1.0.5:
+    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
+
+  errx@0.1.0:
+    resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -3634,11 +3346,6 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  esbuild@0.17.19:
-    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
-    engines: {node: '>=12'}
-    hasBin: true
-
   esbuild@0.18.20:
     resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
     engines: {node: '>=12'}
@@ -3649,11 +3356,6 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  esbuild@0.21.5:
-    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
-    engines: {node: '>=12'}
-    hasBin: true
-
   esbuild@0.24.2:
     resolution: {integrity: sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==}
     engines: {node: '>=18'}
@@ -3671,6 +3373,10 @@ packages:
   escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -3684,12 +3390,40 @@ packages:
     engines: {node: '>=6.0'}
     hasBin: true
 
-  eslint-config-prettier@10.0.1:
-    resolution: {integrity: sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==}
+  eslint-config-flat-gitignore@2.1.0:
+    resolution: {integrity: sha512-cJzNJ7L+psWp5mXM7jBX+fjHtBvvh06RBlcweMhKD8jWqQw0G78hOW5tpVALGHGFPsBV+ot2H+pdDGJy6CV8pA==}
+    peerDependencies:
+      eslint: ^9.5.0
+
+  eslint-config-prettier@10.0.2:
+    resolution: {integrity: sha512-1105/17ZIMjmCOJOPNfVdbXafLCLj3hPmkmB7dLgt7XsQ/zkxSuDerE/xgO3RxoHysR1N1whmquY0lSn2O0VLg==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
 
+  eslint-flat-config-utils@2.0.1:
+    resolution: {integrity: sha512-brf0eAgQ6JlKj3bKfOTuuI7VcCZvi8ZCD1MMTVoEvS/d38j8cByZViLFALH/36+eqB17ukmfmKq3bWzGvizejA==}
+
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-merge-processors@2.0.0:
+    resolution: {integrity: sha512-sUuhSf3IrJdGooquEUB5TNpGNpBoQccbnaLHsb1XkBLUPPqCNivCpY05ZcpCOiV9uHwO2yxXEWVczVclzMxYlA==}
+    peerDependencies:
+      eslint: '*'
+
+  eslint-plugin-import-x@4.6.1:
+    resolution: {integrity: sha512-wluSUifMIb7UfwWXqx7Yx0lE/SGCcGXECLx/9bCmbY2nneLwvAZ4vkd1IXDjPKFvdcdUgr1BaRnaRpx3k2+Pfw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  eslint-plugin-jsdoc@50.6.3:
+    resolution: {integrity: sha512-NxbJyt1M5zffPcYZ8Nb53/8nnbIScmiLAMdoe0/FAszwb7lcSiX3iYBTsuF7RV84dZZJC8r3NghomrUXsmWvxQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+
   eslint-plugin-prettier@5.2.3:
     resolution: {integrity: sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3704,12 +3438,30 @@ packages:
       eslint-config-prettier:
         optional: true
 
+  eslint-plugin-regexp@2.7.0:
+    resolution: {integrity: sha512-U8oZI77SBtH8U3ulZ05iu0qEzIizyEDXd+BWHvyVxTOjGwcDcvy/kEpgFG4DYca2ByRLiVPFZ2GeH7j1pdvZTA==}
+    engines: {node: ^18 || >=20}
+    peerDependencies:
+      eslint: '>=8.44.0'
+
+  eslint-plugin-unicorn@57.0.0:
+    resolution: {integrity: sha512-zUYYa6zfNdTeG9BISWDlcLmz16c+2Ck2o5ZDHh0UzXJz3DEP7xjmlVDTzbyV0W+XksgZ0q37WEWzN2D2Ze+g9Q==}
+    engines: {node: '>=18.18'}
+    peerDependencies:
+      eslint: '>=9.20.0'
+
   eslint-plugin-vue@9.32.0:
     resolution: {integrity: sha512-b/Y05HYmnB/32wqVcjxjHZzNpwxj1onBOvqW89W+V+XNG1dRuaFbNd3vT9CLbr2LXjEoq+3vn8DanWf7XU22Ug==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
 
+  eslint-processor-vue-blocks@2.0.0:
+    resolution: {integrity: sha512-u4W0CJwGoWY3bjXAuFpc/b6eK3NQEI8MoeW7ritKj3G3z/WtHrKjkqf+wk8mPEy5rlMGS+k6AZYOw2XBoN/02Q==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.3.0
+      eslint: '>=9.0.0'
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -3800,10 +3552,6 @@ packages:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
-  execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
-
   execa@7.2.0:
     resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==}
     engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0}
@@ -3812,8 +3560,16 @@ packages:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
 
-  exponential-backoff@3.1.2:
-    resolution: {integrity: sha512-8QxYTVXUkuy7fIIoitQkPwGonB8F3Zj8eEO8Sqg9Zv/bkI7RJAzowee4gr81Hak/dUTpA2Z7VfQgoijjPNlUZA==}
+  execa@9.5.2:
+    resolution: {integrity: sha512-EHlpxMCpHWSAh1dgS6bVeoLAXGnJNdR93aabr4QCGbzOM73o5XmRfM/e5FUqsw3aagP8S8XEWUWFAxnRBnAF0Q==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  expect-type@1.1.0:
+    resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
+    engines: {node: '>=12.0.0'}
+
+  exsolve@0.4.4:
+    resolution: {integrity: sha512-74RiT9i1G0eyFyE9n5f6mdX8+AicZFnhJ0CHB9VrkIl3Sy8vmW49ODbpwevdLswST7fhp3jvfPzD4DArTfjnsA==}
 
   externality@1.0.2:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
@@ -3841,11 +3597,17 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-npm-meta@0.2.2:
+    resolution: {integrity: sha512-E+fdxeaOQGo/CMWc9f4uHFfgUPJRAu7N3uB8GBvB3SDPAIWJK4GKyYhkAGFq+GYrcbKNfQIz5VVQyJnDuPPCrg==}
+
+  fast-npm-meta@0.3.1:
+    resolution: {integrity: sha512-W9gVhqRyz2O3j20I0nFmYEyaMC/046oaMRxxAQ0w6noakfbhpLmlIXmnnqSOmVVuJZ6x5hOPVwlv7PocuawZsw==}
+
   fast-uri@3.0.6:
     resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
 
-  fastq@1.19.0:
-    resolution: {integrity: sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==}
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
   fdir@6.4.3:
     resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
@@ -3855,6 +3617,10 @@ packages:
       picomatch:
         optional: true
 
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -3866,6 +3632,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-up-simple@1.0.0:
+    resolution: {integrity: sha512-q7Us7kcjj2VMePAa02hDAF6d+MzsdsAWEwYyOpwUtlerRBkOEPBCRZrAV4XfcSN8fHAgaD0hP7miwoay6DCprw==}
+    engines: {node: '>=18'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -3877,15 +3647,6 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  follow-redirects@1.15.9:
-    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-
   foreground-child@3.3.1:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
@@ -3901,9 +3662,6 @@ packages:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
 
-  fs-constants@1.0.0:
-    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
-
   fs-extra@11.3.0:
     resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==}
     engines: {node: '>=14.14'}
@@ -3912,10 +3670,6 @@ packages:
     resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
     engines: {node: '>= 8'}
 
-  fs-minipass@3.0.3:
-    resolution: {integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -3927,10 +3681,9 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  gauge@3.0.2:
-    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
+  fuse.js@7.1.0:
+    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
     engines: {node: '>=10'}
-    deprecated: This package is no longer supported.
 
   generic-names@4.0.0:
     resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
@@ -3965,10 +3718,21 @@ packages:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
 
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
+  get-tsconfig@4.10.0:
+    resolution: {integrity: sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==}
+
   giget@1.2.5:
     resolution: {integrity: sha512-r1ekGw/Bgpi3HLV3h1MRBIlSAdHoIMklpaQ3OQLFcRw9PwAj2rqigvIbg+dBUI51OxVI2jsEtDywDBjSiuf7Ug==}
     hasBin: true
 
+  giget@2.0.0:
+    resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
+    hasBin: true
+
   git-config-path@2.0.0:
     resolution: {integrity: sha512-qc8h1KIQbJpp+241id3GuAtkdyJ+IK+LIVtkiFTRKRrmddDzs3SI9CvP1QYmWBFvm1I/PWRwj//of8bgAc0ltA==}
     engines: {node: '>=4'}
@@ -4003,9 +3767,9 @@ packages:
     engines: {node: '>=12'}
     deprecated: Glob versions prior to v9 are no longer supported
 
-  global-dirs@3.0.1:
-    resolution: {integrity: sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==}
-    engines: {node: '>=10'}
+  global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
 
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -4023,10 +3787,6 @@ packages:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-
   globby@13.2.2:
     resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -4064,9 +3824,6 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
-  has-unicode@2.0.1:
-    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
-
   hash-sum@2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
 
@@ -4074,6 +3831,10 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -4089,9 +3850,6 @@ packages:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
 
-  http-cache-semantics@4.1.1:
-    resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
-
   http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -4100,14 +3858,6 @@ packages:
     resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
     engines: {node: '>= 6'}
 
-  http-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
-    engines: {node: '>= 14'}
-
-  http-proxy@1.18.1:
-    resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
-    engines: {node: '>=8.0.0'}
-
   http-shutdown@1.2.2:
     resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -4123,10 +3873,6 @@ packages:
   httpxy@0.1.7:
     resolution: {integrity: sha512-pXNx8gnANKAndgga5ahefxc++tJvNL87CXoRwxn1cJE2ZkWEojF3tNfQIEhZX/vfpt+wzeAzpUI4qkediX1MLQ==}
 
-  human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-
   human-signals@4.3.1:
     resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
     engines: {node: '>=14.18.0'}
@@ -4135,6 +3881,10 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  human-signals@8.0.0:
+    resolution: {integrity: sha512-/1/GPCpDUCCYwlERiYjxoczfP0zfvZMU/OWgQPMya9AbAE24vseigFdhAMObpc8Q4lc/kjutPfUddDYyAmejnA==}
+    engines: {node: '>=18.18.0'}
+
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -4151,10 +3901,6 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  ignore-walk@6.0.5:
-    resolution: {integrity: sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -4163,9 +3909,8 @@ packages:
     resolution: {integrity: sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==}
     engines: {node: '>= 4'}
 
-  image-meta@0.1.1:
-    resolution: {integrity: sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==}
-    engines: {node: '>=10.18.0'}
+  image-meta@0.2.1:
+    resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
 
   immutable@4.3.7:
     resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
@@ -4182,13 +3927,16 @@ packages:
     resolution: {integrity: sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==}
     engines: {node: '>=8'}
 
+  impound@0.2.0:
+    resolution: {integrity: sha512-gXgeSyp9Hf7qG2/PLKmywHXyQf2xFrw+mJGpoj9DsAB9L7/MIKn+DeEx98UryWXdmbv8wUUPdcQof6qXnZoCGg==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
+  indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
 
   index-to-position@0.1.2:
     resolution: {integrity: sha512-MWDKS3AS1bGCHLBA2VLImJz42f7bJh8wQsTGCzI3j519/CASStoDONUBVz2I/VID0MpiX3SGSnbOD2xUalbE5g==}
@@ -4204,22 +3952,14 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
-  ini@2.0.0:
-    resolution: {integrity: sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==}
-    engines: {node: '>=10'}
-
-  ini@4.1.3:
-    resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==}
+  ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   ioredis@5.5.0:
     resolution: {integrity: sha512-7CutT89g23FfSa8MDoIFs2GYYa0PaNiW/OrT+nRyjRXHDZd17HmIgy+reOQ/yhh72NznNjGuS8kbCAcA4Ro4mw==}
     engines: {node: '>=12.22.0'}
 
-  ip-address@9.0.5:
-    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
-    engines: {node: '>= 12'}
-
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
@@ -4227,6 +3967,10 @@ packages:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
+  is-builtin-module@4.0.0:
+    resolution: {integrity: sha512-rWP3AMAalQSesXO8gleROyL2iKU73SX5Er66losQn9rWOWL4Gef0a/xOEOVqjWGMuR2vHG3FJ8UUmT700O8oFg==}
+    engines: {node: '>=18.20'}
+
   is-core-module@2.16.1:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
@@ -4262,12 +4006,9 @@ packages:
     engines: {node: '>=14.16'}
     hasBin: true
 
-  is-installed-globally@0.4.0:
-    resolution: {integrity: sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==}
-    engines: {node: '>=10'}
-
-  is-lambda@1.0.1:
-    resolution: {integrity: sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==}
+  is-installed-globally@1.0.0:
+    resolution: {integrity: sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==}
+    engines: {node: '>=18'}
 
   is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
@@ -4276,9 +4017,13 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
+  is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
 
   is-plain-object@2.0.4:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
@@ -4287,13 +4032,6 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
-  is-primitive@3.0.1:
-    resolution: {integrity: sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==}
-    engines: {node: '>=0.10.0'}
-
-  is-promise@4.0.0:
-    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
-
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
@@ -4308,6 +4046,18 @@ packages:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
   is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -4349,15 +4099,12 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
-  joi@17.13.3:
-    resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
-
   joycon@3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
 
-  js-beautify@1.15.3:
-    resolution: {integrity: sha512-rKKGuyTxGNlyN4EQKWzNndzXpi0bOl8Gl8YQAW1as/oMz0XhD6sHJO1hTvoBDOSzKuJb9WkwoAb34FfdkKMv2A==}
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -4379,8 +4126,9 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsbn@1.1.0:
-    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+  jsdoc-type-pratt-parser@4.1.0:
+    resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
+    engines: {node: '>=12.0.0'}
 
   jsdom@19.0.0:
     resolution: {integrity: sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==}
@@ -4407,10 +4155,6 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  json-parse-even-better-errors@3.0.2:
-    resolution: {integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -4429,16 +4173,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonc-parser@3.3.1:
-    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
-
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
-  jsonparse@1.3.1:
-    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
-    engines: {'0': node >= 0.2.0}
-
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -4482,6 +4219,9 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   listhen@1.9.0:
     resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
     hasBin: true
@@ -4510,8 +4250,8 @@ packages:
     resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
     engines: {node: '>=14'}
 
-  local-pkg@1.0.0:
-    resolution: {integrity: sha512-bbgPw/wmroJsil/GgL4qjDzs5YLTBMQ99weRsok1XCDccQeehbHA/I1oRvk2NPtr7KGZgT/Y5tPRnAtMqeG2Kg==}
+  local-pkg@1.1.0:
+    resolution: {integrity: sha512-xbZBuX6gYIWrlLmZG43aAVer4ocntYO09vPy9lxd6Ns8DnR4U7N+IIeDkubinqFOHHzoMlPxTxwo0jhE7oYjAw==}
     engines: {node: '>=14'}
 
   locate-path@6.0.0:
@@ -4521,9 +4261,6 @@ packages:
   lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
-  lodash._reinterpolate@3.0.0:
-    resolution: {integrity: sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==}
-
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
@@ -4536,12 +4273,6 @@ packages:
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
-  lodash.difference@4.5.0:
-    resolution: {integrity: sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==}
-
-  lodash.flatten@4.4.0:
-    resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
-
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
@@ -4549,32 +4280,15 @@ packages:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
     deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
-  lodash.isplainobject@4.0.6:
-    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
-
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  lodash.pick@4.4.0:
-    resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==}
-    deprecated: This package is deprecated. Use destructuring assignment syntax instead.
-
   lodash.sortby@4.7.0:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
 
-  lodash.template@4.5.0:
-    resolution: {integrity: sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==}
-    deprecated: This package is deprecated. Use https://socket.dev/npm/package/eta instead.
-
-  lodash.templatesettings@4.2.0:
-    resolution: {integrity: sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==}
-
-  lodash.union@4.6.0:
-    resolution: {integrity: sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==}
-
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
@@ -4584,6 +4298,9 @@ packages:
   loupe@2.3.7:
     resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
 
+  loupe@3.1.3:
+    resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -4596,9 +4313,9 @@ packages:
   magic-regexp@0.8.0:
     resolution: {integrity: sha512-lOSLWdE156csDYwCTIGiAymOLN7Epu/TU5e/oAnISZfU6qP+pgjkE+xbVjVn3yLPKN8n1G2yIAYTAM5KRk6/ow==}
 
-  magic-string@0.27.0:
-    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
-    engines: {node: '>=12'}
+  magic-string-ast@0.7.0:
+    resolution: {integrity: sha512-686fgAHaJY7wLTFEq7nnKqeQrhqmXB19d1HnqT35Ci7BN6hbAYLZUezTQ062uUHM7ggZEQlqJ94Ftls+KDXU8Q==}
+    engines: {node: '>=16.14.0'}
 
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
@@ -4606,17 +4323,8 @@ packages:
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
-  make-dir@3.1.0:
-    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
-    engines: {node: '>=8'}
-
-  make-fetch-happen@13.0.1:
-    resolution: {integrity: sha512-cKTUFc/rbKUd/9meOvgrpJ2WrNzymt6jfRDdwg5UCnVzv9dTpEj9JS5m3wtziXVCjluIXyL8pcaukYqezIzZQA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  marked@4.3.0:
-    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
-    engines: {node: '>= 12'}
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
   math-intrinsics@1.1.0:
@@ -4632,9 +4340,8 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
-  memory-fs@0.5.0:
-    resolution: {integrity: sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==}
-    engines: {node: '>=4.3.0 <5.0.0 || >=5.10'}
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -4660,11 +4367,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  mime@2.5.2:
-    resolution: {integrity: sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==}
-    engines: {node: '>=4.0.0'}
-    hasBin: true
-
   mime@3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
@@ -4675,16 +4377,13 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
-  mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
-
   mimic-fn@4.0.0:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
-  minimatch@3.0.8:
-    resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
 
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
@@ -4697,10 +4396,6 @@ packages:
     resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -4708,29 +4403,6 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  minipass-collect@2.0.1:
-    resolution: {integrity: sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minipass-fetch@3.0.5:
-    resolution: {integrity: sha512-2N8elDQAtSnFV0Dk7gt15KHsS0Fyz6CbYZ360h0WTYV1Ty46li3rAXVOQj1THMNLdmrD9Vt5pBPtWtVkpwGBqg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  minipass-flush@1.0.5:
-    resolution: {integrity: sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==}
-    engines: {node: '>= 8'}
-
-  minipass-json-stream@1.0.2:
-    resolution: {integrity: sha512-myxeeTm57lYs8pH2nxPzmEEg8DGIgW+9mv6D4JZD2pa81I/OBjeU7PtICXV6c9eRGTA5JMDsuIPUZRCyBMYNhg==}
-
-  minipass-pipeline@1.2.4:
-    resolution: {integrity: sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==}
-    engines: {node: '>=8'}
-
-  minipass-sized@1.0.3:
-    resolution: {integrity: sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==}
-    engines: {node: '>=8'}
-
   minipass@3.3.6:
     resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
     engines: {node: '>=8'}
@@ -4751,6 +4423,9 @@ packages:
     resolution: {integrity: sha512-umcy022ILvb5/3Djuu8LWeqUa8D68JaBzlttKeMWen48SjabqS3iY5w/vzeMzMUNhLDifyhbOwKDSznB1vvrwg==}
     engines: {node: '>= 18'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -4793,6 +4468,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -4801,13 +4479,17 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.1.2:
+    resolution: {integrity: sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
+  nanotar@0.2.0:
+    resolution: {integrity: sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==}
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  negotiator@0.6.4:
-    resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
-    engines: {node: '>= 0.6'}
-
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
@@ -4821,11 +4503,6 @@ packages:
       xml2js:
         optional: true
 
-  nitropack@2.3.3:
-    resolution: {integrity: sha512-1g/4zdwWo+tWSvno57rhRXeGk6jNbG5W1yRNtOywInT1nyoEG1ksOwQ3W3JHGB2E1GNjZwAVi611UVOVL+JgYw==}
-    engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    hasBin: true
-
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
@@ -4849,22 +4526,12 @@ packages:
     resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
     hasBin: true
 
-  node-gyp@10.3.1:
-    resolution: {integrity: sha512-Pp3nFHBThHzVtNY7U6JfPjvT/DTE8+o/4xKsLQtBoU+j2HLsGlhcfzflAoUreaJbNmYnX+LlLi0qjV8kpyO6xQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    hasBin: true
-
   node-mock-http@1.0.0:
     resolution: {integrity: sha512-0uGYQ1WQL1M5kKvGRXWQ3uZCHtLTO8hln3oBjIusM75WoesZ909uQJs/Hb946i2SS+Gsrhkaa6iAO17jRIv6DQ==}
 
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
-  nopt@5.0.0:
-    resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
-    engines: {node: '>=6'}
-    hasBin: true
-
   nopt@7.2.1:
     resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -4891,34 +4558,6 @@ packages:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
-  npm-bundled@3.0.1:
-    resolution: {integrity: sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  npm-install-checks@6.3.0:
-    resolution: {integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  npm-normalize-package-bin@3.0.1:
-    resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  npm-package-arg@11.0.3:
-    resolution: {integrity: sha512-sHGJy8sOC1YraBywpzQlIKBE4pBbGbiF95U6Auspzyem956E0+FtDtsx1ZxlOJkQCZ1AFXAY/yuvtFYrOxF+Bw==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  npm-packlist@8.0.2:
-    resolution: {integrity: sha512-shYrPFIS/JLP4oQmAwDyk5HcyysKW8/JLTEA32S0Z5TzvpaeeX2yMFfoK1fjEBnCBvVyIB/Jj/GBFdm0wsgzbA==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  npm-pick-manifest@9.1.0:
-    resolution: {integrity: sha512-nkc+3pIIhqHVQr085X9d2JzPzLyjzQS96zbruppqC9aZRm/x8xx6xhI98gHtsfELP2bE+loHq8ZaHFHhe+NauA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  npm-registry-fetch@16.2.1:
-    resolution: {integrity: sha512-8l+7jxhim55S85fjiDGJ1rZXBWGtRLi1OSb4Z3BPLObPuIaeKRlPRiYMSHU4/81ck3t71Z+UwDDl47gcpmfQQA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -4927,28 +4566,36 @@ packages:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  npmlog@5.0.1:
-    resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
-    deprecated: This package is no longer supported.
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
 
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  nuxi@3.3.2:
-    resolution: {integrity: sha512-JNPPU4E/cAbT3MMvjfURL1sAGrlTq0+Wfk/zM9R0XHusA4csHbwN0qDGD5oPZwrhladzLr+nMamWC8unbyiyXQ==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
+  nuxi@3.22.2:
+    resolution: {integrity: sha512-QaxSecieGbh6aTrKC6czb73Lgb/OyV4Y+nXmrS1oAD/e2o2vWQ20uv9fSCBuHjwnAMADLdbKuhAK9EmJpLi0Ag==}
+    engines: {node: ^16.10.0 || >=18.0.0}
     hasBin: true
 
-  nuxt@3.3.2:
-    resolution: {integrity: sha512-9xNd9+7M03oYktHnuEEgNRJYfkFwjlLvRi1NsEuEyzcc0SgazGZT89CBsQnlWI3wFMhoxoYPGJ8rc4sJAhJ1Gg==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
+  nuxt@3.15.4:
+    resolution: {integrity: sha512-hSbZO4mR0uAMJtZPNTnCfiAtgleoOu28gvJcBNU7KQHgWnNXPjlWgwMczko2O4Tmnv9zIe/CQged+2HsPwl2ZA==}
+    engines: {node: ^18.20.5 || ^20.9.0 || >=22.0.0}
     hasBin: true
+    peerDependencies:
+      '@parcel/watcher': ^2.1.0
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+    peerDependenciesMeta:
+      '@parcel/watcher':
+        optional: true
+      '@types/node':
+        optional: true
 
   nwsapi@2.2.16:
     resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
 
-  nypm@0.3.12:
-    resolution: {integrity: sha512-D3pzNDWIvgA+7IORhD/IuWzEk4uXv6GsgOxiid4UU3h9oq5IqV1KtPDi63n4sZJ/xcWlr88c0QM2RgN5VbOhFA==}
+  nypm@0.4.1:
+    resolution: {integrity: sha512-1b9mihliBh8UCcKtcGRu//G50iHpjxIQVUqkdhPT/SDVE7KdJKoHXLS0heuYTQCx95dFqiyUbXZB9r8ikn+93g==}
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
 
@@ -4957,6 +4604,11 @@ packages:
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
 
+  nypm@0.6.0:
+    resolution: {integrity: sha512-mn8wBFV9G9+UFHIrq+pZ2r2zL4aPau/by3kJb3cM7+5tQHMt6HGQB8FDIeKFYp8o0D2pnH6nVsO88N4AmUxIWg==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -4971,8 +4623,8 @@ packages:
   ohash@1.1.4:
     resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==}
 
-  ohash@2.0.4:
-    resolution: {integrity: sha512-ac+SFwzhdHb0hp48/dbR7Jta39qfbuj7t3hApd9uyHS8bisHTfVzSEvjOVgV0L3zG7VR2/7JjkSGimP75D+hOQ==}
+  ohash@2.0.6:
+    resolution: {integrity: sha512-y3n0xHnH5RhTNlu5KvoH1cPKNS3ewteDWjvUXkW5+X/iYYe914zGbixMCr//jEjwn/IgMjfOwDPIpDJ0+ld3tw==}
 
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
@@ -4981,10 +4633,6 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
-  onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
-
   onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
@@ -4997,10 +4645,6 @@ packages:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
 
-  open@9.1.0:
-    resolution: {integrity: sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==}
-    engines: {node: '>=14.16'}
-
   openapi-typescript@7.6.1:
     resolution: {integrity: sha512-F7RXEeo/heF3O9lOXo2bNjCOtfp7u+D6W3a3VNEH2xE6v+fxLtn5nq0uvUcA1F5aT+CMhNeC5Uqtg5tlXFX/ag==}
     hasBin: true
@@ -5023,18 +4667,10 @@ packages:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  p-limit@5.0.0:
-    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
-    engines: {node: '>=18'}
-
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-map@4.0.0:
-    resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
-    engines: {node: '>=10'}
-
   p-queue@6.6.2:
     resolution: {integrity: sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==}
     engines: {node: '>=8'}
@@ -5046,17 +4682,12 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
-  package-manager-detector@0.2.9:
-    resolution: {integrity: sha512-+vYvA/Y31l8Zk8dwxHhL3JfTuHPm6tlxM2A3GeQyl7ovYnSp1+mzAxClxaOr0qO1TtPxbQxetI7v5XqKLJZk7Q==}
+  package-manager-detector@0.2.10:
+    resolution: {integrity: sha512-1wlNZK7HW+UE3eGCcMv3hDaYokhspuIeH6enXSnCL1eEZSVDsy/dYwo/4CczhUsrKLA1SSXB+qce8Glw5DEVtw==}
 
   packrup@0.1.2:
     resolution: {integrity: sha512-ZcKU7zrr5GlonoS9cxxrb5HVswGnyj6jQvwFBa6p5VFw7G71VAHcUKL5wyZSU/ECtPM/9gacWxy2KFQKt1gMNA==}
 
-  pacote@17.0.7:
-    resolution: {integrity: sha512-sgvnoUMlkv9xHwDUKjKQFXVyUi8dtJGKp3vg6sYy+TxbDic5RjZCHF3ygv0EJgNRZ2GfRONjlKPUfokJ9lDpwQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    hasBin: true
-
   parchment@3.0.0:
     resolution: {integrity: sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==}
 
@@ -5068,10 +4699,18 @@ packages:
     resolution: {integrity: sha512-wXoQGL1D+2COYWCD35/xbiKma1Z15xvZL8cI25wvxzled58V51SJM04Urt/uznS900iQor7QO04SgdfT/XlbuA==}
     engines: {node: '>=8'}
 
+  parse-imports@2.2.1:
+    resolution: {integrity: sha512-OL/zLggRp8mFhKL0rNORUTR4yBYujK/uU+xZL+/0Rgm2QE4nLO9v8PzEweSJEbMGKmDRjJE4R3IMJlL2di4JeQ==}
+    engines: {node: '>= 18'}
+
   parse-json@8.1.0:
     resolution: {integrity: sha512-rum1bPifK5SSar35Z6EKZuYPJx85pkNaFrxBK3mwdfSJ1/WKbYrjoW/zTPSjRRamfmVX1ACBIdFAO0VRErW/EA==}
     engines: {node: '>=18'}
 
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
   parse-path@7.0.1:
     resolution: {integrity: sha512-6ReLMptznuuOEzLoGEa+I1oWRSj2Zna5jLWC+l6zlfAI4dbbSaIES29ThzuPkbhNahT65dWzfoZEO6cfJw2Ksg==}
 
@@ -5086,6 +4725,9 @@ packages:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -5126,8 +4768,9 @@ packages:
   pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
 
-  perfect-debounce@0.1.3:
-    resolution: {integrity: sha512-NOT9AcKiDGpnV/HBhI22Str++XWcErO/bALvHCuhv33owZW/CjH8KAFLZDCmu3727sihe0wTxpDhyGc6M8qacQ==}
+  pathval@2.0.0:
+    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+    engines: {node: '>= 14.16'}
 
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
@@ -5158,6 +4801,9 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
+  pkg-types@2.0.0:
+    resolution: {integrity: sha512-W+831FxieJW1CIAh3JMmHaMhK/SiSeyCqbSWqLjjvbjaPDDY0cRkspIfOx4vLkFNgfxnzSxxGFUiMHMm6QpvYA==}
+
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -5250,9 +4896,6 @@ packages:
     peerDependencies:
       postcss: ^8.4.31
 
-  postcss-import-resolver@2.0.0:
-    resolution: {integrity: sha512-y001XYgGvVwgxyxw9J1a5kqM/vtmIQGzx34g0A0Oy44MFcy/ZboZw1hu/iN3VYFjSTRzbvd7zZJJz0Kh0AGkTw==}
-
   postcss-import@15.1.0:
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -5590,12 +5233,6 @@ packages:
     peerDependencies:
       postcss: ^8.4.31
 
-  postcss-url@10.1.3:
-    resolution: {integrity: sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      postcss: ^8.0.0
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -5603,8 +5240,8 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preact@10.26.2:
-    resolution: {integrity: sha512-0gNmv4qpS9HaN3+40CLBAnKe0ZfyE4ZWo5xKlC1rVrr0ckkEvJvAQqKaHANdFKsGstoxrY4AItZ7kZSGVoVjgg==}
+  preact@10.26.3:
+    resolution: {integrity: sha512-OJCfNTdttkOTCbTN+gCnXn/woDqz1dIjvP+gdCoYGP2kKuX6w79FAP8qgY/r7jgAunvqHVVmEOKzKOFWzrXZdw==}
 
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -5614,13 +5251,8 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier@2.7.1:
-    resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
-  prettier@3.4.2:
-    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
+  prettier@3.5.2:
+    resolution: {integrity: sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -5632,17 +5264,13 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  pretty-format@29.7.0:
-    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+  pretty-ms@9.2.0:
+    resolution: {integrity: sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==}
+    engines: {node: '>=18'}
 
   primeicons@7.0.0:
     resolution: {integrity: sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==}
 
-  proc-log@4.2.0:
-    resolution: {integrity: sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -5650,18 +5278,6 @@ packages:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
-  promise-inflight@1.0.1:
-    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
-    peerDependencies:
-      bluebird: '*'
-    peerDependenciesMeta:
-      bluebird:
-        optional: true
-
-  promise-retry@2.0.1:
-    resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
-    engines: {node: '>=10'}
-
   promise.series@0.2.0:
     resolution: {integrity: sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ==}
     engines: {node: '>=0.12'}
@@ -5679,19 +5295,20 @@ packages:
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
-  proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-
-  prr@1.0.1:
-    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
-
   psl@1.15.0:
     resolution: {integrity: sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  quansync@0.2.6:
+    resolution: {integrity: sha512-u3TuxVTuJtkTxKGk5oZ7K2/o+l0/cC6J8SOyaaSnrnroqvcVy7xBxtvBUyd+Xa8cGoCr87XmQj4NR6W+zbqH8w==}
+
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
@@ -5722,28 +5339,20 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
-
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
-  read-package-json-fast@3.0.2:
-    resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  read-package-up@11.0.0:
+    resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
+    engines: {node: '>=18'}
 
-  read-package-json@7.0.1:
-    resolution: {integrity: sha512-8PcDiZ8DXUjLf687Ol4BR8Bpm2umR7vhoZOzNRt+uxD9GpBh/K+CAAALVIiYFknmvlmyg7hM7BSNUXPaCCqd0Q==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    deprecated: This package is no longer supported. Please use @npmcli/package-json instead.
+  read-pkg@9.0.1:
+    resolution: {integrity: sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==}
+    engines: {node: '>=18'}
 
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
-  readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
-    engines: {node: '>= 6'}
-
   readable-stream@4.7.0:
     resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5767,6 +5376,10 @@ packages:
     resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
     engines: {node: '>=4'}
 
+  refa@0.12.1:
+    resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
   regenerate-unicode-properties@10.2.0:
     resolution: {integrity: sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==}
     engines: {node: '>=4'}
@@ -5780,6 +5393,10 @@ packages:
   regenerator-transform@0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
 
+  regexp-ast-analysis@0.7.1:
+    resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
   regexp-tree@0.1.27:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
     hasBin: true
@@ -5814,23 +5431,20 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
   resolve@1.22.10:
     resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  retry@0.12.0:
-    resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
-    engines: {node: '>= 4'}
-
-  reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
   rimraf@5.0.10:
     resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
@@ -5880,10 +5494,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  run-applescript@5.0.0:
-    resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
-    engines: {node: '>=12'}
-
   run-applescript@7.0.0:
     resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
     engines: {node: '>=18'}
@@ -5891,9 +5501,6 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
-  rxjs@7.8.2:
-    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
-
   safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
@@ -5939,6 +5546,10 @@ packages:
     resolution: {integrity: sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==}
     engines: {node: '>= 10.13.0'}
 
+  scslre@0.3.0:
+    resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
+    engines: {node: ^14.0.0 || >=16.0.0}
+
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
@@ -5968,9 +5579,6 @@ packages:
     resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==}
     engines: {node: '>= 0.8.0'}
 
-  set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -5990,9 +5598,6 @@ packages:
     resolution: {integrity: sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==}
     engines: {node: '>= 0.4'}
 
-  shiki@0.11.1:
-    resolution: {integrity: sha512-EugY9VASFuDqOexOgXR18ZV+TbFrQHeCpEYaXamO+SZlsnT/2LxuLBX25GGtIrwaEVFXUAbUQ601SWE2rMwWHA==}
-
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -6003,24 +5608,16 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  sigstore@2.3.1:
-    resolution: {integrity: sha512-8G+/XDU8wNsJOQS5ysDVO0Etg9/2uA5gR9l4ZwijjlwxBcrU6RPfwi2+jJmbP+Ap1Hlp/nVAaEO4Fj22/SL2gQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   simple-git@3.27.0:
     resolution: {integrity: sha512-ivHoFS9Yi9GY49ogc6/YAi3Fl9ROnF4VyubNylgCkA+RVqLaKWnDSzXOVzya8csELIaWaYNutsEuAhZrtOjozA==}
 
-  sirv@2.0.4:
-    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
-    engines: {node: '>= 10'}
+  sirv@3.0.1:
+    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
+    engines: {node: '>=18'}
 
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
-  slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-
   slash@4.0.0:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}
@@ -6029,25 +5626,16 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  slashes@3.0.12:
+    resolution: {integrity: sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==}
+
   slice-ansi@5.0.0:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
     engines: {node: '>=12'}
 
-  smart-buffer@4.2.0:
-    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
-    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
-
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
-  socks-proxy-agent@8.0.5:
-    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
-    engines: {node: '>= 14'}
-
-  socks@2.8.4:
-    resolution: {integrity: sha512-D3YaD0aRxR3mEcqnidIs7ReYJFVzWdd6fXJYUM8ixcQcJRGTka/b3saV0KflYhyVJXKhb947GndU35SxYNResQ==}
-    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -6076,15 +5664,18 @@ packages:
   spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
 
+  spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+
   spdx-license-ids@3.0.21:
     resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
 
-  sprintf-js@1.1.3:
-    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
 
-  ssri@10.0.6:
-    resolution: {integrity: sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  stable-hash@0.0.4:
+    resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==}
 
   stable@0.1.8:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
@@ -6131,14 +5722,18 @@ packages:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
 
-  strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-
   strip-final-newline@3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
 
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
+  strip-indent@4.0.0:
+    resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
+    engines: {node: '>=12'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -6152,6 +5747,9 @@ packages:
   strip-literal@3.0.0:
     resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
 
+  structured-clone-es@1.0.0:
+    resolution: {integrity: sha512-FL8EeKFFyNQv5cMnXI31CIMCsFarSVI2bF0U0ImeNE3g/F1IvJQyqzOXxPBRXiwQfyBTlbNe88jh1jFW0O/jiQ==}
+
   style-inject@0.3.0:
     resolution: {integrity: sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==}
 
@@ -6172,6 +5770,10 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  superjson@2.2.2:
+    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
+    engines: {node: '>=16'}
+
   superstruct@2.0.2:
     resolution: {integrity: sha512-uV+TFRZdXsqXTL2pRvujROjdZQ4RAlBUS5BTh9IGm+jTqQntYThciG/qu57Gs69yjnVUSqdxF9YLmSnpupBW9A==}
     engines: {node: '>=14.0.0'}
@@ -6216,8 +5818,8 @@ packages:
     resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
     engines: {node: '>=18'}
 
-  tailwindcss-primeui@0.4.0:
-    resolution: {integrity: sha512-YYC7B7Yyzm1/4pEGgpf1ABAhbrKY++LuPoUamnKE7fTPO5Ct/Qr/dT+Uq2yiVhQnaW1zHQpYnThxfksaxhlDfQ==}
+  tailwindcss-primeui@0.5.1:
+    resolution: {integrity: sha512-zNqp62N4c+pwBVkVJd8ByvujepVKAMxZBdYy5MzIDi/Zb2p8wTGo4RrQaqLQazm3teOWVmttzZYPH/GlOB3lgw==}
     peerDependencies:
       tailwindcss: '>=3.1.0'
 
@@ -6226,18 +5828,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tapable@1.1.3:
-    resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
-    engines: {node: '>=6'}
-
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
-  tar-stream@2.2.0:
-    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
-    engines: {node: '>=6'}
-
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
@@ -6249,8 +5843,8 @@ packages:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
 
-  terser-webpack-plugin@5.3.11:
-    resolution: {integrity: sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==}
+  terser-webpack-plugin@5.3.12:
+    resolution: {integrity: sha512-jDLYqo7oF8tJIttjXO6jBY5Hk8p3A8W4ttih7cCEq64fQFWmgJ4VqAQjKr7WwIDlmXKEc6QeoRb5ecjZ+2afcg==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
       '@swc/core': '*'
@@ -6292,6 +5886,10 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
+  tinyglobby@0.2.10:
+    resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
+    engines: {node: '>=12.0.0'}
+
   tinyglobby@0.2.12:
     resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
     engines: {node: '>=12.0.0'}
@@ -6300,22 +5898,22 @@ packages:
     resolution: {integrity: sha512-2ksntHOKf893wSAH4z/+JbPpi92esw8Gn9N2deXX+B0EO92hexAVI9GIZZPx7P5aYo5KULfeOSt3kMOmSOy6uA==}
     engines: {node: '>=14.0.0'}
 
-  tinypool@0.8.4:
-    resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
+  tinypool@1.0.2:
+    resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
 
   tinyspy@1.1.1:
     resolution: {integrity: sha512-UVq5AXt/gQlti7oxoIg5oi/9r0WpF7DGEVwXgqWSMmyN16+e3tl5lIvTaOpJ3TAtu5xFzWccFRM4R5NaWHF+4g==}
     engines: {node: '>=14.0.0'}
 
-  tinyspy@2.2.1:
-    resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
-  titleize@3.0.0:
-    resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
-    engines: {node: '>=12'}
-
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -6349,11 +5947,11 @@ packages:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
 
-  ts-api-utils@1.4.3:
-    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
-    engines: {node: '>=16'}
+  ts-api-utils@2.0.1:
+    resolution: {integrity: sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==}
+    engines: {node: '>=18.12'}
     peerDependencies:
-      typescript: '>=4.2.0'
+      typescript: '>=4.8.4'
 
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
@@ -6371,8 +5969,8 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  tsup@8.3.6:
-    resolution: {integrity: sha512-XkVtlDV/58S9Ye0JxUUTcrQk4S+EqlOHKzg6Roa62rdjL1nGWNUstG0xgI4vanHdfIpjP448J8vlN0oK6XOJ5g==}
+  tsup@8.4.0:
+    resolution: {integrity: sha512-b+eZbPCjz10fRryaAA7C8xlIHnf8VnsaRqydheLIqwG/Mcpfk8Z5zp3HayX7GaTygkigHl5cBUs+IhcySiIexQ==}
     engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
@@ -6390,10 +5988,6 @@ packages:
       typescript:
         optional: true
 
-  tuf-js@2.2.1:
-    resolution: {integrity: sha512-GwIJau9XaA8nLVbUXsN3IlFi7WmQ48gBUrl3FTkkL/XLu/POhBzfmX9hd33FNMX1qAsfl6ozO1iMmW9NC8YniA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -6421,26 +6015,27 @@ packages:
   type-level-regexp@0.1.17:
     resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
 
-  typedoc@0.23.23:
-    resolution: {integrity: sha512-cg1YQWj+/BU6wq74iott513U16fbrPCbyYs04PHZgvoKJIc6EY4xNobyDZh4KMfRGW8Yjv6wwIzQyoqopKOUGw==}
-    engines: {node: '>= 14.14'}
+  typedoc@0.27.9:
+    resolution: {integrity: sha512-/z585740YHURLl9DN2jCWe6OW7zKYm6VoQ93H0sxZ1cwHQEQrUn5BJrEnkWhfzUdyO+BLGjnKUZ9iz9hKloFDw==}
+    engines: {node: '>= 18'}
     hasBin: true
     peerDependencies:
-      typescript: 4.6.x || 4.7.x || 4.8.x || 4.9.x
-
-  typescript@4.9.5:
-    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
-    engines: {node: '>=4.2.0'}
-    hasBin: true
+      typescript: 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x
 
   typescript@5.7.3:
     resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
+  ultrahtml@1.5.3:
+    resolution: {integrity: sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg==}
+
   unbuild@2.0.0:
     resolution: {integrity: sha512-JWCUYx3Oxdzvw2J9kTAp+DKE8df/BnH/JTSj6JyA4SH40ECdFu7FoJJcrm8G92B7TjofQ6GZGjJs50TRxoH6Wg==}
     hasBin: true
@@ -6456,14 +6051,14 @@ packages:
   unctx@2.4.1:
     resolution: {integrity: sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==}
 
-  undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
 
   unenv@1.10.0:
     resolution: {integrity: sha512-wY5bskBQFL9n3Eca5XnhH6KbUo/tfvkwm9OpcdCvLaeA7piBNbavbOKJySEwQ1V0RH6HvNlSAFRTpvTqgKRQXQ==}
 
-  unhead@1.11.19:
-    resolution: {integrity: sha512-O5AYb3+xUOzBlwDmPfC/DgGp9rDMoGkB4gFkhoaz8IonQqP8W8qqetxYf5ZyEdntvXnFsMWS8lZF//5176xo6Q==}
+  unhead@1.11.20:
+    resolution: {integrity: sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==}
 
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
@@ -6481,6 +6076,10 @@ packages:
     resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
     engines: {node: '>=4'}
 
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
   unicorn-magic@0.3.0:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
@@ -6492,14 +6091,6 @@ packages:
     resolution: {integrity: sha512-oVUL7PSlyVV3QRhsdcyYEMaDX8HJyS/CnUonEJTYA3//bWO+o/4gG8F7auGWWWkrrxBQBYOO8DKe+C53ktpRXw==}
     engines: {node: '>=18.12.0'}
 
-  unique-filename@3.0.0:
-    resolution: {integrity: sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  unique-slug@4.0.0:
-    resolution: {integrity: sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   universalify@0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
@@ -6512,8 +6103,8 @@ packages:
     resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
     engines: {node: '>=18.12.0'}
 
-  unplugin-vue-components@0.27.0:
-    resolution: {integrity: sha512-77eTEy23sQ0UpzGWnZ9I2mY3cnmXwklz4ITcn3JfxjCoX643ghImkiZ4nFm58sxbdVcc4Fo/o4LIoFnlqEqsSg==}
+  unplugin-vue-components@0.27.5:
+    resolution: {integrity: sha512-m9j4goBeNwXyNN8oZHHxvIIYiG8FQ9UfmKWeNllpDvhU7btKNNELGPt+o3mckQKuPwrE7e0PvCsx+IWuDSD9Vg==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/parser': ^7.15.8
@@ -6525,10 +6116,35 @@ packages:
       '@nuxt/kit':
         optional: true
 
+  unplugin-vue-components@28.4.1:
+    resolution: {integrity: sha512-niGSc0vJD9ueAnsqcfAldmtpkppZ09B6p2G1dL7X5S8KPdgbk1P+txPwaaDCe7N+eZh2VG1aAypLXkuJs3OSUg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
+  unplugin-vue-router@0.11.2:
+    resolution: {integrity: sha512-X8BbQ3BNnMqaCYeMj80jtz5jC4AB0jcpdmECIYey9qKm6jy/upaPZ/WzfuT+iTGRiQAY4WemHueXxuzH127oOg==}
+    peerDependencies:
+      vue-router: ^4.4.0
+    peerDependenciesMeta:
+      vue-router:
+        optional: true
+
   unplugin@1.16.1:
     resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
     engines: {node: '>=14.0.0'}
 
+  unplugin@2.1.2:
+    resolution: {integrity: sha512-Q3LU0e4zxKfRko1wMV2HmP8lB9KWislY7hxXpxd+lGx0PRInE4vhMBVEZwpdVYHvtqzhSrzuIfErsob6bQfCzw==}
+    engines: {node: '>=18.12.0'}
+
   unplugin@2.2.0:
     resolution: {integrity: sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==}
     engines: {node: '>=18.12.0'}
@@ -6592,10 +6208,6 @@ packages:
       uploadthing:
         optional: true
 
-  untildify@4.0.0:
-    resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
-    engines: {node: '>=8'}
-
   untun@0.1.3:
     resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
     hasBin: true
@@ -6607,8 +6219,8 @@ packages:
   unwasm@0.3.9:
     resolution: {integrity: sha512-LDxTx/2DkFURUd+BU1vUsF/moj0JsoTvl+2tcg2AUOiEzVturhGGx17/IMgGvKUYdZwr33EJHtChCJuhu9Ouvg==}
 
-  update-browserslist-db@1.1.2:
-    resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -6642,24 +6254,36 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
-  validate-npm-package-name@5.0.1:
-    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  vite-dev-rpc@1.0.7:
+    resolution: {integrity: sha512-FxSTEofDbUi2XXujCA+hdzCDkXFG1PXktMjSk1efq9Qb5lOYaaM9zNSvKvPPF7645Bak79kSp1PTooMW2wktcA==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1
+
+  vite-hot-client@0.2.4:
+    resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
+
+  vite-hot-client@2.0.4:
+    resolution: {integrity: sha512-W9LOGAyGMrbGArYJN4LBCdOC5+Zwh7dHvOHC0KmGKkJhsOzaKbpo/jEjpPKVHIW0/jBWj8RZG0NUxfgA8BxgAg==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
 
   vite-node@0.29.8:
     resolution: {integrity: sha512-b6OtCXfk65L6SElVM20q5G546yu10/kNrhg08afEoWlFRJXFq9/6glsvSVY+aI6YeC1tu2TtAqI2jHEQmOmsFw==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
 
-  vite-node@1.6.1:
-    resolution: {integrity: sha512-YAXkfvGtuTzwWbDSACdJSg4A4DZiAqckWe90Zapc/sEX3XvHcw1NdurM/6od8J207tSDqNbSsgdCacBgvJKFuA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vite-node@3.0.7:
+    resolution: {integrity: sha512-2fX0QwX4GkkkpULXdT1Pf4q0tC1i1lFOyseKoonavXUNlQ77KpW2XqBGGNIm/J4Ows4KxgGJzDguYVPKwG/n5A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
-  vite-plugin-checker@0.5.6:
-    resolution: {integrity: sha512-ftRyON0gORUHDxcDt2BErmsikKSkfvl1i2DoP6Jt2zDO9InfvM6tqO1RkXhSjkaXEhKPea6YOnhFaZxW3BzudQ==}
+  vite-plugin-checker@0.8.0:
+    resolution: {integrity: sha512-UA5uzOGm97UvZRTdZHiQVYFnd86AVn8EVaD4L3PoVzxH+IZSfaAw14WGFwX9QS23UW3lV/5bVKZn6l0w+q9P0g==}
     engines: {node: '>=14.16'}
     peerDependencies:
+      '@biomejs/biome': '>=1.7'
       eslint: '>=7'
       meow: ^9.0.0
       optionator: ^0.9.1
@@ -6668,8 +6292,10 @@ packages:
       vite: '>=2.0.0'
       vls: '*'
       vti: '*'
-      vue-tsc: '*'
+      vue-tsc: ~2.1.6
     peerDependenciesMeta:
+      '@biomejs/biome':
+        optional: true
       eslint:
         optional: true
       meow:
@@ -6687,46 +6313,31 @@ packages:
       vue-tsc:
         optional: true
 
-  vite-plugin-inspect@0.7.42:
-    resolution: {integrity: sha512-JCyX86wr3siQc+p9Kd0t8VkFHAJag0RaQVIpdFGSv5FEaePEVB6+V/RGtz2dQkkGSXQzRWrPs4cU3dRKg32bXw==}
+  vite-plugin-inspect@0.8.9:
+    resolution: {integrity: sha512-22/8qn+LYonzibb1VeFZmISdVao5kC22jmEKm24vfFE8siEn47EpVcCLYMv6iKOYMJfjSvSJfueOwcFCkUnV3A==}
     engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
-      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.1
     peerDependenciesMeta:
       '@nuxt/kit':
         optional: true
 
-  vite-plugin-vue-inspector@3.7.2:
-    resolution: {integrity: sha512-PSe/t2RoVzB64Ofuec7W/Z0FuKHzmU7esLrMOGwX+BNyXt8dAMtYbz4wL/TqoH1zVPDdjQecQpM5+K9VnBYpAg==}
+  vite-plugin-inspect@11.0.0:
+    resolution: {integrity: sha512-Q0RDNcMs1mbI2yGRwOzSapnnA6NFO0j88+Vb8pJX0iYMw34WczwKJi3JgheItDhbWRq/CLUR0cs+ajZpcUaIFQ==}
+    engines: {node: '>=14'}
     peerDependencies:
-      vite: ^3.0.0-0 || ^4.0.0-0
-
-  vite@4.2.3:
-    resolution: {integrity: sha512-kLU+m2q0Y434Y1kCy3TchefAdtFso0ILi0dLyFV8Us3InXTU11H/B5ZTqCKIQHzSKNxVG/yEx813EA9f1imQ9A==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
+      '@nuxt/kit': '*'
+      vite: ^6.0.0
     peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
+      '@nuxt/kit':
         optional: true
 
+  vite-plugin-vue-inspector@5.3.1:
+    resolution: {integrity: sha512-cBk172kZKTdvGpJuzCCLg8lJ909wopwsu3Ve9FsL1XsnLBiRT9U3MePcqrgGHgCX2ZgkqZmAGR8taxw+TV6s7A==}
+    peerDependencies:
+      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0
+
   vite@4.5.9:
     resolution: {integrity: sha512-qK9W4xjgD3gXbC0NmdNFFnVFLMWSNiR3swj957yutwzzN16xF/E7nmtAyp1rT9hviDroQANjE4HK3H4WqWdFtw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -6755,22 +6366,27 @@ packages:
       terser:
         optional: true
 
-  vite@5.4.14:
-    resolution: {integrity: sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vite@6.0.11:
+    resolution: {integrity: sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
       sass-embedded: '*'
       stylus: '*'
       sugarss: '*'
-      terser: ^5.4.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
     peerDependenciesMeta:
       '@types/node':
         optional: true
+      jiti:
+        optional: true
       less:
         optional: true
       lightningcss:
@@ -6785,6 +6401,10 @@ packages:
         optional: true
       terser:
         optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
 
   vite@6.2.0:
     resolution: {integrity: sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==}
@@ -6860,20 +6480,23 @@ packages:
       webdriverio:
         optional: true
 
-  vitest@1.6.1:
-    resolution: {integrity: sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vitest@3.0.7:
+    resolution: {integrity: sha512-IP7gPK3LS3Fvn44x30X1dM9vtawm0aesAa2yBIZ9vQf+qB69NXC5776+Qmcr7ohUXIQuLhk7xQR0aSUIDPqavg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 1.6.1
-      '@vitest/ui': 1.6.1
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.0.7
+      '@vitest/ui': 3.0.7
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
+      '@types/debug':
+        optional: true
       '@types/node':
         optional: true
       '@vitest/browser':
@@ -6906,17 +6529,11 @@ packages:
     resolution: {integrity: sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==}
     hasBin: true
 
-  vscode-oniguruma@1.7.0:
-    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
-
-  vscode-textmate@6.0.0:
-    resolution: {integrity: sha512-gu73tuZfJgu+mvCSy4UZwd2JXykjK9zAZsfmDeut5dx/1a7FeTk0XwJsSuqQn+cuMCGVbIBfl+s53X4T19DnzQ==}
-
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
-  vue-bundle-renderer@1.0.3:
-    resolution: {integrity: sha512-EfjX+5TTUl70bki9hPuVp+54JiZOvFIfoWBcfXsSwLzKEiDYyHNi5iX8srnqLIv3YRnvxgbntdcG1WPq0MvffQ==}
+  vue-bundle-renderer@2.1.1:
+    resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
 
   vue-component-type-helpers@2.2.4:
     resolution: {integrity: sha512-F66p0XLbAu92BRz6kakHyAcaUSF7HWpWX/THCqL0TxySSj7z/nok5UUMohfNkkCm1pZtawsdzoJ4p1cjNqCx0Q==}
@@ -6935,6 +6552,12 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-tsc@2.1.10:
+    resolution: {integrity: sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -6951,11 +6574,6 @@ packages:
     resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==}
     engines: {node: '>=12'}
 
-  wait-on@7.2.0:
-    resolution: {integrity: sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==}
-    engines: {node: '>=12.0.0'}
-    hasBin: true
-
   watchpack@2.4.2:
     resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
     engines: {node: '>=10.13.0'}
@@ -7019,9 +6637,9 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
 
-  which@4.0.0:
-    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
-    engines: {node: ^16.13.0 || >=18.0.0}
+  which@5.0.0:
+    resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
+    engines: {node: ^18.17.0 || >=20.5.0}
     hasBin: true
 
   why-is-node-running@2.3.0:
@@ -7029,9 +6647,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  wide-align@1.1.5:
-    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
-
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -7066,9 +6681,6 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
-  xxhashjs@0.2.2:
-    resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==}
-
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -7111,16 +6723,16 @@ packages:
     resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
     engines: {node: '>=12.20'}
 
+  yoctocolors@2.1.1:
+    resolution: {integrity: sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==}
+    engines: {node: '>=18'}
+
   yup@1.4.0:
     resolution: {integrity: sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==}
 
   zhead@2.2.4:
     resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==}
 
-  zip-stream@4.1.1:
-    resolution: {integrity: sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==}
-    engines: {node: '>= 10'}
-
   zip-stream@6.0.1:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
@@ -7242,6 +6854,11 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/install-pkg@1.0.0':
+    dependencies:
+      package-manager-detector: 0.2.10
+      tinyexec: 0.3.2
+
   '@antfu/utils@0.7.10': {}
 
   '@babel/code-frame@7.26.2':
@@ -7925,6 +7542,17 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
+  '@clack/core@0.4.1':
+    dependencies:
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
+  '@clack/prompts@0.10.0':
+    dependencies:
+      '@clack/core': 0.4.1
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
   '@cloudflare/kv-asset-handler@0.3.4':
     dependencies:
       mime: 3.0.0
@@ -7934,7 +7562,7 @@ snapshots:
   '@docsearch/js@3.9.0(@algolia/client-search@5.20.3)(search-insights@2.17.3)':
     dependencies:
       '@docsearch/react': 3.9.0(@algolia/client-search@5.20.3)(search-insights@2.17.3)
-      preact: 10.26.2
+      preact: 10.26.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -7953,10 +7581,13 @@ snapshots:
     transitivePeerDependencies:
       - '@algolia/client-search'
 
-  '@esbuild/aix-ppc64@0.19.12':
-    optional: true
+  '@es-joy/jsdoccomment@0.49.0':
+    dependencies:
+      comment-parser: 1.4.1
+      esquery: 1.6.0
+      jsdoc-type-pratt-parser: 4.1.0
 
-  '@esbuild/aix-ppc64@0.21.5':
+  '@esbuild/aix-ppc64@0.19.12':
     optional: true
 
   '@esbuild/aix-ppc64@0.24.2':
@@ -7965,288 +7596,192 @@ snapshots:
   '@esbuild/aix-ppc64@0.25.0':
     optional: true
 
-  '@esbuild/android-arm64@0.17.19':
-    optional: true
-
   '@esbuild/android-arm64@0.18.20':
     optional: true
 
   '@esbuild/android-arm64@0.19.12':
     optional: true
 
-  '@esbuild/android-arm64@0.21.5':
-    optional: true
-
   '@esbuild/android-arm64@0.24.2':
     optional: true
 
   '@esbuild/android-arm64@0.25.0':
     optional: true
 
-  '@esbuild/android-arm@0.17.19':
-    optional: true
-
   '@esbuild/android-arm@0.18.20':
     optional: true
 
   '@esbuild/android-arm@0.19.12':
     optional: true
 
-  '@esbuild/android-arm@0.21.5':
-    optional: true
-
   '@esbuild/android-arm@0.24.2':
     optional: true
 
   '@esbuild/android-arm@0.25.0':
     optional: true
 
-  '@esbuild/android-x64@0.17.19':
-    optional: true
-
   '@esbuild/android-x64@0.18.20':
     optional: true
 
   '@esbuild/android-x64@0.19.12':
     optional: true
 
-  '@esbuild/android-x64@0.21.5':
-    optional: true
-
   '@esbuild/android-x64@0.24.2':
     optional: true
 
   '@esbuild/android-x64@0.25.0':
     optional: true
 
-  '@esbuild/darwin-arm64@0.17.19':
-    optional: true
-
   '@esbuild/darwin-arm64@0.18.20':
     optional: true
 
   '@esbuild/darwin-arm64@0.19.12':
     optional: true
 
-  '@esbuild/darwin-arm64@0.21.5':
-    optional: true
-
   '@esbuild/darwin-arm64@0.24.2':
     optional: true
 
   '@esbuild/darwin-arm64@0.25.0':
     optional: true
 
-  '@esbuild/darwin-x64@0.17.19':
-    optional: true
-
   '@esbuild/darwin-x64@0.18.20':
     optional: true
 
   '@esbuild/darwin-x64@0.19.12':
     optional: true
 
-  '@esbuild/darwin-x64@0.21.5':
-    optional: true
-
   '@esbuild/darwin-x64@0.24.2':
     optional: true
 
   '@esbuild/darwin-x64@0.25.0':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.17.19':
-    optional: true
-
   '@esbuild/freebsd-arm64@0.18.20':
     optional: true
 
   '@esbuild/freebsd-arm64@0.19.12':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.21.5':
-    optional: true
-
   '@esbuild/freebsd-arm64@0.24.2':
     optional: true
 
   '@esbuild/freebsd-arm64@0.25.0':
     optional: true
 
-  '@esbuild/freebsd-x64@0.17.19':
-    optional: true
-
   '@esbuild/freebsd-x64@0.18.20':
     optional: true
 
   '@esbuild/freebsd-x64@0.19.12':
     optional: true
 
-  '@esbuild/freebsd-x64@0.21.5':
-    optional: true
-
   '@esbuild/freebsd-x64@0.24.2':
     optional: true
 
   '@esbuild/freebsd-x64@0.25.0':
     optional: true
 
-  '@esbuild/linux-arm64@0.17.19':
-    optional: true
-
   '@esbuild/linux-arm64@0.18.20':
     optional: true
 
   '@esbuild/linux-arm64@0.19.12':
     optional: true
 
-  '@esbuild/linux-arm64@0.21.5':
-    optional: true
-
   '@esbuild/linux-arm64@0.24.2':
     optional: true
 
   '@esbuild/linux-arm64@0.25.0':
     optional: true
 
-  '@esbuild/linux-arm@0.17.19':
-    optional: true
-
   '@esbuild/linux-arm@0.18.20':
     optional: true
 
   '@esbuild/linux-arm@0.19.12':
     optional: true
 
-  '@esbuild/linux-arm@0.21.5':
-    optional: true
-
   '@esbuild/linux-arm@0.24.2':
     optional: true
 
   '@esbuild/linux-arm@0.25.0':
     optional: true
 
-  '@esbuild/linux-ia32@0.17.19':
-    optional: true
-
   '@esbuild/linux-ia32@0.18.20':
     optional: true
 
   '@esbuild/linux-ia32@0.19.12':
     optional: true
 
-  '@esbuild/linux-ia32@0.21.5':
-    optional: true
-
   '@esbuild/linux-ia32@0.24.2':
     optional: true
 
   '@esbuild/linux-ia32@0.25.0':
     optional: true
 
-  '@esbuild/linux-loong64@0.17.19':
-    optional: true
-
   '@esbuild/linux-loong64@0.18.20':
     optional: true
 
   '@esbuild/linux-loong64@0.19.12':
     optional: true
 
-  '@esbuild/linux-loong64@0.21.5':
-    optional: true
-
   '@esbuild/linux-loong64@0.24.2':
     optional: true
 
   '@esbuild/linux-loong64@0.25.0':
     optional: true
 
-  '@esbuild/linux-mips64el@0.17.19':
-    optional: true
-
   '@esbuild/linux-mips64el@0.18.20':
     optional: true
 
   '@esbuild/linux-mips64el@0.19.12':
     optional: true
 
-  '@esbuild/linux-mips64el@0.21.5':
-    optional: true
-
   '@esbuild/linux-mips64el@0.24.2':
     optional: true
 
   '@esbuild/linux-mips64el@0.25.0':
     optional: true
 
-  '@esbuild/linux-ppc64@0.17.19':
-    optional: true
-
   '@esbuild/linux-ppc64@0.18.20':
     optional: true
 
   '@esbuild/linux-ppc64@0.19.12':
     optional: true
 
-  '@esbuild/linux-ppc64@0.21.5':
-    optional: true
-
   '@esbuild/linux-ppc64@0.24.2':
     optional: true
 
   '@esbuild/linux-ppc64@0.25.0':
     optional: true
 
-  '@esbuild/linux-riscv64@0.17.19':
-    optional: true
-
   '@esbuild/linux-riscv64@0.18.20':
     optional: true
 
   '@esbuild/linux-riscv64@0.19.12':
     optional: true
 
-  '@esbuild/linux-riscv64@0.21.5':
-    optional: true
-
   '@esbuild/linux-riscv64@0.24.2':
     optional: true
 
   '@esbuild/linux-riscv64@0.25.0':
     optional: true
 
-  '@esbuild/linux-s390x@0.17.19':
-    optional: true
-
   '@esbuild/linux-s390x@0.18.20':
     optional: true
 
   '@esbuild/linux-s390x@0.19.12':
     optional: true
 
-  '@esbuild/linux-s390x@0.21.5':
-    optional: true
-
   '@esbuild/linux-s390x@0.24.2':
     optional: true
 
   '@esbuild/linux-s390x@0.25.0':
     optional: true
 
-  '@esbuild/linux-x64@0.17.19':
-    optional: true
-
   '@esbuild/linux-x64@0.18.20':
     optional: true
 
   '@esbuild/linux-x64@0.19.12':
     optional: true
 
-  '@esbuild/linux-x64@0.21.5':
-    optional: true
-
   '@esbuild/linux-x64@0.24.2':
     optional: true
 
@@ -8259,18 +7794,12 @@ snapshots:
   '@esbuild/netbsd-arm64@0.25.0':
     optional: true
 
-  '@esbuild/netbsd-x64@0.17.19':
-    optional: true
-
   '@esbuild/netbsd-x64@0.18.20':
     optional: true
 
   '@esbuild/netbsd-x64@0.19.12':
     optional: true
 
-  '@esbuild/netbsd-x64@0.21.5':
-    optional: true
-
   '@esbuild/netbsd-x64@0.24.2':
     optional: true
 
@@ -8283,90 +7812,60 @@ snapshots:
   '@esbuild/openbsd-arm64@0.25.0':
     optional: true
 
-  '@esbuild/openbsd-x64@0.17.19':
-    optional: true
-
   '@esbuild/openbsd-x64@0.18.20':
     optional: true
 
   '@esbuild/openbsd-x64@0.19.12':
     optional: true
 
-  '@esbuild/openbsd-x64@0.21.5':
-    optional: true
-
   '@esbuild/openbsd-x64@0.24.2':
     optional: true
 
   '@esbuild/openbsd-x64@0.25.0':
     optional: true
 
-  '@esbuild/sunos-x64@0.17.19':
-    optional: true
-
   '@esbuild/sunos-x64@0.18.20':
     optional: true
 
   '@esbuild/sunos-x64@0.19.12':
     optional: true
 
-  '@esbuild/sunos-x64@0.21.5':
-    optional: true
-
   '@esbuild/sunos-x64@0.24.2':
     optional: true
 
   '@esbuild/sunos-x64@0.25.0':
     optional: true
 
-  '@esbuild/win32-arm64@0.17.19':
-    optional: true
-
   '@esbuild/win32-arm64@0.18.20':
     optional: true
 
   '@esbuild/win32-arm64@0.19.12':
     optional: true
 
-  '@esbuild/win32-arm64@0.21.5':
-    optional: true
-
   '@esbuild/win32-arm64@0.24.2':
     optional: true
 
   '@esbuild/win32-arm64@0.25.0':
     optional: true
 
-  '@esbuild/win32-ia32@0.17.19':
-    optional: true
-
   '@esbuild/win32-ia32@0.18.20':
     optional: true
 
   '@esbuild/win32-ia32@0.19.12':
     optional: true
 
-  '@esbuild/win32-ia32@0.21.5':
-    optional: true
-
   '@esbuild/win32-ia32@0.24.2':
     optional: true
 
   '@esbuild/win32-ia32@0.25.0':
     optional: true
 
-  '@esbuild/win32-x64@0.17.19':
-    optional: true
-
   '@esbuild/win32-x64@0.18.20':
     optional: true
 
   '@esbuild/win32-x64@0.19.12':
     optional: true
 
-  '@esbuild/win32-x64@0.21.5':
-    optional: true
-
   '@esbuild/win32-x64@0.24.2':
     optional: true
 
@@ -8380,6 +7879,10 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.1': {}
 
+  '@eslint/compat@1.2.7(eslint@9.21.0(jiti@2.4.2))':
+    optionalDependencies:
+      eslint: 9.21.0(jiti@2.4.2)
+
   '@eslint/config-array@0.19.2':
     dependencies:
       '@eslint/object-schema': 2.1.6
@@ -8415,11 +7918,11 @@ snapshots:
       '@eslint/core': 0.12.0
       levn: 0.4.1
 
-  '@hapi/hoek@9.3.0': {}
-
-  '@hapi/topo@5.1.0':
+  '@gerrit0/mini-shiki@1.27.2':
     dependencies:
-      '@hapi/hoek': 9.3.0
+      '@shikijs/engine-oniguruma': 1.29.2
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
 
   '@humanfs/core@0.19.1': {}
 
@@ -8449,10 +7952,6 @@ snapshots:
     dependencies:
       minipass: 7.1.2
 
-  '@jest/schemas@29.6.3':
-    dependencies:
-      '@sinclair/typebox': 0.27.8
-
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
@@ -8483,27 +7982,12 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
-  '@mapbox/node-pre-gyp@1.0.11(encoding@0.1.13)':
-    dependencies:
-      detect-libc: 2.0.3
-      https-proxy-agent: 5.0.1
-      make-dir: 3.1.0
-      node-fetch: 2.7.0(encoding@0.1.13)
-      nopt: 5.0.0
-      npmlog: 5.0.1
-      rimraf: 3.0.2
-      semver: 7.7.1
-      tar: 6.2.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@mapbox/node-pre-gyp@2.0.0(encoding@0.1.13)':
+  '@mapbox/node-pre-gyp@2.0.0':
     dependencies:
       consola: 3.4.0
       detect-libc: 2.0.3
       https-proxy-agent: 7.0.6(supports-color@9.4.0)
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.7.0
       nopt: 8.1.0
       semver: 7.7.1
       tar: 7.4.3
@@ -8511,10 +7995,6 @@ snapshots:
       - encoding
       - supports-color
 
-  '@netlify/functions@1.6.0':
-    dependencies:
-      is-promise: 4.0.0
-
   '@netlify/functions@2.8.2':
     dependencies:
       '@netlify/serverless-functions-api': 1.26.1
@@ -8536,90 +8016,74 @@ snapshots:
   '@nodelib/fs.walk@1.2.8':
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.0
+      fastq: 1.19.1
 
-  '@npmcli/agent@2.2.2':
-    dependencies:
-      agent-base: 7.1.3
-      http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.6(supports-color@9.4.0)
-      lru-cache: 10.4.3
-      socks-proxy-agent: 8.0.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@npmcli/fs@3.1.1':
+  '@nuxt/cli@3.22.2(magicast@0.3.5)':
     dependencies:
+      c12: 2.0.4(magicast@0.3.5)
+      chokidar: 4.0.3
+      citty: 0.1.6
+      clipboardy: 4.0.0
+      consola: 3.4.0
+      defu: 6.1.4
+      fuse.js: 7.1.0
+      giget: 1.2.5
+      h3: 1.15.1
+      httpxy: 0.1.7
+      jiti: 2.4.2
+      listhen: 1.9.0
+      nypm: 0.5.4
+      ofetch: 1.4.1
+      ohash: 2.0.6
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 1.3.1
+      scule: 1.3.0
       semver: 7.7.1
-
-  '@npmcli/git@5.0.8':
-    dependencies:
-      '@npmcli/promise-spawn': 7.0.2
-      ini: 4.1.3
-      lru-cache: 10.4.3
-      npm-pick-manifest: 9.1.0
-      proc-log: 4.2.0
-      promise-inflight: 1.0.1
-      promise-retry: 2.0.1
-      semver: 7.7.1
-      which: 4.0.0
+      std-env: 3.8.0
+      tinyexec: 0.3.2
+      ufo: 1.5.4
     transitivePeerDependencies:
-      - bluebird
-
-  '@npmcli/installed-package-contents@2.1.0':
-    dependencies:
-      npm-bundled: 3.0.1
-      npm-normalize-package-bin: 3.0.1
-
-  '@npmcli/node-gyp@3.0.0': {}
-
-  '@npmcli/package-json@5.2.1':
-    dependencies:
-      '@npmcli/git': 5.0.8
-      glob: 10.4.5
-      hosted-git-info: 7.0.2
-      json-parse-even-better-errors: 3.0.2
-      normalize-package-data: 6.0.2
-      proc-log: 4.2.0
-      semver: 7.7.1
-    transitivePeerDependencies:
-      - bluebird
-
-  '@npmcli/promise-spawn@7.0.2':
-    dependencies:
-      which: 4.0.0
-
-  '@npmcli/redact@1.1.0': {}
-
-  '@npmcli/run-script@7.0.4':
-    dependencies:
-      '@npmcli/node-gyp': 3.0.0
-      '@npmcli/package-json': 5.2.1
-      '@npmcli/promise-spawn': 7.0.2
-      node-gyp: 10.3.1
-      which: 4.0.0
-    transitivePeerDependencies:
-      - bluebird
-      - supports-color
+      - magicast
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3))':
+  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 7.2.0
-      nuxt: 3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3)
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/devtools-wizard@0.8.5':
+  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+    dependencies:
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@nuxt/schema': 3.15.4
+      execa: 7.2.0
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+
+  '@nuxt/devtools-kit@2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+    dependencies:
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@nuxt/schema': 3.15.4
+      execa: 9.5.2
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+
+  '@nuxt/devtools-wizard@1.7.0':
     dependencies:
       consola: 3.4.0
-      diff: 5.2.0
+      diff: 7.0.0
       execa: 7.2.0
-      global-dirs: 3.0.1
+      global-directory: 4.0.1
       magicast: 0.3.5
       pathe: 1.1.2
       pkg-types: 1.3.1
@@ -8627,63 +8091,188 @@ snapshots:
       rc9: 2.1.2
       semver: 7.7.1
 
-  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3))(rollup@4.34.8)':
+  '@nuxt/devtools-wizard@2.1.1':
+    dependencies:
+      consola: 3.4.0
+      diff: 7.0.0
+      execa: 9.5.2
+      magicast: 0.3.5
+      pathe: 2.0.3
+      pkg-types: 2.0.0
+      prompts: 2.4.2
+      semver: 7.7.1
+
+  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3))
-      '@nuxt/devtools-wizard': 0.8.5
+      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
+      cronstrue: 2.55.0
+      destr: 2.0.3
       error-stack-parser-es: 0.1.5
       execa: 7.2.0
-      fast-glob: 3.3.3
+      fast-npm-meta: 0.2.2
       flatted: 3.3.3
       get-port-please: 3.1.2
-      global-dirs: 3.0.1
-      h3: 1.15.1
       hookable: 5.5.3
-      image-meta: 0.1.1
-      is-installed-globally: 0.4.0
+      image-meta: 0.2.1
+      is-installed-globally: 1.0.0
       launch-editor: 2.10.0
-      local-pkg: 0.4.3
+      local-pkg: 0.5.1
       magicast: 0.3.5
-      nuxt: 3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3)
-      nypm: 0.3.12
-      ofetch: 1.4.1
+      nypm: 0.4.1
       ohash: 1.1.4
-      pacote: 17.0.7
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
       rc9: 2.1.2
+      scule: 1.3.0
       semver: 7.7.1
       simple-git: 3.27.0
-      sirv: 2.0.4
-      unimport: 3.14.6(rollup@4.34.8)
-      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)
-      vite-plugin-vue-inspector: 3.7.2
-      wait-on: 7.2.0
+      sirv: 3.0.1
+      tinyglobby: 0.2.10
+      unimport: 3.14.6(rollup@3.29.5)
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       which: 3.0.1
       ws: 8.18.1
     transitivePeerDependencies:
-      - bluebird
       - bufferutil
-      - debug
       - rollup
       - supports-color
       - utf-8-validate
+      - vue
 
-  '@nuxt/eslint-config@0.2.0(eslint@9.21.0(jiti@2.4.2))':
+  '@nuxt/devtools@1.7.0(rollup@4.34.8)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      '@rushstack/eslint-patch': 1.10.5
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/parser': 6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@antfu/utils': 0.7.10
+      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-wizard': 1.7.0
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-kit': 7.6.8
+      birpc: 0.2.19
+      consola: 3.4.0
+      cronstrue: 2.55.0
+      destr: 2.0.3
+      error-stack-parser-es: 0.1.5
+      execa: 7.2.0
+      fast-npm-meta: 0.2.2
+      flatted: 3.3.3
+      get-port-please: 3.1.2
+      hookable: 5.5.3
+      image-meta: 0.2.1
+      is-installed-globally: 1.0.0
+      launch-editor: 2.10.0
+      local-pkg: 0.5.1
+      magicast: 0.3.5
+      nypm: 0.4.1
+      ohash: 1.1.4
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      pkg-types: 1.3.1
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.1
+      simple-git: 3.27.0
+      sirv: 3.0.1
+      tinyglobby: 0.2.10
+      unimport: 3.14.6(rollup@4.34.8)
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      which: 3.0.1
+      ws: 8.18.1
+    transitivePeerDependencies:
+      - bufferutil
+      - rollup
+      - supports-color
+      - utf-8-validate
+      - vue
+
+  '@nuxt/devtools@2.1.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@nuxt/devtools-kit': 2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-wizard': 2.1.1
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-kit': 7.7.2
+      birpc: 2.2.0
+      consola: 3.4.0
+      destr: 2.0.3
+      error-stack-parser-es: 1.0.5
+      execa: 9.5.2
+      fast-npm-meta: 0.3.1
+      get-port-please: 3.1.2
+      hookable: 5.5.3
+      image-meta: 0.2.1
+      is-installed-globally: 1.0.0
+      launch-editor: 2.10.0
+      local-pkg: 1.1.0
+      magicast: 0.3.5
+      nypm: 0.6.0
+      ohash: 2.0.6
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.0.0
+      semver: 7.7.1
+      simple-git: 3.27.0
+      sirv: 3.0.1
+      structured-clone-es: 1.0.0
+      tinyglobby: 0.2.12
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      which: 5.0.0
+      ws: 8.18.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+      - vue
+
+  '@nuxt/eslint-config@1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+    dependencies:
+      '@antfu/install-pkg': 1.0.0
+      '@clack/prompts': 0.10.0
+      '@eslint/js': 9.21.0
+      '@nuxt/eslint-plugin': 1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@stylistic/eslint-plugin': 4.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
+      eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@2.4.2))
+      eslint-flat-config-utils: 2.0.1
+      eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@2.4.2))
+      eslint-plugin-import-x: 4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      eslint-plugin-jsdoc: 50.6.3(eslint@9.21.0(jiti@2.4.2))
+      eslint-plugin-regexp: 2.7.0(eslint@9.21.0(jiti@2.4.2))
+      eslint-plugin-unicorn: 57.0.0(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-vue: 9.32.0(eslint@9.21.0(jiti@2.4.2))
-      typescript: 5.7.3
+      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))
+      globals: 15.15.0
+      local-pkg: 1.1.0
+      pathe: 2.0.3
+      vue-eslint-parser: 9.4.3(eslint@9.21.0(jiti@2.4.2))
+    transitivePeerDependencies:
+      - '@vue/compiler-sfc'
+      - supports-color
+      - typescript
+
+  '@nuxt/eslint-plugin@1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.25.0
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      eslint: 9.21.0(jiti@2.4.2)
     transitivePeerDependencies:
       - supports-color
+      - typescript
 
   '@nuxt/kit@3.15.4(magicast@0.3.5)':
     dependencies:
@@ -8711,57 +8300,7 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/kit@3.3.2(magicast@0.3.5)(rollup@3.29.5)':
-    dependencies:
-      '@nuxt/schema': 3.3.2(magicast@0.3.5)(rollup@3.29.5)
-      c12: 1.11.2(magicast@0.3.5)
-      consola: 2.15.3
-      defu: 6.1.4
-      globby: 13.2.2
-      hash-sum: 2.0.0
-      ignore: 5.3.2
-      jiti: 1.21.7
-      knitwork: 1.2.0
-      lodash.template: 4.5.0
-      mlly: 1.7.4
-      pathe: 1.1.2
-      pkg-types: 1.3.1
-      scule: 1.3.0
-      semver: 7.7.1
-      unctx: 2.4.1
-      unimport: 3.14.6(rollup@3.29.5)
-      untyped: 1.5.2
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
-  '@nuxt/kit@3.3.2(magicast@0.3.5)(rollup@4.34.8)':
-    dependencies:
-      '@nuxt/schema': 3.3.2(magicast@0.3.5)(rollup@4.34.8)
-      c12: 1.11.2(magicast@0.3.5)
-      consola: 2.15.3
-      defu: 6.1.4
-      globby: 13.2.2
-      hash-sum: 2.0.0
-      ignore: 5.3.2
-      jiti: 1.21.7
-      knitwork: 1.2.0
-      lodash.template: 4.5.0
-      mlly: 1.7.4
-      pathe: 1.1.2
-      pkg-types: 1.3.1
-      scule: 1.3.0
-      semver: 7.7.1
-      unctx: 2.4.1
-      unimport: 3.14.6(rollup@4.34.8)
-      untyped: 1.5.2
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
-  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.3.2)(typescript@5.7.3)':
+  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.2)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       citty: 0.1.6
@@ -8769,11 +8308,11 @@ snapshots:
       defu: 6.1.4
       magic-regexp: 0.8.0
       mlly: 1.7.4
-      nuxi: 3.3.2
+      nuxi: 3.22.2
       pathe: 1.1.2
       pkg-types: 1.3.1
       tsconfck: 3.1.5(typescript@5.7.3)
-      unbuild: 2.0.0(typescript@5.7.3)
+      unbuild: 2.0.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -8787,46 +8326,6 @@ snapshots:
       pathe: 2.0.3
       std-env: 3.8.0
 
-  '@nuxt/schema@3.3.2(magicast@0.3.5)(rollup@3.29.5)':
-    dependencies:
-      c12: 1.11.2(magicast@0.3.5)
-      create-require: 1.1.1
-      defu: 6.1.4
-      hookable: 5.5.3
-      jiti: 1.21.7
-      pathe: 1.1.2
-      pkg-types: 1.3.1
-      postcss-import-resolver: 2.0.0
-      scule: 1.3.0
-      std-env: 3.8.0
-      ufo: 1.5.4
-      unimport: 3.14.6(rollup@3.29.5)
-      untyped: 1.5.2
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
-  '@nuxt/schema@3.3.2(magicast@0.3.5)(rollup@4.34.8)':
-    dependencies:
-      c12: 1.11.2(magicast@0.3.5)
-      create-require: 1.1.1
-      defu: 6.1.4
-      hookable: 5.5.3
-      jiti: 1.21.7
-      pathe: 1.1.2
-      pkg-types: 1.3.1
-      postcss-import-resolver: 2.0.0
-      scule: 1.3.0
-      std-env: 3.8.0
-      ufo: 1.5.4
-      unimport: 3.14.6(rollup@4.34.8)
-      untyped: 1.5.2
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
   '@nuxt/telemetry@2.6.5(magicast@0.3.5)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
@@ -8837,7 +8336,7 @@ snapshots:
       git-url-parse: 16.0.1
       is-docker: 3.0.0
       ofetch: 1.4.1
-      package-manager-detector: 0.2.9
+      package-manager-detector: 0.2.10
       parse-git-config: 3.0.0
       pathe: 2.0.3
       rc9: 2.1.2
@@ -8846,7 +8345,7 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/test-utils@3.17.0(@types/node@18.19.76)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@1.6.1(@types/node@18.19.76)(terser@5.39.0))(yaml@2.7.0)':
+  '@nuxt/test-utils@3.17.0(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
@@ -8858,7 +8357,7 @@ snapshots:
       fake-indexeddb: 6.0.0
       get-port-please: 3.1.2
       h3: 1.15.1
-      local-pkg: 1.0.0
+      local-pkg: 1.1.0
       magic-string: 0.30.17
       node-fetch-native: 1.6.6
       ofetch: 1.4.1
@@ -8871,12 +8370,12 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.2.0(@types/node@18.19.76)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@18.19.76)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@1.6.1(@types/node@18.19.76)(terser@5.39.0))(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vitest-environment-nuxt: 1.0.1(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
       '@vue/test-utils': 2.4.6
-      vitest: 1.6.1(@types/node@18.19.76)(terser@5.39.0)
+      vitest: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -8893,107 +8392,42 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/ui-templates@1.3.4': {}
-
-  '@nuxt/vite-builder@3.3.2(@types/node@18.19.76)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(sass@1.45.0)(terser@5.39.0)(typescript@4.9.5)(vue@3.5.13(typescript@4.9.5))':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
     dependencies:
-      '@nuxt/kit': 3.3.2(magicast@0.3.5)(rollup@3.29.5)
-      '@rollup/plugin-replace': 5.0.7(rollup@3.29.5)
-      '@vitejs/plugin-vue': 4.6.2(vite@4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0))(vue@3.5.13(typescript@4.9.5))
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0))(vue@3.5.13(typescript@4.9.5))
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@rollup/plugin-replace': 6.0.2(rollup@3.29.5)
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       autoprefixer: 10.4.20(postcss@8.5.3)
-      chokidar: 3.6.0
-      clear: 0.1.0
-      cssnano: 5.1.15(postcss@8.5.3)
+      consola: 3.4.0
+      cssnano: 7.0.6(postcss@8.5.3)
       defu: 6.1.4
-      esbuild: 0.17.19
+      esbuild: 0.24.2
       escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
       externality: 1.0.2
-      fs-extra: 11.3.0
       get-port-please: 3.1.2
       h3: 1.15.1
+      jiti: 2.4.2
       knitwork: 1.2.0
       magic-string: 0.30.17
       mlly: 1.7.4
       ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 0.1.3
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
       pkg-types: 1.3.1
       postcss: 8.5.3
-      postcss-import: 15.1.0(postcss@8.5.3)
-      postcss-url: 10.1.3(postcss@8.5.3)
-      rollup: 3.29.5
       rollup-plugin-visualizer: 5.14.0(rollup@3.29.5)
       std-env: 3.8.0
-      strip-literal: 1.3.0
       ufo: 1.5.4
-      unplugin: 1.16.1
-      vite: 4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
-      vite-node: 0.29.8(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
-      vite-plugin-checker: 0.5.6(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@4.9.5)(vite@4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0))
-      vue: 3.5.13(typescript@4.9.5)
-      vue-bundle-renderer: 1.0.3
-    transitivePeerDependencies:
-      - '@types/node'
-      - eslint
-      - less
-      - lightningcss
-      - magicast
-      - meow
-      - optionator
-      - rolldown
-      - sass
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-      - vls
-      - vti
-      - vue-tsc
-
-  '@nuxt/vite-builder@3.3.2(@types/node@18.19.76)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(terser@5.39.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))':
-    dependencies:
-      '@nuxt/kit': 3.3.2(magicast@0.3.5)(rollup@3.29.5)
-      '@rollup/plugin-replace': 5.0.7(rollup@3.29.5)
-      '@vitejs/plugin-vue': 4.6.2(vite@4.2.3(@types/node@18.19.76)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.2.3(@types/node@18.19.76)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
-      autoprefixer: 10.4.20(postcss@8.5.3)
-      chokidar: 3.6.0
-      clear: 0.1.0
-      cssnano: 5.1.15(postcss@8.5.3)
-      defu: 6.1.4
-      esbuild: 0.17.19
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      externality: 1.0.2
-      fs-extra: 11.3.0
-      get-port-please: 3.1.2
-      h3: 1.15.1
-      knitwork: 1.2.0
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 0.1.3
-      pkg-types: 1.3.1
-      postcss: 8.5.3
-      postcss-import: 15.1.0(postcss@8.5.3)
-      postcss-url: 10.1.3(postcss@8.5.3)
-      rollup: 3.29.5
-      rollup-plugin-visualizer: 5.14.0(rollup@3.29.5)
-      std-env: 3.8.0
-      strip-literal: 1.3.0
-      ufo: 1.5.4
-      unplugin: 1.16.1
-      vite: 4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
-      vite-node: 0.29.8(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
-      vite-plugin-checker: 0.5.6(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@4.2.3(@types/node@18.19.76)(terser@5.39.0))
+      unenv: 1.10.0
+      unplugin: 2.2.0
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
       vue: 3.5.13(typescript@5.7.3)
-      vue-bundle-renderer: 1.0.3
+      vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
+      - '@biomejs/biome'
       - '@types/node'
       - eslint
       - less
@@ -9002,16 +8436,79 @@ snapshots:
       - meow
       - optionator
       - rolldown
+      - rollup
       - sass
+      - sass-embedded
       - stylelint
       - stylus
       - sugarss
       - supports-color
       - terser
+      - tsx
       - typescript
       - vls
       - vti
       - vue-tsc
+      - yaml
+
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
+    dependencies:
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.34.8)
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      autoprefixer: 10.4.20(postcss@8.5.3)
+      consola: 3.4.0
+      cssnano: 7.0.6(postcss@8.5.3)
+      defu: 6.1.4
+      esbuild: 0.24.2
+      escape-string-regexp: 5.0.0
+      externality: 1.0.2
+      get-port-please: 3.1.2
+      h3: 1.15.1
+      jiti: 2.4.2
+      knitwork: 1.2.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      ohash: 1.1.4
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 1.3.1
+      postcss: 8.5.3
+      rollup-plugin-visualizer: 5.14.0(rollup@4.34.8)
+      std-env: 3.8.0
+      ufo: 1.5.4
+      unenv: 1.10.0
+      unplugin: 2.2.0
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
+      vue: 3.5.13(typescript@5.7.3)
+      vue-bundle-renderer: 2.1.1
+    transitivePeerDependencies:
+      - '@biomejs/biome'
+      - '@types/node'
+      - eslint
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - optionator
+      - rolldown
+      - rollup
+      - sass
+      - sass-embedded
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - vls
+      - vti
+      - vue-tsc
+      - yaml
 
   '@one-ini/wasm@0.1.1': {}
 
@@ -9114,12 +8611,12 @@ snapshots:
       require-from-string: 2.0.2
       uri-js-replace: 1.0.1
 
-  '@redocly/config@0.20.3': {}
+  '@redocly/config@0.21.0': {}
 
-  '@redocly/openapi-core@1.30.0(supports-color@9.4.0)':
+  '@redocly/openapi-core@1.31.3(supports-color@9.4.0)':
     dependencies:
       '@redocly/ajv': 8.11.2
-      '@redocly/config': 0.20.3
+      '@redocly/config': 0.21.0
       colorette: 1.4.0
       https-proxy-agent: 7.0.6(supports-color@9.4.0)
       js-levenshtein: 1.1.6
@@ -9148,17 +8645,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/plugin-commonjs@24.1.0(rollup@3.29.5)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
-      commondir: 1.0.1
-      estree-walker: 2.0.2
-      glob: 8.1.0
-      is-reference: 1.2.1
-      magic-string: 0.27.0
-    optionalDependencies:
-      rollup: 3.29.5
-
   '@rollup/plugin-commonjs@25.0.8(rollup@3.29.5)':
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
@@ -9182,14 +8668,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.34.8
 
-  '@rollup/plugin-inject@5.0.5(rollup@3.29.5)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
-      estree-walker: 2.0.2
-      magic-string: 0.30.17
-    optionalDependencies:
-      rollup: 3.29.5
-
   '@rollup/plugin-inject@5.0.5(rollup@4.34.8)':
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
@@ -9237,6 +8715,13 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
+  '@rollup/plugin-replace@6.0.2(rollup@3.29.5)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
+      magic-string: 0.30.17
+    optionalDependencies:
+      rollup: 3.29.5
+
   '@rollup/plugin-replace@6.0.2(rollup@4.34.8)':
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
@@ -9244,14 +8729,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.34.8
 
-  '@rollup/plugin-terser@0.4.4(rollup@3.29.5)':
-    dependencies:
-      serialize-javascript: 6.0.2
-      smob: 1.5.0
-      terser: 5.39.0
-    optionalDependencies:
-      rollup: 3.29.5
-
   '@rollup/plugin-terser@0.4.4(rollup@4.34.8)':
     dependencies:
       serialize-javascript: 6.0.2
@@ -9260,17 +8737,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.34.8
 
-  '@rollup/plugin-wasm@6.2.2(rollup@3.29.5)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
-    optionalDependencies:
-      rollup: 3.29.5
-
-  '@rollup/pluginutils@4.2.1':
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-
   '@rollup/pluginutils@5.1.4(rollup@3.29.5)':
     dependencies:
       '@types/estree': 1.0.6
@@ -9344,71 +8810,50 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.34.8':
     optional: true
 
-  '@rushstack/eslint-patch@1.10.5': {}
+  '@sec-ant/readable-stream@0.4.1': {}
 
-  '@sideway/address@4.1.5':
+  '@shikijs/engine-oniguruma@1.29.2':
     dependencies:
-      '@hapi/hoek': 9.3.0
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
 
-  '@sideway/formula@3.0.1': {}
-
-  '@sideway/pinpoint@2.0.0': {}
-
-  '@sigstore/bundle@2.3.2':
+  '@shikijs/types@1.29.2':
     dependencies:
-      '@sigstore/protobuf-specs': 0.3.3
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
 
-  '@sigstore/core@1.1.0': {}
-
-  '@sigstore/protobuf-specs@0.3.3': {}
-
-  '@sigstore/sign@2.3.2':
-    dependencies:
-      '@sigstore/bundle': 2.3.2
-      '@sigstore/core': 1.1.0
-      '@sigstore/protobuf-specs': 0.3.3
-      make-fetch-happen: 13.0.1
-      proc-log: 4.2.0
-      promise-retry: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sigstore/tuf@2.3.4':
-    dependencies:
-      '@sigstore/protobuf-specs': 0.3.3
-      tuf-js: 2.2.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sigstore/verify@1.2.1':
-    dependencies:
-      '@sigstore/bundle': 2.3.2
-      '@sigstore/core': 1.1.0
-      '@sigstore/protobuf-specs': 0.3.3
-
-  '@sinclair/typebox@0.27.8': {}
+  '@shikijs/vscode-textmate@10.0.2': {}
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
+  '@sindresorhus/merge-streams@4.0.0': {}
+
   '@stackblitz/sdk@1.11.0': {}
 
+  '@stylistic/eslint-plugin@4.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      eslint: 9.21.0(jiti@2.4.2)
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
+      estraverse: 5.3.0
+      picomatch: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@tootallnate/once@2.0.0': {}
 
   '@trysound/sax@0.2.0': {}
 
-  '@tufjs/canonical-json@2.0.0': {}
-
-  '@tufjs/models@2.0.1':
-    dependencies:
-      '@tufjs/canonical-json': 2.0.0
-      minimatch: 9.0.5
-
   '@types/chai-subset@1.3.5':
     dependencies:
       '@types/chai': 4.3.20
 
   '@types/chai@4.3.20': {}
 
+  '@types/doctrine@0.0.9': {}
+
   '@types/eslint-scope@3.7.7':
     dependencies:
       '@types/eslint': 9.6.1
@@ -9421,164 +8866,136 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/http-proxy@1.17.16':
     dependencies:
-      '@types/node': 18.19.76
+      '@types/node': 22.13.5
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/node@18.19.76':
+  '@types/node@22.13.5':
     dependencies:
-      undici-types: 5.26.5
+      undici-types: 6.20.0
+
+  '@types/normalize-package-data@2.4.4': {}
 
   '@types/parse-path@7.0.3': {}
 
   '@types/resolve@1.20.2': {}
 
-  '@types/semver@7.5.8': {}
+  '@types/unist@3.0.3': {}
 
-  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/eslint-plugin@8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/type-utils': 6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/utils': 6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.0(supports-color@9.4.0)
+      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.25.0
+      '@typescript-eslint/type-utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 8.25.0
       eslint: 9.21.0(jiti@2.4.2)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      semver: 7.7.1
-      ts-api-utils: 1.4.3(typescript@5.7.3)
-    optionalDependencies:
+      ts-api-utils: 2.0.1(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 6.21.0
+      '@typescript-eslint/scope-manager': 8.25.0
+      '@typescript-eslint/types': 8.25.0
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 8.25.0
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.21.0(jiti@2.4.2)
-    optionalDependencies:
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@6.21.0':
+  '@typescript-eslint/scope-manager@8.25.0':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
+      '@typescript-eslint/types': 8.25.0
+      '@typescript-eslint/visitor-keys': 8.25.0
 
-  '@typescript-eslint/type-utils@6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/type-utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.21.0(jiti@2.4.2)
-      ts-api-utils: 1.4.3(typescript@5.7.3)
-    optionalDependencies:
+      ts-api-utils: 2.0.1(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@6.21.0': {}
+  '@typescript-eslint/types@8.25.0': {}
 
-  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.7.3)':
+  '@typescript-eslint/typescript-estree@8.25.0(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
+      '@typescript-eslint/types': 8.25.0
+      '@typescript-eslint/visitor-keys': 8.25.0
       debug: 4.4.0(supports-color@9.4.0)
-      globby: 11.1.0
+      fast-glob: 3.3.3
       is-glob: 4.0.3
-      minimatch: 9.0.3
+      minimatch: 9.0.5
       semver: 7.7.1
-      ts-api-utils: 1.4.3(typescript@5.7.3)
-    optionalDependencies:
+      ts-api-utils: 2.0.1(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@6.21.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
-      '@types/json-schema': 7.0.15
-      '@types/semver': 7.5.8
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.25.0
+      '@typescript-eslint/types': 8.25.0
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
-      semver: 7.7.1
+      typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
-      - typescript
 
-  '@typescript-eslint/visitor-keys@6.21.0':
+  '@typescript-eslint/visitor-keys@8.25.0':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      eslint-visitor-keys: 3.4.3
+      '@typescript-eslint/types': 8.25.0
+      eslint-visitor-keys: 4.2.0
 
-  '@unhead/dom@1.11.19':
+  '@unhead/dom@1.11.20':
     dependencies:
-      '@unhead/schema': 1.11.19
-      '@unhead/shared': 1.11.19
+      '@unhead/schema': 1.11.20
+      '@unhead/shared': 1.11.20
 
-  '@unhead/schema@1.11.19':
+  '@unhead/schema@1.11.20':
     dependencies:
       hookable: 5.5.3
       zhead: 2.2.4
 
-  '@unhead/shared@1.11.19':
+  '@unhead/shared@1.11.20':
     dependencies:
-      '@unhead/schema': 1.11.19
+      '@unhead/schema': 1.11.20
       packrup: 0.1.2
 
-  '@unhead/ssr@1.11.19':
+  '@unhead/ssr@1.11.20':
     dependencies:
-      '@unhead/schema': 1.11.19
-      '@unhead/shared': 1.11.19
+      '@unhead/schema': 1.11.20
+      '@unhead/shared': 1.11.20
 
-  '@unhead/vue@1.11.19(vue@3.5.13(typescript@4.9.5))':
+  '@unhead/vue@1.11.20(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      '@unhead/schema': 1.11.19
-      '@unhead/shared': 1.11.19
+      '@unhead/schema': 1.11.20
+      '@unhead/shared': 1.11.20
       hookable: 5.5.3
-      unhead: 1.11.19
-      vue: 3.5.13(typescript@4.9.5)
-
-  '@unhead/vue@1.11.19(vue@3.5.13(typescript@5.7.3))':
-    dependencies:
-      '@unhead/schema': 1.11.19
-      '@unhead/shared': 1.11.19
-      hookable: 5.5.3
-      unhead: 1.11.19
+      unhead: 1.11.20
       vue: 3.5.13(typescript@5.7.3)
 
-  '@vercel/nft@0.22.6(encoding@0.1.13)':
+  '@vercel/nft@0.27.10(rollup@4.34.8)':
     dependencies:
-      '@mapbox/node-pre-gyp': 1.0.11(encoding@0.1.13)
-      '@rollup/pluginutils': 4.2.1
-      acorn: 8.14.0
-      async-sema: 3.1.1
-      bindings: 1.5.0
-      estree-walker: 2.0.2
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      micromatch: 4.0.8
-      node-gyp-build: 4.8.4
-      resolve-from: 5.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@vercel/nft@0.27.10(encoding@0.1.13)(rollup@4.34.8)':
-    dependencies:
-      '@mapbox/node-pre-gyp': 2.0.0(encoding@0.1.13)
+      '@mapbox/node-pre-gyp': 2.0.0
       '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
       acorn: 8.14.0
       acorn-import-attributes: 1.9.5(acorn@8.14.0)
@@ -9595,34 +9012,19 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@3.1.0(vite@4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0))(vue@3.5.13(typescript@4.9.5))':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
-      vite: 4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
-      vue: 3.5.13(typescript@4.9.5)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vitejs/plugin-vue-jsx@3.1.0(vite@4.2.3(@types/node@18.19.76)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
-    dependencies:
-      '@babel/core': 7.26.9
-      '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
-      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
-      vite: 4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@4.6.2(vite@4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0))(vue@3.5.13(typescript@4.9.5))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      vite: 4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
-      vue: 3.5.13(typescript@4.9.5)
-
-  '@vitejs/plugin-vue@4.6.2(vite@4.2.3(@types/node@18.19.76)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
-    dependencies:
-      vite: 4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
 
   '@vitest/expect@0.29.8':
@@ -9631,11 +9033,24 @@ snapshots:
       '@vitest/utils': 0.29.8
       chai: 4.5.0
 
-  '@vitest/expect@1.6.1':
+  '@vitest/expect@3.0.7':
     dependencies:
-      '@vitest/spy': 1.6.1
-      '@vitest/utils': 1.6.1
-      chai: 4.5.0
+      '@vitest/spy': 3.0.7
+      '@vitest/utils': 3.0.7
+      chai: 5.2.0
+      tinyrainbow: 2.0.0
+
+  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+    dependencies:
+      '@vitest/spy': 3.0.7
+      estree-walker: 3.0.3
+      magic-string: 0.30.17
+    optionalDependencies:
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+
+  '@vitest/pretty-format@3.0.7':
+    dependencies:
+      tinyrainbow: 2.0.0
 
   '@vitest/runner@0.29.8':
     dependencies:
@@ -9643,25 +9058,24 @@ snapshots:
       p-limit: 4.0.0
       pathe: 1.1.2
 
-  '@vitest/runner@1.6.1':
+  '@vitest/runner@3.0.7':
     dependencies:
-      '@vitest/utils': 1.6.1
-      p-limit: 5.0.0
-      pathe: 1.1.2
+      '@vitest/utils': 3.0.7
+      pathe: 2.0.3
 
-  '@vitest/snapshot@1.6.1':
+  '@vitest/snapshot@3.0.7':
     dependencies:
+      '@vitest/pretty-format': 3.0.7
       magic-string: 0.30.17
-      pathe: 1.1.2
-      pretty-format: 29.7.0
+      pathe: 2.0.3
 
   '@vitest/spy@0.29.8':
     dependencies:
       tinyspy: 1.1.1
 
-  '@vitest/spy@1.6.1':
+  '@vitest/spy@3.0.7':
     dependencies:
-      tinyspy: 2.2.1
+      tinyspy: 3.0.2
 
   '@vitest/utils@0.29.8':
     dependencies:
@@ -9670,12 +9084,34 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 27.5.1
 
-  '@vitest/utils@1.6.1':
+  '@vitest/utils@3.0.7':
     dependencies:
-      diff-sequences: 29.6.3
-      estree-walker: 3.0.3
-      loupe: 2.3.7
-      pretty-format: 29.7.0
+      '@vitest/pretty-format': 3.0.7
+      loupe: 3.1.3
+      tinyrainbow: 2.0.0
+
+  '@volar/language-core@2.4.11':
+    dependencies:
+      '@volar/source-map': 2.4.11
+
+  '@volar/source-map@2.4.11': {}
+
+  '@volar/typescript@2.4.11':
+    dependencies:
+      '@volar/language-core': 2.4.11
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue-macros/common@1.16.1(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vue/compiler-sfc': 3.5.13
+      ast-kit: 1.4.0
+      local-pkg: 1.1.0
+      magic-string-ast: 0.7.0
+      pathe: 2.0.3
+      picomatch: 4.0.2
+    optionalDependencies:
+      vue: 3.5.13(typescript@5.7.3)
 
   '@vue/babel-helper-vue-transform-on@1.2.5': {}
 
@@ -9737,8 +9173,86 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       '@vue/shared': 3.5.13
 
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
   '@vue/devtools-api@6.6.4': {}
 
+  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vue/devtools-kit': 7.6.8
+      '@vue/devtools-shared': 7.7.2
+      mitt: 3.0.1
+      nanoid: 5.1.2
+      pathe: 1.1.2
+      vite-hot-client: 0.2.4(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - vite
+
+  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vue/devtools-kit': 7.6.8
+      '@vue/devtools-shared': 7.7.2
+      mitt: 3.0.1
+      nanoid: 5.1.2
+      pathe: 1.1.2
+      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - vite
+
+  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vue/devtools-kit': 7.7.2
+      '@vue/devtools-shared': 7.7.2
+      mitt: 3.0.1
+      nanoid: 5.1.2
+      pathe: 2.0.3
+      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - vite
+
+  '@vue/devtools-kit@7.6.8':
+    dependencies:
+      '@vue/devtools-shared': 7.7.2
+      birpc: 0.2.19
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.2
+
+  '@vue/devtools-kit@7.7.2':
+    dependencies:
+      '@vue/devtools-shared': 7.7.2
+      birpc: 0.2.19
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.2
+
+  '@vue/devtools-shared@7.7.2':
+    dependencies:
+      rfdc: 1.4.1
+
+  '@vue/language-core@2.1.10(typescript@5.7.3)':
+    dependencies:
+      '@volar/language-core': 2.4.11
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.13
+      alien-signals: 0.2.2
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.7.3
+
   '@vue/reactivity@3.5.13':
     dependencies:
       '@vue/shared': 3.5.13
@@ -9755,12 +9269,6 @@ snapshots:
       '@vue/shared': 3.5.13
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@4.9.5))':
-    dependencies:
-      '@vue/compiler-ssr': 3.5.13
-      '@vue/shared': 3.5.13
-      vue: 3.5.13(typescript@4.9.5)
-
   '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.13
@@ -9771,7 +9279,7 @@ snapshots:
 
   '@vue/test-utils@2.4.6':
     dependencies:
-      js-beautify: 1.15.3
+      js-beautify: 1.15.4
       vue-component-type-helpers: 2.2.4
 
   '@webassemblyjs/ast@1.14.1':
@@ -9856,8 +9364,6 @@ snapshots:
 
   abab@2.0.6: {}
 
-  abbrev@1.1.1: {}
-
   abbrev@2.0.0: {}
 
   abbrev@3.0.0: {}
@@ -9897,11 +9403,6 @@ snapshots:
 
   agent-base@7.1.3: {}
 
-  aggregate-error@3.1.0:
-    dependencies:
-      clean-stack: 2.2.0
-      indent-string: 4.0.0
-
   ajv-formats@2.1.1(ajv@8.17.1):
     optionalDependencies:
       ajv: 8.17.1
@@ -9945,6 +9446,8 @@ snapshots:
       '@algolia/requester-fetch': 5.20.3
       '@algolia/requester-node-http': 5.20.3
 
+  alien-signals@0.2.2: {}
+
   ansi-colors@4.1.3: {}
 
   ansi-escapes@4.3.2:
@@ -9963,6 +9466,8 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
+  ansis@3.16.0: {}
+
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -9970,34 +9475,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  aproba@2.0.0: {}
-
-  archiver-utils@2.1.0:
-    dependencies:
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      lazystream: 1.0.1
-      lodash.defaults: 4.2.0
-      lodash.difference: 4.5.0
-      lodash.flatten: 4.4.0
-      lodash.isplainobject: 4.0.6
-      lodash.union: 4.6.0
-      normalize-path: 3.0.0
-      readable-stream: 2.3.8
-
-  archiver-utils@3.0.4:
-    dependencies:
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      lazystream: 1.0.1
-      lodash.defaults: 4.2.0
-      lodash.difference: 4.5.0
-      lodash.flatten: 4.4.0
-      lodash.isplainobject: 4.0.6
-      lodash.union: 4.6.0
-      normalize-path: 3.0.0
-      readable-stream: 3.6.2
-
   archiver-utils@5.0.2:
     dependencies:
       glob: 10.4.5
@@ -10008,16 +9485,6 @@ snapshots:
       normalize-path: 3.0.0
       readable-stream: 4.7.0
 
-  archiver@5.3.2:
-    dependencies:
-      archiver-utils: 2.1.0
-      async: 3.2.6
-      buffer-crc32: 0.2.13
-      readable-stream: 3.6.2
-      readdir-glob: 1.1.3
-      tar-stream: 2.2.0
-      zip-stream: 4.1.1
-
   archiver@7.0.1:
     dependencies:
       archiver-utils: 5.0.2
@@ -10028,19 +9495,26 @@ snapshots:
       tar-stream: 3.1.7
       zip-stream: 6.0.1
 
-  are-we-there-yet@2.0.0:
-    dependencies:
-      delegates: 1.0.0
-      readable-stream: 3.6.2
+  are-docs-informative@0.0.2: {}
 
   arg@5.0.2: {}
 
   argparse@2.0.1: {}
 
-  array-union@2.1.0: {}
-
   assertion-error@1.1.0: {}
 
+  assertion-error@2.0.1: {}
+
+  ast-kit@1.4.0:
+    dependencies:
+      '@babel/parser': 7.26.9
+      pathe: 2.0.3
+
+  ast-walker-scope@0.6.2:
+    dependencies:
+      '@babel/parser': 7.26.9
+      ast-kit: 1.4.0
+
   async-sema@3.1.1: {}
 
   async@3.2.6: {}
@@ -10050,21 +9524,13 @@ snapshots:
   autoprefixer@10.4.20(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.4
-      caniuse-lite: 1.0.30001700
+      caniuse-lite: 1.0.30001701
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  axios@1.7.9:
-    dependencies:
-      follow-redirects: 1.15.9
-      form-data: 4.0.2
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
   b4a@1.6.7: {}
 
   babel-plugin-polyfill-corejs2@0.4.12(@babel/core@7.26.9):
@@ -10098,8 +9564,6 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  big-integer@1.6.52: {}
-
   big.js@5.2.2: {}
 
   binary-extensions@2.3.0: {}
@@ -10110,18 +9574,10 @@ snapshots:
 
   birpc@0.2.19: {}
 
-  bl@4.1.0:
-    dependencies:
-      buffer: 5.7.1
-      inherits: 2.0.4
-      readable-stream: 3.6.2
+  birpc@2.2.0: {}
 
   boolbase@1.0.0: {}
 
-  bplist-parser@0.2.0:
-    dependencies:
-      big-integer: 1.6.52
-
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -10139,57 +9595,31 @@ snapshots:
 
   browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001700
-      electron-to-chromium: 1.5.104
+      caniuse-lite: 1.0.30001701
+      electron-to-chromium: 1.5.109
       node-releases: 2.0.19
-      update-browserslist-db: 1.1.2(browserslist@4.24.4)
-
-  buffer-crc32@0.2.13: {}
+      update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
   buffer-crc32@1.0.0: {}
 
   buffer-from@1.1.2: {}
 
-  buffer@5.7.1:
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-
   buffer@6.0.3:
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  bundle-name@3.0.0:
-    dependencies:
-      run-applescript: 5.0.0
+  builtin-modules@4.0.0: {}
 
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.0.0
 
-  bundle-require@5.1.0(esbuild@0.24.2):
+  bundle-require@5.1.0(esbuild@0.25.0):
     dependencies:
-      esbuild: 0.24.2
+      esbuild: 0.25.0
       load-tsconfig: 0.2.5
 
-  c12@1.11.2(magicast@0.3.5):
-    dependencies:
-      chokidar: 3.6.0
-      confbox: 0.1.8
-      defu: 6.1.4
-      dotenv: 16.4.7
-      giget: 1.2.5
-      jiti: 1.21.7
-      mlly: 1.7.4
-      ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 1.0.0
-      pkg-types: 1.3.1
-      rc9: 2.1.2
-    optionalDependencies:
-      magicast: 0.3.5
-
   c12@2.0.1(magicast@0.3.5):
     dependencies:
       chokidar: 4.0.3
@@ -10216,7 +9646,7 @@ snapshots:
       giget: 1.2.5
       jiti: 2.4.2
       mlly: 1.7.4
-      ohash: 2.0.4
+      ohash: 2.0.6
       pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -10224,22 +9654,24 @@ snapshots:
     optionalDependencies:
       magicast: 0.3.5
 
-  cac@6.7.14: {}
-
-  cacache@18.0.4:
+  c12@3.0.1(magicast@0.3.5):
     dependencies:
-      '@npmcli/fs': 3.1.1
-      fs-minipass: 3.0.3
-      glob: 10.4.5
-      lru-cache: 10.4.3
-      minipass: 7.1.2
-      minipass-collect: 2.0.1
-      minipass-flush: 1.0.5
-      minipass-pipeline: 1.2.4
-      p-map: 4.0.0
-      ssri: 10.0.6
-      tar: 6.2.1
-      unique-filename: 3.0.0
+      chokidar: 4.0.3
+      confbox: 0.1.8
+      defu: 6.1.4
+      dotenv: 16.4.7
+      exsolve: 0.4.4
+      giget: 2.0.0
+      jiti: 2.4.2
+      ohash: 2.0.6
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.0.0
+      rc9: 2.1.2
+    optionalDependencies:
+      magicast: 0.3.5
+
+  cac@6.7.14: {}
 
   call-bind-apply-helpers@1.0.2:
     dependencies:
@@ -10253,11 +9685,11 @@ snapshots:
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.24.4
-      caniuse-lite: 1.0.30001700
+      caniuse-lite: 1.0.30001701
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001700: {}
+  caniuse-lite@1.0.30001701: {}
 
   chai@4.5.0:
     dependencies:
@@ -10269,6 +9701,14 @@ snapshots:
       pathval: 1.1.1
       type-detect: 4.1.0
 
+  chai@5.2.0:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.1.3
+      pathval: 2.0.0
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -10278,22 +9718,21 @@ snapshots:
 
   change-case@5.4.4: {}
 
-  changelogen@0.5.7(magicast@0.3.5):
+  changelogen@0.6.0(magicast@0.3.5):
     dependencies:
-      c12: 1.11.2(magicast@0.3.5)
-      colorette: 2.0.20
+      c12: 3.0.1(magicast@0.3.5)
+      confbox: 0.1.8
       consola: 3.4.0
       convert-gitmoji: 0.1.5
       mri: 1.2.0
       node-fetch-native: 1.6.6
       ofetch: 1.4.1
       open: 10.1.0
-      pathe: 1.1.2
-      pkg-types: 1.3.1
+      pathe: 2.0.3
+      pkg-types: 2.0.0
       scule: 1.3.0
       semver: 7.7.1
       std-env: 3.8.0
-      yaml: 2.7.0
     transitivePeerDependencies:
       - magicast
 
@@ -10303,6 +9742,8 @@ snapshots:
     dependencies:
       get-func-name: 2.0.2
 
+  check-error@2.1.1: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -10325,13 +9766,15 @@ snapshots:
 
   chrome-trace-event@1.0.4: {}
 
+  ci-info@4.1.0: {}
+
   citty@0.1.6:
     dependencies:
       consola: 3.4.0
 
-  clean-stack@2.2.0: {}
-
-  clear@0.1.0: {}
+  clean-regexp@1.0.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
 
   cli-truncate@3.1.0:
     dependencies:
@@ -10364,14 +9807,10 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  color-support@1.1.3: {}
-
   colord@2.9.3: {}
 
   colorette@1.4.0: {}
 
-  colorette@2.0.20: {}
-
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -10386,17 +9825,12 @@ snapshots:
 
   commander@8.3.0: {}
 
+  comment-parser@1.4.1: {}
+
   commondir@1.0.1: {}
 
   compatx@0.1.8: {}
 
-  compress-commons@4.1.2:
-    dependencies:
-      buffer-crc32: 0.2.13
-      crc32-stream: 4.0.3
-      normalize-path: 3.0.0
-      readable-stream: 3.6.2
-
   compress-commons@6.0.2:
     dependencies:
       crc-32: 1.2.2
@@ -10418,20 +9852,18 @@ snapshots:
       ini: 1.3.8
       proto-list: 1.2.4
 
-  consola@2.15.3: {}
-
   consola@3.4.0: {}
 
-  console-control-strings@1.1.0: {}
-
   convert-gitmoji@0.1.5: {}
 
   convert-source-map@2.0.0: {}
 
-  cookie-es@0.5.0: {}
-
   cookie-es@1.2.2: {}
 
+  copy-anything@3.0.5:
+    dependencies:
+      is-what: 4.1.16
+
   core-js-compat@3.40.0:
     dependencies:
       browserslist: 4.24.4
@@ -10440,20 +9872,15 @@ snapshots:
 
   crc-32@1.2.2: {}
 
-  crc32-stream@4.0.3:
-    dependencies:
-      crc-32: 1.2.2
-      readable-stream: 3.6.2
-
   crc32-stream@6.0.0:
     dependencies:
       crc-32: 1.2.2
       readable-stream: 4.7.0
 
-  create-require@1.1.1: {}
-
   croner@9.0.0: {}
 
+  cronstrue@2.55.0: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -10613,8 +10040,6 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  cuint@0.2.2: {}
-
   data-urls@3.0.2:
     dependencies:
       abab: 2.0.6
@@ -10623,10 +10048,16 @@ snapshots:
 
   db0@0.2.4: {}
 
+  de-indent@1.0.2: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
 
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.0(supports-color@9.4.0):
     dependencies:
       ms: 2.1.3
@@ -10639,24 +10070,14 @@ snapshots:
     dependencies:
       type-detect: 4.1.0
 
+  deep-eql@5.0.2: {}
+
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
 
-  default-browser-id@3.0.0:
-    dependencies:
-      bplist-parser: 0.2.0
-      untildify: 4.0.0
-
   default-browser-id@5.0.0: {}
 
-  default-browser@4.0.0:
-    dependencies:
-      bundle-name: 3.0.0
-      default-browser-id: 3.0.0
-      execa: 7.2.0
-      titleize: 3.0.0
-
   default-browser@5.2.1:
     dependencies:
       bundle-name: 4.1.0
@@ -10670,14 +10091,10 @@ snapshots:
 
   delayed-stream@1.0.0: {}
 
-  delegates@1.0.0: {}
-
   denque@2.1.0: {}
 
   depd@2.0.0: {}
 
-  destr@1.2.2: {}
-
   destr@2.0.3: {}
 
   destroy@1.2.0: {}
@@ -10686,18 +10103,24 @@ snapshots:
 
   detect-libc@2.0.3: {}
 
+  devalue@5.1.1: {}
+
   didyoumean@1.2.2: {}
 
-  diff-sequences@29.6.3: {}
-
   diff@5.2.0: {}
 
+  diff@7.0.0: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
   dlv@1.1.3: {}
 
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
   dom-serializer@1.4.1:
     dependencies:
       domelementtype: 2.3.0
@@ -10736,10 +10159,6 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
-  dot-prop@7.2.0:
-    dependencies:
-      type-fest: 2.19.0
-
   dot-prop@9.0.0:
     dependencies:
       type-fest: 4.35.0
@@ -10765,7 +10184,7 @@ snapshots:
 
   ee-first@1.1.1: {}
 
-  electron-to-chromium@1.5.104: {}
+  electron-to-chromium@1.5.109: {}
 
   emoji-regex@8.0.0: {}
 
@@ -10777,21 +10196,6 @@ snapshots:
 
   encodeurl@2.0.0: {}
 
-  encoding@0.1.13:
-    dependencies:
-      iconv-lite: 0.6.3
-    optional: true
-
-  end-of-stream@1.4.4:
-    dependencies:
-      once: 1.4.0
-
-  enhanced-resolve@4.5.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      memory-fs: 0.5.0
-      tapable: 1.1.3
-
   enhanced-resolve@5.18.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -10801,16 +10205,12 @@ snapshots:
 
   entities@4.5.0: {}
 
-  env-paths@2.2.1: {}
-
-  err-code@2.0.3: {}
-
-  errno@0.1.8:
-    dependencies:
-      prr: 1.0.1
-
   error-stack-parser-es@0.1.5: {}
 
+  error-stack-parser-es@1.0.5: {}
+
+  errx@0.1.0: {}
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -10828,31 +10228,6 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  esbuild@0.17.19:
-    optionalDependencies:
-      '@esbuild/android-arm': 0.17.19
-      '@esbuild/android-arm64': 0.17.19
-      '@esbuild/android-x64': 0.17.19
-      '@esbuild/darwin-arm64': 0.17.19
-      '@esbuild/darwin-x64': 0.17.19
-      '@esbuild/freebsd-arm64': 0.17.19
-      '@esbuild/freebsd-x64': 0.17.19
-      '@esbuild/linux-arm': 0.17.19
-      '@esbuild/linux-arm64': 0.17.19
-      '@esbuild/linux-ia32': 0.17.19
-      '@esbuild/linux-loong64': 0.17.19
-      '@esbuild/linux-mips64el': 0.17.19
-      '@esbuild/linux-ppc64': 0.17.19
-      '@esbuild/linux-riscv64': 0.17.19
-      '@esbuild/linux-s390x': 0.17.19
-      '@esbuild/linux-x64': 0.17.19
-      '@esbuild/netbsd-x64': 0.17.19
-      '@esbuild/openbsd-x64': 0.17.19
-      '@esbuild/sunos-x64': 0.17.19
-      '@esbuild/win32-arm64': 0.17.19
-      '@esbuild/win32-ia32': 0.17.19
-      '@esbuild/win32-x64': 0.17.19
-
   esbuild@0.18.20:
     optionalDependencies:
       '@esbuild/android-arm': 0.18.20
@@ -10904,32 +10279,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.19.12
       '@esbuild/win32-x64': 0.19.12
 
-  esbuild@0.21.5:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.21.5
-      '@esbuild/android-arm': 0.21.5
-      '@esbuild/android-arm64': 0.21.5
-      '@esbuild/android-x64': 0.21.5
-      '@esbuild/darwin-arm64': 0.21.5
-      '@esbuild/darwin-x64': 0.21.5
-      '@esbuild/freebsd-arm64': 0.21.5
-      '@esbuild/freebsd-x64': 0.21.5
-      '@esbuild/linux-arm': 0.21.5
-      '@esbuild/linux-arm64': 0.21.5
-      '@esbuild/linux-ia32': 0.21.5
-      '@esbuild/linux-loong64': 0.21.5
-      '@esbuild/linux-mips64el': 0.21.5
-      '@esbuild/linux-ppc64': 0.21.5
-      '@esbuild/linux-riscv64': 0.21.5
-      '@esbuild/linux-s390x': 0.21.5
-      '@esbuild/linux-x64': 0.21.5
-      '@esbuild/netbsd-x64': 0.21.5
-      '@esbuild/openbsd-x64': 0.21.5
-      '@esbuild/sunos-x64': 0.21.5
-      '@esbuild/win32-arm64': 0.21.5
-      '@esbuild/win32-ia32': 0.21.5
-      '@esbuild/win32-x64': 0.21.5
-
   esbuild@0.24.2:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.24.2
@@ -10990,6 +10339,8 @@ snapshots:
 
   escape-html@1.0.3: {}
 
+  escape-string-regexp@1.0.5: {}
+
   escape-string-regexp@4.0.0: {}
 
   escape-string-regexp@5.0.0: {}
@@ -11002,18 +10353,108 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)):
+  eslint-config-flat-gitignore@2.1.0(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      '@eslint/compat': 1.2.7(eslint@9.21.0(jiti@2.4.2))
+      eslint: 9.21.0(jiti@2.4.2)
+
+  eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
 
-  eslint-plugin-prettier@5.2.3(eslint-config-prettier@10.0.1(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.4.2):
+  eslint-flat-config-utils@2.0.1:
+    dependencies:
+      pathe: 2.0.3
+
+  eslint-import-resolver-node@0.3.9:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.1
+      resolve: 1.22.10
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-merge-processors@2.0.0(eslint@9.21.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
-      prettier: 3.4.2
+
+  eslint-plugin-import-x@4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3):
+    dependencies:
+      '@types/doctrine': 0.0.9
+      '@typescript-eslint/scope-manager': 8.25.0
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      debug: 4.4.0(supports-color@9.4.0)
+      doctrine: 3.0.0
+      enhanced-resolve: 5.18.1
+      eslint: 9.21.0(jiti@2.4.2)
+      eslint-import-resolver-node: 0.3.9
+      get-tsconfig: 4.10.0
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.1
+      stable-hash: 0.0.4
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  eslint-plugin-jsdoc@50.6.3(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.49.0
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.0(supports-color@9.4.0)
+      escape-string-regexp: 4.0.0
+      eslint: 9.21.0(jiti@2.4.2)
+      espree: 10.3.0
+      esquery: 1.6.0
+      parse-imports: 2.2.1
+      semver: 7.7.1
+      spdx-expression-parse: 4.0.0
+      synckit: 0.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.2):
+    dependencies:
+      eslint: 9.21.0(jiti@2.4.2)
+      prettier: 3.5.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
-      eslint-config-prettier: 10.0.1(eslint@9.21.0(jiti@2.4.2))
+      '@types/eslint': 9.6.1
+      eslint-config-prettier: 10.0.2(eslint@9.21.0(jiti@2.4.2))
+
+  eslint-plugin-regexp@2.7.0(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
+      '@eslint-community/regexpp': 4.12.1
+      comment-parser: 1.4.1
+      eslint: 9.21.0(jiti@2.4.2)
+      jsdoc-type-pratt-parser: 4.1.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+
+  eslint-plugin-unicorn@57.0.0(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
+      ci-info: 4.1.0
+      clean-regexp: 1.0.0
+      core-js-compat: 3.40.0
+      eslint: 9.21.0(jiti@2.4.2)
+      esquery: 1.6.0
+      globals: 15.15.0
+      indent-string: 5.0.0
+      is-builtin-module: 4.0.0
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      read-package-up: 11.0.0
+      regexp-tree: 0.1.27
+      regjsparser: 0.12.0
+      semver: 7.7.1
+      strip-indent: 4.0.0
 
   eslint-plugin-vue@9.32.0(eslint@9.21.0(jiti@2.4.2)):
     dependencies:
@@ -11029,6 +10470,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      '@vue/compiler-sfc': 3.5.13
+      eslint: 9.21.0(jiti@2.4.2)
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -11135,18 +10581,6 @@ snapshots:
 
   events@3.3.0: {}
 
-  execa@5.1.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 6.0.1
-      human-signals: 2.1.0
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
-
   execa@7.2.0:
     dependencies:
       cross-spawn: 7.0.6
@@ -11171,7 +10605,24 @@ snapshots:
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
 
-  exponential-backoff@3.1.2: {}
+  execa@9.5.2:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.0
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.2.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.1
+
+  expect-type@1.1.0: {}
+
+  exsolve@0.4.4: {}
 
   externality@1.0.2:
     dependencies:
@@ -11200,16 +10651,24 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-npm-meta@0.2.2: {}
+
+  fast-npm-meta@0.3.1: {}
+
   fast-uri@3.0.6: {}
 
-  fastq@1.19.0:
+  fastq@1.19.1:
     dependencies:
-      reusify: 1.0.4
+      reusify: 1.1.0
 
   fdir@6.4.3(picomatch@4.0.2):
     optionalDependencies:
       picomatch: 4.0.2
 
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -11220,6 +10679,8 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-up-simple@1.0.0: {}
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -11232,8 +10693,6 @@ snapshots:
 
   flatted@3.3.3: {}
 
-  follow-redirects@1.15.9: {}
-
   foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -11250,8 +10709,6 @@ snapshots:
 
   fresh@0.5.2: {}
 
-  fs-constants@1.0.0: {}
-
   fs-extra@11.3.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -11262,10 +10719,6 @@ snapshots:
     dependencies:
       minipass: 3.3.6
 
-  fs-minipass@3.0.3:
-    dependencies:
-      minipass: 7.1.2
-
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -11273,17 +10726,7 @@ snapshots:
 
   function-bind@1.1.2: {}
 
-  gauge@3.0.2:
-    dependencies:
-      aproba: 2.0.0
-      color-support: 1.1.3
-      console-control-strings: 1.1.0
-      has-unicode: 2.0.1
-      object-assign: 4.1.1
-      signal-exit: 3.0.7
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wide-align: 1.1.5
+  fuse.js@7.1.0: {}
 
   generic-names@4.0.0:
     dependencies:
@@ -11319,6 +10762,15 @@ snapshots:
 
   get-stream@8.0.1: {}
 
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
+  get-tsconfig@4.10.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   giget@1.2.5:
     dependencies:
       citty: 0.1.6
@@ -11329,6 +10781,15 @@ snapshots:
       pathe: 2.0.3
       tar: 6.2.1
 
+  giget@2.0.0:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.0
+      defu: 6.1.4
+      node-fetch-native: 1.6.6
+      nypm: 0.6.0
+      pathe: 2.0.3
+
   git-config-path@2.0.0: {}
 
   git-up@8.0.1:
@@ -11376,9 +10837,9 @@ snapshots:
       minimatch: 5.1.6
       once: 1.4.0
 
-  global-dirs@3.0.1:
+  global-directory@4.0.1:
     dependencies:
-      ini: 2.0.0
+      ini: 4.1.1
 
   globals@11.12.0: {}
 
@@ -11390,15 +10851,6 @@ snapshots:
 
   globals@15.15.0: {}
 
-  globby@11.1.0:
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.3
-      ignore: 5.3.2
-      merge2: 1.4.1
-      slash: 3.0.0
-
   globby@13.2.2:
     dependencies:
       dir-glob: 3.0.1
@@ -11446,14 +10898,14 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
-  has-unicode@2.0.1: {}
-
   hash-sum@2.0.0: {}
 
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
+  he@1.2.0: {}
+
   hookable@5.5.3: {}
 
   hosted-git-info@7.0.2:
@@ -11466,8 +10918,6 @@ snapshots:
 
   html-tags@3.3.1: {}
 
-  http-cache-semantics@4.1.1: {}
-
   http-errors@2.0.0:
     dependencies:
       depd: 2.0.0
@@ -11484,21 +10934,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  http-proxy-agent@7.0.2:
-    dependencies:
-      agent-base: 7.1.3
-      debug: 4.4.0(supports-color@9.4.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  http-proxy@1.18.1:
-    dependencies:
-      eventemitter3: 4.0.7
-      follow-redirects: 1.15.9
-      requires-port: 1.0.0
-    transitivePeerDependencies:
-      - debug
-
   http-shutdown@1.2.2: {}
 
   https-proxy-agent@5.0.1:
@@ -11517,12 +10952,12 @@ snapshots:
 
   httpxy@0.1.7: {}
 
-  human-signals@2.1.0: {}
-
   human-signals@4.3.1: {}
 
   human-signals@5.0.0: {}
 
+  human-signals@8.0.0: {}
+
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -11535,15 +10970,11 @@ snapshots:
 
   ieee754@1.2.1: {}
 
-  ignore-walk@6.0.5:
-    dependencies:
-      minimatch: 9.0.5
-
   ignore@5.3.2: {}
 
   ignore@7.0.3: {}
 
-  image-meta@0.1.1: {}
+  image-meta@0.2.1: {}
 
   immutable@4.3.7: {}
 
@@ -11560,9 +10991,29 @@ snapshots:
     dependencies:
       resolve-from: 5.0.0
 
+  impound@0.2.0(rollup@3.29.5):
+    dependencies:
+      '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
+      mlly: 1.7.4
+      pathe: 1.1.2
+      unenv: 1.10.0
+      unplugin: 1.16.1
+    transitivePeerDependencies:
+      - rollup
+
+  impound@0.2.0(rollup@4.34.8):
+    dependencies:
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      mlly: 1.7.4
+      pathe: 1.1.2
+      unenv: 1.10.0
+      unplugin: 1.16.1
+    transitivePeerDependencies:
+      - rollup
+
   imurmurhash@0.1.4: {}
 
-  indent-string@4.0.0: {}
+  indent-string@5.0.0: {}
 
   index-to-position@0.1.2: {}
 
@@ -11575,9 +11026,7 @@ snapshots:
 
   ini@1.3.8: {}
 
-  ini@2.0.0: {}
-
-  ini@4.1.3: {}
+  ini@4.1.1: {}
 
   ioredis@5.5.0:
     dependencies:
@@ -11593,17 +11042,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ip-address@9.0.5:
-    dependencies:
-      jsbn: 1.1.0
-      sprintf-js: 1.1.3
-
   iron-webcrypto@1.2.1: {}
 
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
 
+  is-builtin-module@4.0.0:
+    dependencies:
+      builtin-modules: 4.0.0
+
   is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
@@ -11626,18 +11074,18 @@ snapshots:
     dependencies:
       is-docker: 3.0.0
 
-  is-installed-globally@0.4.0:
+  is-installed-globally@1.0.0:
     dependencies:
-      global-dirs: 3.0.1
-      is-path-inside: 3.0.3
-
-  is-lambda@1.0.1: {}
+      global-directory: 4.0.1
+      is-path-inside: 4.0.0
 
   is-module@1.0.0: {}
 
   is-number@7.0.0: {}
 
-  is-path-inside@3.0.3: {}
+  is-path-inside@4.0.0: {}
+
+  is-plain-obj@4.1.0: {}
 
   is-plain-object@2.0.4:
     dependencies:
@@ -11645,10 +11093,6 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
-  is-primitive@3.0.1: {}
-
-  is-promise@4.0.0: {}
-
   is-reference@1.2.1:
     dependencies:
       '@types/estree': 1.0.6
@@ -11661,6 +11105,12 @@ snapshots:
 
   is-stream@3.0.0: {}
 
+  is-stream@4.0.1: {}
+
+  is-unicode-supported@2.1.0: {}
+
+  is-what@4.1.16: {}
+
   is-wsl@2.2.0:
     dependencies:
       is-docker: 2.2.1
@@ -11689,7 +11139,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 18.19.76
+      '@types/node': 22.13.5
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -11697,23 +11147,15 @@ snapshots:
 
   jiti@2.4.2: {}
 
-  joi@17.13.3:
-    dependencies:
-      '@hapi/hoek': 9.3.0
-      '@hapi/topo': 5.1.0
-      '@sideway/address': 4.1.5
-      '@sideway/formula': 3.0.1
-      '@sideway/pinpoint': 2.0.0
-
   joycon@3.1.1: {}
 
-  js-beautify@1.15.3:
+  js-beautify@1.15.4:
     dependencies:
       config-chain: 1.1.13
       editorconfig: 1.0.4
       glob: 10.4.5
       js-cookie: 3.0.5
-      nopt: 8.1.0
+      nopt: 7.2.1
 
   js-cookie@3.0.5: {}
 
@@ -11727,7 +11169,7 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsbn@1.1.0: {}
+  jsdoc-type-pratt-parser@4.1.0: {}
 
   jsdom@19.0.0:
     dependencies:
@@ -11771,8 +11213,6 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
-  json-parse-even-better-errors@3.0.2: {}
-
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
@@ -11785,16 +11225,12 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsonc-parser@3.3.1: {}
-
   jsonfile@6.1.0:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonparse@1.3.1: {}
-
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -11829,6 +11265,10 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   listhen@1.9.0:
     dependencies:
       '@parcel/watcher': 2.5.1
@@ -11869,10 +11309,11 @@ snapshots:
       mlly: 1.7.4
       pkg-types: 1.3.1
 
-  local-pkg@1.0.0:
+  local-pkg@1.1.0:
     dependencies:
       mlly: 1.7.4
       pkg-types: 1.3.1
+      quansync: 0.2.6
 
   locate-path@6.0.0:
     dependencies:
@@ -11880,8 +11321,6 @@ snapshots:
 
   lodash-es@4.17.21: {}
 
-  lodash._reinterpolate@3.0.0: {}
-
   lodash.camelcase@4.3.0: {}
 
   lodash.clonedeep@4.5.0: {}
@@ -11890,35 +11329,16 @@ snapshots:
 
   lodash.defaults@4.2.0: {}
 
-  lodash.difference@4.5.0: {}
-
-  lodash.flatten@4.4.0: {}
-
   lodash.isarguments@3.1.0: {}
 
   lodash.isequal@4.5.0: {}
 
-  lodash.isplainobject@4.0.6: {}
-
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
 
-  lodash.pick@4.4.0: {}
-
   lodash.sortby@4.7.0: {}
 
-  lodash.template@4.5.0:
-    dependencies:
-      lodash._reinterpolate: 3.0.0
-      lodash.templatesettings: 4.2.0
-
-  lodash.templatesettings@4.2.0:
-    dependencies:
-      lodash._reinterpolate: 3.0.0
-
-  lodash.union@4.6.0: {}
-
   lodash.uniq@4.5.0: {}
 
   lodash@4.17.21: {}
@@ -11927,6 +11347,8 @@ snapshots:
     dependencies:
       get-func-name: 2.0.2
 
+  loupe@3.1.3: {}
+
   lru-cache@10.4.3: {}
 
   lru-cache@5.1.1:
@@ -11945,9 +11367,9 @@ snapshots:
       ufo: 1.5.4
       unplugin: 1.16.1
 
-  magic-string@0.27.0:
+  magic-string-ast@0.7.0:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
+      magic-string: 0.30.17
 
   magic-string@0.30.17:
     dependencies:
@@ -11959,28 +11381,14 @@ snapshots:
       '@babel/types': 7.26.9
       source-map-js: 1.2.1
 
-  make-dir@3.1.0:
+  markdown-it@14.1.0:
     dependencies:
-      semver: 6.3.1
-
-  make-fetch-happen@13.0.1:
-    dependencies:
-      '@npmcli/agent': 2.2.2
-      cacache: 18.0.4
-      http-cache-semantics: 4.1.1
-      is-lambda: 1.0.1
-      minipass: 7.1.2
-      minipass-fetch: 3.0.5
-      minipass-flush: 1.0.5
-      minipass-pipeline: 1.2.4
-      negotiator: 0.6.4
-      proc-log: 4.2.0
-      promise-retry: 2.0.1
-      ssri: 10.0.6
-    transitivePeerDependencies:
-      - supports-color
-
-  marked@4.3.0: {}
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
 
   math-intrinsics@1.1.0: {}
 
@@ -11990,10 +11398,7 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
-  memory-fs@0.5.0:
-    dependencies:
-      errno: 0.1.8
-      readable-stream: 2.3.8
+  mdurl@2.0.0: {}
 
   merge-stream@2.0.0: {}
 
@@ -12012,19 +11417,13 @@ snapshots:
 
   mime@1.6.0: {}
 
-  mime@2.5.2: {}
-
   mime@3.0.0: {}
 
   mime@4.0.6: {}
 
-  mimic-fn@2.1.0: {}
-
   mimic-fn@4.0.0: {}
 
-  minimatch@3.0.8:
-    dependencies:
-      brace-expansion: 1.1.11
+  min-indent@1.0.1: {}
 
   minimatch@3.1.2:
     dependencies:
@@ -12038,45 +11437,12 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
-  minimatch@9.0.3:
-    dependencies:
-      brace-expansion: 2.0.1
-
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
 
   minimist@1.2.8: {}
 
-  minipass-collect@2.0.1:
-    dependencies:
-      minipass: 7.1.2
-
-  minipass-fetch@3.0.5:
-    dependencies:
-      minipass: 7.1.2
-      minipass-sized: 1.0.3
-      minizlib: 2.1.2
-    optionalDependencies:
-      encoding: 0.1.13
-
-  minipass-flush@1.0.5:
-    dependencies:
-      minipass: 3.3.6
-
-  minipass-json-stream@1.0.2:
-    dependencies:
-      jsonparse: 1.3.1
-      minipass: 3.3.6
-
-  minipass-pipeline@1.2.4:
-    dependencies:
-      minipass: 3.3.6
-
-  minipass-sized@1.0.3:
-    dependencies:
-      minipass: 3.3.6
-
   minipass@3.3.6:
     dependencies:
       yallist: 4.0.0
@@ -12095,11 +11461,13 @@ snapshots:
       minipass: 7.1.2
       rimraf: 5.0.10
 
+  mitt@3.0.1: {}
+
   mkdirp@1.0.4: {}
 
   mkdirp@3.0.1: {}
 
-  mkdist@1.6.0(typescript@5.7.3):
+  mkdist@1.6.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3)):
     dependencies:
       autoprefixer: 10.4.20(postcss@8.5.3)
       citty: 0.1.6
@@ -12116,6 +11484,7 @@ snapshots:
       tinyglobby: 0.2.12
     optionalDependencies:
       typescript: 5.7.3
+      vue-tsc: 2.1.10(typescript@5.7.3)
 
   mlly@1.7.4:
     dependencies:
@@ -12132,6 +11501,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  muggle-string@0.4.1: {}
+
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -12140,13 +11511,15 @@ snapshots:
 
   nanoid@3.3.8: {}
 
-  natural-compare@1.4.0: {}
+  nanoid@5.1.2: {}
 
-  negotiator@0.6.4: {}
+  nanotar@0.2.0: {}
+
+  natural-compare@1.4.0: {}
 
   neo-async@2.6.2: {}
 
-  nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.3):
+  nitropack@2.10.4(typescript@5.7.3):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
       '@netlify/functions': 2.8.2
@@ -12159,7 +11532,7 @@ snapshots:
       '@rollup/plugin-terser': 0.4.4(rollup@4.34.8)
       '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
       '@types/http-proxy': 1.17.16
-      '@vercel/nft': 0.27.10(encoding@0.1.13)(rollup@4.34.8)
+      '@vercel/nft': 0.27.10(rollup@4.34.8)
       archiver: 7.0.1
       c12: 2.0.1(magicast@0.3.5)
       chokidar: 3.6.0
@@ -12244,128 +11617,22 @@ snapshots:
       - typescript
       - uploadthing
 
-  nitropack@2.3.3(db0@0.2.4)(encoding@0.1.13)(ioredis@5.5.0)(magicast@0.3.5):
-    dependencies:
-      '@cloudflare/kv-asset-handler': 0.3.4
-      '@netlify/functions': 1.6.0
-      '@rollup/plugin-alias': 5.1.1(rollup@3.29.5)
-      '@rollup/plugin-commonjs': 24.1.0(rollup@3.29.5)
-      '@rollup/plugin-inject': 5.0.5(rollup@3.29.5)
-      '@rollup/plugin-json': 6.1.0(rollup@3.29.5)
-      '@rollup/plugin-node-resolve': 15.3.1(rollup@3.29.5)
-      '@rollup/plugin-replace': 5.0.7(rollup@3.29.5)
-      '@rollup/plugin-terser': 0.4.4(rollup@3.29.5)
-      '@rollup/plugin-wasm': 6.2.2(rollup@3.29.5)
-      '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
-      '@vercel/nft': 0.22.6(encoding@0.1.13)
-      archiver: 5.3.2
-      c12: 1.11.2(magicast@0.3.5)
-      chalk: 5.4.1
-      chokidar: 3.6.0
-      consola: 3.4.0
-      cookie-es: 0.5.0
-      defu: 6.1.4
-      destr: 1.2.2
-      dot-prop: 7.2.0
-      esbuild: 0.17.19
-      escape-string-regexp: 5.0.0
-      etag: 1.8.1
-      fs-extra: 11.3.0
-      globby: 13.2.2
-      gzip-size: 7.0.0
-      h3: 1.15.1
-      hookable: 5.5.3
-      http-proxy: 1.18.1
-      is-primitive: 3.0.1
-      jiti: 1.21.7
-      klona: 2.0.6
-      knitwork: 1.2.0
-      listhen: 1.9.0
-      mime: 3.0.0
-      mlly: 1.7.4
-      mri: 1.2.0
-      node-fetch-native: 1.6.6
-      ofetch: 1.4.1
-      ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 0.1.3
-      pkg-types: 1.3.1
-      pretty-bytes: 6.1.1
-      radix3: 1.1.2
-      rollup: 3.29.5
-      rollup-plugin-visualizer: 5.14.0(rollup@3.29.5)
-      scule: 1.3.0
-      semver: 7.7.1
-      serve-placeholder: 2.0.2
-      serve-static: 1.16.2
-      source-map-support: 0.5.21
-      std-env: 3.8.0
-      ufo: 1.5.4
-      unenv: 1.10.0
-      unimport: 3.14.6(rollup@3.29.5)
-      unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/kv'
-      - aws4fetch
-      - db0
-      - debug
-      - encoding
-      - idb-keyval
-      - ioredis
-      - magicast
-      - rolldown
-      - supports-color
-      - uploadthing
-
   node-addon-api@7.1.1: {}
 
   node-fetch-native@1.6.6: {}
 
-  node-fetch@2.7.0(encoding@0.1.13):
+  node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
-    optionalDependencies:
-      encoding: 0.1.13
 
   node-forge@1.3.1: {}
 
   node-gyp-build@4.8.4: {}
 
-  node-gyp@10.3.1:
-    dependencies:
-      env-paths: 2.2.1
-      exponential-backoff: 3.1.2
-      glob: 10.4.5
-      graceful-fs: 4.2.11
-      make-fetch-happen: 13.0.1
-      nopt: 7.2.1
-      proc-log: 4.2.0
-      semver: 7.7.1
-      tar: 6.2.1
-      which: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   node-mock-http@1.0.0: {}
 
   node-releases@2.0.19: {}
 
-  nopt@5.0.0:
-    dependencies:
-      abbrev: 1.1.1
-
   nopt@7.2.1:
     dependencies:
       abbrev: 2.0.0
@@ -12386,47 +11653,6 @@ snapshots:
 
   normalize-url@6.1.0: {}
 
-  npm-bundled@3.0.1:
-    dependencies:
-      npm-normalize-package-bin: 3.0.1
-
-  npm-install-checks@6.3.0:
-    dependencies:
-      semver: 7.7.1
-
-  npm-normalize-package-bin@3.0.1: {}
-
-  npm-package-arg@11.0.3:
-    dependencies:
-      hosted-git-info: 7.0.2
-      proc-log: 4.2.0
-      semver: 7.7.1
-      validate-npm-package-name: 5.0.1
-
-  npm-packlist@8.0.2:
-    dependencies:
-      ignore-walk: 6.0.5
-
-  npm-pick-manifest@9.1.0:
-    dependencies:
-      npm-install-checks: 6.3.0
-      npm-normalize-package-bin: 3.0.1
-      npm-package-arg: 11.0.3
-      semver: 7.7.1
-
-  npm-registry-fetch@16.2.1:
-    dependencies:
-      '@npmcli/redact': 1.1.0
-      make-fetch-happen: 13.0.1
-      minipass: 7.1.2
-      minipass-fetch: 3.0.5
-      minipass-json-stream: 1.0.2
-      minizlib: 2.1.2
-      npm-package-arg: 11.0.3
-      proc-log: 4.2.0
-    transitivePeerDependencies:
-      - supports-color
-
   npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
@@ -12435,152 +11661,86 @@ snapshots:
     dependencies:
       path-key: 4.0.0
 
-  npmlog@5.0.1:
+  npm-run-path@6.0.0:
     dependencies:
-      are-we-there-yet: 2.0.0
-      console-control-strings: 1.1.0
-      gauge: 3.0.2
-      set-blocking: 2.0.0
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
 
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
 
-  nuxi@3.3.2:
-    optionalDependencies:
-      fsevents: 2.3.3
+  nuxi@3.22.2: {}
 
-  nuxt@3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(sass@1.45.0)(terser@5.39.0)(typescript@4.9.5):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
     dependencies:
+      '@nuxt/cli': 3.22.2(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/kit': 3.3.2(magicast@0.3.5)(rollup@3.29.5)
-      '@nuxt/schema': 3.3.2(magicast@0.3.5)(rollup@3.29.5)
+      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/ui-templates': 1.3.4
-      '@nuxt/vite-builder': 3.3.2(@types/node@18.19.76)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(sass@1.45.0)(terser@5.39.0)(typescript@4.9.5)(vue@3.5.13(typescript@4.9.5))
-      '@unhead/ssr': 1.11.19
-      '@unhead/vue': 1.11.19(vue@3.5.13(typescript@4.9.5))
-      '@vue/reactivity': 3.5.13
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@unhead/dom': 1.11.20
+      '@unhead/shared': 1.11.20
+      '@unhead/ssr': 1.11.20
+      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.7.3))
       '@vue/shared': 3.5.13
-      chokidar: 3.6.0
-      cookie-es: 0.5.0
+      acorn: 8.14.0
+      c12: 2.0.4(magicast@0.3.5)
+      chokidar: 4.0.3
+      compatx: 0.1.8
+      consola: 3.4.0
+      cookie-es: 1.2.2
       defu: 6.1.4
-      destr: 1.2.2
+      destr: 2.0.3
+      devalue: 5.1.1
+      errx: 0.1.0
+      esbuild: 0.24.2
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
-      fs-extra: 11.3.0
-      globby: 13.2.2
+      globby: 14.1.0
       h3: 1.15.1
-      hash-sum: 2.0.0
       hookable: 5.5.3
-      jiti: 1.21.7
+      ignore: 7.0.3
+      impound: 0.2.0(rollup@3.29.5)
+      jiti: 2.4.2
+      klona: 2.0.6
       knitwork: 1.2.0
       magic-string: 0.30.17
       mlly: 1.7.4
-      nitropack: 2.3.3(db0@0.2.4)(encoding@0.1.13)(ioredis@5.5.0)(magicast@0.3.5)
-      nuxi: 3.3.2
+      nanotar: 0.2.0
+      nitropack: 2.10.4(typescript@5.7.3)
+      nypm: 0.5.4
       ofetch: 1.4.1
       ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 0.1.3
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 1.3.1
+      radix3: 1.1.2
       scule: 1.3.0
-      strip-literal: 1.3.0
+      semver: 7.7.1
+      std-env: 3.8.0
+      strip-literal: 3.0.0
+      tinyglobby: 0.2.10
       ufo: 1.5.4
+      ultrahtml: 1.5.3
+      uncrypto: 0.1.3
       unctx: 2.4.1
       unenv: 1.10.0
-      unimport: 3.14.6(rollup@3.29.5)
-      unplugin: 1.16.1
-      untyped: 1.5.2
-      vue: 3.5.13(typescript@4.9.5)
-      vue-bundle-renderer: 1.0.3
-      vue-devtools-stub: 0.1.0
-      vue-router: 4.5.0(vue@3.5.13(typescript@4.9.5))
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@types/node'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/kv'
-      - aws4fetch
-      - db0
-      - debug
-      - encoding
-      - eslint
-      - idb-keyval
-      - ioredis
-      - less
-      - lightningcss
-      - magicast
-      - meow
-      - optionator
-      - rolldown
-      - rollup
-      - sass
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-      - uploadthing
-      - vls
-      - vti
-      - vue-tsc
-
-  nuxt@3.3.2(@types/node@18.19.76)(db0@0.2.4)(encoding@0.1.13)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3):
-    dependencies:
-      '@nuxt/devalue': 2.0.2
-      '@nuxt/kit': 3.3.2(magicast@0.3.5)(rollup@4.34.8)
-      '@nuxt/schema': 3.3.2(magicast@0.3.5)(rollup@4.34.8)
-      '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/ui-templates': 1.3.4
-      '@nuxt/vite-builder': 3.3.2(@types/node@18.19.76)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(terser@5.39.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
-      '@unhead/ssr': 1.11.19
-      '@unhead/vue': 1.11.19(vue@3.5.13(typescript@5.7.3))
-      '@vue/reactivity': 3.5.13
-      '@vue/shared': 3.5.13
-      chokidar: 3.6.0
-      cookie-es: 0.5.0
-      defu: 6.1.4
-      destr: 1.2.2
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      fs-extra: 11.3.0
-      globby: 13.2.2
-      h3: 1.15.1
-      hash-sum: 2.0.0
-      hookable: 5.5.3
-      jiti: 1.21.7
-      knitwork: 1.2.0
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      nitropack: 2.3.3(db0@0.2.4)(encoding@0.1.13)(ioredis@5.5.0)(magicast@0.3.5)
-      nuxi: 3.3.2
-      ofetch: 1.4.1
-      ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 0.1.3
-      scule: 1.3.0
-      strip-literal: 1.3.0
-      ufo: 1.5.4
-      unctx: 2.4.1
-      unenv: 1.10.0
-      unimport: 3.14.6(rollup@4.34.8)
-      unplugin: 1.16.1
+      unhead: 1.11.20
+      unimport: 4.1.2
+      unplugin: 2.2.0
+      unplugin-vue-router: 0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
       untyped: 1.5.2
       vue: 3.5.13(typescript@5.7.3)
-      vue-bundle-renderer: 1.0.3
+      vue-bundle-renderer: 2.1.1
       vue-devtools-stub: 0.1.0
       vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+      '@types/node': 22.13.5
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -12588,17 +11748,21 @@ snapshots:
       - '@azure/identity'
       - '@azure/keyvault-secrets'
       - '@azure/storage-blob'
+      - '@biomejs/biome'
       - '@capacitor/preferences'
       - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
       - '@netlify/blobs'
       - '@planetscale/database'
-      - '@types/node'
       - '@upstash/redis'
       - '@vercel/blob'
       - '@vercel/kv'
       - aws4fetch
+      - better-sqlite3
+      - bufferutil
       - db0
-      - debug
+      - drizzle-orm
       - encoding
       - eslint
       - idb-keyval
@@ -12607,30 +11771,160 @@ snapshots:
       - lightningcss
       - magicast
       - meow
+      - mysql2
       - optionator
       - rolldown
       - rollup
       - sass
+      - sass-embedded
+      - sqlite3
       - stylelint
       - stylus
       - sugarss
       - supports-color
       - terser
+      - tsx
       - typescript
       - uploadthing
+      - utf-8-validate
+      - vite
       - vls
       - vti
       - vue-tsc
+      - xml2js
+      - yaml
+
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
+    dependencies:
+      '@nuxt/cli': 3.22.2(magicast@0.3.5)
+      '@nuxt/devalue': 2.0.2
+      '@nuxt/devtools': 1.7.0(rollup@4.34.8)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      '@nuxt/schema': 3.15.4
+      '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@unhead/dom': 1.11.20
+      '@unhead/shared': 1.11.20
+      '@unhead/ssr': 1.11.20
+      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.7.3))
+      '@vue/shared': 3.5.13
+      acorn: 8.14.0
+      c12: 2.0.4(magicast@0.3.5)
+      chokidar: 4.0.3
+      compatx: 0.1.8
+      consola: 3.4.0
+      cookie-es: 1.2.2
+      defu: 6.1.4
+      destr: 2.0.3
+      devalue: 5.1.1
+      errx: 0.1.0
+      esbuild: 0.24.2
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      globby: 14.1.0
+      h3: 1.15.1
+      hookable: 5.5.3
+      ignore: 7.0.3
+      impound: 0.2.0(rollup@4.34.8)
+      jiti: 2.4.2
+      klona: 2.0.6
+      knitwork: 1.2.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      nanotar: 0.2.0
+      nitropack: 2.10.4(typescript@5.7.3)
+      nypm: 0.5.4
+      ofetch: 1.4.1
+      ohash: 1.1.4
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 1.3.1
+      radix3: 1.1.2
+      scule: 1.3.0
+      semver: 7.7.1
+      std-env: 3.8.0
+      strip-literal: 3.0.0
+      tinyglobby: 0.2.10
+      ufo: 1.5.4
+      ultrahtml: 1.5.3
+      uncrypto: 0.1.3
+      unctx: 2.4.1
+      unenv: 1.10.0
+      unhead: 1.11.20
+      unimport: 4.1.2
+      unplugin: 2.2.0
+      unplugin-vue-router: 0.11.2(rollup@4.34.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
+      untyped: 1.5.2
+      vue: 3.5.13(typescript@5.7.3)
+      vue-bundle-renderer: 2.1.1
+      vue-devtools-stub: 0.1.0
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+      '@types/node': 22.13.5
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@biomejs/biome'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/kv'
+      - aws4fetch
+      - better-sqlite3
+      - bufferutil
+      - db0
+      - drizzle-orm
+      - encoding
+      - eslint
+      - idb-keyval
+      - ioredis
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - mysql2
+      - optionator
+      - rolldown
+      - rollup
+      - sass
+      - sass-embedded
+      - sqlite3
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - vite
+      - vls
+      - vti
+      - vue-tsc
+      - xml2js
+      - yaml
 
   nwsapi@2.2.16: {}
 
-  nypm@0.3.12:
+  nypm@0.4.1:
     dependencies:
       citty: 0.1.6
       consola: 3.4.0
-      execa: 8.0.1
       pathe: 1.1.2
       pkg-types: 1.3.1
+      tinyexec: 0.3.2
       ufo: 1.5.4
 
   nypm@0.5.4:
@@ -12642,6 +11936,14 @@ snapshots:
       tinyexec: 0.3.2
       ufo: 1.5.4
 
+  nypm@0.6.0:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.0
+      pathe: 2.0.3
+      pkg-types: 2.0.0
+      tinyexec: 0.3.2
+
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
@@ -12654,7 +11956,7 @@ snapshots:
 
   ohash@1.1.4: {}
 
-  ohash@2.0.4: {}
+  ohash@2.0.6: {}
 
   on-finished@2.4.1:
     dependencies:
@@ -12664,10 +11966,6 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
-  onetime@5.1.2:
-    dependencies:
-      mimic-fn: 2.1.0
-
   onetime@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
@@ -12685,16 +11983,9 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  open@9.1.0:
-    dependencies:
-      default-browser: 4.0.0
-      define-lazy-prop: 3.0.0
-      is-inside-container: 1.0.0
-      is-wsl: 2.2.0
-
   openapi-typescript@7.6.1(typescript@5.7.3):
     dependencies:
-      '@redocly/openapi-core': 1.30.0(supports-color@9.4.0)
+      '@redocly/openapi-core': 1.31.3(supports-color@9.4.0)
       ansi-colors: 4.1.3
       change-case: 5.4.4
       parse-json: 8.1.0
@@ -12721,18 +12012,10 @@ snapshots:
     dependencies:
       yocto-queue: 1.1.1
 
-  p-limit@5.0.0:
-    dependencies:
-      yocto-queue: 1.1.1
-
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
-  p-map@4.0.0:
-    dependencies:
-      aggregate-error: 3.1.0
-
   p-queue@6.6.2:
     dependencies:
       eventemitter3: 4.0.7
@@ -12744,34 +12027,12 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
-  package-manager-detector@0.2.9: {}
+  package-manager-detector@0.2.10:
+    dependencies:
+      quansync: 0.2.6
 
   packrup@0.1.2: {}
 
-  pacote@17.0.7:
-    dependencies:
-      '@npmcli/git': 5.0.8
-      '@npmcli/installed-package-contents': 2.1.0
-      '@npmcli/promise-spawn': 7.0.2
-      '@npmcli/run-script': 7.0.4
-      cacache: 18.0.4
-      fs-minipass: 3.0.3
-      minipass: 7.1.2
-      npm-package-arg: 11.0.3
-      npm-packlist: 8.0.2
-      npm-pick-manifest: 9.1.0
-      npm-registry-fetch: 16.2.1
-      proc-log: 4.2.0
-      promise-retry: 2.0.1
-      read-package-json: 7.0.1
-      read-package-json-fast: 3.0.2
-      sigstore: 2.3.1
-      ssri: 10.0.6
-      tar: 6.2.1
-    transitivePeerDependencies:
-      - bluebird
-      - supports-color
-
   parchment@3.0.0: {}
 
   parent-module@1.0.1:
@@ -12783,12 +12044,19 @@ snapshots:
       git-config-path: 2.0.0
       ini: 1.3.8
 
+  parse-imports@2.2.1:
+    dependencies:
+      es-module-lexer: 1.6.0
+      slashes: 3.0.12
+
   parse-json@8.1.0:
     dependencies:
       '@babel/code-frame': 7.26.2
       index-to-position: 0.1.2
       type-fest: 4.35.0
 
+  parse-ms@4.0.0: {}
+
   parse-path@7.0.1:
     dependencies:
       protocols: 2.0.2
@@ -12802,6 +12070,8 @@ snapshots:
 
   parseurl@1.3.3: {}
 
+  path-browserify@1.0.1: {}
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -12827,7 +12097,7 @@ snapshots:
 
   pathval@1.1.1: {}
 
-  perfect-debounce@0.1.3: {}
+  pathval@2.0.0: {}
 
   perfect-debounce@1.0.0: {}
 
@@ -12849,6 +12119,11 @@ snapshots:
       mlly: 1.7.4
       pathe: 2.0.3
 
+  pkg-types@2.0.0:
+    dependencies:
+      confbox: 0.1.8
+      pathe: 2.0.3
+
   pluralize@8.0.0: {}
 
   pnpm@9.15.6: {}
@@ -12926,10 +12201,6 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
-  postcss-import-resolver@2.0.0:
-    dependencies:
-      enhanced-resolve: 4.5.0
-
   postcss-import@15.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
@@ -13236,14 +12507,6 @@ snapshots:
       postcss: 8.5.3
       postcss-selector-parser: 6.1.2
 
-  postcss-url@10.1.3(postcss@8.5.3):
-    dependencies:
-      make-dir: 3.1.0
-      mime: 2.5.2
-      minimatch: 3.0.8
-      postcss: 8.5.3
-      xxhashjs: 0.2.2
-
   postcss-value-parser@4.2.0: {}
 
   postcss@8.5.3:
@@ -13252,7 +12515,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preact@10.26.2: {}
+  preact@10.26.3: {}
 
   prelude-ls@1.2.1: {}
 
@@ -13260,9 +12523,7 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier@2.7.1: {}
-
-  prettier@3.4.2: {}
+  prettier@3.5.2: {}
 
   pretty-bytes@6.1.1: {}
 
@@ -13272,27 +12533,16 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  pretty-format@29.7.0:
+  pretty-ms@9.2.0:
     dependencies:
-      '@jest/schemas': 29.6.3
-      ansi-styles: 5.2.0
-      react-is: 18.3.1
+      parse-ms: 4.0.0
 
   primeicons@7.0.0: {}
 
-  proc-log@4.2.0: {}
-
   process-nextick-args@2.0.1: {}
 
   process@0.11.10: {}
 
-  promise-inflight@1.0.1: {}
-
-  promise-retry@2.0.1:
-    dependencies:
-      err-code: 2.0.3
-      retry: 0.12.0
-
   promise.series@0.2.0: {}
 
   prompts@2.4.2:
@@ -13306,16 +12556,16 @@ snapshots:
 
   protocols@2.0.2: {}
 
-  proxy-from-env@1.1.0: {}
-
-  prr@1.0.1: {}
-
   psl@1.15.0:
     dependencies:
       punycode: 2.3.1
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
+  quansync@0.2.6: {}
+
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
@@ -13348,23 +12598,23 @@ snapshots:
 
   react-is@17.0.2: {}
 
-  react-is@18.3.1: {}
-
   read-cache@1.0.0:
     dependencies:
       pify: 2.3.0
 
-  read-package-json-fast@3.0.2:
+  read-package-up@11.0.0:
     dependencies:
-      json-parse-even-better-errors: 3.0.2
-      npm-normalize-package-bin: 3.0.1
+      find-up-simple: 1.0.0
+      read-pkg: 9.0.1
+      type-fest: 4.35.0
 
-  read-package-json@7.0.1:
+  read-pkg@9.0.1:
     dependencies:
-      glob: 10.4.5
-      json-parse-even-better-errors: 3.0.2
+      '@types/normalize-package-data': 2.4.4
       normalize-package-data: 6.0.2
-      npm-normalize-package-bin: 3.0.1
+      parse-json: 8.1.0
+      type-fest: 4.35.0
+      unicorn-magic: 0.1.0
 
   readable-stream@2.3.8:
     dependencies:
@@ -13376,12 +12626,6 @@ snapshots:
       string_decoder: 1.1.1
       util-deprecate: 1.0.2
 
-  readable-stream@3.6.2:
-    dependencies:
-      inherits: 2.0.4
-      string_decoder: 1.3.0
-      util-deprecate: 1.0.2
-
   readable-stream@4.7.0:
     dependencies:
       abort-controller: 3.0.0
@@ -13406,6 +12650,10 @@ snapshots:
     dependencies:
       redis-errors: 1.2.0
 
+  refa@0.12.1:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+
   regenerate-unicode-properties@10.2.0:
     dependencies:
       regenerate: 1.4.2
@@ -13418,6 +12666,11 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.26.9
 
+  regexp-ast-analysis@0.7.1:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      refa: 0.12.1
+
   regexp-tree@0.1.27: {}
 
   regexpu-core@6.2.0:
@@ -13445,19 +12698,17 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
+  resolve-pkg-maps@1.0.0: {}
+
   resolve@1.22.10:
     dependencies:
       is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  retry@0.12.0: {}
+  reusify@1.1.0: {}
 
-  reusify@1.0.4: {}
-
-  rimraf@3.0.2:
-    dependencies:
-      glob: 7.2.3
+  rfdc@1.4.1: {}
 
   rimraf@5.0.10:
     dependencies:
@@ -13550,20 +12801,12 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.34.8
       fsevents: 2.3.3
 
-  run-applescript@5.0.0:
-    dependencies:
-      execa: 5.1.1
-
   run-applescript@7.0.0: {}
 
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
-  rxjs@7.8.2:
-    dependencies:
-      tslib: 2.8.1
-
   safe-buffer@5.1.2: {}
 
   safe-buffer@5.2.1: {}
@@ -13606,6 +12849,12 @@ snapshots:
       ajv-formats: 2.1.1(ajv@8.17.1)
       ajv-keywords: 5.1.0(ajv@8.17.1)
 
+  scslre@0.3.0:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+
   scule@1.3.0: {}
 
   search-insights@2.17.3: {}
@@ -13649,8 +12898,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  set-blocking@2.0.0: {}
-
   setprototypeof@1.2.0: {}
 
   shallow-clone@3.0.1:
@@ -13665,29 +12912,12 @@ snapshots:
 
   shell-quote@1.8.2: {}
 
-  shiki@0.11.1:
-    dependencies:
-      jsonc-parser: 3.3.1
-      vscode-oniguruma: 1.7.0
-      vscode-textmate: 6.0.0
-
   siginfo@2.0.0: {}
 
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
 
-  sigstore@2.3.1:
-    dependencies:
-      '@sigstore/bundle': 2.3.2
-      '@sigstore/core': 1.1.0
-      '@sigstore/protobuf-specs': 0.3.3
-      '@sigstore/sign': 2.3.2
-      '@sigstore/tuf': 2.3.4
-      '@sigstore/verify': 1.2.1
-    transitivePeerDependencies:
-      - supports-color
-
   simple-git@3.27.0:
     dependencies:
       '@kwsites/file-exists': 1.1.1
@@ -13696,7 +12926,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  sirv@2.0.4:
+  sirv@3.0.1:
     dependencies:
       '@polka/url': 1.0.0-next.28
       mrmime: 2.0.1
@@ -13704,34 +12934,19 @@ snapshots:
 
   sisteransi@1.0.5: {}
 
-  slash@3.0.0: {}
-
   slash@4.0.0: {}
 
   slash@5.1.0: {}
 
+  slashes@3.0.12: {}
+
   slice-ansi@5.0.0:
     dependencies:
       ansi-styles: 6.2.1
       is-fullwidth-code-point: 4.0.0
 
-  smart-buffer@4.2.0: {}
-
   smob@1.5.0: {}
 
-  socks-proxy-agent@8.0.5:
-    dependencies:
-      agent-base: 7.1.3
-      debug: 4.4.0(supports-color@9.4.0)
-      socks: 2.8.4
-    transitivePeerDependencies:
-      - supports-color
-
-  socks@2.8.4:
-    dependencies:
-      ip-address: 9.0.5
-      smart-buffer: 4.2.0
-
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -13759,13 +12974,16 @@ snapshots:
       spdx-exceptions: 2.5.0
       spdx-license-ids: 3.0.21
 
+  spdx-expression-parse@4.0.0:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.21
+
   spdx-license-ids@3.0.21: {}
 
-  sprintf-js@1.1.3: {}
+  speakingurl@14.0.1: {}
 
-  ssri@10.0.6:
-    dependencies:
-      minipass: 7.1.2
+  stable-hash@0.0.4: {}
 
   stable@0.1.8: {}
 
@@ -13814,10 +13032,14 @@ snapshots:
     dependencies:
       ansi-regex: 6.1.0
 
-  strip-final-newline@2.0.0: {}
-
   strip-final-newline@3.0.0: {}
 
+  strip-final-newline@4.0.0: {}
+
+  strip-indent@4.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   strip-json-comments@3.1.1: {}
 
   strip-literal@1.3.0:
@@ -13832,6 +13054,8 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
+  structured-clone-es@1.0.0: {}
+
   style-inject@0.3.0: {}
 
   stylehacks@5.1.1(postcss@8.5.3):
@@ -13856,6 +13080,10 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  superjson@2.2.2:
+    dependencies:
+      copy-anything: 3.0.5
+
   superstruct@2.0.2: {}
 
   supports-color@7.2.0:
@@ -13901,7 +13129,7 @@ snapshots:
 
   system-architecture@0.1.0: {}
 
-  tailwindcss-primeui@0.4.0(tailwindcss@3.4.17):
+  tailwindcss-primeui@0.5.1(tailwindcss@3.4.17):
     dependencies:
       tailwindcss: 3.4.17
 
@@ -13932,18 +13160,8 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tapable@1.1.3: {}
-
   tapable@2.2.1: {}
 
-  tar-stream@2.2.0:
-    dependencies:
-      bl: 4.1.0
-      end-of-stream: 1.4.4
-      fs-constants: 1.0.0
-      inherits: 2.0.4
-      readable-stream: 3.6.2
-
   tar-stream@3.1.7:
     dependencies:
       b4a: 1.6.7
@@ -13968,7 +13186,7 @@ snapshots:
       mkdirp: 3.0.1
       yallist: 5.0.0
 
-  terser-webpack-plugin@5.3.11(webpack@5.98.0):
+  terser-webpack-plugin@5.3.12(webpack@5.98.0):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -14004,6 +13222,11 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
+  tinyglobby@0.2.10:
+    dependencies:
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   tinyglobby@0.2.12:
     dependencies:
       fdir: 6.4.3(picomatch@4.0.2)
@@ -14011,13 +13234,13 @@ snapshots:
 
   tinypool@0.4.0: {}
 
-  tinypool@0.8.4: {}
+  tinypool@1.0.2: {}
+
+  tinyrainbow@2.0.0: {}
 
   tinyspy@1.1.1: {}
 
-  tinyspy@2.2.1: {}
-
-  titleize@3.0.0: {}
+  tinyspy@3.0.2: {}
 
   to-regex-range@5.0.1:
     dependencies:
@@ -14048,7 +13271,7 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
-  ts-api-utils@1.4.3(typescript@5.7.3):
+  ts-api-utils@2.0.1(typescript@5.7.3):
     dependencies:
       typescript: 5.7.3
 
@@ -14060,14 +13283,14 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.3.6(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0):
+  tsup@8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0):
     dependencies:
-      bundle-require: 5.1.0(esbuild@0.24.2)
+      bundle-require: 5.1.0(esbuild@0.25.0)
       cac: 6.7.14
       chokidar: 4.0.3
       consola: 3.4.0
       debug: 4.4.0(supports-color@9.4.0)
-      esbuild: 0.24.2
+      esbuild: 0.25.0
       joycon: 3.1.1
       picocolors: 1.1.1
       postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0)
@@ -14087,14 +13310,6 @@ snapshots:
       - tsx
       - yaml
 
-  tuf-js@2.2.1:
-    dependencies:
-      '@tufjs/models': 2.0.1
-      debug: 4.4.0(supports-color@9.4.0)
-      make-fetch-happen: 13.0.1
-    transitivePeerDependencies:
-      - supports-color
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -14111,21 +13326,24 @@ snapshots:
 
   type-level-regexp@0.1.17: {}
 
-  typedoc@0.23.23(typescript@4.9.5):
+  typedoc@0.27.9(typescript@5.7.3):
     dependencies:
+      '@gerrit0/mini-shiki': 1.27.2
       lunr: 2.3.9
-      marked: 4.3.0
-      minimatch: 5.1.6
-      shiki: 0.11.1
-      typescript: 4.9.5
-
-  typescript@4.9.5: {}
+      markdown-it: 14.1.0
+      minimatch: 9.0.5
+      typescript: 5.7.3
+      yaml: 2.7.0
 
   typescript@5.7.3: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.4: {}
 
-  unbuild@2.0.0(typescript@5.7.3):
+  ultrahtml@1.5.3: {}
+
+  unbuild@2.0.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@3.29.5)
       '@rollup/plugin-commonjs': 25.0.8(rollup@3.29.5)
@@ -14142,7 +13360,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 1.21.7
       magic-string: 0.30.17
-      mkdist: 1.6.0(typescript@5.7.3)
+      mkdist: 1.6.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
       mlly: 1.7.4
       pathe: 1.1.2
       pkg-types: 1.3.1
@@ -14167,7 +13385,7 @@ snapshots:
       magic-string: 0.30.17
       unplugin: 2.2.0
 
-  undici-types@5.26.5: {}
+  undici-types@6.20.0: {}
 
   unenv@1.10.0:
     dependencies:
@@ -14177,11 +13395,11 @@ snapshots:
       node-fetch-native: 1.6.6
       pathe: 1.1.2
 
-  unhead@1.11.19:
+  unhead@1.11.20:
     dependencies:
-      '@unhead/dom': 1.11.19
-      '@unhead/schema': 1.11.19
-      '@unhead/shared': 1.11.19
+      '@unhead/dom': 1.11.20
+      '@unhead/schema': 1.11.20
+      '@unhead/shared': 1.11.20
       hookable: 5.5.3
 
   unicode-canonical-property-names-ecmascript@2.0.1: {}
@@ -14195,6 +13413,8 @@ snapshots:
 
   unicode-property-aliases-ecmascript@2.1.0: {}
 
+  unicorn-magic@0.1.0: {}
+
   unicorn-magic@0.3.0: {}
 
   unimport@3.14.6(rollup@3.29.5):
@@ -14204,7 +13424,7 @@ snapshots:
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.3
-      local-pkg: 1.0.0
+      local-pkg: 1.1.0
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -14223,7 +13443,7 @@ snapshots:
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.3
-      local-pkg: 1.0.0
+      local-pkg: 1.1.0
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -14240,7 +13460,7 @@ snapshots:
       acorn: 8.14.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
-      local-pkg: 1.0.0
+      local-pkg: 1.1.0
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -14252,14 +13472,6 @@ snapshots:
       unplugin: 2.2.0
       unplugin-utils: 0.2.4
 
-  unique-filename@3.0.0:
-    dependencies:
-      unique-slug: 4.0.0
-
-  unique-slug@4.0.0:
-    dependencies:
-      imurmurhash: 0.1.4
-
   universalify@0.2.0: {}
 
   universalify@2.0.1: {}
@@ -14269,7 +13481,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-components@0.27.0(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
@@ -14279,7 +13491,7 @@ snapshots:
       local-pkg: 0.5.1
       magic-string: 0.30.17
       minimatch: 9.0.5
-      resolve: 1.22.10
+      mlly: 1.7.4
       unplugin: 1.16.1
       vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
@@ -14289,11 +13501,77 @@ snapshots:
       - rollup
       - supports-color
 
+  unplugin-vue-components@28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      chokidar: 3.6.0
+      debug: 4.4.0(supports-color@9.4.0)
+      local-pkg: 1.1.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      tinyglobby: 0.2.12
+      unplugin: 2.2.0
+      unplugin-utils: 0.2.4
+      vue: 3.5.13(typescript@5.7.3)
+    optionalDependencies:
+      '@babel/parser': 7.26.9
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  unplugin-vue-router@0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@babel/types': 7.26.9
+      '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
+      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.7.3))
+      ast-walker-scope: 0.6.2
+      chokidar: 3.6.0
+      fast-glob: 3.3.3
+      json5: 2.2.3
+      local-pkg: 1.1.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      pathe: 2.0.3
+      scule: 1.3.0
+      unplugin: 2.1.2
+      yaml: 2.7.0
+    optionalDependencies:
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - rollup
+      - vue
+
+  unplugin-vue-router@0.11.2(rollup@4.34.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@babel/types': 7.26.9
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.7.3))
+      ast-walker-scope: 0.6.2
+      chokidar: 3.6.0
+      fast-glob: 3.3.3
+      json5: 2.2.3
+      local-pkg: 1.1.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      pathe: 2.0.3
+      scule: 1.3.0
+      unplugin: 2.1.2
+      yaml: 2.7.0
+    optionalDependencies:
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - rollup
+      - vue
+
   unplugin@1.16.1:
     dependencies:
       acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
 
+  unplugin@2.1.2:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   unplugin@2.2.0:
     dependencies:
       acorn: 8.14.0
@@ -14313,8 +13591,6 @@ snapshots:
       db0: 0.2.4
       ioredis: 5.5.0
 
-  untildify@4.0.0: {}
-
   untun@0.1.3:
     dependencies:
       citty: 0.1.6
@@ -14343,7 +13619,7 @@ snapshots:
       pkg-types: 1.3.1
       unplugin: 1.16.1
 
-  update-browserslist-db@1.1.2(browserslist@4.24.4):
+  update-browserslist-db@1.1.3(browserslist@4.24.4):
     dependencies:
       browserslist: 4.24.4
       escalade: 3.2.0
@@ -14366,25 +13642,41 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  valibot@0.42.1(typescript@4.9.5):
+  valibot@0.42.1(typescript@5.7.3):
     optionalDependencies:
-      typescript: 4.9.5
+      typescript: 5.7.3
 
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  validate-npm-package-name@5.0.1: {}
+  vite-dev-rpc@1.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+    dependencies:
+      birpc: 2.2.0
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-hot-client: 2.0.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
 
-  vite-node@0.29.8(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0):
+  vite-hot-client@0.2.4(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+    dependencies:
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+
+  vite-hot-client@0.2.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+    dependencies:
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+
+  vite-hot-client@2.0.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+    dependencies:
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+
+  vite-node@0.29.8(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
       mlly: 1.7.4
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 4.5.9(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
+      vite: 4.5.9(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14395,15 +13687,16 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@1.6.1(@types/node@18.19.76)(terser@5.39.0):
+  vite-node@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
-      pathe: 1.1.2
-      picocolors: 1.1.1
-      vite: 5.4.14(@types/node@18.19.76)(terser@5.39.0)
+      es-module-lexer: 1.6.0
+      pathe: 2.0.3
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
+      - jiti
       - less
       - lightningcss
       - sass
@@ -14412,8 +13705,10 @@ snapshots:
       - sugarss
       - supports-color
       - terser
+      - tsx
+      - yaml
 
-  vite-plugin-checker@0.5.6(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@4.9.5)(vite@4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)):
+  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3)):
     dependencies:
       '@babel/code-frame': 7.26.2
       ansi-escapes: 4.3.2
@@ -14422,36 +13717,10 @@ snapshots:
       commander: 8.3.0
       fast-glob: 3.3.3
       fs-extra: 11.3.0
-      lodash.debounce: 4.0.8
-      lodash.pick: 4.4.0
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
-      vite: 4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
-      vscode-languageclient: 7.0.0
-      vscode-languageserver: 7.0.0
-      vscode-languageserver-textdocument: 1.0.12
-      vscode-uri: 3.1.0
-    optionalDependencies:
-      eslint: 9.21.0(jiti@2.4.2)
-      optionator: 0.9.4
-      typescript: 4.9.5
-
-  vite-plugin-checker@0.5.6(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@4.2.3(@types/node@18.19.76)(terser@5.39.0)):
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      chokidar: 3.6.0
-      commander: 8.3.0
-      fast-glob: 3.3.3
-      fs-extra: 11.3.0
-      lodash.debounce: 4.0.8
-      lodash.pick: 4.4.0
-      npm-run-path: 4.0.1
-      strip-ansi: 6.0.1
-      tiny-invariant: 1.3.3
-      vite: 4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.12
@@ -14460,24 +13729,62 @@ snapshots:
       eslint: 9.21.0(jiti@2.4.2)
       optionator: 0.9.4
       typescript: 5.7.3
+      vue-tsc: 2.1.10(typescript@5.7.3)
 
-  vite-plugin-inspect@0.7.42(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8):
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
       debug: 4.4.0(supports-color@9.4.0)
       error-stack-parser-es: 0.1.5
       fs-extra: 11.3.0
-      open: 9.1.0
+      open: 10.1.0
+      perfect-debounce: 1.0.0
       picocolors: 1.1.1
-      sirv: 2.0.4
+      sirv: 3.0.1
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-vue-inspector@3.7.2:
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+    dependencies:
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      debug: 4.4.0(supports-color@9.4.0)
+      error-stack-parser-es: 0.1.5
+      fs-extra: 11.3.0
+      open: 10.1.0
+      perfect-debounce: 1.0.0
+      picocolors: 1.1.1
+      sirv: 3.0.1
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+    optionalDependencies:
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  vite-plugin-inspect@11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+    dependencies:
+      ansis: 3.16.0
+      debug: 4.4.0(supports-color@9.4.0)
+      error-stack-parser-es: 1.0.5
+      ohash: 2.0.6
+      open: 10.1.0
+      perfect-debounce: 1.0.0
+      sirv: 3.0.1
+      unplugin-utils: 0.2.4
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-dev-rpc: 1.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+    optionalDependencies:
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-vue-inspector@5.3.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@@ -14488,57 +13795,65 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.17
+      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@4.2.3(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0):
+  vite-plugin-vue-inspector@5.3.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      esbuild: 0.17.19
-      postcss: 8.5.3
-      resolve: 1.22.10
-      rollup: 3.29.5
-    optionalDependencies:
-      '@types/node': 18.19.76
-      fsevents: 2.3.3
-      sass: 1.45.0
-      terser: 5.39.0
+      '@babel/core': 7.26.9
+      '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
+      '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.9)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.9)
+      '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
+      '@vue/compiler-dom': 3.5.13
+      kolorist: 1.8.0
+      magic-string: 0.30.17
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  vite@4.5.9(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0):
+  vite@4.5.9(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       esbuild: 0.18.20
       postcss: 8.5.3
       rollup: 3.29.5
     optionalDependencies:
-      '@types/node': 18.19.76
+      '@types/node': 22.13.5
       fsevents: 2.3.3
       sass: 1.45.0
       terser: 5.39.0
 
-  vite@5.4.14(@types/node@18.19.76)(terser@5.39.0):
+  vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
-      esbuild: 0.21.5
+      esbuild: 0.24.2
       postcss: 8.5.3
       rollup: 4.34.8
     optionalDependencies:
-      '@types/node': 18.19.76
+      '@types/node': 22.13.5
       fsevents: 2.3.3
+      jiti: 2.4.2
+      sass: 1.45.0
       terser: 5.39.0
+      yaml: 2.7.0
 
-  vite@6.2.0(@types/node@18.19.76)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
+  vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.0
       postcss: 8.5.3
       rollup: 4.34.8
     optionalDependencies:
-      '@types/node': 18.19.76
+      '@types/node': 22.13.5
       fsevents: 2.3.3
       jiti: 2.4.2
+      sass: 1.45.0
       terser: 5.39.0
       yaml: 2.7.0
 
-  vitest-environment-nuxt@1.0.1(@types/node@18.19.76)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@1.6.1(@types/node@18.19.76)(terser@5.39.0))(yaml@2.7.0):
+  vitest-environment-nuxt@1.0.1(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
     dependencies:
-      '@nuxt/test-utils': 3.17.0(@types/node@18.19.76)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@1.6.1(@types/node@18.19.76)(terser@5.39.0))(yaml@2.7.0)
+      '@nuxt/test-utils': 3.17.0(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -14569,7 +13884,7 @@ snapshots:
     dependencies:
       '@types/chai': 4.3.20
       '@types/chai-subset': 1.3.5
-      '@types/node': 18.19.76
+      '@types/node': 22.13.5
       '@vitest/expect': 0.29.8
       '@vitest/runner': 0.29.8
       '@vitest/spy': 0.29.8
@@ -14588,8 +13903,8 @@ snapshots:
       tinybench: 2.9.0
       tinypool: 0.4.0
       tinyspy: 1.1.1
-      vite: 4.5.9(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
-      vite-node: 0.29.8(@types/node@18.19.76)(sass@1.45.0)(terser@5.39.0)
+      vite: 4.5.9(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0)
+      vite-node: 0.29.8(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       jsdom: 19.0.0
@@ -14602,39 +13917,43 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@1.6.1(@types/node@18.19.76)(terser@5.39.0):
+  vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
-      '@vitest/expect': 1.6.1
-      '@vitest/runner': 1.6.1
-      '@vitest/snapshot': 1.6.1
-      '@vitest/spy': 1.6.1
-      '@vitest/utils': 1.6.1
-      acorn-walk: 8.3.4
-      chai: 4.5.0
+      '@vitest/expect': 3.0.7
+      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@vitest/pretty-format': 3.0.7
+      '@vitest/runner': 3.0.7
+      '@vitest/snapshot': 3.0.7
+      '@vitest/spy': 3.0.7
+      '@vitest/utils': 3.0.7
+      chai: 5.2.0
       debug: 4.4.0(supports-color@9.4.0)
-      execa: 8.0.1
-      local-pkg: 0.5.1
+      expect-type: 1.1.0
       magic-string: 0.30.17
-      pathe: 1.1.2
-      picocolors: 1.1.1
+      pathe: 2.0.3
       std-env: 3.8.0
-      strip-literal: 2.1.1
       tinybench: 2.9.0
-      tinypool: 0.8.4
-      vite: 5.4.14(@types/node@18.19.76)(terser@5.39.0)
-      vite-node: 1.6.1(@types/node@18.19.76)(terser@5.39.0)
+      tinyexec: 0.3.2
+      tinypool: 1.0.2
+      tinyrainbow: 2.0.0
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 18.19.76
+      '@types/node': 22.13.5
     transitivePeerDependencies:
+      - jiti
       - less
       - lightningcss
+      - msw
       - sass
       - sass-embedded
       - stylus
       - sugarss
       - supports-color
       - terser
+      - tsx
+      - yaml
 
   vscode-jsonrpc@6.0.0: {}
 
@@ -14657,13 +13976,9 @@ snapshots:
     dependencies:
       vscode-languageserver-protocol: 3.16.0
 
-  vscode-oniguruma@1.7.0: {}
-
-  vscode-textmate@6.0.0: {}
-
   vscode-uri@3.1.0: {}
 
-  vue-bundle-renderer@1.0.3:
+  vue-bundle-renderer@2.1.1:
     dependencies:
       ufo: 1.5.4
 
@@ -14684,25 +13999,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.5.0(vue@3.5.13(typescript@4.9.5)):
-    dependencies:
-      '@vue/devtools-api': 6.6.4
-      vue: 3.5.13(typescript@4.9.5)
-
   vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.7.3)
 
-  vue@3.5.13(typescript@4.9.5):
+  vue-tsc@2.1.10(typescript@5.7.3):
     dependencies:
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-sfc': 3.5.13
-      '@vue/runtime-dom': 3.5.13
-      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@4.9.5))
-      '@vue/shared': 3.5.13
-    optionalDependencies:
-      typescript: 4.9.5
+      '@volar/typescript': 2.4.11
+      '@vue/language-core': 2.1.10(typescript@5.7.3)
+      semver: 7.7.1
+      typescript: 5.7.3
 
   vue@3.5.13(typescript@5.7.3):
     dependencies:
@@ -14722,16 +14029,6 @@ snapshots:
     dependencies:
       xml-name-validator: 4.0.0
 
-  wait-on@7.2.0:
-    dependencies:
-      axios: 1.7.9
-      joi: 17.13.3
-      lodash: 4.17.21
-      minimist: 1.2.8
-      rxjs: 7.8.2
-    transitivePeerDependencies:
-      - debug
-
   watchpack@2.4.2:
     dependencies:
       glob-to-regexp: 0.4.1
@@ -14769,7 +14066,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.11(webpack@5.98.0)
+      terser-webpack-plugin: 5.3.12(webpack@5.98.0)
       watchpack: 2.4.2
       webpack-sources: 3.2.3
     transitivePeerDependencies:
@@ -14812,7 +14109,7 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  which@4.0.0:
+  which@5.0.0:
     dependencies:
       isexe: 3.1.1
 
@@ -14821,10 +14118,6 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  wide-align@1.1.5:
-    dependencies:
-      string-width: 4.2.3
-
   word-wrap@1.2.5: {}
 
   wrap-ansi@7.0.0:
@@ -14847,10 +14140,6 @@ snapshots:
 
   xmlchars@2.2.0: {}
 
-  xxhashjs@0.2.2:
-    dependencies:
-      cuint: 0.2.2
-
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
@@ -14881,6 +14170,8 @@ snapshots:
 
   yocto-queue@1.1.1: {}
 
+  yoctocolors@2.1.1: {}
+
   yup@1.4.0:
     dependencies:
       property-expr: 2.0.6
@@ -14890,12 +14181,6 @@ snapshots:
 
   zhead@2.2.4: {}
 
-  zip-stream@4.1.1:
-    dependencies:
-      archiver-utils: 3.0.4
-      compress-commons: 4.1.2
-      readable-stream: 3.6.2
-
   zip-stream@6.0.1:
     dependencies:
       archiver-utils: 5.0.2
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 0fc5d3500..46445a0ca 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,3 +8,15 @@ catalog:
     '@primeuix/forms': ^0.0.4
     '@primeuix/styles': ^1.0.0
     '@primeuix/themes': ^1.0.0
+    'tailwindcss-primeui': ^0.5.0
+    'primeicons': ^7.0.0
+
+catalogs:
+    app:
+        'nuxt': 3.15.4
+        'vite': 6.0.11
+        'sass': 1.45.0
+        'sass-loader': 8.0.2
+        '@docsearch/js': ^3
+        'chart.js': 3.3.2
+        'quill': 2.0.0

From 0325d4e61df99820b5c4b10d054b6a6130ced2a6 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 28 Feb 2025 11:33:03 +0000
Subject: [PATCH 15/77] refactor: add labs app

---
 apps/labs/README.md            |  75 +++++++++++++++++++++++++++++++++
 apps/labs/app.vue              |   6 +++
 apps/labs/nuxt.config.ts       |   5 +++
 apps/labs/package.json         |  16 +++++++
 apps/labs/public/favicon.ico   | Bin 0 -> 4286 bytes
 apps/labs/public/robots.txt    |   1 +
 apps/labs/server/tsconfig.json |   3 ++
 apps/labs/tsconfig.json        |   4 ++
 8 files changed, 110 insertions(+)
 create mode 100644 apps/labs/README.md
 create mode 100644 apps/labs/app.vue
 create mode 100644 apps/labs/nuxt.config.ts
 create mode 100644 apps/labs/package.json
 create mode 100644 apps/labs/public/favicon.ico
 create mode 100644 apps/labs/public/robots.txt
 create mode 100644 apps/labs/server/tsconfig.json
 create mode 100644 apps/labs/tsconfig.json

diff --git a/apps/labs/README.md b/apps/labs/README.md
new file mode 100644
index 000000000..25b58212c
--- /dev/null
+++ b/apps/labs/README.md
@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/apps/labs/app.vue b/apps/labs/app.vue
new file mode 100644
index 000000000..09f935bbb
--- /dev/null
+++ b/apps/labs/app.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtWelcome />
+  </div>
+</template>
diff --git a/apps/labs/nuxt.config.ts b/apps/labs/nuxt.config.ts
new file mode 100644
index 000000000..8ae12e6c5
--- /dev/null
+++ b/apps/labs/nuxt.config.ts
@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true }
+})
diff --git a/apps/labs/package.json b/apps/labs/package.json
new file mode 100644
index 000000000..199fdbb7a
--- /dev/null
+++ b/apps/labs/package.json
@@ -0,0 +1,16 @@
+{
+    "name": "labs",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "devDependencies": {
+        "nuxt": "catalog:app",
+        "vite": "catalog:app"
+    }
+}
diff --git a/apps/labs/public/favicon.ico b/apps/labs/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..18993ad91cfd43e03b074dd0b5cc3f37ab38e49c
GIT binary patch
literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

literal 0
HcmV?d00001

diff --git a/apps/labs/public/robots.txt b/apps/labs/public/robots.txt
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/apps/labs/public/robots.txt
@@ -0,0 +1 @@
+
diff --git a/apps/labs/server/tsconfig.json b/apps/labs/server/tsconfig.json
new file mode 100644
index 000000000..b9ed69c19
--- /dev/null
+++ b/apps/labs/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/apps/labs/tsconfig.json b/apps/labs/tsconfig.json
new file mode 100644
index 000000000..a746f2a70
--- /dev/null
+++ b/apps/labs/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

From e3e81207d6304bc6edd2477b32eba0c78ef7325e Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 28 Feb 2025 11:49:42 +0000
Subject: [PATCH 16/77] refactor: add `labs` folders

---
 apps/labs/README.md                           |    76 +-
 apps/labs/app.vue                             |    37 +-
 apps/labs/assets/data/menu.json               |   492 +
 apps/labs/assets/data/news.json               |     4 +
 apps/labs/assets/images/island1.jpg           |   Bin 0 -> 38006 bytes
 apps/labs/assets/images/island2.jpg           |   Bin 0 -> 49953 bytes
 apps/labs/assets/styles/app/_code.scss        |   133 +
 apps/labs/assets/styles/app/_content.scss     |    18 +
 apps/labs/assets/styles/app/_core.scss        |    94 +
 apps/labs/assets/styles/app/_doc.scss         |   440 +
 apps/labs/assets/styles/app/_docsearch.scss   |   147 +
 apps/labs/assets/styles/app/_footer.scss      |    26 +
 apps/labs/assets/styles/app/_glow.scss        |     7 +
 apps/labs/assets/styles/app/_mixins.scss      |    25 +
 apps/labs/assets/styles/app/_news.scss        |    92 +
 apps/labs/assets/styles/app/_responsive.scss  |   181 +
 apps/labs/assets/styles/app/_sidebar.scss     |   181 +
 apps/labs/assets/styles/app/_topbar.scss      |   221 +
 apps/labs/assets/styles/app/app.scss          |    16 +
 .../labs/assets/styles/app/landing/_hero.scss |    22 +
 .../assets/styles/app/landing/_landing.scss   |     7 +
 .../labs/assets/styles/app/landing/_main.scss |   180 +
 .../styles/app/variables/_variables.scss      |     5 +
 .../styles/app/variables/app/_dark.scss       |    28 +
 .../styles/app/variables/app/_light.scss      |    28 +
 .../app/variables/primevue/_common.scss       |    26 +
 .../styles/app/variables/primevue/_dark.scss  |    28 +
 .../styles/app/variables/primevue/_light.scss |    28 +
 apps/labs/assets/styles/demo/flags.css        |     1 +
 .../labs/assets/styles/primevue/accordion.css |    58 +
 .../assets/styles/primevue/autocomplete.css   |   143 +
 apps/labs/assets/styles/primevue/avatar.css   |    50 +
 apps/labs/assets/styles/primevue/badge.css    |    49 +
 apps/labs/assets/styles/primevue/blockui.css  |    15 +
 .../assets/styles/primevue/breadcrumb.css     |    41 +
 apps/labs/assets/styles/primevue/button.css   |   331 +
 .../assets/styles/primevue/buttongroup.css    |    19 +
 apps/labs/assets/styles/primevue/card.css     |    22 +
 apps/labs/assets/styles/primevue/carousel.css |    64 +
 .../assets/styles/primevue/cascadeselect.css  |   169 +
 apps/labs/assets/styles/primevue/checkbox.css |    84 +
 apps/labs/assets/styles/primevue/chip.css     |    27 +
 .../assets/styles/primevue/colorpicker.css    |    47 +
 apps/labs/assets/styles/primevue/common.css   |    81 +
 .../assets/styles/primevue/confirmdialog.css  |    10 +
 .../assets/styles/primevue/confirmpopup.css   |    66 +
 .../assets/styles/primevue/contextmenu.css    |   101 +
 .../labs/assets/styles/primevue/datatable.css |   408 +
 apps/labs/assets/styles/primevue/dataview.css |    29 +
 .../assets/styles/primevue/datepicker.css     |   211 +
 apps/labs/assets/styles/primevue/dialog.css   |   125 +
 apps/labs/assets/styles/primevue/divider.css  |    52 +
 apps/labs/assets/styles/primevue/dock.css     |    84 +
 apps/labs/assets/styles/primevue/drawer.css   |    94 +
 apps/labs/assets/styles/primevue/fieldset.css |    45 +
 .../assets/styles/primevue/fileupload.css     |    57 +
 .../assets/styles/primevue/floatlabel.css     |    73 +
 apps/labs/assets/styles/primevue/galleria.css |   244 +
 .../labs/assets/styles/primevue/iconfield.css |    23 +
 .../labs/assets/styles/primevue/iftalabel.css |    32 +
 apps/labs/assets/styles/primevue/image.css    |    56 +
 .../assets/styles/primevue/imagecompare.css   |    38 +
 apps/labs/assets/styles/primevue/inplace.css  |    13 +
 .../assets/styles/primevue/inputgroup.css     |    67 +
 .../assets/styles/primevue/inputnumber.css    |    84 +
 apps/labs/assets/styles/primevue/inputotp.css |     9 +
 .../labs/assets/styles/primevue/inputtext.css |    34 +
 apps/labs/assets/styles/primevue/knob.css     |    37 +
 apps/labs/assets/styles/primevue/listbox.css  |    79 +
 apps/labs/assets/styles/primevue/megamenu.css |   207 +
 apps/labs/assets/styles/primevue/menu.css     |    51 +
 apps/labs/assets/styles/primevue/menubar.css  |   169 +
 apps/labs/assets/styles/primevue/message.css  |   212 +
 .../assets/styles/primevue/metergroup.css     |    67 +
 .../assets/styles/primevue/multiselect.css    |   143 +
 .../labs/assets/styles/primevue/orderlist.css |    10 +
 .../styles/primevue/organizationchart.css     |    71 +
 .../assets/styles/primevue/overlaybadge.css   |    13 +
 .../labs/assets/styles/primevue/paginator.css |    58 +
 apps/labs/assets/styles/primevue/panel.css    |    27 +
 .../labs/assets/styles/primevue/panelmenu.css |    94 +
 apps/labs/assets/styles/primevue/password.css |    61 +
 apps/labs/assets/styles/primevue/picklist.css |    18 +
 apps/labs/assets/styles/primevue/popover.css  |    46 +
 .../assets/styles/primevue/progressbar.css    |    67 +
 .../styles/primevue/progressspinner.css       |    58 +
 .../assets/styles/primevue/radiobutton.css    |    93 +
 apps/labs/assets/styles/primevue/rating.css   |    23 +
 apps/labs/assets/styles/primevue/ripple.css   |     7 +
 .../assets/styles/primevue/scrollpanel.css    |    41 +
 .../labs/assets/styles/primevue/scrolltop.css |    25 +
 apps/labs/assets/styles/primevue/select.css   |   144 +
 .../assets/styles/primevue/selectbutton.css   |    25 +
 apps/labs/assets/styles/primevue/skeleton.css |    11 +
 apps/labs/assets/styles/primevue/slider.css   |    42 +
 .../labs/assets/styles/primevue/speeddial.css |    48 +
 .../assets/styles/primevue/splitbutton.css    |    34 +
 apps/labs/assets/styles/primevue/splitter.css |    56 +
 apps/labs/assets/styles/primevue/stepper.css  |   102 +
 apps/labs/assets/styles/primevue/tabs.css     |    84 +
 apps/labs/assets/styles/primevue/tag.css      |    38 +
 apps/labs/assets/styles/primevue/tailwind.css |   104 +
 apps/labs/assets/styles/primevue/terminal.css |    22 +
 apps/labs/assets/styles/primevue/textarea.css |    38 +
 .../assets/styles/primevue/tieredmenu.css     |   105 +
 apps/labs/assets/styles/primevue/timeline.css |   113 +
 apps/labs/assets/styles/primevue/toast.css    |   172 +
 .../assets/styles/primevue/togglebutton.css   |    63 +
 .../assets/styles/primevue/toggleswitch.css   |    66 +
 apps/labs/assets/styles/primevue/toolbar.css  |    12 +
 apps/labs/assets/styles/primevue/tooltip.css  |    38 +
 apps/labs/assets/styles/primevue/tree.css     |   103 +
 .../assets/styles/primevue/treeselect.css     |   116 +
 .../labs/assets/styles/primevue/treetable.css |   300 +
 apps/labs/assets/styles/tailwind.css          |     4 +
 apps/labs/components/app/AppConfigurator.vue  |   175 +
 apps/labs/components/app/AppFooter.vue        |    20 +
 apps/labs/components/app/AppMenu.vue          |    27 +
 apps/labs/components/app/AppMenuItem.vue      |    57 +
 apps/labs/components/app/AppNews.vue          |    48 +
 apps/labs/components/app/AppTopBar.vue        |   178 +
 apps/labs/components/app/PrimeVueNuxtLink.js  |     4 +
 apps/labs/components/demo/DeferredDemo.vue    |    78 +
 apps/labs/components/doc/DocComponent.vue     |    66 +
 apps/labs/components/doc/DocPreset.vue        |    45 +
 apps/labs/components/doc/DocPresetSection.vue |    25 +
 apps/labs/components/doc/DocSectionCode.vue   |   153 +
 apps/labs/components/doc/DocSectionNav.vue    |   127 +
 apps/labs/components/doc/DocSectionText.vue   |    47 +
 apps/labs/components/doc/DocSections.vue      |    26 +
 apps/labs/components/doc/codeeditor/index.js  |    68 +
 .../components/doc/codeeditor/services.js     | 11108 ++++++++++++++++
 .../components/doc/codeeditor/templates.js    |  1082 ++
 apps/labs/components/landing/HeroSection.vue  |   850 ++
 .../components/landing/samples/CardsApp.vue   |   589 +
 .../components/landing/samples/ChatApp.vue    |   433 +
 .../landing/samples/CustomersApp.vue          |   265 +
 .../components/landing/samples/InboxApp.vue   |   364 +
 .../components/landing/samples/MoviesApp.vue  |   160 +
 .../landing/samples/OverviewApp.vue           |   437 +
 .../components/tutorial/ToggleInputSwitch.vue |    97 +
 apps/labs/directives/CodeHighlight.js         |    19 +
 apps/labs/doc/accordion/AccessibilityDoc.vue  |    70 +
 apps/labs/doc/accordion/BasicDoc.vue          |   155 +
 apps/labs/doc/accordion/ControlledDoc.vue     |   190 +
 apps/labs/doc/accordion/DisabledDoc.vue       |   167 +
 apps/labs/doc/accordion/DynamicDoc.vue        |    94 +
 apps/labs/doc/accordion/ImportDoc.vue         |    21 +
 apps/labs/doc/accordion/MultipleDoc.vue       |   155 +
 apps/labs/doc/accordion/TemplateDoc.vue       |   230 +
 .../doc/autocomplete/AccessibilityDoc.vue     |   177 +
 apps/labs/doc/autocomplete/BasicDoc.vue       |    71 +
 apps/labs/doc/autocomplete/DisabledDoc.vue    |    50 +
 apps/labs/doc/autocomplete/DropdownDoc.vue    |    80 +
 apps/labs/doc/autocomplete/FilledDoc.vue      |    71 +
 apps/labs/doc/autocomplete/FloatLabelDoc.vue  |   129 +
 .../doc/autocomplete/ForceSelectionDoc.vue    |   117 +
 apps/labs/doc/autocomplete/FormsDoc.vue       |   201 +
 apps/labs/doc/autocomplete/GroupDoc.vue       |   236 +
 apps/labs/doc/autocomplete/IftaLabelDoc.vue   |    83 +
 apps/labs/doc/autocomplete/ImportDoc.vue      |    18 +
 apps/labs/doc/autocomplete/InvalidDoc.vue     |    78 +
 apps/labs/doc/autocomplete/MultipleDoc.vue    |    90 +
 apps/labs/doc/autocomplete/ObjectsDoc.vue     |   117 +
 apps/labs/doc/autocomplete/SizesDoc.vue       |    85 +
 apps/labs/doc/autocomplete/TemplateDoc.vue    |   173 +
 .../doc/autocomplete/VirtualScrollDoc.vue     |   113 +
 apps/labs/doc/avatar/AccessibilityDoc.vue     |    12 +
 apps/labs/doc/avatar/AvatarGroupDoc.vue       |    73 +
 apps/labs/doc/avatar/IconDoc.vue              |   118 +
 apps/labs/doc/avatar/ImageDoc.vue             |   110 +
 apps/labs/doc/avatar/ImportDoc.vue            |    19 +
 apps/labs/doc/avatar/LabelDoc.vue             |   114 +
 apps/labs/doc/badge/AccessibilityDoc.vue      |    12 +
 apps/labs/doc/badge/BasicDoc.vue              |    45 +
 apps/labs/doc/badge/ButtonDoc.vue             |    47 +
 apps/labs/doc/badge/ImportDoc.vue             |    20 +
 apps/labs/doc/badge/OverlayDoc.vue            |    77 +
 apps/labs/doc/badge/SeverityDoc.vue           |    67 +
 apps/labs/doc/badge/SizeDoc.vue               |    57 +
 apps/labs/doc/blockui/AccessibilityDoc.vue    |    11 +
 apps/labs/doc/blockui/BasicDoc.vue            |    98 +
 apps/labs/doc/blockui/DocumentDoc.vue         |    83 +
 apps/labs/doc/blockui/ImportDoc.vue           |    18 +
 apps/labs/doc/breadcrumb/AccessibilityDoc.vue |    12 +
 apps/labs/doc/breadcrumb/BasicDoc.vue         |    75 +
 apps/labs/doc/breadcrumb/ImportDoc.vue        |    18 +
 apps/labs/doc/breadcrumb/RouterDoc.vue        |   122 +
 apps/labs/doc/breadcrumb/TemplateDoc.vue      |    85 +
 apps/labs/doc/button/AccessibilityDoc.vue     |    57 +
 apps/labs/doc/button/BadgeDoc.vue             |    47 +
 apps/labs/doc/button/BasicDoc.vue             |    43 +
 apps/labs/doc/button/ButtonGroupDoc.vue       |    59 +
 apps/labs/doc/button/DisabledDoc.vue          |    43 +
 apps/labs/doc/button/HeadlessDoc.vue          |    71 +
 apps/labs/doc/button/IconOnlyDoc.vue          |   245 +
 apps/labs/doc/button/IconsDoc.vue             |    71 +
 apps/labs/doc/button/ImportDoc.vue            |    18 +
 apps/labs/doc/button/LinkDoc.vue              |    51 +
 apps/labs/doc/button/LoadingDoc.vue           |    77 +
 apps/labs/doc/button/OutlinedDoc.vue          |    71 +
 apps/labs/doc/button/RaisedDoc.vue            |    71 +
 apps/labs/doc/button/RaisedTextDoc.vue        |    71 +
 apps/labs/doc/button/RoundedDoc.vue           |    71 +
 apps/labs/doc/button/SeverityDoc.vue          |    71 +
 apps/labs/doc/button/SizesDoc.vue             |    51 +
 apps/labs/doc/button/TemplateDoc.vue          |    81 +
 apps/labs/doc/button/TextDoc.vue              |    71 +
 apps/labs/doc/card/AccessibilityDoc.vue       |    30 +
 apps/labs/doc/card/AdvancedDoc.vue            |   111 +
 apps/labs/doc/card/BasicDoc.vue               |    71 +
 apps/labs/doc/card/ImportDoc.vue              |    18 +
 apps/labs/doc/carousel/AccessibilityDoc.vue   |   113 +
 apps/labs/doc/carousel/BasicDoc.vue           |   278 +
 apps/labs/doc/carousel/CircularDoc.vue        |   278 +
 apps/labs/doc/carousel/ImportDoc.vue          |    18 +
 apps/labs/doc/carousel/ResponsiveDoc.vue      |   280 +
 apps/labs/doc/carousel/VerticalDoc.vue        |   212 +
 .../doc/cascadeselect/AccessibilityDoc.vue    |   136 +
 apps/labs/doc/cascadeselect/BasicDoc.vue      |   282 +
 apps/labs/doc/cascadeselect/ClearIconDoc.vue  |   279 +
 apps/labs/doc/cascadeselect/DisabledDoc.vue   |    45 +
 apps/labs/doc/cascadeselect/FilledDoc.vue     |   279 +
 apps/labs/doc/cascadeselect/FloatLabelDoc.vue |   334 +
 apps/labs/doc/cascadeselect/FormsDoc.vue      |   367 +
 apps/labs/doc/cascadeselect/IftaLabelDoc.vue  |   288 +
 apps/labs/doc/cascadeselect/ImportDoc.vue     |    18 +
 apps/labs/doc/cascadeselect/InvalidDoc.vue    |   301 +
 .../doc/cascadeselect/LoadingStateDoc.vue     |    45 +
 apps/labs/doc/cascadeselect/SizesDoc.vue      |   299 +
 apps/labs/doc/cascadeselect/TemplateDoc.vue   |   359 +
 apps/labs/doc/checkbox/AccessibilityDoc.vue   |    53 +
 apps/labs/doc/checkbox/BasicDoc.vue           |    54 +
 apps/labs/doc/checkbox/DisabledDoc.vue        |    61 +
 apps/labs/doc/checkbox/DynamicDoc.vue         |    90 +
 apps/labs/doc/checkbox/FilledDoc.vue          |    54 +
 apps/labs/doc/checkbox/FormsDoc.vue           |   200 +
 apps/labs/doc/checkbox/GroupDoc.vue           |   116 +
 apps/labs/doc/checkbox/ImportDoc.vue          |    18 +
 apps/labs/doc/checkbox/IndeterminateDoc.vue   |    54 +
 apps/labs/doc/checkbox/InvalidDoc.vue         |    54 +
 apps/labs/doc/checkbox/SizesDoc.vue           |   100 +
 apps/labs/doc/chip/AccessibilityDoc.vue       |    35 +
 apps/labs/doc/chip/BasicDoc.vue               |    57 +
 apps/labs/doc/chip/IconDoc.vue                |    55 +
 apps/labs/doc/chip/ImageDoc.vue               |    57 +
 apps/labs/doc/chip/ImportDoc.vue              |    18 +
 apps/labs/doc/chip/StyleDoc.vue               |    33 +
 apps/labs/doc/chip/TemplateDoc.vue            |    57 +
 .../labs/doc/colorpicker/AccessibilityDoc.vue |    98 +
 apps/labs/doc/colorpicker/BasicDoc.vue        |    54 +
 apps/labs/doc/colorpicker/DisabledDoc.vue     |    54 +
 apps/labs/doc/colorpicker/FormatDoc.vue       |   104 +
 apps/labs/doc/colorpicker/FormsDoc.vue        |   130 +
 apps/labs/doc/colorpicker/ImportDoc.vue       |    18 +
 apps/labs/doc/colorpicker/InlineDoc.vue       |    54 +
 apps/labs/doc/common/presetdoc/index.json     |    87 +
 .../doc/confirmdialog/AccessibilityDoc.vue    |   108 +
 apps/labs/doc/confirmdialog/BasicDoc.vue      |   196 +
 .../confirmdialog/ConfirmationServiceDoc.vue  |    35 +
 apps/labs/doc/confirmdialog/HeadlessDoc.vue   |   156 +
 apps/labs/doc/confirmdialog/ImportDoc.vue     |    18 +
 apps/labs/doc/confirmdialog/PositionDoc.vue   |   186 +
 apps/labs/doc/confirmdialog/TemplateDoc.vue   |   164 +
 .../doc/confirmpopup/AccessibilityDoc.vue     |   107 +
 apps/labs/doc/confirmpopup/BasicDoc.vue       |   195 +
 .../confirmpopup/ConfirmationServiceDoc.vue   |    35 +
 apps/labs/doc/confirmpopup/HeadlessDoc.vue    |   140 +
 apps/labs/doc/confirmpopup/ImportDoc.vue      |    18 +
 apps/labs/doc/confirmpopup/TemplateDoc.vue    |   158 +
 .../labs/doc/contextmenu/AccessibilityDoc.vue |    88 +
 apps/labs/doc/contextmenu/BasicDoc.vue        |    83 +
 apps/labs/doc/contextmenu/CommandDoc.vue      |   269 +
 apps/labs/doc/contextmenu/DataTableDoc.vue    |     5 +
 apps/labs/doc/contextmenu/DocumentDoc.vue     |   135 +
 apps/labs/doc/contextmenu/ImportDoc.vue       |    18 +
 apps/labs/doc/contextmenu/RouterDoc.vue       |   220 +
 apps/labs/doc/contextmenu/TemplateDoc.vue     |   320 +
 apps/labs/doc/customicons/FontAwesomeDoc.vue  |    24 +
 apps/labs/doc/customicons/ImageDoc.vue        |    24 +
 apps/labs/doc/customicons/MaterialDoc.vue     |    24 +
 apps/labs/doc/customicons/SVGDoc.vue          |    28 +
 apps/labs/doc/customicons/VideoDoc.vue        |     8 +
 apps/labs/doc/datatable/AccessibilityDoc.vue  |   176 +
 apps/labs/doc/datatable/BasicDoc.vue          |   109 +
 apps/labs/doc/datatable/ColumnGroupDoc.vue    |   339 +
 apps/labs/doc/datatable/ColumnToggleDoc.vue   |   161 +
 .../doc/datatable/ConditionalStyleDoc.vue     |   166 +
 apps/labs/doc/datatable/ContextMenuDoc.vue    |   199 +
 apps/labs/doc/datatable/DynamicColumnsDoc.vue |   121 +
 apps/labs/doc/datatable/ExportDoc.vue         |   141 +
 apps/labs/doc/datatable/GridLinesDoc.vue      |   109 +
 apps/labs/doc/datatable/ImportDoc.vue         |    21 +
 apps/labs/doc/datatable/LazyLoadDoc.vue       |   489 +
 apps/labs/doc/datatable/ReorderDoc.vue        |   157 +
 apps/labs/doc/datatable/RowExpansionDoc.vue   |   485 +
 apps/labs/doc/datatable/SizeDoc.vue           |   137 +
 apps/labs/doc/datatable/StatefulDoc.vue       |   479 +
 apps/labs/doc/datatable/StripedRowsDoc.vue    |   109 +
 apps/labs/doc/datatable/TemplateDoc.vue       |   265 +
 .../doc/datatable/colresize/ExpandModeDoc.vue |   107 +
 .../doc/datatable/colresize/FitModeDoc.vue    |   110 +
 apps/labs/doc/datatable/edit/CellEditDoc.vue  |   304 +
 apps/labs/doc/datatable/edit/RowEditDoc.vue   |   351 +
 .../datatable/filter/AdvancedFilterDoc.vue    |   755 ++
 .../doc/datatable/filter/BasicFilterDoc.vue   |   537 +
 .../pagination/PaginationBasicDoc.vue         |   115 +
 .../pagination/PaginationHeadlessDoc.vue      |   155 +
 .../pagination/PaginationTemplateDoc.vue      |   156 +
 .../rowgroup/ExpandableRowGroupDoc.vue        |   334 +
 .../datatable/rowgroup/RowSpanRowGroupDoc.vue |   290 +
 .../rowgroup/SubHeaderRowGroupDoc.vue         |   302 +
 .../rowselection/CheckboxRowSelectionDoc.vue  |   120 +
 .../rowselection/ColumnRowSelectionDoc.vue    |   143 +
 .../rowselection/MultipleRowsSelectionDoc.vue |   132 +
 .../RadioButtonRowSelectionDoc.vue            |   122 +
 .../rowselection/RowSelectEventsDoc.vue       |   141 +
 .../rowselection/SingleRowSelectionDoc.vue    |   136 +
 .../doc/datatable/samples/CustomersDoc.vue    |   709 +
 .../doc/datatable/samples/ProductsDoc.vue     |   958 ++
 .../datatable/scroll/FlexibleScrollDoc.vue    |   151 +
 .../doc/datatable/scroll/FrozenColumnsDoc.vue |   181 +
 .../doc/datatable/scroll/FrozenRowsDoc.vue    |   281 +
 .../datatable/scroll/HorizontalScrollDoc.vue  |   168 +
 .../datatable/scroll/VerticalScrollDoc.vue    |   120 +
 .../doc/datatable/sort/MultipleColumnsDoc.vue |   109 +
 apps/labs/doc/datatable/sort/PresortDoc.vue   |   143 +
 .../doc/datatable/sort/RemovableSortDoc.vue   |   109 +
 .../doc/datatable/sort/SingleColumnDoc.vue    |   109 +
 .../virtualscroll/LazyVirtualScrollDoc.vue    |   313 +
 .../virtualscroll/PreloadVirtualScrollDoc.vue |   109 +
 apps/labs/doc/dataview/AccessibilityDoc.vue   |    37 +
 apps/labs/doc/dataview/BasicDoc.vue           |   278 +
 apps/labs/doc/dataview/ImportDoc.vue          |    18 +
 apps/labs/doc/dataview/LayoutDoc.vue          |   478 +
 apps/labs/doc/dataview/LoadingDoc.vue         |   370 +
 apps/labs/doc/dataview/PaginationDoc.vue      |   278 +
 apps/labs/doc/dataview/SortingDoc.vue         |   354 +
 apps/labs/doc/datepicker/AccessibilityDoc.vue |   211 +
 apps/labs/doc/datepicker/BasicDoc.vue         |    54 +
 apps/labs/doc/datepicker/ButtonBarDoc.vue     |    54 +
 apps/labs/doc/datepicker/DateTemplateDoc.vue  |    74 +
 apps/labs/doc/datepicker/DisabledDoc.vue      |    54 +
 apps/labs/doc/datepicker/FilledDoc.vue        |    54 +
 apps/labs/doc/datepicker/FloatLabelDoc.vue    |   112 +
 apps/labs/doc/datepicker/FormatDoc.vue        |    73 +
 apps/labs/doc/datepicker/FormsDoc.vue         |   148 +
 apps/labs/doc/datepicker/IconDoc.vue          |   111 +
 apps/labs/doc/datepicker/IftaLabelDoc.vue     |    66 +
 apps/labs/doc/datepicker/ImportDoc.vue        |    18 +
 apps/labs/doc/datepicker/InlineDoc.vue        |    54 +
 apps/labs/doc/datepicker/InvalidDoc.vue       |    61 +
 apps/labs/doc/datepicker/LocaleDoc.vue        |     5 +
 apps/labs/doc/datepicker/MinMaxDoc.vue        |   105 +
 apps/labs/doc/datepicker/MonthPickerDoc.vue   |    54 +
 apps/labs/doc/datepicker/MultipleDoc.vue      |    54 +
 .../labs/doc/datepicker/MultipleMonthsDoc.vue |    54 +
 apps/labs/doc/datepicker/RangeDoc.vue         |    54 +
 apps/labs/doc/datepicker/SizesDoc.vue         |    68 +
 apps/labs/doc/datepicker/TimeDoc.vue          |    95 +
 apps/labs/doc/datepicker/YearPickerDoc.vue    |    54 +
 .../doc/deferredcontent/AccessibilityDoc.vue  |    29 +
 apps/labs/doc/deferredcontent/BasicDoc.vue    |    76 +
 .../labs/doc/deferredcontent/DataTableDoc.vue |   111 +
 apps/labs/doc/deferredcontent/ImportDoc.vue   |    18 +
 apps/labs/doc/dialog/AccessibilityDoc.vue     |    90 +
 apps/labs/doc/dialog/BasicDoc.vue             |   116 +
 apps/labs/doc/dialog/HeadlessDoc.vue          |   170 +
 apps/labs/doc/dialog/ImportDoc.vue            |    18 +
 apps/labs/doc/dialog/LongContentDoc.vue       |   193 +
 apps/labs/doc/dialog/MaximizableDoc.vue       |    80 +
 apps/labs/doc/dialog/PositionDoc.vue          |   190 +
 apps/labs/doc/dialog/ResponsiveDoc.vue        |    84 +
 apps/labs/doc/dialog/TemplateDoc.vue          |   140 +
 apps/labs/doc/dialog/WithoutModalDoc.vue      |   116 +
 apps/labs/doc/divider/AccessibilityDoc.vue    |     9 +
 apps/labs/doc/divider/BasicDoc.vue            |   139 +
 apps/labs/doc/divider/ContentDoc.vue          |   166 +
 apps/labs/doc/divider/ImportDoc.vue           |    18 +
 apps/labs/doc/divider/LoginDoc.vue            |   127 +
 apps/labs/doc/divider/TypeDoc.vue             |   139 +
 apps/labs/doc/divider/VerticalDoc.vue         |   111 +
 apps/labs/doc/dock/AccessibilityDoc.vue       |    77 +
 apps/labs/doc/dock/AdvancedDoc.vue            |   928 ++
 apps/labs/doc/dock/BasicDoc.vue               |   256 +
 apps/labs/doc/dock/ImportDoc.vue              |    18 +
 apps/labs/doc/drawer/AccessibilityDoc.vue     |    87 +
 apps/labs/doc/drawer/BasicDoc.vue             |    68 +
 apps/labs/doc/drawer/FullScreenDoc.vue        |    68 +
 apps/labs/doc/drawer/HeadlessDoc.vue          |   784 ++
 apps/labs/doc/drawer/ImportDoc.vue            |    18 +
 apps/labs/doc/drawer/PositionDoc.vue          |   147 +
 apps/labs/doc/drawer/SizeDoc.vue              |    68 +
 apps/labs/doc/drawer/TemplateDoc.vue          |   114 +
 .../doc/dynamicdialog/AccessibilityDoc.vue    |     5 +
 .../labs/doc/dynamicdialog/CloseDialogDoc.vue |    26 +
 .../doc/dynamicdialog/CustomizationDoc.vue    |    39 +
 .../doc/dynamicdialog/DialogServiceDoc.vue    |    44 +
 apps/labs/doc/dynamicdialog/EventsDoc.vue     |    45 +
 apps/labs/doc/dynamicdialog/ExampleDoc.vue    |   397 +
 apps/labs/doc/dynamicdialog/ImportDoc.vue     |    18 +
 apps/labs/doc/dynamicdialog/OpenDialogDoc.vue |    42 +
 .../labs/doc/dynamicdialog/PassingDataDoc.vue |    71 +
 .../doc/dynamicdialog/demo/FooterDemo.vue     |    14 +
 apps/labs/doc/dynamicdialog/demo/InfoDemo.vue |    29 +
 .../dynamicdialog/demo/ProductListDemo.vue    |    57 +
 apps/labs/doc/fieldset/AccessibilityDoc.vue   |    41 +
 apps/labs/doc/fieldset/BasicDoc.vue           |    63 +
 apps/labs/doc/fieldset/ImportDoc.vue          |    18 +
 apps/labs/doc/fieldset/TemplateDoc.vue        |    87 +
 apps/labs/doc/fieldset/ToggleableDoc.vue      |    63 +
 apps/labs/doc/fileupload/AccessibilityDoc.vue |     9 +
 apps/labs/doc/fileupload/AdvancedDoc.vue      |    79 +
 apps/labs/doc/fileupload/AutoDoc.vue          |    63 +
 apps/labs/doc/fileupload/BasicDoc.vue         |    79 +
 apps/labs/doc/fileupload/CustomUploadDoc.vue  |    93 +
 apps/labs/doc/fileupload/ImportDoc.vue        |    18 +
 apps/labs/doc/fileupload/TemplateDoc.vue      |   408 +
 apps/labs/doc/floatlabel/AccessibilityDoc.vue |     9 +
 apps/labs/doc/floatlabel/BasicDoc.vue         |    67 +
 apps/labs/doc/floatlabel/ImportDoc.vue        |    18 +
 apps/labs/doc/floatlabel/InvalidDoc.vue       |   113 +
 apps/labs/doc/floatlabel/VariantsDoc.vue      |    89 +
 apps/labs/doc/fluid/AccessibilityDoc.vue      |     9 +
 apps/labs/doc/fluid/BasicDoc.vue              |   123 +
 apps/labs/doc/fluid/ImportDoc.vue             |    18 +
 apps/labs/doc/galleria/AccessibilityDoc.vue   |   119 +
 apps/labs/doc/galleria/AdvancedDoc.vue        |   512 +
 apps/labs/doc/galleria/AutoPlayDoc.vue        |   144 +
 apps/labs/doc/galleria/BasicDoc.vue           |   141 +
 apps/labs/doc/galleria/CaptionDoc.vue         |   157 +
 apps/labs/doc/galleria/ControlledDoc.vue      |   185 +
 apps/labs/doc/galleria/ImportDoc.vue          |    18 +
 apps/labs/doc/galleria/ResponsiveDoc.vue      |   141 +
 apps/labs/doc/galleria/ThumbnailDoc.vue       |   224 +
 .../galleria/fullscreen/CustomContentDoc.vue  |   206 +
 .../galleria/fullscreen/WithThumbnailsDoc.vue |   176 +
 .../fullscreen/WithoutThumbnailsDoc.vue       |   176 +
 .../doc/galleria/indicator/ClickEventDoc.vue  |   102 +
 .../doc/galleria/indicator/HoverEventDoc.vue  |   102 +
 .../doc/galleria/indicator/PositionDoc.vue    |   192 +
 .../doc/galleria/indicator/TemplateDoc.vue    |   114 +
 apps/labs/doc/galleria/navigator/HoverDoc.vue |   141 +
 .../doc/galleria/navigator/IndicatorsDoc.vue  |   166 +
 .../galleria/navigator/ItemThumbnailsDoc.vue  |   144 +
 .../navigator/ItemWithoutThumbnailsDoc.vue    |   156 +
 apps/labs/doc/iconfield/AccessibilityDoc.vue  |     9 +
 apps/labs/doc/iconfield/BasicDoc.vue          |    89 +
 apps/labs/doc/iconfield/FloatLabelDoc.vue     |   148 +
 apps/labs/doc/iconfield/IftaLabelDoc.vue      |    78 +
 apps/labs/doc/iconfield/ImportDoc.vue         |    19 +
 apps/labs/doc/iconfield/SizesDoc.vue          |   113 +
 apps/labs/doc/iconfield/TemplateDoc.vue       |    92 +
 apps/labs/doc/icons/BasicDoc.vue              |    29 +
 apps/labs/doc/icons/ColorDoc.vue              |    29 +
 apps/labs/doc/icons/ConstantsDoc.vue          |    58 +
 apps/labs/doc/icons/DownloadDoc.vue           |    20 +
 apps/labs/doc/icons/FigmaDoc.vue              |     8 +
 apps/labs/doc/icons/ImportDoc.vue             |    18 +
 apps/labs/doc/icons/ListDoc.vue               |    68 +
 apps/labs/doc/icons/SizeDoc.vue               |    29 +
 apps/labs/doc/icons/SpinDoc.vue               |    25 +
 apps/labs/doc/iftalabel/AccessibilityDoc.vue  |     9 +
 apps/labs/doc/iftalabel/BasicDoc.vue          |    67 +
 apps/labs/doc/iftalabel/ImportDoc.vue         |    18 +
 apps/labs/doc/iftalabel/InvalidDoc.vue        |    67 +
 apps/labs/doc/image/AccessibilityDoc.vue      |    56 +
 apps/labs/doc/image/BasicDoc.vue              |    37 +
 apps/labs/doc/image/ImportDoc.vue             |    18 +
 apps/labs/doc/image/PreviewDoc.vue            |    38 +
 apps/labs/doc/image/TemplateDoc.vue           |    80 +
 .../doc/imagecompare/AccessibilityDoc.vue     |    81 +
 apps/labs/doc/imagecompare/BasicDoc.vue       |    65 +
 apps/labs/doc/imagecompare/ImportDoc.vue      |    18 +
 apps/labs/doc/imagecompare/ResponsiveDoc.vue  |    65 +
 apps/labs/doc/inplace/AccessibilityDoc.vue    |    26 +
 apps/labs/doc/inplace/BasicDoc.vue            |    77 +
 apps/labs/doc/inplace/ImageDoc.vue            |    84 +
 apps/labs/doc/inplace/ImportDoc.vue           |    18 +
 apps/labs/doc/inplace/InputDoc.vue            |    94 +
 apps/labs/doc/inplace/LazyDoc.vue             |   113 +
 apps/labs/doc/inputgroup/AccessibilityDoc.vue |     9 +
 apps/labs/doc/inputgroup/BasicDoc.vue         |   176 +
 apps/labs/doc/inputgroup/ButtonDoc.vue        |   153 +
 apps/labs/doc/inputgroup/CheckboxDoc.vue      |   151 +
 apps/labs/doc/inputgroup/FloatLabelDoc.vue    |   160 +
 apps/labs/doc/inputgroup/IftaLabelDoc.vue     |    86 +
 apps/labs/doc/inputgroup/ImportDoc.vue        |    19 +
 apps/labs/doc/inputgroup/MultipleDoc.vue      |    77 +
 apps/labs/doc/inputmask/AccessibilityDoc.vue  |    48 +
 apps/labs/doc/inputmask/BasicDoc.vue          |    54 +
 apps/labs/doc/inputmask/DisabledDoc.vue       |    55 +
 apps/labs/doc/inputmask/FilledDoc.vue         |    55 +
 apps/labs/doc/inputmask/FloatLabelDoc.vue     |   113 +
 apps/labs/doc/inputmask/FormsDoc.vue          |   131 +
 apps/labs/doc/inputmask/IftaLabelDoc.vue      |    66 +
 apps/labs/doc/inputmask/ImportDoc.vue         |    18 +
 apps/labs/doc/inputmask/InvalidDoc.vue        |    62 +
 apps/labs/doc/inputmask/MaskDoc.vue           |   116 +
 apps/labs/doc/inputmask/OptionalDoc.vue       |    55 +
 apps/labs/doc/inputmask/SizesDoc.vue          |    68 +
 apps/labs/doc/inputmask/SlotCharDoc.vue       |    54 +
 .../labs/doc/inputnumber/AccessibilityDoc.vue |    65 +
 apps/labs/doc/inputnumber/ButtonsDoc.vue      |   126 +
 apps/labs/doc/inputnumber/CurrencyDoc.vue     |   111 +
 apps/labs/doc/inputnumber/DisabledDoc.vue     |    54 +
 apps/labs/doc/inputnumber/FilledDoc.vue       |    54 +
 apps/labs/doc/inputnumber/FloatLabelDoc.vue   |   112 +
 apps/labs/doc/inputnumber/FormsDoc.vue        |   130 +
 apps/labs/doc/inputnumber/IftaLabelDoc.vue    |    66 +
 apps/labs/doc/inputnumber/ImportDoc.vue       |    18 +
 apps/labs/doc/inputnumber/InvalidDoc.vue      |    61 +
 apps/labs/doc/inputnumber/LocaleDoc.vue       |   111 +
 apps/labs/doc/inputnumber/NumeralsDoc.vue     |   111 +
 apps/labs/doc/inputnumber/PrefixSuffixDoc.vue |   111 +
 apps/labs/doc/inputnumber/SizesDoc.vue        |    68 +
 apps/labs/doc/inputnumber/VerticalDoc.vue     |    82 +
 apps/labs/doc/inputotp/AccessibilityDoc.vue   |    36 +
 apps/labs/doc/inputotp/BasicDoc.vue           |    54 +
 apps/labs/doc/inputotp/FilledDoc.vue          |    54 +
 apps/labs/doc/inputotp/FormsDoc.vue           |   130 +
 apps/labs/doc/inputotp/ImportDoc.vue          |    18 +
 apps/labs/doc/inputotp/IntegerOnlyDoc.vue     |    54 +
 apps/labs/doc/inputotp/MaskDoc.vue            |    54 +
 apps/labs/doc/inputotp/SampleDoc.vue          |   228 +
 apps/labs/doc/inputotp/SizesDoc.vue           |    68 +
 apps/labs/doc/inputotp/TemplateDoc.vue        |   124 +
 apps/labs/doc/inputtext/AccessibilityDoc.vue  |    51 +
 apps/labs/doc/inputtext/BasicDoc.vue          |    55 +
 apps/labs/doc/inputtext/DisabledDoc.vue       |    54 +
 apps/labs/doc/inputtext/FilledDoc.vue         |    55 +
 apps/labs/doc/inputtext/FloatLabelDoc.vue     |   112 +
 apps/labs/doc/inputtext/FormsDoc.vue          |   153 +
 apps/labs/doc/inputtext/HelpTextDoc.vue       |    70 +
 apps/labs/doc/inputtext/IftaLabelDoc.vue      |    66 +
 apps/labs/doc/inputtext/ImportDoc.vue         |    18 +
 apps/labs/doc/inputtext/InvalidDoc.vue        |    61 +
 apps/labs/doc/inputtext/SizesDoc.vue          |    68 +
 apps/labs/doc/knob/AccessibilityDoc.vue       |    79 +
 apps/labs/doc/knob/BasicDoc.vue               |    54 +
 apps/labs/doc/knob/ColorDoc.vue               |    57 +
 apps/labs/doc/knob/DisabledDoc.vue            |    54 +
 apps/labs/doc/knob/FormsDoc.vue               |   133 +
 apps/labs/doc/knob/ImportDoc.vue              |    18 +
 apps/labs/doc/knob/MinMaxDoc.vue              |    54 +
 apps/labs/doc/knob/ReactiveDoc.vue            |    70 +
 apps/labs/doc/knob/ReadOnlyDoc.vue            |    54 +
 apps/labs/doc/knob/SizeDoc.vue                |    54 +
 apps/labs/doc/knob/StepDoc.vue                |    54 +
 apps/labs/doc/knob/StrokeDoc.vue              |    54 +
 apps/labs/doc/knob/TemplateDoc.vue            |    54 +
 apps/labs/doc/listbox/AccessibilityDoc.vue    |   157 +
 apps/labs/doc/listbox/BasicDoc.vue            |    78 +
 apps/labs/doc/listbox/CheckmarkDoc.vue        |    75 +
 apps/labs/doc/listbox/DisabledDoc.vue         |    75 +
 apps/labs/doc/listbox/FilterDoc.vue           |    75 +
 apps/labs/doc/listbox/FormsDoc.vue            |   159 +
 apps/labs/doc/listbox/GroupDoc.vue            |   181 +
 apps/labs/doc/listbox/ImportDoc.vue           |    18 +
 apps/labs/doc/listbox/InvalidDoc.vue          |    75 +
 apps/labs/doc/listbox/MultipleDoc.vue         |    78 +
 apps/labs/doc/listbox/TemplateDoc.vue         |   118 +
 apps/labs/doc/listbox/VirtualScrollDoc.vue    |    63 +
 apps/labs/doc/megamenu/AccessibilityDoc.vue   |    96 +
 apps/labs/doc/megamenu/BasicDoc.vue           |   339 +
 apps/labs/doc/megamenu/CommandDoc.vue         |    26 +
 apps/labs/doc/megamenu/ImportDoc.vue          |    18 +
 apps/labs/doc/megamenu/RouterDoc.vue          |   180 +
 apps/labs/doc/megamenu/TemplateDoc.vue        |   331 +
 apps/labs/doc/megamenu/VerticalDoc.vue        |   339 +
 apps/labs/doc/menu/AccessibilityDoc.vue       |    81 +
 apps/labs/doc/menu/BasicDoc.vue               |    63 +
 apps/labs/doc/menu/CommandDoc.vue             |   105 +
 apps/labs/doc/menu/GroupDoc.vue               |   135 +
 apps/labs/doc/menu/ImportDoc.vue              |    18 +
 apps/labs/doc/menu/PopupDoc.vue               |   113 +
 apps/labs/doc/menu/RouterDoc.vue              |   168 +
 apps/labs/doc/menu/TemplateDoc.vue            |   321 +
 apps/labs/doc/menubar/AccessibilityDoc.vue    |    98 +
 apps/labs/doc/menubar/AdvancedDoc.vue         |     9 +
 apps/labs/doc/menubar/BasicDoc.vue            |   189 +
 apps/labs/doc/menubar/CommandDoc.vue          |   213 +
 apps/labs/doc/menubar/ImportDoc.vue           |    18 +
 apps/labs/doc/menubar/RouterDoc.vue           |   221 +
 apps/labs/doc/menubar/TemplateDoc.vue         |   248 +
 apps/labs/doc/message/AccessibilityDoc.vue    |    40 +
 apps/labs/doc/message/BasicDoc.vue            |    43 +
 apps/labs/doc/message/ClosableDoc.vue         |    43 +
 apps/labs/doc/message/DynamicDoc.vue          |   116 +
 apps/labs/doc/message/FormsDoc.vue            |    83 +
 apps/labs/doc/message/IconDoc.vue             |    67 +
 apps/labs/doc/message/ImportDoc.vue           |    18 +
 apps/labs/doc/message/LifeDoc.vue             |    84 +
 apps/labs/doc/message/OutlinedDoc.vue         |    63 +
 apps/labs/doc/message/SeverityDoc.vue         |    63 +
 apps/labs/doc/message/SimpleDoc.vue           |    63 +
 apps/labs/doc/message/SizesDoc.vue            |    51 +
 apps/labs/doc/metergroup/AccessibilityDoc.vue |     9 +
 apps/labs/doc/metergroup/BasicDoc.vue         |    54 +
 apps/labs/doc/metergroup/IconDoc.vue          |    69 +
 apps/labs/doc/metergroup/ImportDoc.vue        |    18 +
 apps/labs/doc/metergroup/LabelDoc.vue         |    72 +
 apps/labs/doc/metergroup/MinMaxDoc.vue        |    69 +
 apps/labs/doc/metergroup/MultipleDoc.vue      |    69 +
 apps/labs/doc/metergroup/TemplateDoc.vue      |   213 +
 apps/labs/doc/metergroup/VerticalDoc.vue      |    69 +
 .../labs/doc/multiselect/AccessibilityDoc.vue |   241 +
 apps/labs/doc/multiselect/BasicDoc.vue        |    81 +
 apps/labs/doc/multiselect/ChipsDoc.vue        |    78 +
 apps/labs/doc/multiselect/ClearIconDoc.vue    |    78 +
 apps/labs/doc/multiselect/DisabledDoc.vue     |    45 +
 apps/labs/doc/multiselect/FilledDoc.vue       |    78 +
 apps/labs/doc/multiselect/FilterDoc.vue       |    81 +
 apps/labs/doc/multiselect/FloatLabelDoc.vue   |   133 +
 apps/labs/doc/multiselect/FormsDoc.vue        |   167 +
 apps/labs/doc/multiselect/GroupDoc.vue        |   181 +
 apps/labs/doc/multiselect/IftaLabelDoc.vue    |    87 +
 apps/labs/doc/multiselect/ImportDoc.vue       |    18 +
 apps/labs/doc/multiselect/InvalidDoc.vue      |    88 +
 apps/labs/doc/multiselect/LoadingStateDoc.vue |    43 +
 apps/labs/doc/multiselect/SizesDoc.vue        |    89 +
 apps/labs/doc/multiselect/TemplateDoc.vue     |   178 +
 .../labs/doc/multiselect/VirtualScrollDoc.vue |   107 +
 apps/labs/doc/nuxt/CSSVariablesDoc.vue        |    97 +
 apps/labs/doc/nuxt/DownloadDoc.vue            |    30 +
 apps/labs/doc/nuxt/ExampleDoc.vue             |     9 +
 apps/labs/doc/nuxt/NuxtConfigDoc.vue          |    29 +
 apps/labs/doc/nuxt/StylesDoc.vue              |    28 +
 apps/labs/doc/nuxt/TailwindDoc.vue            |     9 +
 .../doc/nuxt/tailwind/ImportStylesDoc.vue     |    35 +
 .../doc/nuxt/tailwind/PostCSSImportDoc.vue    |    38 +
 .../doc/nuxt/tailwind/PrimeUIPluginDoc.vue    |    34 +
 apps/labs/doc/orderlist/AccessibilityDoc.vue  |   138 +
 apps/labs/doc/orderlist/BasicDoc.vue          |    99 +
 apps/labs/doc/orderlist/ImportDoc.vue         |    18 +
 apps/labs/doc/orderlist/TemplateDoc.vue       |   126 +
 .../organizationchart/AccessibilityDoc.vue    |    41 +
 apps/labs/doc/organizationchart/BasicDoc.vue  |   148 +
 .../labs/doc/organizationchart/ColoredDoc.vue |   259 +
 apps/labs/doc/organizationchart/ImportDoc.vue |    18 +
 .../doc/organizationchart/SelectionDoc.vue    |   252 +
 .../doc/organizationchart/TemplateDoc.vue     |   235 +
 apps/labs/doc/overview/IdeaDoc.vue            |    23 +
 apps/labs/doc/overview/PresetDoc.vue          |    54 +
 .../doc/overview/passthrough/GlobalDoc.vue    |    43 +
 .../doc/overview/passthrough/LocalDoc.vue     |    61 +
 .../doc/overview/passthrough/OverrideDoc.vue  |    20 +
 .../doc/overview/passthrough/ReuseDoc.vue     |    85 +
 apps/labs/doc/paginator/AccessibilityDoc.vue  |    63 +
 apps/labs/doc/paginator/BasicDoc.vue          |    46 +
 .../doc/paginator/CurrentPageReportDoc.vue    |    65 +
 apps/labs/doc/paginator/CustomContentDoc.vue  |    75 +
 apps/labs/doc/paginator/HeadlessDoc.vue       |   102 +
 apps/labs/doc/paginator/ImportDoc.vue         |    18 +
 apps/labs/doc/paginator/ResponsiveDoc.vue     |    82 +
 apps/labs/doc/paginator/TemplateDoc.vue       |    84 +
 apps/labs/doc/panel/AccessibilityDoc.vue      |    40 +
 apps/labs/doc/panel/BasicDoc.vue              |    63 +
 apps/labs/doc/panel/ImportDoc.vue             |    18 +
 apps/labs/doc/panel/TemplateDoc.vue           |   231 +
 apps/labs/doc/panel/ToggleableDoc.vue         |    63 +
 apps/labs/doc/panelmenu/AccessibilityDoc.vue  |    75 +
 apps/labs/doc/panelmenu/BasicDoc.vue          |   285 +
 apps/labs/doc/panelmenu/CommandDoc.vue        |   225 +
 apps/labs/doc/panelmenu/ControlledDoc.vue     |   337 +
 apps/labs/doc/panelmenu/ImportDoc.vue         |    18 +
 apps/labs/doc/panelmenu/MultipleDoc.vue       |   285 +
 apps/labs/doc/panelmenu/RouterDoc.vue         |   233 +
 apps/labs/doc/panelmenu/TemplateDoc.vue       |   276 +
 apps/labs/doc/password/AccessibilityDoc.vue   |    52 +
 apps/labs/doc/password/BasicDoc.vue           |    54 +
 apps/labs/doc/password/DisabledDoc.vue        |    54 +
 apps/labs/doc/password/FilledDoc.vue          |    54 +
 apps/labs/doc/password/FloatLabelDoc.vue      |   112 +
 apps/labs/doc/password/FormsDoc.vue           |   174 +
 apps/labs/doc/password/IftaLabelDoc.vue       |    66 +
 apps/labs/doc/password/ImportDoc.vue          |    18 +
 apps/labs/doc/password/InvalidDoc.vue         |    61 +
 apps/labs/doc/password/LocaleDoc.vue          |    57 +
 apps/labs/doc/password/MeterDoc.vue           |    54 +
 apps/labs/doc/password/SizesDoc.vue           |    70 +
 apps/labs/doc/password/TemplateDoc.vue        |   106 +
 apps/labs/doc/password/ToggleMaskDoc.vue      |    54 +
 apps/labs/doc/picklist/AccessibilityDoc.vue   |   139 +
 apps/labs/doc/picklist/BasicDoc.vue           |   100 +
 apps/labs/doc/picklist/ImportDoc.vue          |    18 +
 apps/labs/doc/picklist/TemplateDoc.vue        |   128 +
 apps/labs/doc/popover/AccessibilityDoc.vue    |    42 +
 apps/labs/doc/popover/BasicDoc.vue            |   229 +
 apps/labs/doc/popover/DataTableDoc.vue        |   374 +
 apps/labs/doc/popover/ImportDoc.vue           |    18 +
 apps/labs/doc/popover/SelectDataDoc.vue       |   165 +
 .../labs/doc/progressbar/AccessibilityDoc.vue |    31 +
 apps/labs/doc/progressbar/BasicDoc.vue        |    45 +
 apps/labs/doc/progressbar/DynamicDoc.vue      |   132 +
 apps/labs/doc/progressbar/ImportDoc.vue       |    18 +
 .../labs/doc/progressbar/IndeterminateDoc.vue |    45 +
 apps/labs/doc/progressbar/TemplateDoc.vue     |    54 +
 .../doc/progressspinner/AccessibilityDoc.vue  |    24 +
 apps/labs/doc/progressspinner/BasicDoc.vue    |    43 +
 apps/labs/doc/progressspinner/CustomDoc.vue   |    46 +
 apps/labs/doc/progressspinner/ImportDoc.vue   |    18 +
 .../labs/doc/radiobutton/AccessibilityDoc.vue |    70 +
 apps/labs/doc/radiobutton/DisabledDoc.vue     |    58 +
 apps/labs/doc/radiobutton/DynamicDoc.vue      |    90 +
 apps/labs/doc/radiobutton/FilledDoc.vue       |    54 +
 apps/labs/doc/radiobutton/FormsDoc.vue        |   198 +
 apps/labs/doc/radiobutton/GroupDoc.vue        |   122 +
 apps/labs/doc/radiobutton/ImportDoc.vue       |    18 +
 apps/labs/doc/radiobutton/InvalidDoc.vue      |    54 +
 apps/labs/doc/radiobutton/SizesDoc.vue        |   106 +
 apps/labs/doc/rating/AccessibilityDoc.vue     |    50 +
 apps/labs/doc/rating/BasicDoc.vue             |    54 +
 apps/labs/doc/rating/DisabledDoc.vue          |    54 +
 apps/labs/doc/rating/FormsDoc.vue             |   130 +
 apps/labs/doc/rating/ImportDoc.vue            |    18 +
 apps/labs/doc/rating/NumberOfStarsDoc.vue     |    54 +
 apps/labs/doc/rating/ReadOnlyDoc.vue          |    54 +
 apps/labs/doc/rating/TemplateDoc.vue          |    82 +
 apps/labs/doc/ripple/AccessibilityDoc.vue     |     9 +
 apps/labs/doc/ripple/ConfigurationDoc.vue     |    34 +
 apps/labs/doc/ripple/CustomDoc.vue            |    77 +
 apps/labs/doc/ripple/DefaultDoc.vue           |    88 +
 apps/labs/doc/ripple/ImportDoc.vue            |    36 +
 .../labs/doc/scrollpanel/AccessibilityDoc.vue |    40 +
 apps/labs/doc/scrollpanel/BasicDoc.vue        |    99 +
 apps/labs/doc/scrollpanel/CustomDoc.vue       |   102 +
 apps/labs/doc/scrollpanel/ImportDoc.vue       |    18 +
 apps/labs/doc/scrolltop/AccessibilityDoc.vue  |    35 +
 apps/labs/doc/scrolltop/BasicDoc.vue          |    49 +
 apps/labs/doc/scrolltop/ElementDoc.vue        |    73 +
 apps/labs/doc/scrolltop/ImportDoc.vue         |    18 +
 apps/labs/doc/select/AccessibilityDoc.vue     |   197 +
 apps/labs/doc/select/BasicDoc.vue             |    78 +
 apps/labs/doc/select/CheckmarkDoc.vue         |    75 +
 apps/labs/doc/select/ClearIconDoc.vue         |    75 +
 apps/labs/doc/select/DisabledDoc.vue          |    45 +
 apps/labs/doc/select/EditableDoc.vue          |    75 +
 apps/labs/doc/select/FilledDoc.vue            |    75 +
 apps/labs/doc/select/FilterDoc.vue            |   154 +
 apps/labs/doc/select/FloatLabelDoc.vue        |   133 +
 apps/labs/doc/select/FormsDoc.vue             |   163 +
 apps/labs/doc/select/GroupDoc.vue             |   181 +
 apps/labs/doc/select/IftaLabelDoc.vue         |    87 +
 apps/labs/doc/select/ImportDoc.vue            |    18 +
 apps/labs/doc/select/InvalidDoc.vue           |    82 +
 apps/labs/doc/select/LazyVirtualScrollDoc.vue |   136 +
 apps/labs/doc/select/LoadingStateDoc.vue      |    43 +
 apps/labs/doc/select/SizesDoc.vue             |    89 +
 apps/labs/doc/select/TemplateDoc.vue          |   198 +
 apps/labs/doc/select/VirtualScrollDoc.vue     |    63 +
 .../doc/selectbutton/AccessibilityDoc.vue     |    50 +
 apps/labs/doc/selectbutton/BasicDoc.vue       |    60 +
 apps/labs/doc/selectbutton/DisabledDoc.vue    |    76 +
 apps/labs/doc/selectbutton/FormsDoc.vue       |   132 +
 apps/labs/doc/selectbutton/ImportDoc.vue      |    18 +
 apps/labs/doc/selectbutton/InvalidDoc.vue     |    57 +
 apps/labs/doc/selectbutton/MultipleDoc.vue    |    69 +
 apps/labs/doc/selectbutton/SizesDoc.vue       |    71 +
 apps/labs/doc/selectbutton/TemplateDoc.vue    |    88 +
 apps/labs/doc/skeleton/AccessibilityDoc.vue   |    14 +
 apps/labs/doc/skeleton/CardDoc.vue            |    99 +
 apps/labs/doc/skeleton/DataTableDoc.vue       |   138 +
 apps/labs/doc/skeleton/ImportDoc.vue          |    18 +
 apps/labs/doc/skeleton/ListDoc.vue            |   195 +
 apps/labs/doc/skeleton/ShapesDoc.vue          |   172 +
 apps/labs/doc/slider/AccessibilityDoc.vue     |    80 +
 apps/labs/doc/slider/BasicDoc.vue             |    54 +
 apps/labs/doc/slider/FilterDoc.vue            |   105 +
 apps/labs/doc/slider/FormsDoc.vue             |   130 +
 apps/labs/doc/slider/ImportDoc.vue            |    18 +
 apps/labs/doc/slider/InputDoc.vue             |    64 +
 apps/labs/doc/slider/RangeDoc.vue             |    54 +
 apps/labs/doc/slider/StepDoc.vue              |    54 +
 apps/labs/doc/slider/VerticalDoc.vue          |    54 +
 apps/labs/doc/speeddial/AccessibilityDoc.vue  |   132 +
 apps/labs/doc/speeddial/CircleDoc.vue         |   175 +
 apps/labs/doc/speeddial/ImportDoc.vue         |    18 +
 apps/labs/doc/speeddial/LinearDoc.vue         |   187 +
 apps/labs/doc/speeddial/MaskDoc.vue           |   173 +
 apps/labs/doc/speeddial/QuarterCircleDoc.vue  |   187 +
 apps/labs/doc/speeddial/SemiCircleDoc.vue     |   185 +
 apps/labs/doc/speeddial/TemplateDoc.vue       |   252 +
 apps/labs/doc/speeddial/TooltipDoc.vue        |   179 +
 .../labs/doc/splitbutton/AccessibilityDoc.vue |   149 +
 apps/labs/doc/splitbutton/BasicDoc.vue        |   138 +
 apps/labs/doc/splitbutton/DisabledDoc.vue     |   136 +
 apps/labs/doc/splitbutton/IconsDoc.vue        |   146 +
 apps/labs/doc/splitbutton/ImportDoc.vue       |    18 +
 apps/labs/doc/splitbutton/NestedDoc.vue       |   270 +
 apps/labs/doc/splitbutton/OutlinedDoc.vue     |   165 +
 apps/labs/doc/splitbutton/RaisedDoc.vue       |   165 +
 apps/labs/doc/splitbutton/RaisedTextDoc.vue   |   161 +
 apps/labs/doc/splitbutton/RoundedDoc.vue      |   165 +
 apps/labs/doc/splitbutton/SeverityDoc.vue     |   165 +
 apps/labs/doc/splitbutton/SizesDoc.vue        |   145 +
 apps/labs/doc/splitbutton/TemplateDoc.vue     |   157 +
 apps/labs/doc/splitbutton/TextDoc.vue         |   161 +
 apps/labs/doc/splitter/AccessibilityDoc.vue   |    40 +
 apps/labs/doc/splitter/HorizontalDoc.vue      |    55 +
 apps/labs/doc/splitter/ImportDoc.vue          |    19 +
 apps/labs/doc/splitter/NestedDoc.vue          |    95 +
 apps/labs/doc/splitter/SizeDoc.vue            |    55 +
 apps/labs/doc/splitter/VerticalDoc.vue        |    55 +
 apps/labs/doc/stepper/AccessibilityDoc.vue    |    42 +
 apps/labs/doc/stepper/HorizontalDoc.vue       |   169 +
 apps/labs/doc/stepper/ImportDoc.vue           |    23 +
 apps/labs/doc/stepper/LinearDoc.vue           |   169 +
 apps/labs/doc/stepper/StepsOnlyDoc.vue        |    61 +
 apps/labs/doc/stepper/TemplateDoc.vue         |   491 +
 apps/labs/doc/stepper/VerticalDoc.vue         |   177 +
 apps/labs/doc/tabs/AccessibilityDoc.vue       |    74 +
 apps/labs/doc/tabs/BasicDoc.vue               |   147 +
 apps/labs/doc/tabs/ControlledDoc.vue          |   182 +
 apps/labs/doc/tabs/DisabledDoc.vue            |   151 +
 apps/labs/doc/tabs/DynamicDoc.vue             |   102 +
 apps/labs/doc/tabs/ImportDoc.vue              |    22 +
 apps/labs/doc/tabs/ScrollableDoc.vue          |    98 +
 apps/labs/doc/tabs/TabMenuDoc.vue             |   112 +
 apps/labs/doc/tabs/TemplateDoc.vue            |   190 +
 apps/labs/doc/tag/AccessibilityDoc.vue        |    12 +
 apps/labs/doc/tag/BasicDoc.vue                |    45 +
 apps/labs/doc/tag/IconDoc.vue                 |    69 +
 apps/labs/doc/tag/ImportDoc.vue               |    18 +
 apps/labs/doc/tag/PillDoc.vue                 |    69 +
 apps/labs/doc/tag/SeverityDoc.vue             |    69 +
 apps/labs/doc/tag/TemplateDoc.vue             |    63 +
 apps/labs/doc/terminal/AccessibilityDoc.vue   |    32 +
 apps/labs/doc/terminal/BasicDoc.vue           |   166 +
 apps/labs/doc/terminal/ImportDoc.vue          |    19 +
 apps/labs/doc/textarea/AccessibilityDoc.vue   |    49 +
 apps/labs/doc/textarea/AutoResizeDoc.vue      |    54 +
 apps/labs/doc/textarea/BasicDoc.vue           |    54 +
 apps/labs/doc/textarea/DisabledDoc.vue        |    54 +
 apps/labs/doc/textarea/FilledDoc.vue          |    54 +
 apps/labs/doc/textarea/FloatLabelDoc.vue      |   112 +
 apps/labs/doc/textarea/FormsDoc.vue           |   130 +
 apps/labs/doc/textarea/IftaLabelDoc.vue       |    66 +
 apps/labs/doc/textarea/ImportDoc.vue          |    18 +
 apps/labs/doc/textarea/InvalidDoc.vue         |    54 +
 apps/labs/doc/textarea/SizesDoc.vue           |    68 +
 apps/labs/doc/tieredmenu/AccessibilityDoc.vue |    94 +
 apps/labs/doc/tieredmenu/BasicDoc.vue         |   258 +
 apps/labs/doc/tieredmenu/CommandDoc.vue       |   213 +
 apps/labs/doc/tieredmenu/ImportDoc.vue        |    18 +
 apps/labs/doc/tieredmenu/PopupDoc.vue         |   277 +
 apps/labs/doc/tieredmenu/RouterDoc.vue        |   221 +
 apps/labs/doc/tieredmenu/TemplateDoc.vue      |   328 +
 apps/labs/doc/timeline/AccessibilityDoc.vue   |     9 +
 apps/labs/doc/timeline/AlignmentDoc.vue       |   134 +
 apps/labs/doc/timeline/BasicDoc.vue           |    86 +
 apps/labs/doc/timeline/HorizontalDoc.vue      |   122 +
 apps/labs/doc/timeline/ImportDoc.vue          |    18 +
 apps/labs/doc/timeline/OppositeDoc.vue        |    98 +
 apps/labs/doc/timeline/TemplateDoc.vue        |   220 +
 apps/labs/doc/toast/AccessibilityDoc.vue      |    75 +
 apps/labs/doc/toast/BasicDoc.vue              |    67 +
 apps/labs/doc/toast/HeadlessDoc.vue           |   220 +
 apps/labs/doc/toast/ImportDoc.vue             |    18 +
 apps/labs/doc/toast/MultipleDoc.vue           |    73 +
 apps/labs/doc/toast/PositionDoc.vue           |   107 +
 apps/labs/doc/toast/SeverityDoc.vue           |   140 +
 apps/labs/doc/toast/StickyDoc.vue             |    84 +
 apps/labs/doc/toast/TemplateDoc.vue           |   149 +
 apps/labs/doc/toast/ToastServiceDoc.vue       |    35 +
 .../doc/togglebutton/AccessibilityDoc.vue     |    52 +
 apps/labs/doc/togglebutton/BasicDoc.vue       |    54 +
 apps/labs/doc/togglebutton/CustomizedDoc.vue  |    57 +
 apps/labs/doc/togglebutton/DisabledDoc.vue    |    57 +
 apps/labs/doc/togglebutton/FormsDoc.vue       |   131 +
 apps/labs/doc/togglebutton/ImportDoc.vue      |    18 +
 apps/labs/doc/togglebutton/InvalidDoc.vue     |    54 +
 apps/labs/doc/togglebutton/SizesDoc.vue       |    68 +
 .../doc/toggleswitch/AccessibilityDoc.vue     |    52 +
 apps/labs/doc/toggleswitch/BasicDoc.vue       |    54 +
 apps/labs/doc/toggleswitch/DisabledDoc.vue    |    54 +
 apps/labs/doc/toggleswitch/FormsDoc.vue       |   124 +
 apps/labs/doc/toggleswitch/ImportDoc.vue      |    18 +
 apps/labs/doc/toggleswitch/InvalidDoc.vue     |    54 +
 .../labs/doc/toggleswitch/PreselectionDoc.vue |    54 +
 apps/labs/doc/toggleswitch/TemplateDoc.vue    |    70 +
 apps/labs/doc/toolbar/AccessibilityDoc.vue    |    12 +
 apps/labs/doc/toolbar/BasicDoc.vue            |   149 +
 apps/labs/doc/toolbar/CustomDoc.vue           |   137 +
 apps/labs/doc/toolbar/ImportDoc.vue           |    18 +
 apps/labs/doc/tooltip/AccessibilityDoc.vue    |    26 +
 apps/labs/doc/tooltip/AutoHideDoc.vue         |    41 +
 apps/labs/doc/tooltip/CustomDoc.vue           |    92 +
 apps/labs/doc/tooltip/DelayDoc.vue            |    37 +
 apps/labs/doc/tooltip/EventDoc.vue            |    37 +
 apps/labs/doc/tooltip/ImportDoc.vue           |    20 +
 apps/labs/doc/tooltip/PositionDoc.vue         |    49 +
 apps/labs/doc/tree/AccessibilityDoc.vue       |    77 +
 apps/labs/doc/tree/BasicDoc.vue               |    96 +
 apps/labs/doc/tree/ControlledDoc.vue          |   182 +
 apps/labs/doc/tree/EventsDoc.vue              |   158 +
 apps/labs/doc/tree/FilterDoc.vue              |   149 +
 apps/labs/doc/tree/ImportDoc.vue              |    18 +
 apps/labs/doc/tree/LazyDoc.vue                |   392 +
 apps/labs/doc/tree/TemplateDoc.vue            |   167 +
 apps/labs/doc/tree/selection/CheckboxDoc.vue  |   131 +
 apps/labs/doc/tree/selection/MultipleDoc.vue  |   119 +
 apps/labs/doc/tree/selection/SingleDoc.vue    |   126 +
 apps/labs/doc/treeselect/AccessibilityDoc.vue |   109 +
 apps/labs/doc/treeselect/BasicDoc.vue         |   103 +
 apps/labs/doc/treeselect/CheckboxDoc.vue      |   114 +
 apps/labs/doc/treeselect/ClearIconDoc.vue     |    99 +
 apps/labs/doc/treeselect/DisabledDoc.vue      |    98 +
 apps/labs/doc/treeselect/FilledDoc.vue        |    99 +
 apps/labs/doc/treeselect/FilterDoc.vue        |   107 +
 apps/labs/doc/treeselect/FloatLabelDoc.vue    |   157 +
 apps/labs/doc/treeselect/FormsDoc.vue         |   138 +
 apps/labs/doc/treeselect/IftaLabelDoc.vue     |   111 +
 apps/labs/doc/treeselect/ImportDoc.vue        |    18 +
 apps/labs/doc/treeselect/InvalidDoc.vue       |   106 +
 apps/labs/doc/treeselect/LazyDoc.vue          |   358 +
 apps/labs/doc/treeselect/MultipleDoc.vue      |   111 +
 apps/labs/doc/treeselect/SizesDoc.vue         |   113 +
 apps/labs/doc/treeselect/TemplateDoc.vue      |   151 +
 apps/labs/doc/treetable/AccessibilityDoc.vue  |   128 +
 apps/labs/doc/treetable/BasicDoc.vue          |   117 +
 apps/labs/doc/treetable/ColumnToggleDoc.vue   |   169 +
 apps/labs/doc/treetable/ContextMenuDoc.vue    |   235 +
 apps/labs/doc/treetable/ControlledDoc.vue     |   150 +
 apps/labs/doc/treetable/DynamicColumnsDoc.vue |   130 +
 apps/labs/doc/treetable/FilterDoc.vue         |   229 +
 apps/labs/doc/treetable/ImportDoc.vue         |    19 +
 apps/labs/doc/treetable/LazyLoadDoc.vue       |   320 +
 apps/labs/doc/treetable/SizeDoc.vue           |   138 +
 apps/labs/doc/treetable/TemplateDoc.vue       |   181 +
 .../pagination/PaginationBasicDoc.vue         |   157 +
 .../pagination/PaginationHeadlessDoc.vue      |   197 +
 .../pagination/PaginationTemplateDoc.vue      |   216 +
 .../doc/treetable/resize/ExpandModeDoc.vue    |   117 +
 apps/labs/doc/treetable/resize/FitModeDoc.vue |   120 +
 .../treetable/scroll/FlexibleScrollDoc.vue    |   121 +
 .../doc/treetable/scroll/FrozenColumnsDoc.vue |   129 +
 .../treetable/scroll/HorizontalScrollDoc.vue  |   129 +
 .../treetable/scroll/VerticalScrollDoc.vue    |   117 +
 .../selection/CheckboxRowSelectionDoc.vue     |   134 +
 .../selection/MultipleRowsSelectionDoc.vue    |   141 +
 .../selection/RowSelectionEventsDoc.vue       |   144 +
 .../selection/SingleRowSelectionDoc.vue       |   141 +
 .../doc/treetable/sort/MultipleColumnsDoc.vue |   117 +
 .../doc/treetable/sort/RemovableSortDoc.vue   |   117 +
 .../doc/treetable/sort/SingleColumnDoc.vue    |   117 +
 .../doc/virtualscroller/AccessibilityDoc.vue  |     9 +
 apps/labs/doc/virtualscroller/BasicDoc.vue    |    79 +
 apps/labs/doc/virtualscroller/DelayDoc.vue    |   145 +
 apps/labs/doc/virtualscroller/GridDoc.vue     |    92 +
 .../doc/virtualscroller/HorizontalDoc.vue     |    76 +
 apps/labs/doc/virtualscroller/ImportDoc.vue   |    18 +
 apps/labs/doc/virtualscroller/LazyDoc.vue     |   151 +
 apps/labs/doc/virtualscroller/LoadingDoc.vue  |   138 +
 apps/labs/doc/vite/CSSVariablesDoc.vue        |    94 +
 apps/labs/doc/vite/DownloadDoc.vue            |    27 +
 apps/labs/doc/vite/ExampleDoc.vue             |     9 +
 apps/labs/doc/vite/PluginDoc.vue              |    26 +
 apps/labs/doc/vite/StylesDoc.vue              |    28 +
 apps/labs/doc/vite/TailwindDoc.vue            |     8 +
 .../doc/vite/tailwind/ImportStylesDoc.vue     |    35 +
 .../doc/vite/tailwind/PostCSSImportDoc.vue    |    38 +
 .../doc/vite/tailwind/PrimeUIPluginDoc.vue    |    34 +
 apps/labs/error.vue                           |    15 +
 apps/labs/layouts/AppEventBus.js              |     3 +
 apps/labs/layouts/custom.vue                  |     5 +
 apps/labs/layouts/default.vue                 |    69 +
 apps/labs/middleware/route.global.js          |     9 +
 apps/labs/nuxt.config.js                      |    86 +
 apps/labs/nuxt.config.ts                      |     5 -
 apps/labs/package.json                        |    55 +-
 apps/labs/pages/accordion/index.vue           |    66 +
 apps/labs/pages/autocomplete/index.vue        |   128 +
 apps/labs/pages/avatar/index.vue              |    54 +
 apps/labs/pages/badge/index.vue               |    60 +
 apps/labs/pages/blockui/index.vue             |    41 +
 apps/labs/pages/breadcrumb/index.vue          |    47 +
 apps/labs/pages/button/index.vue              |   132 +
 apps/labs/pages/card/index.vue                |    42 +
 apps/labs/pages/carousel/index.vue            |    54 +
 apps/labs/pages/cascadeselect/index.vue       |   104 +
 apps/labs/pages/checkbox/index.vue            |    84 +
 apps/labs/pages/chip/index.vue                |    54 +
 apps/labs/pages/colorpicker/index.vue         |    60 +
 apps/labs/pages/confirmdialog/index.vue       |    68 +
 apps/labs/pages/confirmpopup/index.vue        |    62 +
 apps/labs/pages/contextmenu/index.vue         |    74 +
 apps/labs/pages/customicons/index.vue         |    61 +
 apps/labs/pages/datatable/index.vue           |   366 +
 apps/labs/pages/dataview/index.vue            |    68 +
 apps/labs/pages/datepicker/index.vue          |   156 +
 apps/labs/pages/deferredcontent/index.vue     |    50 +
 apps/labs/pages/dialog/index.vue              |    78 +
 apps/labs/pages/divider/index.vue             |    60 +
 apps/labs/pages/dock/index.vue                |    42 +
 apps/labs/pages/drawer/index.vue              |    66 +
 apps/labs/pages/dynamicdialog/index.vue       |    80 +
 apps/labs/pages/fieldset/index.vue            |    48 +
 apps/labs/pages/fileupload/index.vue          |    68 +
 apps/labs/pages/floatlabel/index.vue          |    48 +
 apps/labs/pages/fluid/index.vue               |    45 +
 apps/labs/pages/galleria/index.vue            |   159 +
 apps/labs/pages/iconfield/index.vue           |    60 +
 apps/labs/pages/icons/index.vue               |    88 +
 apps/labs/pages/iftalabel/index.vue           |    42 +
 apps/labs/pages/image/index.vue               |    48 +
 apps/labs/pages/imagecompare/index.vue        |    42 +
 apps/labs/pages/index.vue                     |    46 +
 apps/labs/pages/inplace/index.vue             |    62 +
 apps/labs/pages/inputgroup/index.vue          |    74 +
 apps/labs/pages/inputmask/index.vue           |   104 +
 apps/labs/pages/inputnumber/index.vue         |   108 +
 apps/labs/pages/inputotp/index.vue            |    78 +
 apps/labs/pages/inputtext/index.vue           |    84 +
 apps/labs/pages/knob/index.vue                |    96 +
 apps/labs/pages/listbox/index.vue             |    90 +
 apps/labs/pages/megamenu/index.vue            |    68 +
 apps/labs/pages/menu/index.vue                |    66 +
 apps/labs/pages/menubar/index.vue             |    59 +
 apps/labs/pages/message/index.vue             |    90 +
 apps/labs/pages/metergroup/index.vue          |    71 +
 apps/labs/pages/multiselect/index.vue         |   128 +
 apps/labs/pages/nuxt/index.vue                |    88 +
 apps/labs/pages/orderlist/index.vue           |    42 +
 apps/labs/pages/organizationchart/index.vue   |    61 +
 apps/labs/pages/paginator/index.vue           |    68 +
 apps/labs/pages/panel/index.vue               |    47 +
 apps/labs/pages/panelmenu/index.vue           |    65 +
 apps/labs/pages/password/index.vue            |   102 +
 apps/labs/pages/picklist/index.vue            |    42 +
 apps/labs/pages/popover/index.vue             |    56 +
 apps/labs/pages/progressbar/index.vue         |    54 +
 apps/labs/pages/progressspinner/index.vue     |    42 +
 apps/labs/pages/radiobutton/index.vue         |    80 +
 apps/labs/pages/rating/index.vue              |    66 +
 apps/labs/pages/ripple/index.vue              |    47 +
 apps/labs/pages/scrollpanel/index.vue         |    50 +
 apps/labs/pages/scrolltop/index.vue           |    49 +
 apps/labs/pages/select/index.vue              |   132 +
 apps/labs/pages/selectbutton/index.vue        |    80 +
 apps/labs/pages/skeleton/index.vue            |    54 +
 apps/labs/pages/slider/index.vue              |    71 +
 apps/labs/pages/speeddial/index.vue           |    44 +
 apps/labs/pages/splitbutton/index.vue         |   110 +
 apps/labs/pages/splitter/index.vue            |    53 +
 apps/labs/pages/stepper/index.vue             |    68 +
 apps/labs/pages/tabs/index.vue                |    72 +
 apps/labs/pages/tag/index.vue                 |    60 +
 apps/labs/pages/terminal/index.vue            |    35 +
 apps/labs/pages/textarea/index.vue            |    92 +
 apps/labs/pages/tieredmenu/index.vue          |    60 +
 apps/labs/pages/timeline/index.vue            |    60 +
 apps/labs/pages/toast/index.vue               |    77 +
 apps/labs/pages/togglebutton/index.vue        |    74 +
 apps/labs/pages/toggleswitch/index.vue        |    66 +
 apps/labs/pages/toolbar/index.vue             |    41 +
 apps/labs/pages/tooltip/index.vue             |    60 +
 apps/labs/pages/tree/index.vue                |    90 +
 apps/labs/pages/treeselect/index.vue          |   114 +
 apps/labs/pages/treetable/index.vue           |   210 +
 apps/labs/pages/virtualscroller/index.vue     |    70 +
 apps/labs/pages/vite/index.vue                |    88 +
 apps/labs/plugins/app.js                      |    23 +
 apps/labs/public/demo/data/icons.json         |     1 +
 apps/labs/public/favicon.ico                  |   Bin 4286 -> 15406 bytes
 apps/labs/public/robots.txt                   |     1 -
 apps/labs/public/scripts/prism.js             |    11 +
 apps/labs/scripts/build-presetdoc.js          |    36 +
 apps/labs/scripts/prebuild.js                 |    20 +
 apps/labs/server/tsconfig.json                |     3 -
 apps/labs/service/CarService.js               |    38 +
 apps/labs/service/CountryService.js           |   252 +
 apps/labs/service/CustomerService.js          |  9032 +++++++++++++
 apps/labs/service/EventService.js             |    22 +
 apps/labs/service/IconService.js              |    18 +
 apps/labs/service/NodeService.js              |   431 +
 apps/labs/service/PhotoService.js             |   100 +
 apps/labs/service/ProductService.js           |  1220 ++
 apps/labs/tailwind.config.js                  |    17 +
 pnpm-lock.yaml                                |    67 +
 1080 files changed, 132578 insertions(+), 91 deletions(-)
 create mode 100644 apps/labs/assets/data/menu.json
 create mode 100644 apps/labs/assets/data/news.json
 create mode 100644 apps/labs/assets/images/island1.jpg
 create mode 100644 apps/labs/assets/images/island2.jpg
 create mode 100644 apps/labs/assets/styles/app/_code.scss
 create mode 100644 apps/labs/assets/styles/app/_content.scss
 create mode 100644 apps/labs/assets/styles/app/_core.scss
 create mode 100644 apps/labs/assets/styles/app/_doc.scss
 create mode 100644 apps/labs/assets/styles/app/_docsearch.scss
 create mode 100644 apps/labs/assets/styles/app/_footer.scss
 create mode 100644 apps/labs/assets/styles/app/_glow.scss
 create mode 100644 apps/labs/assets/styles/app/_mixins.scss
 create mode 100644 apps/labs/assets/styles/app/_news.scss
 create mode 100644 apps/labs/assets/styles/app/_responsive.scss
 create mode 100644 apps/labs/assets/styles/app/_sidebar.scss
 create mode 100644 apps/labs/assets/styles/app/_topbar.scss
 create mode 100644 apps/labs/assets/styles/app/app.scss
 create mode 100644 apps/labs/assets/styles/app/landing/_hero.scss
 create mode 100644 apps/labs/assets/styles/app/landing/_landing.scss
 create mode 100644 apps/labs/assets/styles/app/landing/_main.scss
 create mode 100644 apps/labs/assets/styles/app/variables/_variables.scss
 create mode 100644 apps/labs/assets/styles/app/variables/app/_dark.scss
 create mode 100644 apps/labs/assets/styles/app/variables/app/_light.scss
 create mode 100644 apps/labs/assets/styles/app/variables/primevue/_common.scss
 create mode 100644 apps/labs/assets/styles/app/variables/primevue/_dark.scss
 create mode 100644 apps/labs/assets/styles/app/variables/primevue/_light.scss
 create mode 100755 apps/labs/assets/styles/demo/flags.css
 create mode 100644 apps/labs/assets/styles/primevue/accordion.css
 create mode 100644 apps/labs/assets/styles/primevue/autocomplete.css
 create mode 100644 apps/labs/assets/styles/primevue/avatar.css
 create mode 100644 apps/labs/assets/styles/primevue/badge.css
 create mode 100644 apps/labs/assets/styles/primevue/blockui.css
 create mode 100644 apps/labs/assets/styles/primevue/breadcrumb.css
 create mode 100644 apps/labs/assets/styles/primevue/button.css
 create mode 100644 apps/labs/assets/styles/primevue/buttongroup.css
 create mode 100644 apps/labs/assets/styles/primevue/card.css
 create mode 100644 apps/labs/assets/styles/primevue/carousel.css
 create mode 100644 apps/labs/assets/styles/primevue/cascadeselect.css
 create mode 100644 apps/labs/assets/styles/primevue/checkbox.css
 create mode 100644 apps/labs/assets/styles/primevue/chip.css
 create mode 100644 apps/labs/assets/styles/primevue/colorpicker.css
 create mode 100644 apps/labs/assets/styles/primevue/common.css
 create mode 100644 apps/labs/assets/styles/primevue/confirmdialog.css
 create mode 100644 apps/labs/assets/styles/primevue/confirmpopup.css
 create mode 100644 apps/labs/assets/styles/primevue/contextmenu.css
 create mode 100644 apps/labs/assets/styles/primevue/datatable.css
 create mode 100644 apps/labs/assets/styles/primevue/dataview.css
 create mode 100644 apps/labs/assets/styles/primevue/datepicker.css
 create mode 100644 apps/labs/assets/styles/primevue/dialog.css
 create mode 100644 apps/labs/assets/styles/primevue/divider.css
 create mode 100644 apps/labs/assets/styles/primevue/dock.css
 create mode 100644 apps/labs/assets/styles/primevue/drawer.css
 create mode 100644 apps/labs/assets/styles/primevue/fieldset.css
 create mode 100644 apps/labs/assets/styles/primevue/fileupload.css
 create mode 100644 apps/labs/assets/styles/primevue/floatlabel.css
 create mode 100644 apps/labs/assets/styles/primevue/galleria.css
 create mode 100644 apps/labs/assets/styles/primevue/iconfield.css
 create mode 100644 apps/labs/assets/styles/primevue/iftalabel.css
 create mode 100644 apps/labs/assets/styles/primevue/image.css
 create mode 100644 apps/labs/assets/styles/primevue/imagecompare.css
 create mode 100644 apps/labs/assets/styles/primevue/inplace.css
 create mode 100644 apps/labs/assets/styles/primevue/inputgroup.css
 create mode 100644 apps/labs/assets/styles/primevue/inputnumber.css
 create mode 100644 apps/labs/assets/styles/primevue/inputotp.css
 create mode 100644 apps/labs/assets/styles/primevue/inputtext.css
 create mode 100644 apps/labs/assets/styles/primevue/knob.css
 create mode 100644 apps/labs/assets/styles/primevue/listbox.css
 create mode 100644 apps/labs/assets/styles/primevue/megamenu.css
 create mode 100644 apps/labs/assets/styles/primevue/menu.css
 create mode 100644 apps/labs/assets/styles/primevue/menubar.css
 create mode 100644 apps/labs/assets/styles/primevue/message.css
 create mode 100644 apps/labs/assets/styles/primevue/metergroup.css
 create mode 100644 apps/labs/assets/styles/primevue/multiselect.css
 create mode 100644 apps/labs/assets/styles/primevue/orderlist.css
 create mode 100644 apps/labs/assets/styles/primevue/organizationchart.css
 create mode 100644 apps/labs/assets/styles/primevue/overlaybadge.css
 create mode 100644 apps/labs/assets/styles/primevue/paginator.css
 create mode 100644 apps/labs/assets/styles/primevue/panel.css
 create mode 100644 apps/labs/assets/styles/primevue/panelmenu.css
 create mode 100644 apps/labs/assets/styles/primevue/password.css
 create mode 100644 apps/labs/assets/styles/primevue/picklist.css
 create mode 100644 apps/labs/assets/styles/primevue/popover.css
 create mode 100644 apps/labs/assets/styles/primevue/progressbar.css
 create mode 100644 apps/labs/assets/styles/primevue/progressspinner.css
 create mode 100644 apps/labs/assets/styles/primevue/radiobutton.css
 create mode 100644 apps/labs/assets/styles/primevue/rating.css
 create mode 100644 apps/labs/assets/styles/primevue/ripple.css
 create mode 100644 apps/labs/assets/styles/primevue/scrollpanel.css
 create mode 100644 apps/labs/assets/styles/primevue/scrolltop.css
 create mode 100644 apps/labs/assets/styles/primevue/select.css
 create mode 100644 apps/labs/assets/styles/primevue/selectbutton.css
 create mode 100644 apps/labs/assets/styles/primevue/skeleton.css
 create mode 100644 apps/labs/assets/styles/primevue/slider.css
 create mode 100644 apps/labs/assets/styles/primevue/speeddial.css
 create mode 100644 apps/labs/assets/styles/primevue/splitbutton.css
 create mode 100644 apps/labs/assets/styles/primevue/splitter.css
 create mode 100644 apps/labs/assets/styles/primevue/stepper.css
 create mode 100644 apps/labs/assets/styles/primevue/tabs.css
 create mode 100644 apps/labs/assets/styles/primevue/tag.css
 create mode 100644 apps/labs/assets/styles/primevue/tailwind.css
 create mode 100644 apps/labs/assets/styles/primevue/terminal.css
 create mode 100644 apps/labs/assets/styles/primevue/textarea.css
 create mode 100644 apps/labs/assets/styles/primevue/tieredmenu.css
 create mode 100644 apps/labs/assets/styles/primevue/timeline.css
 create mode 100644 apps/labs/assets/styles/primevue/toast.css
 create mode 100644 apps/labs/assets/styles/primevue/togglebutton.css
 create mode 100644 apps/labs/assets/styles/primevue/toggleswitch.css
 create mode 100644 apps/labs/assets/styles/primevue/toolbar.css
 create mode 100644 apps/labs/assets/styles/primevue/tooltip.css
 create mode 100644 apps/labs/assets/styles/primevue/tree.css
 create mode 100644 apps/labs/assets/styles/primevue/treeselect.css
 create mode 100644 apps/labs/assets/styles/primevue/treetable.css
 create mode 100644 apps/labs/assets/styles/tailwind.css
 create mode 100644 apps/labs/components/app/AppConfigurator.vue
 create mode 100755 apps/labs/components/app/AppFooter.vue
 create mode 100755 apps/labs/components/app/AppMenu.vue
 create mode 100644 apps/labs/components/app/AppMenuItem.vue
 create mode 100644 apps/labs/components/app/AppNews.vue
 create mode 100755 apps/labs/components/app/AppTopBar.vue
 create mode 100644 apps/labs/components/app/PrimeVueNuxtLink.js
 create mode 100644 apps/labs/components/demo/DeferredDemo.vue
 create mode 100644 apps/labs/components/doc/DocComponent.vue
 create mode 100644 apps/labs/components/doc/DocPreset.vue
 create mode 100644 apps/labs/components/doc/DocPresetSection.vue
 create mode 100644 apps/labs/components/doc/DocSectionCode.vue
 create mode 100644 apps/labs/components/doc/DocSectionNav.vue
 create mode 100644 apps/labs/components/doc/DocSectionText.vue
 create mode 100644 apps/labs/components/doc/DocSections.vue
 create mode 100644 apps/labs/components/doc/codeeditor/index.js
 create mode 100644 apps/labs/components/doc/codeeditor/services.js
 create mode 100644 apps/labs/components/doc/codeeditor/templates.js
 create mode 100644 apps/labs/components/landing/HeroSection.vue
 create mode 100644 apps/labs/components/landing/samples/CardsApp.vue
 create mode 100644 apps/labs/components/landing/samples/ChatApp.vue
 create mode 100644 apps/labs/components/landing/samples/CustomersApp.vue
 create mode 100644 apps/labs/components/landing/samples/InboxApp.vue
 create mode 100644 apps/labs/components/landing/samples/MoviesApp.vue
 create mode 100644 apps/labs/components/landing/samples/OverviewApp.vue
 create mode 100644 apps/labs/components/tutorial/ToggleInputSwitch.vue
 create mode 100644 apps/labs/directives/CodeHighlight.js
 create mode 100644 apps/labs/doc/accordion/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/accordion/BasicDoc.vue
 create mode 100644 apps/labs/doc/accordion/ControlledDoc.vue
 create mode 100644 apps/labs/doc/accordion/DisabledDoc.vue
 create mode 100644 apps/labs/doc/accordion/DynamicDoc.vue
 create mode 100644 apps/labs/doc/accordion/ImportDoc.vue
 create mode 100644 apps/labs/doc/accordion/MultipleDoc.vue
 create mode 100644 apps/labs/doc/accordion/TemplateDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/BasicDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/DisabledDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/DropdownDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/FilledDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/ForceSelectionDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/FormsDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/GroupDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/ImportDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/InvalidDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/MultipleDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/ObjectsDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/SizesDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/TemplateDoc.vue
 create mode 100644 apps/labs/doc/autocomplete/VirtualScrollDoc.vue
 create mode 100644 apps/labs/doc/avatar/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/avatar/AvatarGroupDoc.vue
 create mode 100644 apps/labs/doc/avatar/IconDoc.vue
 create mode 100644 apps/labs/doc/avatar/ImageDoc.vue
 create mode 100644 apps/labs/doc/avatar/ImportDoc.vue
 create mode 100644 apps/labs/doc/avatar/LabelDoc.vue
 create mode 100644 apps/labs/doc/badge/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/badge/BasicDoc.vue
 create mode 100644 apps/labs/doc/badge/ButtonDoc.vue
 create mode 100644 apps/labs/doc/badge/ImportDoc.vue
 create mode 100644 apps/labs/doc/badge/OverlayDoc.vue
 create mode 100644 apps/labs/doc/badge/SeverityDoc.vue
 create mode 100644 apps/labs/doc/badge/SizeDoc.vue
 create mode 100644 apps/labs/doc/blockui/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/blockui/BasicDoc.vue
 create mode 100644 apps/labs/doc/blockui/DocumentDoc.vue
 create mode 100644 apps/labs/doc/blockui/ImportDoc.vue
 create mode 100644 apps/labs/doc/breadcrumb/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/breadcrumb/BasicDoc.vue
 create mode 100644 apps/labs/doc/breadcrumb/ImportDoc.vue
 create mode 100644 apps/labs/doc/breadcrumb/RouterDoc.vue
 create mode 100644 apps/labs/doc/breadcrumb/TemplateDoc.vue
 create mode 100644 apps/labs/doc/button/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/button/BadgeDoc.vue
 create mode 100644 apps/labs/doc/button/BasicDoc.vue
 create mode 100644 apps/labs/doc/button/ButtonGroupDoc.vue
 create mode 100644 apps/labs/doc/button/DisabledDoc.vue
 create mode 100644 apps/labs/doc/button/HeadlessDoc.vue
 create mode 100644 apps/labs/doc/button/IconOnlyDoc.vue
 create mode 100644 apps/labs/doc/button/IconsDoc.vue
 create mode 100644 apps/labs/doc/button/ImportDoc.vue
 create mode 100644 apps/labs/doc/button/LinkDoc.vue
 create mode 100644 apps/labs/doc/button/LoadingDoc.vue
 create mode 100644 apps/labs/doc/button/OutlinedDoc.vue
 create mode 100644 apps/labs/doc/button/RaisedDoc.vue
 create mode 100644 apps/labs/doc/button/RaisedTextDoc.vue
 create mode 100644 apps/labs/doc/button/RoundedDoc.vue
 create mode 100644 apps/labs/doc/button/SeverityDoc.vue
 create mode 100644 apps/labs/doc/button/SizesDoc.vue
 create mode 100644 apps/labs/doc/button/TemplateDoc.vue
 create mode 100644 apps/labs/doc/button/TextDoc.vue
 create mode 100644 apps/labs/doc/card/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/card/AdvancedDoc.vue
 create mode 100644 apps/labs/doc/card/BasicDoc.vue
 create mode 100644 apps/labs/doc/card/ImportDoc.vue
 create mode 100644 apps/labs/doc/carousel/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/carousel/BasicDoc.vue
 create mode 100644 apps/labs/doc/carousel/CircularDoc.vue
 create mode 100644 apps/labs/doc/carousel/ImportDoc.vue
 create mode 100644 apps/labs/doc/carousel/ResponsiveDoc.vue
 create mode 100644 apps/labs/doc/carousel/VerticalDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/BasicDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/ClearIconDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/DisabledDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/FilledDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/FormsDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/ImportDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/InvalidDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/LoadingStateDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/SizesDoc.vue
 create mode 100644 apps/labs/doc/cascadeselect/TemplateDoc.vue
 create mode 100644 apps/labs/doc/checkbox/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/checkbox/BasicDoc.vue
 create mode 100644 apps/labs/doc/checkbox/DisabledDoc.vue
 create mode 100644 apps/labs/doc/checkbox/DynamicDoc.vue
 create mode 100644 apps/labs/doc/checkbox/FilledDoc.vue
 create mode 100644 apps/labs/doc/checkbox/FormsDoc.vue
 create mode 100644 apps/labs/doc/checkbox/GroupDoc.vue
 create mode 100644 apps/labs/doc/checkbox/ImportDoc.vue
 create mode 100644 apps/labs/doc/checkbox/IndeterminateDoc.vue
 create mode 100644 apps/labs/doc/checkbox/InvalidDoc.vue
 create mode 100644 apps/labs/doc/checkbox/SizesDoc.vue
 create mode 100644 apps/labs/doc/chip/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/chip/BasicDoc.vue
 create mode 100644 apps/labs/doc/chip/IconDoc.vue
 create mode 100644 apps/labs/doc/chip/ImageDoc.vue
 create mode 100644 apps/labs/doc/chip/ImportDoc.vue
 create mode 100644 apps/labs/doc/chip/StyleDoc.vue
 create mode 100644 apps/labs/doc/chip/TemplateDoc.vue
 create mode 100644 apps/labs/doc/colorpicker/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/colorpicker/BasicDoc.vue
 create mode 100644 apps/labs/doc/colorpicker/DisabledDoc.vue
 create mode 100644 apps/labs/doc/colorpicker/FormatDoc.vue
 create mode 100644 apps/labs/doc/colorpicker/FormsDoc.vue
 create mode 100644 apps/labs/doc/colorpicker/ImportDoc.vue
 create mode 100644 apps/labs/doc/colorpicker/InlineDoc.vue
 create mode 100644 apps/labs/doc/common/presetdoc/index.json
 create mode 100644 apps/labs/doc/confirmdialog/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/confirmdialog/BasicDoc.vue
 create mode 100644 apps/labs/doc/confirmdialog/ConfirmationServiceDoc.vue
 create mode 100644 apps/labs/doc/confirmdialog/HeadlessDoc.vue
 create mode 100644 apps/labs/doc/confirmdialog/ImportDoc.vue
 create mode 100644 apps/labs/doc/confirmdialog/PositionDoc.vue
 create mode 100644 apps/labs/doc/confirmdialog/TemplateDoc.vue
 create mode 100644 apps/labs/doc/confirmpopup/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/confirmpopup/BasicDoc.vue
 create mode 100644 apps/labs/doc/confirmpopup/ConfirmationServiceDoc.vue
 create mode 100644 apps/labs/doc/confirmpopup/HeadlessDoc.vue
 create mode 100644 apps/labs/doc/confirmpopup/ImportDoc.vue
 create mode 100644 apps/labs/doc/confirmpopup/TemplateDoc.vue
 create mode 100644 apps/labs/doc/contextmenu/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/contextmenu/BasicDoc.vue
 create mode 100644 apps/labs/doc/contextmenu/CommandDoc.vue
 create mode 100644 apps/labs/doc/contextmenu/DataTableDoc.vue
 create mode 100644 apps/labs/doc/contextmenu/DocumentDoc.vue
 create mode 100644 apps/labs/doc/contextmenu/ImportDoc.vue
 create mode 100644 apps/labs/doc/contextmenu/RouterDoc.vue
 create mode 100644 apps/labs/doc/contextmenu/TemplateDoc.vue
 create mode 100644 apps/labs/doc/customicons/FontAwesomeDoc.vue
 create mode 100644 apps/labs/doc/customicons/ImageDoc.vue
 create mode 100644 apps/labs/doc/customicons/MaterialDoc.vue
 create mode 100644 apps/labs/doc/customicons/SVGDoc.vue
 create mode 100644 apps/labs/doc/customicons/VideoDoc.vue
 create mode 100644 apps/labs/doc/datatable/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/datatable/BasicDoc.vue
 create mode 100644 apps/labs/doc/datatable/ColumnGroupDoc.vue
 create mode 100644 apps/labs/doc/datatable/ColumnToggleDoc.vue
 create mode 100644 apps/labs/doc/datatable/ConditionalStyleDoc.vue
 create mode 100644 apps/labs/doc/datatable/ContextMenuDoc.vue
 create mode 100644 apps/labs/doc/datatable/DynamicColumnsDoc.vue
 create mode 100644 apps/labs/doc/datatable/ExportDoc.vue
 create mode 100644 apps/labs/doc/datatable/GridLinesDoc.vue
 create mode 100644 apps/labs/doc/datatable/ImportDoc.vue
 create mode 100644 apps/labs/doc/datatable/LazyLoadDoc.vue
 create mode 100644 apps/labs/doc/datatable/ReorderDoc.vue
 create mode 100644 apps/labs/doc/datatable/RowExpansionDoc.vue
 create mode 100644 apps/labs/doc/datatable/SizeDoc.vue
 create mode 100644 apps/labs/doc/datatable/StatefulDoc.vue
 create mode 100644 apps/labs/doc/datatable/StripedRowsDoc.vue
 create mode 100644 apps/labs/doc/datatable/TemplateDoc.vue
 create mode 100644 apps/labs/doc/datatable/colresize/ExpandModeDoc.vue
 create mode 100644 apps/labs/doc/datatable/colresize/FitModeDoc.vue
 create mode 100644 apps/labs/doc/datatable/edit/CellEditDoc.vue
 create mode 100644 apps/labs/doc/datatable/edit/RowEditDoc.vue
 create mode 100644 apps/labs/doc/datatable/filter/AdvancedFilterDoc.vue
 create mode 100644 apps/labs/doc/datatable/filter/BasicFilterDoc.vue
 create mode 100644 apps/labs/doc/datatable/pagination/PaginationBasicDoc.vue
 create mode 100644 apps/labs/doc/datatable/pagination/PaginationHeadlessDoc.vue
 create mode 100644 apps/labs/doc/datatable/pagination/PaginationTemplateDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowselection/RowSelectEventsDoc.vue
 create mode 100644 apps/labs/doc/datatable/rowselection/SingleRowSelectionDoc.vue
 create mode 100644 apps/labs/doc/datatable/samples/CustomersDoc.vue
 create mode 100644 apps/labs/doc/datatable/samples/ProductsDoc.vue
 create mode 100644 apps/labs/doc/datatable/scroll/FlexibleScrollDoc.vue
 create mode 100644 apps/labs/doc/datatable/scroll/FrozenColumnsDoc.vue
 create mode 100644 apps/labs/doc/datatable/scroll/FrozenRowsDoc.vue
 create mode 100644 apps/labs/doc/datatable/scroll/HorizontalScrollDoc.vue
 create mode 100644 apps/labs/doc/datatable/scroll/VerticalScrollDoc.vue
 create mode 100644 apps/labs/doc/datatable/sort/MultipleColumnsDoc.vue
 create mode 100644 apps/labs/doc/datatable/sort/PresortDoc.vue
 create mode 100644 apps/labs/doc/datatable/sort/RemovableSortDoc.vue
 create mode 100644 apps/labs/doc/datatable/sort/SingleColumnDoc.vue
 create mode 100644 apps/labs/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
 create mode 100644 apps/labs/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
 create mode 100644 apps/labs/doc/dataview/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/dataview/BasicDoc.vue
 create mode 100644 apps/labs/doc/dataview/ImportDoc.vue
 create mode 100644 apps/labs/doc/dataview/LayoutDoc.vue
 create mode 100644 apps/labs/doc/dataview/LoadingDoc.vue
 create mode 100644 apps/labs/doc/dataview/PaginationDoc.vue
 create mode 100644 apps/labs/doc/dataview/SortingDoc.vue
 create mode 100644 apps/labs/doc/datepicker/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/datepicker/BasicDoc.vue
 create mode 100644 apps/labs/doc/datepicker/ButtonBarDoc.vue
 create mode 100644 apps/labs/doc/datepicker/DateTemplateDoc.vue
 create mode 100644 apps/labs/doc/datepicker/DisabledDoc.vue
 create mode 100644 apps/labs/doc/datepicker/FilledDoc.vue
 create mode 100644 apps/labs/doc/datepicker/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/datepicker/FormatDoc.vue
 create mode 100644 apps/labs/doc/datepicker/FormsDoc.vue
 create mode 100644 apps/labs/doc/datepicker/IconDoc.vue
 create mode 100644 apps/labs/doc/datepicker/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/datepicker/ImportDoc.vue
 create mode 100644 apps/labs/doc/datepicker/InlineDoc.vue
 create mode 100644 apps/labs/doc/datepicker/InvalidDoc.vue
 create mode 100644 apps/labs/doc/datepicker/LocaleDoc.vue
 create mode 100644 apps/labs/doc/datepicker/MinMaxDoc.vue
 create mode 100644 apps/labs/doc/datepicker/MonthPickerDoc.vue
 create mode 100644 apps/labs/doc/datepicker/MultipleDoc.vue
 create mode 100644 apps/labs/doc/datepicker/MultipleMonthsDoc.vue
 create mode 100644 apps/labs/doc/datepicker/RangeDoc.vue
 create mode 100644 apps/labs/doc/datepicker/SizesDoc.vue
 create mode 100644 apps/labs/doc/datepicker/TimeDoc.vue
 create mode 100644 apps/labs/doc/datepicker/YearPickerDoc.vue
 create mode 100644 apps/labs/doc/deferredcontent/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/deferredcontent/BasicDoc.vue
 create mode 100644 apps/labs/doc/deferredcontent/DataTableDoc.vue
 create mode 100644 apps/labs/doc/deferredcontent/ImportDoc.vue
 create mode 100644 apps/labs/doc/dialog/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/dialog/BasicDoc.vue
 create mode 100644 apps/labs/doc/dialog/HeadlessDoc.vue
 create mode 100644 apps/labs/doc/dialog/ImportDoc.vue
 create mode 100644 apps/labs/doc/dialog/LongContentDoc.vue
 create mode 100644 apps/labs/doc/dialog/MaximizableDoc.vue
 create mode 100644 apps/labs/doc/dialog/PositionDoc.vue
 create mode 100644 apps/labs/doc/dialog/ResponsiveDoc.vue
 create mode 100644 apps/labs/doc/dialog/TemplateDoc.vue
 create mode 100644 apps/labs/doc/dialog/WithoutModalDoc.vue
 create mode 100644 apps/labs/doc/divider/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/divider/BasicDoc.vue
 create mode 100644 apps/labs/doc/divider/ContentDoc.vue
 create mode 100644 apps/labs/doc/divider/ImportDoc.vue
 create mode 100644 apps/labs/doc/divider/LoginDoc.vue
 create mode 100644 apps/labs/doc/divider/TypeDoc.vue
 create mode 100644 apps/labs/doc/divider/VerticalDoc.vue
 create mode 100644 apps/labs/doc/dock/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/dock/AdvancedDoc.vue
 create mode 100644 apps/labs/doc/dock/BasicDoc.vue
 create mode 100644 apps/labs/doc/dock/ImportDoc.vue
 create mode 100644 apps/labs/doc/drawer/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/drawer/BasicDoc.vue
 create mode 100644 apps/labs/doc/drawer/FullScreenDoc.vue
 create mode 100644 apps/labs/doc/drawer/HeadlessDoc.vue
 create mode 100644 apps/labs/doc/drawer/ImportDoc.vue
 create mode 100644 apps/labs/doc/drawer/PositionDoc.vue
 create mode 100644 apps/labs/doc/drawer/SizeDoc.vue
 create mode 100644 apps/labs/doc/drawer/TemplateDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/CloseDialogDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/CustomizationDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/DialogServiceDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/EventsDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/ExampleDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/ImportDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/OpenDialogDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/PassingDataDoc.vue
 create mode 100644 apps/labs/doc/dynamicdialog/demo/FooterDemo.vue
 create mode 100644 apps/labs/doc/dynamicdialog/demo/InfoDemo.vue
 create mode 100644 apps/labs/doc/dynamicdialog/demo/ProductListDemo.vue
 create mode 100644 apps/labs/doc/fieldset/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/fieldset/BasicDoc.vue
 create mode 100644 apps/labs/doc/fieldset/ImportDoc.vue
 create mode 100644 apps/labs/doc/fieldset/TemplateDoc.vue
 create mode 100644 apps/labs/doc/fieldset/ToggleableDoc.vue
 create mode 100644 apps/labs/doc/fileupload/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/fileupload/AdvancedDoc.vue
 create mode 100644 apps/labs/doc/fileupload/AutoDoc.vue
 create mode 100644 apps/labs/doc/fileupload/BasicDoc.vue
 create mode 100644 apps/labs/doc/fileupload/CustomUploadDoc.vue
 create mode 100644 apps/labs/doc/fileupload/ImportDoc.vue
 create mode 100644 apps/labs/doc/fileupload/TemplateDoc.vue
 create mode 100644 apps/labs/doc/floatlabel/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/floatlabel/BasicDoc.vue
 create mode 100644 apps/labs/doc/floatlabel/ImportDoc.vue
 create mode 100644 apps/labs/doc/floatlabel/InvalidDoc.vue
 create mode 100644 apps/labs/doc/floatlabel/VariantsDoc.vue
 create mode 100644 apps/labs/doc/fluid/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/fluid/BasicDoc.vue
 create mode 100644 apps/labs/doc/fluid/ImportDoc.vue
 create mode 100644 apps/labs/doc/galleria/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/galleria/AdvancedDoc.vue
 create mode 100644 apps/labs/doc/galleria/AutoPlayDoc.vue
 create mode 100644 apps/labs/doc/galleria/BasicDoc.vue
 create mode 100644 apps/labs/doc/galleria/CaptionDoc.vue
 create mode 100644 apps/labs/doc/galleria/ControlledDoc.vue
 create mode 100644 apps/labs/doc/galleria/ImportDoc.vue
 create mode 100644 apps/labs/doc/galleria/ResponsiveDoc.vue
 create mode 100644 apps/labs/doc/galleria/ThumbnailDoc.vue
 create mode 100644 apps/labs/doc/galleria/fullscreen/CustomContentDoc.vue
 create mode 100644 apps/labs/doc/galleria/fullscreen/WithThumbnailsDoc.vue
 create mode 100644 apps/labs/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
 create mode 100644 apps/labs/doc/galleria/indicator/ClickEventDoc.vue
 create mode 100644 apps/labs/doc/galleria/indicator/HoverEventDoc.vue
 create mode 100644 apps/labs/doc/galleria/indicator/PositionDoc.vue
 create mode 100644 apps/labs/doc/galleria/indicator/TemplateDoc.vue
 create mode 100644 apps/labs/doc/galleria/navigator/HoverDoc.vue
 create mode 100644 apps/labs/doc/galleria/navigator/IndicatorsDoc.vue
 create mode 100644 apps/labs/doc/galleria/navigator/ItemThumbnailsDoc.vue
 create mode 100644 apps/labs/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
 create mode 100644 apps/labs/doc/iconfield/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/iconfield/BasicDoc.vue
 create mode 100644 apps/labs/doc/iconfield/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/iconfield/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/iconfield/ImportDoc.vue
 create mode 100644 apps/labs/doc/iconfield/SizesDoc.vue
 create mode 100644 apps/labs/doc/iconfield/TemplateDoc.vue
 create mode 100644 apps/labs/doc/icons/BasicDoc.vue
 create mode 100644 apps/labs/doc/icons/ColorDoc.vue
 create mode 100644 apps/labs/doc/icons/ConstantsDoc.vue
 create mode 100644 apps/labs/doc/icons/DownloadDoc.vue
 create mode 100644 apps/labs/doc/icons/FigmaDoc.vue
 create mode 100644 apps/labs/doc/icons/ImportDoc.vue
 create mode 100644 apps/labs/doc/icons/ListDoc.vue
 create mode 100644 apps/labs/doc/icons/SizeDoc.vue
 create mode 100644 apps/labs/doc/icons/SpinDoc.vue
 create mode 100644 apps/labs/doc/iftalabel/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/iftalabel/BasicDoc.vue
 create mode 100644 apps/labs/doc/iftalabel/ImportDoc.vue
 create mode 100644 apps/labs/doc/iftalabel/InvalidDoc.vue
 create mode 100644 apps/labs/doc/image/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/image/BasicDoc.vue
 create mode 100644 apps/labs/doc/image/ImportDoc.vue
 create mode 100644 apps/labs/doc/image/PreviewDoc.vue
 create mode 100644 apps/labs/doc/image/TemplateDoc.vue
 create mode 100644 apps/labs/doc/imagecompare/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/imagecompare/BasicDoc.vue
 create mode 100644 apps/labs/doc/imagecompare/ImportDoc.vue
 create mode 100644 apps/labs/doc/imagecompare/ResponsiveDoc.vue
 create mode 100644 apps/labs/doc/inplace/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/inplace/BasicDoc.vue
 create mode 100644 apps/labs/doc/inplace/ImageDoc.vue
 create mode 100644 apps/labs/doc/inplace/ImportDoc.vue
 create mode 100644 apps/labs/doc/inplace/InputDoc.vue
 create mode 100644 apps/labs/doc/inplace/LazyDoc.vue
 create mode 100644 apps/labs/doc/inputgroup/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/inputgroup/BasicDoc.vue
 create mode 100644 apps/labs/doc/inputgroup/ButtonDoc.vue
 create mode 100644 apps/labs/doc/inputgroup/CheckboxDoc.vue
 create mode 100644 apps/labs/doc/inputgroup/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/inputgroup/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/inputgroup/ImportDoc.vue
 create mode 100644 apps/labs/doc/inputgroup/MultipleDoc.vue
 create mode 100644 apps/labs/doc/inputmask/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/inputmask/BasicDoc.vue
 create mode 100644 apps/labs/doc/inputmask/DisabledDoc.vue
 create mode 100644 apps/labs/doc/inputmask/FilledDoc.vue
 create mode 100644 apps/labs/doc/inputmask/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/inputmask/FormsDoc.vue
 create mode 100644 apps/labs/doc/inputmask/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/inputmask/ImportDoc.vue
 create mode 100644 apps/labs/doc/inputmask/InvalidDoc.vue
 create mode 100644 apps/labs/doc/inputmask/MaskDoc.vue
 create mode 100644 apps/labs/doc/inputmask/OptionalDoc.vue
 create mode 100644 apps/labs/doc/inputmask/SizesDoc.vue
 create mode 100644 apps/labs/doc/inputmask/SlotCharDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/ButtonsDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/CurrencyDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/DisabledDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/FilledDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/FormsDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/ImportDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/InvalidDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/LocaleDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/NumeralsDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/SizesDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/VerticalDoc.vue
 create mode 100644 apps/labs/doc/inputotp/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/inputotp/BasicDoc.vue
 create mode 100644 apps/labs/doc/inputotp/FilledDoc.vue
 create mode 100644 apps/labs/doc/inputotp/FormsDoc.vue
 create mode 100644 apps/labs/doc/inputotp/ImportDoc.vue
 create mode 100644 apps/labs/doc/inputotp/IntegerOnlyDoc.vue
 create mode 100644 apps/labs/doc/inputotp/MaskDoc.vue
 create mode 100644 apps/labs/doc/inputotp/SampleDoc.vue
 create mode 100644 apps/labs/doc/inputotp/SizesDoc.vue
 create mode 100644 apps/labs/doc/inputotp/TemplateDoc.vue
 create mode 100644 apps/labs/doc/inputtext/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/inputtext/BasicDoc.vue
 create mode 100644 apps/labs/doc/inputtext/DisabledDoc.vue
 create mode 100644 apps/labs/doc/inputtext/FilledDoc.vue
 create mode 100644 apps/labs/doc/inputtext/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/inputtext/FormsDoc.vue
 create mode 100644 apps/labs/doc/inputtext/HelpTextDoc.vue
 create mode 100644 apps/labs/doc/inputtext/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/inputtext/ImportDoc.vue
 create mode 100644 apps/labs/doc/inputtext/InvalidDoc.vue
 create mode 100644 apps/labs/doc/inputtext/SizesDoc.vue
 create mode 100644 apps/labs/doc/knob/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/knob/BasicDoc.vue
 create mode 100644 apps/labs/doc/knob/ColorDoc.vue
 create mode 100644 apps/labs/doc/knob/DisabledDoc.vue
 create mode 100644 apps/labs/doc/knob/FormsDoc.vue
 create mode 100644 apps/labs/doc/knob/ImportDoc.vue
 create mode 100644 apps/labs/doc/knob/MinMaxDoc.vue
 create mode 100644 apps/labs/doc/knob/ReactiveDoc.vue
 create mode 100644 apps/labs/doc/knob/ReadOnlyDoc.vue
 create mode 100644 apps/labs/doc/knob/SizeDoc.vue
 create mode 100644 apps/labs/doc/knob/StepDoc.vue
 create mode 100644 apps/labs/doc/knob/StrokeDoc.vue
 create mode 100644 apps/labs/doc/knob/TemplateDoc.vue
 create mode 100644 apps/labs/doc/listbox/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/listbox/BasicDoc.vue
 create mode 100644 apps/labs/doc/listbox/CheckmarkDoc.vue
 create mode 100644 apps/labs/doc/listbox/DisabledDoc.vue
 create mode 100644 apps/labs/doc/listbox/FilterDoc.vue
 create mode 100644 apps/labs/doc/listbox/FormsDoc.vue
 create mode 100644 apps/labs/doc/listbox/GroupDoc.vue
 create mode 100644 apps/labs/doc/listbox/ImportDoc.vue
 create mode 100644 apps/labs/doc/listbox/InvalidDoc.vue
 create mode 100644 apps/labs/doc/listbox/MultipleDoc.vue
 create mode 100644 apps/labs/doc/listbox/TemplateDoc.vue
 create mode 100644 apps/labs/doc/listbox/VirtualScrollDoc.vue
 create mode 100644 apps/labs/doc/megamenu/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/megamenu/BasicDoc.vue
 create mode 100644 apps/labs/doc/megamenu/CommandDoc.vue
 create mode 100644 apps/labs/doc/megamenu/ImportDoc.vue
 create mode 100644 apps/labs/doc/megamenu/RouterDoc.vue
 create mode 100644 apps/labs/doc/megamenu/TemplateDoc.vue
 create mode 100644 apps/labs/doc/megamenu/VerticalDoc.vue
 create mode 100644 apps/labs/doc/menu/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/menu/BasicDoc.vue
 create mode 100644 apps/labs/doc/menu/CommandDoc.vue
 create mode 100644 apps/labs/doc/menu/GroupDoc.vue
 create mode 100644 apps/labs/doc/menu/ImportDoc.vue
 create mode 100644 apps/labs/doc/menu/PopupDoc.vue
 create mode 100644 apps/labs/doc/menu/RouterDoc.vue
 create mode 100644 apps/labs/doc/menu/TemplateDoc.vue
 create mode 100644 apps/labs/doc/menubar/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/menubar/AdvancedDoc.vue
 create mode 100644 apps/labs/doc/menubar/BasicDoc.vue
 create mode 100644 apps/labs/doc/menubar/CommandDoc.vue
 create mode 100644 apps/labs/doc/menubar/ImportDoc.vue
 create mode 100644 apps/labs/doc/menubar/RouterDoc.vue
 create mode 100644 apps/labs/doc/menubar/TemplateDoc.vue
 create mode 100644 apps/labs/doc/message/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/message/BasicDoc.vue
 create mode 100644 apps/labs/doc/message/ClosableDoc.vue
 create mode 100644 apps/labs/doc/message/DynamicDoc.vue
 create mode 100644 apps/labs/doc/message/FormsDoc.vue
 create mode 100644 apps/labs/doc/message/IconDoc.vue
 create mode 100644 apps/labs/doc/message/ImportDoc.vue
 create mode 100644 apps/labs/doc/message/LifeDoc.vue
 create mode 100644 apps/labs/doc/message/OutlinedDoc.vue
 create mode 100644 apps/labs/doc/message/SeverityDoc.vue
 create mode 100644 apps/labs/doc/message/SimpleDoc.vue
 create mode 100644 apps/labs/doc/message/SizesDoc.vue
 create mode 100644 apps/labs/doc/metergroup/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/metergroup/BasicDoc.vue
 create mode 100644 apps/labs/doc/metergroup/IconDoc.vue
 create mode 100644 apps/labs/doc/metergroup/ImportDoc.vue
 create mode 100644 apps/labs/doc/metergroup/LabelDoc.vue
 create mode 100644 apps/labs/doc/metergroup/MinMaxDoc.vue
 create mode 100644 apps/labs/doc/metergroup/MultipleDoc.vue
 create mode 100644 apps/labs/doc/metergroup/TemplateDoc.vue
 create mode 100644 apps/labs/doc/metergroup/VerticalDoc.vue
 create mode 100644 apps/labs/doc/multiselect/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/multiselect/BasicDoc.vue
 create mode 100644 apps/labs/doc/multiselect/ChipsDoc.vue
 create mode 100644 apps/labs/doc/multiselect/ClearIconDoc.vue
 create mode 100644 apps/labs/doc/multiselect/DisabledDoc.vue
 create mode 100644 apps/labs/doc/multiselect/FilledDoc.vue
 create mode 100644 apps/labs/doc/multiselect/FilterDoc.vue
 create mode 100644 apps/labs/doc/multiselect/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/multiselect/FormsDoc.vue
 create mode 100644 apps/labs/doc/multiselect/GroupDoc.vue
 create mode 100644 apps/labs/doc/multiselect/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/multiselect/ImportDoc.vue
 create mode 100644 apps/labs/doc/multiselect/InvalidDoc.vue
 create mode 100644 apps/labs/doc/multiselect/LoadingStateDoc.vue
 create mode 100644 apps/labs/doc/multiselect/SizesDoc.vue
 create mode 100644 apps/labs/doc/multiselect/TemplateDoc.vue
 create mode 100644 apps/labs/doc/multiselect/VirtualScrollDoc.vue
 create mode 100644 apps/labs/doc/nuxt/CSSVariablesDoc.vue
 create mode 100644 apps/labs/doc/nuxt/DownloadDoc.vue
 create mode 100644 apps/labs/doc/nuxt/ExampleDoc.vue
 create mode 100644 apps/labs/doc/nuxt/NuxtConfigDoc.vue
 create mode 100644 apps/labs/doc/nuxt/StylesDoc.vue
 create mode 100644 apps/labs/doc/nuxt/TailwindDoc.vue
 create mode 100644 apps/labs/doc/nuxt/tailwind/ImportStylesDoc.vue
 create mode 100644 apps/labs/doc/nuxt/tailwind/PostCSSImportDoc.vue
 create mode 100644 apps/labs/doc/nuxt/tailwind/PrimeUIPluginDoc.vue
 create mode 100644 apps/labs/doc/orderlist/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/orderlist/BasicDoc.vue
 create mode 100644 apps/labs/doc/orderlist/ImportDoc.vue
 create mode 100644 apps/labs/doc/orderlist/TemplateDoc.vue
 create mode 100644 apps/labs/doc/organizationchart/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/organizationchart/BasicDoc.vue
 create mode 100644 apps/labs/doc/organizationchart/ColoredDoc.vue
 create mode 100644 apps/labs/doc/organizationchart/ImportDoc.vue
 create mode 100644 apps/labs/doc/organizationchart/SelectionDoc.vue
 create mode 100644 apps/labs/doc/organizationchart/TemplateDoc.vue
 create mode 100644 apps/labs/doc/overview/IdeaDoc.vue
 create mode 100644 apps/labs/doc/overview/PresetDoc.vue
 create mode 100644 apps/labs/doc/overview/passthrough/GlobalDoc.vue
 create mode 100644 apps/labs/doc/overview/passthrough/LocalDoc.vue
 create mode 100644 apps/labs/doc/overview/passthrough/OverrideDoc.vue
 create mode 100644 apps/labs/doc/overview/passthrough/ReuseDoc.vue
 create mode 100644 apps/labs/doc/paginator/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/paginator/BasicDoc.vue
 create mode 100644 apps/labs/doc/paginator/CurrentPageReportDoc.vue
 create mode 100644 apps/labs/doc/paginator/CustomContentDoc.vue
 create mode 100644 apps/labs/doc/paginator/HeadlessDoc.vue
 create mode 100644 apps/labs/doc/paginator/ImportDoc.vue
 create mode 100644 apps/labs/doc/paginator/ResponsiveDoc.vue
 create mode 100644 apps/labs/doc/paginator/TemplateDoc.vue
 create mode 100644 apps/labs/doc/panel/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/panel/BasicDoc.vue
 create mode 100644 apps/labs/doc/panel/ImportDoc.vue
 create mode 100644 apps/labs/doc/panel/TemplateDoc.vue
 create mode 100644 apps/labs/doc/panel/ToggleableDoc.vue
 create mode 100644 apps/labs/doc/panelmenu/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/panelmenu/BasicDoc.vue
 create mode 100644 apps/labs/doc/panelmenu/CommandDoc.vue
 create mode 100644 apps/labs/doc/panelmenu/ControlledDoc.vue
 create mode 100644 apps/labs/doc/panelmenu/ImportDoc.vue
 create mode 100644 apps/labs/doc/panelmenu/MultipleDoc.vue
 create mode 100644 apps/labs/doc/panelmenu/RouterDoc.vue
 create mode 100644 apps/labs/doc/panelmenu/TemplateDoc.vue
 create mode 100644 apps/labs/doc/password/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/password/BasicDoc.vue
 create mode 100644 apps/labs/doc/password/DisabledDoc.vue
 create mode 100644 apps/labs/doc/password/FilledDoc.vue
 create mode 100644 apps/labs/doc/password/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/password/FormsDoc.vue
 create mode 100644 apps/labs/doc/password/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/password/ImportDoc.vue
 create mode 100644 apps/labs/doc/password/InvalidDoc.vue
 create mode 100644 apps/labs/doc/password/LocaleDoc.vue
 create mode 100644 apps/labs/doc/password/MeterDoc.vue
 create mode 100644 apps/labs/doc/password/SizesDoc.vue
 create mode 100644 apps/labs/doc/password/TemplateDoc.vue
 create mode 100644 apps/labs/doc/password/ToggleMaskDoc.vue
 create mode 100644 apps/labs/doc/picklist/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/picklist/BasicDoc.vue
 create mode 100644 apps/labs/doc/picklist/ImportDoc.vue
 create mode 100644 apps/labs/doc/picklist/TemplateDoc.vue
 create mode 100644 apps/labs/doc/popover/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/popover/BasicDoc.vue
 create mode 100644 apps/labs/doc/popover/DataTableDoc.vue
 create mode 100644 apps/labs/doc/popover/ImportDoc.vue
 create mode 100644 apps/labs/doc/popover/SelectDataDoc.vue
 create mode 100644 apps/labs/doc/progressbar/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/progressbar/BasicDoc.vue
 create mode 100644 apps/labs/doc/progressbar/DynamicDoc.vue
 create mode 100644 apps/labs/doc/progressbar/ImportDoc.vue
 create mode 100644 apps/labs/doc/progressbar/IndeterminateDoc.vue
 create mode 100644 apps/labs/doc/progressbar/TemplateDoc.vue
 create mode 100644 apps/labs/doc/progressspinner/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/progressspinner/BasicDoc.vue
 create mode 100644 apps/labs/doc/progressspinner/CustomDoc.vue
 create mode 100644 apps/labs/doc/progressspinner/ImportDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/DisabledDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/DynamicDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/FilledDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/FormsDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/GroupDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/ImportDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/InvalidDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/SizesDoc.vue
 create mode 100644 apps/labs/doc/rating/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/rating/BasicDoc.vue
 create mode 100644 apps/labs/doc/rating/DisabledDoc.vue
 create mode 100644 apps/labs/doc/rating/FormsDoc.vue
 create mode 100644 apps/labs/doc/rating/ImportDoc.vue
 create mode 100644 apps/labs/doc/rating/NumberOfStarsDoc.vue
 create mode 100644 apps/labs/doc/rating/ReadOnlyDoc.vue
 create mode 100644 apps/labs/doc/rating/TemplateDoc.vue
 create mode 100644 apps/labs/doc/ripple/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/ripple/ConfigurationDoc.vue
 create mode 100644 apps/labs/doc/ripple/CustomDoc.vue
 create mode 100644 apps/labs/doc/ripple/DefaultDoc.vue
 create mode 100644 apps/labs/doc/ripple/ImportDoc.vue
 create mode 100644 apps/labs/doc/scrollpanel/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/scrollpanel/BasicDoc.vue
 create mode 100644 apps/labs/doc/scrollpanel/CustomDoc.vue
 create mode 100644 apps/labs/doc/scrollpanel/ImportDoc.vue
 create mode 100644 apps/labs/doc/scrolltop/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/scrolltop/BasicDoc.vue
 create mode 100644 apps/labs/doc/scrolltop/ElementDoc.vue
 create mode 100644 apps/labs/doc/scrolltop/ImportDoc.vue
 create mode 100644 apps/labs/doc/select/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/select/BasicDoc.vue
 create mode 100644 apps/labs/doc/select/CheckmarkDoc.vue
 create mode 100644 apps/labs/doc/select/ClearIconDoc.vue
 create mode 100644 apps/labs/doc/select/DisabledDoc.vue
 create mode 100644 apps/labs/doc/select/EditableDoc.vue
 create mode 100644 apps/labs/doc/select/FilledDoc.vue
 create mode 100644 apps/labs/doc/select/FilterDoc.vue
 create mode 100644 apps/labs/doc/select/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/select/FormsDoc.vue
 create mode 100644 apps/labs/doc/select/GroupDoc.vue
 create mode 100644 apps/labs/doc/select/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/select/ImportDoc.vue
 create mode 100644 apps/labs/doc/select/InvalidDoc.vue
 create mode 100644 apps/labs/doc/select/LazyVirtualScrollDoc.vue
 create mode 100644 apps/labs/doc/select/LoadingStateDoc.vue
 create mode 100644 apps/labs/doc/select/SizesDoc.vue
 create mode 100644 apps/labs/doc/select/TemplateDoc.vue
 create mode 100644 apps/labs/doc/select/VirtualScrollDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/BasicDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/DisabledDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/FormsDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/ImportDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/InvalidDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/MultipleDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/SizesDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/TemplateDoc.vue
 create mode 100644 apps/labs/doc/skeleton/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/skeleton/CardDoc.vue
 create mode 100644 apps/labs/doc/skeleton/DataTableDoc.vue
 create mode 100644 apps/labs/doc/skeleton/ImportDoc.vue
 create mode 100644 apps/labs/doc/skeleton/ListDoc.vue
 create mode 100644 apps/labs/doc/skeleton/ShapesDoc.vue
 create mode 100644 apps/labs/doc/slider/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/slider/BasicDoc.vue
 create mode 100644 apps/labs/doc/slider/FilterDoc.vue
 create mode 100644 apps/labs/doc/slider/FormsDoc.vue
 create mode 100644 apps/labs/doc/slider/ImportDoc.vue
 create mode 100644 apps/labs/doc/slider/InputDoc.vue
 create mode 100644 apps/labs/doc/slider/RangeDoc.vue
 create mode 100644 apps/labs/doc/slider/StepDoc.vue
 create mode 100644 apps/labs/doc/slider/VerticalDoc.vue
 create mode 100644 apps/labs/doc/speeddial/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/speeddial/CircleDoc.vue
 create mode 100644 apps/labs/doc/speeddial/ImportDoc.vue
 create mode 100644 apps/labs/doc/speeddial/LinearDoc.vue
 create mode 100644 apps/labs/doc/speeddial/MaskDoc.vue
 create mode 100644 apps/labs/doc/speeddial/QuarterCircleDoc.vue
 create mode 100644 apps/labs/doc/speeddial/SemiCircleDoc.vue
 create mode 100644 apps/labs/doc/speeddial/TemplateDoc.vue
 create mode 100644 apps/labs/doc/speeddial/TooltipDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/BasicDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/DisabledDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/IconsDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/ImportDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/NestedDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/OutlinedDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/RaisedDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/RaisedTextDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/RoundedDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/SeverityDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/SizesDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/TemplateDoc.vue
 create mode 100644 apps/labs/doc/splitbutton/TextDoc.vue
 create mode 100644 apps/labs/doc/splitter/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/splitter/HorizontalDoc.vue
 create mode 100644 apps/labs/doc/splitter/ImportDoc.vue
 create mode 100644 apps/labs/doc/splitter/NestedDoc.vue
 create mode 100644 apps/labs/doc/splitter/SizeDoc.vue
 create mode 100644 apps/labs/doc/splitter/VerticalDoc.vue
 create mode 100644 apps/labs/doc/stepper/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/stepper/HorizontalDoc.vue
 create mode 100644 apps/labs/doc/stepper/ImportDoc.vue
 create mode 100644 apps/labs/doc/stepper/LinearDoc.vue
 create mode 100644 apps/labs/doc/stepper/StepsOnlyDoc.vue
 create mode 100644 apps/labs/doc/stepper/TemplateDoc.vue
 create mode 100644 apps/labs/doc/stepper/VerticalDoc.vue
 create mode 100644 apps/labs/doc/tabs/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/tabs/BasicDoc.vue
 create mode 100644 apps/labs/doc/tabs/ControlledDoc.vue
 create mode 100644 apps/labs/doc/tabs/DisabledDoc.vue
 create mode 100644 apps/labs/doc/tabs/DynamicDoc.vue
 create mode 100644 apps/labs/doc/tabs/ImportDoc.vue
 create mode 100644 apps/labs/doc/tabs/ScrollableDoc.vue
 create mode 100644 apps/labs/doc/tabs/TabMenuDoc.vue
 create mode 100644 apps/labs/doc/tabs/TemplateDoc.vue
 create mode 100644 apps/labs/doc/tag/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/tag/BasicDoc.vue
 create mode 100644 apps/labs/doc/tag/IconDoc.vue
 create mode 100644 apps/labs/doc/tag/ImportDoc.vue
 create mode 100644 apps/labs/doc/tag/PillDoc.vue
 create mode 100644 apps/labs/doc/tag/SeverityDoc.vue
 create mode 100644 apps/labs/doc/tag/TemplateDoc.vue
 create mode 100644 apps/labs/doc/terminal/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/terminal/BasicDoc.vue
 create mode 100644 apps/labs/doc/terminal/ImportDoc.vue
 create mode 100644 apps/labs/doc/textarea/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/textarea/AutoResizeDoc.vue
 create mode 100644 apps/labs/doc/textarea/BasicDoc.vue
 create mode 100644 apps/labs/doc/textarea/DisabledDoc.vue
 create mode 100644 apps/labs/doc/textarea/FilledDoc.vue
 create mode 100644 apps/labs/doc/textarea/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/textarea/FormsDoc.vue
 create mode 100644 apps/labs/doc/textarea/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/textarea/ImportDoc.vue
 create mode 100644 apps/labs/doc/textarea/InvalidDoc.vue
 create mode 100644 apps/labs/doc/textarea/SizesDoc.vue
 create mode 100644 apps/labs/doc/tieredmenu/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/tieredmenu/BasicDoc.vue
 create mode 100644 apps/labs/doc/tieredmenu/CommandDoc.vue
 create mode 100644 apps/labs/doc/tieredmenu/ImportDoc.vue
 create mode 100644 apps/labs/doc/tieredmenu/PopupDoc.vue
 create mode 100644 apps/labs/doc/tieredmenu/RouterDoc.vue
 create mode 100644 apps/labs/doc/tieredmenu/TemplateDoc.vue
 create mode 100644 apps/labs/doc/timeline/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/timeline/AlignmentDoc.vue
 create mode 100644 apps/labs/doc/timeline/BasicDoc.vue
 create mode 100644 apps/labs/doc/timeline/HorizontalDoc.vue
 create mode 100644 apps/labs/doc/timeline/ImportDoc.vue
 create mode 100644 apps/labs/doc/timeline/OppositeDoc.vue
 create mode 100644 apps/labs/doc/timeline/TemplateDoc.vue
 create mode 100644 apps/labs/doc/toast/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/toast/BasicDoc.vue
 create mode 100644 apps/labs/doc/toast/HeadlessDoc.vue
 create mode 100644 apps/labs/doc/toast/ImportDoc.vue
 create mode 100644 apps/labs/doc/toast/MultipleDoc.vue
 create mode 100644 apps/labs/doc/toast/PositionDoc.vue
 create mode 100644 apps/labs/doc/toast/SeverityDoc.vue
 create mode 100644 apps/labs/doc/toast/StickyDoc.vue
 create mode 100644 apps/labs/doc/toast/TemplateDoc.vue
 create mode 100644 apps/labs/doc/toast/ToastServiceDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/BasicDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/CustomizedDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/DisabledDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/FormsDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/ImportDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/InvalidDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/SizesDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/BasicDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/DisabledDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/FormsDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/ImportDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/InvalidDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/PreselectionDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/TemplateDoc.vue
 create mode 100644 apps/labs/doc/toolbar/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/toolbar/BasicDoc.vue
 create mode 100644 apps/labs/doc/toolbar/CustomDoc.vue
 create mode 100644 apps/labs/doc/toolbar/ImportDoc.vue
 create mode 100644 apps/labs/doc/tooltip/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/tooltip/AutoHideDoc.vue
 create mode 100644 apps/labs/doc/tooltip/CustomDoc.vue
 create mode 100644 apps/labs/doc/tooltip/DelayDoc.vue
 create mode 100644 apps/labs/doc/tooltip/EventDoc.vue
 create mode 100644 apps/labs/doc/tooltip/ImportDoc.vue
 create mode 100644 apps/labs/doc/tooltip/PositionDoc.vue
 create mode 100644 apps/labs/doc/tree/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/tree/BasicDoc.vue
 create mode 100644 apps/labs/doc/tree/ControlledDoc.vue
 create mode 100644 apps/labs/doc/tree/EventsDoc.vue
 create mode 100644 apps/labs/doc/tree/FilterDoc.vue
 create mode 100644 apps/labs/doc/tree/ImportDoc.vue
 create mode 100644 apps/labs/doc/tree/LazyDoc.vue
 create mode 100644 apps/labs/doc/tree/TemplateDoc.vue
 create mode 100644 apps/labs/doc/tree/selection/CheckboxDoc.vue
 create mode 100644 apps/labs/doc/tree/selection/MultipleDoc.vue
 create mode 100644 apps/labs/doc/tree/selection/SingleDoc.vue
 create mode 100644 apps/labs/doc/treeselect/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/treeselect/BasicDoc.vue
 create mode 100644 apps/labs/doc/treeselect/CheckboxDoc.vue
 create mode 100644 apps/labs/doc/treeselect/ClearIconDoc.vue
 create mode 100644 apps/labs/doc/treeselect/DisabledDoc.vue
 create mode 100644 apps/labs/doc/treeselect/FilledDoc.vue
 create mode 100644 apps/labs/doc/treeselect/FilterDoc.vue
 create mode 100644 apps/labs/doc/treeselect/FloatLabelDoc.vue
 create mode 100644 apps/labs/doc/treeselect/FormsDoc.vue
 create mode 100644 apps/labs/doc/treeselect/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/treeselect/ImportDoc.vue
 create mode 100644 apps/labs/doc/treeselect/InvalidDoc.vue
 create mode 100644 apps/labs/doc/treeselect/LazyDoc.vue
 create mode 100644 apps/labs/doc/treeselect/MultipleDoc.vue
 create mode 100644 apps/labs/doc/treeselect/SizesDoc.vue
 create mode 100644 apps/labs/doc/treeselect/TemplateDoc.vue
 create mode 100644 apps/labs/doc/treetable/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/treetable/BasicDoc.vue
 create mode 100644 apps/labs/doc/treetable/ColumnToggleDoc.vue
 create mode 100644 apps/labs/doc/treetable/ContextMenuDoc.vue
 create mode 100644 apps/labs/doc/treetable/ControlledDoc.vue
 create mode 100644 apps/labs/doc/treetable/DynamicColumnsDoc.vue
 create mode 100644 apps/labs/doc/treetable/FilterDoc.vue
 create mode 100644 apps/labs/doc/treetable/ImportDoc.vue
 create mode 100644 apps/labs/doc/treetable/LazyLoadDoc.vue
 create mode 100644 apps/labs/doc/treetable/SizeDoc.vue
 create mode 100644 apps/labs/doc/treetable/TemplateDoc.vue
 create mode 100644 apps/labs/doc/treetable/pagination/PaginationBasicDoc.vue
 create mode 100644 apps/labs/doc/treetable/pagination/PaginationHeadlessDoc.vue
 create mode 100644 apps/labs/doc/treetable/pagination/PaginationTemplateDoc.vue
 create mode 100644 apps/labs/doc/treetable/resize/ExpandModeDoc.vue
 create mode 100644 apps/labs/doc/treetable/resize/FitModeDoc.vue
 create mode 100644 apps/labs/doc/treetable/scroll/FlexibleScrollDoc.vue
 create mode 100644 apps/labs/doc/treetable/scroll/FrozenColumnsDoc.vue
 create mode 100644 apps/labs/doc/treetable/scroll/HorizontalScrollDoc.vue
 create mode 100644 apps/labs/doc/treetable/scroll/VerticalScrollDoc.vue
 create mode 100644 apps/labs/doc/treetable/selection/CheckboxRowSelectionDoc.vue
 create mode 100644 apps/labs/doc/treetable/selection/MultipleRowsSelectionDoc.vue
 create mode 100644 apps/labs/doc/treetable/selection/RowSelectionEventsDoc.vue
 create mode 100644 apps/labs/doc/treetable/selection/SingleRowSelectionDoc.vue
 create mode 100644 apps/labs/doc/treetable/sort/MultipleColumnsDoc.vue
 create mode 100644 apps/labs/doc/treetable/sort/RemovableSortDoc.vue
 create mode 100644 apps/labs/doc/treetable/sort/SingleColumnDoc.vue
 create mode 100644 apps/labs/doc/virtualscroller/AccessibilityDoc.vue
 create mode 100644 apps/labs/doc/virtualscroller/BasicDoc.vue
 create mode 100644 apps/labs/doc/virtualscroller/DelayDoc.vue
 create mode 100644 apps/labs/doc/virtualscroller/GridDoc.vue
 create mode 100644 apps/labs/doc/virtualscroller/HorizontalDoc.vue
 create mode 100644 apps/labs/doc/virtualscroller/ImportDoc.vue
 create mode 100644 apps/labs/doc/virtualscroller/LazyDoc.vue
 create mode 100644 apps/labs/doc/virtualscroller/LoadingDoc.vue
 create mode 100644 apps/labs/doc/vite/CSSVariablesDoc.vue
 create mode 100644 apps/labs/doc/vite/DownloadDoc.vue
 create mode 100644 apps/labs/doc/vite/ExampleDoc.vue
 create mode 100644 apps/labs/doc/vite/PluginDoc.vue
 create mode 100644 apps/labs/doc/vite/StylesDoc.vue
 create mode 100644 apps/labs/doc/vite/TailwindDoc.vue
 create mode 100644 apps/labs/doc/vite/tailwind/ImportStylesDoc.vue
 create mode 100644 apps/labs/doc/vite/tailwind/PostCSSImportDoc.vue
 create mode 100644 apps/labs/doc/vite/tailwind/PrimeUIPluginDoc.vue
 create mode 100644 apps/labs/error.vue
 create mode 100644 apps/labs/layouts/AppEventBus.js
 create mode 100644 apps/labs/layouts/custom.vue
 create mode 100644 apps/labs/layouts/default.vue
 create mode 100644 apps/labs/middleware/route.global.js
 create mode 100644 apps/labs/nuxt.config.js
 delete mode 100644 apps/labs/nuxt.config.ts
 create mode 100755 apps/labs/pages/accordion/index.vue
 create mode 100755 apps/labs/pages/autocomplete/index.vue
 create mode 100755 apps/labs/pages/avatar/index.vue
 create mode 100755 apps/labs/pages/badge/index.vue
 create mode 100644 apps/labs/pages/blockui/index.vue
 create mode 100755 apps/labs/pages/breadcrumb/index.vue
 create mode 100755 apps/labs/pages/button/index.vue
 create mode 100755 apps/labs/pages/card/index.vue
 create mode 100755 apps/labs/pages/carousel/index.vue
 create mode 100755 apps/labs/pages/cascadeselect/index.vue
 create mode 100755 apps/labs/pages/checkbox/index.vue
 create mode 100755 apps/labs/pages/chip/index.vue
 create mode 100755 apps/labs/pages/colorpicker/index.vue
 create mode 100755 apps/labs/pages/confirmdialog/index.vue
 create mode 100755 apps/labs/pages/confirmpopup/index.vue
 create mode 100755 apps/labs/pages/contextmenu/index.vue
 create mode 100644 apps/labs/pages/customicons/index.vue
 create mode 100755 apps/labs/pages/datatable/index.vue
 create mode 100755 apps/labs/pages/dataview/index.vue
 create mode 100755 apps/labs/pages/datepicker/index.vue
 create mode 100644 apps/labs/pages/deferredcontent/index.vue
 create mode 100755 apps/labs/pages/dialog/index.vue
 create mode 100755 apps/labs/pages/divider/index.vue
 create mode 100755 apps/labs/pages/dock/index.vue
 create mode 100755 apps/labs/pages/drawer/index.vue
 create mode 100755 apps/labs/pages/dynamicdialog/index.vue
 create mode 100755 apps/labs/pages/fieldset/index.vue
 create mode 100644 apps/labs/pages/fileupload/index.vue
 create mode 100644 apps/labs/pages/floatlabel/index.vue
 create mode 100644 apps/labs/pages/fluid/index.vue
 create mode 100755 apps/labs/pages/galleria/index.vue
 create mode 100644 apps/labs/pages/iconfield/index.vue
 create mode 100755 apps/labs/pages/icons/index.vue
 create mode 100644 apps/labs/pages/iftalabel/index.vue
 create mode 100755 apps/labs/pages/image/index.vue
 create mode 100644 apps/labs/pages/imagecompare/index.vue
 create mode 100644 apps/labs/pages/index.vue
 create mode 100644 apps/labs/pages/inplace/index.vue
 create mode 100755 apps/labs/pages/inputgroup/index.vue
 create mode 100755 apps/labs/pages/inputmask/index.vue
 create mode 100755 apps/labs/pages/inputnumber/index.vue
 create mode 100644 apps/labs/pages/inputotp/index.vue
 create mode 100755 apps/labs/pages/inputtext/index.vue
 create mode 100755 apps/labs/pages/knob/index.vue
 create mode 100755 apps/labs/pages/listbox/index.vue
 create mode 100755 apps/labs/pages/megamenu/index.vue
 create mode 100755 apps/labs/pages/menu/index.vue
 create mode 100755 apps/labs/pages/menubar/index.vue
 create mode 100755 apps/labs/pages/message/index.vue
 create mode 100644 apps/labs/pages/metergroup/index.vue
 create mode 100755 apps/labs/pages/multiselect/index.vue
 create mode 100644 apps/labs/pages/nuxt/index.vue
 create mode 100755 apps/labs/pages/orderlist/index.vue
 create mode 100755 apps/labs/pages/organizationchart/index.vue
 create mode 100755 apps/labs/pages/paginator/index.vue
 create mode 100755 apps/labs/pages/panel/index.vue
 create mode 100755 apps/labs/pages/panelmenu/index.vue
 create mode 100755 apps/labs/pages/password/index.vue
 create mode 100755 apps/labs/pages/picklist/index.vue
 create mode 100755 apps/labs/pages/popover/index.vue
 create mode 100755 apps/labs/pages/progressbar/index.vue
 create mode 100644 apps/labs/pages/progressspinner/index.vue
 create mode 100755 apps/labs/pages/radiobutton/index.vue
 create mode 100755 apps/labs/pages/rating/index.vue
 create mode 100755 apps/labs/pages/ripple/index.vue
 create mode 100644 apps/labs/pages/scrollpanel/index.vue
 create mode 100644 apps/labs/pages/scrolltop/index.vue
 create mode 100755 apps/labs/pages/select/index.vue
 create mode 100755 apps/labs/pages/selectbutton/index.vue
 create mode 100644 apps/labs/pages/skeleton/index.vue
 create mode 100755 apps/labs/pages/slider/index.vue
 create mode 100644 apps/labs/pages/speeddial/index.vue
 create mode 100755 apps/labs/pages/splitbutton/index.vue
 create mode 100644 apps/labs/pages/splitter/index.vue
 create mode 100644 apps/labs/pages/stepper/index.vue
 create mode 100755 apps/labs/pages/tabs/index.vue
 create mode 100755 apps/labs/pages/tag/index.vue
 create mode 100755 apps/labs/pages/terminal/index.vue
 create mode 100755 apps/labs/pages/textarea/index.vue
 create mode 100755 apps/labs/pages/tieredmenu/index.vue
 create mode 100644 apps/labs/pages/timeline/index.vue
 create mode 100755 apps/labs/pages/toast/index.vue
 create mode 100755 apps/labs/pages/togglebutton/index.vue
 create mode 100755 apps/labs/pages/toggleswitch/index.vue
 create mode 100755 apps/labs/pages/toolbar/index.vue
 create mode 100755 apps/labs/pages/tooltip/index.vue
 create mode 100755 apps/labs/pages/tree/index.vue
 create mode 100755 apps/labs/pages/treeselect/index.vue
 create mode 100755 apps/labs/pages/treetable/index.vue
 create mode 100644 apps/labs/pages/virtualscroller/index.vue
 create mode 100644 apps/labs/pages/vite/index.vue
 create mode 100644 apps/labs/plugins/app.js
 create mode 100644 apps/labs/public/demo/data/icons.json
 delete mode 100644 apps/labs/public/robots.txt
 create mode 100644 apps/labs/public/scripts/prism.js
 create mode 100644 apps/labs/scripts/build-presetdoc.js
 create mode 100644 apps/labs/scripts/prebuild.js
 delete mode 100644 apps/labs/server/tsconfig.json
 create mode 100644 apps/labs/service/CarService.js
 create mode 100755 apps/labs/service/CountryService.js
 create mode 100755 apps/labs/service/CustomerService.js
 create mode 100755 apps/labs/service/EventService.js
 create mode 100644 apps/labs/service/IconService.js
 create mode 100755 apps/labs/service/NodeService.js
 create mode 100755 apps/labs/service/PhotoService.js
 create mode 100644 apps/labs/service/ProductService.js
 create mode 100644 apps/labs/tailwind.config.js

diff --git a/apps/labs/README.md b/apps/labs/README.md
index 25b58212c..21b499c04 100644
--- a/apps/labs/README.md
+++ b/apps/labs/README.md
@@ -1,75 +1 @@
-# Nuxt Minimal Starter
-
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+# Labs
diff --git a/apps/labs/app.vue b/apps/labs/app.vue
index 09f935bbb..a43a8a86d 100644
--- a/apps/labs/app.vue
+++ b/apps/labs/app.vue
@@ -1,6 +1,35 @@
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
 </template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+
+export default {
+    mounted() {
+        EventBus.on('dark-mode-toggle', this.darkModeToggleListener);
+    },
+    beforeUnmount() {
+        EventBus.off('dark-mode-toggle', this.darkModeToggleListener);
+    },
+    methods: {
+        darkModeToggleListener(event) {
+            if (!document.startViewTransition) {
+                this.toggleDarkMode(event);
+
+                return;
+            }
+
+            document.startViewTransition(() => this.toggleDarkMode(event));
+        },
+        toggleDarkMode() {
+            document.documentElement.classList.toggle('p-dark');
+            this.$appState.darkTheme = !this.$appState.darkTheme;
+
+            EventBus.emit('dark-mode-toggle-complete');
+        }
+    }
+};
+</script>
diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
new file mode 100644
index 000000000..e593630f1
--- /dev/null
+++ b/apps/labs/assets/data/menu.json
@@ -0,0 +1,492 @@
+{
+    "data": [
+        {
+            "name": "Getting Started",
+            "icon": "pi pi-home",
+            "children": [
+                {
+                    "name": "Vite",
+                    "to": "/vite"
+                },
+                {
+                    "name": "Nuxt",
+                    "to": "/nuxt"
+                }
+            ]
+        },
+        {
+            "name": "Components",
+            "icon": "pi pi-compass",
+            "children": [
+                {
+                    "name": "Form",
+                    "children": [
+                        {
+                            "name": "AutoComplete",
+                            "to": "/autocomplete"
+                        },
+                        {
+                            "name": "CascadeSelect",
+                            "to": "/cascadeselect"
+                        },
+                        {
+                            "name": "Checkbox",
+                            "to": "/checkbox"
+                        },
+                        {
+                            "name": "ColorPicker",
+                            "to": "/colorpicker"
+                        },
+                        {
+                            "name": "DatePicker",
+                            "to": "/datepicker"
+                        },
+                        {
+                            "name": "FloatLabel",
+                            "to": "/floatlabel"
+                        },
+                        {
+                            "name": "IconField",
+                            "to": "/iconfield"
+                        },
+                        {
+                            "name": "IftaLabel",
+                            "to": "/iftalabel"
+                        },
+                        {
+                            "name": "InputGroup",
+                            "to": "/inputgroup"
+                        },
+                        {
+                            "name": "InputMask",
+                            "to": "/inputmask"
+                        },
+                        {
+                            "name": "InputNumber",
+                            "to": "/inputnumber"
+                        },
+                        {
+                            "name": "InputOtp",
+                            "to": "/inputotp"
+                        },
+                        {
+                            "name": "InputText",
+                            "to": "/inputtext"
+                        },
+                        {
+                            "name": "Knob",
+                            "to": "/knob"
+                        },
+                        {
+                            "name": "Listbox",
+                            "to": "/listbox"
+                        },
+                        {
+                            "name": "MultiSelect",
+                            "to": "/multiselect"
+                        },
+                        {
+                            "name": "Password",
+                            "to": "/password"
+                        },
+                        {
+                            "name": "RadioButton",
+                            "to": "/radiobutton"
+                        },
+                        {
+                            "name": "Rating",
+                            "to": "/rating"
+                        },
+                        {
+                            "name": "Select",
+                            "to": "/select"
+                        },
+                        {
+                            "name": "SelectButton",
+                            "to": "/selectbutton"
+                        },
+                        {
+                            "name": "Slider",
+                            "to": "/slider"
+                        },
+                        {
+                            "name": "Textarea",
+                            "to": "/textarea"
+                        },
+                        {
+                            "name": "ToggleButton",
+                            "to": "/togglebutton"
+                        },
+                        {
+                            "name": "ToggleSwitch",
+                            "to": "/toggleswitch"
+                        },
+                        {
+                            "name": "TreeSelect",
+                            "to": "/treeselect"
+                        }
+                    ]
+                },
+                {
+                    "name": "Button",
+                    "children": [
+                        {
+                            "name": "Button",
+                            "to": "/button"
+                        },
+                        {
+                            "name": "Speed Dial",
+                            "to": "/speeddial"
+                        },
+                        {
+                            "name": "SplitButton",
+                            "to": "/splitbutton"
+                        }
+                    ]
+                },
+                {
+                    "name": "Data",
+                    "children": [
+                        {
+                            "name": "DataTable",
+                            "to": "/datatable"
+                        },
+                        {
+                            "name": "DataView",
+                            "to": "/dataview"
+                        },
+                        {
+                            "name": "OrderList",
+                            "to": "/orderlist"
+                        },
+                        {
+                            "name": "Org Chart",
+                            "to": "/organizationchart"
+                        },
+                        {
+                            "name": "Paginator",
+                            "to": "/paginator"
+                        },
+                        {
+                            "name": "PickList",
+                            "to": "/picklist"
+                        },
+                        {
+                            "name": "Timeline",
+                            "to": "/timeline"
+                        },
+                        {
+                            "name": "Tree",
+                            "to": "/tree"
+                        },
+                        {
+                            "name": "TreeTable",
+                            "to": "/treetable"
+                        },
+                        {
+                            "name": "VirtualScroller",
+                            "to": "/virtualscroller"
+                        }
+                    ]
+                },
+                {
+                    "name": "Panel",
+                    "children": [
+                        {
+                            "name": "Accordion",
+                            "to": "/accordion"
+                        },
+                        {
+                            "name": "Card",
+                            "to": "/card"
+                        },
+                        {
+                            "name": "Deferred",
+                            "to": "/deferredcontent"
+                        },
+                        {
+                            "name": "Divider",
+                            "to": "/divider"
+                        },
+                        {
+                            "name": "Fieldset",
+                            "to": "/fieldset"
+                        },
+                        {
+                            "name": "Panel",
+                            "to": "/panel"
+                        },
+                        {
+                            "name": "ScrollPanel",
+                            "to": "/scrollpanel"
+                        },
+                        {
+                            "name": "Splitter",
+                            "to": "/splitter"
+                        },
+                        {
+                            "name": "Stepper",
+                            "to": "/stepper"
+                        },
+                        {
+                            "name": "Tabs",
+                            "to": "/tabs"
+                        },
+                        {
+                            "name": "Toolbar",
+                            "to": "/toolbar"
+                        }
+                    ]
+                },
+                {
+                    "name": "File",
+                    "children": [
+                        {
+                            "name": "Upload",
+                            "to": "/fileupload"
+                        }
+                    ]
+                },
+                {
+                    "name": "Menu",
+                    "children": [
+                        {
+                            "name": "Breadcrumb",
+                            "to": "/breadcrumb"
+                        },
+                        {
+                            "name": "ContextMenu",
+                            "to": "/contextmenu"
+                        },
+                        {
+                            "name": "Dock",
+                            "to": "/dock"
+                        },
+                        {
+                            "name": "Menu",
+                            "to": "/menu"
+                        },
+                        {
+                            "name": "Menubar",
+                            "to": "/menubar"
+                        },
+                        {
+                            "name": "MegaMenu",
+                            "to": "/megamenu"
+                        },
+                        {
+                            "name": "PanelMenu",
+                            "to": "/panelmenu"
+                        },
+                        {
+                            "name": "TieredMenu",
+                            "to": "/tieredmenu"
+                        }
+                    ]
+                },
+                {
+                    "name": "Overlays",
+                    "children": [
+                        {
+                            "name": "ConfirmDialog",
+                            "to": "/confirmdialog"
+                        },
+                        {
+                            "name": "ConfirmPopup",
+                            "to": "/confirmpopup"
+                        },
+                        {
+                            "name": "Dialog",
+                            "to": "/dialog"
+                        },
+                        {
+                            "name": "DynamicDialog",
+                            "to": "/dynamicdialog"
+                        },
+                        {
+                            "name": "Drawer",
+                            "to": "/drawer"
+                        },
+                        {
+                            "name": "Popover",
+                            "to": "/popover"
+                        },
+                        {
+                            "name": "Tooltip",
+                            "to": "/tooltip"
+                        }
+                    ]
+                },
+                {
+                    "name": "Messages",
+                    "children": [
+                        {
+                            "name": "Message",
+                            "to": "/message"
+                        },
+                        {
+                            "name": "Toast",
+                            "to": "/toast"
+                        }
+                    ]
+                },
+                {
+                    "name": "Media",
+                    "children": [
+                        {
+                            "name": "Carousel",
+                            "to": "/carousel"
+                        },
+                        {
+                            "name": "Galleria",
+                            "to": "/galleria"
+                        },
+                        {
+                            "name": "Image",
+                            "to": "/image"
+                        },
+                        {
+                            "name": "ImageCompare",
+                            "to": "/imagecompare"
+                        }
+                    ]
+                },
+                {
+                    "name": "Misc",
+                    "children": [
+                        {
+                            "name": "Avatar",
+                            "to": "/avatar"
+                        },
+                        {
+                            "name": "Badge",
+                            "to": "/badge"
+                        },
+                        {
+                            "name": "BlockUI",
+                            "to": "/blockui"
+                        },
+                        {
+                            "name": "Chip",
+                            "to": "/chip"
+                        },
+                        {
+                            "name": "Inplace",
+                            "to": "/inplace"
+                        },
+                        {
+                            "name": "MeterGroup",
+                            "to": "/metergroup"
+                        },
+                        {
+                            "name": "ProgressBar",
+                            "to": "/progressbar"
+                        },
+                        {
+                            "name": "ProgressSpinner",
+                            "to": "/progressspinner"
+                        },
+                        {
+                            "name": "ScrollTop",
+                            "to": "/scrolltop"
+                        },
+                        {
+                            "name": "Skeleton",
+                            "to": "/skeleton"
+                        },
+                        {
+                            "name": "Tag",
+                            "to": "/tag"
+                        },
+                        {
+                            "name": "Terminal",
+                            "to": "/terminal"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Forms",
+            "icon": "pi pi-check-circle",
+            "href": "https://primevue.org/forms"
+        },
+        {
+            "name": "Icons",
+            "icon": "pi pi-eye",
+            "children": [
+                {
+                    "name": "Prime Icons",
+                    "to": "/icons"
+                },
+                {
+                    "name": "Custom Icons",
+                    "to": "/customicons"
+                }
+            ]
+        },
+        {
+            "name": "Guides",
+            "icon": "pi pi-book",
+            "children": [
+                {
+                    "name": "RTL",
+                    "href": "https://primevue.org/guides/rtl"
+                }
+            ]
+        },
+        {
+            "name": "Support",
+            "icon": "pi pi-question",
+            "children": [
+                {
+                    "name": "Discord Server",
+                    "href": "https://discord.gg/gzKFYnpmCY"
+                },
+                {
+                    "name": "Forum",
+                    "href": "https://github.com/orgs/primefaces/discussions"
+                },
+                {
+                    "name": "PRO Support",
+                    "href": "https://primevue.org/support"
+                }
+            ]
+        },
+        {
+            "name": "Discover",
+            "icon": "pi pi-search",
+            "children": [
+                {
+                    "name": "About Us",
+                    "href": "https://primevue.org/team"
+                },
+                {
+                    "name": "Newsletter",
+                    "href": "https://www.primefaces.org/newsletter"
+                },
+                {
+                    "name": "PrimeGear",
+                    "href": "https://gear.primefaces.org"
+                },
+                {
+                    "name": "Source Code",
+                    "href": "https://github.com/primefaces/primevue-tailwind"
+                },
+                {
+                    "name": "Store",
+                    "href": "https://www.primefaces.org/store/"
+                },
+                {
+                    "name": "Twitter",
+                    "href": "https://twitter.com/primevue"
+                },
+                {
+                    "name": "PrimeTV",
+                    "icon": "pi pi-youtube",
+                    "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
+                }
+            ]
+        }
+    ]
+}
diff --git a/apps/labs/assets/data/news.json b/apps/labs/assets/data/news.json
new file mode 100644
index 000000000..e4341ffb3
--- /dev/null
+++ b/apps/labs/assets/data/news.json
@@ -0,0 +1,4 @@
+{
+    "id": 4,
+    "content": "Tailwind Presets Now Support with PrimeVue v4.2 🎉"
+}
diff --git a/apps/labs/assets/images/island1.jpg b/apps/labs/assets/images/island1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..14fc6218be5f3a5fd5748a9a64b5d6a592b164c3
GIT binary patch
literal 38006
zcmbq)Wl$VZ)9&J~3&DMHcL}<<yK8WFf+x7U%i`|A$s!@RyIUZ*1$Rg;@B4jqf8Bq#
z`<$w&sZ%pm)BRLEPj}D1m4Dj+Yy}y482}6n008sufPd?NFaYBJ7!nd93hKLKprfIo
zW8h(8y*nNS@B{FDQIJrP5WR0sI%;Y<P62jSb^$375h)#Y9aq;3nE&4g{ObeYAj9Oq
zuE4=i0bp@p;Ba964FE_0063Wc7~uaJ3@jWx0wU7CH30Je+<xsd2caQS;>yE<alvxn
zWNIr=QmULh6)22S4h(jW#(mj1Fi0{-1W+O4Vkd<qr6|bDgOG8-Qqjm@uspI{TF*HK
z7zO~Mih`kng~z3(PLp6j4FiEv;FD6o8lbS0w+|k8du!;uNR$9%IdOVwxpb}+>@Zvu
z5D26oRVvSrR4|t|z%a>}1oI7kV1N<~4+51bXw2b?CnY6=#^lmc<Y}32?*w-MxaF`(
zYKrgQ9EHINNT?!ce(;imLya9RuQVnPN|6hHhE!#%Q)gF&f$9{Uf`Vztjku3SCXR<=
z5k@s<pd$J$pd>0<ZYI3av?z@qn$(*5!TEa1-$PEKi@u3B-w66(G_P}aqCcfwyHqGa
z@;pu(<-%wgl@!v-6jZFgD!XqcXSl^l;w?;QZ{=tb0mu6b=(snJ0+#avNz&_%%ezQ@
zJ|Fi7{%t8uO6I0>Pb)1`Q1~j7)9qQVG~j;on_ovJ!+40a#|8b?y*{e@m7R6VMz&!w
zlS2AQaNn2=?wLG0EjmcS+Db=WX=2Q@LdH-hRYqT@JmAGazKo+Qkr^Rmn7hJAguGsM
z*LOpNw|q}xK9bE_W^;P+mRBQ1UWq|NAxo`T_iRoeiC(zgoTr^B;2%J2^5&}cx=hIQ
z%Ubi4v56^#Opi)dVnc3@kmtcro6wswe}!R_H64nAmJ~zwTOB2KbhbvQC>GoZJ?S7&
zRdljMSTKDT^6}T~{*6*=LO>v$$4>F7?k^*sJHPx!9Ioi>=&0=Mw^k}x@OAUa@$g~S
z4^bP^4EM39z%>uoE}!S-aa01`IXBlENK*!M2(RT=$@G%aZi9=%!uK?#0jYtB;qwu^
zTH&wM&E~s@(*>l>*+t;`;ezanqR4cD0<yau@?YIMHxD<vyDE8Im)7<#n1W1i=z>$t
z?G4M++~J(uVnypk7X4JJnFXnt$a+c_`GR@I5dGo29zC92=RfHFffSXGUcZ{Jy{@4N
zGA`(+cU}Gq&7#f$HH)_*D{)0iRRtZbPPDpS`a5xMJ{=~GJ*3a=hc`B%6<<G+c>HQF
zi1e<zvx(fl9F{e$8|u2-R|yOxu8$8$c=Z#Z5X+rD3SD@xH#f%{2%O5vV9->W%Uc*U
z5l&?1J`6bbbu%^!s2rcW?b^gDT31O_9o)MSuKnfwa=f$Gbb6~BJwLv@cx1P8=eO!B
zw3FF-Ds_m<_=4g6OZjsQ?Jh2M-mEF_jppE_d5@@foTt-#q>ZV<x~c4eAbV#lI&X7x
zXfElSiab|?=EB~k|4X+p$Kn2u!avgj;hc9l$MvTM%M#fF`gG-AJbEh*ch)1t$bEGj
zW=^(mKU!qEfbX7`MK%J3pM^cgV_b!nKh(^htxq1_()Yaf7}cD4j?vQoF@c)onzZDB
zi?h8hMfrNXb@@y(kx)kud%k3PTRo}0z20o!?42%8+;L|cznWMc>S8(PD+PXO;F<`e
z5PklV;M+C{erBGlF^Mme$aByibgH1=-72Ws-<e!oA3W5S&va=$_SBt{Et@^|6}57|
zckUAVEYx@yYKj)=MX#cYA(CIfJ-1r_58yxQccnD(u#{Pzu3Pu#PMIh&{c7tgeqVgx
z7ZbGUnfkx9i`!maf&5k14|nAJlh300zd%;YMe9ayg3lX}hiU!1w-+nK#?@&Y>~i`a
z9>y-p$KBO(dC?TP+rE&l)m=ov&weYykNyIerw@S`U2!!HD~~@cman>4HgAtSwf7&k
zWXW^8h43x41SV@~sOgRQnGI%*9UY1*>~u&WU8Gqa9=nt6?LXIl4n}m5C(c+6ANn;P
z1QK|UU41rx;{PQkOZMIS_8&lf|LRI`*n>AJHG5RXgSXE9p=}barf@D_Gr_2<>&Yr#
z;C_F4cyxUB?Aa)A^B+L);Jl)=$0MNqVrQ!MhvD-0EZ<1+7-b6HK9k3oPL0Mb-`uTX
zr>fLQ+|9Uf<20$@cZZ>_&-ZtG>z&I_Mgsmd$V*&*zL-kM)`)2?DmXA{<}O*{5X6jG
zgXUUS<~0@P+9Fl-^WE|V2M*IL!gR4x=hs?qg#ru?ms3@g{aVH=u*4b?0$s$8yTz5e
zDJNH{7#W7Bt&ZCgm0h${LgvyX!CCKbrX{`9AvAAb`zpN%A@O<3(_Czbrd~F6IEGg2
zzmOZ}3~WfX0kNC1A-C;*LeRxy%OiYn)|7iR#~58AT#ry!oz-H2{O?CBWxtZe-NS>!
z#X!t|0Np!s(>-E$zn<TPj&_Vw8j#DS#m(H@#gB{|r8k-o75!1{tLw_XrHwbEFOdtc
z4~d7L?>;TgPlrACw7o(fo{=VB!*1WAsqCe|zCTlX=N0S7*2)_sputH|;b{}gMK^}-
zLu7~$oZ~mu#DergsCVxCuiFlxeGglk!NH^F(hPYP{Ur}(^s}1kniVfE=@<rvi9U_^
zrfn1Jo(STp9`>2P!Iuz!SJ@QF+c&n!E~ET4C`Wy+v{5>m0=hMh@KCyT9p(|#bE_0Z
zMI&x?^6+B(cqso%z}pY$2MU_YhH}rIdgZ2ibe9T~NNu({e7n?Q5WbYcu9wQ@=A`lF
zqTJaCtqpVT#I5l8ci*;Y>ET<k(t!5ly*sI=AJV&5ndNziIS%64pJ<(^wM<-uLfJlg
zD|hoO&O4V^+ovhvRz#iNi3vWu2@5yKKzk~7yYf%hBUQ+^XbH-b>l~C>8K<fSwfjlC
za);I3)HV&vkLR8LR8ofJWKnaBPfRZi|5$ut9ADr4l{k0&TMr$-yFQDO3@WJ<E>2s(
zsC5i2zem&In`tF?12V+DzPeuAe)0D1KlkX7EU78|ow?Au_B{)MI*HT3g#!mC9J6W>
z>ga8uP=6OSIGb;8!{%u7MgF`;NeD@R4%)u%bMULPePn_Sp58zaTrD1aiCKL{_-DxQ
zGmvFbYM|I{T=3-g^vrHOZbLa&{EHwo&C5d%Ga_43Dzu7l1Hyu&ZKdgn$CHP*uHQ96
z#}#vSbpMxm>Be7Vvpb*ZYWJA^;8ke{qg^};4mAc}fzVYAUspK;9X3)I6c5_BL1Rgs
zJwJZqZ{B_W2f*KTi4b}9X-r$m1zG@LDl~Sk+Ld4<#u!kG+63_6OL&Tu;P3pu=zgWg
z)2Rckj42Vq5+lxsE7U~6W;-IToD2={q|Gye_IDfjt)9Q~iuhXd9Z4ec$eWwNXsq&8
z8ezmY&Z<PfNh;$pqxYsUHUtJ7HtxwAcl<{G#2QDK#h0}19$f0yc0|Sp2g9MYf?fqi
zNv^v0`|^bti58>E3LT!qOap`+F{K`#23Q9$m}z2D0YWqo(*+R$80Y|7m>>;oo&qA}
zI4cfE5+%e`vtU6dM!XLpS-J2$Re)YVlIILnY?4z`1drMf9jqe|9@Hm}QXZ_9#nUSZ
z5YGi5@?>&(a+nRRo6TgQgi6p-l~N*d0ysGVJQzX9*ts}USwllZ=;nkgVOcXX$hPL@
zX6V?#L2xjfl;((N@Rgo$j^+%++L+N*wxn~8@}p8~RP!;Uq1r5n@YT+Q2l7AO=_v7k
zx#<6cj{cX8!eYOZ)Hh@`Krk{6EWFA#12!xyB`)$Apa?(-j~%6Q1S1C!hoy`<6K4Vd
z#F43024Kw4oevWW$N~!~!&C|Z=)RATW0CGkY$|?n1^BB&!NEECqx+y>pm`ZMvLL~2
z>>RyYbXx*`7GE6l-9p%nzz*|=tau1&ILvfDXeXOSV{f_Sm$(#H8T_yyJ-M5T-*<)c
zUk!f9ai}HSxJs83na)Zl_Dp_Xq9iy_n{3bzGl+7&_l+vj%-`}+31%!b6Ilpb5Y<d}
z^{q#Bo}d1Snq%RHOdQ4yHOGT;vYXDiA}hA!&Oj;GgF^xiBoj*GxwG7@hhCAYWwVgO
zE?lV;pX{6z6~AMMVdWec8Yq}{4iZnK2XQDFM8sN790ii6s2qb(#-}-JCpLC?+eHlV
z>AWgxW>h7prSgpqjHLE!p*k3N5+~=XN)n*y<g9VRs%2Jd#VUi`xR=if+tJ+neN*0f
z-#4=s#-R7cUX!^pfz-Hk0`3D7ix%P&-<Nw%bquUk7N|kfq5;i_UX&BF7e}qE@<Q5S
zpsXoDZV$_!*8J=3hW25pWem|kqTQ(}e`~7vhr4J`ePEedGEw%x&Hg-uD$iwIYsN~*
zPEAT_Vk!X9D!9QpVAKCkG>w-QSROJZteuS5`EcoZ&sqhvZviPCsPcWFOz6q$>iQDb
zHV|)67)@uxE&@`>y*-(*nBz&#k13N<8r?svBr^8O<Mrq?Kh9dz{ve;W)A!*(Xo-Jq
zQC*i=XIv`9{Tg8j6Vl%OCv8@qwFV5z8YU#FUfh~nTc|8E_yCg6Cw<6Zb#SsZv}63R
zSgDY$V#H!y-`b5@Myt>kiw0y1XrxU$?sj2PBjDF6?vv+?p2p{OYfv@-P}PW2%ZDbk
zuM;n0uvST+*SCCQ2^(_t-uS)6S{%}+uB9QDm7VELTvitR$<_EnHD%nsn@*Y<BS&kE
zTud_U&HYq(MmQ7Z=T^B7TJmh*vLYQ&t)VnS21>FOtr{$+&Z0UpkhTynWoF-LL5-1$
zIztV+h|{sv4o`wgoJ9jJr&Wsu7P$tMGD9<0TN?QrZoL;1LaP1}%{!im{ufXGSKPfz
z(*MZ2|H29GKX7_V6UT#P1jpdj^I)UG;4!F6o6v^z7Q*8dmNCZzV1uxk!ts65r2q`D
z2<nPHl>j&mlRW+eY${vrJp|+rcSqVLq}$Y$^=3sdfdo2(>C;oNOmRix;Jah5HhleI
z2s|rSumrpE`rJ8}9ps5h0^b!t#_M$A++;A#&cG1s3UKgaSEkD-(;5~v8pJW9+^TL}
zldo=JVyB?g(8DLLBR>CBI#X=0yBAIy65U$i)VJifEAb&~7*mU*j4em#Pi<3cMwwKd
zEIaYKPq?l!?Rk}*N0W7HN_oAo#^P@T?e6D{5)taYX7S;Km4iYolao1OT7_8FzQ-~X
zTA1}YgYU%B3NWMs273U1F9m504K<_!NIfOmMOx`BN)dxcMJ})J0GvtplGlem2cag;
z5y;72dkVm%UD@!%sJdrl!hr;FEoHFRy#FQ|OZB8rF`%}Py8f;nTBV?9L+T-gP+N?x
z(^{X$vt)(lF&@+eUhD%Sw4JKFq=al7PQoJ8N&)OQ`8U$i^{*Xj_bKh%kTcMn+8YcB
zgu**^ht~^usB1t{j9#iLwcH&hMjj#}!k^z63pTTM&+pNe?>ni6zbV^6A&gGl4~V?g
z(|pwX@J!UmI++a`-(560Yj48DKTuOL-QF?^dgct>Kn{?xOQnL^PK`6HGeA=xC}FUr
zv}^oMKQ^*iW}_gWfw&l|e;JlGS=&$sG2$XuNpC&d!R1>s(1Itqv1t|RPA=>;rf`t8
zG*T%k+m22l*Go2b$N)pVBt3+ss&W33k5QCxYVrVswxfQ1WB>-sC<x!YJ|%^P1;Edw
z)XP$y`h(2MEC{e+)Js`rbVS`75-J`dSESR6j3T}PAEJkE8&!!Kv<3?gTMeKN;t2|u
z(lQVS1T|X%Vqrr70E|)qidwN=S|u&Zdt%dK17Klc;b7jY7ynuB27?0&2f&5L22$d2
zh$G;unYsRN1p@{a=EdLQ>!ZgD!C!sa%ap%^&#Ffv4HtTT^6Y<%%c9NS6wkk;zI*_s
zycpLSgMNSqQsm9wH;bua>*Wvex0-!Wie8F*ASgwiZCMpp?%?H_BoKa|)BCbv11is|
zA#ZMQTK#BH+W3Cp6QuqQ_te6t9X(o*#p3q|*k$>Evezp66fqR9=3|F=`}ac%GCpUV
zsVlO2u&%p(*f`O_<OYr)PEe33bFrAgh4nz&QQShreV|j@<i&B%N{S+1-Zkq;Ts@>S
znJCrxZ-j4sNY;FQSS*d0q7n-MZS1r6it3Dh^ld9A$Goxd>);nr6Y~ZNRvfzBv9^1w
zmO7w-gDh)v6={OhzRi-i%;>G<KnWi;2A3ki+~C}(;+?I-_2u=uyo1jb2=iLjN>SL7
zZ%Gx2-oW^je8S`CFgHf85G9V1UGc3yvh`iBJx<cb;=U-}mS#Zh%Aq;0E%VdUTAj_w
zPfhzow{F`hYxvs@ekC8<MifpCrPZ3agXjqXV>WzIH<S-JMBB~R2wQ*qaZURgJ$nf3
zKuS+K*BPV&TSIcg$n_1MMunp`o<S=t8w#Hfse?36q~~Co>2ps>^@-4EBdk{pO<BI0
z>s){3;%A%+INqG+qPJP6-E$q+w=4;2vqV(T*NZnz5s&Xs?Bh_d7HpH6A{T7TSfOpP
z(q&P7#Fh8@$g<zvx@<a<cDcinKkq^VGt^$f8L?`}vQ8U^oDQc%YrHr|IDR5h5V|0<
zII%;<^6G|hA4%yh#wVP_yR2OgJ*|g6KR>_tJu3`+^Jd`yjqdc%VJA^_^ly!yLXYjw
zD6_lMJ%hR2Im3kGhrA}@ZZZkr#RbeQhzF1Xy_!tBvAxSgQ!;fbD7r4F4HfgpwDnc?
zR2BIt4OjmF*jMyJ5T5G=^EA07p6m-Z(hzENtGJPEQFlb(h%U0G@?4(AZq^xVxknh&
zx8>w$B>0__kv^XXuIQ{N?D)@W_DLf{z_|55zAb0ajaJKIcl(C&K{+`%&r0{VVw}at
zx;F9YI*IfsrQQ0H2+fSNCGH!Gv3w~dh0qUN-}|QJWz-h>=(slYN%(-(?(y!BvpjEq
zl~m#~XQ|~;)3Wn6%=VSv^Tu9^e5-9wM&}7cz%ZGQQ=?{m7RljF+$-P?qG!n%)&_{R
z6&hpMDeaLJZd~KG5ISU9%gUFkRgc;NjeYbJ?;*KqAx<2&-p^2SSgUAzi%YA(1NHdE
zj_9ZL)NlC_IG7NNG`N&0VaGieW*bX)9rcg3^SUW<j%_5AG`SFwm_ysqt3lU_B|hT)
z;o$7*6@&F>!k<9@^N##=m*bun(Wi}(T!(BR^knpd;tmXsiO;-tZ~rWqd-oC5DK<ls
zs85hMAl%$==(F|;J)(eWU|UV9=Yt^0?w2K9XRI5a89`=Riui$FVAwjX5M!5~b#&m`
zx{Piz)RUP;f<{BeA&BX;CV~E=Ag(a9Dm=XpFIpc>+V{~*%Oc}C@V9Wh)N)F(*X?R@
zvQQlE?ms}@KLClNz$@W@ugHBCUAv08wAtg|_>r7~7Gx#J;CUv!mW{Q$6g%1s-b82x
zMihux+)sEQg3KkB-?>_)+-jPW1+NZ|g(76OINOAyz`H_++~l%l>1f__yyTS8-&Xe+
z@MKD9a*k+7`BQJRhC5h8K%CDmZCeqO`Rgd>j*g`Z4!pj;c9E4=1M#V&69q(;QE~PK
zbb?lHlP3)tf%~I}cU*gb2;}o+l6Xvvw5J&9FVvKvH9dbZbAL4cUc+M$RkdIx*$56p
z*1IK{f0D9MV!TYs*Rir*)FvcaK?M6EyPZK_BypQD(IaT`n;`o~Y`Y3IkmEp}t#wj^
zUA?~sU|7Mnb*G+nXZquwbrh$zO`O?2-W$%V<^mTs$hSQUT|yPzKHRt+Zj_VB=MhdO
zt`!;mmM~Y#$Jw1_Wc{-tQnDuf<MXz4U>oVz67|qVG9BE%yf1PgTr%354CBo8oV<PM
zHq@gNsmwJEnmFo{pE5luT~#1nqkB>{ukP@!;kkks=<1WBHt!H#gDaaE4ifgaSa-_l
zzm-6%VO*+?n@qR9JkYmoItvGuW)07f*`)7Z#kC2-kj8anSyi%Z*AD0lexf#JaS2#G
zyD=gZ68EHSTle#OcE0zy5?vJ`Ptl9Brc@Uc=%>#oCLCjzNTR2799=}&8MWjNcWF$M
ze$Bb4o*ql2RODL+`g>m9LIs-#GN5(-E{MW*fuafAQ79Dh$V6xyGQQ|tL(_gcBh-dc
z6S!QlUM)ma$#Fhyt^!<PPaELCn&x<CK2`Noi%?ARoJXWK%yo{>#v-}vR*5CE&-NNo
zA3lxZq>SuwxffTd=!wGuA@p@#D(+AmQq{rvdA}#F!~Wc<dNpA6?&a3xX_T~QLH~;C
z{EVVgdtgtrPp;49eG`$D47f;Z4^yTj1y|Ua8WKn6wOU1FHmuG2OYq{5!I93UtBC3G
z&f=K0-RJ%%YxHaY-}+aQXbWrQBH*=$^`-W>urmu)7p09rEKMqsKo=Tg`YyT+w~5_1
zj@>U9Uk`nqj)pBTsQ{d9OF6qM_oH9@(0x84oHtMEtn<&X_T;a0W|*S5Co-Th;jcz$
z@VdV}YGu3E!N->+H}!Ck45vRuzM-)mVa=p0o;MTKZ1yDZuMf{0i{$#C4Y%<PE1zAD
zN4F95@vVI_ifWRQvLT5_UiJJrNIGxA(DGZ(y6*lj$?*KT^Ok6YNLY`_G_T&Xu}Idy
z)ve0M({flo_dTC3$^P~z3ry^P0Iq_Yx_!gx@ILWrQt4F_6*8DP7|&5t)jF?7JvZL^
zABOLFe71!i*yZ$F{_{va;i(Zz9#?bPI+6Mot{^i5*Uw>rd|@(ly=TET+Utq76^bC$
zK4ZRLedjD@snH^Bk8)u$nnq`7x9K(vqd(<j_L%Ot1a5{z9L!E_5=mCuR90Y)AqG3c
z_rIKW{Xb{mUXD98lG0<zmdu6GGW0XIjQ|_7n|&=#fRuw%&fL{kBgsBk{YU0QPz#EF
z3KR=}zAg6T`OPzqPXel={b4ZQc5@ha*WrkQBR=*fv*4J(@n;Y{dj8dTblLvAc7FTp
zbo<w2-Klx##R+25=C@!;kH)fx?B=60uZn28C;OWC_=~--JzPgJ^U#H9oQBKo??a-a
z3(4`{@_zuy!0rOoa#fcPa6m@4LvlyQwKZQ}h35SGO`<Pahc6_LK7VmfZEm-wNnCc?
zSC}i-&uQyxT66kF{sF3l!!wLPu4e2{BtFou%75Dv-%<V*qkXAzrbN8h$SXgE`4MS+
z_%_9K<=6VxLK^}>><0RgGqX0GFOhFpkA_a|uam=Xn7Yr2NNZ1D>vqrEo?S>@zK*QF
z?LJfd#lU(E{aSSY4{&67{^JGdA7C8oNTgs!?C9$|dz8cmz`(&E!XY5S!y&`MApECM
z2a7`mhs!CU{t27f4agOoTm%o+FmJr1<oG!&?!JRZ!>y)imU4v<V!<O>+%)&U+!9U<
z<~3&iwQE3`&f;;D>+9tGUo`gL(@z~E(uf{^FF`48{{YS?xFEY%oPPiiaiPbn@~=@$
zfjRB$lYA!9k{)3&JS@jQ00$|mu*{F2Jk~*@qOFG7&Op`fS;3C)V2{qi+KoL#dxa^r
zFdyvl$Vh9-hcD6fxaeW4vHh<}B~SFh+hXuvTy0gnR8vx9g3;6Q(3y*AasHHC;G3&(
zc^f>_IS1he@5GEtE8+MCfeKf;#E)`0BNf6_yO8fx?J9~nb^82O7;tDVN8zq(l*Bkv
z;Vy^dN{WTtglKTQ@W7v=`@@R*%_5@QRx#nO;=z{6I|sGvk({f78&kz(*uMtFrEg(#
z!a4nBq~uwv8=LGpwkmKNLJ)x8lg$uevwP0c^W?mbLNEKZPzGp>k_XDgu`OTbYJ+iq
zUv#Gf$TpLB0>B6ho{mK-h?Oll#gApc;qKoM470>3ieASMqH<g9>_yljc%YhO&}5ea
z!{sKPP9<f~HX_pmx=pd|L!f59#VpAThPJtN%?@G?O+#03Fhx_6^|UIqoC~JvR{1k4
zy;6>FYWUo#IAZ9n#*SO5gzTu403$$|PMa3ry<BdVTw_*l7!PCj^A{^jS7I%Ca{Y3~
z`U7Bx3_1`&_AJln!wKqAB`FvaGe}HJnp9ZRs28S^;-}!Ui$IpGEhK3Cdb$@<Q0$F?
zN`tql6AmV(Dn_ZQWPB~>ilZ8yHRxCzE>tdEv`xHIAxeZ}h}S*>q}kvHBoVtR*=9<l
zJ2`%;Wg~(&5O49Zdz8>|a+>7`RGYw^t7Y57?$0<rPdVDyqNw&@M3BZ_v_fq}s%Lue
zREgdm_9Y(lic1<g_pYYPI)aD?KZCpDN){ax!1SXOJW^WhO^_AZG{HipP}D=#vfo_p
z7MG$Fdy-N-l2T%T`S&n3HCOl?y=SDHZ;eah2-xFg3gkMBkYQ`DDdV1dnMj<TCq9WB
zvGp;14L6{&p6j^HD)47Y6HKvWaVrkWQpA2<p@WPhuk}zSz%G8@dRs<eI)mJ<B@ifC
z_KmUPBx~F50osb`MrVl2g$;D@8EC=gRtE#fEo-;|vwhh(<j4yO9e~TD26W4#a%y39
zwgnrW;;Lq!4ifGL@dp2*k^t?m)j)OSMu}b-A?pO?OZBLDFmW0JiD#j#Z;zKO==x~C
z07R2xxkp*!KLuOp@WP~B>{s;w_y<_k-!Y}N47|mp*gJP-gR9a(e`xs1)Y4M8PYjz7
zt5FeWRsvP%k`GEmE_PBrR6xWijd)H|Mq)<fsDEHtnVqX@xZuGoR&zM|xg+fZJr!TW
z36@*OC)1kdN;q-NN#}>C2&9oXI3CQH32Ww24T(qf<<@ZXg_yVWK3DMPU@V)}&+}e<
zs1(?VP!z@Kb87+Y*A~us(Et3n1&}d&(~Qts8Cy_z$fehpfr2r66K6lPPSSMAq)Hi*
zj_?j9&@SNM4{MF{dk;7=H6slQWG4v&D|&nt94hZOH9((UJsdYZ`L3oqm|4k%@l!8-
zt|}1q+ioV{cQ>qNyA@i$`pvxE8h*i$e+3JSKq~NhY2ypB{zeJ+k1o`d_BT#Yx{BJ>
zIk|7TM_ubG!>G{UaZr(IKMhxN5u*dDx+z(}m_@yPw0#$x2{I|1GNTuJfsard?a=@W
zeW_@SiseB9Y&*^jfZcW_?{bhN9=~=Sm~BckM*@$rA5Kfg7B!hhYNZP%G^J<ezytjd
zyE@hq1(#Q4zaG^(MxBsSJY!kg!9oX!+~Lta%JI@a{22RD^d?zsCu-w&zVhjxJSzi%
zQU8jD?Z9-x3-r`;<p-#Wfe*_M^h*fNBv$W3zD~OL55x|vO`bu9g>4kTr<k#`G$Sqy
zrB4x!5hA~_p|*3FocMD(SyYsnxaGD!K;%hsZ(Un6;L#%f9Ydxj^yBC|<<i=t4p^)s
zB_GNj9Jy~8YvE>s3ofZY%pZSgYc1>$D*RF=Q58w1R)x1LorwfTt=3xg35g2<d!jN-
zSYWhDyCjCrwcI>hKIN*ds_D~$dIGW?86K)Ok~#e8JD8Het5-T1uI92)qH-pnn7ts8
zY3<ciw;pTF{)S(}qhi}gvmOx{F-Hw3@DzCJ(*L_OlNaiiC-U%^D(kwntWJ8guknoK
zm^j6i>XKjSrDd{sS8>u9q6rrjHWd}SB97479Bq$NTzj!MaQs7=jc(O3J~dQt+!m!h
zLG{Bl@mxq&6)?Siqw*wbsgc~O(tZwGPP45IQ_IcQ@X*~b4%^O>lFzP^h>yDpQ_MM$
z=RrMpUP1@vhs11Tni5pIN|%eMN22UI0cM4EjRV_4Katyd1glY_Y;sOxoM=kt?f47O
z!B@-?@1J9I9ZbTf0JqpBPGareaDwcNfP-u`b6Eb;o@tyI#m=C4&t+qP4N6-vcTj=#
zHn~05TYB!xq%BuBMEP|0$*ih|6$U4##R1@9OoXE^J@|T6&dRv=lc2q~JlVH7j&eR*
zJtdsB@Zs83W^`+oLzPuxfI3Djs-%~y+8&vzp%?{P^drT&CuaJ$(qpQZ27{dBuDf*=
z^qC%=N<fIxcY0P%cukiwi`%W(X=|tZd$F5CqV-Tz?LUAthybWJl;v0-k;ItIP~elk
zJZOD<RJ%fb7qAcwi&@FrmkNhcS|bM=k|l+pU(C*GTMGGltQX3UY#Uq=Go+qH9s>f0
zhp^$(7gnFGf?+!)!*;WeqFil(#oXcAW*%hTt9tEOErRRb;J_0uV<^H@#s<%WugVMF
zO%{h)L{8X&1T1w9^}H;0&J|XEksjt1)hYzGTjTnTT}K#95E`oNKnQmHm=ua@X%;_c
zXxS&UP`*xX4ZR#W$dTGC-P5&}JBThqDVs_$+soBBAqr-qvmlQyR@&VwApH*RRP2Z0
z6wh(|LvW)LL#8tv)67LGRJd*^z+2C>dHB+Xam9mjL0~lYRKu@Ep{HBec<rqdFFbjb
zc0G%hHc}l8y1s1)@k)m0_(^`p(7<<zCwUDmDkdp{o*uNxf(wdN$xlAg2d3#te=}rH
zd-r7Yv*8q*XD1!KO_VJ2+I-6Pv6w#V9y(29>MPh3A!ZUP_~17CG?yG-c0lZpYV?bR
z^3Lxc9fOLywxeCk`?)#^aLw=GEKk8MB*R+nMw5A35Z9j+cnHe|<e?gIn}{8^8V7R*
z+~Aq<Aas{%f(9YW?S=VC0bgd$iR-r@)S(F@t7u!I_o!MPk(Kz#KQqVgHywO-JJFno
zeUJ^yTMU&nlm&v%kT*?jJzF6ywOb_2<*m%(L6t?zu(8(XHNB!#1}2pb$Ap9Uc`&p;
z)c0bgi##OY{lC+<;DTCq+qEv)zC*G`rw5H|^TP#87g4&yNZms6T5MFc*2Cve`A4TU
zvJCv^t6hK2#9yLh%g_v9>$(lL3T!58xuEbO=$Ml+qpjjmN+e&V%?T3AB&)ySS9X!E
zh}xA}Q%CX4i{QaJ<MJ>j`dErnM?SnZ?BA$;tUQbP9K9weV5#jOY6qnw1G*=|YxaQ7
zHIrYM|9nM~o*#9D(nU8n4f8Wg_{qkZRlWC;Ck3>2n(}SykCJt5O!26d$gl;DHN3=y
zA}$FbP$s^pC{#CD1hocS71UScYh9AnuM^Y7d<j8fg;FGq>d~|EeK&2&x#8PB3h*B?
zdw3}p^$iv>Lw_*ci&=Z>x4ryj6<(}sc4F8N@8BZS`u@iQ;@kbaDa6QKAE+LwpJc>&
zt<;Y0l$tYa<aPYn;sW2bKk`I)K??>4yL*;G+KwOsmO=BN&D?zmTqhZsxF~?)kh^H*
z34=#O*)Q%~g`3Cwlka?Ho)F_+TmdlF;_bTuQ}gZRC&^}o`-E1Q5j)4EHMdN;y9mw#
z-GDK7iWrHi)+Gmb;RN%*!o2B8aG}?lJjgsdH57_xHjWh~y)dK8qSm=OsV5>v|3_EL
zTXivDwA4EU-aCYXpqMxjB+4Vo!)5Ga57hLMK!6e#0*OIc$UidV;2&(Lsx4?T<a^;s
zl}{D&PhsA)`y`yrleO^+Fo1RDGN>G`aI6YY<4IL6?MJ{2l_%hPNS5TFE@_#GC$fyb
zx0YjUNzab)kK%KVevJZ46sK%Bda{22EycA5fnJe-u~xQVTSYHK*w2KrA>D>6boU|T
z@<cpXi#(J60M^iry&4j_NPZDSuGq=n$J~@VQW$b>fZtrw`)xsL8qsa8H+t`S{)gz<
zP6|IvG~q0t!$A}ok04__W6B)AaV~^GrW)WOPHp$Q$ifR7PZ(d}BtDzN9?ZsEeX#GC
zcIXbBF~)br1D4V?mbQHL6|ZAm@wX62G29vkqOK<SPf{mfmn&4JEeZ2YjpQzbC{{LP
z<o5joKwW(Alv+Hy7X_^r@YqFnkJHc9ylG1(u2VC$?x7S%b%gibSqtQ`EzK5x26x0#
zJGN16@fcis;rVw;FU0e*?o^%v7OWc&L=~%v!+u54y~;z2s<y`!bypLtxk4J*CMx(a
zvK?YO`%-6^b-wzYWD*wLN`JHNsGqDw=snHpA_fkw^ZiyzpTvmF89gdRmzdOa?@~{P
z(5su+31M(=)2W91@NeKdS^74H{^cJ)>S4sfKwJ<`+s?|4UAS(6+J!eov4<v7YH72A
zWzK_EWINcH?np$6S;5F_(@VN=vNrV!B_VpLzOF=hLuz>#UQb*XP%p?_dzG!R(XweF
z%GJsLjVL<YZnI-|Te~08kcdT5Jk1c4gz2U=r2xw}h$M~viNv{(fJbhsMoovB3VlhM
zz&r$~MTAh?oYM*ar~pCIQgQqClY~Q`Ejo=R|HwDg+Xa4ghIIHOJlhwsa}G*5)FR$Z
zSUuV$yQxN1{|Qni^hW$N<+16Wp}*Q)R~lR1m~%fKGPkFq8<t#uGB-7L{=Jc7OHX+7
zgK#)!eJJ-#K`{-s?2cgetwAHd6u+Tg)$~8WC<oD-LbHw`o#hAJ%zps-YT~-3rY>Q%
z1)riM<g=(rfuq`5qA#nL9OX<$b}}Pqww;0#ns$pw9BmS8aTrH$$t~U>tzAKSWf(SI
zB2BG>hb}(Zd;|~rquM_ygljy=a2U%zdAy5eP)1jZ;?5`)F9JT#S$S8C9E+rr2>!C~
z-x0-oW)J~yni3WTHsi0e3GvD-bR2a{U2rNfZ_#$&`r$aYYd1g7K+5;x(sLUDkJ^RS
zc@Dly(i0A0rqmZnI^-j01?L}9zR=G+T4&pnFE_~#l$c*q_?u~8Q4OvY8|a7qjahnh
zxQy<+@MZik*k(!EONbexSd%u7fXVzK$zovgVAMPi#MUV+TC>JLdM|(&MAsv&zlKb?
zN^#Ib8i@A~5N>Dr4}gm)#=~4rI!9KjEz-S>JW`o557>>&L1^XrtWyAUippTC7R)pI
zNz3~4Q4nu@b-mg*tOE*YchaQ_bx_|Xwj~9v%Q@9xSzThn<#lmuGyjhke@@P;g6eiR
z2jwgg^yS{dD~GigS+o1Zz``cXFroqk+u!VlFSN6D<<f?FYpbz*zdXJ{Px~-;{0$*2
z>t>|(l7{vu2`S(8SpNZ9SEqeicvjB~a{d8^_4IQQSJ#AO*uK7pH*5%q@MrZ;mLdPB
zAq?H<wlfx4#}Dy3E-C|i5#XK94^sMr-;j6RAwCIAHf0n)7DeUNBiVNrPPL)^CR<Eg
zR82xdSi@{{pAptE2%7PfNMwV`t<=xeV?PaXN|_l&Ij!>YJ~OvC<BH&T!W&Y%4N8Vt
z@F;_fKtz46N|Z@U6FYR#9nQ`60kOR$(e$I7<p^7)V|HfjNum@-`5quk0^b1wVxM#X
zvYpSs9;#c2vJ46P<&c4DHI~&nCoq}<wWN`<6F4>&s6A?xu3|ZZwdpbb)1v~IgD}O9
zV23ep<v30^nbz2M<uGuKwW^2Qa_^nFnrz5;==cV%I~aAD`O~S>SgIX@$avO@**p+q
zGVsLwQ3BSbg@S_TlwQjU3>l~AjKh|roi%+1Qz<%k$iW%$Ys{_73M``x{}dAUx1KD9
zbA|QP;iQ^E<Q|3b5t;#DcwB=$`teSX;%8dAT=;G!E3G^5&jx?Pq1C|~dvn`35txx0
z+gKhC83+czqE~+VX1B!t^+k!@wx-j8gLB_scGh5RVqM@LfU}_bQ-VrY5f6@PrD4=j
zsC?zMZX;L8uh3cK+}`}?@2#z?{L-=jTWP7B@|M|JoGi2F8XF4-dq3L(9HN8v{3xaw
znnxkJllEc?TqG@iW%AR+oF}Xp=ZaaUgD66TB;>t0oaF_&L2?n`dtJ-@>%EeYZ#jgr
zs2CV5sgZkyw>jgE9Dw!@5ckBM^h6(kKoM5CDvX?x_j4-pLlRc@QLZ@yvr3QMpJiq2
z=1z>z7n(ZNS!^cYpVp~}Y2L5JLbszIrT+m4CrRqM*3e;|3lG~luXo_wYssSh;b$^J
zK%UZ>E?NRfq!<SU*pOkRil9fw*!5jhjMTMxuZhpR*tK<&C9FiYXg1j`o-XnGt38-9
zVf4+-{0UOd*^VyVKbubSxN7M(?>|TK-4fZ38h>QvScQc_ZJ^u<>7vsl^64xTqB4hZ
z<6Q@x%pCAZS7hJLD*8981o?zH<<GI~=T+Kui?e^?%s3fdS-X$^dXub@MY)`17SH&m
z1w_YRfDN9~be`+63+ARwNJ6c~f18IHQ;VApp$Alfe^n>?&#=@ae2dr$P#x&8`hn3Q
z@G{yD+80P%v|YGLk`)j|8L!USG-bTj@DC3t8Fe~>C80^fg1?AYT3$r>4Ru>ppg<+U
z(h|k_t+wh+OA%c|iY3+ivQ)TXn_mHXbO<F=*H9w91JCXkTXQ7E=X&>RvA34fdI(G`
z&rm+#itpnV*a-m{?+B7F40w{<m#bkZ?6x<Eg(^hLsU6_{Xs(R+YpYj#CDBY!ERt9o
zpixcZ8n%_(>*p-REVg!!VX^FezLIIrvxQe9b5nAo6e&H=>9wsg(%xn0&Wz%Wj7g|m
zAXRgvd)%M~R2{{q!YNuytGRvGH2P|3u(SoGZO&%=aiZwO6UIh>Mx(j)HuK@kt^2)A
zwaGxO9bcF13olXF0+8VCf`7vQ2T0^)x8ooE6Rdf`O!8|Jk$5?u;D&!BY+aJ=KIVe{
zD2D^|6lU>URC*`*HwKC3Bxn?Pg^6TJnJZLBnAZ>@m_wDaN+zN%EabLQHHwux$-U#I
zM82c^sJqbsZAf>-?oBFuXPbdKJmhka`5*IXZ(^3>{iB{c%m<QZg*_UP&o+|*^|G7?
zZ7wMb72hW;B%R?trv8r2H+5XG{h4?3j9`7po5AO3!N~!*QyYrKCQ^`*d{A;gn>3LR
zel9-FWGIo>$*9LT39d8Q2}7{4M)41SYn`wDkY!R|{RR*33>`e@N8f0{;1Luj!n+4r
zA4vAwb0u_^1YL<}I_7Xfw6Nta%*q<A4^*MT-a6rtEwMu`Rv|Di&Y^LKiCUh@QBZnq
zzZ+2&#4@8=4IMG<(1;Go6J1}F!c91wdi%^{RcR~Ma|1<dQV*a$>cH~LM~D}@Sn<6~
zf&)RSz^~3{cJoHBKZA$j596|7@GN3K%cvm>{{U;6TTCyi#8up@PsJkBMmV3@#7}a9
ze*S<iJcs>~zAh;q4q6373#2#4xDm3X<Dh*Zp^nH8$3T73OoZlL`ju2vA0H$H<L#!1
zS%kZbq7nPi9p%Z%a^=M25lkMn$ciFKsT+TYzO6|;!7o+wW0vp5=xYshVk5SmUKR51
zs~(HD`lAL9nQ~x`7g6JP=7<@TV<MiT>nK?L+=4?fDaF;$pILk`-g&28bf?tpKo5ZD
z8O7TandS?UHDWHdV{?VeDd%FcQdG`0C&T55!)sdTp|rHE@oa(1h+4|B5TxHsf;}fC
zCYcIUFVvg=3UY;5`&AC(omE)MFl0|aPzm55b>t>}ZU@{ERm(83iyTUE4naEgf1vK2
zV$kN;QUTH_#;p6$vc5bG1YVtZT*DZ+-)V9nlsJ2w37kfm?tStr#y-v~w2wWpF46++
z)$pITBdR)m>16NpB$ez^J{ys#MUOfYn7}yoA0WTVzY_p4Y~|%a{;xd0!f`S&dr*Fu
zSLK#3Qxuc1L@s(s@SxKo|0MiL1{SKDCR-Z0I7s+w`>J9pD7$OW@Le~8ae_yM?VNN4
zFgj{>5X2LYSUr!%-<?7=lf(4;%Mb0<MDHP2@K|>g``9Bqv!ZUUY?Azi2CV_W@zO3%
z>gTHDcNuz|N}0t54@E;y>jLXbGRlE{)1#<~3W4`&--VroQtJ6+Yh?X3-t9SSbx+(s
z4^iP*@YuHYIm)L4N;UOJG&!PPsIEq1yATXW+^YxbX}t9}KPpe$kCVB5J+`ksJUaEk
zpTB129@R0iTczXADW&^!v_L(T?IOjg%;Ydn<aJ!!3ax)N;U99&@^uWSJW8lMS}YpK
z&`;rIbu%Am%HNr?S0|h*RrHAwRKpP{lrt1J)57Ka)$)?{#DYd{u<siSWA}+@e!*Jg
zgVgDmGTHRg!u`R&_A9x3Q(vC~dcA2TxNYZMm0aO*8@eqzw@W*QI9CQpQ$z>$orDO|
zA))oj_p-_lS4Z+M7x!_h<6UcDmKjsi^;BP$?r+y8ov!vSlBlm?&rVJvR{Z2V->aMV
z!%D%7*bL=iT$$Wduq8p5C~Zp*qu#k(sVQe9&qp>o^@(3-F>&ck`~z8uY0yqkU^cQ3
z!tdSIR3c?W;$1a_v*BQ#!*2C{(CIY(2WTNaWt;fWX-+7c5^U=meZo{H-CY83)Sw4P
zVByMfxc~gz;MR;oe$~r=uxVhhj${2&oAXJFb+Rz?V=fZY?E9|=$%ez#6gaY4yRnHm
zW)Iy~+-OZ<{{VCElWSj|OCV3-m(2qeZ($yZ?3-%l(Tnz43xx%>KJ*2FVrTRhdk{$A
zp1NWCBnFtce2+GuGJqjXly~u6_E&(oP}acF4Kelfm(D$wUZ$=s+q^1zze}_+=m~)+
z7wsNJ0|G-7Qu03ta(H+Qd&kcx<)iYZ80NCVsi42H3+ok*lkz_;pw5lXo16XSsV3-$
z%*^w$@+x`tnfiuwXq{!5JTyJnT&PyVtc<McY~u)w8ufz?agKs9Y6-9P<#9l|yq@1n
zXS>g}(K+T)v1LQt_C36TbJ{ZqLq6I-9uD~ACLFInlrVDD79$R-oIDWW#j<PS`>3Kw
z)mmnz4nyKObc;oiCFAtg+RZ;(_>_AWFFMYw4rhACwW#s?VryrAcmR_9!BHzQY$H9T
z#4+judiSh6U5a^E%uRvn4u7(tyC+>;>SNuSx7Vt@0=^B|_L}afyaw<NAWHsA!#->H
z8sU;V1D-my<xzfB9svgimxHXVT<DYfBXPk$fJWQ)7h1u}{(D&-M2M)ZVWG$#=QfYA
zRp8i)>kNB(V4ph`K2Z@Al8QtF_aYgDFFkbeno2se6oN@S7G1qjcrc+w>ZLik7h4~y
zq=mYJ$DAdw09!VslsL<?Nf(MvD;P2nidZV&>$U9VcLl{7Br2Q(;T%=l7o*~E3E@fZ
z7ouwNav6F~^C*J@J39O?<#<@V&miO9cX8xaO-b9lZAQ_+aE_w_8Zj#w%`bvZ7T@80
zY7oi2*RpF0gRs<qgsdMw7$NDX5Hc&VKg|^T-znP?o_!a0f_SAAUv_$);?|P+Ef{S1
zt|a2}>iV}TPf#wyl7QZ)JxQO;B1(&ja{{rEva!-Vm7}v&Mo6_C7{9aCFh~+9kBoJP
z`LOD4Q1eP^y?2B7wz<RjWVKYRTn-{?Bu}744GqX6g~4TuCBUFU6{-Ad3Swu|u)02?
z@>j+mSSUVNq}iPm(%^M^?{9mVghN!kU2$gc4|!itn>rMgse6dWW+tA?Nl9?Be#+1r
z(fk3%VSLkxw+P0Dsh4lMxBz^d^kbS*8JRzcOQI94el-x4l+8ZMS<2LJ$#P*>zK1dK
z2rqG{p3JHc=^EQfAh{zh|B1<O11~>V0#p0m(%^FEs>k8vRyz(;tpAnT((gx?`&QGi
zLzNwWtCJzw{6TB10}Fo=>;8+e9aHb7EoGpH_DSQ!jaYR{vv4ny?5xhGGW0AYa5m(L
znOoEEbGVI(?l~LkP;&rL*$UWy%!ZdYsDd{+46&N)Mph$17(ha`sJnHksb|XMg|kq|
zZOBUHB`KgxR9<vhbV*YvZ5xRFf@~jTj3X;$MFt*Io7D!Upp?*t<J)#Eoqp|Av7a44
zj8nUpp|}Wc<pEd;HrP8*xY(1k<k{d~eE-295W~!`FAwk0iCzV%&=LqGr^astt)|$i
zM=*`Fm^g&zc7=23;JNy^;w9_ds4a0#O%P?3rZ$?)ybzJLLX}`7x@wU0Ie#ANDq5xW
z!d3GnL}faO6$e)RuxD!zSd5Q#&?7?av;1DV)#5e`Gs8^9XSF}@aRfctmd!c69@UnU
zN69Oz)K;s6Y<^L|86OglNo6QXVPnN%o}{#!a^Gwz(a7ol%hPxZm}RuCsE_l<gz$op
znXh#-aNS7wq;{3QM_F)F3wa->rD~^=emF=1Lm|-%1A9>=Tosz2jC}G*1@leq1qC`B
zMz;%JZuucU9AAj4=>@f5kyv&XxWyQxfadvOE7ogKri;&zEx+1B)@yzep`D_`^tMf$
z3cBfprnNGptEGzZi0`Tx-Me2NGhv{=+QIkgAtm%@C8^%{?BG<2@6j<K%&g!X)2Y3M
zyEQ?-c8Ufa|Iol7SM*F|g09piUbkrtb8a+~q%iQNjdQP-WDU;td2k*et5&-;HXgpp
zFPE}^Ru}o%mF>iMSI=ZxW%9M$#r@N=<qPG^k_lkj^&|7cn$vl&pfcHZbc<KtBP-0c
z`=ecqOLIimH(Yq$g73N)pT9i_hZxZz1~Di2xTa>D6wdcn0LaNkco=|Rc(*hqsZ~Ug
z#d2FC_5dl_mX9rst*k^7;CtuA!M|gq8{fz79Rxei;uAtotfVV!S+YposHL83{BCwr
zT3RW)2ZoDpOquFqtyD-Df2&J-T^UvvimWmd`xSd8!mGf|X;E(K1R=~%DIj3bPugRP
zzbt6t9CT^@R`{!Z<40AzNv6K)X-pv9sXI~O)l}f+*ruf-Sl?qtleuUm4Q1lK)<~cY
z)G5Odz^#4Deqd#ZjmEE)8M_-sJ_~~*{)3_3*xbU}X=7pw@53gO%Lik_10uRp`QUs;
zerb`x$uttnHZ=Rtdzhp38?vLwxWxdhcr{!z1>Q+d<;I^bawFl&6HWq0_pGvLq)x#A
z`g@fYx~U1_?1O+$LI`j1@fhea^8$h?wt3DjYX;wfv4^(5W*y~aR82#jmrW`Gbm1Q$
z0XI5vq!W81dk~D1Mg3g<Uv0MB1lB0!N2xx*-Na&AJWpfnS$;ufLjK5&qUueD;R@K8
zqjpl>aFvT{&^+jnRCh&kN11Rq=P4j0sz~-vjm1&)@=r1x&;o8N0&d_%F`CzMkTSAe
zpF8v3GbNXaD6^H&Wf~$wVAxFVWwH8dz)$o{DfQ(`Y)kV_Z{8{2!k|v1SQ(&S>#4N)
zi`v6#h|Nz!p@~T7m>$M@YaT~2f9WoB%OT%A>+*ZD2-(*v{^<M%7}1Laehxe8&eEH{
zPxTEYkosswOQJ_NLx5hphQJNMX>aZ#|9PF=9cNv)Gtq6SDB<SVk%Y)Y%<OL{J~i^q
z+|;wpMm&(9`RlI!Th53scXVn_OW>tcYkwB0Y77eq9n+v33O_G3bKI9xE^O*#7oqrx
zC_9}C0Ppf3?HT0?bpVFAISn;NZqYyQ)suf7bUg{qx;kp#mKm=yq!1-xx;n~D1(SUk
z9>uVS`qtsO((^8=$Z6gi(vZznKod|qiU_H{j5!CRN1jvwKe9!4q~vB+h4D)8!eh^3
zg@2S%U^r<F+e|X{aeAhyW<D@TFZHFWMiMl}D~Tsi0USQ&=1PbsV&W8kqwbk?d*K{_
z`Hr&pv(=-w@7~_vP;|2XX9<^r=-8I#G+{gsMKvfhS^oL*0Qu8<0{yZTE}0b_UBJnb
zDC?b3QG^X36w_0~$eS@F?Mq(N=W$<twvKNWY{Z98T&1{UDYT)*RU&$3i}m^@yQ2bD
z4-@E=S6RYY4pvzuQ@b*B<uySbM5=~S2hRzA2+?d&Pc}^CP2b%vbzPxuH>{gk#H5cn
za_Il6{iAr}scuZDKI)|My_hl)d?kruED)Gp04!!WN`QE8`=H4ty?~bv#M4Cbj{sSA
zG236O*|^*oTBNWw`{Blw=f%xqP%~0g@HUM-&`>A~Xl3P(1u7D5kX3A<7{D!zhln^g
z9csZTLdx}xEmU92xT=(uHvxDvptx7DZ3qcXvE2y#Qk#l-a%4<1<!9wDdy9aG7(`)j
zQhu}w*y!a;6<gU`adX`<p{gmJa|78R^<?#w&;06-sqSewul}rRuVgx>)i5e@#a=fC
zVSEe$RAe}dSW$R9l3dVA{Coub5TUxUU(sPOnMx9c4{e%(Q-egfd6<E#^=9R5MzWlR
z3=opNDBsZFFz@=TG`-&|l%e`XY1c;bgQVixF*Gowd$YthzQwjX>3Ckr`Z8I%lZGT+
zhvNCNk4>}`-@a8G{U4&fI<AeVX*ak#!JUReNN^|=_oBrT+#B58-L<q3w8e_MQ`{Yj
zI}|CDQlLnS6zR?T-tW8jpPcOOoY|Q<zcaf#XP!Bcgo&&v-WtFYNB|Z1JwRn5GE9*Y
z;V9v|drfNY(F)EmzT-*!PJr?Ed`+{QHNka2HPtufA0R9QJ*BF0BW9OLyhfFdw_Q7j
zR&|SUSJRG2YoN!zgDrl)gTQjoi$k?AY3R8q-84r=h6}*gW=A-Q+V0m=K|DF)Q`%0>
zXm_%on`5G@BW{@NoPN+kWBTT_7Y(FVKw_3i=+fY_{L_-?GKdkJvq3Fo8bl@tP{J#?
zdYvLw@d?id6UI<mwV7rDEU@Fi9*JE!XC9P5#Z|qG-3ZR~zI|xR2PAOyBD^lmEx<C;
zVNVpd9saC?|9ObHV7$>**y|a<;E|+yc(I$41pj#`EA*z8mOOVI_XXNTgy&KqG-I-7
z)asJX#?2d8JkBqPUAeKI_cSG#N$Y#^!RB&PbCo;LLvr~&<MTIrGPcd;{CwA&AEU*a
zE!tWd-t5pFe~7BHv_o5lzhC@2a83F&v$E#YFY2jx$7|`2))c6e6HrC}T=+wSJ4fC?
zP@CE4$?(Yh^l}R0+%}ql5dgzp*l~28!Z~l>mS%2F8s=ze@32ug?-m#mkNiY&a_#)2
z?TsCQ_1>fMIk_KYsGtk0_b#`LXq3=y<06~T!*nm&?!viCD$y;akRl^oCSxUL(wkc@
zWg-hIi9eMke^S$}Yg4?WR#MV8qzN)yP4my}czGOXCN3^Q2q=v|=vz17TW?J|$$1?<
zPEW7gE~?Y@>pc_uQT1cTYVPu2Ci%8LSr}&Nx`DvR*2p<SBj0$SWb$>hSRW&X^>IGn
zIx}X}i><o0{rUQ9PS@9qWo<aj!mdwMKcaQ>Q_pkU2wX6~waU9np}BMvp4Y^Z4SGrA
zDZ_dhZ%GDMqV`7wHO1;Ey^Jf2-8RmF_1Xh)Rc~3z(o|7BtL~o2du@z6xz?888{?O=
zQ&u%6d-v+%Y(z4p4tHJKI$or~l(e1C$GvxPKZM3g$DOZXt=ww#GHr_Nw_#Ks7do}>
zvXgdca~{{w&E6h}B~);oG1s!s5ziXt28u5pR4-u*wVZUO2F@2JrUvF$W|h+CPe~)S
zmBaQ|;*42ZcbA-EBCmX&AQuT$1SKP*EkS+G_m%V0-32vA2Z<?whu+5Ek}^9Qm0uFW
z=xq1yh0c!Z9t$ZywJ2nyxA?Tp?xRAn{{i}3?*c<)pGZ-G3F8aybqsL<S;Q)lDACBz
z_28N$>odS+PT%v&Jip^I!M+g9(Bb^c>06gr#@py#qR`l{QK7lN21773#s2}Cu2B{W
zUx?L|)ZT5o*LA%?C5YKs-ZnhYfUBjkM0f969=sna-BIb2oTR99Npy5HOcdhgf50~Y
zGS>g*PP(HKCmUG$=XTF8`2H7vBTbrG^bdd@&!>^pk{8vhGw$&ZaJy2X`s5APtI#P?
z%>e6_zx!{4I$HDYBB*TN_<vXaOTfL1y8J*MSGnF*R};#h1es!$jy3Q5)BD6h_9Tp=
z)&0M0{zIJnvJ~(CAE9_xXm>y(ejfhsttxc7!TSFIbieg=erYHqz24!TM=}42k|{ah
ze`&t#m8c^B)Ac`$2)wrW%rXD_7i^a7K(<O7VyII<NtHNB0kzR9eh~utuLjXA-eCB}
z|CihRfyN@-FNuS<PFI(#PVGNp*8PX@|1v@~#igi@$NGg)N&kDU-0*)SxBm}WH(2jg
zI#8q*hU!$LS7DZ?U!Hp&ij`*-w<bFNanGbOgZ#LJKe+D-tY6d(d%*g?T)5}V9{~DA
zy>U{}8?}<S^zw86(SaNFt7(8@RHsP$KQfSqPgl;={?DzSRhU&Kxv&SumHb8iobOdj
zDPjv~NmcRVHOfFo8H)u=^};V3^Vgg<hMmIkju*}?HmCaUg##w(8Fp3ozmclX`$Lhi
z@dv>Rsy@a!kS6)O3tZ?QV1cwAiZ0NJQj`4ushAe^|7^e}lsu8afI|ifh|f4?-IH*f
z@7o8`t2UJ<?}G~z@l?5|`=4n;N#wd;+g_np2{!ugIlK=T(wZ|F@{A7N+gdZ9yiL}V
zW+$7KPf~Z{C8HW&D@>1B>1r<trj5(5MI?M0C1a#N@FdrB%0_x}@dtJvnublAavac7
z?CGGN__`EOT$4Y>>K|2@p)3T}FHAs5R-T5E7G-_y&pIUv85FbYKW7p4E=4t@6^cXb
zL~7-~L8WJC6}BGTnDcd{y>C9L9iz-cN+39svZJlVfNM3u!DQ&x@Y#+_Yc5N~IjEE6
z5*5=8-^9b`aAwcez7I1^;8G}dwY12!_ki>s1pxt|whyW!vWP5C^lwz6ivSom<)rl^
zj;r>l$`DV#tiOS;Cn@P)@*$!u8iA{e-53gjh0;9=gP*q%VF;NUYZcVs#?w?N+IK$4
zv>>OsG!){&dMY|aC>=1-Ya>wV7_h_Y-Dz^1Xt5RGuIj9b!*Y?U37)!<?HlpFJZ6$Q
zi%y3J$zvwMcNIGh*1U^kEyS--6^c&MpIAe$#=~Q`K(DGDnn--O5I?c&H8iMRSnxaA
zxf>8EOHi%JvGiM|+f3D~3LD~lCnc@Hf`85GO>ff@2Y(mqrQm+9iLy*Ndh1hM3nM^_
z--09C-YB}vdQ0tcp;zD@3%mYZG4{*{(|KJ1^oy|jb?$(8RUt}~)<z@8*G@D?=J2jz
z75|<a5r_4=cDMKYz8@6I<;-RI+Xy=BkMCpsa)&LyFV-pkXRylC*i?(Hdh7WAJ9H>l
zq7bJV4+aR@ws%QkX!i=KW5teh^Jg(pH1exTQ3;yGc;iOK@VmtLS<XR`zcv0Mqb2Ef
zL3qtLnPlvtXr!Xo!>lPy_YTihkTRS6B{E$`zvcG*^qNPzr<g4TwJm_&_SY)!ft9|I
zZ1c`SX4PNWJF`G4hD^6H2cFL}3*8i<@sXcfy`9urVntTu85}=plw5Fw4Wej@qkI`y
z63H@k!e7~&H0Ab6d7~?;j+d^ar1BZcW~4xuuC&ttFHQ4BKRc`MeMw9QqE$MKys+%7
zz6>sCWg3!&W1s!aM!T+2)Gnc8Q`Nqo5};RW8H_uQi338PeW&S_2Od>uqik?gKCFr=
z9y6Z8y-R}fTScmI|8-Gry2sqGKY}XZI+*KfZ=I^td`ei_wLdpCzs&Yov&EnqlOugz
zR95>}y#;6|(vGW~;rEbh!~c0Ugq;$L`K@XmsxC;)+3~UCiC_J;3uei|7*PhPGY!ww
zy+X!CTk0lpzpDm`V_5XAHUZB<xt6e#S{Zz#NHo(;_RRSGfxA_akkzkE9xmhwJ+<i+
z_fmMoT}@oV_*Pd60x7h){pv7|p2^S!_b2?km}aA)V6W4fa)<I5wbY%Bg`3o)t~8=f
zeb1<_wth~ySyL;pPJ&*^CxK&B5r_!-k(ehqNLc%BxVMS3u{L*f(atzkY>2s~Emn%0
zR$9l<=_YbReluIvs;w@@+S6z70V@Fg-DH{R=s-7+95q==6l}VIC|~<tV<H0#=3WU-
zyNXkfI%ogECYny0idn|WlwOz?@qPKVngcaGq*2s(BJ0KmAFT(bXs{B%Qi(TE0U;vm
zFbqUB8Mf+fF8DV{Afn59$3e$+wQbFF41LMrPR!=O1B~p!9b;9~d_CM4Y0fdSlJnvh
zx&7+ErY<=YW9QTk`O=_2w0%?t1A*no4kHeFk<$*_F}K5#@1#@p3s<5qx7$S2L{Qbj
zAm<)z=hQvRE=GKEC(!l13_Z&kt^GYHXilw<@o^-&vt1}?Qi}vF+~Xt+ah`M25}ED*
zm7k3XG%%cPHPGEOaMkpQaoEj;wZpj!m!!<Iw&R1!ouEH>w9pNg3<<g1eIzGZDlaSo
zO~i9Pl%1LC6)W@7wm%D7(tDogP9Q^A$9iA`81vIgfL`SN186D0Oljp`-Lol(#4cL0
zDg4)Yf)wIWmNl#Vje6doW+=Z-NhrV=O`1&hKGw1}`pHDilX)z7^-9N)X;*|jVW&@(
z$bW$e&+J@<@6;1g<fU!E-;DmpP1ZPgRm(#V9joju$tD12@5h7eDmUgb?y~c;y=L+2
z6c4lPAOaU35(Slf&zz?3A|nOq$J>)?{d^PhPN75i!aXATZbYQrdn*$Iv(fk8{UTMi
zwpO$Si=T^t$Jkg4__l+3+m|nb*51z$<dG88I;LYc1tcf@WeifYjvfWO6v`9Urfj`i
zQFHA~CMGF8gwq&?ornb7YK`*yL$$xXBHx^qLf{B8{n$)x1u;`Dkqm0-?N(zvQyAyd
zf0B#Ht#XOI6XH|Me`}j%-ElaQaAkvN@lv=RJtI8f*R$WJ>}&nmL1u}5wJ}v(g^}9@
zd*<HEn7_t}%dPSshZYak&J{hYh$nwmq0NT!>d*f7y}@|_a)fxop(Ch+0D1SA7x?r$
z#_y8ZS&qcbB9W%BHNB^}V91f(-z5A9uIOZ|BSfw2v|16&+a)DJisqq7_#MFQzHhsy
z&|0b=vT-A^%EHZOq>pBX^L&H6YNmhbct<zcI=X9(Q3A_oSpJoraZCvo0e$ngmqR{;
z1p3qWBTI#TX9v--9Z7s2*Q^o_#v66H(i9Xe#<ctKo9M85L+w+wlYewB4PkyOsHx4l
zEpJx&bha8fWZ|i(M$9cn^KNT$XHp4BH;XnA1Ate=+Y9e-FxcRG^VNUJLZ1jeD*x>c
zX`}fzRWp%=Ij(J4%qDk?JluT#JnNZJF{@v4?B}Bp7PJqOrOnbOJ<K#aO_X$lB~x7y
z1R^yjDMWVGS%5sB()dQa9s&M2Y`zTgWciQQ%ZuZFf5YfB_dX`v4rn3SRIUE=Lh>pN
zWmfWMDrZvTuFP+moApasGW8X~59&ZEhY(CX^`>`w))s|5r8&qi@eZGEEuEd6ZI4Gq
zik&cOqg;+wWfsJ@5!~+H<uz4@+9;4~-25b9oyN7Il-yk3l4`TdMvr!*;4Xu}r%V3@
z25~!pPpR=Z_BRKNTTmm&q_=?5l&aS5Qf|Q0No<6shK7b}y-Xk-*qQ14Ic^p`*>TTc
z?gAJpNY>g}*O36u*T?H?4ljB<=92;NhA15Dar<k02p``Q0M0ol&&bm_nVQQWd5!8k
z_hN{2eir9Puhw%{Ryh#cV<0-Ruq&w#v+$aP6Vpeu`aCY-*~x|(AL<oV#8RDvuzHC2
z$qd!j9^Y-kwo(uW@ZFrL{?WEBo%T3N%caADh~#gcHRc|DOC`c&nIflpJ8zxllpg<N
zXGTAf6{lB;APJ}hguS`!n$buWd3h<9?Dx2Q2Z9S6OqxsO?<-?EzB_{&t7q+$3wee+
z{i3sOD<2^GBqB?+7VJ4h=E2H!S2TQYexn+urjw6?XOgySOubV9Uz!%A&t}vIk@%+j
z-)=#D%U4szw&1Pm_Tk{ZYPcwPSOjrCSrc4ug|=h^Ex*U~m|CvVUc$O!QoPNz14egR
z93e!98VZ9Ijf#ff#A+wiVF{P7hw1#%?pv0;VyO2x*VN_`GUa#Gb|GEj<E^C6j2_3O
zPw6N4LK|B{pfv1#=<8hHPYL+OmnvC*Bv77wxR04W5pu9RQ$hRX52UlkhK6z<7Cq9(
zskl3&2SGcy&wJV2iotn+{74UVO^n54x4gxDMQdO@15F*m!1@l)Dqrv@HKN&REv8K%
zg-MF{Zn6h%({x5L9`|*2|GqdhNOB^Q5KC}H;{M3@BQ-6l<-9{oh!*zG2$plK`5Jf{
zCl<^{rw(>}_HQuyL<ktUQ)I<H81VeF=(VxBy0{qD+P4!gOO;HDl*?w~hYAq~K~h<C
z`sF^3wTFc@y~moJ3X(N@-AYbQD3-|cSXs%g8eL^KjDZ9th;*@9Ifu73VKY6-9VLz!
zL8L9)UzYE<|DnbiOj2}e8rEB-v)D|g0dRcW9du5NFiy=j9m`gT*=q<IRznODSoq}s
z{VJ~sC(!G~;1dhZiR-P_+sX>G@n5@482&r4SrwWjs&M>}CG0QnR$F!9m)t7;9W&&0
zI_Fm4ZbC+S2PCjCQe=IE$+0tjlL84%M*eh2VwaUOawFPaAuS`XiTnpB5-6|1uA<F0
zqMw0eRu$aDp3%n&48lJKWL3rV7cSj!Da|>?D8^}HG^)M1ExsVDFIvxfaRDTlHLd^o
z$pHphcj_bwtZ;1l==w{b>XpQ<`+zQ%Rqj6kC>i8%^*AL|a}@7e4q+})Tfj-2xwzr{
z#%N?OkkZjkgtSZ95gfc^u=O{v(#Ja}GA`$=-7-G$8I@ETyfDKZI!=HZ*4QMUSj%dh
zOh(K-q+}UggC~988NKMYwC3;s8aV=zDGq?mk<}Qx7k3$$6e0xS7%$^35&<zk#(nXz
zj2hNq`#puTMoJCS#-$uqV_gyLZFPR>LQpdzqS3DSf$fV!K*SEM=}2r^2$lm?Lb8w!
zv(&5&N7S@#VtJDzvQSmXINk*fce_f6p7m{^r%&O}Mw}=tljUpo%_7N|5=WXT4Y>|b
z`d1)M)I>Pg9avfHW&8n_n*dg4mkx+KAzY>8E5oE0-y2(Tlv2?aw@^2;{J98MZ1WrL
z<1o*h4`Tl|bwl-;9eBn3;+X4@n^3x$!}SJI9UMng^p&4zsY`BJLix$Tb~Hh#hU^E;
z*={26m(-UHe1Em8--7kQg504PFSd3N?PWuzTRlUJq!g9ySOxcKwTlwpQl+f4|Dcz9
z!Gwq`!b~`FqrfO2s5IYlj}cbhjjsZax)}W$Tx)*9;kY2iXt?pZyy~mc`UM6j!P>p%
z4rPxT`4=?qB8-NhkNX|HUw0!d7eZ-~R$5qU;KMP797noxJAvA;DBTTT+sK{FEufv#
zEi2icuD)?lW0f*m>-lxRX#t?q54uDA0v|5gUQlWue|;;eTPUDs@X3&^=X^=Em7xBb
zA3a<oJB(QVkEc}LcmR!7Q;v$l5>eXh7m!RH_q9{fFa@RU_bL2Y#uvIt3nhn-eSIY-
z%FRlLa$C9<dkuHAhA;_OPCbmLH9;@z)J>2j(Ut}o)%RhVQblg~tBOaa?z>;*q$OqH
zE|xE3ghjqG^A{~}&c^t2j5Kf}ftn6=aT%?b->Ur+xMin_MvU>d5>r5tcJxmlHeH%|
zhTa-;>^?irm@?vJM|O%?ZNF`axp&_jS#LezKmBW|GC0d_fC{*%yS6&Eo+pN;0Sl&<
zNOBe-V2%&s32WRI>AmC=)y|wF*KiIutR`5(4`y03Hov3_-Cqlga&4*?S)%wcMv{xd
zXo7}E(&NZ2pWazbGTx#%BMl#{yJlHNLJx=mb0T4$H0YMC3k3f|-O;Rc`PHe;_i~ZA
zM*8PALDN(B-qPM7(Ok%i1jcc}HqLPWpYvp)UMu|yw-Pro+|||c<mm3}kvaSl=nI}K
zAeeiHRS11mr*Rg4*O>&Pmv2f2oNNqvYaFy=$Qh}Gou>BEueUt~dO*L6&^tnCC_0$h
z4!zQkE?Z}<T-o6P3$(~UNtiBTjx$Z6CL6`tfFF_A^0Hi~&Uiud=c5eed@yS4pvh?K
zx2jV%B~pzAd|uAkrrji~3dF6|a~g-UN#z`7YW|SYReL9*yGhd_+(B!s8>qRM>6^Rr
z!GK&`^!~1&a^f^4&7Z2RS)(xD83Jy!CRu`*RXq6L5W~E+YQy?gk5DV%uF&3+cUJ^&
z!Ct8&w5?y<=kFx=4dtJOfbd@UcWk1HOwHJ793(ay5`|4>?g=R_ysA6Hk2S2#N)~3k
zJqpw0=^UcuUr!gfO`yR?JGzO&cf_ynGLRvJ26VUBuoc>$Eokw(f%BFIpl$CnyxxO8
zTSO`;uQOJy;_1^UJ1JNJYT+H+n8Z_l0I{0idI5!W=pmpj^eQ*lABIX_B1CF=l6-qw
zk~O*U)l#uChIxFpuXk2L(_mtb69&vV<gkB4+@u4!o*L`P$gqJy!AWi6`CF~je%bt*
z5Yis$?Nf&a5u3bXWPVpXQ}mmHSPvsAqyItO>K_2F3Frgoy-Gd092hL6^{~V%twN6^
z8Y!BAR(6_6H8#*htj|viUo0}X{GuG<Z#+V8BY4*!H|Z~%%@D(F>FLy5lDISxrDaBJ
zXptgQ?U&5W5@JOyd*D$Vy`1rtf)r~mi}$02`N<W|?-mCI^BpCXfM2=IEa?F>XeEak
zO6tSI&;^3iZ>FE?!TWNQ37;BAU1V+Y@{OYKKew;s+Dc6P@NWm4R>i_^o4+wEXsZFk
zxH4(04zW}jfVOsTI?kXhyd^P831xI)Ns54e%`3oaLZZ(#3dY%}WkPUv7f+{iBJmGU
zUH6Hzs=*srQbTzpRzh{At@dLUd9N?V<TY_9V)_<Zn_p2dpXYZW`0mV#7~B+L@M60E
z;^0gO4bVV-6@-cYBP2UaD}<Y-P|qSZ?As(i$R3}V?ty$xrFg9x!y*zdPnBE?(D=E!
z2RE+qT`suN>}5re39x)pcfls2bv8MtCQ<b({_c8CGp&*XYHo9xC{FNnu{RUY&Dw7k
zGRS<>w>5~hnv>w`De~G>CZ9Rv5YOjhqBgT)*9+WiB@7mQ=+h|Cl+l;<B%nP1dd$&i
z-2#iu;kt^`D|Qe_c!95LwM?h}@JSc5W>>Dix+9sx%uM=EHTfpm?c<<CuM@)Eb*$Xn
z{2d(%#qQP|86fpTAWaTo{aJ-Sa)9G6OFM4kmpOD?OR?1Gpb6STLStWEJ;fKn-wj9;
z<Ip?~0{o|43{W`5(8@`^KC3qaJQbBAg|G^Z+&gwfo>>XCPbMjTU;`CjSBgmrx`A_r
z6At%NF7@)cdlurO>U!eh9>O0MF-lY>@s_Eys%05=w>DHBXaSLY@2Csg?PsBUotPyJ
zuPKXnb6H?c+g2VyYAk4jb%k|)QKF_dj0{%X#sp~CX(cyS-^o4SHP@m?hB1O3WDj&P
zqA&YXF16Kadp$Y6vH<I)i-=4O?HbHzJiDno3irt>9ar;czfQsS2^!Q88~%~{!|h%7
z6RL_>N_W;)JjU*S8=ifC!^<PV9xX82qE@Zd4FU~+u~Zxl)K{O@C`@uG?v|VLK7_<3
zI$U9)&qXKGkSQsq%tKg+x-!lRq9bz&e?)IlQsjUXXo(*;^(stt5){nbpgA+)!Sla!
zo6}eI)&n#PRNR0(?<!Yq*jJlPfBce2kJ-##`a0B#qtxFLu=#}z9FYLr@FfNa&1T9S
z$s!1ZYnCdoOER0@hb1QcmTKh6qQ+ga`a1MQ+rb!LHFF3p!Eg6-wz8=<f&FV?C_#Ir
zX=5L#z{}vNcnWzh@Ibl))Kz=hoI7YvN9N8K-m<tWQA0zgMgtH30s6UEu1wnQqd%Ux
zn^zR43+n~%S!(>iM_{zj5d=#<v6W=(Rv;?QHIvzkzV@7?lpM!0AcO8Q14m)t&#xnJ
zjXDIt?<XT@8VX?;jYHgi9vO9bDnUmE^I8TOHzZNr3k9iOz6oIp=(~fbL*p7QXvF@V
z@#99B=R*_31XE;G8UC|;Hiq_g8!MeS9kX&g03%Z6!tZ1+--hj7Wmr$uzjatpE^s^E
zlUQAI|AOA$jz?t2$Kxe<j~u~5BS9R+a#FTy_JdX@Hs5hbdImNyM-Mnu8&RO0O4eIz
zmnlW;Cuf;UOwwyCVEGSKYO#LW7~lXIczl)<bretbBg}{yHa6&-u{=lDWa>*e=b~Tw
z7?h?ev%lqLa6Lsy7zQD+1g*(bvAfa&_rBYCV2HwSeWf-kRkY^$p6fT#lf|Q=b@Ff<
zy@#yCdidYq+=NQI({JgO*OPJKO(nzW`~$c&P|GU-Y+vT7NINzC3U?$n2R6K%4<)if
zKLt6kRW6@D%AM&{SgzMcp#w4N3C|Pmk)MvZ?#tt@OAIOpBG;&xD7m|-;{XHol9}#C
zukyqluE7<fFic2Y47IWII%b_Utfc|`$yDq+vyF?Z?0XvXMMYJf3}(74ceuB%B>%Pg
z!PIToxxeFMOsa3Z%@ahL6uzH7HQ9`>>lw*=#wOA<K;-T?tp5j$=0Z|Dfq0lI;f7;r
zt*JgWK$}h~)b&>pSOX1)<>qYG&*VjclTVW;-M6hA8@Dz>&FI&Q10!9nsue<wG3Rp(
z3~_G-c2<OgmfCnYp}P*aVGt!sLb}W*=#bZZlByPQ7&<<LPr>3VHf{E?pq@l+16t$T
z)ezG=B%Y@_-0VuAa^j~i#EAOkglHCkNB7xJfj)}WzKcmHu;_g#=g*3ORcl<dNfR#x
zV-8tG_!I+>R(-D+y~nTvV<>9gbeL+e1%|YXFQ)XMck0MY(>5|#0kuQ`fZswE@G+-y
zrJn=;#ueGQj(J=gyxCiMr7QadoEV#S^kBS%$~mNtrk`9=Clvn4Ax6Eq^F9&1IZ-_l
z(~3evU#O++#-qCz(B-oQnxTDb-*KbJ!z37YY*FDx9mOw)0T}3d^Rtzz8M)|GY=m3|
z%yUVY@T<getyWt`iv7I4&QmNm1^IV>k1M!ig$Mv9o)f9s7q2(ah&9M-Cgf+W?<ZP{
z4U@ji82eloJp>RdiSZlXB)l|D0(RhDs9s_}9+co%{S>p)`HAZmC+~al4omk<?MFVc
z4s~G-mrjf0LRjPwe<71j<W5CF3twy+p&;Sq=xX}sSs9(m`Hr|Hdg|#LC+th$k?FIp
zQ~mWl{DQwA-b)=sh9itYfZ2ULt0{Gf6kva1fDi7a&s+FWb&rlG=bxVW2aD*JR~nk|
zx$uoHf6Y&l1+ti}e}JEYXy1EwDvXm@y-&GG(&d0g@}&v48LL9@li(@Kj?c_<*lJ@%
zXMuz1Qif&<!EXt~=r`ytN)E9vpA3F7*b-+FI5Wd|%bA@PVf0#ytdAE30*p#iQF~t^
zhRW)yhK5y_V2+sRCsHaMrHp~RXU{+N$3EL1Fx0{C8|grDg>ff#XB$=>8toDSG6KW(
z@G7UZ4QR5JVnsMtPSfd|CUPu_9V{9;9+?n}32D0PDH3F~9h{uR98|eBg!8Q{e2)^&
z5Y}tG9!e~%8tem(O;|zjC!*m&A?@fyX1?H6@evuo*zlnl`sZkatk)i#)A+!F>dvOT
z5xZKqmati~3hRbdx{WvPgPefQ#LBh03TqX4jdFw*aXSeaZ*yxz!Wvcb@}X-XlVISr
zu;`{p%(6jTVg-3Q$a*v3=WEHVCB-kPWNm_dS-0U0`tZhPma1sgQ)C~9VR?DjRn7}X
z2^j!GeVim0I;_}7n};YGT6xDAb1ge|_(IiG2N;3?+X*&48KiTK9rh}yu`0(vDuhg&
zk|zQMzU+h%ax`LhrS)pV^N*s9Zfzpia&#fHdgxou(<PQ7Am=Pv6S#@ebfn1?hw&HB
z>K;5LNUuk>{D@&?jMZ1*qg=<xQv0gV$fACkbU0z;>-S^~+9!2;fqM^E_&G+A8DA#E
zuiH%_%Xa?&*{zSuuTNv1?}b);SbEXH@329qY`t#By*Y&JQ8l6N)PL?yMcEeDU$(uv
zfhg~0|LngTae7Qkemlcr`E`il$BVS4)tn<o#Z1u=FKp@Q1UWQ2(9w9lj}<4U!5s5M
zEqZ*5H?h{HW35A{8%@|OnY=>{4=%NJ6p!Es{{+?OpPGLQ6O2Y#HQOVN7}7eX2sU+!
z;;RCp9Ew?9CDWKpPY=p%b^Vr=;WCvSq-}Pv5Dlt$g|BhYXMs^Ca0;mGa@{t5&skqK
zW|ZJx;)yUi7;^!ySJ=+Dz@gdrF^&a;if<^>Ru8Ma4P&M`JP5|#?PRx^2$G)}7CoDj
z5wfVL6;bJXTHWj?iw(FzQZhDLCQRpLL5?ke^uSWUACM00+oW49Xi~g}iOiLN3YTuY
zC_AoT`Jf*_$Ex+3<uF+_>W$#L#HQ3YUnIYBQWoct8Ay@(U4Mga?*PG_&<!6<5A%rM
zta(&-u+yP|)hx{VE01H*0oLGPdAFrg>l?^$OTgp%AO-)1taS|iC28%gBS+>&!>&J$
znTJGeN}R76_`3Vz)!=u~han0;b&?ua(WWsM@Z$RJgLAuugJZhC*r|Oowc-$sD-UZB
z^<BjNarmUBpl;gluI{U*&{A{D14bFTp}mD{m#R{aDyj}d9olqjZ$|{7KfQsz2VE-~
zB`jy|#g=0(Ndil|G>a^a%|Ie)b!BD!9^T-7)#Wsj1dZ~`aCnL{@*u97HpMaoo%1po
zgLfi{f$1>Ro!XUxo4F9f@VfRe0!J24&j)TP+60T>W#kh+5SJkH0!YNFe!J<DdzC@z
zJ`728(0eX<H@{y5%x4iDKgv>53tOb8I#wNaJSl*h#YF}vSZoE8agNLIw3Z%26d*wi
z7Q7InkKoC~(`|`SHn<6`A%R@B>ydUnq1FH*EBQEi-Jt!{8|QvVt>`6n$rzssLc}H!
zYgRkOcUkc{6e!mx4kN0}Z<NAQN-012BG`$g*{Dipt>THx-DO%$x%`mZ6eAi_!&N4!
zQLqhPKNNC+a=j-*%Cyb3(?Q<;RIIv9dOP!84<{g7UYvlJ1(3P4_aV!fQ^7*OexQq7
zq`AGo-WgwZXNZ(WLW{Sh{#ETki+R!+bzgA*9if`{Jse{vOeB9=)u7JmjPrRP2Q#0N
zBX1rvOoY>s@CvKLS4luQa4tv0tRDf7MY+OL%ks(X7YbM-!i4?%vWB%4ab0{h{#V=t
zlXZ8oO5Wwj9Bc@cZTsy7)IDSgIJ_Y+_x^Ah+u$*E&rd`M?>^F`$1hyf<m`a`Zy$I3
z^ovKC7MY;07iguwM20yqXgbW37Qe>4c(Ni|3RGf=*FR{-r0Y7wX%eyKs?;CH9+P~t
z(m;W4@A5ev9J|U^G6`$o>1g8<V)jmQGpTnVbx0Uhb0-r`S=*;$@5a=~3!LaZ8Q$pG
zR7%!3GU-bfo>o1sYqljL)<2R78GFsaRWBtowLiwNjEJ0-Ay)W^h{)mgF{*LF>T}4!
z8OGYfcxg(A>%QkR3|=&b8NeJXr=%HT3D8!J5NLW4gT9gF$lq2qeZ!_l7n~lgdC5ie
zWqxrLEQQ}Xsox!7;t@J+)3C)?ncK_9Y4L0lFks-f!;?8KWm&Pq*484y=rs&Qi5c^}
z%|#fIfhL940Wmf8$iv^7h2_&Wh)Dd77slD;#%B)C^tP-Tv>TUL6P@;0(DdTR(U+?~
z$agM}n2t<`>#B0KgBvR+gV$XR(BE(BT&(eICzeL<)6yzq7-2jfvcJ3pZ)*G@`(;f8
zRT}&lO}!ImB9a(*Y*nRZSG*w%jr>mQG$Kb0U`2k}EHU0HsxN=CVl$moY>P9I5Y-Bz
zP-Ggbr<xf7E1)NCvHu=b(n3>q8v3DsgD>n0OMySLlR)ncT_j%O&Wu|=BNBLOR+>Ro
zx=Zzl#0xRNP{c{<{l*Ao+(~!;%UlHL6h5GJB$8a@H-8>}oBr#C=sXr@_kDw3#<Z0I
z`NE+=&29m~(<l}LyLu#1+(>_g<{wuOdlz5TGTT<^OW9HIWd5aa*^7aC|1sOA92Wcv
zeC8(jNM2BydXIA(q^SJ-Q)zgezsBc>k)P;AW(z52;yS^NckwpK_Zk#~$Ux$&tkTGj
z$2LFUKD>W;{#bmQK>P!2TM70zf*Sk(eo%eeQPfablaX!x6Z?y&P#@kY9YGm5A>8L^
zR+kt3Y|S@617ksN{eEg|!_v*leU(nmzD+c1xQ)tEJ(CxVzw7%|3uNk|*qqU9A1#Ed
z^>oIvoa0K3Nd~44j`Gpr0xsvhQL!r#g_I$C-5UqHDRHbjU+4^@ll(Xz#dLI?!y6)n
z(43|a)^L7*n?V8)8K^1s@YI;Z!^VrMX{aQQC%}0fFRS{A_!j?MmA&P%cY4BdD&2wJ
zH)*^Xd-jR|)U}=&vP9-y`p5hFZTYsnLFh?&5PpPwhv67T(w3f<^SaI6A1qZT(H0p5
z;>%NkX~n3>$k-g?%DUF%(5%{KQ<Z&2@-`Dmdk&5*+~%ck(7HYr_fACgVaMnh3zWC(
z=r#;WH6dN_S$2Ldpjs`V%xu0cY#YwaQoH)CP4*P99Xm<Y-;47gyPSKtqyFR9<D?Q!
zUcZs#`G}tw3OV!k-EA@Nv|}#nbIICK;d^sFzsP9c$b3jC=fOwlll<-lwm8n4>aCyt
z9yu&D9VPvMO-Hbvn>Zm^n@uk>q|r#eC5-5izk|8h_0T2}r(L;s`TMM2E_Mhx=)hbf
z#Ok;r*~Z%VVv@_^s49NzIr&jS$qu#^A?HhXw9sm>hj-D-=#px>u9ihgy5ySEUy!(B
z8)`>lb{Xv>*KMu#L0e9!&F8A=Mr6Z*?}Wr!x~uCY*kdK)?_%3?3-at~QAAofjqsgp
zHQ3o$^H;nUaf)%lFH#or%C4)Hh=zoT!=Kw^hCB4r*u{~>{!chfLqr;MJGGCOVa4s0
z^pZQf1A3+zc|sYaiX+FP7vtzx`kjj!@7XnR5;-b)ruMffbRPS{sG5QAoY4!w46%p+
z(6qI^fkTaGTR)>fAsjtcobC+6fXMWb)8qbK^}$C!JTK?*Z^m!TreRaly&k;w5it}z
zXwdMc^x|OS6<wBrVYC{@c(2wB(Q$LHupY^;59$D2#x`yR@mShciPRZ{4^@`!hlCm6
z&PVrOp>evoAxn3k#<(+<Pz7%$i_;ExZ@4V6cF3+gbDPb7bLeR&5FY*g;Oaf6U7)I2
zgn^OBLu}sug2avk6#G@MB-K!0W3=P7<DO@R=J%6-09)yYkat!=v|4MnV1hdfTN|P<
zePP~e{%V<IZkV&GF-fDb`rBn59^u1;_C$g2ZQq8v<J&ZAu4D8<2simwmh6R?)3Sg(
zyg1hbnKW$Nt#{atd3Ofuw%=XY4jV)E$Fco8b`toNHy7<&9u9@9kyut!`oRMS?KXJ|
zvkV>zRZVwb-XKCEqS;|mbcTXbD8cj%2A-uc_!hVST|K9r={{{rDUvA9JVYfzY}OSU
ztOJ4-wbY7j+7o>UyaA3mm2quQz(^q^$RYsCD~X&-cRT`+(@#084r)>4nFfnNsbMjM
zlb6HPT%lwOK}azCM<-8&;X%z(cJyzSTeCUwQ*~G&Ye8{Pu7fQ%fQ~wG+&JQhM{9yF
zOigL|w<*kEQ;`C_b)lz(N{cM#M05yYv{9-l8<2_o1T#K>z5yk3QO&3=Da}<U_YdOc
ztQH+G<toE)(D$j5SxpC;oi?%?oWJt>c*J_-lqBdc<&c@GN-6Z<7evGOS|D~t*dw9~
zv)r)7L5r78{FGR=)r(comivDICp18aYf6Lxc*P5oOvjH6%UkInCUX)pY)*g?uiBtc
zp=Mkcev32;@tC{p$5RW8lN$f<b!PeOMdPU%BWaZq?66NwZ^R^jN_OzJ?GUel+4UiP
zP%<9~5hwA%bJr*SVu=yeqxx8nque16V`6nOFwcBUXffJB!WKZ8XdS_|y~5BEj1B@>
z_;Ls7qg*fd{IEFh-p}<NM~nuaf#|Ozg2FxNQ;ZUMlOlhdMpiHk+K+LDbw`3OlNr;f
zQM-wK>-Y!2xmH*X(c9ztcB9=|H3PcTA5exqF`rp;Jb{aqoR?jAhUdvF^uvlptS&z1
z<&*$e4GSE%b@4Dn#q_GH83_8ln*(!glGHkqj4evtzrJ8ZFSqdHliM9D^~$jn5qX|W
z#+9wwX*_z^0A8fiRN~(={w=!YSa5LsT%?k7y|9JVU$lgn1jyNH^yR=!$Ga<UK<`d)
zoHKgmn~vy|g_~|?Mm?7LjwKB>aNM$Qr;&U)%U)-csPLE0yF4t!(U8TQ?T5YU@_d#v
zH#PeSw_^je?HMLP9`kC%Dg`0+)#ez;DuNHXI8;VdcCE))?dNoj3F5}~ptvDKr9<?2
z>+_6@MCWctiRfcY(;t(cx<=~Lu07{jh`~nVSrjVGWpRW5p2~Z9SudApNvin!pgm3~
zaRj00k~JgU&LP7KUfJ`19|Puwj5hs&2<04B7@ftyoJIPM?tCHkrAO&MpdOE&Kr!Z6
zw7ufj_!6KP%6eO81?{ht=y18zp#YN2Ue9B^YAFYse*kLyH;<TWVTy10bM7&TNAE(5
zN@*0O)YV)WXjpWM8ltK)Zn8jS@_Flk@4?!{a<YE+j(^0EyaHjL%KSm-iAU*3>!0@-
z_GJ8BB;?^6``R_ysiMh^7Mnfcm)(<u8stS{%4=57(E`g8R;b<#gF!!33W%zlf9c+b
z2lZrB=xiTbtQexeyh|@rx9tqQ>sNJacPro=Q#yLB<WAm?{hjUTX{mhszjcY?>XN1a
z<K?4WLw%xl1sJ<s4xF#n^n_f6oH4T&@hNwywCq;&K6|~4NTgZ*-F#=dq%cLbINQ5e
zy0F7S0#%COj<p~8o2lqK*dW0-sBw5q?Gllp)NLQhZM9HiwX<B0sE>AeFP^M}Px&f<
zXn`DK!rEc%46qB2I&)bL)m~C;RG+R?yM0FF6`zLo!+)~`gS()Y#sLkUz;t08IVHtg
z`EGWva(U`nxiIpj=oMhUIX-l=zh&9zretVb#knZYVVNPau;1)>xKj_0`dpUNiHdbw
zM{8un84Mpp8fWNaIMUjz@g_1aEvjZo7@G@ZEHP*+6@K8anI+*X#+!>E?jXi;u^cY*
zvJzes;xnICOlx6m4SHLhC@E_w(Yg-x!!;ZDLeq3)^}`-nPnT&uwmy?w<FW_WYiC$F
zH2eopvXzjmgw@|YlP(neoBb!0!g;*&D)UIna@x?}Qgd+qA0Q)LOn(gro)7$6?t&)X
zbRT&<KT5DPyac)^x5gp`3;1dgQGKq8v=18DC(3h9pB<ele%FOHfo0P_tGvg(w%Jw6
zj2M}E1Q$VnOvzV0@DtRX6?MGkKS!L?^pAg&y`v1VAXl<%u&ToC6~@A))6U5_M&J$#
z>Fp2oz9pY&<(0=V<(EnIbHCx{QZr)Ene}|zh{#SLLLSr1UVG@|R2?muB8I@}ZE!me
zdygID2_urcxFa^qWW#0iHX9F5ZU?f3%8=zQv0QUz;LrWp(w9&M9>@Ymj%&baWlASR
zUc|M!IJkevSelrh`<z}as^qwB2odA|T>4R|uH9eRHAaR&n9gcM>1nOuHK3Ac$M}uZ
zUz=lnKWu0>XU(gZbVIZZzxA&VOC8}xQ<*qP$ct!T<4x!f^y(CE+@7Dze-d_;*tR4V
z$q*9ZF#vqokndBkd9BSqYt&pYEQ0z1!To=D`Zeu<WcDN6B8F)lG4)ag9Lq<>)|W%|
zB9d?WA$N0s$f0eC9=y#wZEyd0W|h+wRKNn=jJPyRyK(jSr_q|7Ep9rZDI(Vo*pt4}
zM)7VxG-1&6<vsN-a!21&6yB0DWD13TqGskG>MCk+Fm5Vmj|$R1u+W5ie3o$t53>D(
zc@<s7x-ab|?*O?~Ne!_}rK#m3$>M}bt|xDqi`f*du)-<cB_90)#MMw@;sYf&%8}+&
zE`~+}I=bdU>g|gpw=T9oo>hcGxJJ`h;^yzMu*Mj<2}9@Zjtv<P)IM7P2o@Qi1le6Z
zhSl=XuZmJ}P)BVtwVyL-5H}vp<kc`SKhc~*`I&b06)k<#;1X8@aIcL-pWwqs0x_L|
zK4Qfy^um~#x-|H9hF^s;MGBvYgN?<k%gZyu?xo&_Bw|8b`7$joT^Gpk81TzD4qCsF
z+PX#5@i3ZCphY{km{Ae68C>&w+`R$Q#m>TQ_$L%Fx=<8ksU~l6Pv$6Knt6m*W@)WZ
zCnD2mMXlJ59-*C9-Q~i9wwqUXE6YdPDbxoLx@Gl(vg#RQp68c-7Y;Q{7dp6!e!KQ9
z+yE^FcL^5SJJl$XCtDnHW}-~jT!L&me-0$u%I&#eTx7du>AVnrlC{{_t~)ZUv#)WX
zB*bxsRQc=}Fk65y*3Ui$WkBA%jtR$sdAt6m#=1({2>s^umJqdOg0G5i1g-xEa928N
z^I<=in*~&3hhl!=x=r_WwcClm>~~iQS`a92xx5Zf8gY@#DxzF{*bs2VztR=nptMsA
z4za+r`oSB)6{f!^8hKc<^Op)$aKO^>9P=|i_E8rdS7yxDyiqzw7rT}ZnosO7ojWDR
zLylbD^wzjp%5(lY@r2CZrW9}0I}<{IBBu3ya&w)#R<xIVxu=_89-u>5yCKwzVCfGg
zJ%nYOi{IQaL%Xk5^t;9ocgGa=?CkxfvA@fi%+*SkM{9C!rrw_YbY`L1p6%`=Tiavo
z4>{!FU5iVBD?t;bkIkEjWo$rRZx)WA)%CTGKktw_{=~MZS+$dxjT}8WvchkzVRPsb
zJXhZNM#|_%I|fX9pkDe!mwUXb<Rngg+=b6ewaZCBzb_T_=^ExXXv|-Uyqgi^tRfny
zZ#krFaB}YadqtEpQH7D^BGeUazTvJ23uvun3N6P!OF9QR<tL#E_=DS-4Da*3|3LZU
z7#Adms^|7{S@NV=)CNU+?2ws0H_|QXvYi{AnKY<bfE0q&3%<UC*hzGO3hUIFv%-C^
zOH+M>Bc(Qi_UP7mX<yIjf<hCw3v?<HkFs!Y!i0a}Q=L{H#vW4&iC40C<h<;=dzBbI
zuz%s?LTF9Lt}KyAY*?^+N`jX84-i9pAeR!#H-B|KY4}|B&T_tPh!>05Uv=W{lK>|w
zCg&QeDC2bx>iV*WzL)Q3*jweGB_h?k_Ii8|>#!$6&r+JAHde8>9IvUbiID4@g2-^P
zn%PO$(P3{{TzkbdaH14$105BtAL_DWfrYtc#aoWTWAqKeTEkrjIcrsGoSU=o1Wy!M
zXj{kHB8T<9GRk;qb&hSXU`F3Da2RtF=jrJv;>q%-xt2qF*zuhPV`KDJL5A4jXd&3F
zZ4a-o08d*3CANa3lt#;&xMfuD<si|_(ghaT(hlatJXUXOIODuMb_#%<IxYErqrpy<
zb>F4t3(%IP%n$v-wN|{=-Ich|{E0MbK21$k;Tk)3v;262HV7V24P0(YOJ%F!Fy+1o
zU88=Xp9GsAG^6#9@xT#SRLeZ^t_b6QO<GfFwp?h){HCR_?T}sL@qGr1Y1G$8i$mD^
zHOnM4!`At0ZuPyqz$vi~k6}EYbo|k-SG#l<+Aya;t$zSFZ$E6FLL1$g=(u?5udfzR
zs}~i4mB<dGutcHzjmvnTjPkb!rMxeT25zw#_ek2tb}+{qsd8_w#;%52kWxa7z461R
z+HiQF(rP1z5px3aR-pH&JTHIhrF4w-XN`XV`^6H|5L*??RCB@YYvexKcj-;>X93mU
zBaEv%L6<vcmBzN?VSYW+{oC7T14jEU4$JoDTlbd6?RVx|!}MP>q}#7kc?JFy-caUI
zwGBd+@t6AH?@!(RKNWka0Y9kok#wv3Qhk=%1L*=!8NRjG8+eEorWY4kyQlKeF{AH*
zD1Z}K`sZYl*uVt3&Q?CoiZ9_pANmRtDwoX@+aN<FS^OV3Qz%m&3sf6$3Ebv=xS8V-
zvV8U%&+HX;xV@p4au_duHI@j`@$skjDZy0HWX>x~QTugOA(t~{<kJeqFs|&QoSU01
zG$$hZ=;woY<1L0c_X^0W0%c|BJ3#H@*B$qf<9|cPm4G43{o^-92DD(E`scZ{%FOmp
znqNHs0j$R@FFaBl+D<9XE~kAwmnMz%`$aQPP{5bFa~no6XZvf*KD_(;<Y)^o{i6t&
z>{dziz+*4c;Jjrp+Yv02>Apq!Fv-<W(r0dnB!GKuO?cgqKJ7cex&Q{0#>}+ThZgua
zxp2$(d3I8#NXGb<ieDK&!l&jAFt7WLMk4^r%<+f4*&*}z=YL-jXa)BCrg-^@@*e=r
zrZMpNsRSyWfaAKPki4DSX~n#!+oFxyDEACe9oy0mEZ#M!#4x#g+DV*|Kp+ToQhh80
zAQ<Cx7C0g_iL2Dg{N1LB?Y|sQbvq9v<$fh*_hHWmDVQCo@-S?2K5H`ww9c~u5IVt=
zjSuM$Bc8K_c=OUy7IO425WH_U2}Ug%(y&&ZkLT4E)mA1WtMC|mjI~`9>0BCke&{zi
z%2FzM&)>dw8uC8foihlN)v_<b4`YCRcfEGbshV*yZSd`C;~Y-xGzbqK7#xBL3R-$J
zz%cD3dW#?l(ZfvmduEkp!=UAXyGep9reUQ6>KkxPMpv1($+s}|zT<M^)JlsPnmuqd
zUkIKnuK!d|baK)3pU?Fqar$o%&evpht#2k}s{rxau~-lyGva-d_WGKBw-+PhRuG8=
zbF#{}jNx2b`beTnbGg9*<IS6lU;K-O2I*TSOg&Lx6lxIr)a+&S%ZJI9oNGLnCFB|Y
zk4O1V>YV)c<;<Im6$vXZ<{fp<*XgJdr~V{GB@tUqxzTj@q;ev6i_PmV$K)+-^<npk
z<_A1~Gi@NhfpoYyFjAl%<Fn$qy#u-dYiDYTS2JQ+dK<ayBXjG_?dfk4Aa?EHziBDq
zA52;k?O>j*W@9!#M!@^FXpOJ)<Bqrusk(F%!c3jtJiVtPz`uwOUfLF0O9+gwWW`tZ
z7*cV*nS^1ARb@i3IC-n}4wx~&h^7zfc^{fta*fOn>1mr~wm&~2Jt!lT6z4)yYL9{O
zE2g|0GJ#|)*W7M4nPYNd4}05Zt~LHuH0GXoOlsn$8R|jTNtAYKcx7W;b)Rq-m{6n5
zb9#w%&p9r^c-Dl%K;7RCnHb`_oAY;0I5zx|cygMNy-_G=%t!Z3+P-~I1~|Nk<19RH
zSL9s3F+U;w)+Hu?sn)VFQjUvkFuTz?;g&tN7|3eo+RoPL0(td|)=f#op|@SD!om8D
zRI>uxc&}fRZ*Cki64uyVe7@{Pig+~kp6&i3n5MlPj;6j6LLq1$hjg}y!4|Ji@2yi5
zy`~I8%7M<LTT}S@dqn^yDq4H3y4D^9TRmODa}f7IiYu9z3(RKlP-y==^xY3sktFJ5
z8y$n%yd;`2Vk9eF#Iwd&BbASKGE*JpX=EKD+YV6PXEIx<n>3*2UAn;ZZ(_8KPA<{t
z6)|1?R!-p^bBe;TNc3`<O66-`T&ze+cV7Nn<>vlBd>`@W&0%~sq()Shr&%@h;o;ya
z&uqo;LgC3;g>?&fb>NVrG`6QQlCRMH#l#*~`t+*TvMf=NYUQQ8z0WRk(gn{@?RS~&
zp{rl`zE<JFeKbP|o^9*PKmNSrA414aN2jfu-A{33x-RQ6^-vIPk}2Qay_Y>K@Y#`x
zro-N4yTNUcMbYipgNf13&3mdgm|ihmG&5~D1au3!L`--C+$9|F1)aV;;|j>+*;(<J
zoRC29KEcp!A$4HG9I03K@_Tcdy_?1I<{sw{a<H*LnXN1ihK64X#Y&phWc^mFzl%D`
zODDm%$PTm%(&V!56i&}+kY7*1zkA@TwP>{_s&=g)mnfx*wyA@|Vl^lAR+D}C;6WQ0
zTq%a2jT&vDUY4&78zCZDu2Wa*PDEM#+uY0gthQQ@0Z}vfNYoZ_mR)J-=g8?ioIIES
zXWx+FXL{aS|H_!|Oh=q2t?JDzeJb2OiVsW=wHU5B(Bci!k-B)#u^!Puvl5`~bJ=O$
zj7h-fZju!JE<xmss4d6Bpkmz0W^(*|!WliO{Uwt2b40^^wk3zeV_#Jy%9H1$<|5TD
zcm@@kdW)<p$~(t;G241>h|x>E@;_DNNcCQ8v4=v*2U5cztuCqdz6lbeL-1$XSCb6Y
zy{NMJqxrGfvYdXISje9AiEx6NLGqa~Ka+F9$)Q`srwugjj(a4-FykgO?=WewdAH!W
znvyWRNbC>;%M&_hbrpEma4Jr?L4GxC!_jo0p59LfdBj#eNJ_~5i<*m`_;dQN=(T?U
zL(B1A_@`E4MvFv0MO!@P-`bk6rY+(NO`k^63cY0Qwi#dGafEYLi9VS>(Q_6J$+SNm
zMeBRSpn$g-^e1ym{c}4}H&8ZnPJJr{N;+p=ZR0SA34S_MZslz;FQU1ssak>i=rXe&
zug7ASqgkXIPEcMz7~b96h`_30>#=-gQ0#&>t9aEh?Ed3Cz(#L~d;aj{J#u)&P)F1d
zX?%({f(V=h>!w?EKC*?4a}jOC(KIU4@D9y|Dgmns&oIaB@fp@kRp}ZZLL1ub$`BG{
z_Nf7*pYTosf)3t&c%JjU@3#rH(`A68N6EXj{}T-o^6h=aoc>wlB@I8+v%Je*rcPL2
zHhi*=A2OLM`I@?4YL|?+;G9Jz-?@FWJm1PZtzo;=trjz=_8PA0CJOszR(0n9Lzp7C
zhr#f&uRdyX8rzN3YW;YXmMbweUi3u61Dt%s+fRa5Z_;IaUFKP-C`Ab7pir+4iYf$J
zrmqTPGbVeO-)BnI!&;Qvy6vUCu|<x`x6g8lpf9Y=G=Fh){7VL7h>*WyxO#XqJ}y;H
zc~wWQCHu?sGH3gP7v5Q%63-La4tD!g!LRL`+TRh>q=j&@_T0j#WxxHH?U)Nk%PsK=
z+GzsYr{uYQC8fQ~^9EeAsdDu#^|PW{TP@to%sfVVuXbEDvS7**yQAt?me^(g0En-O
z;v+HaBkcNxMc0o)g8s_`fDA(2Ov>V_N?W*9ltn}=wv!}GV9u!}nm=SCrI30R06@9n
zYGr~M_D4Gtf8cap7L+~PP!VNB<A#Grh|y2pAU%Jw<9`D7JUHfQnM%uC$0r)*Rsdm!
z=HeKAK4-J(ewXOKKDZ^Y64lClLi+s5dV}N8xU*|3m(bQTa*NLA%wtviV3%PJa#5cI
zYqmT}3dln|qs&9U=!@$q>Qmec<^=g=dS}+7;-|dCxqc<fIwksFpo`2Ia_^R6<%Mws
zyU*@CLcSuoSJKW8N4gWvNVkjPEqBB@Vij~nU|}<3QCdz$u-c6yj`0cMfn$sVk6W=5
z!H^aqH!|p7Ff<(-YG5!w)W3*lC(wYi%GDDoMweJT=a|nH*}w?fLE>jHEa&b4iZk4*
zYw%|M6gJ9t^*;SIK79#yFT}ZW)?RTL<-bdHGW9A^#mYR83{m$sw@gPiV~D*)hQr{1
zcz)&d1ZmlF$?QvWFVTJ{$DsOLFR5(La^(nr5D{##%*+XiMNVctH9h7Sq})0;Dp*}U
z@Fiz+J-PXZA^A&rA|?k_=Ckh#;-n3Ypj9sB2pb7zFMEnyp5+5!qn0O#uJD*vd<??d
zXldMV47tAMYi?&*Pl#yR`^wek9R?zvm^{AFwvf9$J|=pUaBHtj;?GN&Zyd`z^bawo
zGRd6K&z2zBJ&gOX@CkDKF`+E+ES(;ky}q|DT)fJ3vgNtVyMuD|M9e)qpD(8UK0Ph&
zT)A*u8kl-A=3H2_6OGGFOIdRI77I~MWxQHl?-Kiqu_>keOdG0-b9m+%!<&Kf_MD9<
z^vj^*y%R%Gx$@3u6LOyCUY9STT1?BqNi*VQFEMxNdc^l9oBNdJDehPTShCljsdQm(
zS8T5=?%9S@3iSA6JbH}3<$2V(ZR%Y4^;(<szf5{xrIGZb_<Iu2momi&XP-gbbCk`@
zVJR&(v0mh>#j?xW-g^Rm{LFU0dYF50>`KXo_~-X2t+P_wFiYds&zW;xxR>dflhWKu
z^vX=k;#qNSBf~UzE$Un8j^;H}JWR~XzI`scmh?;X#d>x8G2f-jmo8tKh)bV7l+5~E
zxv6kv%a{B!=+bnww>2fWr`|Dx1<U0g)Dr6p_L%YT+-bRLwo++TQm8IHEi;>xC1c)E
z3fH47f^KqZbLwJWrXD>pUY9S@rFwIzZ(Ko`@h-H>moBbSQe)EPy%girWy@zj&Y$6#
zbuL>jd_Tt?wjP-D`SUJg@iPhWnCmkP9}Rhpe`+PQACG&Mxs^^>j&3#hona;3!fvNG
z>3*Ebm3__PrVn2e5t+Hv&#@O6YH=!NVtsmXG2PBPWz>Bvm(etAmy&yb75)|cuh&1q
z{7m{(`SokLWWN^`jIT@nS1-#g<(Jo~@Upe(hVc27SPA0(rK_3e(=V<1U#gLGe;oe+
z8=pR&$EGFtmwZc^UrOnfGb^B#=*sa8PGhKT^y|?6BsUHE8)3FO`1ItR`W(kcwCB<E
z7CRw1W6!7hdLEibeu4Ur_v&}@MArF?e^zXqLl~}oh;ohyb2WqejP5)6Coi$-+;{N~
zJq~>s<I(i%+7Qb2okDQ>az+}QF@REa>How4E)f6%0RsXC0s;a80s{a5000015dsh)
zATa|HFhNm)VR1l_6Cwmq6f#3naR1r>2mt~C0Y3o$0P0wn{{T@}5{fZX6HQ8TtlFhZ
zaEiakp)5;&Hb0+@{{XW3f?Uho;qj`arBiKxrK+_;&*-a*Tkju4K`l8>K8M7wetN%S
zs;Zt_BFIMrh^kz#bSA3V&-yByCdS)x&i1LnyFyPyK`5rCqNFUt{{TTN$~d*p^;T?k
zB1GYmHggk^vEj&@lZC~tC7dU>=Q@(zm2o9S*;P*vKN=9>K;F!C5_l7g_9$wqX=}&e
zPg1J8CN?`ZHrpmF(}@w>rNJ$;b)uHjI6PHNUE{hbYNadiX47fV+zq$8Cr1&s;K?M5
zDT#cQqH~cA_Oe?eC$T(~ak!McKiU5PG2(b@_EY{(1@78^C{0w8Pw{si2b~SVG341i
zvF0Q~M`7e>!8X`k=R;WfWV3<C{ybHhSe&HS;USwF-LbK`A8ZY#J;i4G4dIQh*h0+U
z^k+s-9trG8FmSl_aH4Zhf{rB|M7e5D<G)r2w)So>u-M!wZ03?hoRugaVOw#_u94xJ
z4;Gg5b+FXkChbjCQt4^s6#oE|#iPSh+~9Hl0F{4alO=g3pCqp*GV*gGQ3!-WAdL;a
z+8HHZ+tCRl5%MR2?8uY6A=yKyeTl%<!&xG%V#z-CMRfNRG8rtM*5GEkJ>CfDOC{c>
zNh2zJsLN7Bq*N>=FC!5#5otRkarPBiQX#yo4l#mB!Lr4c9>&b6Ce-fER*25U50a$P
zm?)`MlTmr<V1?lvtH9MXrrU&9QmMDt&f{#}tsc#hna!z1Tf$oqOneHi?T&FIXxv+s
zGMa{mwhjjqlBL-<n?JzfK6mlhgJgEW3Y2%y+G9d{4yaARLWESB&tW!U6vScb`rLVf
zendUa=L)Ie)Ab*sdi+|UMV{k*h}dE~orc$Tcfi|f$tG-&{{ZTdwYGuTXlUh4<V!d(
z#gl<n^!p^9wQgG;HFz6@cboQD8s${okmQxBEYPpQr-@5Xmk>IYDq4P&-g<4Mn|65~
z$Bi2ew`YQyTYC_xs+6JcC3BHpY_wp9*;#PwsY;J{6%{uT1L4+`w2F9jH?xn1ifB~C
zH-+a+vppKARc=<fUd&aYx_qKAuG}IVua<ut2|`&K`6+l_Uc$pgPnpaM3ql`(Gl$69
z=0A>_V+s6{_Lb=5rN#<qOS-fo7lN8;r)m=VT4$+JlBzxjM~WH9*OWeG-IC4n%2ef*
zIE5Cg$x5d!r!L*mQc5iDtg=%_Eh%m)PDDcNx>CvMv^2a86;twxRve+y>R$yYi5X2Y
z=B0#Hca()^YDhxEDT<PDzmg+m)q@^7On*ZiBd7FpPS=G7?BZsnp;_4+Dk-j0Swi4&
z*7C|yr9~?Tp=pwS$$EVm@ziK(l`8uo^Q^eE<ja2tDO2yzM+g4?w7C)Jg9N)l1}z^a
zvj?t|KVx4u;!x;($W6V)xy_3$3hQ#5RZICq*|f6VrFk%9_DLlClW%&Z6Y<f<k*imV
zO_@0#ZiHH3qP}%Mvx{9+QkwEQ-BFfss?0kh?UJvO9p(8lLm-ZuzZd??=-s}9(M=Us
zv>ZMibXK#5vR6+vEl7?Vis^qg&YT;Vz6nR7dev3UZ;cPOt{)0#oiv2GVJsmsPAxFo
zq*W<cyrNOPqWQd%Nj*yHiYlCTM~x}VjZ{<3QcaWnQstDeCZ5-+Dv?JGbIc0!X|$1i
z7(HHM(#h7`DQx1@ol!SN*4i!HR;G&T%BR@4Q01xLGXiwe{ZjWLybADOO<CGJ{udUi
zb5C^#Y0&=4cAdv=;^C-OIe$W{hfn@Ff3a~|*(6JCwo<Y!Qb_`EO|fKqR?kjJIE|`)
z%xc*sp{2;7<c1_9piOqzT^t^*l1ZM|#l3Xvr<$0SkK?8x<f>_NS8-E2)R9t#l5#pK
zNn>)A8E9-*c}o^Vd^Rd>qs5iuPUIpHhG3LW#pP?xhLhbKN>gPtt($|HsqcRm?FBTr
z-FmdVU|wDFWXlrKB-`Dm=+AaX$%IKd=JR+fTMu)_bzu~eh=D-KvVS(4PKYz$lLmBR
z^Qu;whK6?@nSzX_&VJm?P6bvr>dF(e2$D&9rCDiY71J#=Q%kG5MMq_!DNbi%M966=
zwr?6@(qp~7vtnB%3F(qa(K;I%UD%3gqLovG#lv+prDR+uF+Rt@hMTQ&&SwMRaJ$fo
zxEwv@uZcK(l&)1jC0J63re~27XQMhj68;HxNLKaGoi0%S08GbrDDWsvHd9-3g%Vds
zJv^<w%9Sb`-UU}K`6j04Vbt1<3iHwQdR9<M@^cB2$>_`;h#EOa_*Q{o%5XPbc;*{%
z4|C9s`f_h<+ZL8h)#s@rk<%C&h?f#pwiXTga?I$07mMRk)g<U{`5wY?*)gh}NoBI9
zWchm{XJu?!R*BOW^httAWZfAgl1U}>U762QQE5H5rbVW7NhI1&cAF+o;4|5SAAvm?
z>0_hpe_~yCWv9~BB=sbh;{O1mZyibayppXX-fpx{Q`V1NIDKW(->06u>GXE!F4`Wq
zZrT@ry$iO4A&TAwwwJQE|HJ?;5dZ-L0|NvC0s#XB00000009635fC6D5->3XKtW+q
zflzTm6C#lmGE!i0|Jncu0RsU6KLGy#-h*830w9bU2_^y^Gv#P!!o)&%OdbRu!nLKy
zF`;Ed;Dx258bXMqSE$%BI4TI|@IXlc3_w8)At>VV2M4^1VEh!u#!W(mM5sRsDiI6H
za~e;40Vp;o5Xn)bCXY501tNvN2#HP*Pk7e++A&Q=P$<}JE2zyw+8~1mxeY)8;?|5!
zFr@;Cl+$pj>9xZlf2SYwKj9vW#~DNrVD^xPE@+crQBklc7gMFLBc8@KKrSEz00Nw&
zXO$a#r}TsUAC%@fypG%^2&_c~e~?}%Hpm1JQ@Tud$Uc`-rK5u*YE-FHu-4%YC@aN9
zJfKv{#U`yj7Emh&y<9QhThgTgU<ePC5kk_Nfmop738$MsXh`8q(Zf(6qSDg@Q!6Vg
zJ6ZWseoEBj9OHl!0vjOuPB4eGDF{Ukp%8&XmDFyaYa8rlmgkie@PN0J761#BROU8?
zM+?Guhq}nz={8KC6bR5<1$?hI4UgIs>o<peDBobx&=AhVQ-X>fY39x^2<E*<vBCk&
zpb6lO;0YiKaD~ASHOd|lxEqgApvF;qK#*k)qe+D4fIa&K7dXxaZNkROTw9Qs?LcQ^
z794~yjnJQ}3@v2&BhrD+R;Ldrx@#zsd2v6p*tEh9_Jh5JtJ(&l$Re#oA;7nQR=q@(
zscJWc^ro@43Izgzq>d~fC{$phVWCdc2^0Pllh1Gv{m?lAFg&2xuPERq@vu|e=EM+>
zRp*FDCQjiV>-V?{1Rz?PM~gtXP_C!@e(eyA)7g*J80p1goC^7%;)OqhT==9N_$oGm
zqcU$56(T`SX=#XECWkve3rr`r05m%=7AZS|y(oisnu-cJ!MvxvuV)zvhf9G_o+YOI
z+m)5~zSij%3wTfJL}?(RbxAy;6fT>I02D-nWNgBP3O5=h&5Yb`d!S%0NzO`wD%=$3
z9X#0-i}Jqhjexph8^%erm`#(KaZ={Dl8;hG40?$~7i6PZvS}7iWz%WHyeO_zC!Bzq
zxuJQI1O!9f{MLYZB&-BVJ&r3IT{h}<#|UJSg#r_-$Wj!dN+BKCyYFqT(q(^9(=wP^
zctzfjG9;kpne?6g#sSBa1p)|Q{nk-6&fJ=1Wo1Qkwi5}2N$?a*ASv@-GMr@bPrETp
zDcZ+?r`02Ur35SHoGg@SGP87S<zo1{Eff?Mz$w@vX!H>Xk98ZfvGq*e6sDNLPIi<t
z7LyTK1emsOi#brC5p-;TzNqIp&?JO<fuNW;N2&mrL#-hH0BMvuokRS}9cS?X{U_>i
z)KhbUq{M1HoTI)FUrQ*-1Sd2I$&|<GG63N;xX2tL+4P_R2sBS;l?UNzP@pK;h4!Ta
zrA<zG2nMtGpajU`hdrEK3O7OqRLsEPG^3u^Hx>7^1*bkxjXwwq5k6E$bB~1z6ev)R
e&{_n~;Un_@09}X|{q}J|_&EOnvw80S0RP!awURFY

literal 0
HcmV?d00001

diff --git a/apps/labs/assets/images/island2.jpg b/apps/labs/assets/images/island2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dad67080c3536a0c64c94804eec0f531333192b8
GIT binary patch
literal 49953
zcmbrlWmFtb&^NlchsE73xI4k!3BiMFaDuzLySp#$1b270#ogUWF8}9w-*Z3S54XB!
z_nbaGH8ovb-BrKp`M2_K8vvA*l#v8LKmY&`p9S!59S{V7{a=EEgGE66EGWoGNXRId
zUr;{_CJ6>M#%CoVAS1y0yjZEp$*Ea+m>HRQ#J_zLS65NDw@-oi|I6TC9{>#=A_H;-
z3W5v(i3S0M2JvqIKnMUpLP2~I;QtZ?BmfE;1{Mzf-x>h^f7|aWrw-0*Lqa$xTdB?&
zZdNN@%%d)>i_Tix8&=M*jQQ)#7%mWk(oCpUtL80gZUZ}GE|;~CAaLnBq8|C%+2yQV
zvaD0AFKnnbG^b6gANd;^uo*P#sKqFmE|^;+l6Ky~99$l=IZKR4FlNTa?d{lVj*iP|
zbb^1IF0b&;>&{(W%^3#6&4SV?G!KVse~=&azg($LCVy9NjH_d~iB8p=7>rIm)~=8(
zRA02%DpboaUoAg(HMhJ+Ui#H6JTOXp2>f0lVW6Uav{b)qJzKsAO__{5v5ZvdTEA45
zY4c}7I~YUU(x$YcLGhaH@bt_aUGorzVXjj1q^i;rQ|wyO0NMllLdS+O&I;6sB9S6j
zV{xFbI4STqnbR6Pv}ezYF|D=s*fmN*I$HqtWNf>(ku7J`(>~K-ZbL)zB4_7yNxzvV
zP?*tFFA84KvRUHSa_$gfoa!xcN@U7$<#N9HJ>Nb5NW2I8rn@=P(x^f%$uP0BZUV{v
zE~%kl23B8X2jx{^;&@(ly=fIJB&%$9Oqng4t)GC^a|QWn18n9uIUc?5fH#vd6B83x
zrqzQJEZFbI@|2<z6H|w{lX&3l%Gu)7srNk?y4UuRWyeLwOopy@-f8f`Z||$}dlvyu
zhPrbzb5EPPO$OHV>E5{_5G7^1<|Skxf;p4>`!xR;_bu)5qJ~&aVpS<Oj!z6Kclyb_
zq|SrM?Aj}i=yKCV{W|fmXU-6dB-J=~UlBDsJ3k#Mig9Q0WRB3lU4vnGw(~b{pLUhm
zhR{m~N1lxwMc0cf>R)Rgvfjg`Tc$BnH|O=su62<jNNfK9x!b6wabqClD?_ezJGjWB
zj=wMk^^rwRoOagl)?gtO0gaj#=EQzGIV#WgSL^mN9-Grg=bF`}3(HR_))~wVY+T(5
z?!qnVRxg^xkUgIDC?@z!iU)s$@YMwT^$3zJ{tz-O9e1>Bu9kjW-YSVaZ%HjJb>-`J
zytm8K{xch_A;6j}tRIwGJBl}*tJnPg7iawDJZWiBJpzk5^LV^apH97;tmV(bbZF`D
zsQ3fHorBG!Z^@N|E6UFfy$bzV?<WP(l~ccR3AmjZ0Ic1&f%@WkUwRldRZUe>=Vkn{
zL#|U~O>y+|#nUrS<kZ(MIKk6))h+yYxA*f^4eA+n^T+kK`qkd0WsgWmtPBHxb>b&V
z(Gz8j#K)BZRHb|(wkCK}#Xs2uvtBl*Womq`6#BLu+_Q7##!oDDP>FL5C71J@n%sSu
z<o-r4z9KWoVbB~&GRXGHc+@WI5`v{z*byNV*^{rV7Z<piIZ~haK8R#uxc&izN*h)W
zEe;=CYADYdG;&ri9PZrJ$Gp2|>{wEw%n!d$U8*Ax57!TsBrK}3+PD6Rw#4tvzP9UT
zOtv8+o|f$zGrmJwT%W)C&D75MH!yntX6K=^a?PDMbLLjyN>x(db0Y)~$;Z@a;*p<y
z-71VMf!|$;k`2GoEw+N1JmdSBHrnFx_SLJcl7Q8;2IyR6djD0>oICgE>fWb<JND5h
zw|I}$L(#n8ew`?-BR4&*p`o3ZVIYyrc;5}#qS~@I?9A)WWrN_lO+Kd0bo-jq`#(V4
z_C52y$%Sr9Lbk1b(7MhmiPUKJE1!<Q-zb#(n8lzWp_J@MY-%YNhH0ekq+LPdmhi>J
zql=Puzh&=eQL1Diai@>ghb`KtG-r(?51rd8$O*!|lqtB53sWrSl8V%^SMIu<$C{|E
z6q9JO;8pNS-%@PC{WnEL^&D=Oe*mh6@+l;jw~`!FXs0%BFi$6qROimiH=!Snj#c1;
zKi{x?q|$p86-)Ea9Uu9fNsbF=i`ytrClrwSCbaoELI^sp;uBKaQ!D0nrdtxrUChSY
z=``jp9^e+A1)*BbzUhy$=-XN0w5Trznon)5IJk9X(r9=`shoG`7gt(AaUWU?q02DH
zF(57p`fv+zIgc#UPu441S%cbNyA=*!e5Uiyy!toagudN54<5g^oSw|Lk3I5bHOvkd
z+Sa2)J6ik!7vjB?^vD>=M_IcgP|;523JN&S#2=3R87<81E}q>0N4VvRZS8se12kC^
zD{eXath&bEdlSQz3_G_CR-em(ZKmWcj_$(UCME_NSpCT2=|F83qZt{j7R+(CO;7xp
zcTco;J~iBm{{R%FN{%z`wlw;)xAh+9Kkil4J)3@5*R5&UlpICLqr5z9q!{fNnS|Bz
zL?ka}WGyU9S~^lKcq7?%vAq&p+<nV2SCx{=?4I3uX(=bvuXZCo6ueXn8g-iMAt1V-
z?$cvz*rv+=RI{`}d{jakXj(!|y)3;>rEo*TmEUDx9=xwMdf{>Din{f?L&<Jr@AYZ&
zZ{p<1QT?yu(WYw(Eyu{818yYS3iuq%xE&VtqQ&tz-_$ge#bwX$-@$6`UA{BN#~xW5
zC^<^UM6ut@8(yAZO`kTpjmJQ-j4S64ubOLQA<Okc4iuU`a1_#7>1&$u5u~t9KV+90
zCDdyEXy`{~3PvryR=o+J{OxY3nSO09?cclSX<Kb4emfFkuKouoc>vqQt=KgF;bP5&
zVwjNQADM*Ll-6vjvaI-CR8=LZ!@Dr=`f0`;Ha8?Z4}#OE-zy(l2v%Nm6~=E{6OVE%
zo_tcvi@sbAt;p%n^uyOmno*A!8kIm6wDo}sm~`>+8q6!0D)AVfx__L#pr%@%>rYKB
zzsAIZ_V0Lju3B;rpLMqiteLctD3Ayvf$t(Y=ySscha5mGK=Cj7Fe-d!b2;}#wSr8~
zu7>uDcUOW@>(Rvg(|S)PQ++|O&0|!$gX^1(J6Aoaxp@k0E{-`1I|h+LT!8-!sOtAu
zT)ShVlTslVESuTQSMG^U=DP9H5f8~T`)5KF!jjbmb0oF!`9<%d6(dr!+H{(cB^e}s
z77GSHVKv!2e>UX>i}cGX$JK9kg-@I2E{dUnimo)-^`SO=uJ;Ue8Q9$t&FoSEa81ah
z?|uzwhS<2Xh6#}08PunTn!7^z)fUy~{sGKWah96Q?{s5@4muv+QFU}(vOSSjJ=(V{
zy4Wj&!f_jg=*T76I9L*)qf#Is*(Urg25nrpY;p>*1-d<NL#N-ma*?mS)L5gJ?OF+#
zt*luqJw@DrMMlJ46KN)_`F<n1dYA!#F%WjfNfn$U7wCmVX1IHpJOAWE47F#}*tSYt
zdNyYqZ*qz<8Zqtk;?4jc4;R;%ZIm?Pf>JYqPD2##p67MZymxbW^KKy~r%_-k$H%7v
z*<wku{&-1~ERGjznCtzNg$;|c0fM{{B2dCPKs-{xa=LJ4|Kk0sN-<_|;n#`7E7*$N
z9iM2mFvW9IJAuR9sQfp+8y-A0uDph*Y|n&WA9<QO1(f=<&Y|<eTaFafOQzzq&D5zo
zu`R=s4qj!9E+eJXFJn0fR-K*^V>I}fkpW3H<v9*b6V1L+&f<(%&&9h|Vg~}HdC<AL
z5Y^<Q@v5Ptq5sM-YYlo2zUU^b^pF@5q%f%nGUP}xZqHQujKm6uH;NYwQ4IMTV#lr&
z_fT`62$S4K{W!2TMao@2h_X+bO}eg#9Dyvt5SC4Smj3HzW~LgiHj6n|omnIQh#Y4M
zZ9O|*xOJRd2R*JyQ~-7eq_`GhKlvyijv>W`kI?6P!eHc(nK@OY76t1c<F;~717orr
zjzCiXDAGj85i%AL$^aS2;090CC{fL!dRQwcxk6Tp<FQfG=27FNYT;Wp;TaA#4lT+6
zQA$`DGC;Y;qxYDX9WLZ-dJgVxkJcXBDzO%EomIp^v6vE_0cje=U{Iw+h-ithNdSw#
z5r=wEidl?_88cRT!Y~_s=V>J&ZQaf-x@3Zc1u+!7Ds%!%oV2u`bOO4e+dxRbJYgaO
zn)VW<9Ihx*+TJJzfLd6dg>47`Gzft=iIavLBCTV@7v1f{9l{nvN|1=E!V3zxq9Uah
zL8cT%hJ|q;i<6;*g@?8<#zSC9`x#<!dXTczq}|jsRuN+PK0}qjwu*LY9!Jqvqa!H^
zKQlHi3~zyihtJ{cjz=^;Jn2bw`;cFpd}4;iuKO7p;QtpE{73&cGWZN<ApZ*u{wFYi
z1b#Mu&|=G4!m5k$PC2s5k7`xgA9Z({G-F#zr;}q4-i6f*8xyiGpSS%IZD6NF#~X4;
zr%ktIo#yTQTPoOoV$hn%>rW|f&O0ft6(!%~Gh<uaI*~rkg1pDDABcD2kSa7oXKuyB
zo}M-2ZhI7(`t9RaI_c2LMEVEdPX_K3J1g(Y^XRy3+QUOUlcoGf`r85}-jHL|(a4bd
zRFz{+bp?wIIknF-Y1))Sj+grsUpepPS&PX4wPVr5TS~}xbDpE41Fb&0Z#>*NUFj4I
z2deBB@ucR&KBD$v7v?B;(}nX?=4_PdZ{b*3tHU`a<~jV1DVN4ERN%8UnRGIr`cVc&
z-UPg<M7O)Aq31u$c<Zxt;)0EMKjoz-lX1LSFFU}@0!P^%^c;eHQ{Qo=gT%btoLhoU
zhnarcRh^*acK^I%kCOg5S~=G7qF|L{d&Q*6)OHcV_JLbIOzg&MYsYGyiwCZ^A~-x8
z`d~B7okhf(;(aM<VjHHNcHtz_^V-b`PZyG5fD{loFHdBTjJX)9(X~Gs_psenng{y#
zkK(BE{;sSW_MFUK-OE<6G*g;m5O({cfNq>U%Cp*zzjkM|G4KI|&tbAE8^$wpaJTzX
zHPvR!E^w+e>nHEtz?sgglcPGl75ghPr)^T+TrI^{4nX*P#4h0cCzi7zr|l+vONBif
zH}T#NDu-9mt=V4QxSG$s^ykCI#Kb&r?3^-{OqAoUo<OPow`GE8yK;8YDU%OIAVQXL
zj+wwo<;2~Rx!#<7QPiQ3JOFQsJ;%#_imBDyLoZ5N(#+(81t5RKo|<D9OQXo(ns&Lp
zM)`R+8w~uE{oY|VHSfb7kITYRwV6tK+6O5>COlV&y7K1LA#CaV=Pm_r>?{B}&3=!=
z@y3Ho&N@6RKB`+3K*8{GL-+g6uH3cqkoq?@+Xnz3!)sqVO?cFNy0L@TlRkds2R|*y
z`o+h4>W$8vO@2g1@IY2pI;*unDzT((-O|iVhFV5&AHooKh}>9DapUr}oIO1$YT!*6
z5^o~?DEoIyN_(ZGV_JgA8!0KenR$o?*Iw~Sf|;2Zn^L_n1YX+y-ZGDTrzm?mS=#G0
zfHXbJ9UZ4SpPEuU@eBZj?~gv<v*OC9oQO+2{Yr{H<PbkxvI9(?2vaKg0jWZ5CZAFy
zDnCjlm<EBKNSiC<jNB77nj{zpDViX|bDx(0Oi!RV0R+iX#%MRnkVcK72}TD80P84F
zpc4=%<5BYfVP$a=(g|pk;i!2K3?e`Y@dPrwu-JSo1_&}}Ed+A3q_8Jt^zh&Qfb<~o
zc+~&T1pw;51>lZBy!;o6^n$LgWuQ!D_3P0QhJ3J`gsFDhmMTI8Ra=_?4qjWB#H_Hc
zou>?by`B2P^;Hg)bTX(IW~uGFxq8NCb;k2rI3@O4bIMqoZC`~h<Kj{m{5(6O<tbPN
z<({fsuIi*pr+XTP%1V2&DcefkF4mo+d8xX|$?mR)?sUCVPgR%ck6o@_+7hU0vAL;c
z+TZ9*d-2bar=?`gH{-4<rYcU2T?mQIYLlrN9cIP@*R@rf;<6XnR1IFM-v%!28Arn|
zdfCqEtA@r$DMQsJ6OkTPu?6hYszoQ9?X}cqZu9c#`vIqWe9H<q=EcWD+1kxopj#`-
zj2%C^QJs^lskH2;Y1_=XRhySl)|6U^IRmGAbHdj{t1f0qz3lJ$(GUg<ZRv~IE{>bF
zO;s)9u@%)B`auZV6j~Y42Pa!x;U0=XC#KC?A!V4em<ye4dXAn$X*tQ@sp_g{Oez#K
zqosD;BmPZWUJrA{_$sw$MCi7;pK6v?y4>a5%&={iXM7hL+gPHO8!MK&e9kA)rq=t}
z%wnC3&j8G`Ac9Tqc~|#&Hl8~d@K&kmGXMs&g8%+3+Gw@fwL<qIBjWu=n!2ol@xh8I
zZCL%K?GkL+uW=V42h+@1PV~t;=VmoBXT3!ov^52QslvN=+G2XiroN$mJv}M5+?oWy
zR4{$8|9o<u&y`oOJySnjx4ILCknL=;X{c^sxvH=MFY5TRBPPSBbwv($UAmUiR)^2m
zpUG+52?Mm3y>In4+U&fFd7U1?I#x=PkjmI?S3j>GufbZJ^V8p6mr~_?IRFvAx>9+w
zzj@W_xX!11OV!q?@MVKRv%Ioq_L*{{Zo6VyYmsyQ?1$xCCExb2^!}{ibYk05QDM_^
zX8@To!~Zm~Gp*nRUV12LoY%PXgUkTgzB;%`Z&p8a{`#*|4`i}+drq}(!+7>)#%5C$
zWAoYFHiQIcsr6A8PfLY!m6iIZCP)GKu2q~Vw^Pd+t{QT-T|fY)F27@^M&VTRnRfFD
z=s6DnvFxJzqwjRR!r5744*-BFEJTrLYd%xZarR*Wd`D54$D0G|syErRC?x{El2^%M
zuRGg-D{Nj!VGzEbwE(r-7Ik%OS`HW>gJ?aBXw|`=4cadSkO8nQY{lwTEedM-S)^Y{
zb;;D!Pn(K$1?_?P5NeDC>$X)DR!9CYq*z94^y=$Y64wAS10<tGM$2_It3F5=VeN><
zCR<RG@uxjg0s)Z!(f^D0eeUOI0CXS*G$|&FuriDR*8jo$ARr-M>F2uD)YRKFn$*<1
zvDEavP1Sr(Yqa}QjfA&MeKJ5bs>vA-C;FxiYCqL9%J#gU1Y%3NP1Q{G)*tbZ0u8qC
zPinS74^>X{H8l!W+C9BBOpkEKC?oGU%^%sB7tPC);LUZLK~Ie;@F#69`+RtNEb4t^
z?+U*iY--+vYDyj%U413g)I9WhYmPgc*KJz1Y?{|DAJ=^*|H}RWgmeA!QGN0L46=(f
zURYn&KcO)Metzie?Cj3$%&V?-yRJ9gkCsXGjDw4Av$w0J8@1}Tv+9gr)orJDE$O#h
z+wz-AKFbDscUJKV{twH#mi3SAyO&ot|4G%Xp6%`JVWrp7{2v=Vj)d_){88&1l@K8S
zp1k6~8t7rJw+mNa-Oqv1Xac{1!Jn_=dZMPL)z~E-+sjkHA}_nc(!goxM8j1VPA!Bc
zU;me{Mte_}V_w%11Zu5v{(Ky$B9r}nR3MYF&bzi6`p3^^GLBe0Yp&A+Ve-JQ7Ak7-
zogh%tvaZz`=u@69%cdnzeTA+wXsIc4?3W@(rrwJf9AbKFy4lwNxMWd*VCl}}M+Ti*
zLt9v>{lbIKQ3G$ys;RlUx<2T>${cv@9pZ7_chu4=BsC<4jc7ZuHoy*zAxSaF<}pLz
ze}h6MmYOEEzk@#I_|(>aq~N>+0{sCk>wb!A6#)VjMjyx=SOw)+w{XDrDUMaU)P<re
z9t~|n!c&?cA|(dssDCxq*vRjtbR7Ka=h@k^Zu9u5t@bX<u5^Lil=?mXml{sf3)g#8
zS?a5WB)a&KmkKE_Km4C~%@mg8APRU5^pL=5t$I)=)8z;EmUr{IS#n2KTW|J3Yd5G#
zKu?dmtp5aW2?qDK<}?&nC20UU*T_El5|;`Bs%G3+j=^2%Yvke8YS){M>xrwYo1+3J
zQu1KpnVQ<v#F##P;xSI(7~LPkz))3Uab*_x>mqXO*wTCvHA-h^%HXYGR?8B+cMH%b
zRnTX)e^PTVj+98Kt`n$#(7`72M$6=;+VXb@-L7C%BbB7vfIF-z;+lX#IQhcwta7xU
z23i6RNY#?@$#!z>hnH6;?Q6G9OO2<jJWPuE08P#)7N}khSU8OyF8cXE3Z$W4HF;q}
z7k=$&%q#r8I=5UGC^Gi|4#$50Sbg#jMSZ9*$R)f!87oPxZu{Y27rdog$q^SGq5yNP
zK1EVVNeVYjL&-jD$!VhAk6Y=9{ObT`(!|t2RJfVnEG^K({_~VR2?6p6q?7(Pn6PYw
zGjWAj>%$26cuR^U*YiZp0s6zAbHde?p;fIG-5RccAg!yB<;Fas$bT;?Ia=O2BaLng
zBf6QVXd5O5`&T>Jt)NKqjoAwVy-A1=$)K$J>`Qz5{pUcvA|c~e(Wz)Y<2pDjhN#1g
z^LA=Nkjus!Oh?6M8JWaL#9`l@GO!Y^+Nb=&D{bkq!Pq5y9)%AW(6tC80K9)nU<W1T
zqVs$Eyh;|edR_NAA4gipD2Vbene(lhK#ChurJ!*3E_xPygofac=($!=2Tk`ySdF9h
zPh%h*UQ$(XuE6sNx{>k^Bv+Tei00%aEb--Gn_B0PM*c+rJYW4HfQgq2SFCaKDQjoH
z9t@H!ESysWkM4dN@=s?k#K?-lwRtW)io{xjz=8(t@xNLRyb5ITY+`;4Mm+oE+~iUr
zqS2Y~V18gv!yw_aS2(7qd^`gmDLOK)VB~$b)$3Jc``ekWGfyeGgmP3P0%OvEBuGk!
zZMSl-N(C&CMzo)m57uv)>paVR=-yIOlW@Q>8j~BQpCqhr6F2e_S;dwk*hf8}2G_*<
zXG&sCWQLyOB3R;;AN~Ur)Yamd_=jl@5=bR%4=R@jlbVm_sZUc-N$*DD6WP3%3AAQ=
zh48w2nr;=p>fZ#Vd=aFU#i2Gy7AONJYYMRQHETrE?Z31RSWD6G4c`b%Lo!^1Xdbn9
z%XKj?{R2d55hlls&0&oXYEsabYWLj^9r6^c@5c!E5|cnR6<@u;+yfZU={;;*y|!@P
zb(=ap(kr+1zR*3-QvYIS(TGmNHq(G1kAU1Yw_@xa#zHsU!Z~sGX?Z7CQ4s+&*z-^*
zwzARiG87<|cxrA9g$~^mvby6LBi^`X45zxDxc@izQt!9GK97!d#eIymnHqHw6#h8n
zrs?0sP{nOGzrQ5>1LWThXWfSOEc+BPXSN^SK6lw=zA?}J4Y7rX-p2EqqlqQr1Ns?P
zCcIZ&-~5cK>{glFn)lMZc+#&rc*}w4Tk_j8J!e(@#1!!@!0FeR#F8AgRk(tM$6dA`
zOdodE?H?M)5@^*;DL6O~RAH={Qc}ad7y@Bb@--@{XI{Do9~!=(e*mo0@f`XIkg4W-
zR^%{-OpyL=cfmivx4#DL+ENKv{0MlJ+cy3bWz2G7g9n@XO|M(rC$8_+HDN~cXu|0E
zyrAKfH0jB$%@2C!$o7xr=bA`$l?c^-LCh}NZ|<Iz_C~(B{{R^?J9hP-I`ItwwScvy
zV$`x;fFcJn*%f?snM1~Z6W#v-824Y9GaqW?9=i8*Ur*Uv4q9G`@>9P+!Nm*w1N7E3
z{{sY&nB8|zd+C1Q_>R>@fa|5+&X_(v@xnCN=<M9CtIvE&wiVwn12f54`%`;IHS<d#
z!ryPcWBN`108?A<!QME&7Jqjh1Y(PBK0O3sAOHdi0u~Ae1{NCj(@pp<feDF528GTl
zqGAXncfcTJ^N)vS5f;r?{%%y)J4?a7b1kN75KwSq{5yft@&9-aP(qMzY(C>T6z7gT
zrKCP{_+&Tjq@id7gssr?k1Ur#3&6|ZHt-jkT~T;fmrH2i<@BE%n(Y91(tuT)EABUV
z>LfI&V6z|geucP5ruBr7h$?T&uCaf<-dGIyRr<UdzcayL-t<tj4?OElDMiIpsr!=V
z7BsHVeC!<8q&p?S1ux#~%}g*VW&3i5T5df-!^gQLsVIJu4rAOla9fb0AhrinHD2nE
z$#jMX#cd<K>fPT6kJqZ1MQ!$X(JFR#B_13av%AyAT}=BRqF5w9xGz8EC=Edk)G&ED
zWlwMrkGKj7v+O@Ow^bxa>@ie5L!*0t9PN4~CGnv3#3mD|D!6gNw)`Q-9%%;|GmWZ}
zt(?a|=PQds!7G_Ks!H&X#||Z_JOvY}EMlrW6{?(8{=M^73(g@N7S6e2Dh1@x_M>R*
zo~E(DfjSTyF~r{PC42ogFsh{$bSDIKFgHZIXpj2P5arDr6;5mCO_o)*fyE2%3oy5Y
zzMMtQ8b4LT5mxjRGlqv_J@|t$JqNLHlX~xzBuHo<lp2d(=mxRBH%grb#BYnlr@xXq
zd<1wF-s`3tVt72lZ^kCc^ihd<s_%aj9(0Mq(RWXFHk_^Rn1&93OQK02QjuTm`Dy2b
zSV_^3yX#T0T;@^j3T?08LY&3MN1;hE%Y8_p7Zz$9o3G#-NfeKc7C8Qpg+@$C2u*zR
zoSia$o&Tijb7~u&L2Z#)V2M-;*+#JiPtWyzitwtS$)RFeM0{fzyuBTfAxrmL7#Y&B
z47%`+k4vP$Z|J1g*nL*IfLmgRHEZWIk^qHZ`e&R;BNvqx=QhqVDV7)RKY)F8F2Wf*
zd>4}jBSwa#({V+x@+_8g6xROUb4t|L(YBGSdMU2G4A-w6LO+}YfAt}lgbk_(OAr$^
zG%5JNjc>-fsXP;<DiVB#AFJ~NP6%5E-WrX*na5<j{ptJB(@-_QkSva5I+&k))I$`L
zkn^|}7yulj@@kP!)O%5Ut8qUJs}C!AHO8t@ame_`rddYz?_jo3|A!#WSv>M{`O31W
z;cD69B4HgV#GSW_i}+aZqz@+STF?xg?~hr@4X0&HBAv;S2ZVk$)fy8-|4H`K&N7}T
zV>Q{;@YC*_e}GXfLOWDib*8=*`W3v-nMb@W_NRWm_1lpmh2KuSl>@1>I`T`6?`ajI
z1+V0|?Y+T|(MuHBMRyon4j8tW9tK03Ar?j6WVS$E1q`qk2Dbzk;()&eic>G^19U4<
zKCFtF6oSgo({nVwWi{{Wbb{;DN>pFFrfYm$NeSXhhPkr(eb6!@+A9s)b)V`w7H$5_
z2^-&TM*p5Q!@Pe64QC&TKSCFQneGNP4;&Q558$?n;w-<o(<P?LRg!nV=2?DAle#wl
ztX4bR7Zih3T*VgxB1^S~clDU}Zc2_ztINZnvPszz`12nIXnXXx`bD(KI4v5-GqUI7
z`6Wh}5~Z8dB;?^e6bfqm(U<`$rzJjNwE-AS61wD8_1196h+PooTn%ArciQqaw<5iW
zx1h3*WPp9Ljp?M(k?q1yp>XrJ3L3B3rN~l1H~Ra}FJT3-UX~$c|EH#H$U0nqZukU;
z9;J!g;Ij>e>)ch|!@H<=fP`#v5=^b8Ye$ksuxenxfAr$6Z5zTQ)EXROykOXG2@#4(
z2?gX?IE3jtm7XYI(_qJ%Up<owyh&kDJmuGGZGO2Tiz@icsuF`meJ9?2L`-J+`8#D7
zG3g(|yRf5EHb~~O6`nlgg_f9S8@;+hW4RpGO4q}n$DH-X3$HGH@sq!rLgI3M3{aCO
zsy?@NoA8#v1+p@o;8vZ_MbvJfAmZy;PeB%&)McsnT=tU^L`~~@XB;6y!HE4(*df*)
zw`Z{4B=@XL5~h94es-n=YC*frGVjkJ0mjA>@Q>9rH)p57!_ax?EjG0;-&E8my$>;1
za&A0{<}(v`=E^Tf#_!ZZznHpMq9&1XXYl1mZW!a2jF1~6lDaGQspY+NBogxaAr2^<
zEzFxBV+*R4**cV|2c>h|lkqMve%XRdyEIdh2ilSiYM>VU3HZ{stg;6wq-Oc8V0Njb
zxSj$r*Rg&T<=YK8RKD*%{S8IE2YV<W$e@{MXK;hcNU4;t^)k;@^g*Pg05<+Xw+Iid
zS<sShHVN}a`6rO0@j>0>j_(gfK-N)}FIAJN4-}mjSyyYxnp?&%kU4wxoP70E){H%Q
zZQ4=mveQ~?0PHEN!cA_0{dJ-2exT;|(ThdUvl7TKAMpgoxuAt6@k!#|5rarZV%GTq
ztj+m;&RVAEPqHPBWJ%YdnBk=O3-+uzgLH>tGYGiXVt=w_>(4H}0OU>LRLwvh2(IV6
zl-WUaTNrdRb5m1FsDVhA$At!~M=Kkt&BpYp?F72~jSvs-B*s-XXhto-gW%g%hLtEB
zUer$XbCsoD-BZekpA-)Z+UB(sVk+C#Vsy4M>PAy)U@Ql7j0!Q&0@-eHFEhl)LU~9q
z6+x4|bMp5RrAaB#8a$}Z+m7FPEjKJW*u!{A31!zn!pX8ER1|#@zsr=SFw79oCmJ6h
z(5MNGX@kw){0q@utcHF4zZS%{kLHvu`(OIVf&$X%4E$}s?rcPOlwaEVPja@>pe3N6
zkklV#tNmQBcBYwSU&9?|eWF9El{8|1P;tSh6<rWOiFly_GXr!Xts)$RMxpN2%H7WN
ze~9b8G6Dj5%-bw_8?zGiRy)Pg5$1*H8W>yQ9#yra1K0_u2P~?T!k;9|t7E5pIk7mP
zFk%ZF4JY>T$*kO3@OtqRKl=DT0hd+F?U=~4y~7~4g4RCc&@jGqOgr_7m+~TUcQS4f
z5?B=pOz$2@Mfi5Z(#w3P@M9iexSteKK2$#p52nBp;TPF2N5{pI5N0tQmd(P9uTB~<
zzV)tDg=SYFA|hFrfi4Dy2$QYP&eQF5&lrInLW{6Dc0abi8t1E`gCWBhf>(JbizvcC
zQ?v!RjTLzh{glj2a~9=%23h^S7{4RtR{r+F4sJ`1C{d-;IPF19k0ZxfF{7e;Hz@te
z$)SALnVR=U;@Ep(8hx)^qgJ&E<$yy)u}r`7b6hV|_|o{t3SyOCuPkw8y=mo^&`^6t
z`yT+K?-!|2l^yE@VeiPgRw#CF0;<YYtfO-q7)5z`1CFPK?4>Xa<c70@?e{}GIiM0n
z&6!Rsr^5LMgq;MvgjxV7<F&9LD<0-ozxZ#d$!~Wm-47bd4Xq*t=c{gnDBB8#dbZ-?
zwrO^HQ|98{8H-We)e}&`h>Hz=96>s0EJAJNeAd;Y9hqY2oCqZxy}Im}r$GkBEWcHf
zfxtX4kLeqIpJ3#{-!Ouf7#fbD&5+?!kj(e3S>7RP=;{d)Okm}vdlrGLq6O5;kTiRC
zDII;YSdxmmd)TY9yr&5vT6c8bhblZno0#pL@*T5<vA^l_3CA#%jVYs}#Mr}*smWVS
zGh`a|8iJKSfvby@xQfK5e?+AI_nt*&n^KSr{_HTgPm*2y0=WQx_lm3lgpUZr-R9#(
z7sPQ`ebxtRoAq5gZZ1W1Qyzrjp>8f7dk<jMAcU%6Fxb?i7l=KqDz0)r2wZq!KH~KY
z<j+^-_{6vR?92F~Uzt`XY@T?)LjqKun(a&tr0|Peb1@BVzsuMv^@%c9`6!BAB$^!V
z#5Yld=2Yy${*G+pD$XW^Tb1X3XA6|spbkG|mB&<K{yGh@ul!c!Hk3SQ49vR2lxU=~
z%`#l}<ExmnYn%%5G1YlbF=;h1hU^3(DK!ucU|CAh<oBOtJcf!XL}tO}e+$u`8~)Br
z@4?}BzO9V_Rp5PWd|~~HU^k0C$1jC2bny)%&Aiz$$lzE%^f<#yY>~qd$v12jr!~<+
zZ5{^Bs1VXkw^t7sCXUIb;LbM7n>P;wNotZy*iV&<_(ibnIt!bpV9z;s7S;&itG=^9
zz&>HZO2_tjfEfdKW{EL~bfj0`N+jI?tPQt?7okYS+M|&M72;F2n&BV(g}xp~%WQ+P
zjSed_%^0nOk|rgSJN!@9PFvyH6Hk;lZb#Ofp4K~VKizR9%ACZe$}DS7bnTr&Pg^%A
zE%*3OyE<#?5GC$|VuSY+`iaGUZ$4*AP*>l;QZmP?Rw!H~nLI4TOocm4z0ew(?_KbF
z1>(p*K**p)FSb{g?BXVk(witFG*k=^MgQe2$9tLg0{K}cg_xSDUwuRA4nk#Sboh`U
zOI7O_(UWDE4g*lRSq&`9$EZd$>p^Ew!vkZEBUXL6^I9<SC7wKkIM~Im8Ux|Nd1~yM
zIw%3UWSnp{pg&qNUrRd`4laQDC&z|aq^|QM8wwia#OAcXV&<p=sd_^K4nsP*)mU`m
z6?czMqO`C-G#Kt6kG2F!T;!OKncy?ZLKfy_nr)e)E=hZ#r{|XIpcdw%IKQYE&7uXl
zB_4p>UdqBzLRzQae9EJ7!s3o&Cw2H!_K0WfJuBdxmLdcKPyNs$qL9g@?h#dX1%>SV
z@v1xERbmmg&l4-$^+qLWXOtuaF(2Vcb+hKH7%mhtE%BKf_rF+d9+ku9&T4ZuRhXyv
zQbqk4o7|6F1ZMHVCy!6Y^y;-4Qz&3uRCX}6(H@4kJK=pKM#F=(1Z3Pg0odDAyj2%?
z7N<a4>*z=VZ`Q|x0Z570+*KY#@H$?Bv5)&yqrweq2+iPIAL@NX>6S6W1r&`N!T|R_
zz=Aw4HvZbQvR}EqJdc1!)q%A)_TC0Dfj$05biy*~4_fEEuY~zfF(AkBz#QR0#6yiu
zL75n!An1ihoWXiy!;1+I^N!KqjT_<ncF+221wB&LOS4GqM4<RCpdtLlL-E%^{WjDH
zI{|&o8Xx_TBdlun?a?fIzY|8a1e~79?5d@`qUql1j6wC9SRu0VezTQ(krG#VN~I&f
zo&)yIkcD_4mcUD+0lqF^aT0wke5|#kePD0Q@_3{I!I8wyCYr1Y!V_+@IqM8*Wt#EL
zLT}ngUMuw<;Dh2(U1YGYH=0JA-bH-xhu|$r&p*Jh-_;j>2P7YU`>pM<ukWyOhKHpv
zA~myczd{t>XNZ2m!x<+f3tArJ(0omLyImb04rt(xwC$}#aYRbL$5o0Go=oG_Fdfl8
z3~WZCFZhiJ5!Ix`VAX^6LaK|Vrj9DHdys`%;8vI&6-v6spBAPV(!;AeLBmz!Y#%TE
zpya%5&<>lBafY;%8Bis6kx5=4zVkCNay8RaAjHz=y9a_2RG&B6@^Nm3*L>)N5QnOj
z`|L0eZBqfEvo3!=OdA-}>5Ul8v4l2UWn!iZrE;}%B0h>4W%shRY!<e?cQSc@4>kX7
zRo3g#jU_|6PsOU&f=y9+4UPvEo|u7>rs?6pg@=4&5~B)v^gz+G!2aeEYn6no0NZY5
z8AQI5mj3rZp*X(efc5giQ!3(x!c1f+ZOE$sIVhIA=Gjig7q0>9n?YG87f#-IphLBd
z24kQdhQsx5XlPxd<<Z0XxXW~k%#A8Jr5j4x0mv)?a)IO$(Cq1oSFZT``h#|D$;ULv
zMMFc8fcQqo9&8)2>imX(Q;nEoNgk4~nu;kW0Uem&m?h=_s;0XhIQgL|7T63Xur)_k
zFy=J-2Y{z!8Oar22BV;1v{AydwxMA5%DvAx`nON$C@~~IZg2?EeqgOn7X9iP+gZs8
zZ_!3FPbvCaK55}7;xq@N>IB6UL40DXmW7DvY-SLh$mED&|NK)aL>1NC$~mhlQhxtT
z!qlA6baz6i0C$z|&UupGxc8#b6L)Dhk9fsYMkD$VHRDU}W6e6ac;!LafM=Mf71L=O
z`<+Y2m3wE_=7!+yh(I1?UKYkPgAyhro%HGo^O&^JSu$7tS|K0AWfmezlP)-Ni^=MM
z!dGZ<<KmD6os#O}CX3_ODXx9yCz)5X%NCDY`fW|=iM|nKbcKGAn*C10Q!>@ffk;i)
zA**LEbXLD@xY^E45kvm9%z&x3Ap`I4oy0+35uv891hzs06C<Q;)@h|8cIiZ=oE<#A
z4~SUT%*HFTz`1F~G;vjKx~ImxEc{e8L!l}+@DQ&InkSd?QQyETa`Ee9@IWu`WzG0c
zD}fTWokgWqu+!y5zg?ZXJ$nLKi(K8X_%wVR$h}rW_6zi38C_(aXb};mLoWe!?V&SR
z;Zpe51f)HwuApy5YAcQ!XNj*au$9QoJ!_fs(T~>x#rsFSHbi2m#4nq7TB0I3MY7o!
z>VE)4dGPfRq*REqqmDysl+c6xLHcbGeJ!tr0sgeSs*Uduq>fwj(Ne`~Wf1lze~H%Z
zZFDe(g?L&Y@-T=yJR)B2GnTrG!lLLU(_T$<A}F8i;9Lsp&6l@;t{s_$Lu6b!-dAmV
zYLRN?v3n#<134qBI!|z_k`CAukkAftZZSx@Gd_-*<WVO^VZoP!I!sWJ>F!WD-b!<e
zDx^~jmW?&%smiMDGow(3%J5QCvQjyjCYS1)%06bX#(aJzNp~SQpwH!?njvT0P9d#T
z9ZWi><tNgweareYRo`V`;Gh9zy`iuxs1-{^HObX4FJv;m*VxZH$hx)5ZM{HH8Yxpz
z===KJ!Lcnb>ba|fOXLdyX#mn2Qo*Vn7;M}8hIpVl%}RY~ZlkJiM)XGu*Z;UmP|DpP
z6Dl?714Bqg85$vJm*aMp4eq>#!8|xE6a8wJSId7DXNz>%#7KfxO&U!fWPC2tFIuXs
zQg%MN5b=R#afs4rR<Sy2>aIxcs9QX5YQXUiP_^8+2Ja~*9@&x&^a0Jit=#Bz(`R~~
zMz2dI+L-MTe}x-m8(UFoCRo`OEWbqMa@oDKrt?whSC0Lyehkw_G~ZuJ)SeL1!S~ei
z+(!}tn33`SPWLBc7gNvKC@9z*CqwAR+A<~~28=ONd1Iis^5m3SL0@=&_rMK5Yn*Oo
zm5$|T<G5(Sj9|2%08=vX`ckn>kYw4nz?k83lyH^V!nq7v!xn!UtS)M{x%>%*>W!bz
z{aw2&6z)ul99+_WU(%>+UR=sf|1x#yThPf3#~>N314ilUEQG@r@Zkz*S4yt>2UrSU
z(Pzng3cuC%oNM0ZAqijKCeQ9CEH)cvj4w9l<P2h$!rlJqHEXki)X1H4*c0evzEEmX
z6T-vQEiKHYKv$T0tQtz6J{qrNRioY{5oagBPmb6Wu&Gz1vB*YmdVIW19=Kt5CFSZv
z;F;aIxdr)KoW>+-AqlK*p%g|+lp8OaaaqFK6<%ZzO!+#?H`6a_8l=Z_q83Zqjt0NF
zhA-_5FVAH6fr-Bpc96?4T>r+~5d7>hs^ymX@<Lx7c@2L(u_(AS8)e1|ea5!^7$+$m
zdkKQ)(0<#w3?052wk7ZkzsyRxIqLhZn}d5AebS!QS7clLr&P2cwLbqe&4%~vo$m$n
zj6en1Pdpq`p`o$qSD{%LXI>gfV5#`rdW^BbE&vm(i3+U;M`+1TK;x-H@Qc-A<;Fm?
zsn+IlY9zeeuph)s8OeTdh4|G$z;&mEsB`GJ>SOco_LEXCY)DVGN(m@@gDUyOBJ$^Q
z)3U!{B#pbCy8m*vnfP|rP|Chqan;!r$}dnIDztVMijX+|a^@m#>==d(!(`S#V}qtd
zwWA_wm5es=%`SgC8JOPo@c0IfiQt_Ye0Pnmwk6Ia<EMDCEWnh98#EIM8Y*DnA@}+V
zItyd}(^IIui&hSA2y!VuWLBr$&(-_wk$305we@4u4veluTSB{V9S+70hX#fMTb@y#
zAEZLS)BV>JN?{QNd%`)Vy6RD(E`CazEYax<?&$Nd<>16LMaKBv%gns(%HgnSc}%1h
zaZ(*&dsP9@`E)prnj}XN=p3<ucOQddz-xKeDBx@maB7&^V|OVlWSXs_!<e{!N8ilY
z)M+}NJf}NRg?fX;I{oAF`#Arw$oH(rOg;5oPxf8b`o_lkE@Jcd8U)D^Eewn0%@@cH
zih6-|gFr3!oS9*S$R@bc@Wk&qw4McC##x1y%dO9NyJBk@3>UiZl7Wu->X!q$8->X&
z?`p+4T+!2q8e!djaDCJm@T6Kp@2t-XDH~G2&{en}Dp3SWbQxZb`<1;fp^He0R!>pq
zLX_(S)!0A#4-<+qHF*0Jex-o=X7n4IMnd8v8oUdMmvI30=lO+|`#IhPGXoI-qa?-1
z<*!&(@g03S@>2IdNYgsQ5$dTYi)=ECJ9Fzp!ZG1qnWkUrgaxy)GHG4@0c6Qs6Q)iU
z?xZ9xgpS&$${$01o;<U~wv!km^xt1KpHI5s%Mn14V?{}nHiZ5I3{dw#j!yccc?6E~
z1TqO)eecXJ96DJoFWzr9l+smh7@Dl+n_vR>4jmtd_FW8+wn%k3y#ZZeJEZq4U@oT_
zRUP3>R(sr&c4F;w!;yR)y4Q%*17`u$ykQ_@7Dk9y?*Pxx4#7zpK(3-_wentCA6CAF
z%_*`V&lA^P_nLBLZJSi$&uohs?cwwcJ&Rs8s#!C+0%EGISr?NS4JRR^iyqR@H8kb$
zfp@OIPo^!e()P<?I!_T>t-f>Xq;9$Q$NvB#+hyv6LY!)`E*-Re9juqz75$$%7~20%
zX+S_hLH~D7<A07`LZAW2{wD$B;7=N#U)Os*yK}=L{C|&X2$4Nh2N^{$1^)xYOJIHv
zF}0iFLqXU#K!Yy(#0EQsKVcFT37n$OpZ}_^hBzM}F#jryBeEc{;FPbdt*qd<?dxaH
zg2=MZ|6_7^9DIoFw8`EjVO9woC5(apxU~JByZ@KR|8f*{4kZVW5+RH5llw7{AxNS5
zPC9+<gb@D*A-AS?86nQY>R&1E$~GX21Eh{)g*FiW^7)KUF+W)?{*Nds68``sXeb2)
ziqf^vz&_`QB_?}GJBYf-(J*H}3#!w&=)yJ~tqn5Rc;DHcScwG{+$bP|cPV_Rc~R!Q
zKOP!j_~$I6Jiz4T_+^`%iM*6V<oHw41Xy|O1pa&FVH4w7Pq`Cal?aGosb!)||4?L2
zg}CeBVsQ_6x0}bnwlDV3g0m?9y%{iqqjkbNPvEng1#Ux|>+9EhV3_Ei5aeO$GZ8Ru
z9Z#s6lZhgW0$bOfij(u4jy(c|eV|@E4LNlp@N@$4hgcbzhrT35G^(h{eUOUm=8tk+
z{!Y>$T@)$5r{K*mp!==>@l6IcmtL9^BFEuqj5#=fQfsg%TWkg$#N+K@PAM(q#SjWL
z<xZ|Yv7i<vAWqM$d&1qxUMNlDo&yiwcS8&!Pz1WP5xZs<4c8Cw;Q$DMKqjVQRnB7f
zsl|l}B&n2RaS+y^aB>h|FP<QGYJbJX2_Y#HIjs?kCNy>nk}d%T1&Qz?6T}hM!d9c*
z`y9Wd;tSY@MDyguV(y%LQF)4iU?5B6Abb0E80Y#0JHrL7(qO%)t0g~4*aPXWsjJi2
ztKZ!n2qTcRoY50W@H(;E#%SEC5t-8?5wK2<vQ2rM)sr{M;T&$fJx)2>8t{%vX`Y=8
zWGoQRnl&}Lf)npYyBEAElp-mD7uws!LM2imCBKj9iF$aBS)iyR0-J|8NQMm<*b5uL
zbJ0NWMmAog9t+;|wzi|}DDSftptCnpr-i}$v4xOnig;R*Qp8$>{zjZ$>~+&#mKI&O
zhW@4R7&hZXq7qmmoG3}!gUMl^S2VZN127e^&r5YBgr-`pYvmz_0cahF1)4>XivV|V
z7YU<rfe0!C`%z0AKB2S2Cn^%BY>~y{<Pl#B!MsNdK1pk=BueZPtrNc{mlS2Dd1+#m
zoV*1j`1#;)VNnWD?}`CS&eFWDHeU|ie&Ry_xjz(4iQ+SW=CWmU!Y(X(JqC~_OsroB
z_vO*EsD0U~Zbv;>$2ey5;A;;=F|pt|IXZgN(S?J=7fqo2#H|=4nM|ZM02Vf-8=8-n
zy8yIn-vMV6@kQ~8zCqF#KXmLupIz*LoG@PdLdyDah?+Di#09#^;gnA_K=_wbHqRCE
z7*T5ee^&JmK#)q1FR|#v6xkx;nmzwHoB4;L(IWG*rg{E`<#5;rc?30PkEJQ0qtPmI
za?BsHsO4aG=3Gg)$!L+Qx5A28)&Q#<pgjHkw|U;g3TO-i*YLFo1@p>{s0FT|Z+2ow
zfPv`Nq}bqAvVI*%18BnEQ!~x!Y#TbEz7Dv;a%tLVm8H_arg0KcWOlPP^Lq#QbSRXq
zaM`|EyF;L<R?IkxqLOr6pwy57Is^GauZ5hi1*pxhU|dsN)u>jI3^@CqMJf^qSBc04
zA0ulV+MxsO|NCG(6)gf^NXhFmx;1<Ei;5A^PoE-VsblZLahvS0SGHV82O30sg!Sy}
z^{`gSP2M1zJv;t34U0_0uYNM{$cdszm%COMiL~=Q&p|zb`;&aX4OlPIT)L3%03nK9
z22{eu=~wV*C^6Tc-~a3)PM|=;`*ro(!v0?RzD)!`|7Ccl3<EU4go>F#q!M);!sZDa
z0s}SS6b+Zer+Z)gqfp{c;z4=$QOyrgFe!1ru(X7^x}4K{{PkPHsHy)LJO&u?V#gip
zJ30cXz^>7dG&ZS?c>yEZ79|+9=&>D&SO)(9<hozAa_fQ(qut%g0AwSaZjvi_7MwvS
ze((sK$gre;%z49y&TJ<np-wE;KP|;0a6;h~fsToMm-d1=tRR{of0U$VOMu(~_hk2L
zEBe8OfD+m@>2`MQ=z89_Z7yMSNipDL%vsE#nkcwId91`iG><xn+#W5BGPEtEsa1NT
ziMHZ`U3D_8$--n|5bd`i>Zu0y{VzaJ#+9Vu7gA`w7AAUOPa41G9m$usa_R3-D33TS
zA!OD)_;`WYq0+O#_Vr?Mmzdg%=C(>KC8Cn=k&W6W@+c6ztn`fj{v^g7M!0xH_&t#R
zy4g<XE5IWv;Ua9k3tRz^L`|X}p61aTJE8)PaYrj8VUpAxBFeca{8vO=>{>Kn0_S)8
z1x!DJ_$O2rM<C|M4pq=KEovAH8LBx23r#)U9u)oSE-@f|<vBM77N8yfDoUst0ktc5
z?F3aUv%c&}V<O6g2A?^&Nqys?>MIG;8Ub7pU$g(83Oj%^DNOxtje3MO(|b?<ZCV_r
zN|KPohD<yAud!yT7A`4tx_wMKn~Q&;-;>`p?~fUc2{Cd2JtYs~ipqdtO5Ec2_InS$
zOjNc)a%Vz>4KxK>?}0qMu|V_O2}5BS_weNbjt~*{oyxIVCrF@$>{9?Vd(iJff|m>m
zreJ$YFt(cQ5GpC?L~+<cgsu!y?btbt+<yUE7!r~nQlMN?#+7B808#q$%Q&=B{Us`-
zP=w@>02_O&L!3ECct9%}eUc8Kmh6|HI1u_$h%J)6<&uI+$=_D$23kH1*=btV02Tg0
z(HgyZHYS@eF~?DIlbz5T1=CH^I7*TNW57$2R7^xJ3?crRWMa`}D0bp^_m+45g>m-_
z6@r+-cOLY%FQX$~@|JB2j~UK)Xe<Il2%o#TMqH=~fYYl#0)a!XE)o!f7v;#$!vO`)
z2w7D$LcQ`ekem#oQ4<S5R1NHF6OD08IyE&^;zolr!w)izgFaQbx&o52&L(jHH{el@
z@^yrv1}3lz0-~Y;Sf!&e!lQta5lEsRt`R6(UbtUK@P#qq-^eIf3!h=RM_BT`<l?Lh
zsoo}Piy>`X(V#UF354ZI9Qa*RdMJVohDM-t`q1{-zT{t^azQEg+EkEt2SEd`gNbBa
z5QYg2iZ5dm`DZUM{1gW)ZXSHEf7#T2rcq3#em6j{4Q@=)kz;1cA}b9TWHrL8$Gg~Y
z5yJn@HzHQ)o0h$T`=VDj@c=^$n<WbiNM}XMdrgAKV;ru+rBAa9qDk9Hjb}4G<nrSp
z-r4{ZqMjnr{9ppWU2by%d4(0HsZFB&$Ndt_@C>R@27myVIt?e-wm80_RE(scPN*D%
zI2EHk(k5Xj9%vLuUSN!0VA*?bqCk6a{eWum4MB|$A0r|pZR7>Y9aJq%tCW(da1Z70
zMf$EfDtDWTw7YL_65tM8G|qk0biJ`Up9#q-dmngY0Nd4hK7Mk({+co-ERM(p2|vRC
zODxAq&@Q6LpThUN;Q=ie6$7k4gHO5VN)M%P^B-m1s~B$-pZ+Kbs)N9{qtFhwzhQ(N
zr14LoBEpP<21I&>sHq(*@i>M=QF&nb2?~~j!A&$A)jTgUGDIhewC404hX~+E{g#Dx
z*Sx4Ly2aNWNPSa6Jn<1n__>$V_c7qM1F{sv0A!M^!A|xLWiSHZaC-zEg6fK%)nd(m
zRZ4~w2U{-nIbulIIFUO{?yGP*wi}BR3l@SO-E~}wFmt<wJC;T41VNv*G%653&&3}A
zWsKBVhzdzKrVP6|v;$x<AQ`!V3@H$X?ENX1_x}KkKy<$g5C|K5%h!knhH%_G)g)!5
zW)lFe5E}xa!l6P+qAFORuqnf!m!bYNF<9_Dn}!61imCqqQmTO()GEk!EC<>M#uB_i
z3>6RqKkR@H15z>ILSxF5U_dGqjye+$J3_D{Xd04Ro&^2hUE@aLb_v)z2y_P=eMIy%
zixMPcPlPZEjew~_$GAh3ADjlj2hGb(JHQB~rR@lHCZ_uSAR-MzR${v+>kv={d&7FZ
zg(x%TajB3)=2Ed<Agev*SErW%k_txkC{Atb3LoNZq03Mc^DHm9Tq7D1otVA*M-&A*
zfSw>@QwK!Z;#e#W=w<*@cplDS5^w~jp*n-rLI^}?3O)P877M#)%y<HLQ4ooMs(=n)
z?BYm5zj(A+lWQHO^aYkN<Y^d)I4gOL;6j3}qd&wgD8d^W4{f6{<1*X}guqnbL(}hQ
zB;5)|OWi^lK|^(kmJkR;YT?190R!eUNa`4?*H|7_)>v8@h5@Z@5FBnH^PAVf5M`Sr
zh#YvD2F?q|A{Z(YjbVa}=u!EP$04NTK<t6w?g;S$z)du6Ew!3f9iY~RcV5*1#8Hkh
zA87dzIEfQ+7~Vc(5jTmyP<taAMmFetMs}CCL7k&*A86CYIic`$oDti?BKallyw1Z_
zH7~W394R5^WF!O)#L>WJ2ki)U`+yxA(qUOU{v(l4lJSFZ3L%nHK48M|jm#ow6lOx0
z5Jb`e?==@;tO9NUnLG#)CzB2Wy_`5U7y3+8Np^7M5H7<kBlw05#?Z1)eL@00@qc3x
z51GJRq3oS`mmsxh`J)lMw8B`Gk5Ccf2Fsk4T$fUjBvf+x0HQgFk~IPzB9R(|0$4D}
z@Np=ROfCePGA)%5G(F&=1`bHFtbbfy0lg?xtZ)W|9qj`M7D<6%aO_#`qwv50uV<Gs
zAaaDPLZcmEG20r=@EAJzgc}*PlO8e!?O&L2SGWQU0>+qin}cJ-a|kNc`|UE2BVoVX
zahc>nwdJ0N#B8XD;e8T>V|c`Qo@cc3BbOY0i;i4zo}lPoM;|fsA2G+$rbGAsFoW}m
z<r7ZfJ`q!y*ISC9ExB_r0&7#GZ<rw+p$3cre={%-jkSabT7PkYmM7X_9?%rssC`1j
z0RAFWu>gAC6NUs~S$9wb!F@nxqYSxM5CZ1{j;#oWG%}a<2r80b9prC_V}?fQFDCrJ
z%z%>G5q0KdWGx4=?;XKXp*uYxIdCMeWF=_|44;$<HK%fK;WQMc4uUKPyaFsR62!K1
zxP*R6E>Wl0BM;CmN43BLm{_sy(8G)%voGAiVSo*=){a!5^6)a?2|xt--z{aJg|!`_
zNbECu#zxJCBgl5pdmtJZdldzax2b7Sj#0q}`H40MKs6h~)}Ry{Xk0Xl4yIS8A;UQV
zAhXWU>qInz*erv*Dgg*sHy8B;Gdlqp*hY4biE;BUpy}h#<Li9%J<-G6JEiX~U!;<V
zgC+yEQ}KW&I06)RsN`6uLMS@G=n<4C6}IrkB-S~Vul$9!6rdBNAT<}Mu>=pmyh5^T
zHQEC75CCom>K1y*0BFOr2KPBoNiByPEFs5fV%{h90D)?PR5_S)M#`Zv<O2c?#YxO0
z!bunuL>2-#-tV4Zbi_r$Y-nSHJ3ur<JPuF;5>5U`lMRTnCmPr|K^#CV76V4}0fZX=
z03gVUtccte2fsbxhJ2WPMtBUqG4|mPHuaE1XvpA!tZOxUd4pM*HF$7`2_c#Uwa?tA
zFtpfPm>a3^0FLn%BW!=PBZWW!0=0lbc6(kjpi4TX1_4BaIxlEc0zni3UujTW+CWAO
z3A7>(gYFX&2oeKQBL&i9i4%CU=M`8ryg;30s4l>4)W;rS-iDewZz~6uMxrniwBA0-
zZ$71BIL`9-F`dk3a~a&rjxVQ}z<@+AT#LM2{XQc(D^D}E0dD@La-zFAYG;ozO9ty-
z_B}}eIw$ThGx<Z2=5Iw7f(aLFF$g?~#07{U+!R`ifWzmATO<MowTO~`P=Z+NW(Ae6
z+k{M(aoIDYQSkhs%CI+sJ=?^swB{St<qxU6QA01X5yKcefTc7w!GIc(6fjI@WZHqZ
z1;YxE0Ve=>fCNSdq8;IrGeSasP2dno4wGTks8ni6T&>xFx2p@&G2Q?**u7K(0NmcI
zXmo+5LeF?FxQQCOKjsVp7dVGH#4r$2-^^f(%4Z<MnVQXLe+VokuZGaz;+X#c19&@9
z5ukAls2Db=3E~J72%9j3J69kuM`#S5fU)OzqCsb7^n=(Ame!@vFb$6_`4QsldnR<V
zyb0j>&}ix)!~hE#p6%d(=TYyZt55@$KxjtF2*p!m-zA8CjQ}Oc9Wt<ElAD4`0#3%}
z@5~%2wKv7UU*4B3nvBQL{S$;o#&^Xvzd14Ezo)yP2!}<}#1EzS0~9V2iUYk%xN+#o
z0k7kTU11;tmjMU>*@aD3VUoqw`Z1Yg3nl=hje~AP62h6$h|FzJ+aZ&|xOR}n3GU)#
zey$ERfW@9PfCmH;Xg%?mBm^*;U%B{-n!XA$%cocpJd|Ov@rh>L@h(x})N0^AaftN7
zNWD92Qy`%1P+!uN1t|4eFrY9d`qg3iL6QksSa$`R-*^rYV95tmrC1X|x(>J)_jEM`
z1X{@C%9}fqb*MT(k6t^1fJQBz8kk3rR0s<Numu@q1S=Ys#bFV9)@(swIkZ6T6F1yO
z+rV}^g4n=*VV0d33vdB!GQo2TQyXoNF3v<3*cgq$d`wl1V=>Z$d4OZvaN<;&iM+>H
zH05it+7SnrP71-T#1h7_ga>w(5uyVPIi-uz%+U3Ofd^<G&9qt?PUhAe`4~tcjSUBr
zgKy{nc;rMFNK7b(kW=#np$@@J%j8GQd`guZamO5ddR$|8#7LUYDdjx67C&OJHth&(
z0v8G~s>p*!b|k~$p7@Lk!igFcGZZ^Y)}0strrj-JBt5;-a*8z`BAyxFoMT8@gD&us
zMvsI7f?lw)Nr(axnbs3J)&Ns0a4vxCSe2Ft)Ltfl=zm<MjWPNNgaUOYf@htaop_Ap
zND2P{BY5QHlmtRDHj0wY5p3arCr(5dId5=zQ732xvGWhg_}=USf>DNAn0(_T@1YOk
z6y=!e)tqU}ALKKU8jQ+Nz_P2Z*kTO|Qq+J1xQ<`|9Xa2GRKP4G<(x4B^-QE245>Hw
z10gaDk`*!z*or_p0(GI#9U+O-;DIE?v`}0a^>AnqEd9%7t!N(XcZZ{}X0I&Fo&}lZ
z38}SbVsIx&ucHh)0|;M|nSfB-+dtTVM1gPs0qzvA7mQG-H57ZpR2gbX3yeUx!<Ebe
z<OqB~p|LJr;!;P11S^OG&_TdNKga;+J4)scGW}1j&oL9wb$kwo+HgQo<<LCl+7RlG
zLX;pFLc1Xh%oteM@e?FN=I#Iqn7p8*t(fW;qlsY5AOR_O{$}8Och(9f-)VpYpwBQ4
zf3DF)Udv%G(_I109Ons3?Hfixs&><vQliy`;=72xF9xIFxlx)#7PV(&eh_8{JdW_b
zEC|uSxq~7!8WZ|(fR3%KGn&xAx`DA;hqN4;qX+n);`O;22O=hYHVAVb@S;Tv(8)SH
zK=S4Ugy0@Ijw217g5jZt5m=sE?%)6j2eDK}&v;cSs5Cnb=SK(>mKMq3q3tm3EM7!S
zKuzKS3VWyzlhherK;9x9z$NnF01fM@@Fk`{FgZcmJ|ZgoPVF{{#7B4sZ)vCX(zSse
zi<x29Um`E~BNOPlz9n>c>s=}p3WNxd@rFzupi{OjhjdJ<#vw$j2Y3M{&UcJ_`%97s
z%mtAa<%=g{c*X>1Fb8<3RPV%2iU!(Nh{0glz%1v8PH2FTb=++Z!Nsh=Ij@)<#S35q
ztZ1pq8;1@Ur~m?i1380OoQ+G>h(iDq%HQ)axw<SqYe||w*@CsFyb_Kyh_n_Do?uYK
z0?5vUaUXHyg0{TPz`&tY7ZoV{c8KZ-_l)I{We@;3X60kBh>F1B%oIk~Qt@#UwBUF*
ziLoNUkV^OjYjUIjJZvjiU;_}rwewGiayj`y5^p?+%OvbCXqs`kDh!A&K+X!{Fo6I9
z>|n;;IZ<Y!fDISazJ1{2U}I4%=$<|ddmizP{y~79{v+)le|X0{#nE(8aXe2G#J#2M
zE?*PKm+ABA@effDh@lXUfmYxrnb`jT2+&w%L4hFXO`i8L0h@Q?P$;6X93KUWnCx^u
zDhY(PlT)-Vde}FNLXAf;LYT<_;KsCJo9xJfUwg~=Az(&wD@Z2h1lKGt5O9~o5yHSQ
z-!cnT7;++0sW%S5aSSkBws3?EN*+VN=0AF1XdAZz08CIONH)d6Mxqf};6Y+!5*B~a
zw0s*SY&m;sN;Fll<`TvsF`PIaKw80w*6ZF9w1ip+H;#Ko2$T_swSaSqfY5XVZCd72
zCnb@GAOiqp_F)<o<`vonLId6g9<0=uY<3RM$(x^-#H50>sQgTu2ey;8J)gV}kh>Vh
z{{RXx%%KDve0|3t#MnprG0pMqA0E+{lw)p(j-DmYY3)3YkC^$4bTb@H`Ws^z*hj)X
zh3+FV;c-GCh90G&Z3x0waRY;f8(JJ10?C1W+V~Bjjd=zl&Y-aZk}iYByA7Zz07;>_
z$cRT&S#YDUBoRwyA;3I{A!lq|gAAyeCc}S(R*=-1@6=s|fY!qRbNGf^14fXX8-UKp
z(jU~Vhqea{M}BQBhCz%X<-PcUWjFc}7GtuGu(pfD-Ww-lthGaBk|nz3OdGgS=AdjE
z<#3^;(6)A{5+o{+h&q+1FkmpsMH;H<k7#=rhDN>Mubnv|kFX=)$|#4I;%F(=KPC}t
zH^BUe30Jr1fFmR{PA+>~28O;wNHVv8<oibpg9ADl`eFb#f%<VA-^9PsA8)Dp3!T%>
zBfr`()J7SO$joLq_>9&i%j2(+Jj>klT^AD)`d3=$R`G~ohA6!N!RP~)^+y5_0iqEl
zgQl)14P+bY;MyWkI)qy+(~c5!05g4}X%Ym00D**Ei4noZ`oowq3k)a;lhYmJPGORS
z4PtKarf@K7U-I`5tWgZ^^8WysyG9J_-XTaz5{}V^T>#u%Yr&1+vH)R**ZZ4z0?szc
zi1;ST@mC4O17<AX4ufb`;0;g=0yboV+~BV;$q|`jo#iQagGr<iV4d6tjg&NwWhBjj
z296;39HE|Nj788zR!IAlWINjT5U5!bmjfUX?lY2Z79b0(FX915-)LdQ=04}>gZP91
z(zGl1j}0A+BXL6haS+Qn7XoTUKzqvn07M$1BRj|bgyB8o14H}XR}UY=bx`;F#$oXe
zIQlWs^kbRgIPn8L89H?K>2l@8%tBPIhpC6sqJtKpTR0HM7;B#JoR};*E3^rRgZciU
zsGwF}^D@mtYhB?ji4sdB>UoJx<r84<+6+!es!eN1C@HR44mpU*6IA~IE({<{M#R|h
zr9eNhd;z-=Xds&Z05J^`7@M^OTp>GFgAC8H6RU`N0jNy^x7{*<k*$}}h*}aNJv0rH
za+!I7qPv89z^Jmx5-naJXQhxDFDsqp2Pwpm2ryXf1~OYRnUUOoF+2)l!)LCHRp9ci
zNlhzg14l-|JBVxxkPv=BfQGN;I2a%<7*^)0ekO|;gq0hUq#VzH(9dep6q^@6Fg6wY
zLri=|Fj{NBar`*kADHs^RJK8#$o7VJ241rHPS0^4Z<zc0%Krcnc7TQaBPTz<5%C(2
zqmDn-8H`N&J?Ff=y3}#;E?-BP<{o17A4^t2JPgNSg@91X6ChfOHS?@#S|W0HwM>Wx
zR!km=C^@7?@JaPxz~K;+?+MMd{$U}3e(}id;nl*)AC>?&xZ%Oh=8F3Gf=aR#5xBXL
zBvS^C(8R(e5uf9TGp-7qgc&S`D^v1_k)e*uc+5(huniw*P)<gpYgil^UcwFu4;_ZW
z0R#dL%2;3s9H1tc2zJreXb?_g6d45e+6XSDQH7O=QhA}m#!nE(A^{_Jv)&AVWU^w@
zG<5fb7c~pnw4H$f3nuEsCYUx76zYb`D5lZCV6kP(#MZ$(z^y=ynjkD9^qMqR!H#ot
zn1sMM#G|ZdVHw^I$cIrX1GIS~AE)`1yz}!J+vE72Q-Klx0EnWCyh0(@+cBOeo}atN
zGapCO-=~P<=;7$&jLY<rA!0-=8u1V)0ILbWg=N(cU&xq*i3XpYU^Nzwj%PR)_x|D8
zu@3Ob5ZMsR0ILv@M?hh|V96tlVY4348bc+b`)e1Va$vu01Qu2ZWdTd&4hs%)N%ICS
zo9_G|gk&_LLuhgrrmD5WSS1a`-zML*1Z+ySoG>^;fDH@?E}&W(X&Uz;!8?c_a7{or
zd^S0*CIZN!6R9sCqYL8z!w2=LwU?0{*7F{LN&b-go0Gil2I~qi@H3PlBS!FJ1U88)
z<^~p7S3t`#V@5B$vw(JlRDQ?Zz@w-GY(Q0gKZxF877sA+5wgbye(rWeIgDn+3O2dP
zMt1p+iO8embz(kaAET@N{{SbqN6;S9<@Chb{{THZ4xG8*PV?S)kDiq~4_OfqZ3>x0
zB$m&C5H$eNsE9WP#pVH)?1qi#ID>{n++W-pjctMO@fh%4@reAWKp{eD<1m6;78W_y
zUR4NyB0wKJ39(`eyW>F$;RWPS{o()wP*&c)(4zo4qn=+8EoxU?gnh??S;%mraza?C
zI<VnDy)nV9ab2O%3Wz!iCGC=y;9V7o4$(3<c?zd`!MkpZHPJH_5Kt}C0AtKcJVTf@
zTuk-ZQ5CY#?KPw!$_*1pJp|xbg=9kT{E2YGV>C4f%to*!?*#yI0)B=H!w$PRZf9B2
z!iELIHU^InH%HzA8J;CSddkz<YPYmyzeC)9;9uP(g*OH@tadPRd5>{BKWO9R`$k}w
z_7lQ*j(F(#>i+;-2lYl{5c4Wlf@yK_?;YjGpUIA1-tmDSevUq2KClVEnc=JeOpvrP
zOF+!SqCmi`YVi>FMybR}lNKnE`htj%;i_U4NJIg+qom*gd`&=;ygkvC-(dLWP-vVI
z1O)Lo0F)W*96RQcFc!d_L>6qVlqqOsk%AhS?FhzWLl6lKc5nD{oP|Sr_oxA!(n|F(
zA=rd`ix7_vZa_6c7>$ENR&)%B52>PD2A2R8z`=pIy(uMl{W8=8=QuIQE3{vjph9-H
zt?wUjvI0wKn|Ze2Ne3>eeMLv_653LMFp$djg*EuZ)%JikZfy2Ju>fk|dxIY;d5kvp
zkEorGlwpxMfd<ZpKd8HX#po=ZLGu`C50M}1moIbG?qiO3N5p&>{6;0uA{DL2urZD!
z+B3}fnaS#WM;}Mg!UI`hj*CcHpus;}!4W(ldu*`*3WIEsxKn^OZv0F~Itojb36o;U
zTZy488Yk@zh_k362sm~bJ|mE0gh~FQ30q+(a!W-xv`|Hn3LS5^qK*ixngD=FgtZ6=
zho`88^r_wXK~iLqKr}dy0mXA_(1F|9AqTA%W26qGh7Lfe)ofE_caP744Ue!vh)5ok
zN3Aj90Z=SGh~Y{a1OoV(xs6fn6$RxIDi9}?q+Bq&cj#@*ec_k-dM+TR1UJ<iz#F_6
zv6c*9pvq&~a}ka@8G-HXJ13vtGde(44?~Z%eGJBT=~Kjf^l_c%GWSNMw>_l=9DNTd
z;xp0t>f?<w5t_apVWf=2SDe6(g{~n`HR=yC<P3Juh(VBC!N6n#n*>5hwqhFqs0my^
zKmcu`g)h18aWLSs$lysJYXs14`)LduR>^ExRR-^n7IC1lR|`?gdq??#;S@Ds0jZB0
z7$zufd%^%fKos(b+7)0xf)geT28M>W@`1_(0BgA7;@QngE<_m20xlq<ar7IWBN6ci
z@ebXi-{yFfh;*2Yr<wbXgqYqSa$kvwO}=9g9%lk04JRk;<L9XvjYMO3<?ti#)3kHU
zs9g+Y;KX>H%&iAcFB8P~OOI*ZKSg&A7aTYi!rP8;05ag*!Y>LrIF|sBFfs;OWrc`C
zC4i7$s8JI8Fcb|$>IEA4XDjP?uwIp8$HdWLKXC5@p&q5}27w|<1*2%w0M#!gdsH%v
zL2QIP+&u+O?JR!gG1p+w`T>M$8Uh9Y21xjVk(;%7c!X%Em_$N_BAWpHBB6+cvi+Hq
zUOk+yI~XAI3z#ZnXv}*U38y^5`@kDVRy@vUiP;y-arceOp6DT*5ie2<FcpUxj3u{^
zpLtD8U1JgVm$dUd#v}35%yIYV_HlG#Gqm#@xN9)>5%Vm@HGy<9JoU4nIYIy>33Ma8
z0SL1RYy*(`h&UvP8$II8wNj5^#_;eI0-#?Im<^G_sF64fpk#F?LSV~*0002a@E&0F
zAhMz@R)<k3?F82JdLUq_1wes3p^yc*nl><plIB2bN&tj0o&{HcPk391%o120Q1f^|
zlDVA1J1IdmP#}?*g7Yy7qHiB)AV*nEed7%#<CURv-g!RyTpfvw5@unoOlBT^(zLHJ
z9mj|`G43M}Y%<tA9KIksEOW%U=cDBG^U!vVJ>!p=;x#T*aInlnX<C^>3Nun>IGNMm
z{!5|sWuPyU-Z&Ca2o(@m`iB5Ttj7<ZrgBlmLfA4fsI>}-h$k|zHR2h88>Y}BEW<h|
zNWh^-sI&wE8$KxaXfEY4(f|Tw1Z2D-p$+$yKtMgjCR3HHtxW18GsN)+VFf#nLYKsA
zJspvb18TUL)-F(ggEOqL(Bsf2gsA)bMh>23Zikd^4BZpjJf9hz=V$XTX!tS5(&wI!
zr@X0-o;?`JoITUIk7!95F`WlT+|I=q{kYzd$I<%FMFb)6HH5Mu5W|;<;wA(prVtUR
zq7a7hlRONOHAsmg_=IR>q~{Zm8Q}n&4$4mT86wp-b=g3`3FLsx9RL&V0ZzfJi-O=l
zC<Zq3#7wgT83<DS8iF7|7BLGC(B3o-N5hC<>O}-=g9KE{Jwh<SMz)M`AntBG{`v~Z
zfy<arG44Jhxm(BHA&bm$pY=8gF_WN_^cZU^%+LE9f1@(E^VX-Ck3~l>c~QnTm%OI#
z@tNSpPO}lddNHK$>^gax%HN}mdQ?3T<^oIsL}0ss9tcU?{gW0#qqvrX#>bI=%*1fV
z2{1=^Rfmyci%>u{0E_JtyvBp_Kg3umy381*uwaM?1s=Vwp)?<{FktmBK7OHlst8Dk
zx4$dFaOrAeEAL3CFfn=&)&Zfo88Cq%s_*>4s0{;19Y>_|Dgt*s6n2e3ML?YIE?iC{
z0y7P$jj)N>>}Pr5bW0M3Wi<p%h(LIivhz5(*a_pMbbT&+^kQ7C<LKvU=cDMkaddI-
z=zs80uuh^(V^}n=WTXHA+@tXh@+3efR=v>H7Xu3t!}7@53Rv3MJ4_mdf;J|zBMwH4
z5*fH&b%9x3#Sz*VrUF`hF-6IO4^Tc*q7-D@SOFbi0Nf6mlA-5C_Z+iAJ2|bU1RN6m
z0dSOOJ?ri&$3`}84)7KYm?e(oS2PJMS+3AVLPyXQ7@YJ5F*D3$I;hd{9}x}z0C=A=
zj`H=fDhvMrW%BJmR{<TqVpu*uu8zm%aHGQ<M?PhA@f@kzdH(=~$1k)%W>C@?^B+r>
z#P2*#@$5h1%4q=X`VCT2bq~q_mK;zIsbnBq{UyGLTX@1JyVu$VrhFWL5}Y#z2m>ox
ztP$}6N17|Smk?Dt+^7(`NaSLHF#(axK!XQvWkF!*T&IA8LI`#<Wj~5yZ!m6%ACe!&
z-2VU}03c%Pzpx+(OdBuWF(bg(b{G&x{YT7wA52?-g&5{>EI`8~KzZo#b2`*rri=z&
z@{WdBxQF|MMzRl?=i)v=p8o)Hm1K5-wf7x7#yVV~A4k>pj(0JQ1n(G*KVOcu9DN5$
z-=pA41o((2v?rsFh+s?#_6ViK1kgw3VweQM{KpM=006^;3s6G2Ltza7C`Cx50Wb#B
z0H|SO+8e#2zTt%!NkwDCG0`EY4k7YRgJ2=rhqS<WA^hPsM3cX#GsFv{;(jGX5auJS
zwV30U^ps-S12v=kiJdNRLUv7h0=!GXPzi{K5wu?MYWa2XFVTLZjQa5$eLM7imNe+Z
z?&=335E@Lbgb@%#zF;a6ZjNTaC4gY;xUKr7f(=^Fyb@FoFXlc31dK*u$n`k+ou!AK
z@W;e+IG!Sx=cA9KkEe8HndQXfedBNM3f?WCCT3z$fcFM-6NtNyB3xa3^uCPxy!5%-
zr)hm3TuU<_@P5AI2sZpE!q95hQiO%XfYY>Yni>-Mi~ftN=%?RDsFl!kX?^r_cL4`k
zoo53yM%c}SMDZzT$9l)Dk<6}RJGq<uM{z#APt)dj_m{u?A0O~z{`nC2meMP6tPmGh
z0V?9v#}SYqsvq_J#BdnTS19$r6A_K4n0fbznPZ{uJ?A*x;Dsz*z;=%^;||g79rFya
zgX?~!(Z}h({CCkn#v))iC&Xp|8n3GxCZG&mXGbc4XdsN@qVGI*Fn|gN{yO^Ve9vVo
zS@j<Cw8OXy9U1*Hkt16F02A68{^MW7e0%g{Vb0+F`GP^SL`!I2%p}$GF9rg4bC>-u
zqv=x;<~8Z((V2+f{vsyA4&yM1BqZgR{{R>2)(K-yo_YrXgftTMfP<yZXNDp>FlAv>
z8%$^70`>NtjJ<?pQ%4PJ_>J>32@MZ;4)KlS(Mr@$5%hf#l^>_iO6t0wM}D~K{{Z*5
zIli7c`IRekIGOJ}nEW@F{l~HdaTgaCWDH}nG;ss`jK`t+h;}h<5s?e69?^rW?a@cR
z$E`=}vpn?kEB<e#{{ZQ^=hxq>_K&wq;#MAJH8JV;KUCIM_XC;ICo`{@r*G~!wI13S
zj-Jt<_C8=E`eJt@8~!ICmG#l=KM{gI8T4QLynoZr{_E(v`+6FHh^vpOcs>mB=j)!`
zI9&mCGm$GlQ_Gp=a4|2;W>M&lWyW%&J9Jz1$Fgte5cJ+_HHS{EL=#9e*LYylygI=S
zu;vbj(X<f3HRv_}0FJPFPP2bb(|B>}2nf^9MkzjtvEm$fnnABaLj)g2gS;PT&%lRH
zf)Bi@sBk+^|HJ?&5CH%J0s;a80s{a80RaF20096IAu&NwVR3<x5TUWb(c$p%ATa;h
z00;pA00BP`KLjD_R0V{Ohw&}{0Ox8`35XJ<N|gcxs1l#RN`V9LAW((a2wOs5%u;$x
zSZRwH&ZF3)))_|`?1$kzA>j!mf(RE-f=NI4@^38#55ZaK`SJWI{{X_NP>MQ-SKy=g
z&1#~Iu=WsLK!gcUfQR97za>PLg6c6)iu^AH)F6UG55Rs9E}%PvhGiC`#dFK}++bBY
zNCoL1i8eTaDx%KcP!yyrLP;coNhFd_&LHsohyMVh{t^ZyP;Q8^s)Pe4n1^r;MIgCz
zEC$QY93^34ea;LcK*x>vR0tBkIDmCA5-t|}<Pdm3!a#(2LG>E<C35(nYJmAFCk)t!
zC`QF9#^$PK8dS}K0|X?tMEPr#Arb`3h!}n%M+hX4!UzZu{5Sl-{DOp3sbBn2G1NU_
z2)n1?c|QmSDiYj7Sx&>?j|qutMhnwIRfaqZIpZ0X1{YOuD*{Sen&bvAiCW&AjgtvX
z_@5A|iHK1*G5947&fx<!_<~c3e*XX!JX{YX@W2hI*Od5))n}24f2h8R$q`{6s3z$i
zZWbI$9YBH2Dh-gNE>K!XyxgV3QNR#vQJ!N4;6Q`|5K#(oa2p_(bz4*ml@(ZFw%C&G
z-*D!II%SgO!j~02vb%mMgbAWBaVkWciS7Z~R~$<+!nHzXztI<fMd(G4xSGW>jYGbA
zXSEdB2YFMDMrCcQi(Zk7%YHSUFUQErJpP~@kbH`G5N9#Q43>T*b|C=q3N#|GH3ctw
z8E*^~+$sRh;swN9A`KVu9HfvPIqZSwM9{4}A?O%K#2}U3XGJjWE!9NTbp%#=7;-h3
z8TPrR!B-dvP@N(uWA5R|kkm;q3~E=fvf9j}ER^neL^_2fGNntYNoR26XNWOA2u8+R
zqAu<%yAsPV?2?Yu_LVgODZ+w+mFqEmO1B$nU?Cq!7M2H`OS>=K{Yx2S_LNGWGU82y
zdWiMLVAvsoE!u}ErX0kx%<f_3FZhnqJ?G#A-LsuJ_Y+wac(D0_$>`r|p9phbTY_&V
z)K^|aCIQ&TecZOAs-0PTr;8XDe}G@r&->u?8&ZJeXh8Y2yusF2+lg1>w7NPtDp&Hg
z7;UJ39IQd`7AFT>KHuk1hKwf)(nAmr*@MYZii&t3YktON9z3<&<mbd7!s5Zp#2TP$
zmK~XIA{T5vWrUvMFFXXoQegZ<d1D1K*q_5QGe3%h0z{cPf;pa~f#hd_1mO6GL}1^l
z^)=7oSFnTU4;%z=3n5P68Aq7)n?fnzgh<<x5IW)9iqOIWDmRF|e&N)X0fnPM?S!@m
z8T_6inmy8u`=Vs=Is^0!y$M(<<$pVyh}llp^{G}>4On4R>;Tj15~2D$y;OjUF_EG2
ztauNL7aGHDuh|z03)QX=ffaYO8T`s_s#*sP>gHuG*^0w0<}@o|0%4~6B|8k^FFs}R
zU1)CpyCV{=Xe;LR65X^A+tBHWIT#H<+*BfPNIPRj+kt68@iTaq?TkWcm*I?E%=1D?
z8Eh^G;1vh)d6)PYGY=BK0ajJZ9K*<-hH|0HQ1HYJr018F9Up2r0L!``jSem&&LhrO
z!wDS>9T|Tznz_({*oP?kl<GJ^4v?-9PUB5m@aOjzRipBn#|HdBdt9M;CI=!51!!BC
z197F?9#FYiM<z8_RuFdLt1lmQ_c%9st4#QpYI-L}RC3HwE{av~YCNI!gUPFw*rcOD
zr9>@dn?pog6e-7H#ARVotJTWVlmQ~2RRoHLziZ4wY^tgN<?1zigjGBr@X7)h>MYO<
zuMLv(w3gUho?=$os5g+ijJ$#<Z1NKMO$TWAre_qbT=J(PJg}~=Ww=Gb5OUY@5Q0eu
zP>{lF+zHI5a*pMG6(&-UysJ)E&UQucT}yW!8A)es#23T~{6Oi4ejV?*=g&X!FWd{i
zq_=0{tQ+8;FSuWZ5cObo`ki;_m$hT+QS$shGREwT77|tUZ_(X)GbvV-I0k4p0Sdt`
z><`>D2`-HadyE&5D`6eA3WzP<Di(A>K){Y(v`Y#S*^Qd^^gujq><iC>OfWPHga>HQ
zDK1}Z^H`<EsZ_*VaMh-6`wEX5Md%i0mgs01C0JK14c85phV_ltUCS2%FbNOdNnwRN
zmmH^eExUkfHEW>B-y}|I&U78;2QaU_FaS+nuDP}%+g(5{9U6(%Z!W;vU?Um_XyU|T
z&xRYjunO=^Jd9#tN(P-!c|={Lr#%%Yu}Mj2cIw^AK(Jj|UCela>Q~}PBZ7nh3WO>U
zgdjjif-Cb=DT9PoP)^xWJ&2S362JJA;6$9yVp<R+K!6>=rSSESeDFVCgT*{QniL01
zFy(^rYXq}Bm-2(E(}aI*5K(b;bU&ybw;fMv?pB8=4B2>Ipp9S+T-Si6<)s{|gI?~X
z<(7$>q9kQF3!f-uiT6}hwcAqAappWr9FcsSuBI_UQ75!U9@DEDHEz7jlK5jTO@xpW
zsFn$}qOE=)hIe9!hWw=E%hX+ismCDHGm;^<BnXUecrKvNW6Un6r`+P1xa;ObY&38>
zhb>7Zh<5^Bl7tPZbyd>q!_1<Fm$64xZN&v#5-pDYVL0nSNae*oPnZhGojM9WJUEnS
z1h=ClKCv&9Aqv}gI>X5@^y_70G-8xsA<8$|UGIO?M+QVwdeD~{wE`_3maYXNAPQPF
z%P-tEnw8=|R)9Gx5VnX@h<HGP1PGmweZlmC=@0pcC<(DC<{WS<@p)!jEtbJyY#Wcp
zJhxw|;j_S&LeA25O)bUzAkripABei2oJpxssJ+u{iDxPJha-dv&jK8=-lFk>=mF(r
z2145tJk!Jy&@v6E9;=B_N$k(tEUG(yP|Of3gM6=cnucKtC0lPgN<*gE0VQSuzqDO|
z`Xws(-wQo8HxhfK4{A_EPC(FFrts8G98^VbwhTmdRi>_nS2#LHov~7`lq*4PJVfm+
z#ER2hj$>jC5Q6F&i<Ct!Ku`+JbG15kE~u>WX;E@i4aq|=*SJ_3ST!iwxeDB-olGn9
zt~3}iY6w#)m*uIx+sA9%#oaBA*NkDNnB-z^2{j5A{{SQtgpy$gC36=Cq@Z}!qhu(9
z4=sW_`<Wd!d(wn7Jh7<v<mMScPC&kZrndwXC|DHLh^thsh-l4G)a?{i&}F3A7E({`
zK)^RLRc8CEf@y^uQ&&xLPEhBA>&zGM2Lj>|9dPUY&cXsgV4H#?vJn-;3pnNh(K2X?
zd`0>t<-9|shjb+HOUr%&{J@)n80vgyh9ZbBNo!^JhpaKf?g)UJikt=U4w3@~)LrVO
z`XmUR%fudTvM;fLg+Mo!-ZeoiQpf!@EFkQ&>g7n(X-sZAs19;V3T%NaTOP428q~i3
z0D6mx=+0H~rUF|2GVo^MY>*aZSNmc&k}86}2(uxT3AQ#lwT=5xmNhVF+Wdg4eenq4
z4(F2$M$KeZgV}qEHi|HUudC`+6rc<<TEG&PfL+sf0Iuz5co_$oY=yKgSI9L~Meb&t
zrWqVwdzKg!g%(1Cl<35JTo#MmfK|=Prifa}ku&W|)-D%?!0b?9$WhE0*rX@!Ac1VS
zE*4{^q6+AA4`*FKBxyD&kzie%u>o-xA)!`8G=R{4Opw<GrS!F4NLkRAJg}CpjH_JI
zpwZCr^9;XcZC_0Im7@ihRdnWI@+gLdEm=%XW2YF{9*nJ^Y<2os6U@LDLQS~MBeX1~
z9>L)X7mAyq%3&&S04{&gm16OK)T+NrRCjYze)y&RkxzW6d12PY{xQry40RxzSch}4
z#Bp%wV7O1j7b+fTF7wOwo)UQ=eI&L<pB6oYr+=tPPRa0sIUu2KMe#1**F0I~em9Fe
zcsL69E*K}bPM6w3kn`u=Q~|N9U#0#Ehyuyxrh`sF5h|+V07WRqc{48G<^3R?VZyok
zseij_{L8TqJCu#k7psd)n)5^`D$_FpE<E90b1I=YxigFgD6BwNXt51CV`wzeZE)Ns
z=(wVq&lF+`gMp<L?6{JvT`wt$E{|A=pjO;&<w6*xG`2OOq+3|FT6gT_T^A9Y8%&{}
z-ry^1bTA5*Dc5KVYX#seW~sXF2#Hn8t2GylM8awH7}=eu3S4QuLkn-QM{>!vV)tNE
zC4BBRin2I2ex;rlI*uVmSwN?00N8$#%&eptQLnIrP^Y%XJUc?*fH75yYXS#Ns$mkT
z8X9_G+iqoLzUy6Nsh!+l<4rfE*6IX}Jg(d*ttF`2O0HI#+I%vfV7VQ~CK3s33V*~a
zA=SWE({>xxSy}s!Mp|3#d*I71Y+gW)IWNv48qHbQKlQDJ%I_skh%H5p0KsS`i};%6
z_?B$G8QM){<IKSl%{X>r$trOBj;sB}M9cI*cp!4jcLcBh02dA})!jnbKS{3vVqZ%e
zdya*f&+sCQQq`YTB~8bq(sHhcENEBoLOzC&U;ETbOx7dXTy$Sm9jKIG3o>-MF_}<P
zi*$4ocGf>^Zogkp0n2>4n9e?*?6TDQBb&7Ra4id~S%+&lLVZePn>RsyxtUr;$7Sc{
zQkJ|`F~ejhsTeR+Cd0p;nQ$f89LF(&+a7anC9M`?TVP)UIL<Xtj-w)IoO;YJ1Qw4n
z%7J=Y)o@G^wLF5<CazE_qQJep0M$$tsJi(8wv~|}R4WBTkjBTWiqfkIe`-?q4NzLt
z)Hn)^JLASK8yoL=nK746$nd>6{w3=m?g_@%*u-E5H`34ODmSg<MH&ksMP5UOC|OO3
zhRd$=iE_$?w%Yl4R#KH#v6rd1TDo0>U^8A!!l%XFJ6YIeDJVHlEg0T~)&jPy1vxsp
znu!x7`w2;0OPQ?)91s_6bu(rNt6R)m#8SLD*2Inu2SxZQl`c*r4r--q6-qXCmtl;J
zIvalQ%vJ-%Kg2`2`>AI~!&1e90pHm@i1dXU`IrNL-xlBLDE|P-{{UKxc$a)j@jXfZ
z0ASDhMt{~b$NFc7^v@1GdGXc?dLbf3+f6<V5lbU=u(1h^8C3CxP+zo0*36>;s$%v)
z>NK^HFF{Ja1APH5*4P<<6*=A88QfP#+ccFfRgdmaD5c!9R$a^tqB-D6oUs+U*iE#=
zI2f~#bD@fGYsSJ_0>TgZyu$*MbmkNT1)g13pA)a@g6YQp08k=^NVIQ-)45Wfj@-<`
zw;akXmu~6`ZzNg?r>l;F<3^2Nx`p9P?WFVb0J15!KLp}dp<69(2mnzyD(#_qCIuDy
zF+&{r6&!FZb2yZ}bCKL3T&V-30qT2w)FW{#fn!=dc$E+&R)yg~19SOv>506w^I49n
z;D}^lbr?6CS-&RZZH@*ahjhL4lGJNtJC6`xoK3J@&||U?<FfSbX;cgE60b=pk>UKX
z5m{o=fVh9TT#Rsfq`Eu~VuwQSV4$+)DkF!zgKjmG(2}84iVZ8I;^mTx6-<0BYT^h*
z6qgf_8@WU=A&qsj6jQ-_dD@>00;4iL>{?^6NMt(|#jTaHP;C~UGRK2DxQ%u-Pd6<D
zxKUVuI2bS)Sbu&jv?N)4MaY3={eB&EpZLlD0F{Ra)tCPOmK<MJ2k=JU`K4d=3Fn?!
z?1y_ilg!KIKI++#a(j0v(u0DoBQQ8pbBh;NZlThdN`-SFD@#xj1zZdjb>J#0K~ADO
zyY(ExlUJ#d*P^CGK%ssm9zLN+S=w)k@ZvQu7FjA}#?KJNdsa+bFlt#^`tBr`?4vAJ
z32$;yC?I82uZWi;P1T8AtP!9SpPGqjP^!!wRc2tI3RDYQy-G=66+_lyCBSHbpu1}5
z+yud}7A_%b#J8v1Ae^ef4X|!Lspj_T(oqU7N|>lyo|tE_qxA?}_O(N%&~!F0=vKY%
z4+5}*K(d>=$mxJnqH{nrscXB$aWp^^ZE`EVNG$0J-5bI2uW<dThN_Ow5#SePy(?~J
zY};VkOtu3-vT133)W-9SW8h4;t}}y$GrQ(-g6=sPu49hL7)<QJ2&ipiO315gZA8t5
zM#Qq&AowNFtPr<~!y6!(Yek8MWH%6p(YjmK<<tO33!!0@i)$$0-|9qXVa;lgs-%>Z
zPOnO>tHf`Wk-yl<XCzD#S{uF=U@os4MuOqqL;$>kL*;@cX#U1vK9s!9LLd`L2np{w
zijQBkOX!#~x>{R158S!;?$qu_A3wQk+dZGD^L$Si<yAQozxAK>pN-}J019{b5j`2`
z!>jQR4%w9_XqLLNs$q{m`KBdLZted7V-m}{fLc+bC##nN(7hY=Q#h5i%pP*?S-2jT
z8!ea8))6liX$l7K6EM6{rvzO^DN}0wGcUXHVaUIj(^k31GU}J2&{!9%jmrYMxrr-Q
zq04rY1%SX1DSjm=0bdDJU9IZZg%R(NbPpnCIEN<7D`kcv>`TpqKX6PbgUb?d9(l~|
z6^E7~7f`~>;-!#6tXm(SGlg_5zSQal8D2}jGpISm%4x|%SM@6yuq=nmD7Hb{4;qi%
zJAIF_8zaE>Yg()Ypz5^2asdJx`GqOs$)un#Ay#&wfZ;k+=_!Fqg(*l|HkH8uGpsoB
zQPqUYVKksU&jtcku|cId12Byw39l$(yb)xT0ZC_9%d6N*k`Nr$ny_0!5gk{_%oYRG
zBV(Z!G%I6pT}~_TVzn)3h8&Fr%=eF+<cnH$Tw3frDtE*uI|G2&U%^z|2nxAcFtoZ<
zq)B4rizdQX<ZLdGrk~tIQ&lz<P2Cam3&s%`1`tw0l~PzWXF$^{frvz?*m{{zkHI`s
zajbaUUO2-{0$#0Vy#D~i%bKgeXGK_^>L(<+BXdRTR}~M3WH*^t>!8>;S{Xf(ftafw
zt1z${YHZ2-fv@n&n}%(`Ri+$J>J!K4LWd+j51r8P!>JCWvxKvx!;G_2eQ-omA<5SI
zhlKcrw-v3QQBlKpM1g1zi-GI;#FXLfn85V_i&(8#)(nM~nt=d#7YD&{>dx)Y??ezN
zuwnjLQbc_bZD}$kc;)zwn+pr<`1cg5vwb4B@!YKPL|WMH4slsBMIVC%tyGuSUvXKC
z0;>Y~sH`$gHAbuanNBjD7xm&8w6reI2f-Ae)`sZtMWWidTDRODj?<OqAuSdhh|pgF
zEUCee!2v)HiWHW&M|S=oi;ci9(2)jp6_@2WmfL#nTQ}4dndLw@EsPx^P@vr{uNTvp
z{9&zN(}gcJgk>YqgC+W2<?IW>z?unGWr;x`qVhyJ?h%UvOs8!LS9lTxtw5k9RaLO=
zVEXI?^0Zq&JWD-#s+{tvG=63`nLOpvMu(;YI07Ne2k*BLIMAWNfK+Jf6E2`jNZVpw
zy$PH0o~o?PWgIVX1p=V6PwH&L7X+xYRIb?S`WOLA>3nW9j~5P_<SWH7iA$&}slE!s
zF0)GOm%&L+9;K^530taHpzM{+HHo(<IZ0^INLi)bA&a<oI`1XD0=yNmiHvnjU1t86
z@}`z&u}VDlNL1rP=FsS`>KeiopuUYzzMvyeYKW}nw34KhaD`iCT8<e*R!YIx4phDe
z)y~9AQkB3Oqw|T5jPrh&f^qgiHLXDvt#>Wlw6+TcgVGDAJtev!&_Uo3Wq85wFSNE>
zxp=?fU%77Joy;vz0@c7Bvt|Z_&GpyZVYZexG{4I(3uUEV4q}_XgkD-JxTr4f&Mk(=
z;#vevZ*IU#HqJj!=#)cs*)+MSd17)37S9k=V?}o18(=PIX;119(|l%G&I^31rHw`}
zvmY%oxm)exFga!eV3$A($<1?e_H4bF)@=?Thz8ne;w=sJgtFTG@O{CM76H#Ixc;b@
zHW?AbGD3xT>G4>&rA4DBz$(j9oN?GW%nEi3BLsW9&Gspl(c27)3&1UMC?j=)b3?QP
zP35(f83YWqqMv%HVPaJ4HU`w<u4Z9N8;lJ$hXk;;PH^O3I~ZWjm=I?!2PCu*=u1s!
z70-<@kiQ0&7AV#5%=`hTty1HC+&D=JwjI^1@}mq!avhe9HWy{(i8x9JWf}|a8ihdY
zjI@-n!_2q5p;C`wyts@qtV?nrZ|4|{E{&`$a$xjb(6(^Vv#FblZ5xN170An>RyO&8
zTP7%0`=r^V?1ww&f~vaHzIQ2aEhJj({{TY?xhPp1pp{xVxMEaQ!BNM{o4b@XXfW(i
zpOXP+U>%ca+X|3t4=<vZyCp)!=!F>qTA%tx!odYvdY8-$awNCByeW%&lq*#S#J?y$
zC9t?aaRlv_`TByj`b+KlhjZ#3uhc*A%l`nvU;a|!;@B+DiI`)-X)9)eTQ##xuZfU~
zir@yw%z~giR@YEfXoE$0s3_f>0jNk5QB^JhR1|42#2+$upQ%B6n`+D3-7`9jD}sw<
zX-cTG0OgH<2K|Kr!5WEdDjy^+Tx~tKnXC{UQDryfgssHqE?X)V2;CiLK^Fj{CL}Eo
z1Hztf%)GdC<>g6eDP3Ur4aG{V(w(fkC=)@y0sXKx-;rHcY`oxb-d*^GmcF_Sl&0Uf
zLgu7wG@(tg`bG>XNG>OK*>T|w3%HosCE-e@2_6k7gOw#)>5a2fYIYU$v=1{g=}oXh
z06u}3IqM<sM(<S&?kd{-P1$v#<w91a$-S$7Vjtvn7H1|H?|Ltd1Aw>TWU5yv+Yafg
zIAKL=830mJ%cYk!EcMy21r^nWGX0j_Sz|6-Ttop1!FGWKZJv6R2wP?p8qM8QB694;
zQh;xclAz+4ZdX9K=!L|ZAxTyq7C~;YBA{0I$=`CZPQ~h*tqcYiTyQnKA!NW%ud{~m
zoH0+7YiuaZ^7shoO$KH8FStO;=jc(W=nxdljo%4e5hjyDWv1&)XlhFtVafDSg%VR5
zdqqK40bG5)LngsCU0fTg!^mq`vRF0{OI1Du@S;aLy3;P~2O-1}pbfVybeBa|P3jb&
z%-gcPLLqVz2mGWz<t6uJnqRmz{{WeuQvJ<3{l?{=xwWsj4O#nyrC)~@?rFn4pq)z+
z)R#opE7;ju(Fz3yFx~AACVHDxmJXWUvk_dWMpoWI#Z<!O6KkQfqM4W86;+9?FEo+L
zrlkw6_w9xSHG<e(Rp6~kg;$GbC)oo2LT5A=)VTiq(@dx}W0j*<17d>l$Trax2D&t-
z-sf-^du7heO-xAjs)CZm4W{n7aWzj=3mS1V8iJElJh2m)8@p`<#$j(y#A_*0R*N4M
zC_`1nxjeoiaTEhazR0x#vfpq}8*tjIsI$%5RVHawF{H8!$Z8l71xm2xls8w-F9B-B
zMupU<uqfJ{>Q)@^x|GY9XXmSCgynT@k*5^lq&2`+MSG0R?V@B6owah>)kCGw+Jm!M
zn2oNxV@-q1C&zn)4XAoK6c9N9t6{K7R1F0pn!jQ>*9ts^356>nOoo{yl+`%gxT@$Y
zS9PBd%}Ao#Os7Xnl{J-TMc%#?;qD%zX}dVP#cS$aWrJea$xV1+itlX(tfn&`mdblL
zIJirt3j>{CJhKf#Ivy>QhqYN$HEPw~q6?hBZm_FE5Q$FWwbDOn4tmu_j}m~^GZ6`J
z4g+fOX30Z8=`*3Gn^JQCyUA!ZN9iI+5E9?brORR*H!B}qG`*K2ktI{rbDA?ve2jK6
zT7cH0hBRGM3pSLEcO}QEq?A@z^fOGz6^`a#?-5)TQrWZh4iDORUvp(j-bBxj(JkbB
z5o~^<U0J6xq3`&GIr)W)qz~>7M0X^ksfTj0Wy^R>JyKK2Gp01mm#dZS&$DUVxD6g9
zIRjByR6qbU+iQE<8lzyOv~ZrKCXHH~6;uo+Hd~2ZwL&jMVwKn>_^$+diX}z0*+y|v
zgWqkH5WC@uu~HY&pK*y=CK@<KLIA)-5}hjX60<;R%Msp&Ckjvn1Gf}KX1oWLORq;U
zR8bkgxfh~kRq|`0vsA&TBz!Mx5G=B+lC!dzfgwO>F0UDlmYp)HT-LK1mmt!Pw@}7>
z)g=dYEj%evzHFFk{{RbYa%(qgS4Hx0%$ry%AS%&QO|LNvVVo_&J+Gvtby!gn>~5G{
z`S@%)TRUpwy-iA>L=6<WUL7%l31C)@2R3b(JQIMRl@N0aXxymI3;pGf8%J=;s08l;
zN=c{Lvqp73wi+l^%FckBmL7?vHDOJ$s@ITEg6wNPW(pfx3%a<OS-#C;uvV0T@CjzG
zU=R@^0Yxn>S&;=d12bi~y=h@iG_mACM>JdD8o26PAm{Az4c)nj<ME*pv}`b1Hw!Yz
zZ#jU7YY0axrGd#{L|dDb4aVqj?#hayS<8j8E9N4$q#?%W;gg<Gwlor6;FhZ@J#^V_
z^kSxZU>VTNECd*c2ljC>)iKzJm?x`gQo$LU{h@dk^%k`&GLnf#%Ba=SnvO!KtV1Hf
zvph3(yrD}LrpN$C3{r$@;CwQM;1InB@Fnu}xog?t<KEAR(Q7B0hlIMs1<EciQ_LyE
zEwWoym*9%m1Qrk;J8p0^o_Gf{7+HXLits^KP-TT2fVDPe=-m-*YdO`*acH$qLf&QU
zJ5~YvtdY%F!0fKE!2}!&=J*(RZ%_>yLV;h~6+;6K_kS|SVkr@j9JP#X>&zX|)R?5%
zoVPH8^4Ta-9XzJM*jeOlG()#K3Kk4qlKKP|D+Aq_i6X0)s8$5As`l3ss*<jNh*e&=
zFD?kxvfl*<D;vcJQMs2!n27C)3x>Ktq8qwsqNR#ewRd=S?Ue3?b$=_kU@8?pg6IYj
zP+=N2-MSl%xNBVGn`W21Txj-FU(Fpg1=YB>L1@%5jMW|`aAcv)%UVk2mDN&=8cAw`
zfUjVnUaI!6!N@CS`FxX@$-$zTtWW@-Kw!T*L!6Zg@hw9|`6BBe7*{;w!xgpID+`{s
zsjWeSexea$#95U{w(enFG4Ix`0g{?q#vw^0g6m7h4pv6KDxQG4wlcgnF_LTRAO&xQ
zHZkTvEuBj@^$(@I+m0x^BcZurrUmR-Kq!pW>iaZq>Q~k)FAmLrb9E(j@6k7!n`EnY
zsXeTv85?u+Y*m6RFsvC=vsG873vP^5vZ=1aN4?(TYz!58TLHJZV)pqe>5J7~!n4<K
z$Hmp=%YuQ4Z<sr5VpGCJs^BH4_>0neJKr*ac{nu##XvEG!4j3OHiQKg^?`;kdu1|L
z%B8BTzY>$5)cJwsCcBuHUlRWS>o@_JR$7^QKo@ec<J1-w!v(7rxch^`do>)iTzRbA
ze2)~%8CdYa;~te#)s^~%T&D1Xa71FxB2-UMV#**U0;{11)0GNp=#3ZiZ_6%AM72b9
zcPv@DZM);B)TO9^ZzRI6T*m<J6d0kG(bQ}*t!2EOv133e8GI{J)OS|0fr?)yrxGMI
z-E@?xlrX}TX*5dWkwm*1-a18pSkYz!Y!-DiH<+~(+YLEgL^n=on_-KmiEuzsI$-z&
zOP%P{2#_;L_?^YEwhHkqJdLzc1lF=CQdqE=dlm;E&C6;>utLx-X6wTdev^^VR4#^)
zj&6qH3Rc|*MLKHErrp_k%&;zI60aEqV%2Cu)UCaj4Y=wA0Y+EQs!3UUa3k9<GRw=7
z2~}wA^RQ0EY&_&yCi=>b*H<hBS7Zr`WJ)zIZrN>N7ul47Rqpi)QQpNNE?j#VN_KR!
zcZ^X+?GO=c@T|2=74jMZv*KhWY!Dit3l`201d}=r*~<D?Ta_ABl(SX}dO+o&_Gi?q
zWxsdoR=9n>IT=Nv_5I>juBIE|@ld&^FDd=Y6^)KqH6uu@c#H97(1!YXV9amgQF}U4
z;H;&0TjEktchB`Kv1=W_>@&3Zse9puk7o-DFCU!2tj|@co5Q~n%1fw!z>pv6=gQ@2
zE?#dn^(lK)>={bL%u}4@cz|Pna6PjS#%PC1f+~tFi7Y7Jh<!mKB?LfK5sj&S2gAi?
znC@Eea|v5YboUxVUc;8UjG7zWs>gS6a%2D%&Ij`qe9%=2O_`Jz0gAPTOJZ588Ou1x
ztdzJ@{lTKP+6^sNnwk6%Pnn^ch$?XQz&1IRR9e1arn^L7w9?AGMA%oQ<{GAI5Q{FV
z)rexETp1Wl7o6jI+gOk2ZQ=ee5hBqmgqT<$umFRF(97j<4X)AQ>g)xzWshh*1MvZ=
zcOPgMrEk3iT69s3aNMs*>(*GIyG}H5EC#&7)otqwutE-864s7_>1B!gL>(ui0Z_S%
zCw;0sSAee!ED(e$txk1r$$(ecTB*MI>6EYKH#I|r>6d6)B`N^WCDN){(FMq(VtlBN
z&q^<CXf&9-Mzz^!ot_bxv*9zXTEEO-Z~|>OY6~|}h25S8r|v66{$R0p!u~?B3ba7(
zT{5*$Z;GGzDZjW7x-W|a{Y|P1*ft4Hn>}2GjoHmV#9fHiM1OS!El)tp3bqw0_0?BD
zk(C&E>-<p|!>gzIK=<D48EV&Zg;WOdZvqzKB@c3jy6k{AnN3u)RKB54C}RSZL}hbY
zMnQCYxI7UB*XV+lpQ5Fxdzno)QTO|n7FqExR=g7WQYe!5hwdqwipGtB5a@yt3MRJ~
zWMTmqk$ti4KniK#!I)h{(IG%tM{63|R%Jm;w(n3dr`qM#Ea>HkaFSyCmJw|2i7`;c
z(aod<8<<9RQ{~GRc{r-}`Yd{i3ms9)8I>e>f+=4IY-6IV`t8868{=^fW7oj7V9^jG
zQp2ATRS#nUSk9wdC8wQfS-X^tBDn`C#vSo1BK6xs3c>}t@$f>8Y@N&AyJ~g}b&B-}
zp!Y95o2YQa1yK|WWnhBU{{WCY6_8E^Ko3ySm@Zn1@HQKV*@}v+b6;!R6fkTyy?}B{
zRfihqCsr6(SpLy9)zf9f)E!n8oCij*33cB~J(dwPyb)y2phlXq=$7_gA?}<BgD#sv
zQ>QZ6=)=*{uzjehgkIB5iWyV=7N>xqn>?Jd^4$WmlQup0rS4L{=tTpK!&P=ohuYM&
zqV){vTp_EVxqqQ6rB-zR0D~JghTHe<DKxdHlM4Zxq^^(l0JIkrD@Wa*u!3Tfs(;7`
zuYp}anxMs50da3ja>p;;(Oq@n5*8@m63pApwLKp;lJXrhsAQWquJtQyPjGvKU%@P$
z%6PI+rUE4mQS%MpeKBqprAADzYZW&YyN-wjxiVFKL9ZF{2RHOZcxAo*iu?+1JWPeM
zkPv0WWq!%MQK2v%nwPILIZV6}FcunaRn{$p;IPb1D1gJ-P2w(<Nh-1A+ROPu8rX#+
zgDuPX1))MKM%_C^m-RSnD?n?us#WhhDjPDd7}jne)@Fz{jKNg5sf<(wC92q02MoDx
zPtS#SROB$L`eIo#ODecLW)F*@p8V#9V_#XW4XJKk24J^F+O7tpuyt;fUFHXdUcI$t
z!nW*N5-@SNxCYgAvjt2m-4@N{Vuo8FmT(+}+Om@$#;ZGtZDrSRKtMw6BB<MEPT&tN
z2D8e7mh}p!Rr%8|bh~q-;aeJBA27prCIWC&)j|zr6mJSCYhysLlBldhkOr8lJYq5I
zAiW&yDW;N`Y+~_~(b!_cSOnEUyf*-8gC|SfO-0bzdQlgUg$+L~l>}Cz4GsNUGE{tn
zIOrRRzBOni?x40pn<~@d*<v95FhC_X?EdFKWua=i(fc9`DD1j|m`{q|+zx}MYxqfp
z-QD(oWZe}!nT0PIzDM$k=n?Ecs2i+-bluBybHLdBFy#&6ntyWjtEvS4poeu{-2Unv
zQp{gHgtm)rTdXhuFm+vW%Uu1g2fMt&(Ue>AN74+1_RQ^-;`1~vq)69r0=4lBpyO32
zBTxBeKKq+5?Ge&SIk+YRaRgx!k-y=-S;WXsW?CNTgK$6?!=piSvQ~q7!)xGSu$9j&
z0+d%W{!K|-^Oy8YoS7?7%S*M3(}!BQDYiOk7Hn-m8Vw`9BTa&vQlV8Z0+r3QI5B<B
z$ggr$)#ucri<0Fy)sz|pfH+{>5-<t%!ZpF=gy%={VwH%|J5(F1+%}egJJ$^U*yv6o
z6*5Yvh^P!7M1>1#v!RG@t5j*C&9}Ebu(PEBrNG5ZZlzyfL;+)hftN-p_J}EUfPG9x
zTvb8dj=J?PEmK;iMY(RGv@M=+^tvdDW0sYO5CmFf7?pIxnRt6tkt`D$j`OMo_d92b
z^a>Resv^akHDX|l=#r+VoTRB%<>@RQlNBBZQf!qmjOjR{utt}?0!pjh6f-&j19sa>
zRJ`6yFfc3kZ3Y*B+L}+9h*emzwc_CDQF~wTg(rltS?z>3xi&$2wX-co*tZU-sO=VD
zA1zrZa*to?ODf6f5way-NB9!R<%c8I?FE1*L;nCU3$3{y=`oErSOek?ui2JUqr9=b
z<K&ll;#-YxvJG1MCOm$b+Uxk1QJaMr%Z8y@tiGlfg1yW|MqI^#xAhloA1g3x%TnC6
zUguf;m>gLAAAyxz0om&kp_u}z&r+4tLyFJa5XC`=)paVy3b;H(WicW~*BkC;xWT(k
zgH8@(t1Lc|L3o$oQ)#Q^L77^d)kI<2@zhv8pHA&VTonuh04T)}>V#V@vIu8rcR>du
z^gm0P0p7r%*dV^(AapPjw)jy2l(z($50FNom|Oi(3pBCux!73w8)u4*w8rG!<x#m^
zD94$G*0V3SQ?VV9t18N-U9P;jMlw>me3J&BW!}JbQFh@%f;-<J5v)v=Qd$K7qiZ0F
zYG@XrmHG&*s7OhsSWsy-a9vo5tgfov62!EKRn_Gs4_Bw1j1F6Ap$8y~$58Ghf0i3t
z6k_hUfT@#guijMoQ4SkIt#(8USP;EEWD)kdIErGU5lKzbgwF1Um0PPWUI=-cK(=2c
zFf@_=z^3=6YlCgvS(RuMl;}518&%%lO+*EZUQiIajW{3ai7}=*KeQT}7l32osas-u
zSo)vH@=7ZI09yKi(AON2+&&UPs9^C@+*eYSO*{ol(O&@&2&#9bQk}N%Fe37c_Y<ME
z)kiQeZ9llSYxRm*zp`44zo}!%@DNp{om4p6E!puFcl8UmelPrkN*q2QSKn0y?*3()
z$1=Ll(<w!`tN~Q4Wr!WW#A$k!EFg9QUWBF1Ow*P+i{<-bI{PpNY{hgQ;)#sLApzWK
zHTYsMA(bf|6EC4KQKpjPLkCO*t4l(g&67S}kkL#E+kKO34qYOy1HRzW6tp#yY#iS?
zhgU!zxL3GRj@kjr!_QFm2&7R@0OzJOf~8Vkduy889GP2fJ+rt~7`$<092iK91+W+o
zV9-$9N*;&Fz6IMh4sm@3^fL+1GTBAG14wC<ihO3^RnnJWL<{sZqVfS;M^e<McXv-n
zrI5Y#B!gC~EZ=^h1aBXNC@O<`xt(;yt@WLXSm1_p23InsnHa{_pj`_=z}qU$jPj_x
zjYW+k4nSp`*t?c1sa-!T-6<2OJ|zDDv1rxJkQmW)-sjjn0w|-lZa5W*P%wc=Dn7`3
z-d?TK<d#twSOhT?TEqom@y)9Hz)OK(raD;Gqt!?;aCVN*1Ox+*DPt>0HtvchN|w%l
z;-G1YzG~`oQT}CBUL5E50J|CN3CZ>ZmMPt&mtC9ds5?X10JNDm{{WC?s-8CeMe_UE
z1SzBFAI(asQ|12lgI4^)FtTzql%G*qaPmLMtf_DV{Zuc+od@#`74|}s_+pr_`C!wN
zsF=16t6y@~#yscvF);FP+FJ;>bEPXP(Dm*u-I2<wzG^LP4~b(<BJkBzvRzvInODgx
znyGhq=06V-#?QP<Z+YU2e{tdb#@Wjo2<a*_pTTiu%(kl9E{5(12Db<>4hD;RW+Yn-
zOXo$qv6i;O32uu8jA55<=)5E3u6)hhChHo_h51~ya|mpv5Aq!wLOwXI=59exbm}_5
z-EF)(syV2(T^!w6Sv?a*6(^7a887Sr*+&cX!zOr<&g^P`B%#Gjv{l(yhVN`bjm!PC
zKoeOmCDmp2?hTqPb2NxrY}GNj7G<y0@U>MLl>}0iPJmPn28}_Ot2n!5X}h;67&m3t
zTS9fEFM$$VQvIIQaFJX+B?g6@S8Kqm%BKNo%v-@@KoVRR>0NPZtBdQZ=}$yZGjh73
zWeIsIzS6WYK@hG&)3Q`Ia+<TS5IMzk29Fv~xSEBjJ{Dn*abkvOso-8nK?X3OZ&laK
zWn2>Ii+Z=rreDDaT60=>n2rb<{`oZ*bJD+<OE6Kx{?rNKR8g{5dH$JVtepx$>-d1R
zW%3!EXWh#{KBmZ$8MVRwGR5@HmUdh?5soeV%x?Z`47g2h+dJ3sQCzh7aSJJLW=VKm
z{6ifoo?&MC)LTZ+nuYOy2m2qn+x<YbgXu@^98<&vwN(7F(bK+IwuXKS@h?B}4%aR0
z{{SIsw{EVbu3rKS6xd&>T&DWE_jNaSY@)4e_bA0lFWM+#`c|d_thEtY0WyakS!=mr
zkD!fn`-_;qe+xK)dqE2glbbG*-Y&Vjt-%tC75<o0CEE&OShpOWqN50H1*pn43MfpC
zyapH+=sW>?XAQ@Fl_5GM-vfJ=BS5yJZd-@D+O$Dpy!eSwtoG@h2x_>!fUip*7q!>W
zIEj~JSG%QU+1m-amNg=jy7dA-HG-?X=DOwu=xCNRR`X6J)K!~em@Qz@qc9_=TfZGF
zysL~mLiW($k>&%zV}+{^5!Vn6tcrn4Y_8$PVHnU26lG3bUj~{TtsqZYN^;1_c)D0w
zt9Drts+!&%Ldtv^(o!s~Hx87FSgjY5x?Y-qf&@+vA++fRQiBm?%q9N7f-8`;x3V9S
zRC8D=Gy@rfay;6M#4WYm<`uk_iz_f(>+5HqB~Oxw+yz@JD7Cyp908!d*=2x%jF=^7
z%&so1;~^A6^fi(S;XF}#f-4+0P%1Pm1vto<=$>*3pKxkjK1_ayS^h#Q-52CvBrFTU
zW;cUx{@Iq{#l>b@A6u5YVH%<SGTCdy7geqJU^4qaqf#7E@RnN3FC2YTw~&Wq%e;Wc
zH*eGhaq}A}Ty75Lp3sE>Le{d(s={8Say_d!1L9uTbOfSf2bGDPD49@B`-Mt(ejE6>
zwG<W=x9VhPe7I%m*Z4)~K2?_5-=c_@FTz=W_)GU5c$a^LjKiYLWe7^rdCyY6mrr^_
zfz3+*x3|M|+mc}RJcO>$K~QesveH|He<U2(V!R7_?96>X;6S&ZxTc5}TP~GT9TXA_
zm^f|CRn*n}xd6#-V1cE`2J4#Cd5}`hS54lbtVvlY9MrBFL@Gy}NTclh4%l{IFcR=a
zFB}4#8|SG)>yqTHhjr?ijOnF8MIvN2RS-4j2p$VVB?m(l^s10s1xaj^b!n5y1OTp^
ztU0Y{#BR;k4T|;v&o0DAezioQKwH&aF=v$O>YYGHvu0LJHl(w=E*iMxROd>q)F6;E
z>gj9Z5anz`F3MLBHn!H)+HUz^uMuDtHFyxoMH<<vqj0UTc6ad`pRljyTq!LYDe_b`
z&NsKx+a_%d(~DpAaab7_SZ~Ebi)qS?e&Vlowl$xKoxDrAhKfFOEMaQ(f9y1V*iV{<
zvX25Pf^MpZ>rA}Zx-ht?rw$ROBJwk)3I>CPKE_^++`VKbg%Ju?9w>ig)V2AxH&_pU
z&MBH<xv%#ygg<287I-cR<L;7{(q!zf6DLGkcwd7*cQK1Fa<1j785c*cV`A+0WG`7i
z%+UnzAbivj((p?(s^eIcEotq#AZcKZ%CDJQ3y+$Qcs%A->2I5kfbGN-b)&t-*<0c$
zH&4qt8TAlb3d*zEDKgPI{5Hh-%tA?68Ge{ygAhZ2v@YvD)fbRJ*M8CsR2U$GQnj_Z
zPpIkauw3C-4f0Cr=#?50&ki_dV7iB!w*0UXiUp8P>5m*msIV(~vWvXbB|5Gb3{$`v
zQ_@kI-9WzcOSyam2~Dl?v1lYjX$@DBWZNPJn^x~7=wer7xy}XNDS|y%;9<HuYr_du
zdhV~fxCv}n??#ijD6}3Mg8&q@1>z{1HBAgXCA9T654xsH<z9P0A$q%p)C*I}B&R&X
zF3a#XPg;2DCdm{$vZnnk!DVV$APpiau2NYYw8j(YhBw#|s_@fN$O5*>H`}P@L2g~Z
z=Xd2`@+{rMcx6BRO=mxFyHCB;AO|fDLoCTwxvFWX5Sa9rF;*YRImP(NP^Fr4dH!bD
zjn;+(ybof2<u3mKF-6t9tVHU`dp*h*huF0Q)z1x6>MFAM?hSSNA_|4Fwk{!a`Zouw
zQ>Bb;`aqx~oizks_RRS`1W4}Qa~yClny=;{=zO~PCJZHRs-=!!#IDy{VSZbIo*iCT
zi>GAqa7Ds_!n3A5T-BaBF)b-M?aaG5ar%PT4078$9!kUaIe<Rxl*ar+LXVUEmQc}E
zcEAj&hfVi_C}j?-M0-GQY@&0O;F_!l?U{3ea;UE?2C%HY`bb%H4<ol15^0Ae>a<FX
z;>)&;@fu!(WPQ|oO$glsCA;~Vfien1k$H>735~0PDVgZn@B-Vf;yZ29mhaHScr}Dz
zH`@LygXTPv3d|g8C<3$O9obJTC8O%wPKW?5jmo8pgcUg|!W{UQLS&Rx3E4{-LkhxM
zu@FJZl!1ues#e%lG>4BtSZqbG{gaaXMBaQ6ON{pdb>AQt8K+T7b(b1PYOG9}s-!Z`
zlED@ku<i`#Qukx_d#GG&*6S=XrJ>mao!+i&wO7efg!$I~BC$-?x36)ES^EB95Fi*9
zz2X=txEibuB8gq_Oe)G=EvN?pLyM@eJ*ioDEmdmhToh`}7<Ux11H}-)L-hrv+5AhJ
zV6M4ri<MEn+*`d<=M3bQc!8jUO=TFC>Fs%a#cHCRH2(l3DW!;P{{T|Nqc_nzZH~1s
zu8zsft~e@H5mU^m(lp_>(Fz<>+z`~gDD}BOQu&RmKNb*n4<%jw!DpRtSNS+?HFW3q
z1+VD?=g|hP{sv|itJ=zJ1@Jd6+VbOYOR!_yt=^aF2zkGmY0=HBrm}fNvyt-3Xs|pO
zmdkY#a{gk1v6;3bP<2(fl;+s2as^pr&8)Ju%QDsg0i=V4Huf36GODG!G(mvXtAdU3
zM8igxOYn9?;24c~x@@CxS+-e19Rr@C$s|!<H$}F}k~SBE2Jo`d1q35(e~^;Lv2|Q!
z`Vc=Ig2bxbFx7VT4UQY_EihZ_<a;BnNHqwBl3jTys8nfgO6-DU1i*8xf|yEx9<6C0
z&J0t<p_N%;c6Eb5z?qa#b@+e)mB4DMSJvJw<+BPmY$2C)r?d7!R_$E?dD#PSlOcC@
zFBpxCZ$bTAl+|fl68INz(6L;${)vX`JwlX+$YL%>)ygVdH|6>uw9ZA02^8{CIniEA
zfYO)7KT^cU*n+FW!x$JC&8#fJ>11F~hr24tZBS1pe^9C}6|%p%V3ttSX=S-RkgZ^2
zWL82q$2Tym$9pA;@Wfw^QI=H>F!*7G5b|LqKtaZl{>X~`w6Q|fL$ZI|+545)`-%I^
z&1j~mK`{3X{{VLYX=|FO1=r}8M8CAPui7^6`%BKy*-R076;nJvxZM_>YGKdZquN_V
zzj%U7mx6k6w&fkZj6}I}E#>nX=jk$NADA2oO^-t<q-GdJ{YQy=XGW6D-SV=>CHOD!
zyTp2pvfD5O9}9^Dfocpl5!^0d3PST0ZDBzF0A^9O)6}#OHuJzYxla3tPQwkntVI~Z
z7Q;w9%GOpEtc#Z{X!3yO83$4ZYKNlmLbTr@RC^R;-NYx>nR<E+B+{G#a}-^og_lHb
z)D&o1#?ilx!E`#zCh@@i8@IR(E%bF8it3|qHA3)6S34>!qe2=CC$flo&S_0tvRy-z
zE{)y-Rt!?PuI?=awXK2km{yD<T6fF@SyW24GsjmQ1%64PZbsh`JdSrz1qidut}m>J
zAhln_Ihby<@<C2e-YNcNmz}hYTLP?8z8=nHn#aPoGYdUS(79TtxlUfg1aRQ?<_VNn
zz(cfen6ZgW+O2#_tqt*5d#jY#C~RN$m^poX{^QQlgmL{<N~ss&Q}oXv;Tc1hecTKw
z{w44!-cS6HZh<ZZ!|J80Z`EVwdXFR`n9cA-*1fru)t(8QaB`&GT2HBpyZV;AQ+q$w
zCZ$fkSc2I6%(ng^U75i}%(lS>zgU)JJw~0gK~k!#`B|U<^>qgJhn0vZ*ujDgR)NqL
zE!*U#F-@OD%cjWJ{$?+Tw|OHjEKEeitxH7lD2dcl&Mwlzsn%%mIrtP_xU9wdr^ihn
z-e8p2^x1oZ<ujQ~Ob8S-4qK@}<0u|8in`~R#dg%D(%Pn)BFv&U5QiNQGSE!H<W&*;
zwBaa5FBr}VW5_Fn(v_6tjjJ-4NJ=jr%CwlFQ~&_9RWB0vL*qr1*JNB^1*YgQTfqS7
zHlQ`^cPK%%p42OWy7vGr)qP*gs;D#f4GmrJe{ikPd;u?o4)gsix+}A3EE`{7{KFg+
z-nK$TpK8<+n+|Eie-gs;S2Y$E{{YjnHN>6V8m##s6roQxvbAUS&4@E8XnGocC2Uaq
zz=ps#qCnQ;(Z|^-=$qwW&co<#{wi6p?HZvNAkjNhk|tJr+xI9II2#}C;ZCfzm)9g8
zBgu9365-X(WzNrvmgo7Yw-3>CBJG!Vhtygs<+!Qw<G3a3Z$wIDAK5Ly1JMiS<~X`?
zve%Fy=kD_=jDHst2h+?h@5a=(A5hc>2LAxxETqBw!HVVNmxkB)B{W&qh&t1inSSOx
zRrzf?hqkZxf>NynoG^v`%Tn6MbA!3O%DuB6hA>7_Ic>K^u~MM<3u=jYiU(pzSgou2
zl_FVv+8PayFs4?uS}o+%x^02rQ!ZM3O8P08B`4M)Zm~R3#m9QNds3hP$!#f%Y?_P0
zs^Bsby(KyVt)f;a>H`$*zp_<kqLix33lDHHT;Ln8ErJ~86dodr7E}J{*NQw7vN_Gc
zQ<18q&B27Kjks2eKpDiW(V?cRkka5O=@4mc^hOoiS!JYCb&I0OY=)Pp=Cb?&F%%wB
z4p0@yEEotCTB%}QK5r2fSjPzbkxwhuDXFo_mzyP#Pw{bNXBAn$x#QkPaIF#6VSGE|
zk%nK(N@6lAJz;?DDBH&CvR7@oMYv!B&J`c2ccpo!3>i)FhSOXzsI>Sa4^7h7)?#W<
z;@bZJDkA$8OZkGrgYaLRM(<8TWik7dhHf;XpD{Qk7#hLp;$3g*O=$aO<>7Vm!D_Ew
z55myUOI-}NxIWU{5jg|q;Bs%=pitC**tW}KkT7k*R`QB(Ur<VEKSZTZ(gBf2m9{(!
z`V#x3`zHi17jcXS%nGa@9K|n_dLf_f6*&j2viiT6QZQ0mQS~y#1=ILd<hu0`8$OV$
z+Rz_UKO|_^bOJQw<T`Py$pK$Ic7@qm4x>JhsF#$5#NIcBpo-~2qflOrVx!BKWmsEO
zHpP*FnqKU&7Wsv;c3WWfu41m|OyFK#2s>y&LZ+ytvvJB6-d_ZY8s-26OJ41^x=JM#
zNM*LuO;d8SWDB*omWS%&R<6NSrw`c{pcu(p8vJa-1FlfWqgm;fw${dJbXLIX3ZPm)
z({%S8DvB+bD%fGZw{WIIfU*f_Q=yG>W%o-ED3$Y2K#ig4sdki}bD7;?6_YHY`z+6y
zaT*7tNK-9P(k1;e%4j}!E+JI5(V4QpNG5~$W?ZqxAdWAXC61Qx{{UAs<xt)#U7r0i
z_7!|I#SDX+)p?W{Ls<U+Ad0p;R)29rHM}@O=Hi;N?+H(<mfk_@AHy|o$}s}9N#^U+
z%WBIF6XE>J`-9+232NxkG0{03{6SjOvAm+5EQ6l>5E|ElWp-sB^>M{FUf=8RY0b)f
z8P&mlYqJpSk)sj5qAKm4Hw$R0JZ@OEy80#6QXaO;B?cES48GZPm2+E{_*r*|{Ud;_
z2KE|?b`9q;++D~OFbs9Z{__f5PL-myWNHVS_7?@}h875pK{zela5qgvIe~JKb{EHq
zY|D-E-R7G_UK>RQIC`*sR0q}}UJidHOG+~c+|`RmrX`99qht(etBg=G$N@Qcxl@sd
zZaxL6I;G?u8DDo>)Ui?O_yoS)m%4{x%2+w${u)b3m8EwIKQv57B9IMmKq0~si`5#q
z5}lT0L{+ibp#?q5mu5(21#BUEySZALBW1GM$#AB>XpW{_{+Vu1n20DTr<219A^2{(
zLRFMpZ(>Ti^+r`PT4L=8db&ro3+C&){^erW;Zc{W@?L-8h1#bt4NO6sI{lCFlxZmK
zRX#~|M-Cc48kEt$1)(XUT!;CK(ZA|&D4pd}+^gT;$nI2>e8xZ039Ncb`zCpd?Ju?d
zCOAJV%axWkOI;<L{*uRs69X*n6~Oyovc!&keG@P6f-!$tl(_O-+}O$w5?Q1AnPILE
z_GOo#GR0avR32#YEvlt-&_%$o^^d7#%k6-<S*X!3qAWSgxm?i~ur=HhkoGJE5b}43
z)EEJx4{qZHNUZqc>x8?f+KT;vMm&nTDti<b9o*v*CC;r1IwgIX<^ZM$u@Qv3h2jnG
z(H&!(!&Yc7Y0-|t7Fu?TGTPfLZNP2V3BrWDn-#D$ZBghnwQ3-=!WB?5umKbIP=Pa5
z?}mVUtV#|!O(8Ue_Ekq9V*daxNlTg*-YrYzmz{NBtE4TGqrg}I91RDeCl%_Z4snd3
zTE0&Eh8SLQY+-#Lcx5>mhbMWiCQy1VB?1UI;(HA^lx0gzX}=Ph!MgL9m=JLBEwZ}#
zDh@J_#J2$F(<}{zae9k&k*CCT4~rkDB9Q2_9+)M-&2uWkhh5VzxM{U2Wep8oEqZ3l
z0=A60DEY{Kqg6|;6*9&^JwNQjbxJZ6K01IFx!AH=#&w~(m3)&2C)A={=qhAO;QMBE
zo;sIRE!3sW!`!)1o~jku;$>*K<*%jGrvWbAT=vYhR^?uQajsS#31L2H?q61)6AM6P
z8Fmvb%JnSNw~yRZ>|)=7R}8OJGs8GrS0>|7Qu3X(i-oYKw=&DQb)qTa$+1HdDUDHv
zTZOlC15tDZbVcfCAEQdJYL=H4jLY~m4}j>*5Y~O9llx220a2YHsI9z2dQ#ZCd4MZT
zg4tRz4Of(7LJhVa9gw<lP#jghNMnmxPmEPzvH)7edWx%VT;I991PEf?%mS-5&LtO<
zk|j@Xa?v+D;CnL#5gbZ^S*xz)xxJ}0+;Rb=%|T<2cHx)0ZsjiM-tcM&qFC1wxG>}_
z{Y!6etDGvnG0#jKDZofx#ko_l?1GFkYi0icQt6Zd!)fYJDz%rm;8-Q@%DA+uaNCHv
z3hCF=It}Ko6tXm%-JcL_0zM^lTYOSFfQ-sHR%2k9%C{=AgJ?k}9E8iv5BkhZ9ACN7
zqI};PB9BC&!u$|ABZ?F}62YJ!d5#NNYcZ8ym5O)tOLtxZZM3;`<?#oj<~s}T%)8(v
zoy)VLVA@Kk7cT0<=6fZhhsWXOTgF!`Q}nJk<=m@qd_@Q}+@*M4rPCLa3A&1|>$&|*
zcu3>3KuaF+x0#^&qVYZg%1W&u3y(BgxKjEEf~t#cKCUroSYP8%#v#>Yg{qvuI5|qn
z`w#$FIN|dKZh=XHoUYBwC5M{1Wg2?t;!%5K&MI3=5mS;gx^J#pgDTBCl)JOoapak!
z^kEoU@eB+8zf2Gho-00{VC=^1vxaMltbC95bV2KHhI^gUF)F|9^s^nX=T(?H&5vsZ
z&hM*W(%Y{YJypTP1Hv;RXLtUSj08C=5D?8BVy&Dgb_FmvVpD2=GY1dLH_YI;!LQ<>
zO=4r*eG}sSvhNm5z5f6Z@O@9OnEwFLFUQ+CTSr8^VGDW0{{W^~=H_{7JPdl5@i3I!
zqoWlnSA<tP`IKY1b*xGj+0S2w@p7CK+_`bM;vktKur2d-Ql%GnJ`0xvK~S`8w`j`}
zbdkw&4tij7C*YFxEfmRHDy30HN(oQkFI5Ws9bcwy;9FGOyQYY3RXo_f7&vhK+@Xwp
zl@trDb9yFOE7MhSxf=8cDgb_oM?>8Zbox?iD+BemQqo=c+%^|F4=`KBUti_NECGB=
z3Ir34Kn$GgcPLd$!Vdl=txKf;0Eu7}AXPv&S0V*LXjBNyr!^BH3f;uC3+yUY(~t|V
zH@LmMl3s}Yh$92L%@O#5+NAVhV&dsT)%_&7Zy$?v%Qrk_+|<6ME>rIl5q{BpsV?OQ
zQ#<^8$2F2^rsdry%-^3E7PkBn@%<3D#Km2N%)b%H8<x9et}0o?&!h0I{s@w#KZNXS
zxmuQ3Q#E3|#;LerN8w^rG(n-9=!{*r8&xzd&?$8ss;kPmxci6WJBQ<f7`Sm+seLz$
zVpd?ay!RZfh?u^siBBH!3+?sSs^S80{ZaeWI9I8#OmD!!9%<LPp7pbm6uNJ<<eV^7
z>iLyZr#+Jy6kC&Jka6%CB`p?wlQF`4!KKoimuIpp#fKd|Fm??w?D$}`G#zUFj+li_
zw1S^wD41XJCAbZx{ngBN)sd*%wU+bC`jy30%S|V-nM-egEH8Oi_34&q{-4POxHH!N
zptXwh?fRGETQ2_q8Gv&sz{+`|7&Z4d{<ECFQr-`iZT@YA99M}#+Lqn2?U(m2wZ4gA
zhP`c>HnHS?a=c4ne42||nR%&XvBilFT7Nj|J*>W_V#;@a{3&i@SW~W=N@?QAv2(hm
zB?A|$W)KhWR4FkVGRSHR=+fOXWh3I4J{;CX*i7V%0*58kFCT;Qe8ADnqd9?1=($NO
zry6Re3dS#~er};v+4ED)61aQAE#RXDjCulE!Csyih-dVu0=@$C45B`3Ke<hcO(z7>
zI_4i2*kVvv8s`L=IHykP2wO|5)I|^);^BHnha>5M(!;3nZ)w~{2Gzx?ygW-y7Mv`0
zo{6}vosB8z(1Vhiex?jq;il$xx!JSn{g53;6wl1m$bFGQdxxL-h_pB5f7~#?Fh1j5
z&p=Cu%RaB~@lRDOJkO88qj`?pdWE^vs%3wOzMiG3K7t{)(jQTyE(cJzMDVj5H~J%f
zRqztg7ySqibKs3adzUZCE?UgXpTEs(Eb;g@CN+RrTP8x-nZI*(zk%rd{Iev}OM(K|
zIUu{tvZyN@k*t312n8iDyBJ?CY@EEX0;rrz)=IoLsFvhSUM?me)T5^~6h$+WgqYEV
z>a%ltfKa=IS{C}Mns-ApIdobakFpd$k%_Z(#vfhx2TFU|4Ti1m3!x8HU#3-1@&Wrf
zA(8B(BMc5aBQsVa<CXluq{pG3regPml#LkCvb@W2hsW$lUv$pOfm<&PVfij1u>|gH
z<Z{)^a7$|_Pf2Suaqd?oS?MepR|dJLUr|ne1k2(8f5@+|+bR_Q010)CUj#3p_{^j)
zqvkJcTjSz?(F=I_f2l|Q>Mucic!jMFXNwrEHhP%&C#mXJe}96%7w#F1W9nPxGarlm
zT+jai7`;tC<z~Y;mj}6AXYLj(@HZ)Ni#V6|CTObO)UVXBu6rvaQ~p~0Oj@ewse#0w
zB)VJERz~nd9n)~4)l)PsAyo%pVLakvc;>+iV?T9<X)JXz#z3y_Dc4H8K$Xj3ZppyW
z<&{o-UVbVdyI0W_a1FI?54g2~LxIx}d>UGQE($4lO2gzOjSSl``zHurT+G#hIT$)#
zPWqOcuS5FOxtWJEz?RG5W@ah}Yf(c)z09DC#-Lqa^o2Du!8qT+F1&s+cqUjU746*5
z-wys+@8Fgjehk9eC02JWY5DwJZTuJ&mwK6X`F(yaTx*J!_bgmT@xT5Fn*0{xdy6YP
z%gOi?PjizjyyxavSg{1NG`e;%Ot(y+8n$nBI}h|?_Dc;hX)*&C#2Zx|UcEp!fb2Ax
z){~L@CE;uHEvaLXQ5LG5b#ohhd4R&|wVJ5V&9!4+GMtOqrWvzivc6KKv>o(yWJ{+c
z6gTZhGX7iS7R%L&ykwM<4y|wD)Us&vD<sE|@siStwCp+dC7js#suRo!LZP!Z_;okO
z8NerH%YA+q@UGciOAc+HB)(^(60e_thB%tb_buPqi`ug9iFNK}+g>JlYFcrby}6XN
zK`7SZ)-IrM75&Twv3%5|E_;>BJDghnESZ#D^DE0U-X?Eqz-8Ab;{O0259X#HKY|Xw
z4jGE$@H4V>bv!5A1J{XFs1Vo5P+YY6C75dqtA_?YBJckIB{*$QYF34thZlpM$dy}8
zDJ??-_?A&`_<WL=ZH7DemY~^CXsO*Y!;wz0DODTqW7Hl(I!Z^Rh}FP6f7FT_5s9;*
zeFwM=HaF5Y@dUJQ&_C3t=ZNQ{?yZe8Lk7d)yCqI74fcEg0A&D$JUTIEz$37@Y8}El
zo6b;%zXvaf(1)3lTvf5T%iLr6BB3~EF{?H6%khHhVTXzQ1l;+XweD=kh-~?e{^uTt
z;em;k<C;!M{L%j7_;($A!V%&)9;Tm@iNWq^1akV19_H3}Ig(vi-A8Yx8)Xey!vM1e
z;it=F%fYFEPNEcfxAO(>q;MDr*g^$O1fOy(<(incD{hIesQk=6RV}lssFx*TTbBwE
z3l)x~qF(}RI4~whF3GF&09s4SI2=UYU10($_frJsKmWu4GZ6p+0s#XA0RsXB0|fy9
z000010udn)5-|fHK~Z5MFhDYa6GBjNkpvXMQetqSvC;q900;pB0RcY%*2SaMA$L7*
zTP$p{$0KoNmRV-uvvIhx^>bw9Sro+N{FkHAEf}?0*=3elxN<F<i!VmT#>*UwWtLhm
zOYE`Ai91+in>?XgRwn(M+G3J=Ut$=G*Y_{J%PefMvArz5%j~u}v`L$b_;w{X%_Jz`
zs$;t%{slj1O+MyXV`Y|ZHyevAzQ#AB)pyxrDZd8BZ24l17Ro6UP>X%i(f3}qS$aD5
zJzsr|=%PFg>e+pg#*4M-dNx^QjGtC8bmfvVPbu0t;FO~X?wh1b{bUqwHz(_Z{nz@I
z+upyn)kV+sH=k!uttDHVXuW9^iYb)DGixa##`V7X^d@dM7BT3{EOIQDQAeJA53AIE
zQusqRH1OJg2JWTq{w%-9<te<j*T|A0vc$PUwS%S9xb5<d*TH47%P+FV%kI4~u6t~3
zZ$>=nDN<~<?Y>V1a>nZ<w_3C6ZC;3NB->>+w^#NQ)$>eG3QMt;S!I@4eUD2ovdisk
zWsQxFabL{8$<&?URS5YfCzOcNO)+LRvMA*?IeZ(v4a#!*xb@&qZW6S)M52?r!yw2_
z)~)ujmWwR0y*C?+EV9ci+-@vvY;2cOG3EZm`i^UARqWcY2#OvJ&C^4E7amV5{4qVM
zu9{??=(zddj#6gDd=0p@YlDB)ej6nGQzO*a>G9x<)wZ3cCxxSW*|{5;{reu9wEfTA
z+|A70@@_X4Sz}`-Hr*$JiZ~lQw%!+(PEEB-A3jcaL;8H;&ZCs$Dp_bxg?<RN6lM7(
z3rf5*YFK;=g_JscXFLhGyg&Z{4xd^r?Z4UUW%gwkt)a5}lP~8=`FhK#PLi_Q<?8LN
zCE;ysd!0ITpY3H&b-qlb@~VfMRm#B#w4IJMEB(<Hth6>bZho*h$~2Q6`%gJHNj%Fw
z%Z!_~pGb#Za8)OMtp5OeO5aEPGC%6NO<Qh13|&OhYbf4tH!{t|nfX6s1tQJN+|9+8
z@?Xh+CH%8;LwlY_*?MhG{;FPnNA#*~w~8fhybFq<N7=XaBu+deM)y`~wB3}2z}-5h
zk~F06Hi<@^HI5prqYBda8nsPflIgtH42tm4)1Jytg7mYW<}c?<e)PeD%rc5)4+X6`
z8|=L(XQxBUzeB4`T()1;LwP3Z-IT2~#Kl#FWc^L<WNT|p@+7F6mp&O5t!B{bEv9ha
zqp9@PNOc^4x1utPmBp4{!Fp0DX=~ZF`Zm8t)-_pUZRqNR-DGdJwA?3#?Br^iABU$B
z6WrS;`jw*Ev~VUojlW5ayfi0t*&L;D!7h|rdv4Jr+Rq|tsg5p|TS%n%vM`m!rf!;i
zD)VF~zr_{U%6^eW6iN<WPvJjj@R<5?UIv=w4_xZ<G?acs)p3zEL-S%*U!&xWlX)6V
zo0U`LQJgaW0KwEx4l5$5WjgkllV7Q)k<GszGAX}`99NV$DK}VVV@adSXpdE|rqcO%
zXuZ+pKW9#qntv2Et3?&w)uyh8(7O8MK7;Wg;nnswWTeuzK2IEt2`)?F3E5+oP9Ef2
z!=-#X8+=h2U~MYM*BoV=ur~a$a*VTvy_TyZ+hruaYy6v4;eO@qlA%g6R<*{D?Ks8w
zNAThQ074%|58#(d5mw~KO`e&NQ*5ebQ6X{2tt0Aflj+K@k_lvPo)hH6{N;EXYSfi{
zo4@W%Zw|{(lGDhS6eLa<Jd#)zj??&OO||PB>i+)#Qd{Nm<3*(<Rj(|pmaE`tzXi8}
zt*z0qS2Rs^BPvyPM&!TXQG)(vhLtRlc`GduZzw}#*OE(eT-U*N*VUgwM3t@$tD7S5
zw10c8I#j%m2cqi~SDh?k^kat5+P8tW(ZV9HEfY%?DwjXm3GKSFlgP5Dp*%CnR6>+&
z=gtXcmx4(v#to^o*x^Ww+Q)%ZzjcENYSCYFsP0TdSum>tJdaB;y2`bFG_~m8l#*os
z0QxtUlRA?9F6z;0RV9)wSs`edlWox`_%_kXB_AU3z}jM7wY@X;Tcu+X$lg%-LLWML
z{fRx!k}9ZwP7|{$`whNn5^hnv4rw<0wP=&K@+F(DGEGHXx^|lI{E=?ys%5GW;v~q$
zv|%)cIU?e`mWNBzUYTmDk&nGN?yQb9^l56w(#bAWd1C1_B}jhn2yXe|3n{;X38dOz
z-{G5X3);afO9)AIBC_alsJnF2v_mVx^uAeb7AI>Xk!)^H$(<Qy=Ee9Ef_WSV5}&e}
zz}s%vqir_FB&ktu$+S&6NgWrtw9co~#JNNtD%Tc?#@(cJze-N?VpSA5+D@~<xx80A
zX$OLeD@HvQukSITp{*Fz(F8c5x;bU6pG+S0<*Pc?FZd#wrk5GPEF@Y^EwzEQoaEfp
zl9W|l5slo}8Gqo6Q&x?w5#e5!t1Geo14wBSL(|B~NUD{58&qcfI%L(w#d$^U+TRP4
zr%{ZO;qhY1R`@!$qbHW|$feYSY37M1CY`UR4RA(pYEAy8tM|du%iCOVG*HUzy;%PH
z7{-mG;G3jdMqdM~x8#d-?(9!$tlk;r3Ek7-vTo7QYi<`J+b81Aw@+$YZtWyNMNSp#
zvA?kY00ERVZ5pCTmVA}rC3J1I=~1ybKaM|Px=EIsLrVDIx4+^`{{U#}D}t_Rt4B?_
zMw&~MsDeqhbvapU1lHY;<!dIAw*JG@KY;aQ@P|UH)A_22NvUInf)6hI3l>W2oT_A%
z#pLNpd3=d-uaVmR88<)M<cr*s^XEyYpR4I)R@b-V@|zx=PEpI1k-_B^n<djtx8&kg
zfvXzZH2w|{<5HX9I&F~Rt)adU_dZe+mMs<~a%rSaH6+*NJsCG<Q_*P2JCk`tB(l*f
zlZh-pCpe>PisVYsmQcmE*(|3`bEEq=+kMxo)^d4Agn1sbmKi5hbgG&f!`Etgtv_P*
zdOqj)Z0cp{TDD5-9x_ceEb#mb=%zM`mxFFoa>~&v(z{=C{63>iRrfM7Z+gE}O63^Z
z@mA56lJrJ4mJN*CTG0Dnb6<rwOTJE%W-iF^L92fxRV4MTUX|HjkJL~0DfYH)wIzI^
z#kp6(3`U<QOX}c^qxx?(VrpH_NBL4HarBL}Bs7+ZV1jo1Se4yAQC4O$wnN(Qujmrx
z3{M4A*%p&|<dR9*JC#~GURT(EnDvv=>Dwe%8ZzrC5S6E9^=QXy{MLpz+Z1g&8_LI$
zMqfH!k9F{0!y@i0`V|hw*P=1n+iK9qc(gH<s!WQd-v0nGtu7wQjo9gxXiF$jPr>{p
zPYnJYK259F+I`vlI~%d-MKQcmHoX;le`)?((Ue+`BY)7ZPoBrv<yJdx>{;)BpMA|)
zw<2HDD0g&`8}k1EqI0eHSN;HB(EJa92xo=a<npzDWu7~j{{H~~!~iW300II50|NsD
z0s;d800000009CKArKNVAVE<BKw%;<ae+dSGEfszv7!Ik00;pC0RcY%=&!k2E|;Q0
zMF|v9T@+D86j4PGk7iP3MRw^}AK6H)D5s?rrD&Fk2?-&hhKd(TDB2`&h>nvQqizPZ
zUtur0ghg~cXrhJq5<*%fX30M2UYc3uju+g!LaG|B<B45$(?u1fX<AW2LKj0qLg`4N
zpMfnXQCeH;vy!@L=|yQ>2^3I}lj*LMgtSOVp)QLrO6#E`X|&o=MH^X6p+&byP<Kt6
zV84k`ycL}iD58XotlGs9FM%Yqp(3<JYh6{U;9Ut6VGdpeoh@;<OC?oh@a)90HPc-b
zP?m{mx~Q!%V@3HeBvC?Ix1x1IQt?75Q)0^>0#@lENh}nrBEzDDgtb~OwWSrMGPJLP
zkw~J1v`AXX_|xF@lx;VXR^*y0noMt$h{G1yMigCh=eXLF%ceqZiQ1R!y!>ds(&(a*
zT2WmzEh|RSFOp9m0?%Qk9CAi4m--eH9$%Ev6w|k3@Ht?^R*J@sJCbYmB<em;vbrd)
zt1wx)lu<_4<fc@GA1K;~NN4C;Smd)@mdm|7B#1>NZtWYXtHKg&g(n-uF|4;;$u{%Y
zx_l9k*>3nPp*#`uLZ_5dDT`Xt{(7jQn6$5iC8y~Q{ApvCLK4Gvh@`Dr%KeSOMI>Fj
zAnjd}mB~?diQfW4{2QoQFj8pxqf~B|HmvutdY=Sm7fRV^v~EV^UFm~#f9!`p5-xuu
zn<%BF2_fz9W5Is~{2{vKjo(r?_oeahE0e_y2^lX4jIWkTxjT<VgpT5sm1>Q&b63h`
zycKKd<VtK%@@$WRLId>T&5Eem5Bi}+F51z7(Rw*j6r#=vO~16INsppA9~Dmmi(}E^
zhslx&HC@p-;TPQ)X;JCRG&bVI^yjgT?uuU}P?IT?Z(dEy$+>wqN66&fitKW4A7zln
zXqQS^8sLdFn-NK?D@fzMMK;piSt(gm$fYh4vRjf#p-*k9BkEG}CGyJrl)itXA3xFk
z{{T$2^Zhd8<^KRhzrDgaW6NZ0Z%WET>?6}w#@!~-6_L{%YN&#J*-q$D$rz(z`Lcwt
zDD8HOxcMdNu5(YYt}lT%B?h}Zn~lYmTk>1;_Af+=S~a3djIB7<sH#FDsSoOkk97DR
z9t73oaTa?Oc2-2b4#LMGGunz~*Sh;zUTKhxDkxf0D5v)Ao0yx?I<or<n>o=ejCnDF
zGmFB&-B6>uy1F*}5hBXUXrh`)XylJi)XzVyFOoSjU9571{{S}fE{uKVhE@b4y3^xK
z6&TaVrEyJ>bzhR>B$(*R>_v@Y%e0NCciD+$G_XPTCfXwKDG8-6dvIQO6+gLUve}Y8
zS>H!;W5zl%Azfff+8a%lyD|?LC2KYE%Ed7pJJPa_&DlF{k%;!U;DyH9%NpHJxRnZ7
zB?T<5M%;f-C#KtzUcn7CCyEwHbJI?^6KfTcD>xc<FHWOvrpQ%u!4-_6F{aYIGPy%k
zCOs=CZCSdkgs$5Ztrtv$*8}c)aFXGYl8Uw}YY$5Mh;-smxFv*z!__Jm^1*h~XjI<<
zjWn+Ok&Q}?t)-uaMNub;yu1-o`c&!sq1AaqF9Mk4PH9<|oP~Xv7|HOgQ1u=C4%fl9
zNhZ_3l|oXLVW)U&BJ|p6?`Q2FqQ2$pY_jn}5V<W4y*)L>a?7TbcO7n4C$**7h;rE8
z3r<S1iQ%q(Sc*2S!u0E&MHS$Wrv;T1D8~3grNFPrSB5W25oxIB@-|y9?<diERd+8M
zb`j}TTe5sbuFoWXrtUm3-UP|>YslJiX4-Xlc^XT<9E&-kOC(sBtf2|9J#1dl3{8nP
zLOso|1G;eUSUotkU;QOni|$74jaq8CDdQL^INV#ZPl)#%oN(D`pMp19rK0GsX=h;&
zf~$NMr5hBa;FT-NAta{c{{R+MZb{SmCvC;PRatJ`E=W@)Es|KknvN;`Sxl5wynl_~
z{*qUf+);gn2aJmyg=Tclw93&UzCE9F(vIeBi=%2gD50f<hPS)LD@7cB$fMMaypGcN
zA?i6@_!jDGwTPhzy%$Dx{rd~(^zfUZH+I{rH&e*w_aSAmDo-NEepy)jG90|)!6mmh
zWaVit<S`j=dT!fC>r51{ofSTc*B;U;+FE9@RA--)_}!37v&$r@Ve&Mc2@xipEO1Ns
zy5L#gY=V!3CQfcCS1pQnUPwC@h+4007GDJ2)gk`?h}%$ThpOX_#oSX9{{Y$-)fQQH
zmv&3e+akGl*@>j_Vs*p)GEK=A;*(Z-Gk8V&m8@f5(6W)jXp_Zh6>SM(iN?}T85Kb?
zIYraA$eNd8%q2)di6te+YawxQZY)|aZ-t~$$-*y2dU47T>L-RQ)uNs9i_S#l#fU;`
zgiRyUUsC8#+oB>YZ#dB_BTBEn2sK=f>ax4jV{!gp+U_TYlvOcZ9QPt6tQ9}9y^0ZH
zcpETT1W7A{YRKWs^L1s@W0OtWH=}k9%tUDk=!L2mRr>|k6_kp69m%GWCf&3xP=v%-
zwXr^{_6w>jyA=MYy6##V%4EOAWRiJ(tZBvSg`yJ|P3wNn^t~3ctPRz6r$wQqC{iWi
ztyZW^OhSD(s=sQ4G|RX~xhHNb9CAiY;Dtprnd+_{tDy)&W%RFZh2QWcxl$tE1Z8$H
z6}ps}I3(3xPx$1McE1AXLeYJT`1ZCpO<E$b{{R$4Ht;HlnrneXcxX;F$#l6LDL$3a
zeJIbhr{vvrPa^yn%0d?cY~|^|-RiYM)q9)LrQo><v|a&p0E_=n--B~U{Er6vTpOKL
z^`<Q|qW1}OS{2=jOTL-#x>FZI>0aS!PFxlCS4uCZ_oc5Z+axY3zS`Ajv`?b_x;JB0
z_E$=MR{gRP@;duyS}uzdF{VAT``q;Yg!EtO)~ilTm;RM~g<9eN0Ik3EOMz<m)Bo8w
CsgX<o

literal 0
HcmV?d00001

diff --git a/apps/labs/assets/styles/app/_code.scss b/apps/labs/assets/styles/app/_code.scss
new file mode 100644
index 000000000..43b480716
--- /dev/null
+++ b/apps/labs/assets/styles/app/_code.scss
@@ -0,0 +1,133 @@
+code[class*="language-"],
+pre[class*="language-"] {
+    background: none;
+    font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace;
+    text-align: start;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+div.code-toolbar > .toolbar {
+    display: none;
+}
+
+
+pre[class*="language-"] {
+    position: relative;
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    max-height: 40rem;
+    overflow: auto;
+    color-scheme: dark;
+
+    &:before, &:after {
+        display: none !important;
+    }
+
+    code {
+        border-inline-start: 1rem solid transparent;
+        box-shadow: none;
+        margin: 0;
+        font-size: 14px;
+        border-radius: 10px;
+        color: #ffffff;
+        max-height: inherit;
+        height: inherit;
+        padding: 0 1rem;
+        display: block;
+        overflow: auto;
+
+        .token.comment,
+        .token.block-comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: #bbf7d0;
+        }
+
+        .token.punctuation {
+            color: #bfdbfe;
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.function-name,
+        .token.constant,
+        .token.symbol,
+        .token.deleted {
+            color: #93c5fd;
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.function,
+        .token.builtin,
+        .token.inserted {
+            color: #eff6ff;
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .token.variable {
+            color: #ffffff;
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword,
+        .token.class-name {
+            color: #bbf7d0;
+        }
+
+        .token.regex,
+        .token.important {
+            color: #fde68a;
+        }
+
+        .language-css .token.string,
+        .style .token.string {
+            color: #fde68a;
+        }
+
+        .token.important {
+            font-weight: normal;
+        }
+
+        .token.bold {
+            font-weight: bold;
+        }
+        .token.italic {
+            font-style: italic;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+    }
+}
+
+.copy-to-clipboard-button {
+    display: none;
+}
+
+pre[class*="language-"] {
+    code {
+        background: var(--code-background);
+    }
+}
diff --git a/apps/labs/assets/styles/app/_content.scss b/apps/labs/assets/styles/app/_content.scss
new file mode 100644
index 000000000..e82a1385f
--- /dev/null
+++ b/apps/labs/assets/styles/app/_content.scss
@@ -0,0 +1,18 @@
+.layout-content {
+    padding: 6rem 4rem 0 4rem;
+    display: flex;
+
+    .layout-content-slot {
+        flex: 1 1 auto;
+        width: 1%;
+        padding-top: .5rem;
+    }
+}
+
+.card {
+    background: var(--card-background);
+    border: var(--card-border);
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}
diff --git a/apps/labs/assets/styles/app/_core.scss b/apps/labs/assets/styles/app/_core.scss
new file mode 100644
index 000000000..59bca1453
--- /dev/null
+++ b/apps/labs/assets/styles/app/_core.scss
@@ -0,0 +1,94 @@
+html {
+    font-size: 14px;
+    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-feature-settings: "cv02","cv03","cv04","cv11";
+}
+
+body {
+    margin: 0px;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: var(--ground-background);
+    font-weight: normal;
+    color: var(--text-color);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.layout-wrapper {
+    background-color: var(--ground-background);
+}
+
+a {
+    text-decoration: none;
+}
+
+::selection {
+    background-color: var(--selection-background);
+    color: var(--selection-text-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-block: 1.5rem 1rem;
+    margin-inline: 0;
+    font-family: inherit;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--high-contrast-text-color);
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+h1 {
+    font-size: 1.75rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+h3 {
+    font-size: 1.25rem;
+}
+
+h4 {
+    font-size: 1.125rem;
+}
+
+h5 {
+    font-size: 1rem;
+}
+
+h6 {
+    font-size: .875rem;
+}
+
+p {
+    line-height: 1.625;
+    margin-block: 0 1rem;
+    margin-inline: 0;
+}
+
+.p-toast.p-toast-top-right,
+.p-toast.p-toast-top-left {
+    top: 7rem;
+}
+
+button {
+    font-family: inherit;
+    font-feature-settings: inherit;
+}
+
+*,
+::before,
+::after {
+    border-width: 0;
+    border-style: solid;
+}
+
+textarea {
+    resize: none;
+}
diff --git a/apps/labs/assets/styles/app/_doc.scss b/apps/labs/assets/styles/app/_doc.scss
new file mode 100644
index 000000000..3788b6b49
--- /dev/null
+++ b/apps/labs/assets/styles/app/_doc.scss
@@ -0,0 +1,440 @@
+@mixin mark() {
+    border-radius: 6px;
+    padding: 2px 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    font-style: normal;
+    background: var(--mark-background);
+    color: var(--mark-text);
+}
+
+.mark {
+    @include mark();
+}
+
+.doc-tabmenu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    margin-bottom: 2rem;
+    overflow: auto;
+    position: relative;
+
+    &:after {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        border-bottom: 1px solid var(--border-color);
+        content: '';
+    }
+
+    li {
+        position: relative;
+        z-index: 1;
+
+        button {
+            background-color: transparent;
+            border: 0 none;
+            display: block;
+            padding-block: 0 1rem;
+            padding-inline: 2rem;
+            text-align: center;
+            color: var(--text-color);
+            font-size: 1rem;
+            letter-spacing: 1px;
+            cursor: pointer;
+            margin: 0;
+            transition: outline-color 0.2s, border-color 0.2s;
+            outline-color: transparent;
+            border-bottom: 1px solid transparent;
+            border-start-end-radius: 6px;
+            border-start-start-radius: 6px;
+            white-space: nowrap;
+            --p-focus-ring-offset: -1px;
+            @include focus-visible();
+
+            &:hover {
+                border-bottom-color: var(--hover-border-color);
+            }
+
+            &:focus {
+                outline: 0 none;
+            }
+
+        }
+
+        &.doc-tabmenu-active {
+            button {
+                border-bottom-color: var(--primary-text-color);
+                color: var(--primary-text-color);
+            }
+        }
+    }
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.doc-tabpanel,
+.doc {
+    display: flex;
+}
+
+.doc-main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    min-width: 0;
+}
+
+.doc-intro {
+    margin-bottom: 1.5rem;
+
+    p {
+        font-size: 1.25rem;
+        margin: 0;
+
+        a {
+            @include doc-link();
+        }
+    }
+}
+
+.doc-link {
+    @include doc-link();
+}
+
+.doc-section-label {
+    display: flex;
+    align-items: center;
+    scroll-margin-top: 6.5rem;
+
+    > a {
+        color: var(--primary-text-color);
+        opacity: 0.7;
+        margin-inline-start: 1rem;
+        display: none;
+        transition: outline-color 0.2s, border-color 0.2s, opacity 0.2s;
+        outline-color: transparent;
+        border-radius: 6px;
+        @include focus-visible();
+    }
+
+    > .doc-section-label-badge {
+        margin-inline-start: 0.5rem;
+    }
+
+    &:has(.doc-section-label-badge) {
+        line-height: 1;
+    }
+
+    &:hover {
+        > a {
+            display: block;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.doc-section-description {
+    > p {
+        font-size: 1.125rem;
+
+        i {
+            @include mark();
+        }
+
+        a {
+            @include doc-link();
+        }
+    }
+
+    li {
+        font-size: 1.125rem;
+    }
+}
+
+.doc-notification {
+    line-height: 1.5;
+    padding: 1rem;
+    font-weight: 500;
+    border-radius: 10px;
+    background: var(--mark-background);
+    color: var(--mark-text);
+    margin-bottom: 1rem;
+}
+
+.doc-section-nav {
+    position: sticky;
+    top: 6rem;
+    right: 0;
+    width: 14rem;
+    max-height: calc(100vh - 15rem);
+    list-style: none;
+    margin: 0;
+    padding-block: 0.25rem;
+    padding-inline: 0;
+    margin-inline-start: 4rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    align-self: flex-start;
+
+    > .navbar-item {
+        .navbar-item-content {
+            border-inline-start: 1px solid var(--border-color);
+            padding-inline-start: .25rem;
+            transition: all .2s;
+
+            &:hover {
+                border-inline-start-color: var(--hover-border-color);
+            }
+        }
+    }
+
+    .navbar-item {
+        > .navbar-item-content {
+            display: flex;
+
+            button {
+                font-size: 1rem;
+                text-align: start;
+                background: transparent;
+                margin: 0;
+                border: 0 none;
+                padding-block: 0.25rem;
+                padding-inline: 1rem;
+                color: var(--text-secondary-color);
+                white-space: nowrap;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                transition: outline-color 0.2s, border-color .2s;
+                outline-color: transparent;
+                cursor: pointer;
+                user-select: none;
+                --p-focus-ring-offset: -1px;
+                @include focus-visible();
+            }
+
+            &:hover {
+                button {
+                    color: var(--text-color);
+                }
+            }
+        }
+
+        &.active-navbar-item {
+            > .navbar-item-content {
+                border-color: var(--primary-text-color);
+
+                button {
+                    color: var(--primary-text-color);
+                }
+            }
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            .navbar-item {
+                .navbar-item-content {
+                    padding-inline-start: 1rem;
+                }
+            }
+        }
+    }
+}
+
+.doc-section-code {
+    position: relative;
+
+    div {
+        &::-webkit-scrollbar {
+            width: 5px;
+        }
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 1rem;
+    }
+
+    &:hover {
+        .doc-section-code-buttons {
+            display: flex;
+        }
+    }
+}
+
+.doc-section-code-buttons {
+    position: absolute;
+    align-items: center;
+    justify-content: end;
+    z-index: 1;
+    top: .75rem;
+    right: .75rem;
+    gap: .5rem;
+    display: none;
+    background: rgba(255,255,255,.05);
+    border-radius: 10px;
+    padding: 2px;
+    backdrop-filter: blur(6px);
+    border: 1px solid rgba(255, 255, 255, .1);
+
+    button {
+        outline: 0 none;
+        border-radius: 8px;
+        outline-offset: 0;
+        background-color: transparent;
+        transition: background-color .2s, box-shadow .2s;
+        border: 0 none;
+        color: var(--code-button-text-color);
+        cursor: pointer;
+
+        &:hover {
+            background-color: rgba(255,255,255,.1);
+            color: var(--code-button-text-color);
+        }
+
+        &.code-active {
+            color: #bbf7d0;
+        }
+    }
+}
+
+.doc-section-code-tooltip .p-tooltip-text {
+    padding: 0.5rem;
+    font-size: 11px;
+}
+
+
+
+.doc-tablewrapper {
+    overflow: auto;
+}
+
+.doc-table {
+    border-collapse: collapse;
+    width: 100%;
+    min-width: 960px;
+    margin-bottom: 1.5rem;
+
+    th {
+        border-bottom: 1px solid var(--border-color);
+        padding-block: .75rem;
+        padding-inline: 1rem;
+        text-align: start;
+        text-transform: capitalize;
+    }
+
+    tbody {
+        tr:hover {
+            background: var(--hover-background);
+        }
+
+        td {
+            padding-block: .75rem;
+            padding-inline: 1rem;
+            border-bottom: 1px solid var(--border-color);
+            white-space: pre-line;
+            line-height: 1.5;
+            scroll-margin-top: 6.5rem;
+
+            &:first-child {
+                color: var(--primary-text-color);
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 600;
+            }
+
+            .doc-option-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-text-color);
+                font-weight: 500;
+
+                .doc-option-type-options-container {
+                    display: flex;
+                    align-items: center;
+                }
+
+                &.doc-option-link {
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+
+            .doc-option-name, i:not(.pi) {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                position: relative;
+                scroll-margin-top: 6.5rem;
+                background-color: var(--mark-background);
+                color: var(--mark-text);
+                border-radius: 6px;
+                padding-block: 2px;
+                padding-inline: 6px;
+                font-weight: 600;
+                font-style: normal;
+                white-space: nowrap;
+
+                .doc-option-link {
+                    position: absolute;
+                    top: 0;
+                    right: -1.5rem;
+                    color: var(--primary-text-color);
+                    opacity: 0.7;
+                    display: none;
+                    transition: opacity 0.3s, colors 0.3s;
+                }
+            }
+
+            &:hover {
+                .doc-option-name {
+                    .doc-option-link {
+                        display: inline;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+
+            .doc-option-default,
+            .doc-option-returnType {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 400;
+                font-style: normal;
+                display: flex;
+                border-width: 1px;
+                border-style: solid;
+                border-radius: 6px;
+                padding-block: 2px;
+                padding-inline: 6px;
+                max-width: min-content;
+                border-color: var(--border-color);
+                background-color: var(--card-background);
+                color: var(--text-secondary-color);
+            }
+
+            .doc-option-parameter-name {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+
+            .doc-option-parameter-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-text-color);
+            }
+
+            .doc-option-params {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+        }
+    }
+}
diff --git a/apps/labs/assets/styles/app/_docsearch.scss b/apps/labs/assets/styles/app/_docsearch.scss
new file mode 100644
index 000000000..270e2f46e
--- /dev/null
+++ b/apps/labs/assets/styles/app/_docsearch.scss
@@ -0,0 +1,147 @@
+.DocSearch-Button {
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    height: 2rem;
+    background-color: var(--card-background);
+    margin: 0;
+    transition: outline-color .2s, border-color .2s;
+    outline-color: transparent;
+    padding: 0 .5rem;
+    @include focus-visible();
+
+    &:hover {
+        border-color: var(--primary-color);
+        box-shadow: none;
+    }
+
+    .DocSearch-Search-Icon {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .DocSearch-Button-Keys {
+        overflow: hidden;
+        min-width: auto;
+        height: auto;
+        background: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        padding: 0;
+        gap: 2px;
+
+        .DocSearch-Button-Key {
+            background: transparent;
+            display: flex;
+            padding: 0;
+            margin: 0;
+            top: 0;
+            border-radius: 0;
+            height: auto;
+            width: auto;
+            font-family: inherit;
+            box-shadow: none;
+
+            &:first-child {
+                font-size: 0.75rem;
+                line-height: normal;
+            }
+
+            &:last-child {
+                justify-content: start;
+                align-items: center;
+                font-size: 0.75rem;
+                position: relative;
+
+                &::before {
+                    content: "\e90d";
+                    display: flex;
+                    color: var(--text-color);
+                    font-family: "primeicons";
+                    font-size: .4rem;
+                    opacity: .7;
+                    margin-right: 2px;
+                    height: 13.5px;
+                    align-items: center;
+                    font-weight: 700;
+
+                }
+            }
+        }
+    }
+}
+
+.DocSearch-Container {
+    z-index: 1101;
+}
+
+.DocSearch-Modal {
+    border: 1px solid var(--border-color);
+    box-shadow: none;
+}
+
+.DocSearch-Footer {
+    box-shadow: none;
+    border-top: 1px solid var(--border-color);
+    background-color: var(--overlay-background);
+}
+
+.DocSearch-Form {
+    background: var(--card-background);
+    box-shadow: none;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    transition: border-color .3s;
+
+    &:hover {
+        border-color: var(--primary-color);
+    }
+
+    .DocSearch-MagnifierLabel, .DocSearch-Reset {
+        color: var(--text-color);
+    }
+}
+
+.DocSearch-Hit {
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0;
+    margin-bottom: .25rem;
+}
+
+.DocSearch-Hit-source {
+    color: var(--primary-text-color);
+}
+
+.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
+    fill: var(--primary-text-color);
+}
+
+.DocSearch-Prefill {
+    color: var(--primary-text-color);
+}
+
+.DocSearch-Button-Placeholder {
+    text-align: center;
+    display: inline-block;
+    font-size: .875rem;
+}
+
+:root {
+    --docsearch-searchbox-focus-background: var(--card-background);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-muted-color: var(--text-color);
+    --docsearch-searchbox-background: var(--card-background);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-modal-background: var(--overlay-background);
+    --docsearch-key-gradient: var(--ground-background);
+    --docsearch-key-shadow: none;
+    --docsearch-container-background: var(--docsearch-mask-background);
+    --docsearch-hit-background: var(--overlay-background);
+    --docsearch-hit-shadow: none;
+    --docsearch-spacing: 1rem;
+    --docsearch-hit-color: var(--text-color);
+    --docsearch-highlight-color: var(--primary-color);
+    --docsearch-hit-active-color: var(--primary-contrast-color);
+    --docsearch-searchbox-shadow: none;
+}
diff --git a/apps/labs/assets/styles/app/_footer.scss b/apps/labs/assets/styles/app/_footer.scss
new file mode 100644
index 000000000..1fe7448f4
--- /dev/null
+++ b/apps/labs/assets/styles/app/_footer.scss
@@ -0,0 +1,26 @@
+.layout-footer {
+    padding: 2rem 4rem;
+    margin-top: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    font-weight: 500;
+    color: var(--text-color);
+    border-top: 1px solid var(--border-color);
+
+    a {
+        color: var(--primary-text-color);
+        font-weight: 700;
+        transition: outline-color .2s, border-color .2s;
+        outline-color: transparent;
+        border-radius: 6px;
+
+        @include focus-visible();
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+    }
+}
diff --git a/apps/labs/assets/styles/app/_glow.scss b/apps/labs/assets/styles/app/_glow.scss
new file mode 100644
index 000000000..aa1209bd3
--- /dev/null
+++ b/apps/labs/assets/styles/app/_glow.scss
@@ -0,0 +1,7 @@
+.landing, .layout-wrapper {
+    background-blend-mode: var(--glow-blend);
+    background-image: var(--glow-image);
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: auto 20rem;
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/app/_mixins.scss b/apps/labs/assets/styles/app/_mixins.scss
new file mode 100644
index 000000000..7093f943b
--- /dev/null
+++ b/apps/labs/assets/styles/app/_mixins.scss
@@ -0,0 +1,25 @@
+@mixin focus-visible() {
+    &:focus-visible {
+        outline: 1px solid var(--primary-color);
+        outline-offset: var(--p-focus-ring-offset);
+    }
+}
+
+@mixin doc-link() {
+    color: var(--primary-text-color);
+    font-weight: 500;
+    transition: outline-color .2s, border-color .2s;
+    outline-color: transparent;
+    border-radius: 6px;
+    @include focus-visible();
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+@mixin mobile {
+    @media (max-width: 900px) {
+        @content;
+    }
+}
diff --git a/apps/labs/assets/styles/app/_news.scss b/apps/labs/assets/styles/app/_news.scss
new file mode 100644
index 000000000..e3247fa10
--- /dev/null
+++ b/apps/labs/assets/styles/app/_news.scss
@@ -0,0 +1,92 @@
+.layout-news {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1100;
+    width: 100%;
+    height: 2rem;
+    padding: 0 2rem;
+    background-color: var(--primary-color);
+
+    .layout-news-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: calc(100% - var(--p-scrollbar-width, 0px));
+        height: 100%;
+    }
+
+    .layout-news-content {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 0%;
+    }
+
+    .layout-news-text {
+        line-height: 1.5;
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        min-width: 0%;
+        font-weight: 500;
+        color: var(--primary-contrast-color);
+    }
+
+    .layout-news-link {
+        margin-left: 0.5rem;
+        line-height: 1.5;
+        white-space: nowrap;
+    }
+
+    .layout-news-link,
+    .layout-news-link:visited,
+    .layout-news-link:active {
+        color:var(--primary-contrast-color);
+        font-weight:700;
+    }
+    .layout-news-link:hover {
+        text-decoration: underline;
+    }
+
+    .layout-news-close {
+        color:var(--primary-contrast-color);
+        line-height: 1.5;
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: 1.5rem;
+        height: 1.5rem;
+        transition: background-color 0.3s;
+        margin-left: 0.5rem;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+}
+
+.layout-news-active {
+    .layout-topbar {
+        top: 2rem;
+    }
+
+    .layout-sidebar,
+    .doc-section-nav {
+        top: 8rem;
+    }
+
+    .layout-content {
+        padding-top: 8rem;
+    }
+
+    .doc-section-label,
+    .doc-table tbody td .doc-option-name,
+    .doc-table tbody td > i {
+        scroll-margin-top: 8.5rem;
+    }
+}
diff --git a/apps/labs/assets/styles/app/_responsive.scss b/apps/labs/assets/styles/app/_responsive.scss
new file mode 100644
index 000000000..0b73d6592
--- /dev/null
+++ b/apps/labs/assets/styles/app/_responsive.scss
@@ -0,0 +1,181 @@
+@media screen and (min-width: 1920px) {
+    .layout-content {
+        max-width: 1728px;
+        margin: 0 auto;
+    }
+
+    .layout-topbar-inner,
+    .layout-footer {
+        max-width: 1728px;
+        margin: 0 auto;
+    }
+
+}
+
+@media screen and (max-width: 1199px) {
+    .layout-topbar-inner {
+        padding-left: 2rem;
+        padding-right: 2rem;
+
+        .menu-button {
+            display: block;
+        }
+
+        .layout-topbar-logo-container {
+            width: auto;
+            margin-right: 0;
+        }
+
+        .DocSearch-Button {
+            width: 2rem;
+            height: 2rem;
+            overflow: hidden;
+            padding: 0;
+            justify-content: center;
+            align-items: center;
+
+            .DocSearch-Search-Icon {
+                width: 1rem;
+                height: 1rem;
+            }
+
+            .DocSearch-Button-Placeholder,
+            .DocSearch-Button-Keys {
+                display: none;
+            }
+        }
+    }
+
+    .layout-sidebar {
+        top: 0;
+        inset-inline-start: 0;
+        position: fixed;
+        z-index: 1102;
+        height: 100%;
+        transform: translateX(-100%);
+        background-color: var(--mobile-menu-background);
+        backdrop-filter: blur(20px);
+        width: 300px;
+        opacity: 0;
+
+        &:dir(rtl) {
+            transform: translateX(100%);
+        }
+
+        nav {
+            padding: 1rem 1rem;
+        }
+
+        &.active {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .layout-news-active {
+        .layout-sidebar {
+            top: 0;
+        }
+    }
+
+    .layout-mask {
+        background-color: rgba(0, 0, 0, 0.1);
+
+        &.layout-mask-active {
+            z-index: 1101;
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            top: 0;
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.4);
+            transition: background-color .5s;
+        }
+    }
+
+    .doc-section-nav {
+        display: none;
+    }
+
+    .video-container {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .layout-content {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .layout-footer {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .blocked-scroll {
+        overflow: hidden;
+        padding-right: var(--p-scrollbar-width);
+    }
+}
+
+@media (max-width: 768px) {
+    .DocSearch-Container {
+        position: fixed !important;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .layout-topbar-inner {
+        padding-left: 1rem;
+        padding-right: 1rem;
+
+        .layout-topbar-logo {
+            display: none;
+        }
+
+        .layout-topbar-icon {
+            display: inline-flex;
+        }
+    }
+
+    .layout-content {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .layout-footer {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .doc-tabmenu {
+        li {
+            flex: 1 1 0;
+
+            button {
+                width: 100%;
+                min-width: auto;
+            }
+        }
+    }
+
+    .layout-news {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        font-size: 12px;
+
+        > i {
+            display: none;
+        }
+    }
+}
diff --git a/apps/labs/assets/styles/app/_sidebar.scss b/apps/labs/assets/styles/app/_sidebar.scss
new file mode 100644
index 000000000..bdd5440e4
--- /dev/null
+++ b/apps/labs/assets/styles/app/_sidebar.scss
@@ -0,0 +1,181 @@
+.layout-sidebar {
+    position: sticky;
+    inset-inline-start: 0;
+    top: 6rem;
+    height: calc(100vh - 9rem);
+    user-select: none;
+    transition: transform .4s cubic-bezier(.05,.74,.2,.99), opacity .3s;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    flex: 0 0 250px;
+    margin-inline-end: 4rem;
+    overflow: auto;
+
+    .logo {
+        display: flex;
+        justify-content: center;
+    }
+
+    nav {
+        padding-block: 0;
+        padding-inline: 1rem 0;
+        margin: 0;
+        flex-grow: 1;
+    }
+
+    .layout-menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        > li {
+            margin-bottom: .25rem;
+
+            > button,
+            > a {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                padding-block: .5rem;
+                padding-inline: 1px;
+                color: var(--text-color);
+                font-weight: 600;
+                transition: outline-color 0.2s;
+                outline-color: transparent;
+                position: relative;
+                background: transparent;
+                font-size: 1rem;
+                border: 0 none;
+                margin: 0;
+                text-align: start;
+                cursor: pointer;
+                user-select: none;
+                --p-focus-ring-offset: -1px;
+                @include focus-visible();
+
+                .menu-icon {
+                    width: 2rem;
+                    height: 2rem;
+                    border-radius: 6px;
+                    margin-inline-end: .5rem;
+                    border: 1px solid var(--border-color);
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all .2s;
+                    position: relative;
+                    background-color: transparent;
+
+                    i {
+                        color: var(--text-color);
+                        transition: all .2s;
+                    }
+                }
+
+                .menu-toggle-icon {
+                    color: var(--text-secondary-color);
+                    margin-inline-start: auto;
+                }
+
+                &:hover {
+                    .menu-icon {
+                        background-color: var(--card-background);
+
+                        i {
+                            color: var(--primary-text-color);
+                        }
+                    }
+
+                    .menu-toggle-icon {
+                        color: var(--text-color);
+                    }
+                }
+
+                &.router-link-active {
+                    color: var(--primary-text-color);
+
+                    > .menu-icon {
+                        i {
+                            color: var(--primary-text-color);
+                        }
+                    }
+                }
+            }
+
+            > div {
+                overflow: hidden;
+
+                ol {
+                    margin-block: 0;
+                    margin-inline: 0 1rem;
+                    padding: .25rem 0;
+                    list-style: none;
+
+                    li {
+                        a {
+                            border-inline-start: 1px solid var(--border-color);
+                            transition: all .2s;
+                            font-weight: 450;
+                            display: flex;
+                            align-items: center;
+                            padding: .5rem;
+                            padding-inline-start: 1rem;
+                            color: var(--text-secondary-color);
+                            transition: outline-color 0.2s, border-color .2s;
+                            outline-color: transparent;
+                            position: relative;
+                            --p-focus-ring-offset: -1px;
+                            @include focus-visible();
+
+                            &:hover {
+                                border-inline-start-color: var(--hover-border-color);
+                            }
+
+                            &.router-link-active {
+                                color: var(--primary-text-color);
+                                border-inline-start-color: var(--primary-text-color);
+                            }
+                        }
+
+                        ol {
+                            margin: 0;
+                            padding: 0;
+                        }
+
+                        &:has(.menu-child-category) {
+                            margin-top: 1rem;
+                        }
+
+                        &:has(.menu-child-category):first-child {
+                            margin-top: 0rem;
+                        }
+                    }
+                }
+            }
+        }
+
+        .p-tag {
+            position: absolute;
+            inset-inline-end: 0;
+            top: 50%;
+            transform: translateY(-50%);
+
+            .p-tag-label {
+                line-height: 1;
+                font-size: 0.75rem;
+            }
+        }
+
+        .menu-child-category {
+            display: flex;
+            padding: .5rem;
+            padding-inline-start: 0;
+            font-size: .875rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            color: var(--text-secondary-color);
+            margin-bottom: .25rem;
+        }
+    }
+}
diff --git a/apps/labs/assets/styles/app/_topbar.scss b/apps/labs/assets/styles/app/_topbar.scss
new file mode 100644
index 000000000..e76097e0b
--- /dev/null
+++ b/apps/labs/assets/styles/app/_topbar.scss
@@ -0,0 +1,221 @@
+.layout-topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: calc(100% - var(--p-scrollbar-width, 0px));
+    z-index: 1100;
+    transition: background-color .5s, border-color .5s;
+    border-bottom: 1px solid transparent;
+
+    &.layout-topbar-sticky {
+        border-bottom: 1px solid var(--border-color);
+        background-color: var(--topbar-sticky-background);
+        backdrop-filter: blur(8px);
+    }
+}
+
+.layout-topbar-inner {
+    height: 4rem;
+    padding: 0 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .layout-topbar-logo-container {
+        width: 250px;
+        margin-inline-end: 4rem;
+    }
+
+    .layout-topbar-logo,
+    .layout-topbar-icon {
+        transition: outline-color .2s;
+        outline-color: transparent;
+        @include focus-visible();
+
+        svg {
+            width: 120px;
+        }
+    }
+
+    .layout-topbar-logo {
+        display: inline-flex;
+
+        svg {
+            width: 120px;
+        }
+    }
+
+    .layout-topbar-icon {
+        display: none;
+
+        svg {
+            width: 25px;
+        }
+    }
+
+    .menu-button {
+        display: none;
+    }
+
+    .topbar-items {
+        display: flex;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        gap: 0.5rem;
+        align-items: center;
+
+        li {
+            position: relative;
+        }
+
+        .topbar-item {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            border: 1px solid var(--border-color);
+            width: 2rem;
+            height: 2rem;
+            transition: outline-color .2s, border-color .2s;
+            border-radius: 6px;
+            margin: 0;
+            padding: 0;
+            outline-color: transparent;
+            background-color: var(--card-background);
+            cursor: pointer;
+
+            @include focus-visible();
+
+            &:hover {
+                border-color: var(--primary-color);
+            }
+
+            i, span {
+                color: var(--text-color);
+            }
+        }
+
+        .config-item {
+            background-color: var(--primary-color);
+
+            i {
+                color: var(--primary-contrast-color);
+            }
+        }
+
+        .config-panel {
+            position: absolute;
+            top: calc(100% + 2px);
+            inset-inline-end: 0;
+            width: 18rem;
+            padding: .75rem;
+            background-color: var(--overlay-background);
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+            transform-origin: top;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+            .config-panel-content {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .config-panel-label {
+                font-size: .875rem;
+                color: var(--text-secondary-color);
+                font-weight: 600;
+                line-height: 1;
+            }
+
+            .config-panel-colors {
+                > div {
+                    padding-top: .5rem;
+                    display: flex;
+                    gap: .5rem;
+                    flex-wrap: wrap;
+
+                    button {
+                        border: none;
+                        width: 1.25rem;
+                        height: 1.25rem;
+                        border-radius: 50%;
+                        padding: 0;
+                        cursor: pointer;
+                        outline-color: transparent;
+                        outline-width: 2px;
+                        outline-style: solid;
+                        outline-offset: 1px;
+
+                        &.active-color {
+                            outline-color: var(--primary-color);
+                        }
+                    }
+                }
+            }
+
+            .config-panel-settings {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+        }
+
+        .version-item {
+            width: auto;
+            padding: 0.5rem;
+
+            .version-text {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .version-icon {
+                margin-inline-start: .25rem;
+                color: var(--text-secondary-color);
+            }
+        }
+
+        .versions-panel {
+            padding: .25rem;
+            background-color: var(--overlay-background);
+            position: absolute;
+            right: 0;
+            top: calc(100% + 2px);
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            transform-origin: top;
+
+            ul {
+                padding: 0;
+                margin: 0;
+                list-style-type: none;
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                li {
+                    margin: 2px;
+
+                }
+
+                a {
+                    display: inline-flex;
+                    padding: 0.5rem .75rem;
+                    border-radius: 6px;
+                    width: 100%;
+                    overflow: hidden;
+                    color: var(--text-color);
+                    white-space: nowrap;
+
+                    &:hover {
+                        background-color: var(--hover-background);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/apps/labs/assets/styles/app/app.scss b/apps/labs/assets/styles/app/app.scss
new file mode 100644
index 000000000..d574de6df
--- /dev/null
+++ b/apps/labs/assets/styles/app/app.scss
@@ -0,0 +1,16 @@
+@charset 'UTF-8';
+
+@import './variables/_variables';
+@import './_mixins';
+@import './_core';
+@import './_glow';
+@import './_topbar';
+@import './_sidebar';
+@import './_content';
+@import './_news';
+@import './_footer';
+@import './_code';
+@import './_doc';
+@import './_docsearch';
+@import './_responsive';
+@import './landing/_landing';
diff --git a/apps/labs/assets/styles/app/landing/_hero.scss b/apps/labs/assets/styles/app/landing/_hero.scss
new file mode 100644
index 000000000..60a6db5fb
--- /dev/null
+++ b/apps/labs/assets/styles/app/landing/_hero.scss
@@ -0,0 +1,22 @@
+.landing-hero {
+    .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+        background: transparent;
+    }
+
+    .box {
+        box-shadow: var(--home-card-shadow);
+    }
+
+    .p-datepicker, .p-datepicker-header {
+        background: transparent;
+        border-color: transparent;
+    }
+}
+
+@media screen and (min-width: 1660px) {
+    .landing-hero {
+        width: 1504px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/app/landing/_landing.scss b/apps/labs/assets/styles/app/landing/_landing.scss
new file mode 100644
index 000000000..c54c88301
--- /dev/null
+++ b/apps/labs/assets/styles/app/landing/_landing.scss
@@ -0,0 +1,7 @@
+$landingBreakpointMD: 767px;
+$landingBreakpointLG: 991px;
+$landingBreakpointXL: 1199px;
+
+@import '../_mixins';
+@import './_main';
+@import './_hero';
diff --git a/apps/labs/assets/styles/app/landing/_main.scss b/apps/labs/assets/styles/app/landing/_main.scss
new file mode 100644
index 000000000..a487cee84
--- /dev/null
+++ b/apps/labs/assets/styles/app/landing/_main.scss
@@ -0,0 +1,180 @@
+.landing {
+    scroll-behavior: smooth;
+    padding-top: 4rem;
+    background-color: var(--ground-background);
+
+    .box {
+        border: 1px solid var(--border-color);
+        border-radius: 10px;
+        background-color: var(--card-background);
+        position: relative;
+        z-index: 0;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid var(--home-box-ring-color);
+            transition: all .5s;
+            animation: clippath 3s infinite linear;
+            border-radius: 10px;
+            opacity: 0;
+            z-index: -1;
+        }
+
+        &::after {
+            animation: clippath 3s infinite -1.5s linear;
+        }
+
+        &:hover {
+            &::before,
+            &::after {
+                opacity: 1;
+            }
+        }
+    }
+
+    .linkbox {
+        transition: background-color .2s, border-color .2s, outline-color .2s;
+        display: inline-flex;
+        align-items: center;
+        color: var(--text-color);
+        border: 1px solid var(--border-color);
+        background-color: var(--card-background);
+        border-radius: 10px;
+        font-weight: 600;
+        padding: 1rem 1.5rem;
+        cursor: pointer;
+        @include focus-visible();
+
+        &:hover {
+            background: var(--hover-background);
+        }
+
+        &.linkbox-primary {
+            background: var(--primary-color);
+            color: var(--primary-contrast-color);
+
+            &:hover {
+                background: var(--primary-hover-color);
+            }
+        }
+
+        &.linkbox-icon {
+            width: 3rem;
+            height: 3rem;
+            justify-content: center;
+        }
+    }
+
+    .section-header {
+        font-size: 2rem;
+        color: var(--text-color);
+        font-weight: 700;
+        text-align: center;
+        padding: 0 2rem;
+    }
+
+    .section-detail {
+        text-align: center;
+        color: var(--text-secondary-color);
+        font-weight: 500;
+        font-size: 1.25rem;
+        margin: 1.5rem 0 0 0;
+        padding: 0 2rem;
+    }
+
+    .section-divider {
+        border: 1px solid var(--border-color);
+        height: 1px;
+        border-bottom: 0 none;
+        overflow: hidden;
+        margin-top: 5rem;
+    }
+
+    &.layout-news-active {
+        padding-top: 6rem;
+    }
+}
+
+
+.landing-footer-container {
+    max-width: 1250px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.animated-text {
+    position: relative;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--rounded-base);
+    display: inline-block;
+    width: 14.45rem;
+
+    &::before {
+        border-radius: var(--rounded-base);
+        animation: color-animation 2s linear infinite;
+        background-size: auto auto;
+        background-clip: border-box;
+        background-size: 200% auto;
+        content: "";
+        width: 14.45rem;
+        height: 1.5rem;
+        position: absolute;
+        z-index: 0;
+        background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
+        filter: blur(24px);
+        opacity: 0.6;
+    }
+
+    > span {
+        position: relative;
+        z-index: 3;
+        background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
+        animation: color-animation 2s linear infinite;
+        background-size: auto auto;
+        background-clip: border-box;
+        background-size: 200% auto;
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
+
+@keyframes color-animation {
+    40%,
+    100% {
+        background-position: -200% center;
+    }
+}
+
+@keyframes scroll {
+    0% {
+        transform: translateX(0%);
+    }
+
+    100% {
+        transform: translateX(calc(-100% - 3rem));
+    }
+}
+
+@keyframes clippath {
+    0%,
+    100% {
+        clip-path: inset(0 0 98% 0);
+    }
+
+    25% {
+        clip-path: inset(0 98% 0 0);
+    }
+    50% {
+        clip-path: inset(98% 0 0 0);
+    }
+    75% {
+        clip-path: inset(0 0 0 98%);
+    }
+}
diff --git a/apps/labs/assets/styles/app/variables/_variables.scss b/apps/labs/assets/styles/app/variables/_variables.scss
new file mode 100644
index 000000000..8ff8f0676
--- /dev/null
+++ b/apps/labs/assets/styles/app/variables/_variables.scss
@@ -0,0 +1,5 @@
+@import './app/_light';
+@import './app/_dark';
+@import './primevue/_common';
+@import './primevue/_light';
+@import './primevue/_dark';
\ No newline at end of file
diff --git a/apps/labs/assets/styles/app/variables/app/_dark.scss b/apps/labs/assets/styles/app/variables/app/_dark.scss
new file mode 100644
index 000000000..f77d13624
--- /dev/null
+++ b/apps/labs/assets/styles/app/variables/app/_dark.scss
@@ -0,0 +1,28 @@
+:root.p-dark {
+    --primary-text-color: var(--p-primary-400);
+    --primary-color: var(--p-primary-color);
+    --primary-contrast-color:var(--p-primary-contrast-color);
+    --primary-hover-color: var(--p-primary-hover-color);
+    --text-color: var(--p-surface-0);
+    --text-secondary-color: var(--p-surface-400);
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
+    --glow-blend: hard-light, color-dodge;
+    --topbar-sticky-background:rgba(0,0,0,.3);
+    --mobile-menu-background: rgba(0,0,0,.3);
+    --card-border: 1px solid transparent;
+    --card-background: var(--p-surface-900);
+    --border-color: var(--p-surface-700);
+    --ground-background: var(--p-surface-950);
+    --overlay-background: var(--p-surface-900);
+    --hover-background: var(--p-surface-800);
+    --code-background: var(--p-surface-900);
+    --high-contrast-text-color: var(--p-surface-0);
+    --hover-border-color: var(--p-surface-500);
+    --mark-background: var(--p-surface-700);
+    --mark-text-color: var(--p-surface-200);
+    --selection-background: var(--p-surface-700);
+    --selection-text-color: var(--p-surface-0);
+    --code-button-text-color: var(--p-surface-300);
+    --docsearch-mask-background: var(--p-mask-background);
+    --logo-color: var(--p-primary-400);
+}
diff --git a/apps/labs/assets/styles/app/variables/app/_light.scss b/apps/labs/assets/styles/app/variables/app/_light.scss
new file mode 100644
index 000000000..e8dcb0013
--- /dev/null
+++ b/apps/labs/assets/styles/app/variables/app/_light.scss
@@ -0,0 +1,28 @@
+:root {
+    --primary-text-color:var(--p-primary-600);
+    --primary-color: var(--p-primary-color);
+    --primary-contrast-color:var(--p-primary-contrast-color);
+    --primary-hover-color: var(--p-primary-hover-color);
+    --text-color: var(--p-surface-700);
+    --text-secondary-color: var(--p-surface-500);
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
+    --glow-blend: hard-light, multiply;
+    --topbar-sticky-background:rgba(255,255,255,.7);
+    --mobile-menu-background: #ffffff;
+    --card-border: 1px solid var(--p-surface-200);
+    --card-background: #ffffff;
+    --border-color: var(--p-surface-200);
+    --ground-background: var(--p-surface-50);
+    --overlay-background: #ffffff;
+    --hover-background: var(--p-surface-100);
+    --code-background: var(--p-surface-950);
+    --high-contrast-text-color: var(--p-surface-900);
+    --hover-border-color: var(--p-surface-400);
+    --mark-background: var(--p-surface-200);
+    --mark-text-color: var(--p-surface-700);
+    --selection-background: var(--p-surface-200);
+    --selection-text-color: var(--p-surface-950);
+    --code-button-text-color: var(--p-surface-300);
+    --docsearch-mask-background: var(--p-mask-background);
+    --logo-color: var(--p-primary-500);
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/app/variables/primevue/_common.scss b/apps/labs/assets/styles/app/variables/primevue/_common.scss
new file mode 100644
index 000000000..4fe24281b
--- /dev/null
+++ b/apps/labs/assets/styles/app/variables/primevue/_common.scss
@@ -0,0 +1,26 @@
+:root {
+    --p-primary-50: #ecfdf5;
+    --p-primary-100: #d1fae5;
+    --p-primary-200: #a7f3d0;
+    --p-primary-300: #6ee7b7;
+    --p-primary-400: #34d399;
+    --p-primary-500: #10b981;
+    --p-primary-600: #059669;
+    --p-primary-700: #047857;
+    --p-primary-800: #065f46;
+    --p-primary-900: #064e3b;
+    --p-primary-950: #022c22;
+    --p-surface-0: #ffffff;
+    --p-surface-50: #fafafa;
+    --p-surface-100: #f4f4f5;
+    --p-surface-200: #e4e4e7;
+    --p-surface-300: #d4d4d8;
+    --p-surface-400: #a1a1aa;
+    --p-surface-500: #71717a;
+    --p-surface-600: #52525b;
+    --p-surface-700: #3f3f46;
+    --p-surface-800: #27272a;
+    --p-surface-900: #18181b;
+    --p-surface-950: #09090b;
+    --p-content-border-radius: 6px;
+}
diff --git a/apps/labs/assets/styles/app/variables/primevue/_dark.scss b/apps/labs/assets/styles/app/variables/primevue/_dark.scss
new file mode 100644
index 000000000..e0aa88714
--- /dev/null
+++ b/apps/labs/assets/styles/app/variables/primevue/_dark.scss
@@ -0,0 +1,28 @@
+:root.p-dark {
+    --p-primary-color: var(--p-primary-400);
+    --p-primary-contrast-color: var(--p-surface-900);
+    --p-primary-hover-color: var(--p-primary-300);
+    --p-primary-active-color: var(--p-primary-200);
+    --p-content-border-color: var(--p-surface-700);
+    --p-content-hover-background: var(--p-surface-800);
+    --p-content-hover-color: var(--p-surface-0);
+    --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+    --p-highlight-color: rgba(255,255,255,.87);
+    --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+    --p-highlight-focus-color: rgba(255,255,255,.87);
+    --p-text-color: var(--p-surface-0);
+    --p-text-hover-color: var(--p-surface-0);
+    --p-text-muted-color: var(--p-surface-400);
+    --p-text-hover-muted-color: var(--p-surface-300);
+}
+
+:root.p-dark.p-noir {
+    --p-primary-color: var(--p-primary-50);
+    --p-primary-contrast-color: var(--p-surface-950);
+    --p-primary-hover-color: var(--p-primary-200);
+    --p-primary-active-color: var(--p-primary-300);
+    --p-highlight-background: var(--p-surface-50);
+    --p-highlight-color: var(--p-surface-950);
+    --p-highlight-focus-background: var(--p-surface-300);
+    --p-highlight-focus-color: var(--p-surface-950);
+}
diff --git a/apps/labs/assets/styles/app/variables/primevue/_light.scss b/apps/labs/assets/styles/app/variables/primevue/_light.scss
new file mode 100644
index 000000000..ec81c491b
--- /dev/null
+++ b/apps/labs/assets/styles/app/variables/primevue/_light.scss
@@ -0,0 +1,28 @@
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+:root.p-noir {
+    --p-primary-color: var(--p-primary-950);
+    --p-primary-contrast-color: #ffffff;
+    --p-primary-hover-color: var(--p-primary-800);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-highlight-background: var(--p-surface-950);
+    --p-highlight-color: #ffffff;
+    --p-highlight-focus-background: var(--p-surface-700);
+    --p-highlight-focus-color: #ffffff;
+}
diff --git a/apps/labs/assets/styles/demo/flags.css b/apps/labs/assets/styles/demo/flags.css
new file mode 100755
index 000000000..d648ba103
--- /dev/null
+++ b/apps/labs/assets/styles/demo/flags.css
@@ -0,0 +1 @@
+span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primevue/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/accordion.css b/apps/labs/assets/styles/primevue/accordion.css
new file mode 100644
index 000000000..11a13db0f
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/accordion.css
@@ -0,0 +1,58 @@
+.p-accordionpanel {
+    @apply flex flex-col border-b border-surface-200 dark:border-surface-700
+}
+
+.p-accordionheader {
+    @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold
+        bg-surface-0 dark:bg-surface-900
+        text-surface-500 dark:text-surface-400
+        transition-colors duration-200
+}
+
+.p-accordionpanel:first-child > .p-accordionheader {
+    @apply rounded-ss-md rounded-se-md
+}
+
+.p-accordionpanel:last-child > .p-accordionheader {
+    @apply rounded-ee-md rounded-es-md
+}
+
+.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
+    @apply rounded-ee-md rounded-es-md
+}
+
+.p-accordionheader-toggle-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
+    @apply outline outline-1 outline-offset-[-1px] outline-primary
+}
+
+.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0;
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0;
+}
+
+.p-accordioncontent-content {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]
+}
diff --git a/apps/labs/assets/styles/primevue/autocomplete.css b/apps/labs/assets/styles/primevue/autocomplete.css
new file mode 100644
index 000000000..cb64d9833
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/autocomplete.css
@@ -0,0 +1,143 @@
+@import './inputtext';
+@import './chip';
+
+.p-autocomplete {
+    @apply inline-flex
+}
+
+.p-autocomplete.p-disabled {
+    @apply opacity-100
+}
+
+.p-autocomplete-loader {
+    @apply absolute top-1/2 -mt-2 end-3
+}
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
+    @apply end-[3.25rem]
+}
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+    @apply flex-auto w-[1%]
+}
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
+    @apply rounded-e-none
+}
+
+.p-autocomplete-dropdown {
+    @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-e-md
+        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-autocomplete .p-autocomplete-overlay {
+    @apply min-w-full
+}
+
+.p-autocomplete-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-autocomplete-list-container {
+    @apply overflow-auto
+}
+
+.p-autocomplete-list {
+    @apply m-0 p-1 list-none flex flex-col gap-[2px]
+}
+
+.p-autocomplete-option {
+    @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm
+        text-surface-700 dark:text-surface-0 bg-transparent border-none
+        transition-colors duration-200
+}
+
+.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0
+}
+
+.p-autocomplete-option-selected {
+    @apply bg-highlight
+}
+
+.p-autocomplete-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-autocomplete-option-group {
+    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
+}
+
+.p-autocomplete-input-multiple {
+    @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap
+        px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700 rounded-md w-full
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200 outline-none
+}
+
+.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
+    @apply border-primary
+}
+
+.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-variant-filled.p-autocomplete-input-multiple {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
+    @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400
+}
+
+.p-autocomplete-chip.p-chip {
+    @apply py-1 rounded-sm
+}
+
+.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
+    @apply px-1
+}
+
+.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
+    @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0
+}
+
+.p-autocomplete-input-chip {
+    @apply flex-auto inline-flex py-1
+}
+
+.p-autocomplete-input-chip input {
+    @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit
+}
+
+.p-autocomplete-input-chip input::placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-autocomplete-empty-message {
+    @apply px-3 py-2
+}
+
+.p-autocomplete-fluid {
+    @apply flex
+}
+
+.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+    @apply w-[1%]
+}
diff --git a/apps/labs/assets/styles/primevue/avatar.css b/apps/labs/assets/styles/primevue/avatar.css
new file mode 100644
index 000000000..fde16bbb9
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/avatar.css
@@ -0,0 +1,50 @@
+.p-avatar {
+    @apply inline-flex items-center justify-center
+        w-8 h-8 text-base rounded-md
+        bg-surface-200 dark:bg-surface-700
+}
+
+.p-avatar-image {
+    @apply bg-transparent
+}
+
+.p-avatar-circle,
+.p-avatar-circle img {
+    @apply rounded-full
+}
+
+.p-avatar-icon {
+    @apply text-base
+}
+
+.p-avatar img {
+    @apply w-full h-full
+}
+
+.p-avatar-lg {
+    @apply w-12 h-12 text-2xl
+}
+
+.p-avatar-lg .p-avatar-icon {
+    @apply text-2xl
+}
+
+.p-avatar-xl {
+    @apply w-16 h-16 text-[2rem]
+}
+
+.p-avatar-xl .p-avatar-icon {
+    @apply text-[2rem]
+}
+
+.p-avatar-group {
+    @apply flex items-center
+}
+
+.p-avatar-group .p-avatar + .p-avatar {
+    @apply -ms-4
+}
+
+.p-avatar-group .p-avatar {
+    @apply border-2 border-surface-200 dark:border-surface-700
+}
diff --git a/apps/labs/assets/styles/primevue/badge.css b/apps/labs/assets/styles/primevue/badge.css
new file mode 100644
index 000000000..34a6e0c4d
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/badge.css
@@ -0,0 +1,49 @@
+.p-badge {
+    @apply inline-flex items-center justify-center rounded-md
+        py-0 px-2 text-xs font-bold min-w-6 h-6
+        bg-primary text-primary-contrast
+}
+
+.p-badge-dot {
+    @apply min-w-2 h-2 rounded-full p-0
+}
+
+.p-badge-circle {
+    @apply p-0 rounded-full
+}
+
+.p-badge-secondary {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300
+}
+
+.p-badge-success {
+    @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950
+}
+
+.p-badge-info {
+    @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950
+}
+
+.p-badge-warn {
+    @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950
+}
+
+.p-badge-danger {
+    @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950
+}
+
+.p-badge-contrast {
+    @apply bg-surface-950 dark:bg-white text-white dark:text-surface-950
+}
+
+.p-badge-sm {
+    @apply text-[0.625rem] min-w-5 h-5
+}
+
+.p-badge-lg {
+    @apply text-sm min-w-7 h-7
+}
+
+.p-badge-xl {
+    @apply text-base min-w-8 h-8
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/blockui.css b/apps/labs/assets/styles/primevue/blockui.css
new file mode 100644
index 000000000..f4f01f34d
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/blockui.css
@@ -0,0 +1,15 @@
+.p-blockui {
+    @apply relative
+}
+
+.p-blockui-mask {
+    @apply rounded-md
+}
+
+.p-blockui-mask.p-overlay-mask {
+    @apply absolute
+}
+
+.p-blockui-mask-document.p-overlay-mask {
+    @apply fixed
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/breadcrumb.css b/apps/labs/assets/styles/primevue/breadcrumb.css
new file mode 100644
index 000000000..69beddf21
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/breadcrumb.css
@@ -0,0 +1,41 @@
+.p-breadcrumb {
+    @apply bg-surface-0 dark:bg-surface-900 p-4 overflow-x-auto
+}
+
+.p-breadcrumb-list {
+    @apply m-0 p-0 list-none flex items-center flex-nowrap gap-2
+}
+
+.p-breadcrumb-separator {
+    @apply flex items-center text-surface-400 dark:text-surface-500
+}
+
+.p-breadcrumb-separator-icon:dir(rtl) {
+    @apply rotate-180
+}
+
+.p-breadcrumb::-webkit-scrollbar {
+    @apply hidden
+}
+
+.p-breadcrumb-item-link {
+    @apply no-underline flex items-center gap-2 transition-colors duration-200 rounded-md
+        text-surface-500 dark:text-surface-400
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-breadcrumb-item-label {
+    @apply transition-colors duration-200
+}
+
+.p-breadcrumb-item-icon {
+    @apply text-surface-400 dark:text-surface-500 transition-colors duration-200
+}
+
+.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
diff --git a/apps/labs/assets/styles/primevue/button.css b/apps/labs/assets/styles/primevue/button.css
new file mode 100644
index 000000000..d14f944c1
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/button.css
@@ -0,0 +1,331 @@
+@import './badge';
+
+.p-button {
+    @apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
+        bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast
+        border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        px-3 py-2 transition-colors duration-200 gap-2 rounded-md
+        disabled:cursor-default
+}
+
+.p-button-icon-right {
+    @apply order-1
+}
+
+.p-button-icon-right:dir(rtl) {
+    @apply order-[-1]
+}
+
+.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {
+    @apply order-1
+}
+
+.p-button-icon-bottom {
+    @apply order-2
+}
+
+.p-button-icon-only {
+    @apply w-10 px-0 gap-0
+}
+
+.p-button-icon-only.p-button-rounded {
+    @apply rounded-full h-10
+}
+
+.p-button-icon-only .p-button-label {
+    @apply invisible w-0
+}
+
+.p-button-sm {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-button-sm .p-button-icon {
+    @apply text-sm
+}
+
+.p-button-lg {
+    @apply text-[1.125rem] px-[0.875rem] py-[0.625rem]
+}
+
+.p-button-lg .p-button-icon {
+    @apply text-[1.125rem]
+}
+
+.p-button-vertical {
+    @apply flex-col
+}
+
+.p-button-label {
+    @apply font-medium
+}
+
+.p-button-fluid {
+    @apply w-full
+}
+
+.p-button-fluid.p-button-icon-only {
+    @apply w-10
+}
+
+.p-button .p-badge {
+    @apply min-w-4 h-4 leading-4
+}
+
+.p-button-raised {
+    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
+}
+
+.p-button-rounded {
+    @apply rounded-[2rem]
+}
+
+.p-button-secondary {
+    @apply bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300
+}
+
+.p-button-success {
+    @apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700
+        border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200
+        dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200
+        dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-green-500 dark:focus-visible:outline-green-400
+}
+
+.p-button-info {
+    @apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700
+        border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200
+        dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200
+        dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400
+}
+
+.p-button-warn {
+    @apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700
+        border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200
+        dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200
+        dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400
+}
+
+.p-button-help {
+    @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700
+        border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200
+        dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200
+        dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400
+}
+
+.p-button-danger {
+    @apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700
+        border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200
+        dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200
+        dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-red-500 dark:focus-visible:outline-red-400
+}
+
+.p-button-contrast {
+    @apply bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800
+        border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200
+        dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300
+        dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0
+}
+
+.p-button-outlined {
+    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100
+        border-primary-200 enabled:hover:border-primary-200 enabled:active:border-primary-200
+        text-primary enabled:hover:text-primary enabled:active:text-primary
+        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15
+        dark:border-primary-700 dark:enabled:hover:border-primary-700 dark:enabled:active:border-primary-700
+        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary
+}
+
+.p-button-outlined.p-button-secondary {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200
+        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
+        dark:bg-transparent dark:enabled:hover:bg-white/5 dark:enabled:active:bg-white/15
+        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
+        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
+}
+
+.p-button-outlined.p-button-success {
+    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
+        border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200
+        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
+        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
+        dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700
+        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
+}
+
+.p-button-outlined.p-button-info {
+    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
+        border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200
+        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
+        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
+        dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700
+        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
+}
+
+.p-button-outlined.p-button-warn {
+    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
+        border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200
+        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
+        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
+        dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700
+        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
+}
+
+.p-button-outlined.p-button-help {
+    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
+        border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200
+        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
+        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
+        dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700
+        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
+}
+
+.p-button-outlined.p-button-danger {
+    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
+        border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200
+        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
+        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
+        dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700
+        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
+}
+
+.p-button-outlined.p-button-contrast {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-surface-700 enabled:hover:border-surface-700 enabled:active:border-surface-700
+        text-surface-950 enabled:hover:text-surface-950 enabled:active:text-surface-950
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-500 dark:enabled:hover:border-surface-500 dark:enabled:active:border-surface-500
+        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
+}
+
+.p-button-outlined.p-button-plain {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200
+        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-600 dark:enabled:hover:border-surface-600 dark:enabled:active:border-surface-600
+        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
+}
+
+.p-button-text {
+    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-primary enabled:hover:text-primary enabled:active:text-primary
+        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary
+}
+
+.p-button-text.p-button-secondary {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
+}
+
+.p-button-text.p-button-success {
+    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
+        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
+}
+
+.p-button-text.p-button-info {
+    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
+        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
+}
+
+.p-button-text.p-button-warn {
+    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
+        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
+}
+
+.p-button-text.p-button-help {
+    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
+        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
+}
+
+.p-button-text.p-button-danger {
+    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
+        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
+}
+
+.p-button-text.p-button-contrast {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
+        dark:bg-transparent dark:enabled:hover:bg-surface-400/5 dark:enabled:active:bg-surface-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
+}
+
+.p-button-text.p-button-plain {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
+}
+
+.p-button-link {
+    @apply bg-transparent enabled:hover:bg-transparent enabled:active:bg-transparent
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-primary enabled:hover:text-primary enabled:active:text-primary
+}
+
+.p-button-link:not(:disabled):hover .p-button-label {
+    @apply underline
+}
diff --git a/apps/labs/assets/styles/primevue/buttongroup.css b/apps/labs/assets/styles/primevue/buttongroup.css
new file mode 100644
index 000000000..b5c888eef
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/buttongroup.css
@@ -0,0 +1,19 @@
+.p-buttongroup .p-button {
+    @apply m-0 focus-visible:relative focus-visible:z-10
+}
+
+.p-buttongroup .p-button:not(:last-child) {
+    @apply border-r-0
+}
+
+.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) {
+    @apply rounded-none
+}
+
+.p-buttongroup .p-button:first-of-type:not(:only-of-type) {
+    @apply rounded-e-none
+}
+
+.p-buttongroup .p-button:last-of-type:not(:only-of-type) {
+    @apply rounded-s-none
+}
diff --git a/apps/labs/assets/styles/primevue/card.css b/apps/labs/assets/styles/primevue/card.css
new file mode 100644
index 000000000..5c4a9a36c
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/card.css
@@ -0,0 +1,22 @@
+.p-card {
+    @apply flex flex-col rounded-xl
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]
+}
+
+.p-card-caption {
+    @apply flex flex-col gap-2
+}
+
+.p-card-body {
+    @apply p-5 flex flex-col gap-2
+}
+
+.p-card-title {
+    @apply font-medium text-xl
+}
+
+.p-card-subtitle {
+    @apply text-surface-500 dark:text-surface-400
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/carousel.css b/apps/labs/assets/styles/primevue/carousel.css
new file mode 100644
index 000000000..606a8b773
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/carousel.css
@@ -0,0 +1,64 @@
+@import './button';
+
+.p-carousel {
+    @apply flex flex-col
+}
+
+.p-carousel-content-container {
+    @apply flex flex-col overflow-auto
+}
+
+.p-carousel-content {
+    @apply flex flex-row gap-1
+}
+
+.p-carousel-content:dir(rtl) {
+    @apply flex-row-reverse
+}
+
+.p-carousel-viewport {
+    @apply overflow-hidden w-full
+}
+
+.p-carousel-item-list {
+    @apply flex flex-row
+}
+
+.p-carousel-prev-button,
+.p-carousel-next-button {
+    @apply self-center flex-shrink-0
+}
+
+.p-carousel-indicator-list {
+    @apply flex flex-row justify-center flex-wrap p-4 gap-2 m-0 list-none
+}
+
+.p-carousel-indicator-list:dir(rtl) {
+    @apply rtl:flex-row-reverse
+}
+
+.p-carousel-indicator-button {
+    @apply flex items-center justify-center w-8 h-2 border-none rounded-md p-0 m-0 select-none cursor-pointer transition-colors duration-200
+        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-carousel-indicator-active .p-carousel-indicator-button {
+    @apply bg-primary
+}
+
+.p-carousel-vertical .p-carousel-content {
+    @apply flex-col
+}
+
+.p-carousel-vertical .p-carousel-item-list {
+    @apply flex-col h-full
+}
+
+.p-items-hidden .p-carousel-item {
+    @apply invisible
+}
+
+.p-items-hidden .p-carousel-item.p-carousel-item-active {
+    @apply visible
+}
diff --git a/apps/labs/assets/styles/primevue/cascadeselect.css b/apps/labs/assets/styles/primevue/cascadeselect.css
new file mode 100644
index 000000000..a7034e050
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/cascadeselect.css
@@ -0,0 +1,169 @@
+.p-cascadeselect {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-cascadeselect:not(.p-disabled):hover {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-cascadeselect:not(.p-disabled).p-focus {
+    @apply border-primary
+}
+
+.p-cascadeselect.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-cascadeselect.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-cascadeselect.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-cascadeselect-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-e-md
+}
+
+.p-cascadeselect-clear-icon {
+    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
+}
+
+.p-cascadeselect-label {
+    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]
+        py-2 px-3 overflow-ellipsis
+        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none
+}
+
+.p-cascadeselect-label.p-placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-cascadeselect.p-disabled .p-cascadeselect-label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-cascadeselect-label-empty {
+    @apply overflow-hidden opacity-0
+}
+
+.p-cascadeselect-fluid {
+    @apply flex
+}
+
+.p-cascadeselect-fluid .p-cascadeselect-label {
+    @apply w-[1%]
+}
+
+.p-cascadeselect-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-cascadeselect .p-cascadeselect-overlay {
+    @apply min-w-full
+}
+
+.p-cascadeselect-option-list {
+    @apply hidden min-w-full absolute z-10
+}
+
+.p-cascadeselect-list {
+    @apply min-w-full m-0 list-none p-1 flex flex-col gap-[2px]
+}
+
+.p-cascadeselect-option {
+    @apply cursor-pointer font-normal whitespace-nowrap
+        text-surface-700 dark:text-surface-0 bg-transparent border-none
+        transition-colors duration-200 rounded-sm
+}
+
+.p-cascadeselect-option-active {
+    @apply overflow-visible
+}
+
+.p-cascadeselect-option-active > .p-cascadeselect-option-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-cascadeselect-option-selected .p-cascadeselect-option-content {
+    @apply bg-highlight
+}
+
+.p-cascadeselect-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-cascadeselect-option-active > .p-cascadeselect-option-list {
+    @apply block start-full top-0
+}
+
+.p-cascadeselect-option-content {
+    @apply flex items-center justify-between overflow-hidden relative px-3 py-2
+}
+
+.p-cascadeselect-group-icon {
+    @apply text-sm w-[0.875rem] h-[0.875rem] text-surface-400 dark:text-surface-500
+}
+
+.p-cascadeselect-group-icon:dir(rtl) {
+    @apply rotate-180
+}
+
+
+.p-cascadeselect-mobile-active .p-cascadeselect-option-content {
+    @apply rounded-sm
+}
+
+.p-cascadeselect-mobile-active-active .p-cascadeselect-list {
+    @apply flex flex-col top-full start-0 z-10
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-list > .p-cascadeselect-option > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
+    @apply ms-auto transition-transform duration-200
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon {
+    @apply transition-transform duration-200 rotate-90
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
+    @apply -rotate-90
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
+    @apply static shadow-none border-none ps-4
+}
+
+.p-cascadeselect-sm .p-cascadeselect-label {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {
+    @apply text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-cascadeselect-lg .p-cascadeselect-label {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}
diff --git a/apps/labs/assets/styles/primevue/checkbox.css b/apps/labs/assets/styles/primevue/checkbox.css
new file mode 100644
index 000000000..a5238b4b1
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/checkbox.css
@@ -0,0 +1,84 @@
+.p-checkbox {
+    @apply relative inline-flex select-none w-5 h-5 align-bottom
+}
+
+.p-checkbox-input {
+    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
+        border border-transparent rounded-sm
+}
+
+.p-checkbox-box {
+    @apply flex justify-center items-center rounded-sm w-5 h-5
+        border border-surface-300 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-950
+        transition-colors duration-200
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+}
+
+.p-checkbox-icon {
+    @apply text-surface-700 dark:text-surface-0
+        text-sm w-[0.875rem] h-[0.875rem]
+        transition-colors duration-200
+}
+
+.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-checkbox-checked .p-checkbox-box {
+    @apply border-primary bg-primary
+}
+
+.p-checkbox-checked .p-checkbox-icon {
+    @apply text-primary-contrast
+}
+
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    @apply bg-primary-emphasis border-primary-emphasis
+}
+
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
+    @apply text-primary-contrast
+}
+
+.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-checkbox.p-invalid > .p-checkbox-box {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-checkbox.p-variant-filled .p-checkbox-box {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-checkbox.p-disabled {
+    @apply opacity-100
+}
+
+.p-checkbox.p-disabled .p-checkbox-box {
+    @apply bg-surface-200 dark:bg-surface-400 border-surface-300 dark:border-surface-700
+}
+
+.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
+    @apply text-surface-700 dark:text-surface-900
+}
+
+.p-checkbox-sm,
+.p-checkbox-sm .p-checkbox-box {
+    @apply w-4 h-4
+}
+
+.p-checkbox-sm .p-checkbox-icon {
+    @apply w-3 h-3
+}
+
+.p-checkbox-lg,
+.p-checkbox-lg .p-checkbox-box {
+    @apply w-6 h-6
+}
+
+.p-checkbox-lg .p-checkbox-icon {
+    @apply w-4 h-4
+}
diff --git a/apps/labs/assets/styles/primevue/chip.css b/apps/labs/assets/styles/primevue/chip.css
new file mode 100644
index 000000000..7f10d74ed
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/chip.css
@@ -0,0 +1,27 @@
+.p-chip {
+    @apply inline-flex items-center rounded-2xl gap-2 px-3 py-2
+        bg-surface-100 dark:bg-surface-800
+        text-surface-800 dark:text-surface-0
+}
+
+.p-chip-icon {
+    @apply text-surface-800 dark:bg-surface-0 text-base w-4 h-4
+}
+
+.p-chip-image {
+    @apply rounded-full w-8 h-8 -ms-2
+}
+
+.p-chip:has(.p-chip-remove-icon) {
+    @apply pe-2
+}
+
+.p-chip:has(.p-chip-image) {
+    @apply pt-1 pb-1
+}
+
+.p-chip-remove-icon {
+    @apply cursor-pointer text-base w-4 h-4 rounded-full
+        text-surface-800 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
diff --git a/apps/labs/assets/styles/primevue/colorpicker.css b/apps/labs/assets/styles/primevue/colorpicker.css
new file mode 100644
index 000000000..71c433548
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/colorpicker.css
@@ -0,0 +1,47 @@
+.p-colorpicker {
+    @apply inline-block relative;
+}
+
+.p-colorpicker-dragging {
+    @apply cursor-pointer
+}
+
+.p-colorpicker-preview {
+    @apply w-6 h-6 p-0 border-none rounded-md transition-colors duration-200 cursor-pointer disabled:cursor-auto
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-colorpicker-panel {
+    @apply bg-surface-800 dark:bg-surface-900
+        border border-surface-900 dark:border-surface-700
+        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+        w-[193px] h-[166px] absolute top-0 start-0
+}
+
+.p-colorpicker-panel-inline {
+    @apply static shadow-none
+}
+
+.p-colorpicker-content {
+    @apply relative;
+}
+
+.p-colorpicker-color-selector {
+    @apply w-[150px] h-[150px] top-[8px] start-[8px] absolute
+}
+
+.p-colorpicker-color-background {
+    @apply w-full h-full bg-[linear-gradient(to_top,#000_0%,rgba(0,0,0,0)_100%),linear-gradient(to_right,#fff_0%,rgba(255,255,255,0)_100%)];
+}
+
+.p-colorpicker-color-handle {
+    @apply absolute top-0 start-[150px] rounded-full w-[10px] h-[10px] border border-surface-0 -mt-[5px] me-0 mb-0 -ms-[5px] cursor-pointer opacity-85
+}
+
+.p-colorpicker-hue {
+    @apply w-[17px] h-[150px] top-[8px] start-[167px] absolute opacity-85 bg-[linear-gradient(0deg,red_0,#ff0_17%,#0f0_33%,#0ff_50%,#00f_67%,#f0f_83%,red)];
+}
+
+.p-colorpicker-hue-handle {
+    @apply absolute top-[150px] start-0 w-[21px] -ms-[2px] -mt-[5px] h-[10px] border-2 opacity-85 border-surface-0 cursor-pointer
+}
diff --git a/apps/labs/assets/styles/primevue/common.css b/apps/labs/assets/styles/primevue/common.css
new file mode 100644
index 000000000..0c4e67f1a
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/common.css
@@ -0,0 +1,81 @@
+.p-connected-overlay-enter-from {
+    @apply opacity-0 scale-y-75
+}
+
+.p-connected-overlay-leave-to {
+    @apply opacity-0
+}
+
+.p-connected-overlay-enter-active {
+    @apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-connected-overlay-leave-active {
+    @apply transition-opacity duration-100 ease-linear
+}
+
+.p-toggleable-content-enter-from,
+.p-toggleable-content-leave-to {
+    @apply max-h-0
+}
+
+.p-toggleable-content-enter-to,
+.p-toggleable-content-leave-from {
+    @apply max-h-[1000px]
+}
+
+.p-toggleable-content-leave-active {
+    @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)];
+}
+
+.p-toggleable-content-enter-active {
+    @apply overflow-hidden transition-[max-height] duration-1000 ease-in-out
+}
+
+.p-disabled,
+.p-disabled * {
+    @apply cursor-default pointer-events-none select-none
+}
+
+.p-disabled,
+.p-component:disabled {
+    @apply opacity-60
+}
+
+.pi {
+    @apply text-base
+}
+
+.p-icon {
+    @apply w-4 h-4
+}
+
+.p-overlay-mask {
+    @apply bg-black/50 text-surface-200 transition-colors duration-150 fixed top-0 start-0 w-full h-full
+}
+
+.p-overlay-mask-enter {
+    animation: p-overlay-mask-enter-animation 150ms forwards;
+}
+
+.p-overlay-mask-leave {
+    animation: p-overlay-mask-leave-animation 150ms forwards;
+}
+
+@keyframes p-overlay-mask-enter-animation {
+    from {
+        background: transparent;
+    }
+    to {
+        background: rgba(0,0,0,0.5);
+    }
+}
+
+@keyframes p-overlay-mask-leave-animation {
+    from {
+        background: rgba(0,0,0,0.5);
+    }
+    to {
+        background: transparent;
+    }
+}
diff --git a/apps/labs/assets/styles/primevue/confirmdialog.css b/apps/labs/assets/styles/primevue/confirmdialog.css
new file mode 100644
index 000000000..2c822413e
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/confirmdialog.css
@@ -0,0 +1,10 @@
+@import './dialog';
+@import './button';
+
+.p-confirmdialog .p-dialog-content {
+    @apply flex items-center gap-4
+}
+
+.p-confirmdialog-icon {
+    @apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/confirmpopup.css b/apps/labs/assets/styles/primevue/confirmpopup.css
new file mode 100644
index 000000000..861a29494
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/confirmpopup.css
@@ -0,0 +1,66 @@
+@import './button';
+
+.p-confirmpopup {
+    @apply absolute mt-[10px] top-0 left-0
+        border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
+        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
+        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
+        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
+}
+
+.p-confirmpopup-content {
+    @apply flex items-center p-3 gap-4
+}
+
+.p-confirmpopup-icon {
+    @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0
+}
+
+.p-confirmpopup-footer {
+    @apply flex justify-end gap-2 pt-0 px-3 pb-3
+}
+
+.p-confirmpopup-footer button {
+    @apply w-auto
+}
+
+.p-confirmpopup-footer button:last-child {
+    @apply m-0
+}
+
+.p-confirmpopup-flipped {
+    @apply -mt-[10px] mb-[10px]
+}
+
+.p-confirmpopup-enter-from {
+    @apply opacity-0 scale-y-75
+}
+
+.p-confirmpopup-leave-to {
+    @apply opacity-0
+}
+
+.p-confirmpopup-enter-active {
+    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
+}
+
+.p-confirmpopup-leave-active {
+    @apply transition-opacity duration-100 ease-linear
+}
+
+.p-confirmpopup-flipped:after,
+.p-confirmpopup-flipped:before {
+    @apply bottom-auto top-full
+}
+
+.p-confirmpopup-flipped:after {
+    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
+}
+
+.p-confirmpopup-flipped:before {
+    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
+}
diff --git a/apps/labs/assets/styles/primevue/contextmenu.css b/apps/labs/assets/styles/primevue/contextmenu.css
new file mode 100644
index 000000000..d9af2908b
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/contextmenu.css
@@ -0,0 +1,101 @@
+.p-contextmenu {
+    @apply bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700
+        rounded-md min-w-52 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-contextmenu-root-list,
+.p-contextmenu-submenu {
+    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
+}
+
+.p-contextmenu-submenu {
+    @apply absolute min-w-full z-10 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-contextmenu-item {
+    @apply relative
+}
+
+.p-contextmenu-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-contextmenu-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-contextmenu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-contextmenu-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-contextmenu-item.p-focus > .p-contextmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item-active > .p-contextmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-contextmenu-enter-from,
+.p-contextmenu-leave-active {
+    @apply opacity-0
+}
+
+.p-contextmenu-enter-active {
+    @apply transition-opacity duration-[250ms]
+}
+
+.p-contextmenu-mobile .p-contextmenu-submenu {
+    @apply static shadow-none border-none ps-4 pe-0
+}
+
+.p-contextmenu-mobile .p-contextmenu-submenu-icon {
+    @apply transition-transform duration-200 rotate-90
+}
+
+.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
+    @apply -rotate-90
+}
diff --git a/apps/labs/assets/styles/primevue/datatable.css b/apps/labs/assets/styles/primevue/datatable.css
new file mode 100644
index 000000000..2cd96b0a4
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/datatable.css
@@ -0,0 +1,408 @@
+@import './paginator';
+
+.p-datatable {
+    @apply relative
+}
+
+.p-datatable-table {
+    @apply border-spacing-0 w-full
+}
+
+.p-datatable-scrollable > .p-datatable-table-container {
+    @apply relative
+}
+
+.p-datatable-scrollable-table > .p-datatable-thead {
+    @apply top-0 z-10
+}
+
+.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
+    @apply sticky z-10
+}
+
+.p-datatable-scrollable-table > .p-datatable-tfoot {
+    @apply bottom-0 z-10
+}
+
+.p-datatable-scrollable .p-datatable-frozen-column {
+    @apply sticky bg-surface-0 dark:bg-surface-900
+}
+
+.p-datatable-scrollable th.p-datatable-frozen-column {
+    @apply z-10
+}
+
+.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,
+.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
+    @apply bg-surface-0 dark:bg-surface-900
+}
+
+.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,
+.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    @apply bg-surface-0 dark:bg-surface-900
+}
+
+.p-datatable-flex-scrollable {
+    @apply flex flex-col h-full
+}
+
+.p-datatable-flex-scrollable > .p-datatable-table-container {
+    @apply flex flex-col flex-1 h-full
+}
+
+.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {
+    @apply sticky z-10
+}
+
+.p-datatable-resizable-table > .p-datatable-thead > tr > th,
+.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
+.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
+    @apply overflow-hidden whitespace-nowrap
+}
+
+.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {
+    @apply bg-clip-padding relative
+}
+
+.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {
+    @apply hidden
+}
+
+.p-datatable-column-resizer {
+    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
+}
+
+.p-datatable-column-header-content {
+    @apply flex items-center gap-2
+}
+
+.p-datatable-column-resize-indicator {
+    @apply w-px absolute z-10 hidden bg-primary
+}
+
+.p-datatable-row-reorder-indicator-up,
+.p-datatable-row-reorder-indicator-down {
+    @apply absolute hidden
+}
+
+.p-datatable-reorderable-column,
+.p-datatable-reorderable-row-handle {
+    @apply cursor-move
+}
+
+.p-datatable-mask {
+    @apply absolute flex items-center justify-center z-20
+}
+
+.p-datatable-inline-filter {
+    @apply flex items-center w-full gap-2
+}
+
+.p-datatable-inline-filter .p-datatable-filter-element-container {
+    @apply flex-auto w-[1%]
+}
+
+.p-datatable-filter-overlay {
+    @apply bg-surface-0 dark:bg-surface-900 rounded-md min-w-52
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-datatable-filter-constraint-list {
+    @apply m-0 list-none flex flex-col p-1 gap-[2px]
+}
+
+.p-datatable-filter-constraint {
+    @apply px-3 py-2 rounded-sm cursor-pointer transition-colors duration-200 text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-filter-constraint-selected {
+    @apply bg-highlight
+}
+
+.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover
+{
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-datatable-filter-constraint:focus-visible {
+    @apply outline-none bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-datatable-filter-constraint-selected:focus-visible {
+    @apply bg-highlight-emphasis
+}
+
+.p-datatable-filter-constraint-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-datatable-popover-filter {
+    @apply inline-flex ms-auto
+}
+
+.p-datatable-filter-overlay-popover {
+    @apply flex flex-col gap-2
+        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-datatable-filter-operator-dropdown {
+    @apply w-full
+}
+
+.p-datatable-filter-rule-list,
+.p-datatable-filter-rule {
+    @apply flex flex-col gap-2
+}
+
+.p-datatable-filter-rule {
+    @apply border-b border-surface-200 dark:border-surface-700 last:border-b-0 pb-2 last:pb-0
+}
+
+.p-datatable-filter-add-rule-button {
+    @apply w-full
+}
+
+.p-datatable-filter-remove-rule-button {
+    @apply w-full
+}
+
+.p-datatable-filter-buttonbar {
+    @apply p-0 flex items-center justify-between
+}
+
+.p-datatable-virtualscroller-spacer {
+    @apply flex
+}
+
+.p-datatable .p-virtualscroller .p-virtualscroller-loading {
+    @apply !transform-none min-h-0 sticky top-0 start-0
+}
+
+.p-datatable-paginator-top {
+    @apply border-b border-surface-200 dark:border-surface-700
+}
+
+.p-datatable-paginator-bottom {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-datatable-header {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-footer {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-header-cell {
+    @apply py-3 px-4 font-normal text-start transition-colors duration-200
+        border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-column-title {
+    @apply font-semibold
+}
+
+.p-datatable-tbody > tr {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
+}
+
+.p-datatable-tbody > tr > td {
+    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
+}
+
+.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datatable-tbody > tr.p-datatable-row-selected {
+    @apply bg-highlight
+}
+
+.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-datatable-tbody > tr.p-datatable-row-selected > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-datatable-tbody > tr:focus-visible,
+.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {
+    @apply outline outline-1 -outline-offset-1 outline-primary
+}
+
+.p-datatable-tfoot > tr > td {
+    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-column-footer {
+    @apply font-semibold
+}
+
+.p-datatable-sortable-column {
+    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
+}
+
+.p-datatable-column-title,
+.p-datatable-sort-icon,
+.p-datatable-sort-badge {
+    @apply align-middle
+}
+
+.p-datatable-sort-icon {
+    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
+}
+
+.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-datatable-column-sorted {
+    @apply bg-highlight
+}
+
+.p-datatable-column-sorted .p-datatable-sort-icon {
+    @apply bg-highlight
+}
+
+.p-datatable-hoverable .p-datatable-selectable-row {
+    @apply cursor-pointer
+}
+
+.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    @apply shadow-[inset_0_2px_0_0_theme(colors.primary)]
+}
+
+.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    @apply shadow-[inset_0_-2px_0_0_theme(colors.primary)]
+}
+
+.p-datatable-loading-icon {
+    @apply text-[2rem] w-8 h-8
+}
+
+.p-datatable-gridlines .p-datatable-header {
+    @apply border-t border-x
+}
+
+.p-datatable-gridlines .p-datatable-footer {
+    @apply border-b border-x
+}
+
+.p-datatable-gridlines .p-datatable-paginator-top {
+    @apply border-t border-x
+}
+
+.p-datatable-gridlines .p-datatable-paginator-bottom {
+    @apply border-b border-x
+}
+
+.p-datatable-gridlines .p-datatable-thead > tr > th {
+    @apply border-t border-x last:border
+}
+
+.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    @apply border-t border-s last:border-r
+}
+
+.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    @apply border-y border-s last:border
+}
+
+.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    @apply border-y border-s last:border
+}
+
+.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    @apply border-b border-s last:border-r
+}
+
+.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    @apply border-b border-s last:border-r
+}
+
+.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    @apply border-s last:border-r
+}
+
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    @apply bg-surface-50 dark:bg-surface-950
+}
+
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected {
+    @apply bg-highlight
+}
+
+.p-datatable.p-datatable-sm .p-datatable-header {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-sm .p-datatable-footer {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-lg .p-datatable-header {
+    @apply py-4 px-5
+}
+
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    @apply py-4 px-5
+}
+
+.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td {
+    @apply py-4 px-5
+}
+
+.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td {
+    @apply py-4 px-5
+}
+
+.p-datatable.p-datatable-lg .p-datatable-footer {
+    @apply py-4 px-5
+}
+
+.p-datatable-row-toggle-button {
+    @apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none
+        transition-colors duration-200 rounded-full border-none bg-transparent
+        text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700
+        dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+
+}
+
+.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary
+}
+
+.p-datatable-row-toggle-icon:dir(rtl) {
+    @apply rotate-180
+}
diff --git a/apps/labs/assets/styles/primevue/dataview.css b/apps/labs/assets/styles/primevue/dataview.css
new file mode 100644
index 000000000..dc413ef7c
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/dataview.css
@@ -0,0 +1,29 @@
+@import './paginator';
+
+.p-dataview {
+    @apply border-none
+}
+
+.p-dataview-header {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-dataview-content {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-dataview-footer {
+    @apply py-3 px-4 border-t border-surface-200 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-dataview-paginator-top {
+    @apply border-b border-surface-200 dark:border-surface-700
+}
+
+.p-dataview-paginator-bottom {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/datepicker.css b/apps/labs/assets/styles/primevue/datepicker.css
new file mode 100644
index 000000000..122759842
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/datepicker.css
@@ -0,0 +1,211 @@
+@import './button';
+@import './inputtext';
+
+.p-datepicker {
+    @apply inline-flex max-w-full
+}
+
+.p-datepicker-input {
+    @apply flex-auto w-[1%]
+}
+
+.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
+    @apply rounded-e-none
+}
+
+.p-datepicker-dropdown {
+    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
+        w-10 rounded-e-md border border-s-0 border-surface-300 dark:border-surface-700
+        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-datepicker:has(.p-datepicker-input-icon-container) {
+    @apply relative
+}
+
+.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
+    @apply pe-10
+}
+
+.p-datepicker-input-icon-container {
+    @apply cursor-pointer absolute top-1/2 end-3 -mt-2 text-surface-400
+}
+
+.p-datepicker-fluid {
+    @apply flex
+}
+
+.p-datepicker-fluid .p-datepicker-input {
+    @apply w-[1%]
+}
+
+.p-datepicker .p-datepicker-panel {
+    @apply min-w-full
+}
+
+.p-datepicker-panel {
+    @apply w-auto p-3 rounded-md
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-datepicker-panel-inline {
+    @apply inline-block overflow-x-auto shadow-none
+}
+
+.p-datepicker-header {
+    @apply flex items-center justify-between pt-0 px-0 pb-2 font-medium gap-2
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border-b border-surface-200 dark:border-surface-700
+}
+
+.p-datepicker-next-button:dir(rtl) {
+    @apply order-[-1]
+}
+.p-datepicker-prev-button:dir(rtl) {
+    @apply order-1
+}
+
+.p-datepicker-title {
+    @apply flex items-center justify-between gap-2 font-medium
+}
+
+.p-datepicker-select-year,
+.p-datepicker-select-month {
+    @apply border-none bg-transparent m-0 cursor-pointer font-medium transition-colors duration-200
+        py-1 px-2 rounded-md text-surface-700 dark:text-surface-0
+        enabled:hover:bg-surface-100 enabled:hover:text-surface-800
+        dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-datepicker-calendar-container {
+    @apply flex
+}
+
+.p-datepicker-calendar-container .p-datepicker-calendar {
+    @apply flex-auto border-s border-surface-200 dark:border-surface-700 gap-3
+        first:ps-0 first:border-s-0 last:pe-0
+}
+
+.p-datepicker-day-view {
+    @apply w-full border-collapse text-base mt-2 mx-0 mb-0
+}
+
+.p-datepicker-weekday-cell {
+    @apply p-1
+}
+
+.p-datepicker-weekday {
+    @apply font-medium text-surface-700 dark:text-surface-0
+}
+
+.p-datepicker-day-cell {
+    @apply p-1
+}
+
+.p-datepicker-day {
+    @apply flex items-center justify-center cursor-pointer my-0 mx-auto overflow-hidden relative w-8 h-8
+        rounded-full p-1 transition-colors duration-200 border border-transparent text-surface-700 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datepicker-day-selected {
+    @apply bg-primary text-primary-contrast
+}
+
+.p-datepicker-day-selected-range {
+    @apply bg-highlight
+}
+
+.p-datepicker-today > .p-datepicker-day {
+    @apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0
+}
+
+.p-datepicker-today > .p-datepicker-day-selected {
+    @apply bg-primary text-primary-contrast
+}
+
+.p-datepicker-today > .p-datepicker-day-selected-range {
+    @apply bg-highlight
+}
+
+.p-datepicker-weeknumber {
+    @apply text-center
+}
+
+.p-datepicker-month-view {
+    @apply mt-2 mb-0 mx-0
+}
+
+.p-datepicker-month {
+    @apply w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative
+        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datepicker-month-selected {
+    @apply bg-primary text-primary-contrast
+}
+
+.p-datepicker-year-view {
+    @apply mt-2 mb-0 mx-0
+}
+
+.p-datepicker-year {
+    @apply w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative
+        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datepicker-year-selected {
+    @apply bg-primary text-primary-contrast
+}
+
+.p-datepicker-buttonbar {
+    @apply flex justify-between items-center pt-2 pb-0 px-0 border-t border-surface-200 dark:border-surface-700
+}
+
+.p-datepicker-buttonbar .p-button {
+    @apply w-auto
+}
+
+.p-datepicker-time-picker {
+    @apply flex items-center justify-center border-t border-surface-200 dark:border-surface-700 p-0 gap-2
+}
+
+.p-datepicker-calendar-container + .p-datepicker-time-picker {
+    @apply pt-2 pb-0 px-0
+}
+
+.p-datepicker-time-picker > div {
+    @apply flex items-center flex-col gap-1
+}
+
+.p-datepicker-time-picker span {
+    @apply text-base
+}
+
+.p-datepicker-timeonly .p-datepicker-time-picker {
+    @apply border-t-0
+}
diff --git a/apps/labs/assets/styles/primevue/dialog.css b/apps/labs/assets/styles/primevue/dialog.css
new file mode 100644
index 000000000..8c9ddf89f
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/dialog.css
@@ -0,0 +1,125 @@
+@import './button';
+
+.p-dialog {
+    @apply max-h-[90%] scale-100 rounded-xl
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
+}
+
+.p-dialog-content {
+    @apply overflow-y-auto pt-0 px-5 pb-5
+}
+
+.p-dialog-header {
+    @apply flex items-center justify-between shrink-0 p-5
+}
+
+.p-dialog-title {
+    @apply font-semibold text-xl
+}
+
+.p-dialog-footer {
+    @apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2
+}
+
+.p-dialog-header-actions {
+    @apply flex items-center gap-2
+}
+
+.p-dialog-enter-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-dialog-leave-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
+}
+
+.p-dialog-enter-from,
+.p-dialog-leave-to {
+    @apply opacity-0 scale-75
+}
+
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topleft .p-dialog,
+.p-dialog-topright .p-dialog,
+.p-dialog-bottomleft .p-dialog,
+.p-dialog-bottomright .p-dialog {
+    @apply m-3 [transform:translate3d(0,0,0)]
+}
+
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-leave-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-leave-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-leave-active,
+.p-dialog-bottomright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-leave-active {
+    @apply transition-all duration-300 ease-out
+}
+
+.p-dialog-top .p-dialog-enter-from,
+.p-dialog-top .p-dialog-leave-to {
+    @apply [transform:translate3d(0,-100%,0)]
+}
+
+.p-dialog-bottom .p-dialog-enter-from,
+.p-dialog-bottom .p-dialog-leave-to {
+    @apply [transform:translate3d(0,100%,0)]
+}
+
+.p-dialog-left .p-dialog-enter-from,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-enter-from,
+.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-bottomleft .p-dialog-enter-from,
+.p-dialog-bottomleft .p-dialog-leave-to {
+    @apply [transform:translate3d(-100%,0,0)]
+}
+
+.p-dialog-right .p-dialog-enter-from,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-enter-from,
+.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-bottomright .p-dialog-enter-from,
+.p-dialog-bottomright .p-dialog-leave-to {
+    @apply [transform:translate3d(100%,0,0)]
+}
+
+.p-dialog-left:dir(rtl) .p-dialog-enter-from,
+.p-dialog-left:dir(rtl) .p-dialog-leave-to,
+.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,
+.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,
+.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,
+.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to {
+    @apply [transform:translate3d(100%,0,0)]
+}
+.p-dialog-right:dir(rtl) .p-dialog-enter-from,
+.p-dialog-right:dir(rtl) .p-dialog-leave-to,
+.p-dialog-topright:dir(rtl) .p-dialog-enter-from,
+.p-dialog-topright:dir(rtl) .p-dialog-leave-to,
+.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,
+.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to {
+    @apply [transform:translate3d(-100%,0,0)]
+}
+
+.p-dialog-maximized {
+    @apply !w-screen !h-screen top-0 start-0 max-h-full rounded-none
+}
+
+.p-dialog-maximized .p-dialog-content {
+    @apply flex-grow
+}
diff --git a/apps/labs/assets/styles/primevue/divider.css b/apps/labs/assets/styles/primevue/divider.css
new file mode 100644
index 000000000..1bb448bb0
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/divider.css
@@ -0,0 +1,52 @@
+.p-divider-horizontal {
+    @apply flex w-full relative items-center my-4 mx-0 py-0 px-4
+        before:absolute before:block before:top-1/2 before:start-0 before:w-full
+        before:border-t before:border-surface-200 dark:before:border-surface-700
+}
+
+.p-divider-horizontal .p-divider-content {
+    @apply py-0 px-2
+}
+
+.p-divider-vertical {
+    @apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0
+        before:absolute before:block before:top-0 before:start-1/2 before:h-full
+        before:border-s before:border-surface-200 before:dark:border-surface-700
+}
+
+.p-divider.p-divider-vertical .p-divider-content {
+    @apply py-2 px-0
+}
+
+.p-divider-content {
+    @apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-divider-solid.p-divider-horizontal:before {
+    @apply border-solid
+}
+
+.p-divider-solid.p-divider-vertical:before {
+    @apply border-solid
+}
+
+.p-divider-dashed.p-divider-horizontal:before {
+    @apply border-dashed
+}
+
+.p-divider-dashed.p-divider-vertical:before {
+    @apply border-dashed
+}
+
+.p-divider-dotted.p-divider-horizontal:before {
+    @apply border-dotted
+}
+
+.p-divider-dotted.p-divider-vertical:before {
+    @apply border-dotted
+}
+
+.p-divider-left:dir(rtl),
+.p-divider-right:dir(rtl) {
+    @apply flex-row-reverse
+}
diff --git a/apps/labs/assets/styles/primevue/dock.css b/apps/labs/assets/styles/primevue/dock.css
new file mode 100644
index 000000000..54d5f9cfc
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/dock.css
@@ -0,0 +1,84 @@
+.p-dock {
+    @apply absolute z-10 flex justify-center items-center pointer-events-none
+}
+
+.p-dock-list-container {
+    @apply flex pointer-events-auto bg-white/10 border border-white/10 p-2 rounded-xl
+}
+
+.p-dock-list {
+    @apply m-0 p-0 list-none flex items-center justify-center outline-none
+}
+
+.p-dock-item {
+    @apply transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform p-2 rounded-md
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-dock-item-link {
+    @apply flex flex-col items-center justify-center relative cursor-default w-12 h-12
+}
+
+.p-dock-top {
+    @apply start-0 top-0 w-full
+}
+
+.p-dock-top .p-dock-item {
+    @apply origin-[center_top]
+}
+
+.p-dock-bottom {
+    @apply start-0 bottom-0 w-full
+}
+
+.p-dock-bottom .p-dock-item {
+    @apply origin-[center_bottom]
+}
+
+.p-dock-right {
+    @apply end-0 top-0 h-full
+}
+
+.p-dock-right .p-dock-item {
+    @apply origin-[center_right]
+}
+
+.p-dock-right .p-dock-list {
+    @apply flex-col
+}
+
+.p-dock-left {
+    @apply start-0 top-0 h-full
+}
+
+.p-dock-left .p-dock-item {
+    @apply origin-[center_left]
+}
+
+.p-dock-left .p-dock-list {
+    @apply flex-col
+}
+
+.p-dock-mobile.p-dock-top .p-dock-list-container,
+.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    @apply overflow-x-auto w-full
+}
+
+.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,
+.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    @apply mt-0 mx-auto
+}
+
+.p-dock-mobile.p-dock-left .p-dock-list-container,
+.p-dock-mobile.p-dock-right .p-dock-list-container {
+    @apply overflow-y-auto h-full
+}
+
+.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,
+.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    @apply mt-auto mx-0
+}
+
+.p-dock-mobile .p-dock-list .p-dock-item {
+    @apply transform-none m-0
+}
diff --git a/apps/labs/assets/styles/primevue/drawer.css b/apps/labs/assets/styles/primevue/drawer.css
new file mode 100644
index 000000000..1190e87ec
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/drawer.css
@@ -0,0 +1,94 @@
+@import './button';
+
+.p-drawer {
+    @apply flex flex-col pointer-events-auto relative transition-transform duration-300
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
+}
+
+.p-drawer {
+    @apply [transform:translate3d(0,0,0)]
+}
+
+.p-drawer-content {
+    @apply overflow-y-auto flex-grow pt-0 pb-5 px-5
+}
+
+.p-drawer-header {
+    @apply flex items-center justify-between flex-shrink-0 p-5
+}
+
+.p-drawer-footer {
+    @apply p-5
+}
+
+.p-drawer-title {
+    @apply font-semibold text-2xl
+}
+
+.p-drawer-full .p-drawer {
+    @apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0
+}
+
+.p-drawer-left .p-drawer-enter-from,
+.p-drawer-left .p-drawer-leave-to {
+    @apply -translate-x-full
+}
+
+.p-drawer-right .p-drawer-enter-from,
+.p-drawer-right .p-drawer-leave-to {
+    @apply translate-x-full
+}
+
+.p-drawer-top .p-drawer-enter-from,
+.p-drawer-top .p-drawer-leave-to {
+    @apply -translate-y-full
+}
+
+.p-drawer-bottom .p-drawer-enter-from,
+.p-drawer-bottom .p-drawer-leave-to {
+    @apply translate-y-full
+}
+
+.p-drawer-full .p-drawer-enter-from,
+.p-drawer-full .p-drawer-leave-to {
+    @apply opacity-0
+}
+
+.p-drawer-full .p-drawer-enter-active,
+.p-drawer-full .p-drawer-leave-active {
+    @apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]
+}
+
+.p-drawer-left .p-drawer {
+    @apply w-80 h-full border-r
+}
+
+.p-drawer-right .p-drawer {
+    @apply w-80 h-full border-s
+}
+
+.p-drawer-top .p-drawer {
+    @apply h-40 w-full border-b
+}
+
+.p-drawer-bottom .p-drawer {
+    @apply h-40 w-full border-t
+}
+
+.p-drawer-left .p-drawer-content,
+.p-drawer-right .p-drawer-content,
+.p-drawer-top .p-drawer-content,
+.p-drawer-bottom .p-drawer-content {
+    @apply w-full h-full
+}
+
+.p-drawer-open {
+    @apply flex
+}
+
+.p-overlay-mask:dir(rtl) {
+    @apply flex-row-reverse;
+}
diff --git a/apps/labs/assets/styles/primevue/fieldset.css b/apps/labs/assets/styles/primevue/fieldset.css
new file mode 100644
index 000000000..7faed4e1a
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/fieldset.css
@@ -0,0 +1,45 @@
+.p-fieldset {
+    @apply border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        px-[1.125rem] pt-0 pb-[1.125rem]
+}
+
+.p-fieldset-legend {
+    @apply border border-transparent rounded-md px-3 py-2
+        transition-colors duration-200
+}
+
+.p-fieldset-toggleable > .p-fieldset-legend {
+    @apply p-0
+}
+
+.p-fieldset-toggle-button {
+    @apply select-none overflow-hidden relative
+        flex items-center justify-center gap-2
+        px-3 py-2
+        border-none rounded-md
+        bg-surface-0 dark:bg-surface-900
+        hover:bg-surface-100 dark:hover:bg-surface-800
+        text-surface-700 dark:text-surface-0
+        hover:text-surface-800 dark:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-fieldset-legend-label {
+    @apply font-semibold;
+}
+
+.p-fieldset-toggle-icon {
+    @apply text-surface-500 dark:text-surface-400
+        transition-colors duration-200
+}
+
+.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-fieldset .p-fieldset-content {
+    @apply p-0
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/fileupload.css b/apps/labs/assets/styles/primevue/fileupload.css
new file mode 100644
index 000000000..74ce46d9a
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/fileupload.css
@@ -0,0 +1,57 @@
+@import './button';
+@import './message';
+@import './progressbar';
+
+.p-fileupload input[type="file"] {
+    @apply hidden
+}
+
+.p-fileupload-advanced {
+    @apply border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-fileupload-header {
+    @apply flex items-center p-[1.125rem] gap-2 text-surface-700 dark:text-surface-0
+}
+
+.p-fileupload-content {
+    @apply border border-transparent relative transition-colors duration-200 pt-0 px-[1.125rem] pb-[1.125rem]
+}
+
+.p-fileupload-content .p-progressbar {
+    @apply w-full absolute top-0 start-0 h-1
+}
+
+.p-fileupload-file-list {
+    @apply flex flex-col gap-2 mt-[1.125rem]
+}
+
+.p-fileupload-file {
+    @apply flex flex-wrap items-center p-4 border-b border-surface-200 dark:border-surface-700 gap-2 last:border-b-0
+}
+
+.p-fileupload-file-info {
+    @apply flex flex-col gap-2
+}
+
+.p-fileupload-file-thumbnail {
+    @apply flex-shrink-0
+}
+
+.p-fileupload-file-actions {
+    @apply ms-auto
+}
+
+.p-fileupload-highlight {
+    @apply border border-dashed border-primary
+}
+
+.p-fileupload-advanced .p-message {
+    @apply mt-0
+}
+
+.p-fileupload-basic {
+    @apply flex flex-wrap items-center justify-center gap-2
+}
diff --git a/apps/labs/assets/styles/primevue/floatlabel.css b/apps/labs/assets/styles/primevue/floatlabel.css
new file mode 100644
index 000000000..f2544ee7c
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/floatlabel.css
@@ -0,0 +1,73 @@
+.p-floatlabel {
+    @apply block relative
+}
+
+.p-floatlabel label {
+    @apply absolute pointer-events-none top-1/2 -translate-y-1/2 transition-all duration-200 ease-out leading-none font-medium
+        start-3 text-surface-500 dark:text-surface-400
+}
+
+.p-floatlabel:has(.p-textarea) label {
+    @apply top-2 translate-y-0
+}
+
+.p-floatlabel:has(.p-inputicon:first-child) label {
+    @apply start-10
+}
+
+.p-floatlabel:has(.p-invalid) label {
+    @apply text-red-400 dark:text-red-300
+}
+
+.p-floatlabel:has(input:focus) label,
+.p-floatlabel:has(input.p-filled) label,
+.p-floatlabel:has(input:-webkit-autofill) label,
+.p-floatlabel:has(textarea:focus) label,
+.p-floatlabel:has(textarea.p-filled) label,
+.p-floatlabel:has(.p-inputwrapper-focus) label,
+.p-floatlabel:has(.p-inputwrapper-filled) label {
+    @apply -top-5 translate-y-0 text-xs font-normal
+}
+
+.p-floatlabel:has(input.p-filled) label,
+.p-floatlabel:has(textarea.p-filled) label,
+.p-floatlabel:has(.p-inputwrapper-filled) label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-floatlabel:has(input:focus) label,
+.p-floatlabel:has(input:-webkit-autofill) label,
+.p-floatlabel:has(textarea:focus) label ,
+.p-floatlabel:has(.p-inputwrapper-focus) label  {
+    @apply text-primary
+}
+
+.p-floatlabel-in .p-inputtext,
+.p-floatlabel-in .p-textarea,
+.p-floatlabel-in .p-select-label,
+.p-floatlabel-in .p-multiselect-label,
+.p-floatlabel-in .p-autocomplete-input-multiple,
+.p-floatlabel-in .p-cascadeselect-label,
+.p-floatlabel-in .p-treeselect-label {
+    @apply pt-6 pb-2
+}
+
+.p-floatlabel-in:has(input:focus) label,
+.p-floatlabel-in:has(input.p-filled) label,
+.p-floatlabel-in:has(input:-webkit-autofill) label,
+.p-floatlabel-in:has(textarea:focus) label,
+.p-floatlabel-in:has(textarea.p-filled) label,
+.p-floatlabel-in:has(.p-inputwrapper-focus) label,
+.p-floatlabel-in:has(.p-inputwrapper-filled) label {
+    @apply top-2
+}
+
+.p-floatlabel-on:has(input:focus) label,
+.p-floatlabel-on:has(input.p-filled) label,
+.p-floatlabel-on:has(input:-webkit-autofill) label,
+.p-floatlabel-on:has(textarea:focus) label,
+.p-floatlabel-on:has(textarea.p-filled) label,
+.p-floatlabel-on:has(.p-inputwrapper-focus) label,
+.p-floatlabel-on:has(.p-inputwrapper-filled) label {
+    @apply top-0 -translate-y-1/2 rounded-sm bg-surface-0 dark:bg-surface-950 py-0 px-[0.125rem]
+}
diff --git a/apps/labs/assets/styles/primevue/galleria.css b/apps/labs/assets/styles/primevue/galleria.css
new file mode 100644
index 000000000..e4edff962
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/galleria.css
@@ -0,0 +1,244 @@
+.p-galleria {
+    @apply overflow-hidden border border-surface-200 dark:border-surface-700 rounded-md
+}
+
+.p-galleria-content {
+    @apply flex flex-col
+}
+
+.p-galleria-items-container {
+    @apply flex flex-col relative
+}
+
+.p-galleria-items {
+    @apply relative flex h-full
+}
+
+.p-galleria-nav-button {
+    @apply absolute top-1/2 inline-flex justify-center items-center overflow-hidden select-none border-none cursor-pointer
+        w-12 h-12 transition-colors duration-200 p-0 -mt-12 mx-2 mb-0 rounded-full
+        bg-white/10 text-surface-100 enabled:hover:bg-white/20 enabled:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-galleria-next-icon,
+.p-galleria-prev-icon {
+    @apply text-2xl w-6 h-6
+}
+
+.p-galleria-prev-button {
+    @apply start-0
+}
+
+.p-galleria-next-button {
+    @apply end-0
+}
+
+.p-galleria-prev-button:dir(rtl) {
+    @apply start-auto end-0
+}
+.p-galleria-next-button:dir(rtl) {
+    @apply end-auto start-0
+}
+
+.p-galleria-item {
+    @apply flex justify-center items-center h-full w-full
+}
+
+.p-galleria-hover-navigators .p-galleria-nav-button {
+    @apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out
+}
+
+.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
+    @apply pointer-events-auto opacity-100
+}
+
+.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
+    @apply pointer-events-none
+}
+
+.p-galleria-caption {
+    @apply absolute bottom-0 left-0 w-full bg-black/5 text-surface-100 p-4
+}
+
+.p-galleria-thumbnails {
+    @apply flex flex-col overflow-auto flex-shrink-0
+}
+
+.p-galleria-thumbnail-nav-button {
+    @apply self-center flex-grow-0 flex-shrink-0 basis-auto justify-center items-center overflow-hidden relative
+        my-0 mx-2 p-0 border-none select-none cursor-pointer w-8 h-8 rounded-md transition-colors duration-200 bg-transparent
+        text-surface-600 hover:bg-surface-100 hover:text-surface-700
+        dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
+.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {
+    @apply text-base w-4 h-4
+}
+
+.p-galleria-thumbnails-content {
+    @apply flex flex-row bg-surface-0 dark:bg-surface-900 py-4 px-1
+}
+
+.p-galleria-thumbnails-viewport {
+    @apply overflow-hidden w-full
+}
+
+.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),
+.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {
+    @apply rotate-180
+}
+
+.p-galleria-thumbnail-items {
+    @apply flex
+}
+
+.p-galleria-thumbnail-item {
+    @apply overflow-auto flex items-center justify-center cursor-pointer opacity-50
+}
+
+.p-galleria-thumbnail {
+    @apply outline-transparent transition-opacity duration-300 hover:opacity-100
+}
+
+.p-galleria-thumbnail-item-current {
+    @apply opacity-100
+}
+
+.p-galleria-thumbnails-left .p-galleria-content,
+.p-galleria-thumbnails-right .p-galleria-content {
+    @apply flex-row
+}
+
+.p-galleria-thumbnails-left .p-galleria-items-container,
+.p-galleria-thumbnails-right .p-galleria-items-container {
+    @apply flex-row
+}
+
+.p-galleria-thumbnails-left .p-galleria-items-container,
+.p-galleria-thumbnails-top .p-galleria-items-container {
+    @apply order-2
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnails,
+.p-galleria-thumbnails-top .p-galleria-thumbnails {
+    @apply order-1
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnails-content,
+.p-galleria-thumbnails-right .p-galleria-thumbnails-content {
+    @apply flex-col flex-grow
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
+.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
+    @apply flex-col h-full
+}
+
+.p-galleria-indicator-list {
+    @apply flex items-center justify-center p-4 gap-2 m-0 list-none
+}
+
+.p-galleria-indicator-button {
+    @apply inline-flex items-center w-4 h-4 rounded-full m-0 p-0 border-none select-none cursor-pointer transition-colors duration-200
+        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-galleria-indicator-active .p-galleria-indicator-button {
+    @apply bg-primary
+}
+
+.p-galleria-indicators-left .p-galleria-items-container,
+.p-galleria-indicators-right .p-galleria-items-container {
+    @apply flex-row items-center
+}
+
+.p-galleria-indicators-left .p-galleria-items,
+.p-galleria-indicators-top .p-galleria-items {
+    @apply order-2
+}
+
+.p-galleria-indicators-left .p-galleria-indicator-list,
+.p-galleria-indicators-top .p-galleria-indicator-list {
+    @apply order-1
+}
+
+.p-galleria-indicators-left .p-galleria-indicator-list,
+.p-galleria-indicators-right .p-galleria-indicator-list {
+    @apply flex-col
+}
+
+.p-galleria-inset-indicators .p-galleria-indicator-list {
+    @apply absolute flex z-10 bg-black/50
+}
+
+.p-galleria-inset-indicators .p-galleria-indicator-button {
+    @apply bg-white/40 hover:bg-white/60
+}
+
+.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
+    @apply bg-white/90
+}
+
+.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
+    @apply top-0 left-0 w-full items-start
+}
+
+.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
+    @apply right-0 top-0 h-full items-end
+}
+
+.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
+    @apply bottom-0 left-0 w-full items-end
+}
+
+.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
+    @apply left-0 top-0 h-full items-start
+}
+
+.p-galleria-mask {
+    @apply fixed top-0 left-0 w-full h-full flex items-center justify-center
+}
+
+.p-galleria-close-button {
+    @apply absolute top-0 right-0 flex items-center justify-center overflow-hidden m-2 rounded-full
+        transition-colors duration-200 select-none cursor-pointer w-12 h-12 p-0 border-none
+        bg-white/10 text-surface-50 hover:bg-white/20 hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-galleria-close-icon {
+    @apply text-2xl w-6 h-6
+}
+
+.p-galleria-mask .p-galleria-nav-button {
+    @apply fixed top-1/2
+}
+
+.p-galleria-enter-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-galleria-leave-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
+}
+
+.p-galleria-enter-from,
+.p-galleria-leave-to {
+    @apply opacity-0 scale-75
+}
+
+.p-galleria-enter-active .p-galleria-nav-button {
+    @apply opacity-0
+}
+
+.p-items-hidden .p-galleria-thumbnail-item {
+    @apply invisible
+}
+
+.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
+    @apply visible
+}
diff --git a/apps/labs/assets/styles/primevue/iconfield.css b/apps/labs/assets/styles/primevue/iconfield.css
new file mode 100644
index 000000000..d7aaf1118
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/iconfield.css
@@ -0,0 +1,23 @@
+.p-iconfield {
+    @apply relative
+}
+
+.p-inputicon {
+    @apply absolute top-1/2 -mt-2 text-surface-400 leading-none
+}
+
+.p-iconfield .p-inputicon:first-child {
+    @apply start-3
+}
+
+.p-iconfield .p-inputicon:last-child {
+    @apply end-3
+}
+
+.p-iconfield .p-inputtext:not(:first-child) {
+    @apply ps-10
+}
+
+.p-iconfield .p-inputtext:not(:last-child) {
+    @apply pe-10
+}
diff --git a/apps/labs/assets/styles/primevue/iftalabel.css b/apps/labs/assets/styles/primevue/iftalabel.css
new file mode 100644
index 000000000..dc323f922
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/iftalabel.css
@@ -0,0 +1,32 @@
+.p-iftalabel {
+    @apply block relative
+}
+
+.p-iftalabel label {
+    @apply absolute pointer-events-none top-2 transition-all ease-out duration-200 leading-none text-xs font-medium start-3 text-surface-500 dark:text-surface-400
+}
+
+.p-iftalabel .p-inputtext,
+.p-iftalabel .p-textarea,
+.p-iftalabel .p-select-label,
+.p-iftalabel .p-multiselect-label,
+.p-iftalabel .p-autocomplete-input-multiple,
+.p-iftalabel .p-cascadeselect-label,
+.p-iftalabel .p-treeselect-label {
+    @apply pt-6 pb-2
+}
+
+.p-iftalabel:has(.p-invalid) label {
+    @apply text-red-400 dark:text-red-300
+}
+
+.p-iftalabel:has(input:focus) label ,
+.p-iftalabel:has(input:-webkit-autofill) label,
+.p-iftalabel:has(textarea:focus) label ,
+.p-iftalabel:has(.p-inputwrapper-focus) label  {
+    @apply text-primary
+}
+
+.p-iftalabel .p-inputicon {
+    @apply top-6 translate-y-1/4 mt-0
+}
diff --git a/apps/labs/assets/styles/primevue/image.css b/apps/labs/assets/styles/primevue/image.css
new file mode 100644
index 000000000..7cb3e4616
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/image.css
@@ -0,0 +1,56 @@
+.p-image-mask {
+    @apply flex items-center justify-center
+}
+
+.p-image-preview {
+    @apply relative inline-flex leading-none
+}
+
+.p-image-preview-mask {
+    @apply absolute start-0 top-0 w-full h-full flex items-center justify-center opacity-0
+        border-none p-0 cursor-pointer bg-transparent text-surface-200 transition-all duration-200
+}
+
+.p-image-preview:hover > .p-image-preview-mask {
+    @apply opacity-100 cursor-pointer bg-black/40 dark:bg-black/60
+}
+
+.p-image-preview-icon {
+    @apply text-2xl w-6 h-6
+}
+
+.p-image-toolbar {
+    @apply absolute top-4 end-4 start-auto bottom-auto flex z-10 p-2 bg-white/10 border border-white/20 rounded-3xl gap-2;
+}
+
+.p-image-action {
+    @apply inline-flex justify-center items-center text-surface-50 bg-transparent w-12 h-12 m-0 p-0
+        border-none cursor-pointer select-none rounded-full transition-colors duration-200
+        hover:text-surface-0 hover:bg-white/10
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-image-action .p-icon {
+    @apply text-2xl h-6 w-6
+}
+
+.p-image-action.p-disabled {
+    @apply pointer-events-auto
+}
+
+.p-image-original {
+    @apply transition-transform duration-150 max-w-[100vw] max-h-[100vh]
+}
+
+.p-image-original-enter-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-image-original-leave-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
+}
+
+.p-image-original-enter-from,
+.p-image-original-leave-to {
+    @apply opacity-0 scale-75
+}
diff --git a/apps/labs/assets/styles/primevue/imagecompare.css b/apps/labs/assets/styles/primevue/imagecompare.css
new file mode 100644
index 000000000..64151b4dc
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/imagecompare.css
@@ -0,0 +1,38 @@
+.p-imagecompare {
+    @apply relative overflow-hidden w-full aspect-video
+}
+
+.p-imagecompare img {
+    @apply w-full h-full absolute
+}
+
+.p-imagecompare img + img {
+    @apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]
+}
+
+.p-imagecompare:dir(rtl) img + img {
+    @apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]
+}
+
+.p-imagecompare-slider {
+    @apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200
+        hover:w-[calc(100%+2rem)] hover:-ms-4
+}
+
+.p-imagecompare-slider::-webkit-slider-thumb {
+    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-imagecompare-slider::-moz-range-thumb {
+    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-imagecompare-slider:hover::-webkit-slider-thumb {
+    @apply bg-white/40 h-8 w-8
+}
+
+.p-imagecompare-slider:hover::-moz-range-thumb {
+    @apply bg-white/40 h-8 w-8
+}
diff --git a/apps/labs/assets/styles/primevue/inplace.css b/apps/labs/assets/styles/primevue/inplace.css
new file mode 100644
index 000000000..ec4805db7
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/inplace.css
@@ -0,0 +1,13 @@
+.p-inplace-display {
+    @apply inline cursor-pointer border border-transparent px-3 py-2 rounded-md
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-inplace-display:not(.p-disabled):hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-inplace-content {
+    @apply block
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/inputgroup.css b/apps/labs/assets/styles/primevue/inputgroup.css
new file mode 100644
index 000000000..99db68584
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/inputgroup.css
@@ -0,0 +1,67 @@
+.p-inputgroup,
+.p-inputgroup .p-floatlabel,
+.p-inputgroup .p-iftalabel {
+    @apply flex items-stretch w-full
+}
+
+.p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper {
+    @apply flex-auto w-[1%]
+}
+
+.p-inputgroupaddon {
+    @apply flex items-center justify-center p-2 min-w-10
+        border-y border-surface-300 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-950 text-surface-400
+}
+
+.p-inputgroupaddon:first-child,
+.p-inputgroupaddon + .p-inputgroupaddon {
+    @apply border-s
+}
+
+.p-inputgroupaddon:last-child {
+    @apply border-e
+}
+
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-inputwrapper > .p-component,
+.p-inputgroup > .p-floatlabel > .p-component,
+.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component,
+.p-inputgroup > .p-iftalabel > .p-component,
+.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component {
+    @apply rounded-none m-0
+}
+
+.p-inputgroupaddon:first-child,
+.p-inputgroup > .p-component:first-child,
+.p-inputgroup > .p-inputwrapper:first-child > .p-component,
+.p-inputgroup > .p-floatlabel:first-child > .p-component,
+.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component,
+.p-inputgroup > .p-iftalabel:first-child > .p-component,
+.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component {
+    @apply rounded-s-md
+}
+
+.p-inputgroupaddon:last-child,
+.p-inputgroup > .p-component:last-child,
+.p-inputgroup > .p-inputwrapper:last-child > .p-component,
+.p-inputgroup > .p-floatlabel:last-child > .p-component,
+.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component,
+.p-inputgroup > .p-iftalabel:last-child > .p-component,
+.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component {
+    @apply rounded-e-md
+}
+
+.p-inputgroup .p-component:focus,
+.p-inputgroup .p-component.p-focus,
+.p-inputgroup .p-inputwrapper-focus,
+.p-inputgroup .p-component:focus ~ label,
+.p-inputgroup .p-component.p-focus ~ label,
+.p-inputgroup .p-inputwrapper-focus ~ label {
+    @apply z-10
+}
+
+.p-inputgroup > .p-button:not(.p-button-icon-only) {
+    @apply w-auto
+}
diff --git a/apps/labs/assets/styles/primevue/inputnumber.css b/apps/labs/assets/styles/primevue/inputnumber.css
new file mode 100644
index 000000000..bdef17232
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/inputnumber.css
@@ -0,0 +1,84 @@
+@import './inputtext';
+
+.p-inputnumber {
+    @apply inline-flex relative
+}
+
+.p-inputnumber-button {
+    @apply flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
+        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
+        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
+        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
+        transition-colors duration-200
+}
+
+.p-inputnumber-stacked .p-inputnumber-button {
+    @apply relative flex-auto border-none
+}
+
+.p-inputnumber-stacked .p-inputnumber-button-group {
+    @apply flex flex-col absolute top-px end-px h-[calc(100%-2px)] z-10
+}
+
+.p-inputnumber-stacked .p-inputnumber-increment-button {
+    @apply p-0 rounded-tr-[5px]
+}
+
+.p-inputnumber-stacked .p-inputnumber-decrement-button {
+    @apply p-0 rounded-br-[5px]
+}
+
+.p-inputnumber-horizontal .p-inputnumber-increment-button {
+    @apply order-3 rounded-e-md border-s-0
+}
+
+.p-inputnumber-horizontal .p-inputnumber-input {
+    @apply order-2 rounded-none
+}
+
+.p-inputnumber-horizontal .p-inputnumber-decrement-button {
+    @apply order-1 rounded-s-md border-r-0
+}
+
+.p-floatlabel:has(.p-inputnumber-horizontal) label {
+    @apply ms-10
+}
+
+.p-inputnumber-vertical {
+    @apply flex-col
+}
+
+.p-inputnumber-vertical .p-inputnumber-button {
+    @apply py-2
+}
+
+.p-inputnumber-vertical .p-inputnumber-increment-button {
+    @apply order-1 rounded-ss-md rounded-se-md w-full border-b-0
+}
+
+.p-inputnumber-vertical .p-inputnumber-input {
+    @apply order-2 rounded-none text-center
+}
+
+.p-inputnumber-vertical .p-inputnumber-decrement-button {
+    @apply order-3 rounded-ee-md rounded-es-md w-full border-t-0
+}
+
+.p-inputnumber-input {
+    @apply flex-auto
+}
+
+.p-inputnumber-fluid {
+    @apply w-full
+}
+
+.p-inputnumber-fluid .p-inputnumber-input {
+    @apply w-[1%]
+}
+
+.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
+    @apply w-full
+}
diff --git a/apps/labs/assets/styles/primevue/inputotp.css b/apps/labs/assets/styles/primevue/inputotp.css
new file mode 100644
index 000000000..a0b9b672f
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/inputotp.css
@@ -0,0 +1,9 @@
+@import './inputtext';
+
+.p-inputotp {
+    @apply flex items-center gap-2
+}
+
+.p-inputotp-input {
+    @apply text-center w-10
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/inputtext.css b/apps/labs/assets/styles/primevue/inputtext.css
new file mode 100644
index 000000000..7a05e6a3f
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/inputtext.css
@@ -0,0 +1,34 @@
+.p-inputtext {
+    @apply appearance-none rounded-md
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary dark:enabled:focus:border-primary
+        bg-surface-0 dark:bg-surface-950
+        text-surface-700 dark:text-surface-0
+        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 disabled:opacity-100
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        px-3 py-2
+        transition-colors duration-200
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        outline-none
+}
+
+.p-inputtext.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-inputtext.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-inputtext-sm {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-inputtext-lg {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-inputtext-fluid {
+    @apply w-full
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/knob.css b/apps/labs/assets/styles/primevue/knob.css
new file mode 100644
index 000000000..5304c9e23
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/knob.css
@@ -0,0 +1,37 @@
+.p-knob-range {
+    @apply fill-none transition-[stroke] duration-100 ease-in
+}
+
+.p-knob-text {
+    @apply text-xl text-center
+}
+
+.p-knob svg {
+    @apply rounded-full
+        transition-colors duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-knob svg path:first-child {
+    @apply stroke-surface-200 dark:stroke-surface-700
+}
+
+.p-knob svg path + path {
+    @apply stroke-primary
+}
+
+.p-knob svg text {
+    @apply fill-surface-500 dark:fill-surface-400
+}
+
+.p-knob-value {
+    animation-name: p-knob-dash-frame;
+    animation-fill-mode: forwards;
+    fill: none;
+}
+
+@keyframes p-knob-dash-frame {
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/listbox.css b/apps/labs/assets/styles/primevue/listbox.css
new file mode 100644
index 000000000..30b0235f9
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/listbox.css
@@ -0,0 +1,79 @@
+@import './inputtext';
+@import './iconfield';
+
+.p-listbox {
+    @apply bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0
+        border border-surface-300 dark:border-surface-700 rounded-md
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-listbox.p-focus {
+    @apply border-primary
+}
+
+.p-listbox.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-listbox.p-disabled .p-listbox-option {
+    @apply text-surface-500 dark:text-surface-400 cursor-default
+}
+
+.p-listbox.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-listbox-header {
+    @apply pt-2 pb-1 px-4
+}
+
+.p-listbox-filter {
+    @apply w-full
+}
+
+.p-listbox-list-container {
+    @apply overflow-auto
+}
+
+.p-listbox-list {
+    @apply list-none m-0 p-1 outline-none flex flex-col gap-[2px]
+}
+
+.p-listbox-option {
+    @apply flex items-center cursor-pointer relative overflow-hidden px-3 py-2 border-none rounded-sm
+        text-surface-700 dark:text-surface-0
+        transition-colors duration-200
+}
+
+.p-listbox-striped li:nth-child(even of .p-listbox-option) {
+    @apply bg-surface-50 dark:bg-surface-900
+}
+
+.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
+    @apply bg-highlight
+}
+
+.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-listbox-option-check-icon {
+    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0
+}
+
+.p-listbox-option-group {
+    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold 
+}
+
+.p-listbox-empty-message {
+    @apply px-3 py-2
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/megamenu.css b/apps/labs/assets/styles/primevue/megamenu.css
new file mode 100644
index 000000000..08a232bce
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/megamenu.css
@@ -0,0 +1,207 @@
+.p-megamenu {
+    @apply relative flex items-center rounded-md gap-2
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700
+}
+
+.p-megamenu-start,
+.p-megamenu-end {
+    @apply flex items-center
+}
+
+.p-megamenu-root-list {
+    @apply m-0 p-0 list-none outline-none flex items-center flex-wrap gap-2
+}
+
+.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content {
+    @apply rounded-md
+}
+
+.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {
+    @apply px-3 py-2
+}
+
+.p-megamenu-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-megamenu-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-megamenu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-megamenu-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-megamenu-item.p-focus > .p-megamenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item-active > .p-megamenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-overlay {
+    @apply hidden absolute w-auto z-10 start-0 min-w-full rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
+    @apply block
+}
+
+.p-megamenu-submenu {
+    @apply m-0 p-1 list-none min-w-52 flex flex-col gap-[2px]
+}
+
+.p-megamenu-submenu-label {
+    @apply px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
+}
+
+.p-megamenu-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-megamenu-horizontal {
+    @apply items-center px-3 py-2
+}
+
+.p-megamenu-horizontal .p-megamenu-root-list {
+    @apply flex items-center flex-wrap gap-2
+}
+
+.p-megamenu-horizontal .p-megamenu-end {
+    @apply ms-auto self-center
+}
+
+.p-megamenu-vertical {
+    @apply inline-flex min-w-52 flex-col items-stretch p-1
+}
+
+.p-megamenu-vertical .p-megamenu-root-list {
+    @apply items-stretch flex-col gap-[2px]
+}
+
+.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
+    @apply start-full top-0
+}
+
+.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply ms-auto
+}
+
+.p-megamenu-grid {
+    @apply flex
+}
+
+.p-megamenu-col-2,
+.p-megamenu-col-3,
+.p-megamenu-col-4,
+.p-megamenu-col-6,
+.p-megamenu-col-12 {
+    @apply flex-grow-0 flex-shrink-0 basis-auto p-2
+}
+
+.p-megamenu-col-2 {
+    @apply w-1/6;
+}
+
+.p-megamenu-col-3 {
+    @apply w-1/4
+}
+
+.p-megamenu-col-4 {
+    @apply w-1/3
+}
+
+.p-megamenu-col-6 {
+    @apply w-1/2
+}
+
+.p-megamenu-col-12 {
+    @apply w-full
+}
+
+.p-megamenu-button {
+    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full
+        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300
+        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-megamenu-mobile {
+    @apply flex
+}
+
+.p-megamenu-mobile .p-megamenu-button {
+    @apply flex
+}
+
+.p-megamenu-mobile .p-megamenu-root-list {
+    @apply absolute hidden flex-col top-full start-0 z-10 w-full p-1 gap-[2px]
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-megamenu-mobile-active .p-megamenu-root-list {
+    @apply flex
+}
+
+.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
+    @apply w-full static
+}
+
+.p-megamenu-mobile .p-megamenu-overlay {
+    @apply static border-none rounded-none shadow-none
+}
+
+.p-megamenu-mobile .p-megamenu-grid {
+    @apply flex-wrap overflow-auto max-h-[90%]
+}
+
+.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply ms-auto transition-transform duration-[200ms]
+}
+
+.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply -rotate-180
+}
diff --git a/apps/labs/assets/styles/primevue/menu.css b/apps/labs/assets/styles/primevue/menu.css
new file mode 100644
index 000000000..8bb37084d
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/menu.css
@@ -0,0 +1,51 @@
+.p-menu {
+    @apply bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+        rounded-md min-w-52
+}
+
+.p-menu-list {
+    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
+}
+
+.p-menu-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-menu-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-menu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-menu-item.p-focus .p-menu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0 
+}
+
+.p-menu-item.p-focus .p-menu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menu-overlay {
+    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-menu-submenu-label {
+    @apply bg-transparent px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold
+}
+
+.p-menu-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/menubar.css b/apps/labs/assets/styles/primevue/menubar.css
new file mode 100644
index 000000000..c989af621
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/menubar.css
@@ -0,0 +1,169 @@
+.p-menubar {
+    @apply flex items-center rounded-md px-3 py-2 gap-2
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700
+}
+
+.p-menubar-start,
+.p-megamenu-end {
+    @apply flex items-center
+}
+
+.p-menubar-root-list,
+.p-menubar-submenu {
+    @apply flex m-0 p-0 list-none outline-none
+}
+
+.p-menubar-root-list {
+    @apply items-center flex-wrap gap-2
+}
+
+.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
+    @apply rounded-md
+}
+
+.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
+    @apply px-3 py-2
+}
+
+.p-menubar-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-menubar-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-menubar-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-menubar-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-menubar-submenu-icon:dir(rtl) {
+    @apply rotate-180
+}
+
+.p-menubar-item.p-focus > .p-menubar-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item-active > .p-menubar-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-submenu {
+    @apply hidden absolute min-w-52 z-10
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        flex-col p-1 gap-[2px] rounded-md
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-menubar-submenu .p-menubar-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-menubar-submenu .p-menubar-item {
+    @apply relative
+}
+
+ .p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu {
+    @apply block start-full top-0
+}
+
+.p-menubar-end {
+    @apply ms-auto self-center
+}
+
+.p-menubar-button {
+    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full
+        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300
+        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-menubar-mobile {
+    @apply relative
+}
+
+.p-menubar-mobile .p-menubar-button {
+    @apply flex
+}
+
+.p-menubar-mobile .p-menubar-root-list {
+    @apply absolute hidden w-full flex-col top-full start-0 z-10 p-1 gap-[2px] rounded-md
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
+    @apply px-3 py-3
+}
+
+.p-menubar-mobile-active .p-menubar-root-list {
+    @apply flex
+}
+
+.p-menubar-mobile .p-menubar-root-list .p-menubar-item {
+    @apply w-full static
+}
+
+.p-menubar-mobile .p-menubar-root-list .p-menubar-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply ms-auto transition-transform duration-[200ms]
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply -rotate-180
+}
+
+.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon {
+    @apply transition-transform duration-200 rotate-90
+}
+
+.p-menubar-mobile  .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply -rotate-90
+}
+
+.p-menubar-mobile .p-menubar-submenu {
+    @apply w-full static shadow-none border-none ps-4 pe-0
+}
diff --git a/apps/labs/assets/styles/primevue/message.css b/apps/labs/assets/styles/primevue/message.css
new file mode 100644
index 000000000..7ba971140
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/message.css
@@ -0,0 +1,212 @@
+.p-message {
+    @apply rounded-md outline outline-1
+}
+
+.p-message-content {
+    @apply flex items-center px-3 py-2 gap-2 h-full
+}
+
+.p-message-icon {
+    @apply flex-shrink-0
+}
+
+.p-message-close-button {
+    @apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none
+        w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+}
+
+.p-message-info {
+    @apply bg-blue-50/95 outline-blue-200 text-blue-600
+        dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-message-info .p-message-close-button {
+    @apply hover:bg-blue-100 focus-visible:outline-blue-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
+}
+
+.p-message-info.p-message-outlined {
+    @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600
+}
+
+.p-message-info.p-message-simple {
+    @apply text-blue-500 dark:text-blue-600
+}
+
+.p-message-success {
+    @apply bg-green-50/95 outline-green-200 text-green-600
+        dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500
+        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
+}
+
+.p-message-success .p-message-close-button {
+    @apply hover:bg-green-100 focus-visible:outline-green-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
+}
+
+.p-message-success.p-message-outlined {
+    @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600
+}
+
+.p-message-success.p-message-simple {
+    @apply text-green-500 dark:text-green-600
+}
+
+.p-message-warn {
+    @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600
+        dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500
+        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
+}
+
+.p-message-warn .p-message-close-button {
+    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
+}
+
+.p-message-warn.p-message-outlined {
+    @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600
+}
+
+.p-message-warn.p-message-simple {
+    @apply text-yellow-500 dark:text-yellow-600
+}
+
+.p-message-error {
+    @apply bg-red-50/95 outline-red-200 text-red-600
+        dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500
+        shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]
+}
+
+.p-message-error .p-message-close-button {
+    @apply hover:bg-red-100 focus-visible:outline-red-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
+}
+
+.p-message-error.p-message-outlined {
+    @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600
+}
+
+.p-message-error.p-message-simple {
+    @apply text-red-500 dark:text-red-600
+}
+
+.p-message-secondary {
+    @apply bg-surface-100 outline-surface-200 text-surface-600
+        dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300
+        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-message-secondary .p-message-close-button {
+    @apply hover:bg-surface-200 focus-visible:outline-surface-600
+        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
+}
+
+.p-message-secondary.p-message-outlined {
+    @apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600
+}
+
+.p-message-secondary.p-message-simple {
+    @apply text-surface-500 dark:text-surface-600
+}
+
+.p-message-contrast {
+    @apply bg-surface-900 outline-surface-950 text-surface-50
+        dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950
+        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-message-contrast .p-message-close-button {
+    @apply hover:bg-surface-800 focus-visible:outline-surface-50
+        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
+}
+
+.p-message-contrast.p-message-outlined {
+    @apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0
+}
+
+.p-message-contrast.p-message-simple {
+    @apply text-surface-950 dark:text-surface-0
+}
+
+.p-message-text {
+    @apply text-base font-medium
+}
+
+.p-message-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}
+
+.p-message-enter-from {
+    @apply opacity-0
+}
+
+.p-message-enter-active {
+    @apply transition-opacity duration-300
+}
+
+.p-message.p-message-leave-from {
+    @apply max-h-[1000px]
+}
+
+.p-message.p-message-leave-to {
+    @apply max-h-0 opacity-0 m-0
+}
+
+.p-message-leave-active {
+    @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]
+}
+
+.p-message-leave-active .p-message-close-button {
+    @apply opacity-0
+}
+
+.p-message-sm .p-message-content {
+    @apply px-2.5 py-[0.375rem]
+}
+
+.p-message-sm .p-message-text {
+    @apply text-sm
+}
+
+.p-message-sm .p-message-icon {
+    @apply w-4 h-4 text-sm
+}
+
+.p-message-sm .p-message-close-icon {
+    @apply w-3.5 h-3.5 text-sm
+}
+
+.p-message-lg .p-message-content {
+    @apply px-3.5 py-2.5
+}
+
+.p-message-lg .p-message-text {
+    @apply text-xl
+}
+
+.p-message-lg .p-message-icon {
+    @apply w-5 h-5 text-xl
+}
+
+.p-message-lg .p-message-close-icon {
+    @apply w-[1.125rem] h-[1.125rem] text-xl
+}
+
+.p-message-outlined {
+    @apply bg-transparent outline outline-1
+}
+
+.p-message-simple {
+    @apply bg-transparent outline-none shadow-none
+}
+
+.p-message-simple .p-message-content {
+    @apply p-0
+}
+
+.p-message-outlined .p-message-close-button:hover,
+.p-message-simple .p-message-close-button:hover {
+    @apply bg-transparent
+}
diff --git a/apps/labs/assets/styles/primevue/metergroup.css b/apps/labs/assets/styles/primevue/metergroup.css
new file mode 100644
index 000000000..74227a115
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/metergroup.css
@@ -0,0 +1,67 @@
+.p-metergroup {
+    @apply flex gap-4
+}
+
+.p-metergroup-meters {
+    @apply flex bg-surface-200 dark:bg-surface-700 rounded-md
+}
+
+.p-metergroup-label-list {
+    @apply flex flex-wrap m-0 p-0 list-none
+}
+
+.p-metergroup-label {
+    @apply inline-flex items-center gap-2
+}
+
+.p-metergroup-label-marker {
+    @apply inline-flex w-2 h-2 rounded-full
+}
+
+.p-metergroup-label-icon {
+    @apply text-base w-4 h-4
+}
+
+.p-metergroup-horizontal {
+    @apply flex-col
+}
+
+.p-metergroup-label-list-horizontal {
+    @apply gap-4
+}
+
+.p-metergroup-horizontal .p-metergroup-meters {
+    @apply h-2
+}
+
+.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    @apply rounded-s-md
+}
+
+.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    @apply rounded-e-md
+}
+
+.p-metergroup-vertical {
+    @apply flex-row
+}
+
+.p-metergroup-label-list-vertical {
+    @apply flex-col gap-2
+}
+
+.p-metergroup-vertical .p-metergroup-meters {
+    @apply flex-col w-2 h-full
+}
+
+.p-metergroup-vertical .p-metergroup-label-list {
+    @apply items-start
+}
+
+.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    @apply rounded-ss-md rounded-se-md
+}
+
+.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    @apply rounded-ee-md rounded-es-md
+}
diff --git a/apps/labs/assets/styles/primevue/multiselect.css b/apps/labs/assets/styles/primevue/multiselect.css
new file mode 100644
index 000000000..b53b8d4d0
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/multiselect.css
@@ -0,0 +1,143 @@
+@import './checkbox';
+@import './chip';
+@import './inputtext';
+@import './iconfield';
+
+.p-multiselect {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-multiselect:not(.p-disabled):hover {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-multiselect:not(.p-disabled).p-focus {
+    @apply border-primary
+}
+
+.p-multiselect.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-multiselect.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-multiselect.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-multiselect-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-e-md
+}
+
+.p-multiselect-clear-icon {
+    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
+}
+
+.p-multiselect-label-container {
+    @apply overflow-hidden flex-auto
+}
+
+.p-multiselect-label {
+    @apply flex items-center gap-1 whitespace-nowrap overflow-hidden text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0
+}
+
+.p-multiselect-label.p-placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-multiselect.p-disabled .p-multiselect-label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-multiselect-label-empty {
+    @apply overflow-hidden opacity-0
+}
+
+.p-multiselect .p-multiselect-overlay {
+    @apply min-w-full
+}
+
+.p-multiselect-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-multiselect-header {
+    @apply flex items-center pt-2 pb-1 px-4
+}
+
+.p-multiselect-header .p-checkbox {
+    @apply me-2
+}
+
+.p-multiselect-filter-container {
+    @apply flex-auto
+}
+
+.p-multiselect-filter {
+    @apply w-full
+}
+
+.p-multiselect-list-container {
+    @apply overflow-auto
+}
+
+.p-multiselect-list {
+    @apply m-0 p-1 list-none gap-[2px] flex flex-col
+}
+
+.p-multiselect-option {
+    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-3 py-2
+        rounded-sm text-surface-700 dark:text-surface-0 bg-transparent border-none
+        transition-colors duration-200
+}
+
+.p-multiselect-option:not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-0
+}
+
+.p-multiselect-option-group {
+    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold
+}
+
+.p-multiselect-empty-message {
+    @apply px-3 py-2
+}
+
+.p-multiselect-label .p-chip {
+    @apply py-1 rounded-sm
+}
+
+.p-multiselect-label:has(.p-chip) {
+    @apply py-1 px-[0.375rem]
+}
+
+.p-multiselect-fluid {
+    @apply flex
+}
+
+.p-multiselect-sm .p-multiselect-label {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-multiselect-sm .p-multiselect-dropdown .p-icon {
+    @apply text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-multiselect-lg .p-multiselect-label {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-multiselect-lg .p-multiselect-dropdown .p-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}
diff --git a/apps/labs/assets/styles/primevue/orderlist.css b/apps/labs/assets/styles/primevue/orderlist.css
new file mode 100644
index 000000000..5a5b79016
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/orderlist.css
@@ -0,0 +1,10 @@
+@import './button';
+@import './listbox';
+
+.p-orderlist {
+    @apply flex gap-[1.125rem]
+}
+
+.p-orderlist-controls {
+    @apply flex flex-col justify-center gap-2
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/organizationchart.css b/apps/labs/assets/styles/primevue/organizationchart.css
new file mode 100644
index 000000000..69bbb496a
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/organizationchart.css
@@ -0,0 +1,71 @@
+.p-organizationchart-table {
+    @apply border-spacing-0 border-separate my-0 mx-auto
+}
+
+.p-organizationchart-table > tbody > tr > td {
+    @apply text-center align-top py-0 px-3
+}
+
+.p-organizationchart-node {
+    @apply inline-block relative py-3 px-4 rounded-md
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        transition-colors duration-200
+}
+
+.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
+    @apply pt-3 px-4 pb-5
+}
+
+.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-organizationchart-node-selected {
+    @apply bg-highlight
+}
+
+.p-organizationchart-node-toggle-button {
+    @apply absolute -bottom-3 -ms-3 z-20 start-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full
+        inline-flex items-center justify-center transition-colors duration-200
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700
+        dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+.p-organizationchart-node-toggle-button-icon {
+    @apply relative top-px
+}
+
+.p-organizationchart-connector-down {
+    @apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700
+}
+
+.p-organizationchart-connector-right {
+    @apply rounded-none
+}
+
+.p-organizationchart-connector-left {
+    @apply rounded-none border-e border-surface-200 dark:border-surface-700
+}
+
+.p-organizationchart-connector-top {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-organizationchart-node-selectable {
+    @apply cursor-pointer
+}
+
+.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
+    @apply border-e-0
+}
+
+.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
+    @apply rounded-se-md
+}
+
+.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
+    @apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md
+}
diff --git a/apps/labs/assets/styles/primevue/overlaybadge.css b/apps/labs/assets/styles/primevue/overlaybadge.css
new file mode 100644
index 000000000..c0193ea23
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/overlaybadge.css
@@ -0,0 +1,13 @@
+@import './badge';
+
+.p-overlaybadge {
+    @apply relative
+}
+
+.p-overlaybadge .p-badge {
+    @apply absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline outline-2 outline-surface-0 dark:outline-surface-900
+}
+
+.p-overlaybadge .p-badge:dir(rtl) {
+    @apply -translate-x-1/2 -translate-y-1/2
+}
diff --git a/apps/labs/assets/styles/primevue/paginator.css b/apps/labs/assets/styles/primevue/paginator.css
new file mode 100644
index 000000000..25d694302
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/paginator.css
@@ -0,0 +1,58 @@
+.p-paginator {
+    @apply flex items-center justify-center flex-wrap py-2 px-4 rounded-md gap-1
+        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-paginator-content {
+    @apply flex items-center justify-center flex-wrap gap-1
+}
+
+.p-paginator-content-start {
+    @apply ms-auto
+}
+
+.p-paginator-content-end {
+    @apply me-auto
+}
+
+.p-paginator-page,
+.p-paginator-next,
+.p-paginator-last,
+.p-paginator-first,
+.p-paginator-prev {
+    @apply cursor-pointer inline-flex items-center justify-center leading-none overflow-hidden relative
+        bg-transparent border-none min-w-10 h-10 transition-colors duration-200 rounded-full p-0 m-0
+        text-surface-500 dark:text-surface-400
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,
+.p-paginator-first:not(.p-disabled):hover,
+.p-paginator-prev:not(.p-disabled):hover,
+.p-paginator-next:not(.p-disabled):hover,
+.p-paginator-last:not(.p-disabled):hover {
+    @apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300
+}
+
+.p-paginator-page.p-paginator-page-selected {
+    @apply bg-highlight
+}
+
+.p-paginator-current {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-paginator-pages {
+    @apply flex items-center gap-1
+}
+
+.p-paginator-jtp-input .p-inputtext {
+    @apply max-w-10
+}
+
+.p-paginator-first:dir(rtl),
+.p-paginator-prev:dir(rtl),
+.p-paginator-next:dir(rtl),
+.p-paginator-last:dir(rtl) {
+    @apply rotate-180
+}
diff --git a/apps/labs/assets/styles/primevue/panel.css b/apps/labs/assets/styles/primevue/panel.css
new file mode 100644
index 000000000..cb5d53e2c
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/panel.css
@@ -0,0 +1,27 @@
+@import './button';
+
+.p-panel {
+    @apply border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-panel-header {
+    @apply flex justify-between items-center p-[1.125rem]
+}
+
+.p-panel-toggleable .p-panel-header {
+    @apply py-[0.375rem] px-[1.125rem]
+}
+
+.p-panel-title {
+    @apply leading-none font-semibold
+}
+
+.p-panel-content {
+    @apply pt-0 pb-[1.125rem] px-[1.125rem] 
+}
+
+.p-panel-footer {
+    @apply pt-0 pb-[1.125rem] px-[1.125rem] 
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/panelmenu.css b/apps/labs/assets/styles/primevue/panelmenu.css
new file mode 100644
index 000000000..77f28503b
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/panelmenu.css
@@ -0,0 +1,94 @@
+.p-panelmenu {
+    @apply flex flex-col gap-2
+}
+
+.p-panelmenu-panel {
+    @apply bg-surface-0 dark:bg-surface-900 rounded-md p-1
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+}
+
+.p-panelmenu-header {
+    @apply outline-none
+}
+
+.p-panelmenu-header-content {
+    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0
+}
+
+.p-panelmenu-header-link {
+    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer relative no-underline text-inherit
+}
+
+.p-panelmenu-header-icon,
+.p-panelmenu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-panelmenu-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-header:not(.p-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) {
+    @apply rotate-180;
+}
+
+.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-submenu {
+    @apply m-0 py-0 ps-4 outline-none list-none
+}
+
+.p-panelmenu-item-link {
+    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer no-underline text-inherit relative overflow-hidden
+}
+
+.p-panelmenu-item-content {
+    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0
+}
+
+.p-panelmenu-item.p-focus > .p-panelmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
diff --git a/apps/labs/assets/styles/primevue/password.css b/apps/labs/assets/styles/primevue/password.css
new file mode 100644
index 000000000..e350fcbab
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/password.css
@@ -0,0 +1,61 @@
+@import './inputtext';
+
+.p-password {
+    @apply inline-flex relative
+}
+
+.p-password .p-password-overlay {
+    @apply min-w-full
+}
+
+.p-password-meter {
+    @apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md
+}
+
+.p-password-meter-label {
+    @apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md
+}
+
+.p-password-meter-weak {
+    @apply bg-red-500 dark:bg-red-400
+}
+
+.p-password-meter-medium {
+    @apply bg-amber-500 dark:bg-amber-400
+}
+
+.p-password-meter-strong {
+    @apply bg-green-500 dark:bg-green-400
+}
+
+.p-password-fluid {
+    @apply flex
+}
+
+.p-password-fluid .p-password-input {
+    @apply w-full
+}
+
+.p-password-input::-ms-reveal,
+.p-password-input::-ms-clear {
+    @apply hidden
+}
+
+.p-password-overlay {
+    @apply p-3 rounded-md bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-password-content {
+    @apply flex flex-col gap-2
+}
+
+.p-password-toggle-mask-icon {
+    @apply end-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4
+}
+
+.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
+    @apply pe-10
+}
diff --git a/apps/labs/assets/styles/primevue/picklist.css b/apps/labs/assets/styles/primevue/picklist.css
new file mode 100644
index 000000000..97aa65f89
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/picklist.css
@@ -0,0 +1,18 @@
+@import './button';
+@import './listbox';
+
+.p-picklist {
+    @apply flex gap-[1.125rem]
+}
+
+.p-picklist-controls {
+    @apply flex flex-col justify-center gap-2
+}
+
+.p-picklist-list-container {
+    @apply flex-grow flex-shrink basis-1/2
+}
+
+.p-picklist .p-listbox {
+    @apply h-full
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/popover.css b/apps/labs/assets/styles/primevue/popover.css
new file mode 100644
index 000000000..964d2d9df
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/popover.css
@@ -0,0 +1,46 @@
+.p-popover {
+    @apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700
+        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
+        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
+        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
+        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
+}
+
+.p-popover-content {
+    @apply p-3
+}
+
+.p-popover-flipped {
+    @apply -mt-[10px] mb-[10px]
+}
+
+.p-popover-enter-from {
+    @apply opacity-0 scale-y-75
+}
+
+.p-popover-leave-to {
+    @apply opacity-0
+}
+
+.p-popover-enter-active {
+    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
+}
+
+.p-popover-leave-active {
+    @apply transition-opacity duration-100 ease-linear
+}
+
+.p-popover-flipped:after,
+.p-popover-flipped:before {
+    @apply bottom-auto top-full
+}
+
+.p-popover.p-popover-flipped:after {
+    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
+}
+
+.p-popover.p-popover-flipped:before {
+    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
+}
diff --git a/apps/labs/assets/styles/primevue/progressbar.css b/apps/labs/assets/styles/primevue/progressbar.css
new file mode 100644
index 000000000..3788b236f
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/progressbar.css
@@ -0,0 +1,67 @@
+.p-progressbar {
+    @apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md
+}
+
+.p-progressbar-value {
+    @apply m-0 bg-primary
+}
+
+.p-progressbar-label {
+    @apply text-primary-contrast text-xs font-semibold
+}
+
+.p-progressbar-determinate .p-progressbar-value {
+    @apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out
+}
+
+.p-progressbar-determinate .p-progressbar-label {
+    @apply inline-flex
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+    @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
+
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation-delay: 1.15s;
+}
+
+@keyframes p-progressbar-indeterminate-anim {
+    0% {
+        inset-inline-start: -35%;
+        inset-inline-end: 100%;
+    }
+    60% {
+        inset-inline-start: 100%;
+        inset-inline-end: -90%;
+    }
+    100% {
+        inset-inline-start: 100%;
+        inset-inline-end: -90%;
+    }
+}
+
+@keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        inset-inline-start: -200%;
+        inset-inline-end: 100%;
+    }
+    60% {
+        inset-inline-start: 107%;
+        inset-inline-end: -8%;
+    }
+    100% {
+        inset-inline-start: 107%;
+        inset-inline-end: -8%;
+    }
+}
diff --git a/apps/labs/assets/styles/primevue/progressspinner.css b/apps/labs/assets/styles/primevue/progressspinner.css
new file mode 100644
index 000000000..335abd177
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/progressspinner.css
@@ -0,0 +1,58 @@
+.p-progressspinner {
+    @apply relative my-0 mx-auto w-[100px] h-[100px] inline-block
+        before:block before:pt-[100%]
+}
+
+.p-progressspinner-spin {
+    @apply h-full origin-center w-full absolute top-0 bottom-0 start-0 end-0 m-auto;
+}
+
+.p-progressspinner-spin {
+    animation: p-progressspinner-rotate 2s linear infinite;
+}
+
+.p-progressspinner-circle {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: 0;
+    stroke: theme(colors.red.500);
+    stroke-linecap: round;
+    animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
+}
+
+@keyframes p-progressspinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes p-progressspinner-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes p-progressspinner-color {
+    100%,
+    0% {
+        stroke: theme(colors.red.500);
+    }
+    40% {
+        stroke: theme(colors.blue.500);
+    }
+    66% {
+        stroke: theme(colors.green.500);
+    }
+    80%,
+    90% {
+        stroke: theme(colors.yellow.500);
+    }
+}
diff --git a/apps/labs/assets/styles/primevue/radiobutton.css b/apps/labs/assets/styles/primevue/radiobutton.css
new file mode 100644
index 000000000..bd88f93da
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/radiobutton.css
@@ -0,0 +1,93 @@
+.p-radiobutton {
+    @apply relative inline-flex select-none w-5 h-5
+}
+
+.p-radiobutton-input {
+    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
+        border border-transparent rounded-full
+}
+
+.p-radiobutton-box {
+    @apply flex justify-center items-center rounded-full
+        border border-surface-300 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-950
+        w-5 h-5
+        transition-colors duration-200
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+}
+
+.p-radiobutton-icon {
+    @apply bg-transparent text-xs w-3 h-3 rounded-full
+        transition-all duration-200 backface-hidden
+}
+
+.p-radiobutton-icon {
+    @apply scale-[0.1]
+}
+
+.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-radiobutton-checked .p-radiobutton-box {
+    @apply border-primary bg-primary
+}
+
+.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
+    @apply bg-primary-contrast visible
+}
+
+.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
+    @apply scale-100
+}
+
+.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    @apply border-primary-emphasis bg-primary-emphasis
+}
+
+.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
+    @apply bg-primary-contrast
+}
+
+.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-radiobutton.p-invalid > .p-radiobutton-box {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-radiobutton.p-variant-filled .p-radiobutton-box {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-radiobutton.p-disabled {
+    @apply opacity-100
+}
+
+.p-radiobutton.p-disabled .p-radiobutton-box {
+    @apply bg-surface-200 dark:bg-surface-400
+        border-surface-300 dark:border-surface-700
+}
+
+.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
+    @apply bg-surface-700 dark:bg-surface-400
+}
+
+.p-radiobutton-sm,
+.p-radiobutton-sm .p-radiobutton-box {
+    @apply w-4 h-4
+}
+
+.p-radiobutton-sm .p-radiobutton-icon {
+    @apply w-2 h-2
+}
+
+.p-radiobutton-lg,
+.p-radiobutton-lg .p-radiobutton-box {
+    @apply w-6 h-6
+}
+
+.p-radiobutton-lg .p-radiobutton-icon {
+    @apply w-4 h-4
+}
diff --git a/apps/labs/assets/styles/primevue/rating.css b/apps/labs/assets/styles/primevue/rating.css
new file mode 100644
index 000000000..79b57febd
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/rating.css
@@ -0,0 +1,23 @@
+.p-rating {
+    @apply relative flex items-center gap-1
+}
+
+.p-rating-option {
+    @apply inline-flex items-center cursor-pointer rounded-full
+}
+
+.p-rating-option.p-focus-visible {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-rating-icon {
+    @apply text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200
+}
+
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
+    @apply text-primary
+}
+
+.p-rating-option-active .p-rating-icon {
+    @apply text-primary
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/ripple.css b/apps/labs/assets/styles/primevue/ripple.css
new file mode 100644
index 000000000..5e3cd2f43
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/ripple.css
@@ -0,0 +1,7 @@
+.p-ink {
+    @apply block absolute bg-black/10 dark:bg-white/30 scale-0 rounded-[100%] pointer-events-none
+}
+
+.p-ink-active {
+    @apply transition-[opacity,transform] duration-500 scale-[2.5] opacity-0 ease-linear
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/scrollpanel.css b/apps/labs/assets/styles/primevue/scrollpanel.css
new file mode 100644
index 000000000..8bf7fd55c
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/scrollpanel.css
@@ -0,0 +1,41 @@
+.p-scrollpanel-content-container {
+    @apply overflow-hidden w-full h-full relative z-10 float-left
+}
+
+.p-scrollpanel-content {
+    @apply relative overflow-auto
+        h-[calc(100%+18px)] w-[calc(100%+18px)]
+        pt-0 ps-0 pr-[18px] pb-[18px] [scrollbar-width:none]
+}
+
+.p-scrollpanel-content::-webkit-scrollbar {
+    @apply hidden
+}
+
+.p-scrollpanel-bar {
+    @apply relative rounded-sm z-20 cursor-pointer opacity-0
+        bg-surface-100 dark:bg-surface-800
+        transition-opacity duration-200 border-none
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-scrollpanel-bar-y {
+    @apply w-[9px] top-0
+}
+
+.p-scrollpanel-bar-x {
+    @apply h-[9px] bottom-0
+}
+
+.p-scrollpanel-hidden {
+    @apply invisible
+}
+
+.p-scrollpanel:hover .p-scrollpanel-bar,
+.p-scrollpanel:active .p-scrollpanel-bar {
+    @apply opacity-100
+}
+
+.p-scrollpanel-grabbed {
+    @apply select-none
+}
diff --git a/apps/labs/assets/styles/primevue/scrolltop.css b/apps/labs/assets/styles/primevue/scrolltop.css
new file mode 100644
index 000000000..40e5381f4
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/scrolltop.css
@@ -0,0 +1,25 @@
+@import './button';
+
+.p-scrolltop.p-button {
+    @apply fixed bottom-5 end-5
+}
+
+.p-scrolltop-sticky.p-button {
+    @apply sticky flex ms-auto
+}
+
+.p-scrolltop-enter-from {
+    @apply opacity-0
+}
+
+.p-scrolltop-enter-active {
+    @apply transition-opacity duration-150
+}
+
+.p-scrolltop.p-scrolltop-leave-to {
+    @apply opacity-0
+}
+
+.p-scrolltop-leave-active {
+    @apply transition-opacity duration-150
+}
diff --git a/apps/labs/assets/styles/primevue/select.css b/apps/labs/assets/styles/primevue/select.css
new file mode 100644
index 000000000..85b108e83
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/select.css
@@ -0,0 +1,144 @@
+@import './button';
+@import './inputtext';
+@import './iconfield';
+
+.p-select {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-select:not(.p-disabled):hover {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-select:not(.p-disabled).p-focus {
+    @apply border-primary
+}
+
+.p-select.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-select.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-select.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-select-clear-icon {
+    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
+}
+
+.p-select-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-e-md
+}
+
+.p-select-label {
+    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]
+        py-2 px-3 overflow-ellipsis
+        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none
+}
+
+.p-select-label.p-placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-select:has(.p-select-clear-icon) .p-select-label {
+    @apply pe-7
+}
+
+.p-select.p-disabled .p-select-label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-select-label-empty {
+    @apply overflow-hidden opacity-0
+}
+
+input.p-select-label {
+    @apply cursor-default
+}
+
+.p-select .p-select-overlay {
+    @apply min-w-full
+}
+
+.p-select-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-select-header {
+    @apply pt-2 pb-1 px-4
+}
+
+.p-select-filter {
+    @apply w-full
+}
+
+.p-select-list-container {
+    @apply overflow-auto
+}
+
+.p-select-option-group {
+    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold
+}
+
+.p-select-list {
+    @apply m-0 p-1 list-none gap-[2px] flex flex-col
+}
+
+.p-select-option {
+    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center
+        px-3 py-2 border-none text-surface-700 dark:text-surface-0 bg-transparent rounded-sm
+        transition-colors duration-200
+}
+
+.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-select-option.p-select-option-selected {
+    @apply bg-highlight
+}
+
+.p-select-option.p-select-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-select-option-check-icon {
+    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0
+}
+
+.p-select-empty-message {
+    @apply px-3 py-2
+}
+
+.p-select-fluid {
+    @apply flex
+}
+
+.p-select-sm .p-select-label {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-select-sm .p-select-dropdown .p-icon {
+    @apply text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-select-lg .p-select-label {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-select-lg .p-select-dropdown .p-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}
diff --git a/apps/labs/assets/styles/primevue/selectbutton.css b/apps/labs/assets/styles/primevue/selectbutton.css
new file mode 100644
index 000000000..5350fdeef
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/selectbutton.css
@@ -0,0 +1,25 @@
+@import './togglebutton';
+
+.p-selectbutton {
+    @apply inline-flex select-none rounded-md
+}
+
+.p-selectbutton .p-togglebutton {
+    @apply rounded-none border-y border-r border-s-0
+}
+
+.p-selectbutton .p-togglebutton:focus-visible {
+    @apply relative z-10
+}
+
+.p-selectbutton .p-togglebutton:first-child {
+    @apply border-s rounded-s-md
+}
+
+.p-selectbutton .p-togglebutton:last-child {
+    @apply rounded-e-md
+}
+
+.p-selectbutton.p-invalid {
+    @apply outline outline-offset-0 outline-red-400 dark:outline-red-300
+}
diff --git a/apps/labs/assets/styles/primevue/skeleton.css b/apps/labs/assets/styles/primevue/skeleton.css
new file mode 100644
index 000000000..e2393cd21
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/skeleton.css
@@ -0,0 +1,11 @@
+.p-skeleton {
+    @apply overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md
+}
+
+.p-skeleton-circle {
+    @apply rounded-full
+}
+
+.p-skeleton-animation-none::after {
+    @apply animate-none
+}
diff --git a/apps/labs/assets/styles/primevue/slider.css b/apps/labs/assets/styles/primevue/slider.css
new file mode 100644
index 000000000..ae3b9718b
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/slider.css
@@ -0,0 +1,42 @@
+.p-slider {
+    @apply relative bg-surface-200 dark:bg-surface-700 rounded-sm
+}
+
+.p-slider-handle {
+    @apply cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px]
+        bg-surface-200 dark:bg-surface-700 rounded-full
+        transition-colors duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        before:w-[16px] before:h-[16px] before:block before:rounded-full
+        before:bg-surface-0 dark:before:bg-surface-950
+        before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)]
+        before:transition-colors before:duration-200
+}
+
+.p-slider-range {
+    @apply block bg-primary rounded-sm
+}
+
+.p-slider.p-slider-horizontal {
+    @apply h-[3px]
+}
+
+.p-slider-horizontal .p-slider-range {
+    @apply top-0 start-0 h-full
+}
+
+.p-slider-horizontal .p-slider-handle {
+    @apply top-1/2 -mt-[10px] -ms-[10px]
+}
+
+.p-slider-vertical {
+    @apply min-h-[100px] w-[3px]
+}
+
+.p-slider-vertical .p-slider-handle {
+    @apply start-1/2 -mb-[10px] -ms-[10px]
+}
+
+.p-slider-vertical .p-slider-range {
+    @apply bottom-0 start-0 w-full
+}
diff --git a/apps/labs/assets/styles/primevue/speeddial.css b/apps/labs/assets/styles/primevue/speeddial.css
new file mode 100644
index 000000000..414ce756f
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/speeddial.css
@@ -0,0 +1,48 @@
+@import './button';
+
+.p-speeddial {
+    @apply static flex gap-2
+}
+
+.p-speeddial-button {
+    @apply z-10
+}
+
+.p-speeddial-button.p-speeddial-rotate {
+    @apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform
+}
+
+.p-speeddial-list {
+    @apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2
+        transition-[top] ease-linear duration-200
+}
+
+.p-speeddial-item {
+    @apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform
+}
+
+.p-speeddial-circle .p-speeddial-item,
+.p-speeddial-semi-circle .p-speeddial-item,
+.p-speeddial-quarter-circle .p-speeddial-item {
+    @apply absolute
+}
+
+.p-speeddial-mask {
+    @apply absolute start-0 top-0 w-full h-full opacity-0 bg-black/40 dark:bg-black/60 rounded-md transition-opacity duration-150
+}
+
+.p-speeddial-mask-visible {
+    @apply pointer-events-none opacity-100 transition-opacity duration-150
+}
+
+.p-speeddial-open .p-speeddial-list {
+    @apply pointer-events-auto
+}
+
+.p-speeddial-open .p-speeddial-item {
+    @apply scale-100 opacity-100
+}
+
+.p-speeddial-open .p-speeddial-rotate {
+    @apply rotate-45
+}
diff --git a/apps/labs/assets/styles/primevue/splitbutton.css b/apps/labs/assets/styles/primevue/splitbutton.css
new file mode 100644
index 000000000..cf0cd0a49
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/splitbutton.css
@@ -0,0 +1,34 @@
+@import './button';
+@import './tieredmenu';
+
+.p-splitbutton {
+    @apply inline-flex relative rounded-md
+}
+
+.p-splitbutton-button {
+    @apply rounded-e-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10
+}
+
+.p-splitbutton-dropdown {
+    @apply rounded-s-none focus-visible:z-10
+}
+
+.p-splitbutton .p-menu {
+    @apply min-w-full
+}
+
+.p-splitbutton-fluid {
+    @apply w-full
+}
+
+.p-splitbutton-rounded .p-splitbutton-dropdown {
+    @apply rounded-e-[2rem]
+}
+
+.p-splitbutton-rounded .p-splitbutton-button {
+    @apply rounded-s-[2rem]
+}
+
+.p-splitbutton-raised {
+    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
+}
diff --git a/apps/labs/assets/styles/primevue/splitter.css b/apps/labs/assets/styles/primevue/splitter.css
new file mode 100644
index 000000000..e2f9f6f81
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/splitter.css
@@ -0,0 +1,56 @@
+.p-splitter {
+    @apply flex flex-wrap
+        border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-splitter-vertical {
+    @apply flex-col
+}
+
+.p-splitter-gutter {
+    @apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700
+}
+
+.p-splitter-gutter-handle {
+    @apply rounded-md bg-transparent 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-splitter-horizontal.p-splitter-resizing {
+    @apply cursor-col-resize select-none
+}
+
+.p-splitter-vertical.p-splitter-resizing {
+    @apply cursor-row-resize select-none
+}
+
+.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+    @apply h-[24px] w-full
+}
+
+.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+    @apply w-[24px] h-full
+}
+
+.p-splitter-horizontal > .p-splitter-gutter {
+    @apply cursor-col-resize
+}
+
+.p-splitter-vertical > .p-splitter-gutter {
+    @apply cursor-row-resize
+}
+
+.p-splitterpanel {
+    @apply flex-grow overflow-hidden
+}
+
+.p-splitterpanel-nested {
+    @apply flex
+}
+
+.p-splitterpanel .p-splitter {
+    @apply flex-grow border-none
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/stepper.css b/apps/labs/assets/styles/primevue/stepper.css
new file mode 100644
index 000000000..43f44e75e
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/stepper.css
@@ -0,0 +1,102 @@
+.p-steplist {
+    @apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto
+}
+
+.p-step {
+    @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial
+}
+
+.p-step-header {
+    @apply border-none inline-flex items-center no-underline cursor-pointer
+        transition-colors duration-200 rounded-md bg-transparent p-0 gap-2
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-step.p-disabled .p-step-header {
+    @apply cursor-default
+}
+
+
+.p-stepper.p-stepper-readonly .p-step {
+    @apply cursor-auto
+}
+
+.p-step-title {
+    @apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full
+        text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200
+}
+
+.p-step-number {
+    @apply flex items-center justify-center text-surface-500 dark:text-surface-400
+        bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700
+        min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative
+        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
+}
+
+.p-step-active .p-step-header {
+    @apply cursor-default
+}
+
+.p-step-active .p-step-number {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700
+}
+
+.p-step-active .p-step-title {
+    @apply text-primary
+}
+
+.p-step:not(.p-disabled):focus-visible {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-step:has(~ .p-step-active) .p-stepper-separator {
+    @apply bg-primary
+}
+
+.p-stepper-separator {
+    @apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200
+}
+
+.p-steppanels {
+    @apply pt-[0.875rem] pb-[1.125rem] px-2
+}
+
+.p-steppanel {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-stepper:has(.p-stepitem) {
+    @apply flex flex-col
+}
+
+.p-stepitem {
+    @apply flex flex-col flex-initial
+}
+
+.p-stepitem.p-stepitem-active {
+    @apply flex-auto
+}
+
+.p-stepitem .p-step {
+    @apply flex-initial
+}
+
+.p-stepitem .p-steppanel-content {
+    @apply w-full ps-4
+}
+
+.p-stepitem .p-steppanel {
+    @apply flex flex-auto
+}
+
+.p-stepitem .p-stepper-separator {
+    @apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ms-[1.625rem] relative start-[-2.5px]
+}
+
+.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
+    @apply bg-primary
+}
+
+.p-stepitem:last-of-type .p-steppanel {
+    @apply ps-8
+}
diff --git a/apps/labs/assets/styles/primevue/tabs.css b/apps/labs/assets/styles/primevue/tabs.css
new file mode 100644
index 000000000..0ac004ba9
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/tabs.css
@@ -0,0 +1,84 @@
+.p-tabs {
+    @apply flex flex-col
+}
+
+.p-tablist {
+    @apply flex relative
+}
+
+.p-tabs-scrollable > .p-tablist {
+    @apply overflow-hidden
+}
+
+.p-tablist-viewport {
+    @apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto
+}
+
+.p-tablist-viewport::-webkit-scrollbar {
+    @apply hidden
+}
+
+.p-tablist-tab-list {
+    @apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700
+}
+
+.p-tablist-content {
+    @apply flex-grow
+}
+
+.p-tablist-nav-button {
+    @apply !absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer
+        bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10
+        shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50
+        focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-tablist-prev-button {
+    @apply start-0
+}
+
+.p-tablist-next-button {
+    @apply end-0
+}
+
+.p-tablist-prev-button:dir(rtl),
+.p-tablist-next-button:dir(rtl) {
+    @apply rotate-180
+}
+
+.p-tab {
+    @apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem]
+        border-b border-surface-200 dark:border-surface-700 font-semibold
+        text-surface-500 dark:text-surface-400
+        transition-colors duration-200 -mb-px
+}
+
+.p-tab.p-disabled {
+    @apply cursor-default
+}
+
+.p-tab:not(.p-disabled):focus-visible {
+    @apply z-10 outline outline-1 outline-offset-[-1px] outline-primary
+}
+
+.p-tab:not(.p-tab-active):not(.p-disabled):hover {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-tab-active {
+    @apply border-primary text-primary
+}
+
+.p-tabpanels {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+        pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none
+}
+
+.p-tablist-active-bar {
+    @apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]
+}
+
+.p-tablist-viewport {
+    @apply [scrollbar-behavior:smooth] [scrollbar-width:none]
+}
diff --git a/apps/labs/assets/styles/primevue/tag.css b/apps/labs/assets/styles/primevue/tag.css
new file mode 100644
index 000000000..24e42867d
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/tag.css
@@ -0,0 +1,38 @@
+.p-tag {
+    @apply inline-flex items-center justify-center
+        bg-primary-100 dark:bg-primary-500/15
+        text-primary-700 dark:text-primary-300
+        text-sm font-bold py-1 px-2 rounded-md gap-1
+}
+
+.p-tag-icon {
+    @apply text-xs w-3 h-3
+}
+
+.p-tag-rounded {
+    @apply rounded-2xl
+}
+
+.p-tag-success {
+    @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300
+}
+
+.p-tag-info {
+    @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300
+}
+
+.p-tag-warn {
+    @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300
+}
+
+.p-tag-danger {
+    @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300
+}
+
+.p-tag-secondary {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300
+}
+
+.p-tag-contrast {
+    @apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/tailwind.css b/apps/labs/assets/styles/primevue/tailwind.css
new file mode 100644
index 000000000..7aec51300
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/tailwind.css
@@ -0,0 +1,104 @@
+@import './common';
+
+/* Form */
+@import './autocomplete';
+@import './cascadeselect';
+@import './checkbox';
+@import './colorpicker';
+@import './datepicker';
+@import './iconfield';
+@import './iftalabel';
+@import './inputgroup';
+@import './inputnumber';
+@import './inputotp';
+@import './inputtext';
+@import './floatlabel';
+@import './knob';
+@import './listbox';
+@import './multiselect';
+@import './password';
+@import './radiobutton';
+@import './rating';
+@import './select';
+@import './selectbutton';
+@import './slider';
+@import './textarea';
+@import './togglebutton';
+@import './toggleswitch';
+@import './treeselect';
+
+/* Button */
+@import './button';
+@import './buttongroup';
+@import './speeddial';
+@import './splitbutton';
+
+/* Data */
+@import './datatable';
+@import './dataview';
+@import './paginator';
+@import './picklist';
+@import './orderlist';
+@import './organizationchart';
+@import './timeline';
+@import './tree';
+@import './treetable';
+
+/* Overlay */
+@import './confirmdialog';
+@import './confirmpopup';
+@import './dialog';
+@import './drawer';
+@import './popover';
+@import './tooltip';
+
+/* Menu */
+@import './breadcrumb';
+@import './contextmenu';
+@import './dock';
+@import './menu';
+@import './menubar';
+@import './megamenu';
+@import './panelmenu';
+@import './tieredmenu';
+
+/* Panel */
+@import './accordion';
+@import './card';
+@import './divider';
+@import './fieldset';
+@import './panel';
+@import './scrollpanel';
+@import './splitter';
+@import './stepper';
+@import './tabs';
+@import './toolbar';
+
+/* File */
+@import './fileupload';
+
+/* Message */
+@import './message';
+@import './toast';
+
+/* Media */
+@import './carousel';
+@import './galleria';
+@import './image';
+@import './imagecompare';
+
+/* Misc */
+@import './avatar';
+@import './badge';
+@import './blockui';
+@import './chip';
+@import './inplace';
+@import './metergroup';
+@import './overlaybadge';
+@import './progressbar';
+@import './progressspinner';
+@import './ripple';
+@import './scrolltop';
+@import './skeleton';
+@import './tag';
+@import './terminal';
diff --git a/apps/labs/assets/styles/primevue/terminal.css b/apps/labs/assets/styles/primevue/terminal.css
new file mode 100644
index 000000000..71d107d69
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/terminal.css
@@ -0,0 +1,22 @@
+.p-terminal {
+    @apply h-72 overflow-auto px-3 py-2 rounded-md
+        border border-surface-300 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-950
+        text-surface-700 dark:text-surface-0
+}
+
+.p-terminal-prompt {
+    @apply flex items-center
+}
+
+.p-terminal-prompt-value {
+    @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base
+}
+
+.p-terminal-prompt-label {
+    @apply me-1
+}
+
+.p-terminal-input::-ms-clear {
+    @apply hidden
+}
diff --git a/apps/labs/assets/styles/primevue/textarea.css b/apps/labs/assets/styles/primevue/textarea.css
new file mode 100644
index 000000000..c5bb8fac5
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/textarea.css
@@ -0,0 +1,38 @@
+.p-textarea {
+    @apply appearance-none rounded-md
+        border border-surface-300 dark:border-surface-700
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        bg-surface-0 dark:bg-surface-950
+        text-surface-700 dark:text-surface-0
+        disabled:bg-surface-200 disabled:text-surface-500 disabled:opacity-100 dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        px-3 py-2
+        transition-colors duration-200
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        outline-none
+}
+
+.p-textarea.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-textarea.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-textarea-fluid {
+    @apply w-full
+}
+
+.p-textarea-resizable {
+    @apply overflow-hidden resize-none
+}
+
+.p-textarea-sm {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-textarea-lg {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
diff --git a/apps/labs/assets/styles/primevue/tieredmenu.css b/apps/labs/assets/styles/primevue/tieredmenu.css
new file mode 100644
index 000000000..900dea161
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/tieredmenu.css
@@ -0,0 +1,105 @@
+.p-tieredmenu {
+    @apply bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700
+        rounded-md min-w-52
+}
+
+.p-tieredmenu-root-list,
+.p-tieredmenu-submenu {
+    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
+}
+
+.p-tieredmenu-submenu {
+    @apply absolute min-w-full z-10 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-tieredmenu-item {
+    @apply relative
+}
+
+.p-tieredmenu-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-tieredmenu-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-tieredmenu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-tieredmenu-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item-active > .p-tieredmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-tieredmenu-overlay {
+    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-tieredmenu-enter-from,
+.p-tieredmenu-leave-active {
+    @apply opacity-0
+}
+
+.p-tieredmenu-enter-active {
+    @apply transition-opacity duration-[250ms]
+}
+
+.p-tieredmenu-mobile .p-tieredmenu-submenu {
+    @apply static shadow-none border-none ps-4 pe-0
+}
+
+.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
+    @apply transition-transform duration-200 rotate-90
+}
+
+.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
+    @apply -rotate-90
+}
diff --git a/apps/labs/assets/styles/primevue/timeline.css b/apps/labs/assets/styles/primevue/timeline.css
new file mode 100644
index 000000000..4d00cd472
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/timeline.css
@@ -0,0 +1,113 @@
+.p-timeline {
+    @apply flex flex-col flex-grow
+}
+
+.p-timeline-left .p-timeline-event-opposite {
+    @apply text-end
+}
+
+.p-timeline-left .p-timeline-event-content {
+    @apply text-start
+}
+
+.p-timeline-right .p-timeline-event {
+    @apply flex-row-reverse
+}
+
+.p-timeline-right .p-timeline-event-opposite {
+    @apply text-start
+}
+
+.p-timeline-right .p-timeline-event-content {
+    @apply text-end
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
+    @apply flex-row-reverse
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+    @apply text-end
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+    @apply text-start
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+    @apply text-start
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
+    @apply text-end
+}
+
+.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline-vertical .p-timeline-event-content {
+    @apply py-0 px-4 leading-none
+}
+
+.p-timeline-vertical .p-timeline-event-connector {
+    @apply w-[2px]
+}
+
+.p-timeline-event {
+    @apply flex relative min-h-20 last:min-h-0
+}
+
+.p-timeline-event-opposite {
+    @apply flex-1
+}
+
+.p-timeline-event-content {
+    @apply flex-1
+}
+
+.p-timeline-event-separator {
+    @apply flex-none flex flex-col items-center
+}
+
+.p-timeline-event-marker {
+    @apply inline-flex items-center justify-center relative self-baseline
+        border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem]
+        bg-surface-0 dark:bg-surface-900
+        before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary
+        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
+}
+
+.p-timeline-event-connector {
+    @apply flex-grow bg-surface-200 dark:bg-surface-700
+}
+
+.p-timeline-horizontal {
+    @apply flex-row
+}
+
+.p-timeline-horizontal .p-timeline-event {
+    @apply flex-col flex-1
+}
+
+.p-timeline-horizontal .p-timeline-event:last-child {
+    @apply flex-none
+}
+
+.p-timeline-horizontal .p-timeline-event-separator {
+    @apply flex-row
+}
+
+.p-timeline-horizontal .p-timeline-event-connector {
+    @apply w-full h-[2px]
+}
+
+.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline-horizontal .p-timeline-event-content {
+    @apply py-4 px-0
+}
+
+.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
+    @apply flex-col-reverse
+}
+
+.p-timeline-bottom .p-timeline-event {
+    @apply flex-col-reverse
+}
diff --git a/apps/labs/assets/styles/primevue/toast.css b/apps/labs/assets/styles/primevue/toast.css
new file mode 100644
index 000000000..c2b013f86
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/toast.css
@@ -0,0 +1,172 @@
+.p-toast {
+    @apply w-96 rounded-md whitespace-pre-line break-words
+}
+
+.p-toast-message {
+    @apply mb-4
+}
+
+.p-toast-message-icon {
+    @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]
+}
+
+.p-toast-message-content {
+    @apply flex items-start p-3 gap-2
+}
+
+.p-toast-message-text {
+    @apply flex-auto flex flex-col gap-2
+}
+
+.p-toast-summary {
+    @apply font-medium text-base
+}
+
+.p-toast-detail {
+    @apply font-medium text-sm
+}
+
+.p-toast-close-button {
+    @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none
+        transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -end-1/4 p-0 border-none
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+}
+
+.p-toast-close-button:dir(rtl) {
+    @apply ms-auto end-auto
+}
+
+.p-toast-message-info,
+.p-toast-message-success,
+.p-toast-message-warn,
+.p-toast-message-error,
+.p-toast-message-secondary,
+.p-toast-message-contrast {
+    @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md
+}
+
+.p-toast-close-icon {
+    @apply text-base w-4 h-4
+}
+
+.p-toast-message-info {
+    @apply bg-blue-50/95 border-blue-200 text-blue-600
+        dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-toast-message-info .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-info .p-toast-close-button {
+    @apply hover:bg-blue-100 focus-visible:outline-blue-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
+}
+
+.p-toast-message-success {
+    @apply bg-green-50/95 border-green-200 text-green-600
+        dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500
+        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
+}
+
+.p-toast-message-success .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-success .p-toast-close-button {
+    @apply hover:bg-green-100 focus-visible:outline-green-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
+}
+
+.p-toast-message-warn {
+    @apply bg-yellow-50/95 border-yellow-200 text-yellow-600
+        dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500
+        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
+}
+
+.p-toast-message-warn .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-warn .p-toast-close-button {
+    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
+}
+
+.p-toast-message-error {
+    @apply bg-red-50/95 border-red-200 text-red-600
+        dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-toast-message-error .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-error .p-toast-close-button {
+    @apply hover:bg-red-100 focus-visible:outline-red-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
+}
+
+.p-toast-message-secondary {
+    @apply bg-surface-100 border-surface-200 text-surface-600
+        dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300
+        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-toast-message-secondary .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-secondary .p-toast-close-button {
+    @apply hover:bg-surface-200 focus-visible:outline-surface-600
+        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
+}
+
+.p-toast-message-contrast {
+    @apply bg-surface-900 border-surface-950 text-surface-50
+        dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950
+        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-toast-message-contrast .p-toast-detail {
+    @apply text-surface-0 dark:text-surface-950
+}
+
+.p-toast-message-contrast .p-toast-close-button {
+    @apply hover:bg-surface-800 focus-visible:outline-surface-50
+        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
+}
+
+.p-toast-top-center {
+    @apply -translate-x-1/2;
+}
+
+.p-toast-bottom-center {
+    @apply -translate-x-1/2;
+}
+
+.p-toast-center {
+    @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2
+}
+
+.p-toast-message-enter-from {
+    @apply opacity-0 translate-y-1/2
+}
+
+.p-toast-message-leave-from {
+    @apply max-h-[1000px]
+}
+
+.p-toast .p-toast-message.p-toast-message-leave-to {
+    @apply max-h-0 opacity-0 mb-0 overflow-hidden
+}
+
+.p-toast-message-enter-active {
+    @apply [transition:transform_0.3s,opacity_0.3s]
+}
+
+.p-toast-message-leave-active {
+    @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]
+}
diff --git a/apps/labs/assets/styles/primevue/togglebutton.css b/apps/labs/assets/styles/primevue/togglebutton.css
new file mode 100644
index 000000000..0961add9b
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/togglebutton.css
@@ -0,0 +1,63 @@
+.p-togglebutton {
+    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
+        border border-surface-100 dark:border-surface-950 rounded-md
+        bg-surface-100 dark:bg-surface-950
+        text-surface-500 dark:text-surface-400 text-base font-medium
+        px-4 py-2
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        disabled:opacity-100 disabled:cursor-default
+        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500
+        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400
+        transition-colors duration-300
+        before:bg-transparent before:absolute before:start-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]
+        before:transition-colors before:duration-200
+}
+
+.p-togglebutton-content {
+    @apply relative inline-flex items-center justify-center gap-2
+}
+
+.p-togglebutton-label,
+.p-togglebutton-icon {
+    @apply relative transition-none
+}
+
+.p-togglebutton.p-togglebutton-checked::before {
+    @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
+    @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300
+}
+
+.p-togglebutton.p-togglebutton-checked {
+    @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0
+}
+
+.p-togglebutton.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-togglebutton-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
+    @apply text-surface-700 dark:text-surface-300
+}
+
+.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
+    @apply text-surface-900 dark:text-surface-0
+}
+
+.p-togglebutton:disabled .p-togglebutton-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-togglebutton-sm {
+    @apply text-sm px-[0.75rem] py-[0.375rem]
+}
+
+.p-togglebutton-lg {
+    @apply text-lg px-[1.25rem] py-[0.625rem]
+}
diff --git a/apps/labs/assets/styles/primevue/toggleswitch.css b/apps/labs/assets/styles/primevue/toggleswitch.css
new file mode 100644
index 000000000..ea4a9dc05
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/toggleswitch.css
@@ -0,0 +1,66 @@
+.p-toggleswitch {
+    @apply inline-block w-10 h-6
+}
+
+.p-toggleswitch-input {
+    @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 start-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]
+}
+
+.p-toggleswitch-slider {
+    @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        bg-surface-300 dark:bg-surface-700
+        border border-transparent
+        transition-colors duration-200
+}
+
+.p-toggleswitch-handle {
+    @apply absolute top-1/2 flex justify-center items-center
+        bg-surface-0 dark:bg-surface-400
+        text-surface-500 dark:text-surface-900
+        w-4 h-4 start-1 -mt-2 rounded-full
+        transition-[background,color,left] duration-200
+}
+
+.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
+    @apply bg-primary
+}
+
+.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary start-5
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
+    @apply bg-surface-400 dark:bg-surface-600
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {
+    @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
+    @apply bg-primary-emphasis
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-toggleswitch.p-disabled {
+    @apply opacity-100
+}
+
+.p-toggleswitch.p-disabled .p-toggleswitch-slider {
+    @apply bg-surface-200 dark:bg-surface-600
+}
+
+.p-toggleswitch.p-disabled .p-toggleswitch-handle {
+    @apply bg-surface-700 dark:bg-surface-900
+}
diff --git a/apps/labs/assets/styles/primevue/toolbar.css b/apps/labs/assets/styles/primevue/toolbar.css
new file mode 100644
index 000000000..b5c1238cd
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/toolbar.css
@@ -0,0 +1,12 @@
+.p-toolbar {
+    @apply flex items-center justify-between flex-wrap p-3 gap-2
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700 rounded-md
+}
+
+.p-toolbar-start,
+.p-toolbar-center,
+.p-toolbar-end {
+    @apply flex items-center
+}
\ No newline at end of file
diff --git a/apps/labs/assets/styles/primevue/tooltip.css b/apps/labs/assets/styles/primevue/tooltip.css
new file mode 100644
index 000000000..a7aac7224
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/tooltip.css
@@ -0,0 +1,38 @@
+.p-tooltip {
+    @apply absolute hidden max-w-48
+}
+
+.p-tooltip-right,
+.p-tooltip-left {
+    @apply py-0 px-1
+}
+
+.p-tooltip-top,
+.p-tooltip-bottom {
+    @apply py-1 px-0
+}
+
+.p-tooltip-text {
+    @apply whitespace-pre-line break-words  bg-surface-700 text-surface-0 py-2 px-3
+        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-tooltip-arrow {
+    @apply absolute w-0 h-0 border-solid border-transparent
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    @apply -mt-1 border-[.25rem] border-s-0 border-e-surface-700 rtl:rotate-180
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    @apply -mt-1 border-[.25rem] border-e-0 border-s-surface-700 rtl:rotate-180
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    @apply -ms-1 border-[.25rem] border-b-0 border-t-surface-700
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    @apply -ms-1 border-[.25rem] border-t-0 border-b-surface-700
+}
diff --git a/apps/labs/assets/styles/primevue/tree.css b/apps/labs/assets/styles/primevue/tree.css
new file mode 100644
index 000000000..933f1e196
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/tree.css
@@ -0,0 +1,103 @@
+.p-tree {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 p-4
+}
+
+.p-tree-root-children,
+.p-tree-node-children {
+    @apply flex flex-col list-none m-0 gap-[2px]
+}
+
+.p-tree-root-children {
+    @apply pt-[2px] pb-0 px-0
+}
+
+.p-tree-node-children {
+    @apply pt-[2px] pe-0 pb-0 ps-4
+}
+
+.p-tree-node {
+    @apply p-0 outline-none
+}
+
+.p-tree-node-content {
+    @apply rounded-md px-2 py-1 flex items-center text-surface-700 dark:text-surface-0 gap-1 transition-colors duration-200
+}
+
+.p-tree-node:focus-visible > .p-tree-node-content {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
+    @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-tree-node-content.p-tree-node-selected {
+    @apply bg-highlight
+}
+
+.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {
+    @apply text-inherit
+}
+
+.p-tree-node-toggle-button {
+    @apply cursor-pointer select-none inline-flex justify-center rounded-full items-center overflow-hidden relative flex-shrink-0
+        w-7 h-7 p-0 transition-colors duration-200 border-none
+        bg-transparent enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-800
+        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-600 dark:enabled:hover:text-surface-300
+}
+
+.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary
+}
+
+.p-tree-root {
+    @apply overflow-auto
+}
+
+.p-tree-node-selectable {
+    @apply cursor-pointer select-none
+}
+
+.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {
+    @apply invisible
+}
+
+.p-tree-node-icon {
+    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
+}
+
+.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {
+    @apply text-primary
+}
+
+.p-tree-filter {
+    @apply mb-2
+}
+
+.p-tree-filter-input {
+    @apply w-full
+}
+
+.p-tree-loading {
+    @apply relative h-full
+}
+
+.p-tree-loading-icon {
+    @apply text-[2rem] h-8 w-8
+}
+
+.p-tree .p-tree-mask {
+    @apply absolute z-10 flex items-center justify-center
+}
+
+.p-tree-flex-scrollable {
+    @apply flex flex-1 h-full flex-col
+}
+
+.p-tree-flex-scrollable .p-tree-root {
+    @apply flex-1
+}
diff --git a/apps/labs/assets/styles/primevue/treeselect.css b/apps/labs/assets/styles/primevue/treeselect.css
new file mode 100644
index 000000000..6c3576e23
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/treeselect.css
@@ -0,0 +1,116 @@
+@import './chip';
+@import './tree';
+
+.p-treeselect {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-treeselect:not(.p-disabled):hover {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-treeselect:not(.p-disabled).p-focus {
+    @apply border-primary
+}
+
+.p-treeselect.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-treeselect.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-treeselect.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-treeselect-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-e-md
+}
+
+.p-treeselect-clear-icon {
+    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
+}
+
+.p-treeselect-label-container {
+    @apply overflow-hidden flex-auto
+}
+
+.p-treeselect-label {
+    @apply flex items-center gap-1 whitespace-nowrap text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0
+}
+
+.p-treeselect-label.p-placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-treeselect.p-disabled .p-treeselect-label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-treeselect-label-empty {
+    @apply overflow-hidden invisible
+}
+
+.p-treeselect .p-treeselect-overlay {
+    @apply min-w-full
+}
+
+.p-treeselect-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+
+.p-treeselect-tree-container {
+    @apply overflow-auto
+}
+
+.p-treeselect-empty-message {
+    @apply px-3 py-2
+}
+
+.p-treeselect-fluid {
+    @apply flex
+}
+
+.p-treeselect-overlay .p-tree {
+    @apply p-1
+}
+
+.p-treeselect-overlay .p-tree-loading {
+    @apply min-h-12
+}
+
+.p-treeselect-label .p-chip {
+    @apply pt-1 pb-1 rounded-sm
+}
+
+.p-treeselect-label:has(.p-chip) {
+    @apply py-1 px-1
+}
+
+.p-treeselect-sm .p-treeselect-label {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-treeselect-sm .p-treeselect-dropdown .p-icon {
+    @apply text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-treeselect-lg .p-treeselect-label {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-treeselect-lg .p-treeselect-dropdown .p-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}
diff --git a/apps/labs/assets/styles/primevue/treetable.css b/apps/labs/assets/styles/primevue/treetable.css
new file mode 100644
index 000000000..a9c014240
--- /dev/null
+++ b/apps/labs/assets/styles/primevue/treetable.css
@@ -0,0 +1,300 @@
+@import './paginator';
+
+.p-treetable {
+    @apply relative
+}
+
+.p-treetable-table {
+    @apply border-spacing-0 w-full
+}
+
+.p-treetable-scrollable > .p-treetable-table-container {
+    @apply relative
+}
+
+.p-treetable-scrollable-table > .p-treetable-thead {
+    @apply top-0 z-10
+}
+
+.p-treetable-scrollable-table > .p-treetable-frozen-tbody {
+    @apply sticky z-10
+}
+
+.p-treetable-scrollable-table>.p-treetable-tfoot {
+    @apply bottom-0 z-10
+}
+
+.p-treetable-scrollable .p-treetable-frozen-column {
+    @apply sticky bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-scrollable th.p-treetable-frozen-column {
+    @apply z-10
+}
+
+.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {
+    @apply bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot  {
+    @apply bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-flex-scrollable {
+    @apply flex flex-col h-full
+}
+
+.p-treetable-flex-scrollable > .p-treetable-table-container {
+    @apply flex flex-col flex-1 h-full
+}
+
+.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header {
+    @apply sticky z-10
+}
+
+.p-treetable-resizable-table > .p-treetable-thead > tr > th,
+.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,
+.p-treetable-resizable-table > .p-treetable-tbody > tr > td {
+    @apply overflow-hidden whitespace-nowrap
+}
+
+.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {
+    @apply bg-clip-padding relative
+}
+
+.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer {
+    @apply hidden
+}
+
+.p-treetable-column-resizer {
+    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
+}
+
+.p-treetable-column-header-content {
+    @apply flex items-center gap-2
+}
+
+.p-treetable-column-resize-indicator {
+    @apply w-px absolute z-10 hidden bg-primary
+}
+
+.p-treetable-mask {
+    @apply absolute flex items-center justify-center z-20
+}
+
+.p-treetable-paginator-top {
+    @apply border-b border-surface-200 dark:border-surface-700
+}
+
+.p-treetable-paginator-bottom {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-treetable-header {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-footer {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-header-cell {
+    @apply py-3 px-4 font-normal text-start transition-colors duration-200
+        border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-column-title {
+    @apply font-semibold
+}
+
+.p-treetable-tbody > tr {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
+}
+
+.p-treetable-tbody > tr > td {
+    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
+}
+
+.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected {
+    @apply bg-highlight
+}
+
+.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-treetable-tbody > tr:focus-visible,
+.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {
+    @apply outline outline-1 -outline-offset-1 outline-primary
+}
+
+.p-treetable-tfoot > tr > td {
+    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-column-footer {
+    @apply font-semibold
+}
+
+.p-treetable-sortable-column {
+    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
+}
+
+.p-treetable-column-title,
+.p-treetable-sort-icon,
+.p-treetable-sort-badge {
+    @apply align-middle
+}
+
+.p-treetable-sort-icon {
+    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
+}
+
+.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-treetable-column-sorted {
+    @apply bg-highlight
+}
+
+.p-treetable-column-sorted .p-treetable-sort-icon {
+    @apply bg-highlight
+}
+
+.p-treetable-hoverable .p-treetable-selectable-row {
+    @apply cursor-pointer
+}
+
+.p-treetable-loading-icon {
+    @apply text-[2rem] w-8 h-8
+}
+
+.p-treetable-gridlines .p-treetable-header {
+    @apply border-t border-x
+}
+
+.p-treetable-gridlines .p-treetable-footer {
+    @apply border-b border-x
+}
+
+.p-treetable-gridlines .p-treetable-paginator-top {
+    @apply border-t border-x
+}
+
+.p-treetable-gridlines .p-treetable-paginator-bottom {
+    @apply border-b border-x
+}
+
+.p-treetable-gridlines .p-treetable-thead > tr > th {
+    @apply border-t border-x last:border
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr > td {
+    @apply border-t border-s last:border-r
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
+    @apply border-y border-s last:border
+}
+
+.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+    @apply border-y border-s last:border
+}
+
+.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {
+    @apply border-b border-s last:border-r
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {
+    @apply border-b border-s last:border-r
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {
+    @apply border-x
+}
+
+.p-treetable.p-treetable-sm .p-treetable-header {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-footer {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-lg .p-treetable-header {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-footer {
+    @apply py-4 px-5
+}
+
+.p-treetable-body-cell-content {
+    @apply flex items-center gap-2
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button {
+    @apply text-inherit
+}
+
+.p-treetable-node-toggle-button {
+    @apply inline-flex items-center justify-center overflow-hidden relative select-none
+        transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer
+        enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900
+        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary
+}
+
+.p-treetable-node-toggle-icon:dir(rtl) {
+    @apply rotate-180
+}
diff --git a/apps/labs/assets/styles/tailwind.css b/apps/labs/assets/styles/tailwind.css
new file mode 100644
index 000000000..57c6c2a8a
--- /dev/null
+++ b/apps/labs/assets/styles/tailwind.css
@@ -0,0 +1,4 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "./primevue/tailwind.css";
+@import "tailwindcss/utilities";
\ No newline at end of file
diff --git a/apps/labs/components/app/AppConfigurator.vue b/apps/labs/components/app/AppConfigurator.vue
new file mode 100644
index 000000000..132d461a4
--- /dev/null
+++ b/apps/labs/components/app/AppConfigurator.vue
@@ -0,0 +1,175 @@
+<template>
+    <div class="config-panel hidden">
+        <div class="config-panel-content">
+            <div class="config-panel-colors">
+                <span class="config-panel-label">Primary</span>
+                <div>
+                    <button
+                        v-for="primaryColor of primaryColors"
+                        :key="primaryColor.name"
+                        type="button"
+                        @click="updateColors('primary', primaryColor)"
+                        :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
+                        :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette[500]}` }"
+                    ></button>
+                </div>
+            </div>
+            <div class="config-panel-colors">
+                <span class="config-panel-label">Surface</span>
+                <div>
+                    <button
+                        v-for="surface of surfaces"
+                        :key="surface.name"
+                        type="button"
+                        @click="updateColors('surface', surface)"
+                        :class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : $appState.darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                        :style="{ backgroundColor: `${surface.palette[500]}` }"
+                    ></button>
+                </div>
+            </div>
+            <div class="flex">
+                <div class="flex-1">
+                    <div class="config-panel-settings">
+                        <span class="config-panel-label">Ripple</span>
+                        <ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
+                    </div>
+                </div>
+                <div class="flex-1">
+                    <div class="config-panel-settings items-end">
+                        <span class="config-panel-label">RTL</span>
+                        <ToggleSwitch v-model="isRTL" @update:modelValue="onRTLChange" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+
+export default {
+    data() {
+        return {
+            primaryColors: [
+                { name: 'noir', palette: {} },
+                { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
+                { name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } },
+                { name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } },
+                { name: 'orange', palette: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' } },
+                { name: 'amber', palette: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' } },
+                { name: 'yellow', palette: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' } },
+                { name: 'teal', palette: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' } },
+                { name: 'cyan', palette: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' } },
+                { name: 'sky', palette: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' } },
+                { name: 'blue', palette: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' } },
+                { name: 'indigo', palette: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' } },
+                { name: 'violet', palette: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' } },
+                { name: 'purple', palette: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' } },
+                { name: 'fuchsia', palette: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' } },
+                { name: 'pink', palette: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' } },
+                { name: 'rose', palette: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' } }
+            ],
+            surfaces: [
+                {
+                    name: 'slate',
+                    palette: { 0: '#ffffff', 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' }
+                },
+                {
+                    name: 'gray',
+                    palette: { 0: '#ffffff', 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' }
+                },
+                {
+                    name: 'zinc',
+                    palette: { 0: '#ffffff', 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' }
+                },
+                {
+                    name: 'neutral',
+                    palette: { 0: '#ffffff', 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' }
+                },
+                {
+                    name: 'stone',
+                    palette: { 0: '#ffffff', 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
+                },
+                {
+                    name: 'soho',
+                    palette: { 0: '#ffffff', 50: '#f4f4f4', 100: '#e8e9e9', 200: '#d2d2d4', 300: '#bbbcbe', 400: '#a5a5a9', 500: '#8e8f93', 600: '#77787d', 700: '#616268', 800: '#4a4b52', 900: '#34343d', 950: '#1d1e27' }
+                },
+                {
+                    name: 'viva',
+                    palette: { 0: '#ffffff', 50: '#f3f3f3', 100: '#e7e7e8', 200: '#cfd0d0', 300: '#b7b8b9', 400: '#9fa1a1', 500: '#87898a', 600: '#6e7173', 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', 950: '#0e1315' }
+                },
+                {
+                    name: 'ocean',
+                    palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
+                }
+            ],
+            isRTL: false
+        };
+    },
+    methods: {
+        updateColors(type, color) {
+            if (type === 'primary') {
+                this.$appState.primary = color.name;
+
+                if (color.name === 'noir') {
+                    document.documentElement.classList.add('p-noir');
+                    document.documentElement.style.setProperty('--logo-color', 'var(--text-secondary-color)');
+
+                    this.applyTheme(
+                        type,
+                        this.surfaces.find((s) => s.name === this.$appState.surface)
+                    );
+                } else {
+                    document.documentElement.classList.remove('p-noir');
+                    document.documentElement.style.setProperty('--logo-color', 'var(--primary-color)');
+
+                    this.applyTheme(type, color);
+                }
+            } else if (type === 'surface') {
+                this.$appState.surface = color.name;
+                this.applyTheme(type, color);
+            }
+
+            EventBus.emit('theme-palette-change');
+        },
+        applyTheme(type, color) {
+            Object.keys(color.palette).forEach((key) => {
+                document.documentElement.style.setProperty(`--p-${type}-${key}`, color.palette[key]);
+            });
+        },
+        onRippleChange(value) {
+            this.$primevue.config.ripple = value;
+        },
+        onRTLChange(value) {
+            if (!document.startViewTransition) {
+                this.toggleRTL();
+
+                return;
+            }
+
+            document.startViewTransition(() => this.toggleRTL(value));
+        },
+        toggleRTL(value) {
+            const htmlElement = document.documentElement;
+
+            if (value) {
+                htmlElement.setAttribute('dir', 'rtl');
+            } else {
+                htmlElement.removeAttribute('dir');
+            }
+        }
+    },
+    computed: {
+        rippleActive() {
+            return this.$primevue.config.ripple;
+        },
+        selectedPrimaryColor() {
+            return this.$appState.primary;
+        },
+        selectedSurfaceColor() {
+            return this.$appState.surface;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/app/AppFooter.vue b/apps/labs/components/app/AppFooter.vue
new file mode 100755
index 000000000..92d434d53
--- /dev/null
+++ b/apps/labs/components/app/AppFooter.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="layout-footer">
+        <div>
+            <span>PrimeVue {{ version }} by </span>
+            <a href="https://www.primetek.com.tr" target="_blank" rel="noopener noreferrer">PrimeTek</a>
+        </div>
+    </div>
+</template>
+
+<script>
+import pkg from '@/package.json';
+
+export default {
+    data() {
+        return {
+            version: pkg.version
+        };
+    }
+};
+</script>
diff --git a/apps/labs/components/app/AppMenu.vue b/apps/labs/components/app/AppMenu.vue
new file mode 100755
index 000000000..31655209a
--- /dev/null
+++ b/apps/labs/components/app/AppMenu.vue
@@ -0,0 +1,27 @@
+<template>
+    <aside class="layout-sidebar" :class="{ active: active }">
+        <nav>
+            <ol class="layout-menu">
+                <AppMenuItem :menu="menu"></AppMenuItem>
+            </ol>
+        </nav>
+    </aside>
+</template>
+
+<script>
+import menudata from '@/assets/data/menu.json';
+
+export default {
+    props: {
+        active: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            menu: menudata.data
+        };
+    }
+};
+</script>
diff --git a/apps/labs/components/app/AppMenuItem.vue b/apps/labs/components/app/AppMenuItem.vue
new file mode 100644
index 000000000..ce0e675fa
--- /dev/null
+++ b/apps/labs/components/app/AppMenuItem.vue
@@ -0,0 +1,57 @@
+<template>
+    <li v-for="(menuitem, index) in menu" :key="`_root${index}`">
+        <button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown', leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }" type="button">
+            <span class="menu-icon">
+                <i :class="menuitem.icon"></i>
+            </span>
+            <span>{{ menuitem.name }}</span>
+            <i class="menu-toggle-icon pi pi-angle-down"></i>
+        </button>
+
+        <a v-if="menuitem.href" :href="menuitem.href" target="_blank" rel="noopener noreferrer">
+            <span v-if="menuitem.icon && root" class="menu-icon">
+                <i :class="menuitem.icon"></i>
+            </span>
+            <span>{{ menuitem.name }}</span>
+            <Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
+        </a>
+
+        <PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
+            <span v-if="menuitem.icon && root" class="menu-icon">
+                <i :class="menuitem.icon"></i>
+            </span>
+            <span>{{ menuitem.name }}</span>
+            <Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
+        </PrimeVueNuxtLink>
+
+        <span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>
+        <div v-if="menuitem.children" :class="{ hidden: menuitem.children && root && isActiveRootmenuItem(menuitem) }">
+            <ol>
+                <AppMenuItem :root="false" :menu="menuitem.children"></AppMenuItem>
+            </ol>
+        </div>
+    </li>
+</template>
+
+<script>
+export default {
+    props: {
+        root: {
+            type: Boolean,
+            default: true
+        },
+        menu: {
+            type: Object,
+            default: null
+        }
+    },
+    methods: {
+        isActiveRootmenuItem(menuitem) {
+            return (
+                menuitem.children &&
+                !menuitem.children.some((item) => item.to === `/${this.$router.currentRoute.value?.name?.replaceAll('-', '/')}` || (item.children && item.children.some((it) => it.to === `/${this.$router.currentRoute.value.name}`)))
+            );
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/app/AppNews.vue b/apps/labs/components/app/AppNews.vue
new file mode 100644
index 000000000..76c5d3eae
--- /dev/null
+++ b/apps/labs/components/app/AppNews.vue
@@ -0,0 +1,48 @@
+<template>
+    <div v-if="$appState.newsActive" class="layout-news">
+        <div class="layout-news-container">
+            <i></i>
+            <div class="layout-news-content">
+                <span class="layout-news-text">{{ $appState.announcement.content }}</span>
+                <a v-if="$appState.announcement.linkHref" class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
+            </div>
+            <a class="layout-news-close" @click="onClose">
+                <span class="pi pi-times"></span>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import News from '@/assets/data/news.json';
+
+export default {
+    mounted() {
+        const itemString = localStorage.getItem(this.$appState.storageKey);
+
+        if (itemString) {
+            const item = JSON.parse(itemString);
+
+            if (!item.hiddenNews || item.hiddenNews !== News.id) {
+                this.$appState.newsActive = true;
+                this.$appState.announcement = News;
+            } else {
+                this.$appState.newsActive = false;
+            }
+        } else {
+            this.$appState.announcement = News;
+            this.$appState.newsActive = true;
+        }
+    },
+    methods: {
+        onClose() {
+            this.$appState.newsActive = false;
+            const item = {
+                hiddenNews: this.$appState.announcement.id
+            };
+
+            localStorage.setItem(this.$appState.storageKey, JSON.stringify(item));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/app/AppTopBar.vue b/apps/labs/components/app/AppTopBar.vue
new file mode 100755
index 000000000..cc35a712f
--- /dev/null
+++ b/apps/labs/components/app/AppTopBar.vue
@@ -0,0 +1,178 @@
+<template>
+    <div :ref="containerRef" class="layout-topbar">
+        <div class="layout-topbar-inner">
+            <div class="layout-topbar-logo-container">
+                <PrimeVueNuxtLink to="/" class="layout-topbar-logo" aria-label="PrimeVue logo">
+                    <svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M128.062 32C128.438 32 128.656 31.8125 128.75 31.4375L134.031 7.6875C134.125 7.25 133.938 7 133.469 7H130.5C130.125 7 129.906 7.1875 129.812 7.5625L126.5 24.3125L123.219 7.5625C123.125 7.1875 122.906 7 122.531 7H119.562C119.094 7 118.906 7.25 119 7.6875L124.25 31.4375C124.344 31.8125 124.562 32 124.938 32H128.062ZM144.562 32C147.5 32 149.062 30.4375 149.062 27.5V7.625C149.062 7.28125 148.781 7 148.438 7H145.562C145.219 7 144.938 7.28125 144.938 7.625V26.625C144.938 27.4688 144.5 27.875 143.688 27.875H142.062C141.25 27.875 140.812 27.4688 140.812 26.625V7.625C140.812 7.28125 140.531 7 140.188 7H137.188C136.844 7 136.562 7.28125 136.562 7.625V27.5C136.562 30.4375 138.125 32 141.062 32H144.562ZM164.656 31.5C164.656 31.8125 164.531 32 164.156 32H152.656C152.375 32 152.188 31.8125 152.188 31.5V7.5C152.188 7.1875 152.375 7 152.656 7H164.156C164.531 7 164.656 7.1875 164.656 7.5V10.625C164.656 10.9375 164.531 11.1562 164.156 11.1562H156.344V17.4062H162.312C162.625 17.4062 162.812 17.5938 162.812 17.9375V21.0312C162.812 21.375 162.625 21.5625 162.312 21.5625H156.344V27.875H164.156C164.531 27.875 164.656 28.0312 164.656 28.375V31.5Z"
+                            fill="var(--logo-color)"
+                        />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M48.0938 32C48.4375 32 48.5938 31.8125 48.5938 31.5V23.625H52.3438C55.2812 23.625 56.8438 22.0312 56.8438 19.125V11.5C56.8438 8.5625 55.2812 7 52.3438 7H44.8438C44.5312 7 44.3438 7.1875 44.3438 7.5V31.5C44.3438 31.8125 44.5312 32 44.8438 32H48.0938ZM51.3438 19.5H48.5938V11.125H51.3438C52.1875 11.125 52.5938 11.5625 52.5938 12.375V18.25C52.5938 19.0312 52.1875 19.5 51.3438 19.5ZM63.9062 31.5C63.9062 31.8125 63.7188 32 63.4062 32H60.1562C59.8438 32 59.6562 31.8125 59.6562 31.5V7.5C59.6562 7.1875 59.8438 7 60.1562 7H68C70.9375 7 72.5 8.5625 72.5 11.5V19.125C72.5 21.2188 71.7188 22.5938 70.2188 23.25L72.375 31.4375C72.4688 31.8125 72.2812 32 71.9375 32H68.6875C68.375 32 68.2188 31.8438 68.1562 31.5625L66.0625 23.625H63.9062V31.5ZM67 19.5H63.9062V11.125H67C67.8125 11.125 68.25 11.5625 68.25 12.375V18.25C68.25 19.0625 67.8125 19.5 67 19.5ZM79.875 31.5C79.875 31.8125 79.6875 32 79.375 32H76.125C75.7812 32 75.625 31.8125 75.625 31.5V7.5C75.625 7.1875 75.7812 7 76.125 7H79.375C79.6875 7 79.875 7.1875 79.875 7.5V31.5ZM86.5 32C86.9062 32 87.125 31.7812 87.125 31.375V17.3125H87.3438L90.4375 31.4375C90.5312 31.8125 90.75 32 91.125 32H92.6562C93.0312 32 93.25 31.8125 93.3438 31.4375L96.4375 17.3125H96.6562V31.375C96.6562 31.7812 96.875 32 97.2812 32H100.188C100.594 32 100.812 31.7812 100.812 31.375V7.625C100.812 7.21875 100.594 7 100.188 7H96.0625C95.6875 7 95.4688 7.1875 95.375 7.5625L91.9062 23.125L88.4375 7.5625C88.3438 7.1875 88.125 7 87.75 7H83.625C83.2188 7 83 7.21875 83 7.625V31.375C83 31.7812 83.2188 32 83.625 32H86.5ZM116.406 31.5C116.406 31.8125 116.281 32 115.906 32H104.406C104.125 32 103.938 31.8125 103.938 31.5V7.5C103.938 7.1875 104.125 7 104.406 7H115.906C116.281 7 116.406 7.1875 116.406 7.5V10.625C116.406 10.9375 116.281 11.1562 115.906 11.1562H108.094V17.4062H114.062C114.375 17.4062 114.562 17.5938 114.562 17.9375V21.0312C114.562 21.375 114.375 21.5625 114.062 21.5625H108.094V27.875H115.906C116.281 27.875 116.406 28.0312 116.406 28.375V31.5Z"
+                            fill="var(--high-contrast-text-color)"
+                        />
+                        <path d="M25.5739 18.0458L22.8661 17.4443L24.9722 20.4519V29.7756L32.193 23.7603V13.5344L28.8835 14.7374L25.5739 18.0458Z" fill="var(--logo-color)" />
+                        <path d="M8.72522 18.0458L11.433 17.4443L9.32696 20.4519V29.7756L2.10609 23.7603V13.5344L5.41565 14.7374L8.72522 18.0458Z" fill="var(--logo-color)" />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M10.2296 21.0534L12.6365 17.4443L14.1409 18.3466H20.1582L21.6626 17.4443L24.0696 21.0534V34.5878L22.2643 37.2947L20.1582 39.4H14.1409L12.0348 37.2947L10.2296 34.5878V21.0534Z"
+                            fill="var(--logo-color)"
+                        />
+                        <path d="M24.9722 35.4901L28.8835 31.5802V27.6702L24.9722 30.9786V35.4901Z" fill="var(--logo-color)" />
+                        <path d="M9.32697 35.4901L5.41566 31.5802V27.6702L9.32697 30.9786V35.4901Z" fill="var(--logo-color)" />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M21.0609 0H20.1583V5.7988L21.8141 1.78842L21.0609 0ZM19.5762 7.20849L18.9548 7.51908V0H17.7513V11.6281L19.5762 7.20849ZM17.7513 14.2483L22.3605 3.08549L23.4678 5.7145L19.8574 17.1435H17.7513V14.2483ZM16.5478 11.6718V0H15.3443V7.51908L14.8434 7.26869L16.5478 11.6718ZM14.1409 5.45385V0H13.2383L12.6085 1.49519L14.1409 5.45385ZM12.0497 2.82181L16.5478 14.4419V17.1435H14.7426L10.8313 5.7145L12.0497 2.82181Z"
+                            fill="var(--high-contrast-text-color)"
+                        />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M1.80522 12.3313L14.7426 17.1435H15.0435L11.1322 5.71452L0 4.81223L1.80522 12.3313ZM32.7948 12.3313L19.8574 17.1435H19.5565L23.167 5.71452L34.6 4.81223L32.7948 12.3313Z"
+                            fill="var(--logo-color)"
+                        />
+                        <path d="M24.0696 4.81221L30.3878 4.21069L26.1757 0H21.9635L24.0696 4.81221Z" fill="var(--high-contrast-text-color)" />
+                        <path d="M10.2295 4.81221L3.91129 4.21069L8.12346 0H12.3356L10.2295 4.81221Z" fill="var(--high-contrast-text-color)" />
+                        <path d="M4.70001 5.20001L11.2 5.70001L15.1 17.15H14.7L10.5 15.6L4.70001 5.20001Z" fill="var(--high-contrast-text-color)" />
+                        <path d="M29.8 5.20001L23.1 5.70001L19.4 17.15L19.9 17.14L23.8 15.7L29.8 5.20001Z" fill="var(--high-contrast-text-color)" />
+                        <path d="M12.1 18.2L12.6 17.4L14.3 18.2H20.3L21.6 17.4L22.2 18.2L17.15 26.8L12.1 18.2Z" fill="var(--high-contrast-text-color)" />
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--logo-color)" />
+                    </svg>
+                </PrimeVueNuxtLink>
+                <PrimeVueNuxtLink to="/" class="layout-topbar-icon" aria-label="PrimeVue logo">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--logo-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="var(--high-contrast-text-color)"
+                        />
+                    </svg>
+                </PrimeVueNuxtLink>
+            </div>
+
+            <ul class="topbar-items">
+                <li v-if="false">
+                    <div id="docsearch"></div>
+                </li>
+                <li>
+                    <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-github"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-discord"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-comments"></i>
+                    </a>
+                </li>
+                <li>
+                    <button type="button" class="topbar-item" @click="toggleDarkMode">
+                        <i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
+                    </button>
+                </li>
+                <li class="relative">
+                    <button
+                        v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
+                        type="button"
+                        class="topbar-item config-item"
+                    >
+                        <i class="pi pi-palette"></i>
+                    </button>
+                    <AppConfigurator />
+                </li>
+                <li v-if="showMenuButton" class="menu-button">
+                    <button type="button" class="topbar-item menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
+                        <i class="pi pi-bars"></i>
+                    </button>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+
+export default {
+    emits: ['menubutton-click'],
+    props: {
+        showMenuButton: {
+            type: Boolean,
+            default: true
+        }
+    },
+    scrollListener: null,
+    container: null,
+    mounted() {
+        this.bindScrollListener();
+    },
+    beforeUnmount() {
+        if (this.scrollListener) {
+            this.unbindScrollListener();
+        }
+    },
+    methods: {
+        onMenuButtonClick(event) {
+            this.$emit('menubutton-click', event);
+        },
+        toggleDarkMode() {
+            EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
+        },
+        bindScrollListener() {
+            if (!this.scrollListener) {
+                if (this.container) {
+                    this.scrollListener = () => {
+                        if (window.scrollY > 0) this.container.classList.add('layout-topbar-sticky');
+                        else this.container.classList.remove('layout-topbar-sticky');
+                    };
+                }
+            }
+
+            window.addEventListener('scroll', this.scrollListener);
+        },
+        unbindScrollListener() {
+            if (this.scrollListener) {
+                window.removeEventListener('scroll', this.scrollListener);
+                this.scrollListener = null;
+            }
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.isOutsideTopbarMenuClicked(event)) {
+                        this.unbindOutsideClickListener();
+                    }
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        isOutsideTopbarMenuClicked(event) {
+            return !(this.$refs.topbarMenu.isSameNode(event.target) || this.$refs.topbarMenu.contains(event.target));
+        },
+        containerRef(el) {
+            this.container = el;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/app/PrimeVueNuxtLink.js b/apps/labs/components/app/PrimeVueNuxtLink.js
new file mode 100644
index 000000000..2c6c87796
--- /dev/null
+++ b/apps/labs/components/app/PrimeVueNuxtLink.js
@@ -0,0 +1,4 @@
+export default defineNuxtLink({
+    componentName: 'PrimeVueNuxtLink',
+    trailingSlash: 'append'
+});
diff --git a/apps/labs/components/demo/DeferredDemo.vue b/apps/labs/components/demo/DeferredDemo.vue
new file mode 100644
index 000000000..b9f08e60e
--- /dev/null
+++ b/apps/labs/components/demo/DeferredDemo.vue
@@ -0,0 +1,78 @@
+<template>
+    <div v-if="!visible">
+        <div class="card">
+            <div class="deferred-demo-loading"></div>
+        </div>
+    </div>
+    <slot v-else></slot>
+</template>
+
+<script>
+export default {
+    name: 'DeferredDemo',
+    emits: ['load'],
+    props: {
+        options: {
+            type: Object,
+            default: null
+        }
+    },
+    data() {
+        return {
+            visible: false
+        };
+    },
+    observer: null,
+    timeout: null,
+    mounted() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            clearTimeout(this.timeout);
+
+            if (entry.isIntersecting) {
+                this.timeout = setTimeout(() => {
+                    this.visible = true;
+                    this.observer.unobserve(this.$el);
+                    this.$emit('load');
+                }, 350);
+            }
+        }, this.options);
+
+        this.observer.observe(this.$el);
+    },
+    beforeUnmount() {
+        !this.visible && this.$el && this.observer?.unobserve(this.$el);
+        clearTimeout(this.timeout);
+    }
+};
+</script>
+<style>
+.deferred-demo-loading {
+    border-radius: 10px;
+    height: 350px;
+    position: relative;
+    overflow: hidden;
+}
+
+.deferred-demo-loading::after {
+    content: '';
+    animation: deferred-demo-loading 1.2s infinite;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    transform: translateX(-100%);
+    z-index: 1;
+    border-radius: 10px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--p-surface-100), rgba(255, 255, 255, 0));
+}
+
+@keyframes deferred-demo-loading {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+</style>
diff --git a/apps/labs/components/doc/DocComponent.vue b/apps/labs/components/doc/DocComponent.vue
new file mode 100644
index 000000000..4ee4085f8
--- /dev/null
+++ b/apps/labs/components/doc/DocComponent.vue
@@ -0,0 +1,66 @@
+<template>
+    <div :class="['doc-component', className]">
+        <Head>
+            <Title>Tailwind CSS | {{ title }}</Title>
+            <Meta name="description" :content="'Tailwind CSS | ' + description" />
+        </Head>
+
+        <ul class="doc-tabmenu">
+            <li :class="{ 'doc-tabmenu-active': tab === 0 }">
+                <button type="button" @click="tab = 0">FEATURES</button>
+            </li>
+            <li :class="{ 'doc-tabmenu-active': tab === 1 }">
+                <button type="button" @click="tab = 1">THEMING</button>
+            </li>
+        </ul>
+
+        <div class="doc-tabpanels">
+            <div v-show="tab === 0" class="doc-tabpanel">
+                <div class="doc-main">
+                    <div class="doc-intro">
+                        <h1>{{ header }}</h1>
+                        <p>
+                            <span>{{ description }}</span>
+                        </p>
+                        <div class="pt-3 flex gap-2">
+                            <a
+                                :href="`https://primevue.org/${apiLink}`"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                            ></a>
+                            <a
+                                :href="`https://primevue.org/${ptLink}`"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                            ></a>
+                        </div>
+                    </div>
+                    <DocSections :docs="componentDocs" />
+                </div>
+                <DocSectionNav :docs="componentDocs" />
+            </div>
+
+            <div v-if="tab === 1" class="doc-tabpanel">
+                <DocPreset :presetKey="presetDoc?.key" :introText="`${header} Styles`" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['title', 'header', 'description', 'componentDocs', 'className', 'presetDoc', 'apiLink', 'ptLink'],
+    data() {
+        return {
+            tab: 0
+        };
+    },
+    mounted() {
+        this.tab = this.$route.hash.includes('presets') ? 1 : 0;
+    }
+};
+</script>
diff --git a/apps/labs/components/doc/DocPreset.vue b/apps/labs/components/doc/DocPreset.vue
new file mode 100644
index 000000000..018277d3a
--- /dev/null
+++ b/apps/labs/components/doc/DocPreset.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>{{ introText }}</h1>
+        </div>
+        <div class="xl:pe-72 -mt-4">
+            <DocSections :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import DocPresetSection from './DocPresetSection.vue';
+
+export default {
+    props: {
+        presetKey: {
+            type: [String, Array],
+            default: undefined
+        },
+        introText: {
+            type: String,
+            default: undefined
+        }
+    },
+    data() {
+        const common = {
+            component: DocPresetSection,
+            data: {
+                presetKey: this.presetKey
+            }
+        };
+
+        return {
+            docs: [
+                {
+                    id: 'presets.aura',
+                    label: 'Aura',
+                    ...common
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/components/doc/DocPresetSection.vue b/apps/labs/components/doc/DocPresetSection.vue
new file mode 100644
index 000000000..d135de370
--- /dev/null
+++ b/apps/labs/components/doc/DocPresetSection.vue
@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-if="false" v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+import Aura from '@/doc/common/presetdoc/index.json';
+import { isArray } from '@primeuix/utils/object';
+
+export default {
+    data() {
+        const preset = Aura;
+        const presetKey = this.$attrs?.data?.presetKey ?? '';
+        const keys = isArray(presetKey) ? presetKey : [presetKey];
+
+        const basicCode = `\n${preset[keys]}`;
+
+        return {
+            code: {
+                basic: `${basicCode}\n`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/components/doc/DocSectionCode.vue b/apps/labs/components/doc/DocSectionCode.vue
new file mode 100644
index 000000000..d9c6ed75e
--- /dev/null
+++ b/apps/labs/components/doc/DocSectionCode.vue
@@ -0,0 +1,153 @@
+<template>
+    <div v-if="!embedded" class="doc-section-code">
+        <div class="doc-section-code-buttons">
+            <template v-if="codeMode !== 'basic' && !hideToggleCode">
+                <button :class="['py-0 px-2 rounded-md h-8', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
+                <button :class="['py-0 px-2 rounded-md h-8', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
+            </template>
+
+            <template v-if="!hideToggleCode">
+                <button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-8 w-8 p-0 inline-flex items-center justify-center">
+                    <i class="pi pi-code"></i>
+                </button>
+            </template>
+
+            <template v-if="!hideToggleCode && code.data">
+                <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-8 w-8 p-0 inline-flex items-center justify-center">
+                    <i class="pi pi-database"></i>
+                </button>
+            </template>
+
+            <template v-if="!hideCodeSandbox">
+                <button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="h-8 w-8 p-0 inline-flex items-center justify-center" @click="showCodesandbox">
+                    <svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
+                        <path
+                            d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
+                        />
+                    </svg>
+                </button>
+            </template>
+
+            <template v-if="!hideStackBlitz">
+                <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-8 w-8 p-0 inline-flex items-center justify-center" @click="showStackblitz">
+                    <svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
+                        <path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
+                    </svg>
+                </button>
+            </template>
+
+            <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-8 w-8 p-0 inline-flex items-center justify-center">
+                <i class="pi pi-copy"></i>
+            </button>
+        </div>
+
+        <div dir="ltr">
+            <template v-if="codeMode === 'basic' && importCode">
+                <pre v-code.script><code>{{ code.basic }}
+</code></pre>
+            </template>
+
+            <template v-if="codeMode === 'basic' && !importCode">
+                <pre v-code><code>{{ code.basic }}
+</code></pre>
+            </template>
+
+            <template v-if="codeMode !== 'basic' && codeLang === 'options'">
+                <pre v-code><code>{{ code.options }}
+</code></pre>
+            </template>
+
+            <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
+                <pre v-code><code>{{ code.composition }}
+</code></pre>
+            </template>
+
+            <template v-if="codeMode !== 'basic' && codeLang === 'data'">
+                <pre v-code.json><code>{{ code.data }}
+</code></pre>
+            </template>
+        </div>
+    </div>
+    <div v-else id="embed"></div>
+</template>
+
+<script>
+import { useCodeSandbox, useStackBlitz } from './codeeditor';
+
+export default {
+    inheritAttrs: false,
+    props: {
+        code: {
+            type: null,
+            default: null
+        },
+        service: {
+            type: Array,
+            default: null
+        },
+        hideToggleCode: {
+            type: Boolean,
+            default: false
+        },
+        hideCodeSandbox: {
+            type: Boolean,
+            default: true
+        },
+        hideStackBlitz: {
+            type: Boolean,
+            default: true
+        },
+        dependencies: {
+            type: null,
+            default: null
+        },
+        component: {
+            type: String,
+            default: null
+        },
+        extFiles: {
+            type: null,
+            default: null
+        },
+        importCode: {
+            type: Boolean,
+            default: false
+        },
+        embedded: {
+            type: Boolean,
+            default: false
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            codeMode: 'basic',
+            codeLang: this.code['options'] ? 'composition' : 'basic'
+        };
+    },
+    mounted() {
+        this.embedded && useStackBlitz(this.codeLang, this.code['composition'], this.service, this.code.pages, this.dependencies, this.component, this.extFiles, this.embedded);
+    },
+    methods: {
+        toggleCodeMode(content) {
+            this.codeMode = this.codeMode === 'basic' ? content : 'basic';
+        },
+        onToggleData() {
+            this.toggleCodeMode('data');
+            this.codeLang = 'data';
+        },
+        async copyCode() {
+            await navigator.clipboard.writeText(this.code[this.codeLang]);
+        },
+        showCodesandbox() {
+            useCodeSandbox(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
+        },
+        showStackblitz() {
+            useStackBlitz(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/doc/DocSectionNav.vue b/apps/labs/components/doc/DocSectionNav.vue
new file mode 100644
index 000000000..9f47b7b28
--- /dev/null
+++ b/apps/labs/components/doc/DocSectionNav.vue
@@ -0,0 +1,127 @@
+<template>
+    <ul ref="nav" class="doc-section-nav">
+        <li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
+            <div class="navbar-item-content">
+                <button @click="onButtonClick(doc)">{{ doc.label }}</button>
+            </div>
+
+            <template v-if="doc.children">
+                <ul>
+                    <li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
+                        <div class="navbar-item-content">
+                            <button @click="onButtonClick(child)">
+                                {{ child.label }}
+                            </button>
+                        </div>
+                    </li>
+                </ul>
+            </template>
+        </li>
+    </ul>
+</template>
+
+<script>
+import { findSingle, getHeight, getOffset, getWindowScrollTop, isVisible } from '@primeuix/utils/dom';
+import { isNotEmpty } from '@primeuix/utils/object';
+
+export default {
+    props: ['docs'],
+    data() {
+        return {
+            activeId: null,
+            isScrollBlocked: false,
+            scrollEndTimer: null,
+            topbarHeight: 0
+        };
+    },
+    watch: {
+        '$route.hash'() {
+            this.scrollCurrentUrl();
+        }
+    },
+    mounted() {
+        this.scrollCurrentUrl();
+
+        window.addEventListener('scroll', this.onScroll, { passive: true });
+    },
+    beforeUnmount() {
+        window.removeEventListener('scroll', this.onScroll, { passive: true });
+    },
+    methods: {
+        onScroll() {
+            if (!this.isScrollBlocked) {
+                const labels = [...document.querySelectorAll(':is(h1,h2,h3).doc-section-label')].filter((el) => isVisible(el));
+
+                const windowScrollTop = getWindowScrollTop();
+
+                labels.forEach((label) => {
+                    const { top } = getOffset(label);
+                    const threshold = this.getThreshold(label);
+
+                    if (top - threshold <= windowScrollTop) {
+                        const link = findSingle(label, 'a');
+
+                        this.activeId = link.id;
+                    }
+                });
+            }
+
+            clearTimeout(this.scrollEndTimer);
+            this.scrollEndTimer = setTimeout(() => {
+                this.isScrollBlocked = false;
+
+                const activeItem = findSingle(this.$refs.nav, '.active-navbar-item');
+
+                activeItem && activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }, 50);
+        },
+        scrollToLabelById(id, behavior = 'smooth') {
+            const label = document.getElementById(id);
+
+            label && label.parentElement.scrollIntoView({ block: 'start', behavior });
+        },
+        onButtonClick(doc) {
+            this.$router.push(`${this.checkRouteName}/#${doc.id}`);
+            setTimeout(() => {
+                this.activeId = doc.id;
+                this.scrollToLabelById(doc.id, 'smooth');
+                this.isScrollBlocked = true;
+            }, 1);
+        },
+        getThreshold(label) {
+            if (!this.topbarHeight) {
+                const topbar = findSingle(document.body, '.layout-topbar');
+
+                this.topbarHeight = topbar ? getHeight(topbar) : 0;
+            }
+
+            return this.topbarHeight + getHeight(label) * 1.5;
+        },
+        getIdOfTheSection(section) {
+            return section.querySelector('a').getAttribute('id');
+        },
+        scrollCurrentUrl() {
+            const hash = window.location.hash.substring(1);
+            const hasHash = isNotEmpty(hash);
+            const id = hasHash ? hash : (this.docs[0] || {}).id;
+
+            this.activeId = id;
+            hasHash &&
+                setTimeout(() => {
+                    this.scrollToLabelById(id);
+                }, 1);
+        }
+    },
+    computed: {
+        checkRouteName() {
+            const path = this.$router.currentRoute.value.path;
+
+            if (path.lastIndexOf('/') === path.length - 1) {
+                return path.slice(0, -1);
+            }
+
+            return path;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/doc/DocSectionText.vue b/apps/labs/components/doc/DocSectionText.vue
new file mode 100644
index 000000000..3e49b2780
--- /dev/null
+++ b/apps/labs/components/doc/DocSectionText.vue
@@ -0,0 +1,47 @@
+<template>
+    <component :is="headerTag" class="doc-section-label">
+        {{ $attrs.label }}
+        <NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink>
+    </component>
+    <div v-if="$attrs" class="doc-section-description">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    inheritAttrs: false,
+    methods: {
+        onClick(event) {
+            const parentElement = event.currentTarget.parentElement;
+            const hash = window.location.hash.substring(1);
+
+            hash === this.$attrs.id && event.preventDefault();
+
+            setTimeout(() => {
+                parentElement.scrollIntoView({ block: 'start' });
+            }, 0);
+        }
+    },
+    computed: {
+        checkRouteName() {
+            const path = this.$router.currentRoute.value.path;
+
+            if (path.lastIndexOf('/') === path.length - 1) {
+                return path.slice(0, -1);
+            }
+
+            return path;
+        },
+        headerTag() {
+            if (this.$attrs.level === 3) {
+                return 'h4';
+            } else if (this.$attrs.level === 2) {
+                return 'h3';
+            }
+
+            return 'h2';
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/doc/DocSections.vue b/apps/labs/components/doc/DocSections.vue
new file mode 100644
index 000000000..0417a2989
--- /dev/null
+++ b/apps/labs/components/doc/DocSections.vue
@@ -0,0 +1,26 @@
+<template>
+    <template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
+        <section class="py-6">
+            <template v-if="doc.children">
+                <div :id="doc.id">
+                    <DocSectionText :id="doc.id" :label="doc.label">
+                        <p v-if="doc.description">{{ doc.description }}</p>
+                    </DocSectionText>
+                </div>
+                <template v-for="comp of doc.children" :key="comp.label">
+                    <component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" />
+                </template>
+            </template>
+
+            <template v-else-if="!doc.children && doc.component">
+                <component :is="{ ...doc.component }" :id="doc.id" :label="doc.label" :data="doc.data" :description="doc.description" />
+            </template>
+        </section>
+    </template>
+</template>
+
+<script>
+export default {
+    props: ['docs']
+};
+</script>
diff --git a/apps/labs/components/doc/codeeditor/index.js b/apps/labs/components/doc/codeeditor/index.js
new file mode 100644
index 000000000..e27288179
--- /dev/null
+++ b/apps/labs/components/doc/codeeditor/index.js
@@ -0,0 +1,68 @@
+import sdk from '@stackblitz/sdk';
+import { getVueApp } from './templates';
+
+const useCodeSandbox = (language, code, service, extPages, dependencies, component, extFiles) => {
+    const getSandboxParameters = (sourceType) => {
+        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles }, sourceType);
+
+        files['sandbox.config.json'] = {
+            content: {
+                infiniteLoopProtection: false
+            }
+        };
+
+        return { files, dependenciesDemo, sourceFileName };
+    };
+
+    const sandboxParameters = getSandboxParameters({ language });
+
+    fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
+        },
+        body: JSON.stringify(sandboxParameters)
+    })
+        .then((response) => response.json())
+        .then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));
+};
+
+const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles, embedded = false) => {
+    const getStackBlitzParameters = (sourceType) => {
+        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles, embedded }, sourceType);
+
+        return { files, dependenciesDemo, sourceFileName };
+    };
+
+    const stackBlitzParameters = getStackBlitzParameters({ language });
+
+    let files = {};
+
+    Object.entries(stackBlitzParameters.files).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content));
+
+    const primevueproject = {
+        title: embedded ? 'PrimeVue Tailwind Demo' : 'PrimeVue Demo',
+        template: 'node',
+        description: embedded
+            ? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
+            : '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
+        dependencies: stackBlitzParameters.dependencies,
+        files
+    };
+
+    if (embedded) {
+        sdk.embedProject('embed', primevueproject, {
+            openFile: 'src/main.js',
+            view: 'default',
+            height: '800px'
+        });
+    } else {
+        sdk.openProject(primevueproject, {
+            newWindow: true,
+            openFile: [stackBlitzParameters.sourceFileName]
+        });
+    }
+};
+
+export { useCodeSandbox, useStackBlitz };
diff --git a/apps/labs/components/doc/codeeditor/services.js b/apps/labs/components/doc/codeeditor/services.js
new file mode 100644
index 000000000..768889f96
--- /dev/null
+++ b/apps/labs/components/doc/codeeditor/services.js
@@ -0,0 +1,11108 @@
+const services = {
+    CarService: `export const CarService = {
+    brands: ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'],
+
+    colors: ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'],
+
+    generateCar(id) {
+        return {
+            id,
+            vin: this.generateVin(),
+            brand: this.generateBrand(),
+            color: this.generateColor(),
+            year: this.generateYear()
+        };
+    },
+
+    generateVin() {
+        let text = '';
+        let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (let i = 0; i < 5; i++) {
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+
+        return text;
+    },
+
+    generateBrand() {
+        return this.brands[Math.floor(Math.random() * Math.floor(10))];
+    },
+
+    generateColor() {
+        return this.colors[Math.floor(Math.random() * Math.floor(7))];
+    },
+
+    generateYear() {
+        return 2000 + Math.floor(Math.random() * Math.floor(19));
+    }
+};
+    `,
+    CountryService: `export const CountryService = {
+    getData() {
+        return [
+            { name: 'Afghanistan', code: 'AF' },
+            { name: 'Albania', code: 'AL' },
+            { name: 'Algeria', code: 'DZ' },
+            { name: 'American Samoa', code: 'AS' },
+            { name: 'Andorra', code: 'AD' },
+            { name: 'Angola', code: 'AO' },
+            { name: 'Anguilla', code: 'AI' },
+            { name: 'Antarctica', code: 'AQ' },
+            { name: 'Antigua and Barbuda', code: 'AG' },
+            { name: 'Argentina', code: 'AR' },
+            { name: 'Armenia', code: 'AM' },
+            { name: 'Aruba', code: 'AW' },
+            { name: 'Australia', code: 'AU' },
+            { name: 'Austria', code: 'AT' },
+            { name: 'Azerbaijan', code: 'AZ' },
+            { name: 'Bahamas', code: 'BS' },
+            { name: 'Bahrain', code: 'BH' },
+            { name: 'Bangladesh', code: 'BD' },
+            { name: 'Barbados', code: 'BB' },
+            { name: 'Belarus', code: 'BY' },
+            { name: 'Belgium', code: 'BE' },
+            { name: 'Belize', code: 'BZ' },
+            { name: 'Benin', code: 'BJ' },
+            { name: 'Bermuda', code: 'BM' },
+            { name: 'Bhutan', code: 'BT' },
+            { name: 'Bolivia', code: 'BO' },
+            { name: 'Bosnia and Herzegovina', code: 'BA' },
+            { name: 'Botswana', code: 'BW' },
+            { name: 'Bouvet Island', code: 'BV' },
+            { name: 'Brazil', code: 'BR' },
+            { name: 'British Indian Ocean Territory', code: 'IO' },
+            { name: 'Brunei Darussalam', code: 'BN' },
+            { name: 'Bulgaria', code: 'BG' },
+            { name: 'Burkina Faso', code: 'BF' },
+            { name: 'Burundi', code: 'BI' },
+            { name: 'Cambodia', code: 'KH' },
+            { name: 'Cameroon', code: 'CM' },
+            { name: 'Canada', code: 'CA' },
+            { name: 'Cape Verde', code: 'CV' },
+            { name: 'Cayman Islands', code: 'KY' },
+            { name: 'Central African Republic', code: 'CF' },
+            { name: 'Chad', code: 'TD' },
+            { name: 'Chile', code: 'CL' },
+            { name: 'China', code: 'CN' },
+            { name: 'Christmas Island', code: 'CX' },
+            { name: 'Cocos (Keeling) Islands', code: 'CC' },
+            { name: 'Colombia', code: 'CO' },
+            { name: 'Comoros', code: 'KM' },
+            { name: 'Congo', code: 'CG' },
+            { name: 'Congo, The Democratic Republic of the', code: 'CD' },
+            { name: 'Cook Islands', code: 'CK' },
+            { name: 'Costa Rica', code: 'CR' },
+            { name: 'Cote D"Ivoire', code: 'CI' },
+            { name: 'Croatia', code: 'HR' },
+            { name: 'Cuba', code: 'CU' },
+            { name: 'Cyprus', code: 'CY' },
+            { name: 'Czech Republic', code: 'CZ' },
+            { name: 'Denmark', code: 'DK' },
+            { name: 'Djibouti', code: 'DJ' },
+            { name: 'Dominica', code: 'DM' },
+            { name: 'Dominican Republic', code: 'DO' },
+            { name: 'Ecuador', code: 'EC' },
+            { name: 'Egypt', code: 'EG' },
+            { name: 'El Salvador', code: 'SV' },
+            { name: 'Equatorial Guinea', code: 'GQ' },
+            { name: 'Eritrea', code: 'ER' },
+            { name: 'Estonia', code: 'EE' },
+            { name: 'Ethiopia', code: 'ET' },
+            { name: 'Falkland Islands (Malvinas)', code: 'FK' },
+            { name: 'Faroe Islands', code: 'FO' },
+            { name: 'Fiji', code: 'FJ' },
+            { name: 'Finland', code: 'FI' },
+            { name: 'France', code: 'FR' },
+            { name: 'French Guiana', code: 'GF' },
+            { name: 'French Polynesia', code: 'PF' },
+            { name: 'French Southern Territories', code: 'TF' },
+            { name: 'Gabon', code: 'GA' },
+            { name: 'Gambia', code: 'GM' },
+            { name: 'Georgia', code: 'GE' },
+            { name: 'Germany', code: 'DE' },
+            { name: 'Ghana', code: 'GH' },
+            { name: 'Gibraltar', code: 'GI' },
+            { name: 'Greece', code: 'GR' },
+            { name: 'Greenland', code: 'GL' },
+            { name: 'Grenada', code: 'GD' },
+            { name: 'Guadeloupe', code: 'GP' },
+            { name: 'Guam', code: 'GU' },
+            { name: 'Guatemala', code: 'GT' },
+            { name: 'Guernsey', code: 'GG' },
+            { name: 'Guinea', code: 'GN' },
+            { name: 'Guinea-Bissau', code: 'GW' },
+            { name: 'Guyana', code: 'GY' },
+            { name: 'Haiti', code: 'HT' },
+            { name: 'Heard Island and Mcdonald Islands', code: 'HM' },
+            { name: 'Holy See (Vatican City State)', code: 'VA' },
+            { name: 'Honduras', code: 'HN' },
+            { name: 'Hong Kong', code: 'HK' },
+            { name: 'Hungary', code: 'HU' },
+            { name: 'Iceland', code: 'IS' },
+            { name: 'India', code: 'IN' },
+            { name: 'Indonesia', code: 'ID' },
+            { name: 'Iran, Islamic Republic Of', code: 'IR' },
+            { name: 'Iraq', code: 'IQ' },
+            { name: 'Ireland', code: 'IE' },
+            { name: 'Isle of Man', code: 'IM' },
+            { name: 'Israel', code: 'IL' },
+            { name: 'Italy', code: 'IT' },
+            { name: 'Jamaica', code: 'JM' },
+            { name: 'Japan', code: 'JP' },
+            { name: 'Jersey', code: 'JE' },
+            { name: 'Jordan', code: 'JO' },
+            { name: 'Kazakhstan', code: 'KZ' },
+            { name: 'Kenya', code: 'KE' },
+            { name: 'Kiribati', code: 'KI' },
+            { name: 'Korea, Democratic People"S Republic of', code: 'KP' },
+            { name: 'Korea, Republic of', code: 'KR' },
+            { name: 'Kuwait', code: 'KW' },
+            { name: 'Kyrgyzstan', code: 'KG' },
+            { name: 'Lao People"S Democratic Republic', code: 'LA' },
+            { name: 'Latvia', code: 'LV' },
+            { name: 'Lebanon', code: 'LB' },
+            { name: 'Lesotho', code: 'LS' },
+            { name: 'Liberia', code: 'LR' },
+            { name: 'Libyan Arab Jamahiriya', code: 'LY' },
+            { name: 'Liechtenstein', code: 'LI' },
+            { name: 'Lithuania', code: 'LT' },
+            { name: 'Luxembourg', code: 'LU' },
+            { name: 'Macao', code: 'MO' },
+            { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
+            { name: 'Madagascar', code: 'MG' },
+            { name: 'Malawi', code: 'MW' },
+            { name: 'Malaysia', code: 'MY' },
+            { name: 'Maldives', code: 'MV' },
+            { name: 'Mali', code: 'ML' },
+            { name: 'Malta', code: 'MT' },
+            { name: 'Marshall Islands', code: 'MH' },
+            { name: 'Martinique', code: 'MQ' },
+            { name: 'Mauritania', code: 'MR' },
+            { name: 'Mauritius', code: 'MU' },
+            { name: 'Mayotte', code: 'YT' },
+            { name: 'Mexico', code: 'MX' },
+            { name: 'Micronesia, Federated States of', code: 'FM' },
+            { name: 'Moldova, Republic of', code: 'MD' },
+            { name: 'Monaco', code: 'MC' },
+            { name: 'Mongolia', code: 'MN' },
+            { name: 'Montserrat', code: 'MS' },
+            { name: 'Morocco', code: 'MA' },
+            { name: 'Mozambique', code: 'MZ' },
+            { name: 'Myanmar', code: 'MM' },
+            { name: 'Namibia', code: 'NA' },
+            { name: 'Nauru', code: 'NR' },
+            { name: 'Nepal', code: 'NP' },
+            { name: 'Netherlands', code: 'NL' },
+            { name: 'Netherlands Antilles', code: 'AN' },
+            { name: 'New Caledonia', code: 'NC' },
+            { name: 'New Zealand', code: 'NZ' },
+            { name: 'Nicaragua', code: 'NI' },
+            { name: 'Niger', code: 'NE' },
+            { name: 'Nigeria', code: 'NG' },
+            { name: 'Niue', code: 'NU' },
+            { name: 'Norfolk Island', code: 'NF' },
+            { name: 'Northern Mariana Islands', code: 'MP' },
+            { name: 'Norway', code: 'NO' },
+            { name: 'Oman', code: 'OM' },
+            { name: 'Pakistan', code: 'PK' },
+            { name: 'Palau', code: 'PW' },
+            { name: 'Palestinian Territory, Occupied', code: 'PS' },
+            { name: 'Panama', code: 'PA' },
+            { name: 'Papua New Guinea', code: 'PG' },
+            { name: 'Paraguay', code: 'PY' },
+            { name: 'Peru', code: 'PE' },
+            { name: 'Philippines', code: 'PH' },
+            { name: 'Pitcairn', code: 'PN' },
+            { name: 'Poland', code: 'PL' },
+            { name: 'Portugal', code: 'PT' },
+            { name: 'Puerto Rico', code: 'PR' },
+            { name: 'Qatar', code: 'QA' },
+            { name: 'Reunion', code: 'RE' },
+            { name: 'Romania', code: 'RO' },
+            { name: 'Russian Federation', code: 'RU' },
+            { name: 'RWANDA', code: 'RW' },
+            { name: 'Saint Helena', code: 'SH' },
+            { name: 'Saint Kitts and Nevis', code: 'KN' },
+            { name: 'Saint Lucia', code: 'LC' },
+            { name: 'Saint Pierre and Miquelon', code: 'PM' },
+            { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+            { name: 'Samoa', code: 'WS' },
+            { name: 'San Marino', code: 'SM' },
+            { name: 'Sao Tome and Principe', code: 'ST' },
+            { name: 'Saudi Arabia', code: 'SA' },
+            { name: 'Senegal', code: 'SN' },
+            { name: 'Serbia and Montenegro', code: 'CS' },
+            { name: 'Seychelles', code: 'SC' },
+            { name: 'Sierra Leone', code: 'SL' },
+            { name: 'Singapore', code: 'SG' },
+            { name: 'Slovakia', code: 'SK' },
+            { name: 'Slovenia', code: 'SI' },
+            { name: 'Solomon Islands', code: 'SB' },
+            { name: 'Somalia', code: 'SO' },
+            { name: 'South Africa', code: 'ZA' },
+            { name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
+            { name: 'Spain', code: 'ES' },
+            { name: 'Sri Lanka', code: 'LK' },
+            { name: 'Sudan', code: 'SD' },
+            { name: 'Suriname', code: 'SR' },
+            { name: 'Svalbard and Jan Mayen', code: 'SJ' },
+            { name: 'Swaziland', code: 'SZ' },
+            { name: 'Sweden', code: 'SE' },
+            { name: 'Switzerland', code: 'CH' },
+            { name: 'Syrian Arab Republic', code: 'SY' },
+            { name: 'Taiwan, Province of China', code: 'TW' },
+            { name: 'Tajikistan', code: 'TJ' },
+            { name: 'Tanzania, United Republic of', code: 'TZ' },
+            { name: 'Thailand', code: 'TH' },
+            { name: 'Timor-Leste', code: 'TL' },
+            { name: 'Togo', code: 'TG' },
+            { name: 'Tokelau', code: 'TK' },
+            { name: 'Tonga', code: 'TO' },
+            { name: 'Trinidad and Tobago', code: 'TT' },
+            { name: 'Tunisia', code: 'TN' },
+            { name: 'Turkey', code: 'TR' },
+            { name: 'Turkmenistan', code: 'TM' },
+            { name: 'Turks and Caicos Islands', code: 'TC' },
+            { name: 'Tuvalu', code: 'TV' },
+            { name: 'Uganda', code: 'UG' },
+            { name: 'Ukraine', code: 'UA' },
+            { name: 'United Arab Emirates', code: 'AE' },
+            { name: 'United Kingdom', code: 'GB' },
+            { name: 'United States', code: 'US' },
+            { name: 'United States Minor Outlying Islands', code: 'UM' },
+            { name: 'Uruguay', code: 'UY' },
+            { name: 'Uzbekistan', code: 'UZ' },
+            { name: 'Vanuatu', code: 'VU' },
+            { name: 'Venezuela', code: 'VE' },
+            { name: 'Viet Nam', code: 'VN' },
+            { name: 'Virgin Islands, British', code: 'VG' },
+            { name: 'Virgin Islands, U.S.', code: 'VI' },
+            { name: 'Wallis and Futuna', code: 'WF' },
+            { name: 'Western Sahara', code: 'EH' },
+            { name: 'Yemen', code: 'YE' },
+            { name: 'Zambia', code: 'ZM' },
+            { name: 'Zimbabwe', code: 'ZW' }
+        ];
+    },
+
+    getCountries() {
+        return Promise.resolve(this.getData());
+    }
+};
+    `,
+    CustomerService: `export const CustomerService = {
+        getData() {
+            return [
+                {
+                    id: 1000,
+                    name: 'James Butt',
+                    country: {
+                        name: 'Algeria',
+                        code: 'dz'
+                    },
+                    company: 'Benton, John B Jr',
+                    date: '2015-09-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 17,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 70663
+                },
+                {
+                    id: 1001,
+                    name: 'Josephine Darakjy',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Chanay, Jeffrey A Esq',
+                    date: '2019-02-09',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 82429
+                },
+                {
+                    id: 1002,
+                    name: 'Art Venere',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Chemel, James L Cpa',
+                    date: '2017-05-13',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 63,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 28334
+                },
+                {
+                    id: 1003,
+                    name: 'Lenna Paprocki',
+                    country: {
+                        name: 'Slovenia',
+                        code: 'si'
+                    },
+                    company: 'Feltz Printing Service',
+                    date: '2020-09-15',
+                    status: 'new',
+                    verified: false,
+                    activity: 37,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 88521
+                },
+                {
+                    id: 1004,
+                    name: 'Donette Foller',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Printing Dimensions',
+                    date: '2016-05-20',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 33,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 93905
+                },
+                {
+                    id: 1005,
+                    name: 'Simona Morasca',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Chapman, Ross E Esq',
+                    date: '2018-02-16',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 68,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 50041
+                },
+                {
+                    id: 1006,
+                    name: 'Mitsue Tollner',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Morlong Associates',
+                    date: '2018-02-19',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 54,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 58706
+                },
+                {
+                    id: 1007,
+                    name: 'Leota Dilliard',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Commercial Press',
+                    date: '2019-08-13',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 26640
+                },
+                {
+                    id: 1008,
+                    name: 'Sage Wieser',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Truhlar And Truhlar Attys',
+                    date: '2018-11-21',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 65369
+                },
+                {
+                    id: 1009,
+                    name: 'Kris Marrier',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'King, Christopher A Esq',
+                    date: '2015-07-07',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 3,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 63451
+                },
+                {
+                    id: 1010,
+                    name: 'Minna Amigon',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Dorl, James J Esq',
+                    date: '2018-11-07',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 38,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 71169
+                },
+                {
+                    id: 1011,
+                    name: 'Abel Maclead',
+                    country: {
+                        name: 'Singapore',
+                        code: 'sg'
+                    },
+                    company: 'Rangoni Of Florence',
+                    date: '2017-03-11',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 87,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 96842
+                },
+                {
+                    id: 1012,
+                    name: 'Kiley Caldarera',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Feiner Bros',
+                    date: '2015-10-20',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 80,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 92734
+                },
+                {
+                    id: 1013,
+                    name: 'Graciela Ruta',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'Buckley Miller & Wright',
+                    date: '2016-07-25',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 59,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 45250
+                },
+                {
+                    id: 1014,
+                    name: 'Cammy Albares',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Rousseaux, Michael Esq',
+                    date: '2019-06-25',
+                    status: 'new',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 30236
+                },
+                {
+                    id: 1015,
+                    name: 'Mattie Poquette',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Century Communications',
+                    date: '2017-12-12',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 52,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 64533
+                },
+                {
+                    id: 1016,
+                    name: 'Meaghan Garufi',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Bolton, Wilbur Esq',
+                    date: '2018-07-04',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 31,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 37279
+                },
+                {
+                    id: 1017,
+                    name: 'Gladys Rim',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'T M Byxbee Company Pc',
+                    date: '2020-02-27',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 48,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 27381
+                },
+                {
+                    id: 1018,
+                    name: 'Yuki Whobrey',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Farmers Insurance Group',
+                    date: '2017-12-21',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 9257
+                },
+                {
+                    id: 1019,
+                    name: 'Fletcher Flosi',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Post Box Services Plus',
+                    date: '2016-01-04',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 19,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 67783
+                },
+                {
+                    id: 1020,
+                    name: 'Bette Nicka',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Sport En Art',
+                    date: '2016-10-21',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 100,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 4609
+                },
+                {
+                    id: 1021,
+                    name: 'Veronika Inouye',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'C 4 Network Inc',
+                    date: '2017-03-24',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 72,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 26565
+                },
+                {
+                    id: 1022,
+                    name: 'Willard Kolmetz',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Ingalls, Donald R Esq',
+                    date: '2017-04-15',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 75876
+                },
+                {
+                    id: 1023,
+                    name: 'Maryann Royster',
+                    country: {
+                        name: 'Belarus',
+                        code: 'by'
+                    },
+                    company: 'Franklin, Peter L Esq',
+                    date: '2017-03-11',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 56,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 41121
+                },
+                {
+                    id: 1024,
+                    name: 'Alisha Slusarski',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Wtlz Power 107 Fm',
+                    date: '2018-03-27',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 91691
+                },
+                {
+                    id: 1025,
+                    name: 'Allene Iturbide',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Ledecky, David Esq',
+                    date: '2016-02-20',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 1,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 40137
+                },
+                {
+                    id: 1026,
+                    name: 'Chanel Caudy',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Professional Image Inc',
+                    date: '2018-06-24',
+                    status: 'new',
+                    verified: true,
+                    activity: 26,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 21304
+                },
+                {
+                    id: 1027,
+                    name: 'Ezekiel Chui',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Sider, Donald C Esq',
+                    date: '2016-09-24',
+                    status: 'new',
+                    verified: false,
+                    activity: 76,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 60454
+                },
+                {
+                    id: 1028,
+                    name: 'Willow Kusko',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'U Pull It',
+                    date: '2020-04-11',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 17565
+                },
+                {
+                    id: 1029,
+                    name: 'Bernardo Figeroa',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Clark, Richard Cpa',
+                    date: '2018-04-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 17774
+                },
+                {
+                    id: 1030,
+                    name: 'Ammie Corrio',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Moskowitz, Barry S',
+                    date: '2016-06-11',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 56,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 49201
+                },
+                {
+                    id: 1031,
+                    name: 'Francine Vocelka',
+                    country: {
+                        name: 'Honduras',
+                        code: 'hn'
+                    },
+                    company: 'Cascade Realty Advisors Inc',
+                    date: '2017-08-02',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 67126
+                },
+                {
+                    id: 1032,
+                    name: 'Ernie Stenseth',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Knwz Newsradio',
+                    date: '2018-06-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 68,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 76017
+                },
+                {
+                    id: 1033,
+                    name: 'Albina Glick',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Giampetro, Anthony D',
+                    date: '2019-08-08',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 91201
+                },
+                {
+                    id: 1034,
+                    name: 'Alishia Sergi',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Milford Enterprises Inc',
+                    date: '2018-05-19',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 46,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 12237
+                },
+                {
+                    id: 1035,
+                    name: 'Solange Shinko',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Mosocco, Ronald A',
+                    date: '2015-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 32,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 34072
+                },
+                {
+                    id: 1036,
+                    name: 'Jose Stockham',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Tri State Refueler Co',
+                    date: '2018-04-25',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 94909
+                },
+                {
+                    id: 1037,
+                    name: 'Rozella Ostrosky',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Parkway Company',
+                    date: '2016-02-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 66,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 57245
+                },
+                {
+                    id: 1038,
+                    name: 'Valentine Gillian',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Fbs Business Finance',
+                    date: '2019-09-17',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 25,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 75502
+                },
+                {
+                    id: 1039,
+                    name: 'Kati Rulapaugh',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'Eder Assocs Consltng Engrs Pc',
+                    date: '2016-12-03',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 51,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 82075
+                },
+                {
+                    id: 1040,
+                    name: 'Youlanda Schemmer',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Tri M Tool Inc',
+                    date: '2017-12-15',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 19208
+                },
+                {
+                    id: 1041,
+                    name: 'Dyan Oldroyd',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'International Eyelets Inc',
+                    date: '2017-02-02',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 5,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 50194
+                },
+                {
+                    id: 1042,
+                    name: 'Roxane Campain',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Rapid Trading Intl',
+                    date: '2018-12-25',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 100,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 77714
+                },
+                {
+                    id: 1043,
+                    name: 'Lavera Perin',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Abc Enterprises Inc',
+                    date: '2018-04-10',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 71,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 35740
+                },
+                {
+                    id: 1044,
+                    name: 'Erick Ferencz',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Cindy Turner Associates',
+                    date: '2018-05-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 54,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 30790
+                },
+                {
+                    id: 1045,
+                    name: 'Fatima Saylors',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Stanton, James D Esq',
+                    date: '2019-07-10',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 93,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 52343
+                },
+                {
+                    id: 1046,
+                    name: 'Jina Briddick',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Grace Pastries Inc',
+                    date: '2018-02-19',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 97,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 53966
+                },
+                {
+                    id: 1047,
+                    name: 'Kanisha Waycott',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Schroer, Gene E Esq',
+                    date: '2019-11-27',
+                    status: 'new',
+                    verified: false,
+                    activity: 80,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 9920
+                },
+                {
+                    id: 1048,
+                    name: 'Emerson Bowley',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'Knights Inn',
+                    date: '2018-11-24',
+                    status: 'new',
+                    verified: false,
+                    activity: 63,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 78069
+                },
+                {
+                    id: 1049,
+                    name: 'Blair Malet',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'Bollinger Mach Shp & Shipyard',
+                    date: '2018-04-19',
+                    status: 'new',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 65005
+                },
+                {
+                    id: 1050,
+                    name: 'Brock Bolognia',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Orinda News',
+                    date: '2019-09-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 72,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 51038
+                },
+                {
+                    id: 1051,
+                    name: 'Lorrie Nestle',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Ballard Spahr Andrews',
+                    date: '2018-04-26',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 36,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 28218
+                },
+                {
+                    id: 1052,
+                    name: 'Sabra Uyetake',
+                    country: {
+                        name: 'Peru',
+                        code: 'pe'
+                    },
+                    company: 'Lowy Limousine Service',
+                    date: '2018-04-12',
+                    status: 'new',
+                    verified: false,
+                    activity: 31,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 78527
+                },
+                {
+                    id: 1053,
+                    name: 'Marjory Mastella',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Vicon Corporation',
+                    date: '2018-01-24',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 89,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 23381
+                },
+                {
+                    id: 1054,
+                    name: 'Karl Klonowski',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Rossi, Michael M',
+                    date: '2017-04-17',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 27,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 64821
+                },
+                {
+                    id: 1055,
+                    name: 'Tonette Wenner',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Northwest Publishing',
+                    date: '2019-04-14',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 27,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 55334
+                },
+                {
+                    id: 1056,
+                    name: 'Amber Monarrez',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Branford Wire & Mfg Co',
+                    date: '2019-09-09',
+                    status: 'new',
+                    verified: false,
+                    activity: 79,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 83391
+                },
+                {
+                    id: 1057,
+                    name: 'Shenika Seewald',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'East Coast Marketing',
+                    date: '2017-02-18',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 39,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 31580
+                },
+                {
+                    id: 1058,
+                    name: 'Delmy Ahle',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Wye Technologies Inc',
+                    date: '2020-10-05',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 55,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 11723
+                },
+                {
+                    id: 1059,
+                    name: 'Deeanna Juhas',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Healy, George W Iv',
+                    date: '2018-09-28',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 79,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 8454
+                },
+                {
+                    id: 1060,
+                    name: 'Blondell Pugh',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Alpenlite Inc',
+                    date: '2016-06-16',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 49,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 99235
+                },
+                {
+                    id: 1061,
+                    name: 'Jamal Vanausdal',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Hubbard, Bruce Esq',
+                    date: '2017-05-25',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 87,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 15656
+                },
+                {
+                    id: 1062,
+                    name: 'Cecily Hollack',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Arthur A Oliver & Son Inc',
+                    date: '2020-05-09',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 5,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 60586
+                },
+                {
+                    id: 1063,
+                    name: 'Carmelina Lindall',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'George Jessop Carter Jewelers',
+                    date: '2019-09-07',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 86239
+                },
+                {
+                    id: 1064,
+                    name: 'Maurine Yglesias',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Schultz, Thomas C Md',
+                    date: '2015-08-10',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 94,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 15621
+                },
+                {
+                    id: 1065,
+                    name: 'Tawna Buvens',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'H H H Enterprises Inc',
+                    date: '2018-03-20',
+                    status: 'new',
+                    verified: false,
+                    activity: 25,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 77248
+                },
+                {
+                    id: 1066,
+                    name: 'Penney Weight',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Hawaiian King Hotel',
+                    date: '2020-03-03',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 96,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 478
+                },
+                {
+                    id: 1067,
+                    name: 'Elly Morocco',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Killion Industries',
+                    date: '2018-09-18',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 62505
+                },
+                {
+                    id: 1068,
+                    name: 'Ilene Eroman',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Robinson, William J Esq',
+                    date: '2019-06-08',
+                    status: 'new',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 91480
+                },
+                {
+                    id: 1069,
+                    name: 'Vallie Mondella',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Private Properties',
+                    date: '2018-12-06',
+                    status: 'new',
+                    verified: false,
+                    activity: 16,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 21671
+                },
+                {
+                    id: 1070,
+                    name: 'Kallie Blackwood',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Rowley Schlimgen Inc',
+                    date: '2017-04-05',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 25,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 13775
+                },
+                {
+                    id: 1071,
+                    name: 'Johnetta Abdallah',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Forging Specialties',
+                    date: '2015-02-02',
+                    status: 'new',
+                    verified: false,
+                    activity: 16,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 60253
+                },
+                {
+                    id: 1072,
+                    name: 'Bobbye Rhym',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Smits, Patricia Garity',
+                    date: '2018-08-17',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 75225
+                },
+                {
+                    id: 1073,
+                    name: 'Micaela Rhymes',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'H Lee Leonard Attorney At Law',
+                    date: '2018-09-08',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 3308
+                },
+                {
+                    id: 1074,
+                    name: 'Tamar Hoogland',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'A K Construction Co',
+                    date: '2018-11-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 22,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 19711
+                },
+                {
+                    id: 1075,
+                    name: 'Moon Parlato',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Ambelang, Jessica M Md',
+                    date: '2019-08-18',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 64,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 55110
+                },
+                {
+                    id: 1076,
+                    name: 'Laurel Reitler',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Q A Service',
+                    date: '2015-04-02',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 80,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 62392
+                },
+                {
+                    id: 1077,
+                    name: 'Delisa Crupi',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Wood & Whitacre Contractors',
+                    date: '2017-09-15',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 70,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 76530
+                },
+                {
+                    id: 1078,
+                    name: 'Viva Toelkes',
+                    country: {
+                        name: 'United States',
+                        code: 'us'
+                    },
+                    company: 'Mark Iv Press Ltd',
+                    date: '2017-03-27',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 16,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 7460
+                },
+                {
+                    id: 1079,
+                    name: 'Elza Lipke',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Museum Of Science & Industry',
+                    date: '2017-06-01',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 42251
+                },
+                {
+                    id: 1080,
+                    name: 'Devorah Chickering',
+                    country: {
+                        name: 'Spain',
+                        code: 'es'
+                    },
+                    company: 'Garrison Ind',
+                    date: '2017-03-14',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 36435
+                },
+                {
+                    id: 1081,
+                    name: 'Timothy Mulqueen',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Saronix Nymph Products',
+                    date: '2018-07-09',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 39197
+                },
+                {
+                    id: 1082,
+                    name: 'Arlette Honeywell',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Smc Inc',
+                    date: '2018-09-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 72707
+                },
+                {
+                    id: 1083,
+                    name: 'Dominque Dickerson',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'E A I Electronic Assocs Inc',
+                    date: '2017-11-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 83,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 97965
+                },
+                {
+                    id: 1084,
+                    name: 'Lettie Isenhower',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Conte, Christopher A Esq',
+                    date: '2016-03-01',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 83,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 5823
+                },
+                {
+                    id: 1085,
+                    name: 'Myra Munns',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Anker Law Office',
+                    date: '2016-05-21',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 96471
+                },
+                {
+                    id: 1086,
+                    name: 'Stephaine Barfield',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Beutelschies & Company',
+                    date: '2016-01-22',
+                    status: 'new',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 33710
+                },
+                {
+                    id: 1087,
+                    name: 'Lai Gato',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Fligg, Kenneth I Jr',
+                    date: '2016-07-26',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 64,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 30611
+                },
+                {
+                    id: 1088,
+                    name: 'Stephen Emigh',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Sharp, J Daniel Esq',
+                    date: '2020-07-24',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 51,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 32960
+                },
+                {
+                    id: 1089,
+                    name: 'Tyra Shields',
+                    country: {
+                        name: 'Honduras',
+                        code: 'hn'
+                    },
+                    company: 'Assink, Anne H Esq',
+                    date: '2019-11-10',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 11,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 57423
+                },
+                {
+                    id: 1090,
+                    name: 'Tammara Wardrip',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Jewel My Shop Inc',
+                    date: '2016-06-05',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 23027
+                },
+                {
+                    id: 1091,
+                    name: 'Cory Gibes',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Chinese Translation Resources',
+                    date: '2016-02-28',
+                    status: 'new',
+                    verified: false,
+                    activity: 44,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 84182
+                },
+                {
+                    id: 1092,
+                    name: 'Danica Bruschke',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Stevens, Charles T',
+                    date: '2018-12-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 25237
+                },
+                {
+                    id: 1093,
+                    name: 'Wilda Giguere',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Mclaughlin, Luther W Cpa',
+                    date: '2017-06-16',
+                    status: 'new',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 87736
+                },
+                {
+                    id: 1094,
+                    name: 'Elvera Benimadho',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Tree Musketeers',
+                    date: '2019-02-17',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 50,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 38674
+                },
+                {
+                    id: 1095,
+                    name: 'Carma Vanheusen',
+                    country: {
+                        name: 'Turkey',
+                        code: 'tr'
+                    },
+                    company: 'Springfield Div Oh Edison Co',
+                    date: '2019-11-26',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 84,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 67762
+                },
+                {
+                    id: 1096,
+                    name: 'Malinda Hochard',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Logan Memorial Hospital',
+                    date: '2016-07-06',
+                    status: 'new',
+                    verified: false,
+                    activity: 88,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 81299
+                },
+                {
+                    id: 1097,
+                    name: 'Natalie Fern',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Kelly, Charles G Esq',
+                    date: '2019-10-02',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 44,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 64794
+                },
+                {
+                    id: 1098,
+                    name: 'Lisha Centini',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Industrial Paper Shredders Inc',
+                    date: '2018-07-05',
+                    status: 'new',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 7815
+                },
+                {
+                    id: 1099,
+                    name: 'Arlene Klusman',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Beck Horizon Builders',
+                    date: '2018-05-14',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 37976
+                },
+                {
+                    id: 1100,
+                    name: 'Alease Buemi',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Porto Cayo At Hawks Cay',
+                    date: '2018-03-14',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 59594
+                },
+                {
+                    id: 1101,
+                    name: 'Louisa Cronauer',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Pacific Grove Museum Ntrl Hist',
+                    date: '2018-09-23',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 3,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 92528
+                },
+                {
+                    id: 1102,
+                    name: 'Angella Cetta',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Bender & Hatley Pc',
+                    date: '2018-04-10',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 88,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 58964
+                },
+                {
+                    id: 1103,
+                    name: 'Cyndy Goldammer',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Di Cristina J & Son',
+                    date: '2017-09-18',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 92,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 65860
+                },
+                {
+                    id: 1104,
+                    name: 'Rosio Cork',
+                    country: {
+                        name: 'Singapore',
+                        code: 'sg'
+                    },
+                    company: 'Green Goddess',
+                    date: '2017-08-19',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 19,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 63863
+                },
+                {
+                    id: 1105,
+                    name: 'Celeste Korando',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'American Arts & Graphics',
+                    date: '2020-06-18',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 21,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 37510
+                },
+                {
+                    id: 1106,
+                    name: 'Twana Felger',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Opryland Hotel',
+                    date: '2016-11-18',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 97,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 63876
+                },
+                {
+                    id: 1107,
+                    name: 'Estrella Samu',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Marking Devices Pubg Co',
+                    date: '2017-06-25',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 27,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 93263
+                },
+                {
+                    id: 1108,
+                    name: 'Donte Kines',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'W Tc Industries Inc',
+                    date: '2019-02-16',
+                    status: 'new',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 57198
+                },
+                {
+                    id: 1109,
+                    name: 'Tiffiny Steffensmeier',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Whitehall Robbins Labs Divsn',
+                    date: '2018-03-11',
+                    status: 'new',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 89147
+                },
+                {
+                    id: 1110,
+                    name: 'Edna Miceli',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Sampler',
+                    date: '2017-10-15',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 54,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 41466
+                },
+                {
+                    id: 1111,
+                    name: 'Sue Kownacki',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Juno Chefs Incorporated',
+                    date: '2017-03-17',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 31,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 38918
+                },
+                {
+                    id: 1112,
+                    name: 'Jesusa Shin',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Carroccio, A Thomas Esq',
+                    date: '2017-04-06',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 28,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 11397
+                },
+                {
+                    id: 1113,
+                    name: 'Rolland Francescon',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Stanley, Richard L Esq',
+                    date: '2019-02-03',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 45,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 40930
+                },
+                {
+                    id: 1114,
+                    name: 'Pamella Schmierer',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'K Cs Cstm Mouldings Windows',
+                    date: '2016-09-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 40847
+                },
+                {
+                    id: 1115,
+                    name: 'Glory Kulzer',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Comfort Inn',
+                    date: '2017-09-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 36,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 27832
+                },
+                {
+                    id: 1116,
+                    name: 'Shawna Palaspas',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'Windsor, James L Esq',
+                    date: '2017-06-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 89060
+                },
+                {
+                    id: 1117,
+                    name: 'Brandon Callaro',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Jackson Shields Yeiser',
+                    date: '2016-07-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 52474
+                },
+                {
+                    id: 1118,
+                    name: 'Scarlet Cartan',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Box, J Calvin Esq',
+                    date: '2018-09-13',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 1,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 19094
+                },
+                {
+                    id: 1119,
+                    name: 'Oretha Menter',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Custom Engineering Inc',
+                    date: '2017-09-11',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 8,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 93756
+                },
+                {
+                    id: 1120,
+                    name: 'Ty Smith',
+                    country: {
+                        name: 'United States',
+                        code: 'us'
+                    },
+                    company: 'Bresler Eitel Framg Gllry Ltd',
+                    date: '2019-07-06',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 50,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 77388
+                },
+                {
+                    id: 1121,
+                    name: 'Xuan Rochin',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'Carol, Drake Sparks Esq',
+                    date: '2018-05-22',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 48759
+                },
+                {
+                    id: 1122,
+                    name: 'Lindsey Dilello',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'Biltmore Investors Bank',
+                    date: '2017-07-18',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 65,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 37568
+                },
+                {
+                    id: 1123,
+                    name: 'Devora Perez',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Desco Equipment Corp',
+                    date: '2017-10-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 4477
+                },
+                {
+                    id: 1124,
+                    name: 'Herman Demesa',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Merlin Electric Co',
+                    date: '2019-05-23',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 10,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 13764
+                },
+                {
+                    id: 1125,
+                    name: 'Rory Papasergi',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Bailey Cntl Co Div Babcock',
+                    date: '2019-03-02',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 22,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 68222
+                },
+                {
+                    id: 1126,
+                    name: 'Talia Riopelle',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'Ford Brothers Wholesale Inc',
+                    date: '2017-02-18',
+                    status: 'new',
+                    verified: false,
+                    activity: 69,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 29164
+                },
+                {
+                    id: 1127,
+                    name: 'Van Shire',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Cambridge Inn',
+                    date: '2020-05-12',
+                    status: 'new',
+                    verified: false,
+                    activity: 4,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 61651
+                },
+                {
+                    id: 1128,
+                    name: 'Lucina Lary',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Matricciani, Albert J Jr',
+                    date: '2019-11-20',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 11,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 79938
+                },
+                {
+                    id: 1129,
+                    name: 'Bok Isaacs',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'Nelson Hawaiian Ltd',
+                    date: '2016-11-10',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 41,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 44037
+                },
+                {
+                    id: 1130,
+                    name: 'Rolande Spickerman',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Neland Travel Agency',
+                    date: '2016-07-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 84,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 89918
+                },
+                {
+                    id: 1131,
+                    name: 'Howard Paulas',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Asendorf, J Alan Esq',
+                    date: '2017-07-17',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 22,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 32372
+                },
+                {
+                    id: 1132,
+                    name: 'Kimbery Madarang',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Silberman, Arthur L Esq',
+                    date: '2018-08-19',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 63,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 46478
+                },
+                {
+                    id: 1133,
+                    name: 'Thurman Manno',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'Honey Bee Breeding Genetics &',
+                    date: '2016-05-02',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 30674
+                },
+                {
+                    id: 1134,
+                    name: 'Becky Mirafuentes',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Wells Kravitz Schnitzer',
+                    date: '2018-04-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 47714
+                },
+                {
+                    id: 1135,
+                    name: 'Beatriz Corrington',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Prohab Rehabilitation Servs',
+                    date: '2020-01-04',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 14307
+                },
+                {
+                    id: 1136,
+                    name: 'Marti Maybury',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Eldridge, Kristin K Esq',
+                    date: '2016-02-05',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 3,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 82069
+                },
+                {
+                    id: 1137,
+                    name: 'Nieves Gotter',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Vlahos, John J Esq',
+                    date: '2017-03-12',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 3,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 11182
+                },
+                {
+                    id: 1138,
+                    name: 'Leatha Hagele',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Ninas Indian Grs & Videos',
+                    date: '2019-03-27',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 67,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 17126
+                },
+                {
+                    id: 1139,
+                    name: 'Valentin Klimek',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Schmid, Gayanne K Esq',
+                    date: '2019-08-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 19724
+                },
+                {
+                    id: 1140,
+                    name: 'Melissa Wiklund',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Moapa Valley Federal Credit Un',
+                    date: '2018-03-20',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 91888
+                },
+                {
+                    id: 1141,
+                    name: 'Sheridan Zane',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Kentucky Tennessee Clay Co',
+                    date: '2016-02-15',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 17,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 15016
+                },
+                {
+                    id: 1142,
+                    name: 'Bulah Padilla',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Admiral Party Rentals & Sales',
+                    date: '2016-02-10',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 58,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 23118
+                },
+                {
+                    id: 1143,
+                    name: 'Audra Kohnert',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Nelson, Karolyn King Esq',
+                    date: '2019-07-16',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 82,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 90560
+                },
+                {
+                    id: 1144,
+                    name: 'Daren Weirather',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Panasystems',
+                    date: '2015-07-23',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 96,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 34155
+                },
+                {
+                    id: 1145,
+                    name: 'Fernanda Jillson',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Shank, Edward L Esq',
+                    date: '2017-07-02',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 6350
+                },
+                {
+                    id: 1146,
+                    name: 'Gearldine Gellinger',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Megibow & Edwards',
+                    date: '2019-08-17',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 18,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 77641
+                },
+                {
+                    id: 1147,
+                    name: 'Chau Kitzman',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Benoff, Edward Esq',
+                    date: '2019-07-04',
+                    status: 'new',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 43289
+                },
+                {
+                    id: 1148,
+                    name: 'Theola Frey',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Woodbridge Free Public Library',
+                    date: '2020-03-14',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 44,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 85657
+                },
+                {
+                    id: 1149,
+                    name: 'Cheryl Haroldson',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'New York Life John Thune',
+                    date: '2018-04-03',
+                    status: 'new',
+                    verified: false,
+                    activity: 55,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 82733
+                },
+                {
+                    id: 1150,
+                    name: 'Laticia Merced',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Alinabal Inc',
+                    date: '2017-03-04',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 21,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 38004
+                },
+                {
+                    id: 1151,
+                    name: 'Carissa Batman',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Poletto, Kim David Esq',
+                    date: '2016-05-05',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 29038
+                },
+                {
+                    id: 1152,
+                    name: 'Lezlie Craghead',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Chang, Carolyn Esq',
+                    date: '2019-05-28',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 30,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 75123
+                },
+                {
+                    id: 1153,
+                    name: 'Ozell Shealy',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Silver Bros Inc',
+                    date: '2016-08-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 33214
+                },
+                {
+                    id: 1154,
+                    name: 'Arminda Parvis',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Newtec Inc',
+                    date: '2020-02-09',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 80651
+                },
+                {
+                    id: 1155,
+                    name: 'Reita Leto',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Creative Business Systems',
+                    date: '2020-04-03',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 5085
+                },
+                {
+                    id: 1156,
+                    name: 'Yolando Luczki',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Dal Tile Corporation',
+                    date: '2015-01-27',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 93021
+                },
+                {
+                    id: 1157,
+                    name: 'Lizette Stem',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'Edward S Katz',
+                    date: '2018-08-06',
+                    status: 'new',
+                    verified: false,
+                    activity: 67,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 37287
+                },
+                {
+                    id: 1158,
+                    name: 'Gregoria Pawlowicz',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Oh My Goodknits Inc',
+                    date: '2020-02-20',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 29,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 73070
+                },
+                {
+                    id: 1159,
+                    name: 'Carin Deleo',
+                    country: {
+                        name: 'China',
+                        code: 'cn'
+                    },
+                    company: 'Redeker, Debbie',
+                    date: '2015-05-28',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 13,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 64422
+                },
+                {
+                    id: 1160,
+                    name: 'Chantell Maynerich',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'Desert Sands Motel',
+                    date: '2016-09-05',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 75,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 36826
+                },
+                {
+                    id: 1161,
+                    name: 'Dierdre Yum',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Cummins Southern Plains Inc',
+                    date: '2016-12-20',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 1,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 93101
+                },
+                {
+                    id: 1162,
+                    name: 'Larae Gudroe',
+                    country: {
+                        name: 'Slovenia',
+                        code: 'si'
+                    },
+                    company: 'Lehigh Furn Divsn Lehigh',
+                    date: '2015-11-28',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 13,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 60177
+                },
+                {
+                    id: 1163,
+                    name: 'Latrice Tolfree',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'United Van Lines Agent',
+                    date: '2018-11-11',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 73,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 47198
+                },
+                {
+                    id: 1164,
+                    name: 'Kerry Theodorov',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Capitol Reporters',
+                    date: '2016-11-05',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 71305
+                },
+                {
+                    id: 1165,
+                    name: 'Dorthy Hidvegi',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Kwik Kopy Printing',
+                    date: '2020-08-13',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 60,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 17526
+                },
+                {
+                    id: 1166,
+                    name: 'Fannie Lungren',
+                    country: {
+                        name: 'Belarus',
+                        code: 'by'
+                    },
+                    company: 'Centro Inc',
+                    date: '2015-07-06',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 24,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 16596
+                },
+                {
+                    id: 1167,
+                    name: 'Evangelina Radde',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Campbell, Jan Esq',
+                    date: '2020-02-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 93,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 56870
+                },
+                {
+                    id: 1168,
+                    name: 'Novella Degroot',
+                    country: {
+                        name: 'Slovenia',
+                        code: 'si'
+                    },
+                    company: 'Evans, C Kelly Esq',
+                    date: '2017-12-19',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 30,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 82928
+                },
+                {
+                    id: 1169,
+                    name: 'Clay Hoa',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Scat Enterprises',
+                    date: '2016-02-22',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 93,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 64181
+                },
+                {
+                    id: 1170,
+                    name: 'Jennifer Fallick',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Nagle, Daniel J Esq',
+                    date: '2016-12-24',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 88,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 30561
+                },
+                {
+                    id: 1171,
+                    name: 'Irma Wolfgramm',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Serendiquity Bed & Breakfast',
+                    date: '2020-10-18',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 24617
+                },
+                {
+                    id: 1172,
+                    name: 'Eun Coody',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Ray Carolyne Realty',
+                    date: '2018-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 77860
+                },
+                {
+                    id: 1173,
+                    name: 'Sylvia Cousey',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Berg, Charles E',
+                    date: '2018-06-10',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 91,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 25664
+                },
+                {
+                    id: 1174,
+                    name: 'Nana Wrinkles',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'Ray, Milbern D',
+                    date: '2017-04-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 98,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 98113
+                },
+                {
+                    id: 1175,
+                    name: 'Layla Springe',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Chadds Ford Winery',
+                    date: '2019-07-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 97,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 14763
+                },
+                {
+                    id: 1176,
+                    name: 'Joesph Degonia',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'A R Packaging',
+                    date: '2020-04-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 56,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 31317
+                },
+                {
+                    id: 1177,
+                    name: 'Annabelle Boord',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'Corn Popper',
+                    date: '2020-09-16',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 30883
+                },
+                {
+                    id: 1178,
+                    name: 'Stephaine Vinning',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Birite Foodservice Distr',
+                    date: '2016-05-14',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 43,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 93785
+                },
+                {
+                    id: 1179,
+                    name: 'Nelida Sawchuk',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Anchorage Museum Of Hist & Art',
+                    date: '2018-06-22',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 68380
+                },
+                {
+                    id: 1180,
+                    name: 'Marguerita Hiatt',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Haber, George D Md',
+                    date: '2018-10-25',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 72,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 93454
+                },
+                {
+                    id: 1181,
+                    name: 'Carmela Cookey',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Royal Pontiac Olds Inc',
+                    date: '2018-07-19',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 24,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 30570
+                },
+                {
+                    id: 1182,
+                    name: 'Junita Brideau',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Leonards Antiques Inc',
+                    date: '2015-03-15',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 79506
+                },
+                {
+                    id: 1183,
+                    name: 'Claribel Varriano',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Meca',
+                    date: '2017-04-14',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 15,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 8654
+                },
+                {
+                    id: 1184,
+                    name: 'Benton Skursky',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Nercon Engineering & Mfg Inc',
+                    date: '2015-02-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 13368
+                },
+                {
+                    id: 1185,
+                    name: 'Hillary Skulski',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Replica I',
+                    date: '2016-03-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 82,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 92631
+                },
+                {
+                    id: 1186,
+                    name: 'Merilyn Bayless',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: '20 20 Printing Inc',
+                    date: '2020-10-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 13,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 4989
+                },
+                {
+                    id: 1187,
+                    name: 'Teri Ennaco',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Publishers Group West',
+                    date: '2019-12-21',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 77668
+                },
+                {
+                    id: 1188,
+                    name: 'Merlyn Lawler',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Nischwitz, Jeffrey L Esq',
+                    date: '2016-02-26',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 3525
+                },
+                {
+                    id: 1189,
+                    name: 'Georgene Montezuma',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Payne Blades & Wellborn Pa',
+                    date: '2018-10-11',
+                    status: 'new',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 45838
+                },
+                {
+                    id: 1190,
+                    name: 'Jettie Mconnell',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Coldwell Bnkr Wright Real Est',
+                    date: '2015-10-18',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 74,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 49148
+                },
+                {
+                    id: 1191,
+                    name: 'Lemuel Latzke',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'Computer Repair Service',
+                    date: '2016-02-13',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 79,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 96709
+                },
+                {
+                    id: 1192,
+                    name: 'Melodie Knipp',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'Fleetwood Building Block Inc',
+                    date: '2018-03-08',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 19,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 23253
+                },
+                {
+                    id: 1193,
+                    name: 'Candida Corbley',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Colts Neck Medical Assocs Inc',
+                    date: '2017-12-02',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 11,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 40836
+                },
+                {
+                    id: 1194,
+                    name: 'Karan Karpin',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'New England Taxidermy',
+                    date: '2019-01-07',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 4,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 60719
+                },
+                {
+                    id: 1195,
+                    name: 'Andra Scheyer',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Ludcke, George O Esq',
+                    date: '2016-08-14',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 17419
+                },
+                {
+                    id: 1196,
+                    name: 'Felicidad Poullion',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Mccorkle, Tom S Esq',
+                    date: '2016-03-05',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 94052
+                },
+                {
+                    id: 1197,
+                    name: 'Belen Strassner',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Eagle Software Inc',
+                    date: '2015-12-14',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 54241
+                },
+                {
+                    id: 1198,
+                    name: 'Gracia Melnyk',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Juvenile & Adult Super',
+                    date: '2019-06-01',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 40,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 87668
+                },
+                {
+                    id: 1199,
+                    name: 'Jolanda Hanafan',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Perez, Joseph J Esq',
+                    date: '2015-12-09',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 27,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 99417
+                },
+                {
+                    id: 1200,
+                    name: 'Barrett Toyama',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Case Foundation Co',
+                    date: '2019-08-16',
+                    status: 'new',
+                    verified: true,
+                    activity: 82,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 89792
+                },
+                {
+                    id: 1201,
+                    name: 'Helga Fredicks',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'Eis Environmental Engrs Inc',
+                    date: '2018-06-20',
+                    status: 'new',
+                    verified: true,
+                    activity: 33,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 42356
+                },
+                {
+                    id: 1202,
+                    name: 'Ashlyn Pinilla',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Art Crafters',
+                    date: '2018-04-11',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 5,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 90979
+                },
+                {
+                    id: 1203,
+                    name: 'Fausto Agramonte',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Marriott Hotels Resorts Suites',
+                    date: '2019-06-25',
+                    status: 'new',
+                    verified: false,
+                    activity: 22,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 45082
+                },
+                {
+                    id: 1204,
+                    name: 'Ronny Caiafa',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Remaco Inc',
+                    date: '2020-07-21',
+                    status: 'new',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 9871
+                },
+                {
+                    id: 1205,
+                    name: 'Marge Limmel',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Bjork, Robert D Jr',
+                    date: '2015-03-12',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 47043
+                },
+                {
+                    id: 1206,
+                    name: 'Norah Waymire',
+                    country: {
+                        name: 'United States',
+                        code: 'us'
+                    },
+                    company: 'Carmichael, Jeffery L Esq',
+                    date: '2019-06-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 48,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 92763
+                },
+                {
+                    id: 1207,
+                    name: 'Aliza Baltimore',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Andrews, J Robert Esq',
+                    date: '2020-11-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 18075
+                },
+                {
+                    id: 1208,
+                    name: 'Mozell Pelkowski',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Winship \u0026 Byrne',
+                    date: '2018-04-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 34393
+                },
+                {
+                    id: 1209,
+                    name: 'Viola Bitsuie',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Burton \u0026 Davis',
+                    date: '2018-07-07',
+                    status: 'new',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 16410
+                },
+                {
+                    id: 1210,
+                    name: 'Franklyn Emard',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Olympic Graphic Arts',
+                    date: '2018-02-25',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 95,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 1017
+                },
+                {
+                    id: 1211,
+                    name: 'Willodean Konopacki',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Magnuson',
+                    date: '2017-10-03',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 20,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 77843
+                },
+                {
+                    id: 1212,
+                    name: 'Beckie Silvestrini',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'A All American Travel Inc',
+                    date: '2016-11-26',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 30549
+                },
+                {
+                    id: 1213,
+                    name: 'Rebecka Gesick',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Polykote Inc',
+                    date: '2019-06-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 51738
+                },
+                {
+                    id: 1214,
+                    name: 'Frederica Blunk',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Jets Cybernetics',
+                    date: '2019-06-07',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 56,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 13111
+                },
+                {
+                    id: 1215,
+                    name: 'Glen Bartolet',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Metlab Testing Services',
+                    date: '2015-02-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 85802
+                },
+                {
+                    id: 1216,
+                    name: 'Freeman Gochal',
+                    country: {
+                        name: 'Slovenia',
+                        code: 'si'
+                    },
+                    company: 'Kellermann, William T Esq',
+                    date: '2019-08-27',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 2,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 89221
+                },
+                {
+                    id: 1217,
+                    name: 'Vincent Meinerding',
+                    country: {
+                        name: 'United States',
+                        code: 'us'
+                    },
+                    company: 'Arturi, Peter D Esq',
+                    date: '2018-06-18',
+                    status: 'new',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 32661
+                },
+                {
+                    id: 1218,
+                    name: 'Rima Bevelacqua',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Mcauley Mfg Co',
+                    date: '2019-05-18',
+                    status: 'new',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 18809
+                },
+                {
+                    id: 1219,
+                    name: 'Glendora Sarbacher',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Defur Voran Hanley Radcliff',
+                    date: '2018-04-21',
+                    status: 'new',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 94374
+                },
+                {
+                    id: 1220,
+                    name: 'Avery Steier',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Dill Dill Carr \u0026 Stonbraker Pc',
+                    date: '2017-07-27',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 63,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 45436
+                },
+                {
+                    id: 1221,
+                    name: 'Cristy Lother',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Kleensteel',
+                    date: '2018-05-19',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 72645
+                },
+                {
+                    id: 1222,
+                    name: 'Nicolette Brossart',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Goulds Pumps Inc Slurry Pump',
+                    date: '2015-05-26',
+                    status: 'new',
+                    verified: false,
+                    activity: 25,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 61023
+                },
+                {
+                    id: 1223,
+                    name: 'Tracey Modzelewski',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Kansas City Insurance Report',
+                    date: '2019-07-02',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 4,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 13685
+                },
+                {
+                    id: 1224,
+                    name: 'Virgina Tegarden',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Berhanu International Foods',
+                    date: '2017-10-09',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 84436
+                },
+                {
+                    id: 1225,
+                    name: 'Tiera Frankel',
+                    country: {
+                        name: 'India',
+                        code: 'in'
+                    },
+                    company: 'Roland Ashcroft',
+                    date: '2018-03-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 61860
+                },
+                {
+                    id: 1226,
+                    name: 'Alaine Bergesen',
+                    country: {
+                        name: 'Peru',
+                        code: 'pe'
+                    },
+                    company: 'Hispanic Magazine',
+                    date: '2017-08-10',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 76679
+                },
+                {
+                    id: 1227,
+                    name: 'Earleen Mai',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Little Sheet Metal Co',
+                    date: '2016-06-22',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 14959
+                },
+                {
+                    id: 1228,
+                    name: 'Leonida Gobern',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Holmes, Armstead J Esq',
+                    date: '2020-02-24',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 14174
+                },
+                {
+                    id: 1229,
+                    name: 'Ressie Auffrey',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Faw, James C Cpa',
+                    date: '2016-10-21',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 28,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 80328
+                },
+                {
+                    id: 1230,
+                    name: 'Justine Mugnolo',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Evans Rule Company',
+                    date: '2016-02-21',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 83,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 56392
+                },
+                {
+                    id: 1231,
+                    name: 'Eladia Saulter',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Tyee Productions Inc',
+                    date: '2016-03-10',
+                    status: 'new',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 17176
+                },
+                {
+                    id: 1232,
+                    name: 'Chaya Malvin',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Dunnells \u0026 Duvall',
+                    date: '2016-07-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 90141
+                },
+                {
+                    id: 1233,
+                    name: 'Gwenn Suffield',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'Deltam Systems Inc',
+                    date: '2019-06-23',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 38187
+                },
+                {
+                    id: 1234,
+                    name: 'Salena Karpel',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'Hammill Mfg Co',
+                    date: '2016-08-02',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 35596
+                },
+                {
+                    id: 1235,
+                    name: 'Yoko Fishburne',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Sams Corner Store',
+                    date: '2017-08-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 73,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 73926
+                },
+                {
+                    id: 1236,
+                    name: 'Taryn Moyd',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Siskin, Mark J Esq',
+                    date: '2016-12-18',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 38375
+                },
+                {
+                    id: 1237,
+                    name: 'Katina Polidori',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Cape \u0026 Associates Real Estate',
+                    date: '2016-08-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 37,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 35932
+                },
+                {
+                    id: 1238,
+                    name: 'Rickie Plumer',
+                    country: {
+                        name: 'Turkey',
+                        code: 'tr'
+                    },
+                    company: 'Merrill Lynch',
+                    date: '2018-11-04',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 71,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 28331
+                },
+                {
+                    id: 1239,
+                    name: 'Alex Loader',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Sublett, Scott Esq',
+                    date: '2016-01-07',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 22,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 33549
+                },
+                {
+                    id: 1240,
+                    name: 'Lashon Vizarro',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Sentry Signs',
+                    date: '2019-08-02',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 63860
+                },
+                {
+                    id: 1241,
+                    name: 'Lauran Burnard',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Professionals Unlimited',
+                    date: '2016-04-27',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 34992
+                },
+                {
+                    id: 1242,
+                    name: 'Ceola Setter',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Southern Steel Shelving Co',
+                    date: '2017-05-13',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 43,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 97068
+                },
+                {
+                    id: 1243,
+                    name: 'My Rantanen',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Bosco, Paul J',
+                    date: '2017-09-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 60,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 2316
+                },
+                {
+                    id: 1244,
+                    name: 'Lorrine Worlds',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Longo, Nicholas J Esq',
+                    date: '2018-05-10',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 51,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 89374
+                },
+                {
+                    id: 1245,
+                    name: 'Peggie Sturiale',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Henry County Middle School',
+                    date: '2019-11-03',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 41,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 51152
+                },
+                {
+                    id: 1246,
+                    name: 'Marvel Raymo',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Edison Supply \u0026 Equipment Co',
+                    date: '2016-03-08',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 39848
+                },
+                {
+                    id: 1247,
+                    name: 'Daron Dinos',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Wolf, Warren R Esq',
+                    date: '2016-03-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 35060
+                },
+                {
+                    id: 1248,
+                    name: 'An Fritz',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Linguistic Systems Inc',
+                    date: '2017-08-04',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 23037
+                },
+                {
+                    id: 1249,
+                    name: 'Portia Stimmel',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Peace Christian Center',
+                    date: '2020-01-13',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 35637
+                },
+                {
+                    id: 1250,
+                    name: 'Rhea Aredondo',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Double B Foods Inc',
+                    date: '2016-06-19',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 68,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 70379
+                },
+                {
+                    id: 1251,
+                    name: 'Benedict Sama',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Alexander \u0026 Alexander Inc',
+                    date: '2018-08-18',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 99271
+                },
+                {
+                    id: 1252,
+                    name: 'Alyce Arias',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Fairbanks Scales',
+                    date: '2018-09-14',
+                    status: 'new',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 69658
+                },
+                {
+                    id: 1253,
+                    name: 'Heike Berganza',
+                    country: {
+                        name: 'Bulgaria',
+                        code: 'bg'
+                    },
+                    company: 'Cali Sportswear Cutting Dept',
+                    date: '2019-01-21',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 95,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 78159
+                },
+                {
+                    id: 1254,
+                    name: 'Carey Dopico',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Garofani, John Esq',
+                    date: '2020-05-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 84097
+                },
+                {
+                    id: 1255,
+                    name: 'Dottie Hellickson',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'Thompson Fabricating Co',
+                    date: '2016-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 54606
+                },
+                {
+                    id: 1256,
+                    name: 'Deandrea Hughey',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Century 21 Krall Real Estate',
+                    date: '2018-09-26',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 2730
+                },
+                {
+                    id: 1257,
+                    name: 'Kimberlie Duenas',
+                    country: {
+                        name: 'Bulgaria',
+                        code: 'bg'
+                    },
+                    company: 'Mid Contntl Rlty \u0026 Prop Mgmt',
+                    date: '2015-07-27',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 71836
+                },
+                {
+                    id: 1258,
+                    name: 'Martina Staback',
+                    country: {
+                        name: 'Luxembourg',
+                        code: 'lu'
+                    },
+                    company: 'Ace Signs Inc',
+                    date: '2017-02-14',
+                    status: 'new',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 37044
+                },
+                {
+                    id: 1259,
+                    name: 'Skye Fillingim',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Rodeway Inn',
+                    date: '2017-02-12',
+                    status: 'new',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 5990
+                },
+                {
+                    id: 1260,
+                    name: 'Jade Farrar',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Bonnet \u0026 Daughter',
+                    date: '2017-02-23',
+                    status: 'new',
+                    verified: true,
+                    activity: 73,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 7878
+                },
+                {
+                    id: 1261,
+                    name: 'Charlene Hamilton',
+                    country: {
+                        name: 'India',
+                        code: 'in'
+                    },
+                    company: 'Oshins \u0026 Gibbons',
+                    date: '2017-09-23',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 32,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 38077
+                },
+                {
+                    id: 1262,
+                    name: 'Geoffrey Acey',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Price Business Services',
+                    date: '2019-10-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 98,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 24537
+                },
+                {
+                    id: 1263,
+                    name: 'Stevie Westerbeck',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Wise, Dennis W Md',
+                    date: '2017-08-01',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 19164
+                },
+                {
+                    id: 1264,
+                    name: 'Pamella Fortino',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Super 8 Motel',
+                    date: '2018-09-03',
+                    status: 'new',
+                    verified: true,
+                    activity: 100,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 21880
+                },
+                {
+                    id: 1265,
+                    name: 'Harrison Haufler',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'John Wagner Associates',
+                    date: '2016-08-25',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 14975
+                },
+                {
+                    id: 1266,
+                    name: 'Johnna Engelberg',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Thrifty Oil Co',
+                    date: '2019-06-02',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 1,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 28001
+                },
+                {
+                    id: 1267,
+                    name: 'Buddy Cloney',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Larkfield Photo',
+                    date: '2020-05-14',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 44811
+                },
+                {
+                    id: 1268,
+                    name: 'Dalene Riden',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Silverman Planetarium',
+                    date: '2019-08-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 70963
+                },
+                {
+                    id: 1269,
+                    name: 'Jerry Zurcher',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'J \u0026 F Lumber',
+                    date: '2015-05-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 52,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 27808
+                },
+                {
+                    id: 1270,
+                    name: 'Haydee Denooyer',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Cleaning Station Inc',
+                    date: '2016-04-17',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 80,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 41216
+                },
+                {
+                    id: 1271,
+                    name: 'Joseph Cryer',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Ames Stationers',
+                    date: '2019-11-26',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 53,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 8819
+                },
+                {
+                    id: 1272,
+                    name: 'Deonna Kippley',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Midas Muffler Shops',
+                    date: '2017-08-26',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 52,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 77610
+                },
+                {
+                    id: 1273,
+                    name: 'Raymon Calvaresi',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Seaboard Securities Inc',
+                    date: '2017-07-09',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 80612
+                },
+                {
+                    id: 1274,
+                    name: 'Alecia Bubash',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Petersen, James E Esq',
+                    date: '2016-05-19',
+                    status: 'new',
+                    verified: false,
+                    activity: 28,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 45311
+                },
+                {
+                    id: 1275,
+                    name: 'Ma Layous',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Development Authority',
+                    date: '2016-02-11',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 2,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 88737
+                },
+                {
+                    id: 1276,
+                    name: 'Detra Coyier',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Schott Fiber Optics Inc',
+                    date: '2019-06-05',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 95,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 13224
+                },
+                {
+                    id: 1277,
+                    name: 'Terrilyn Rodeigues',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Stuart J Agins',
+                    date: '2016-08-04',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 64656
+                },
+                {
+                    id: 1278,
+                    name: 'Salome Lacovara',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Mitsumi Electronics Corp',
+                    date: '2015-06-05',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 61947
+                },
+                {
+                    id: 1279,
+                    name: 'Garry Keetch',
+                    country: {
+                        name: 'Luxembourg',
+                        code: 'lu'
+                    },
+                    company: 'Italian Express Franchise Corp',
+                    date: '2015-06-20',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 6380
+                },
+                {
+                    id: 1280,
+                    name: 'Matthew Neither',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'American Council On Sci \u0026 Hlth',
+                    date: '2018-06-24',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 4,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 80112
+                },
+                {
+                    id: 1281,
+                    name: 'Theodora Restrepo',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Kleri, Patricia S Esq',
+                    date: '2017-08-15',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 66,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 42038
+                },
+                {
+                    id: 1282,
+                    name: 'Noah Kalafatis',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Twiggs Abrams Blanchard',
+                    date: '2020-06-24',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 36052
+                },
+                {
+                    id: 1283,
+                    name: 'Carmen Sweigard',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Maui Research \u0026 Technology Pk',
+                    date: '2019-08-08',
+                    status: 'new',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 51660
+                },
+                {
+                    id: 1284,
+                    name: 'Lavonda Hengel',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Bradley Nameplate Corp',
+                    date: '2019-10-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 48,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 56142
+                },
+                {
+                    id: 1285,
+                    name: 'Junita Stoltzman',
+                    country: {
+                        name: 'Turkey',
+                        code: 'tr'
+                    },
+                    company: 'Geonex Martel Inc',
+                    date: '2015-03-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 21631
+                },
+                {
+                    id: 1286,
+                    name: 'Herminia Nicolozakes',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Sea Island Div Of Fstr Ind Inc',
+                    date: '2019-09-09',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 59171
+                },
+                {
+                    id: 1287,
+                    name: 'Casie Good',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Papay, Debbie J Esq',
+                    date: '2016-11-27',
+                    status: 'new',
+                    verified: true,
+                    activity: 87,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 97858
+                },
+                {
+                    id: 1288,
+                    name: 'Reena Maisto',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Lane Promotions',
+                    date: '2016-08-22',
+                    status: 'new',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 90388
+                },
+                {
+                    id: 1289,
+                    name: 'Mirta Mallett',
+                    country: {
+                        name: 'Singapore',
+                        code: 'sg'
+                    },
+                    company: 'Stephen Kennerly Archts Inc Pc',
+                    date: '2017-11-27',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 68632
+                },
+                {
+                    id: 1290,
+                    name: 'Cathrine Pontoriero',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'Business Systems Of Wis Inc',
+                    date: '2020-02-07',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 95552
+                },
+                {
+                    id: 1291,
+                    name: 'Filiberto Tawil',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Flash, Elena Salerno Esq',
+                    date: '2018-01-28',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 39725
+                },
+                {
+                    id: 1292,
+                    name: 'Raul Upthegrove',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Neeley, Gregory W Esq',
+                    date: '2019-11-16',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 62251
+                },
+                {
+                    id: 1293,
+                    name: 'Sarah Candlish',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Alabama Educational Tv Comm',
+                    date: '2019-06-09',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 73523
+                },
+                {
+                    id: 1294,
+                    name: 'Lucy Treston',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Franz Inc',
+                    date: '2017-02-07',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 41331
+                },
+                {
+                    id: 1295,
+                    name: 'Judy Aquas',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Plantation Restaurant',
+                    date: '2020-09-14',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 24208
+                },
+                {
+                    id: 1296,
+                    name: 'Yvonne Tjepkema',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Radio Communications Co',
+                    date: '2017-01-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 33,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 56409
+                },
+                {
+                    id: 1297,
+                    name: 'Kayleigh Lace',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Dentalaw Divsn Hlth Care',
+                    date: '2019-11-04',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 70025
+                },
+                {
+                    id: 1298,
+                    name: 'Felix Hirpara',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'American Speedy Printing Ctrs',
+                    date: '2015-03-13',
+                    status: 'new',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 88115
+                },
+                {
+                    id: 1299,
+                    name: 'Tresa Sweely',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Grayson, Grant S Esq',
+                    date: '2019-12-22',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 22,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 69703
+                },
+                {
+                    id: 1300,
+                    name: 'Kristeen Turinetti',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Jeanerette Middle School',
+                    date: '2017-09-28',
+                    status: 'new',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 10718
+                },
+                {
+                    id: 1301,
+                    name: 'Jenelle Regusters',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Haavisto, Brian F Esq',
+                    date: '2019-07-27',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 13,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 29825
+                },
+                {
+                    id: 1302,
+                    name: 'Renea Monterrubio',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Wmmt Radio Station',
+                    date: '2016-03-28',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 73,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 90351
+                },
+                {
+                    id: 1303,
+                    name: 'Olive Matuszak',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Colony Paints Sales Ofc \u0026 Plnt',
+                    date: '2018-04-15',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 75682
+                },
+                {
+                    id: 1304,
+                    name: 'Ligia Reiber',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Floral Expressions',
+                    date: '2017-02-02',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 51,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 74935
+                },
+                {
+                    id: 1305,
+                    name: 'Christiane Eschberger',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Casco Services Inc',
+                    date: '2018-03-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 5254
+                },
+                {
+                    id: 1306,
+                    name: 'Goldie Schirpke',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Reuter, Arthur C Jr',
+                    date: '2015-04-21',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 37306
+                },
+                {
+                    id: 1307,
+                    name: 'Loreta Timenez',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Kaminski, Katherine Andritsaki',
+                    date: '2015-07-17',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 29,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 70520
+                },
+                {
+                    id: 1308,
+                    name: 'Fabiola Hauenstein',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Sidewinder Products Corp',
+                    date: '2015-12-12',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 42,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 74510
+                },
+                {
+                    id: 1309,
+                    name: 'Amie Perigo',
+                    country: {
+                        name: 'Russia',
+                        code: 'ru'
+                    },
+                    company: 'General Foam Corporation',
+                    date: '2016-06-13',
+                    status: 'new',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 74410
+                },
+                {
+                    id: 1310,
+                    name: 'Raina Brachle',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Ikg Borden Divsn Harsco Corp',
+                    date: '2016-11-28',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 56116
+                },
+                {
+                    id: 1311,
+                    name: 'Erinn Canlas',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Anchor Computer Inc',
+                    date: '2018-12-08',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 89,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 46518
+                },
+                {
+                    id: 1312,
+                    name: 'Cherry Lietz',
+                    country: {
+                        name: 'Bulgaria',
+                        code: 'bg'
+                    },
+                    company: 'Sebring \u0026 Co',
+                    date: '2017-11-04',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 22,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 92213
+                },
+                {
+                    id: 1313,
+                    name: 'Kattie Vonasek',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'H A C Farm Lines Co Optv Assoc',
+                    date: '2017-02-17',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 6405
+                },
+                {
+                    id: 1314,
+                    name: 'Lilli Scriven',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Hunter, John J Esq',
+                    date: '2017-04-15',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 92900
+                },
+                {
+                    id: 1315,
+                    name: 'Whitley Tomasulo',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Freehold Fence Co',
+                    date: '2017-11-16',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 6,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 86727
+                },
+                {
+                    id: 1316,
+                    name: 'Barbra Adkin',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Binswanger',
+                    date: '2019-07-24',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 48040
+                },
+                {
+                    id: 1317,
+                    name: 'Hermila Thyberg',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Chilton Malting Co',
+                    date: '2016-11-05',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 24026
+                },
+                {
+                    id: 1318,
+                    name: 'Jesusita Flister',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Schoen, Edward J Jr',
+                    date: '2017-03-03',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 29,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 76388
+                },
+                {
+                    id: 1319,
+                    name: 'Caitlin Julia',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Helderman, Seymour Cpa',
+                    date: '2018-03-13',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 19,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 89068
+                },
+                {
+                    id: 1320,
+                    name: 'Roosevelt Hoffis',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'Denbrook, Myron',
+                    date: '2019-04-14',
+                    status: 'new',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 12727
+                },
+                {
+                    id: 1321,
+                    name: 'Helaine Halter',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'Lippitt, Mike',
+                    date: '2019-09-28',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 83411
+                },
+                {
+                    id: 1322,
+                    name: 'Lorean Martabano',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'Hiram, Hogg P Esq',
+                    date: '2017-03-23',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 44242
+                },
+                {
+                    id: 1323,
+                    name: 'France Buzick',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'In Travel Agency',
+                    date: '2016-12-14',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 22,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 5644
+                },
+                {
+                    id: 1324,
+                    name: 'Justine Ferrario',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Newhart Foods Inc',
+                    date: '2015-09-07',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 29321
+                },
+                {
+                    id: 1325,
+                    name: 'Adelina Nabours',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Courtyard By Marriott',
+                    date: '2018-05-26',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 13353
+                },
+                {
+                    id: 1326,
+                    name: 'Derick Dhamer',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Studer, Eugene A Esq',
+                    date: '2020-07-04',
+                    status: 'new',
+                    verified: true,
+                    activity: 72,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 53454
+                },
+                {
+                    id: 1327,
+                    name: 'Jerry Dallen',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Seashore Supply Co Waretown',
+                    date: '2015-10-23',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 21,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 30074
+                },
+                {
+                    id: 1328,
+                    name: 'Leota Ragel',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Mayar Silk Inc',
+                    date: '2019-06-15',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 74,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 36310
+                },
+                {
+                    id: 1329,
+                    name: 'Jutta Amyot',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'National Medical Excess Corp',
+                    date: '2019-09-01',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 27563
+                },
+                {
+                    id: 1330,
+                    name: 'Aja Gehrett',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Stero Company',
+                    date: '2018-01-28',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 45163
+                },
+                {
+                    id: 1331,
+                    name: 'Kirk Herritt',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Hasting, H Duane Esq',
+                    date: '2018-10-24',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 2,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 52970
+                },
+                {
+                    id: 1332,
+                    name: 'Leonora Mauson',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Insty Prints',
+                    date: '2019-02-02',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 18922
+                },
+                {
+                    id: 1333,
+                    name: 'Winfred Brucato',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'Glenridge Manor Mobile Home Pk',
+                    date: '2019-08-16',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 59632
+                },
+                {
+                    id: 1334,
+                    name: 'Tarra Nachor',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Circuit Solution Inc',
+                    date: '2019-07-10',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 88,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 6733
+                },
+                {
+                    id: 1335,
+                    name: 'Corinne Loder',
+                    country: {
+                        name: 'Brazil',
+                        code: 'br'
+                    },
+                    company: 'Local Office',
+                    date: '2016-05-21',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 22704
+                },
+                {
+                    id: 1336,
+                    name: 'Dulce Labreche',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Lee Kilkelly Paulson \u0026 Kabaker',
+                    date: '2019-11-10',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 24,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 82613
+                },
+                {
+                    id: 1337,
+                    name: 'Kate Keneipp',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Davis, Maxon R Esq',
+                    date: '2019-06-20',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 44,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 97960
+                },
+                {
+                    id: 1338,
+                    name: 'Kaitlyn Ogg',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Garrison, Paul E Esq',
+                    date: '2019-08-01',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 63123
+                },
+                {
+                    id: 1339,
+                    name: 'Sherita Saras',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Black History Resource Center',
+                    date: '2017-06-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 38090
+                },
+                {
+                    id: 1340,
+                    name: 'Lashawnda Stuer',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Rodriguez, J Christopher Esq',
+                    date: '2018-01-08',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 6,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 58826
+                },
+                {
+                    id: 1341,
+                    name: 'Ernest Syrop',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Grant Family Health Center',
+                    date: '2016-10-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 22419
+                },
+                {
+                    id: 1342,
+                    name: 'Nobuko Halsey',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Goeman Wood Products Inc',
+                    date: '2019-01-02',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 72,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 86006
+                },
+                {
+                    id: 1343,
+                    name: 'Lavonna Wolny',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Linhares, Kenneth A Esq',
+                    date: '2019-03-09',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 40641
+                },
+                {
+                    id: 1344,
+                    name: 'Lashaunda Lizama',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Earnhardt Printing',
+                    date: '2016-02-16',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 73493
+                },
+                {
+                    id: 1345,
+                    name: 'Mariann Bilden',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'H P G Industrys Inc',
+                    date: '2019-12-15',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 20,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 87704
+                },
+                {
+                    id: 1346,
+                    name: 'Helene Rodenberger',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Bailey Transportation Prod Inc',
+                    date: '2016-09-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 26,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 19662
+                },
+                {
+                    id: 1347,
+                    name: 'Roselle Estell',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Mcglynn Bliss Pc',
+                    date: '2016-11-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 80,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 80534
+                },
+                {
+                    id: 1348,
+                    name: 'Samira Heintzman',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Mutual Fish Co',
+                    date: '2019-11-26',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 19473
+                },
+                {
+                    id: 1349,
+                    name: 'Margart Meisel',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Yeates, Arthur L Aia',
+                    date: '2019-10-27',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 89796
+                },
+                {
+                    id: 1350,
+                    name: 'Kristofer Bennick',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Logan, Ronald J Esq',
+                    date: '2016-02-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 5,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 54429
+                },
+                {
+                    id: 1351,
+                    name: 'Weldon Acuff',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'Advantage Martgage Company',
+                    date: '2019-10-22',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 16134
+                },
+                {
+                    id: 1352,
+                    name: 'Shalon Shadrick',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Germer And Gertz Llp',
+                    date: '2015-01-03',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 66,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 9173
+                },
+                {
+                    id: 1353,
+                    name: 'Denise Patak',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Spence Law Offices',
+                    date: '2016-11-03',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 42857
+                },
+                {
+                    id: 1354,
+                    name: 'Louvenia Beech',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'John Ortiz Nts Therapy Center',
+                    date: '2016-04-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 54300
+                },
+                {
+                    id: 1355,
+                    name: 'Audry Yaw',
+                    country: {
+                        name: 'Portugal',
+                        code: 'pt'
+                    },
+                    company: 'Mike Uchrin Htg \u0026 Air Cond Inc',
+                    date: '2017-11-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 94652
+                },
+                {
+                    id: 1356,
+                    name: 'Kristel Ehmann',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Mccoy, Joy Reynolds Esq',
+                    date: '2016-06-23',
+                    status: 'new',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 88295
+                },
+                {
+                    id: 1357,
+                    name: 'Vincenza Zepp',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Kbor 1600 Am',
+                    date: '2016-01-04',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 25,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 92710
+                },
+                {
+                    id: 1358,
+                    name: 'Elouise Gwalthney',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Quality Inn Northwest',
+                    date: '2016-04-05',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 25145
+                },
+                {
+                    id: 1359,
+                    name: 'Venita Maillard',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Wallace Church Assoc Inc',
+                    date: '2016-03-23',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 61630
+                },
+                {
+                    id: 1360,
+                    name: 'Kasandra Semidey',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Can Tron',
+                    date: '2015-09-03',
+                    status: 'new',
+                    verified: true,
+                    activity: 25,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 66134
+                },
+                {
+                    id: 1361,
+                    name: 'Xochitl Discipio',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'Ravaal Enterprises Inc',
+                    date: '2016-11-14',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 14822
+                },
+                {
+                    id: 1362,
+                    name: 'Maile Linahan',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Thompson Steel Company Inc',
+                    date: '2016-07-24',
+                    status: 'new',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 17759
+                },
+                {
+                    id: 1363,
+                    name: 'Krissy Rauser',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Anderson, Mark A Esq',
+                    date: '2020-03-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 33,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 14922
+                },
+                {
+                    id: 1364,
+                    name: 'Pete Dubaldi',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Womack \u0026 Galich',
+                    date: '2015-11-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 96575
+                },
+                {
+                    id: 1365,
+                    name: 'Linn Paa',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Valerie \u0026 Company',
+                    date: '2015-08-12',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 26,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 5847
+                },
+                {
+                    id: 1366,
+                    name: 'Paris Wide',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Gehring Pumps Inc',
+                    date: '2018-10-21',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 22929
+                },
+                {
+                    id: 1367,
+                    name: 'Wynell Dorshorst',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Haehnel, Craig W Esq',
+                    date: '2018-05-10',
+                    status: 'new',
+                    verified: true,
+                    activity: 60,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 31837
+                },
+                {
+                    id: 1368,
+                    name: 'Quentin Birkner',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Spoor Behrins Campbell \u0026 Young',
+                    date: '2019-02-03',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 68,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 27095
+                },
+                {
+                    id: 1369,
+                    name: 'Regenia Kannady',
+                    country: {
+                        name: 'Portugal',
+                        code: 'pt'
+                    },
+                    company: 'Ken Jeter Store Equipment Inc',
+                    date: '2018-07-13',
+                    status: 'new',
+                    verified: true,
+                    activity: 74,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 43696
+                },
+                {
+                    id: 1370,
+                    name: 'Sheron Louissant',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Potter, Brenda J Cpa',
+                    date: '2017-01-04',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 79897
+                },
+                {
+                    id: 1371,
+                    name: 'Izetta Funnell',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Baird Kurtz \u0026 Dobson',
+                    date: '2019-11-05',
+                    status: 'new',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 27264
+                },
+                {
+                    id: 1372,
+                    name: 'Rodolfo Butzen',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Minor, Cynthia A Esq',
+                    date: '2020-09-25',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 17,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 16490
+                },
+                {
+                    id: 1373,
+                    name: 'Zona Colla',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Solove, Robert A Esq',
+                    date: '2020-10-08',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 21990
+                },
+                {
+                    id: 1374,
+                    name: 'Serina Zagen',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Mark Ii Imports Inc',
+                    date: '2018-07-14',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 11918
+                },
+                {
+                    id: 1375,
+                    name: 'Paz Sahagun',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'White Sign Div Ctrl Equip Co',
+                    date: '2018-03-23',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 13268
+                },
+                {
+                    id: 1376,
+                    name: 'Markus Lukasik',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'M \u0026 M Store Fixtures Co Inc',
+                    date: '2018-03-21',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 23,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 15941
+                },
+                {
+                    id: 1377,
+                    name: 'Jaclyn Bachman',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'Judah Caster \u0026 Wheel Co',
+                    date: '2020-10-20',
+                    status: 'new',
+                    verified: true,
+                    activity: 10,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 53132
+                },
+                {
+                    id: 1378,
+                    name: 'Cyril Daufeldt',
+                    country: {
+                        name: 'India',
+                        code: 'in'
+                    },
+                    company: 'Galaxy International Inc',
+                    date: '2019-02-11',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 47531
+                },
+                {
+                    id: 1379,
+                    name: 'Gayla Schnitzler',
+                    country: {
+                        name: 'Brazil',
+                        code: 'br'
+                    },
+                    company: 'Sigma Corp Of America',
+                    date: '2017-09-15',
+                    status: 'new',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 88950
+                },
+                {
+                    id: 1380,
+                    name: 'Erick Nievas',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Soward, Anne Esq',
+                    date: '2018-10-07',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 28,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 88497
+                },
+                {
+                    id: 1381,
+                    name: 'Jennie Drymon',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Osborne, Michelle M Esq',
+                    date: '2016-09-14',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 80,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 60634
+                },
+                {
+                    id: 1382,
+                    name: 'Mitsue Scipione',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Students In Free Entrprs Natl',
+                    date: '2019-07-28',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 24,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 21164
+                },
+                {
+                    id: 1383,
+                    name: 'Ciara Ventura',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Johnson, Robert M Esq',
+                    date: '2018-04-02',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 24,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 83645
+                },
+                {
+                    id: 1384,
+                    name: 'Galen Cantres',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Del Charro Apartments',
+                    date: '2020-02-16',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 32433
+                },
+                {
+                    id: 1385,
+                    name: 'Truman Feichtner',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Legal Search Inc',
+                    date: '2019-10-16',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 98,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 96983
+                },
+                {
+                    id: 1386,
+                    name: 'Gail Kitty',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Service Supply Co Inc',
+                    date: '2020-01-15',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 72211
+                },
+                {
+                    id: 1387,
+                    name: 'Dalene Schoeneck',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Sameshima, Douglas J Esq',
+                    date: '2019-11-27',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 40262
+                },
+                {
+                    id: 1388,
+                    name: 'Gertude Witten',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Thompson, John Randolph Jr',
+                    date: '2017-08-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 40,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 91139
+                },
+                {
+                    id: 1389,
+                    name: 'Lizbeth Kohl',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'E T Balancing Co Inc',
+                    date: '2019-04-20',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 79659
+                },
+                {
+                    id: 1390,
+                    name: 'Glenn Berray',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Griswold, John E Esq',
+                    date: '2017-08-13',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 68,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 93576
+                },
+                {
+                    id: 1391,
+                    name: 'Lashandra Klang',
+                    country: {
+                        name: 'Bulgaria',
+                        code: 'bg'
+                    },
+                    company: 'Acqua Group',
+                    date: '2016-06-08',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 32,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 93576
+                },
+                {
+                    id: 1392,
+                    name: 'Lenna Newville',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Brooks, Morris J Jr',
+                    date: '2020-09-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 82,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 93576
+                },
+                {
+                    id: 1393,
+                    name: 'Laurel Pagliuca',
+                    country: {
+                        name: 'Russia',
+                        code: 'ru'
+                    },
+                    company: 'Printing Images Corp',
+                    date: '2017-05-26',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 21,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 2009
+                },
+                {
+                    id: 1394,
+                    name: 'Mireya Frerking',
+                    country: {
+                        name: 'Belarus',
+                        code: 'by'
+                    },
+                    company: 'Roberts Supply Co Inc',
+                    date: '2017-04-21',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 54,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 35341
+                },
+                {
+                    id: 1395,
+                    name: 'Annelle Tagala',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'Vico Products Mfg Co',
+                    date: '2017-10-02',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 53,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 13077
+                },
+                {
+                    id: 1396,
+                    name: 'Dean Ketelsen',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'J M Custom Design Millwork',
+                    date: '2019-07-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 98,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 83423
+                },
+                {
+                    id: 1397,
+                    name: 'Levi Munis',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Farrell \u0026 Johnson Office Equip',
+                    date: '2017-06-24',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 39,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 14350
+                },
+                {
+                    id: 1398,
+                    name: 'Sylvie Ryser',
+                    country: {
+                        name: 'India',
+                        code: 'in'
+                    },
+                    company: 'Millers Market \u0026 Deli',
+                    date: '2016-02-23',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 89,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 98864
+                },
+                {
+                    id: 1399,
+                    name: 'Sharee Maile',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Holiday Inn Naperville',
+                    date: '2020-07-17',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 29326
+                },
+                {
+                    id: 1400,
+                    name: 'Cordelia Storment',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'Burrows, Jon H Esq',
+                    date: '2020-02-17',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 81198
+                },
+                {
+                    id: 1401,
+                    name: 'Mollie Mcdoniel',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Dock Seal Specialty',
+                    date: '2017-08-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 82391
+                },
+                {
+                    id: 1402,
+                    name: 'Brett Mccullan',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Five Star Limousines Of Tx Inc',
+                    date: '2015-05-21',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 48071
+                },
+                {
+                    id: 1403,
+                    name: 'Teddy Pedrozo',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Barkan, Neal J Esq',
+                    date: '2019-02-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 14593
+                },
+                {
+                    id: 1404,
+                    name: 'Tasia Andreason',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Campbell, Robert A',
+                    date: '2016-03-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 25,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 8750
+                },
+                {
+                    id: 1405,
+                    name: 'Hubert Walthall',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Dee, Deanna',
+                    date: '2020-12-19',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 32,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 39655
+                },
+                {
+                    id: 1406,
+                    name: 'Arthur Farrow',
+                    country: {
+                        name: 'Brazil',
+                        code: 'br'
+                    },
+                    company: 'Young, Timothy L Esq',
+                    date: '2019-02-05',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 71713
+                },
+                {
+                    id: 1407,
+                    name: 'Vilma Berlanga',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Wells, D Fred Esq',
+                    date: '2016-02-09',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 26,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 81056
+                },
+                {
+                    id: 1408,
+                    name: 'Billye Miro',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Gray, Francine H Esq',
+                    date: '2015-09-05',
+                    status: 'new',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 34220
+                },
+                {
+                    id: 1409,
+                    name: 'Glenna Slayton',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Toledo Iv Care',
+                    date: '2016-03-10',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 21459
+                },
+                {
+                    id: 1410,
+                    name: 'Mitzie Hudnall',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Cangro Transmission Co',
+                    date: '2020-05-04',
+                    status: 'new',
+                    verified: true,
+                    activity: 19,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 51281
+                },
+                {
+                    id: 1411,
+                    name: 'Bernardine Rodefer',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Sat Poly Inc',
+                    date: '2020-10-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 53841
+                },
+                {
+                    id: 1412,
+                    name: 'Staci Schmaltz',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Midwest Contracting \u0026 Mfg Inc',
+                    date: '2018-03-14',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 34878
+                },
+                {
+                    id: 1413,
+                    name: 'Nichelle Meteer',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Print Doctor',
+                    date: '2016-09-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 39,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 85399
+                },
+                {
+                    id: 1414,
+                    name: 'Janine Rhoden',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Nordic Group Inc',
+                    date: '2018-08-13',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 95,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 29237
+                },
+                {
+                    id: 1415,
+                    name: 'Ettie Hoopengardner',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Jackson Millwork Co',
+                    date: '2017-07-24',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 23,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 12179
+                },
+                {
+                    id: 1416,
+                    name: 'Eden Jayson',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Harris Corporation',
+                    date: '2018-03-15',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 27840
+                },
+                {
+                    id: 1417,
+                    name: 'Lynelle Auber',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'United Cerebral Palsy Of Ne Pa',
+                    date: '2020-12-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 51958
+                },
+                {
+                    id: 1418,
+                    name: 'Merissa Tomblin',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'One Day Surgery Center Inc',
+                    date: '2018-03-05',
+                    status: 'new',
+                    verified: true,
+                    activity: 50,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 33138
+                },
+                {
+                    id: 1419,
+                    name: 'Golda Kaniecki',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Calaveras Prospect',
+                    date: '2019-04-17',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 82539
+                },
+                {
+                    id: 1420,
+                    name: 'Catarina Gleich',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Terk, Robert E Esq',
+                    date: '2017-01-26',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 5619
+                },
+                {
+                    id: 1421,
+                    name: 'Virgie Kiel',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Cullen, Terrence P Esq',
+                    date: '2016-06-28',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 89,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 44763
+                },
+                {
+                    id: 1422,
+                    name: 'Jolene Ostolaza',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'Central Die Casting Mfg Co Inc',
+                    date: '2016-08-08',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 97208
+                },
+                {
+                    id: 1423,
+                    name: 'Keneth Borgman',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Centerline Engineering',
+                    date: '2019-02-04',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 41,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 93316
+                },
+                {
+                    id: 1424,
+                    name: 'Rikki Nayar',
+                    country: {
+                        name: 'Norway',
+                        code: 'no'
+                    },
+                    company: 'Targan \u0026 Kievit Pa',
+                    date: '2017-03-06',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 23786
+                },
+                {
+                    id: 1425,
+                    name: 'Elke Sengbusch',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Riley Riper Hollin \u0026 Colagreco',
+                    date: '2019-05-28',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 98367
+                },
+                {
+                    id: 1426,
+                    name: 'Hoa Sarao',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Kaplan, Joel S Esq',
+                    date: '2020-08-13',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 68683
+                },
+                {
+                    id: 1427,
+                    name: 'Trinidad Mcrae',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Water Office',
+                    date: '2020-12-26',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 85602
+                },
+                {
+                    id: 1428,
+                    name: 'Mari Lueckenbach',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Westbrooks, Nelson E Jr',
+                    date: '2017-10-27',
+                    status: 'new',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 14402
+                },
+                {
+                    id: 1429,
+                    name: 'Selma Husser',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Armon Communications',
+                    date: '2018-02-16',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 84,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 81608
+                },
+                {
+                    id: 1430,
+                    name: 'Antione Onofrio',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Jacobs \u0026 Gerber Inc',
+                    date: '2017-11-07',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 37,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 15573
+                },
+                {
+                    id: 1431,
+                    name: 'Luisa Jurney',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Forest Fire Laboratory',
+                    date: '2018-06-12',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 50121
+                },
+                {
+                    id: 1432,
+                    name: 'Clorinda Heimann',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Haughey, Charles Jr',
+                    date: '2016-11-03',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 63,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 93911
+                },
+                {
+                    id: 1433,
+                    name: 'Dick Wenzinger',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Wheaton Plastic Products',
+                    date: '2017-04-05',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 66383
+                },
+                {
+                    id: 1434,
+                    name: 'Ahmed Angalich',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Reese Plastics',
+                    date: '2018-11-20',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 83,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 89183
+                },
+                {
+                    id: 1435,
+                    name: 'Iluminada Ohms',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Nazette Marner Good Wendt',
+                    date: '2015-08-18',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 66,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 9752
+                },
+                {
+                    id: 1436,
+                    name: 'Joanna Leinenbach',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Levinson Axelrod Wheaton',
+                    date: '2016-02-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 2623
+                },
+                {
+                    id: 1437,
+                    name: 'Caprice Suell',
+                    country: {
+                        name: 'Algeria',
+                        code: 'dz'
+                    },
+                    company: 'Egnor, W Dan Esq',
+                    date: '2018-07-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 87620
+                },
+                {
+                    id: 1438,
+                    name: 'Stephane Myricks',
+                    country: {
+                        name: 'Honduras',
+                        code: 'hn'
+                    },
+                    company: 'Portland Central Thriftlodge',
+                    date: '2018-05-28',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 51,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 14625
+                },
+                {
+                    id: 1439,
+                    name: 'Quentin Swayze',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Ulbrich Trucking',
+                    date: '2019-02-11',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 37,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 39339
+                },
+                {
+                    id: 1440,
+                    name: 'Annmarie Castros',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Tipiak Inc',
+                    date: '2015-08-24',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 77704
+                },
+                {
+                    id: 1441,
+                    name: 'Shonda Greenbush',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Saint George Well Drilling',
+                    date: '2018-06-01',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 75326
+                },
+                {
+                    id: 1442,
+                    name: 'Cecil Lapage',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Hawkes, Douglas D',
+                    date: '2018-11-09',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 43,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 71364
+                },
+                {
+                    id: 1443,
+                    name: 'Jeanice Claucherty',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Accurel Systems Intrntl Corp',
+                    date: '2016-06-02',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 48,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 73360
+                },
+                {
+                    id: 1444,
+                    name: 'Josphine Villanueva',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Santa Cruz Community Internet',
+                    date: '2019-11-08',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 39,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 59442
+                },
+                {
+                    id: 1445,
+                    name: 'Daniel Perruzza',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Gersh \u0026 Danielson',
+                    date: '2017-09-24',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 84338
+                },
+                {
+                    id: 1446,
+                    name: 'Cassi Wildfong',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Cobb, James O Esq',
+                    date: '2015-09-08',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 72545
+                },
+                {
+                    id: 1447,
+                    name: 'Britt Galam',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Wheatley Trucking Company',
+                    date: '2020-10-26',
+                    status: 'new',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 53307
+                },
+                {
+                    id: 1448,
+                    name: 'Adell Lipkin',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Systems Graph Inc Ab Dick Dlr',
+                    date: '2017-05-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 12178
+                },
+                {
+                    id: 1449,
+                    name: 'Jacqueline Rowling',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'John Hancock Mutl Life Ins Co',
+                    date: '2019-06-28',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 35576
+                },
+                {
+                    id: 1450,
+                    name: 'Lonny Weglarz',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'History Division Of State',
+                    date: '2016-08-12',
+                    status: 'new',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 20507
+                },
+                {
+                    id: 1451,
+                    name: 'Lonna Diestel',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Dimmock, Thomas J Esq',
+                    date: '2017-02-10',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 56415
+                },
+                {
+                    id: 1452,
+                    name: 'Cristal Samara',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Intermed Inc',
+                    date: '2016-08-17',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 33427
+                },
+                {
+                    id: 1453,
+                    name: 'Kenneth Grenet',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Bank Of New York',
+                    date: '2020-07-24',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 44004
+                },
+                {
+                    id: 1454,
+                    name: 'Elli Mclaird',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Sportmaster Intrnatl',
+                    date: '2017-06-10',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 37227
+                },
+                {
+                    id: 1455,
+                    name: 'Alline Jeanty',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'W W John Holden Inc',
+                    date: '2015-12-08',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 74,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 44560
+                },
+                {
+                    id: 1456,
+                    name: 'Sharika Eanes',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'Maccani \u0026 Delp',
+                    date: '2018-08-16',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 50922
+                },
+                {
+                    id: 1457,
+                    name: 'Nu Mcnease',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Amazonia Film Project',
+                    date: '2018-07-03',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 61262
+                },
+                {
+                    id: 1458,
+                    name: 'Daniela Comnick',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Water \u0026 Sewer Department',
+                    date: '2017-07-07',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 13459
+                },
+                {
+                    id: 1459,
+                    name: 'Cecilia Colaizzo',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Switchcraft Inc',
+                    date: '2019-06-08',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 21,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 52299
+                },
+                {
+                    id: 1460,
+                    name: 'Leslie Threets',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'C W D C Metal Fabricators',
+                    date: '2016-11-26',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 50,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 61040
+                },
+                {
+                    id: 1461,
+                    name: 'Nan Koppinger',
+                    country: {
+                        name: 'Norway',
+                        code: 'no'
+                    },
+                    company: 'Shimotani, Grace T',
+                    date: '2020-11-15',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 91297
+                },
+                {
+                    id: 1462,
+                    name: 'Izetta Dewar',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Lisatoni, Jean Esq',
+                    date: '2019-11-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 41,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 39947
+                },
+                {
+                    id: 1463,
+                    name: 'Tegan Arceo',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Ceramic Tile Sales Inc',
+                    date: '2016-08-07',
+                    status: 'new',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 78224
+                },
+                {
+                    id: 1464,
+                    name: 'Ruthann Keener',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Maiden Craft Inc',
+                    date: '2019-04-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 43,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 22727
+                },
+                {
+                    id: 1465,
+                    name: 'Joni Breland',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Carriage House Cllsn Rpr Inc',
+                    date: '2018-07-20',
+                    status: 'new',
+                    verified: true,
+                    activity: 18,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 70650
+                },
+                {
+                    id: 1466,
+                    name: 'Vi Rentfro',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Video Workshop',
+                    date: '2018-10-01',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 45956
+                },
+                {
+                    id: 1467,
+                    name: 'Colette Kardas',
+                    country: {
+                        name: 'Honduras',
+                        code: 'hn'
+                    },
+                    company: 'Fresno Tile Center Inc',
+                    date: '2017-08-22',
+                    status: 'new',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 72627
+                },
+                {
+                    id: 1468,
+                    name: 'Malcolm Tromblay',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Versatile Sash \u0026 Woodwork',
+                    date: '2019-11-25',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 23,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 80176
+                },
+                {
+                    id: 1469,
+                    name: 'Ryan Harnos',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Warner Electric Brk \u0026 Cltch Co',
+                    date: '2019-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 71,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 97227
+                },
+                {
+                    id: 1470,
+                    name: 'Jess Chaffins',
+                    country: {
+                        name: 'Belarus',
+                        code: 'by'
+                    },
+                    company: 'New York Public Library',
+                    date: '2017-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 63121
+                },
+                {
+                    id: 1471,
+                    name: 'Sharen Bourbon',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Mccaleb, John A Esq',
+                    date: '2017-06-13',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 44726
+                },
+                {
+                    id: 1472,
+                    name: 'Nickolas Juvera',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'United Oil Co Inc',
+                    date: '2019-01-06',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 70748
+                },
+                {
+                    id: 1473,
+                    name: 'Gary Nunlee',
+                    country: {
+                        name: 'Turkey',
+                        code: 'tr'
+                    },
+                    company: 'Irving Foot Center',
+                    date: '2015-07-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 72,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 71061
+                },
+                {
+                    id: 1474,
+                    name: 'Diane Devreese',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Acme Supply Co',
+                    date: '2018-05-13',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 7486
+                },
+                {
+                    id: 1475,
+                    name: 'Roslyn Chavous',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Mcrae, James L',
+                    date: '2018-03-20',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 58495
+                },
+                {
+                    id: 1476,
+                    name: 'Glory Schieler',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Mcgraths Seafood',
+                    date: '2017-05-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 96252
+                },
+                {
+                    id: 1477,
+                    name: 'Rasheeda Sayaphon',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Kummerer, J Michael Esq',
+                    date: '2017-02-21',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 71454
+                },
+                {
+                    id: 1478,
+                    name: 'Alpha Palaia',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Stoffer, James M Jr',
+                    date: '2017-07-21',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 4,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 81894
+                },
+                {
+                    id: 1479,
+                    name: 'Refugia Jacobos',
+                    country: {
+                        name: 'China',
+                        code: 'cn'
+                    },
+                    company: 'North Central Fl Sfty Cncl',
+                    date: '2020-11-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 18,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 31601
+                },
+                {
+                    id: 1480,
+                    name: 'Shawnda Yori',
+                    country: {
+                        name: 'Luxembourg',
+                        code: 'lu'
+                    },
+                    company: 'Fiorucci Foods Usa Inc',
+                    date: '2018-05-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 11,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 12090
+                },
+                {
+                    id: 1481,
+                    name: 'Mona Delasancha',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Sign All',
+                    date: '2017-10-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 24073
+                },
+                {
+                    id: 1482,
+                    name: 'Gilma Liukko',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Sammys Steak Den',
+                    date: '2018-10-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 35129
+                },
+                {
+                    id: 1483,
+                    name: 'Janey Gabisi',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Dobscha, Stephen F Esq',
+                    date: '2019-05-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 25518
+                },
+                {
+                    id: 1484,
+                    name: 'Lili Paskin',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Morgan Custom Homes',
+                    date: '2018-06-11',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 7300
+                },
+                {
+                    id: 1485,
+                    name: 'Loren Asar',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Olsen Payne \u0026 Company',
+                    date: '2017-12-11',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 82949
+                },
+                {
+                    id: 1486,
+                    name: 'Dorothy Chesterfield',
+                    country: {
+                        name: 'Spain',
+                        code: 'es'
+                    },
+                    company: 'Cowan \u0026 Kelly',
+                    date: '2015-08-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 25044
+                },
+                {
+                    id: 1487,
+                    name: 'Gail Similton',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Johnson, Wes Esq',
+                    date: '2016-08-10',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 63,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 97553
+                },
+                {
+                    id: 1488,
+                    name: 'Catalina Tillotson',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Icn Pharmaceuticals Inc',
+                    date: '2018-08-04',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 13,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 38294
+                },
+                {
+                    id: 1489,
+                    name: 'Lawrence Lorens',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'New England Sec Equip Co Inc',
+                    date: '2020-04-15',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 82,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 56617
+                },
+                {
+                    id: 1490,
+                    name: 'Carlee Boulter',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Tippett, Troy M Ii',
+                    date: '2016-09-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 71,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 76817
+                },
+                {
+                    id: 1491,
+                    name: 'Thaddeus Ankeny',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Atc Contracting',
+                    date: '2015-03-08',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 80787
+                },
+                {
+                    id: 1492,
+                    name: 'Jovita Oles',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Pagano, Philip G Esq',
+                    date: '2019-07-18',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 42,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 4158
+                },
+                {
+                    id: 1493,
+                    name: 'Alesia Hixenbaugh',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Kwikprint',
+                    date: '2017-07-24',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 23,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 66993
+                },
+                {
+                    id: 1494,
+                    name: 'Lai Harabedian',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Buergi \u0026 Madden Scale',
+                    date: '2018-11-11',
+                    status: 'new',
+                    verified: true,
+                    activity: 28,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 53330
+                },
+                {
+                    id: 1495,
+                    name: 'Brittni Gillaspie',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Inner Label',
+                    date: '2019-11-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 72342
+                },
+                {
+                    id: 1496,
+                    name: 'Raylene Kampa',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Hermar Inc',
+                    date: '2020-04-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 65,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 53660
+                },
+                {
+                    id: 1497,
+                    name: 'Flo Bookamer',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Simonton Howe \u0026 Schneider Pc',
+                    date: '2020-08-10',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 44528
+                },
+                {
+                    id: 1498,
+                    name: 'Jani Biddy',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Warehouse Office \u0026 Paper Prod',
+                    date: '2019-11-07',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 20,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 69613
+                },
+                {
+                    id: 1499,
+                    name: 'Chauncey Motley',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Affiliated With Travelodge',
+                    date: '2019-04-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 42,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 88090
+                }
+            ];
+        },
+
+        getCustomersSmall() {
+            return Promise.resolve(this.getData().slice(0, 10));
+        },
+
+        getCustomersMedium() {
+            return Promise.resolve(this.getData().slice(0, 50));
+        },
+
+        getCustomersLarge() {
+            return Promise.resolve(this.getData().slice(0, 200));
+        },
+
+        getCustomersXLarge() {
+            return Promise.resolve(this.getData());
+        },
+
+        getCustomers(params) {
+            const queryParams = params
+                ? Object.keys(params)
+                      .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+                      .join('&')
+                : '';
+
+            return fetch('https://www.primefaces.org/data/customers?' + queryParams).then((res) => res.json());
+        }
+    };
+    `,
+    EventService: `export const EventService = {
+        getData() {
+            return [
+                { id: 1, title: 'All Day Event', start: '2017-02-01' },
+                { id: 2, title: 'Long Event', start: '2017-02-07', end: '2017-02-10' },
+                { id: 3, title: 'Repeating Event', start: '2017-02-09T16:00:00' },
+                { id: 4, title: 'Repeating Event', start: '2017-02-16T16:00:00' },
+                { id: 5, title: 'Conference', start: '2017-02-11', end: '2017-02-13' },
+                { id: 6, title: 'Meeting', start: '2017-02-12T10:30:00', end: '2017-02-12T12:30:00' },
+                { id: 7, title: 'Lunch', start: '2017-02-12T12:00:00' },
+                { id: 8, title: 'Meeting', start: '2017-02-12T14:30:00' },
+                { id: 9, title: 'Happy Hour', start: '2017-02-12T17:30:00' },
+                { id: 10, title: 'Dinner', start: '2017-02-12T20:00:00' },
+                { id: 11, title: 'Birthday Party', start: '2017-02-13T07:00:00' },
+                { id: 12, title: 'Click for Google', url: 'https://www.google.com/', start: '2017-02-28' }
+            ];
+        },
+
+        getEvents() {
+            return Promise.resolve(this.getData());
+        }
+    };
+    `,
+    NodeService: `export const NodeService = {
+        getTreeNodesData() {
+            return [
+                {
+                    key: '0',
+                    label: 'Documents',
+                    data: 'Documents Folder',
+                    icon: 'pi pi-fw pi-inbox',
+                    children: [
+                        {
+                            key: '0-0',
+                            label: 'Work',
+                            data: 'Work Folder',
+                            icon: 'pi pi-fw pi-cog',
+                            children: [
+                                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+                            ]
+                        },
+                        {
+                            key: '0-1',
+                            label: 'Home',
+                            data: 'Home Folder',
+                            icon: 'pi pi-fw pi-home',
+                            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+                        }
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Events',
+                    data: 'Events Folder',
+                    icon: 'pi pi-fw pi-calendar',
+                    children: [
+                        { key: '1-0', label: 'Meeting', icon: 'pi pi-fw pi-calendar-plus', data: 'Meeting' },
+                        { key: '1-1', label: 'Product Launch', icon: 'pi pi-fw pi-calendar-plus', data: 'Product Launch' },
+                        { key: '1-2', label: 'Report Review', icon: 'pi pi-fw pi-calendar-plus', data: 'Report Review' }
+                    ]
+                },
+                {
+                    key: '2',
+                    label: 'Movies',
+                    data: 'Movies Folder',
+                    icon: 'pi pi-fw pi-star-fill',
+                    children: [
+                        {
+                            key: '2-0',
+                            icon: 'pi pi-fw pi-star-fill',
+                            label: 'Al Pacino',
+                            data: 'Pacino Movies',
+                            children: [
+                                { key: '2-0-0', label: 'Scarface', icon: 'pi pi-fw pi-video', data: 'Scarface Movie' },
+                                { key: '2-0-1', label: 'Serpico', icon: 'pi pi-fw pi-video', data: 'Serpico Movie' }
+                            ]
+                        },
+                        {
+                            key: '2-1',
+                            label: 'Robert De Niro',
+                            icon: 'pi pi-fw pi-star-fill',
+                            data: 'De Niro Movies',
+                            children: [
+                                { key: '2-1-0', label: 'Goodfellas', icon: 'pi pi-fw pi-video', data: 'Goodfellas Movie' },
+                                { key: '2-1-1', label: 'Untouchables', icon: 'pi pi-fw pi-video', data: 'Untouchables Movie' }
+                            ]
+                        }
+                    ]
+                }
+            ];
+        },
+
+        getTreeTableNodesData() {
+            return [
+                {
+                    key: '0',
+                    data: {
+                        name: 'Applications',
+                        size: '100kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '0-0',
+                            data: {
+                                name: 'Vue',
+                                size: '25kb',
+                                type: 'Folder'
+                            },
+                            children: [
+                                {
+                                    key: '0-0-0',
+                                    data: {
+                                        name: 'vue.app',
+                                        size: '10kb',
+                                        type: 'Application'
+                                    }
+                                },
+                                {
+                                    key: '0-0-1',
+                                    data: {
+                                        name: 'native.app',
+                                        size: '10kb',
+                                        type: 'Application'
+                                    }
+                                },
+                                {
+                                    key: '0-0-2',
+                                    data: {
+                                        name: 'mobile.app',
+                                        size: '5kb',
+                                        type: 'Application'
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            key: '0-1',
+                            data: {
+                                name: 'editor.app',
+                                size: '25kb',
+                                type: 'Application'
+                            }
+                        },
+                        {
+                            key: '0-2',
+                            data: {
+                                name: 'settings.app',
+                                size: '50kb',
+                                type: 'Application'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '1',
+                    data: {
+                        name: 'Cloud',
+                        size: '20kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '1-0',
+                            data: {
+                                name: 'backup-1.zip',
+                                size: '10kb',
+                                type: 'Zip'
+                            }
+                        },
+                        {
+                            key: '1-1',
+                            data: {
+                                name: 'backup-2.zip',
+                                size: '10kb',
+                                type: 'Zip'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '2',
+                    data: {
+                        name: 'Desktop',
+                        size: '150kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '2-0',
+                            data: {
+                                name: 'note-meeting.txt',
+                                size: '50kb',
+                                type: 'Text'
+                            }
+                        },
+                        {
+                            key: '2-1',
+                            data: {
+                                name: 'note-todo.txt',
+                                size: '100kb',
+                                type: 'Text'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '3',
+                    data: {
+                        name: 'Documents',
+                        size: '75kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '3-0',
+                            data: {
+                                name: 'Work',
+                                size: '55kb',
+                                type: 'Folder'
+                            },
+                            children: [
+                                {
+                                    key: '3-0-0',
+                                    data: {
+                                        name: 'Expenses.doc',
+                                        size: '30kb',
+                                        type: 'Document'
+                                    }
+                                },
+                                {
+                                    key: '3-0-1',
+                                    data: {
+                                        name: 'Resume.doc',
+                                        size: '25kb',
+                                        type: 'Resume'
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            key: '3-1',
+                            data: {
+                                name: 'Home',
+                                size: '20kb',
+                                type: 'Folder'
+                            },
+                            children: [
+                                {
+                                    key: '3-1-0',
+                                    data: {
+                                        name: 'Invoices',
+                                        size: '20kb',
+                                        type: 'Text'
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    key: '4',
+                    data: {
+                        name: 'Downloads',
+                        size: '25kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '4-0',
+                            data: {
+                                name: 'Spanish',
+                                size: '10kb',
+                                type: 'Folder'
+                            },
+                            children: [
+                                {
+                                    key: '4-0-0',
+                                    data: {
+                                        name: 'tutorial-a1.txt',
+                                        size: '5kb',
+                                        type: 'Text'
+                                    }
+                                },
+                                {
+                                    key: '4-0-1',
+                                    data: {
+                                        name: 'tutorial-a2.txt',
+                                        size: '5kb',
+                                        type: 'Text'
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            key: '4-1',
+                            data: {
+                                name: 'Travel',
+                                size: '15kb',
+                                type: 'Text'
+                            },
+                            children: [
+                                {
+                                    key: '4-1-0',
+                                    data: {
+                                        name: 'Hotel.pdf',
+                                        size: '10kb',
+                                        type: 'PDF'
+                                    }
+                                },
+                                {
+                                    key: '4-1-1',
+                                    data: {
+                                        name: 'Flight.pdf',
+                                        size: '5kb',
+                                        type: 'PDF'
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    key: '5',
+                    data: {
+                        name: 'Main',
+                        size: '50kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '5-0',
+                            data: {
+                                name: 'bin',
+                                size: '50kb',
+                                type: 'Link'
+                            }
+                        },
+                        {
+                            key: '5-1',
+                            data: {
+                                name: 'etc',
+                                size: '100kb',
+                                type: 'Link'
+                            }
+                        },
+                        {
+                            key: '5-2',
+                            data: {
+                                name: 'var',
+                                size: '100kb',
+                                type: 'Link'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '6',
+                    data: {
+                        name: 'Other',
+                        size: '5kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '6-0',
+                            data: {
+                                name: 'todo.txt',
+                                size: '3kb',
+                                type: 'Text'
+                            }
+                        },
+                        {
+                            key: '6-1',
+                            data: {
+                                name: 'logo.png',
+                                size: '2kb',
+                                type: 'Picture'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '7',
+                    data: {
+                        name: 'Pictures',
+                        size: '150kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '7-0',
+                            data: {
+                                name: 'barcelona.jpg',
+                                size: '90kb',
+                                type: 'Picture'
+                            }
+                        },
+                        {
+                            key: '7-1',
+                            data: {
+                                name: 'primeng.png',
+                                size: '30kb',
+                                type: 'Picture'
+                            }
+                        },
+                        {
+                            key: '7-2',
+                            data: {
+                                name: 'prime.jpg',
+                                size: '30kb',
+                                type: 'Picture'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '8',
+                    data: {
+                        name: 'Videos',
+                        size: '1500kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '8-0',
+                            data: {
+                                name: 'primefaces.mkv',
+                                size: '1000kb',
+                                type: 'Video'
+                            }
+                        },
+                        {
+                            key: '8-1',
+                            data: {
+                                name: 'intro.avi',
+                                size: '500kb',
+                                type: 'Video'
+                            }
+                        }
+                    ]
+                }
+            ];
+        },
+
+        getTreeTableNodes() {
+            return Promise.resolve(this.getTreeTableNodesData());
+        },
+
+        getTreeNodes() {
+            return Promise.resolve(this.getTreeNodesData());
+        }
+    };
+    `,
+    PhotoService: `export const PhotoService = {
+        getData() {
+            return [
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+                    alt: 'Description for Image 1',
+                    title: 'Title 1'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria2.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria2s.jpg',
+                    alt: 'Description for Image 2',
+                    title: 'Title 2'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria3.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria3s.jpg',
+                    alt: 'Description for Image 3',
+                    title: 'Title 3'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria4.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria4s.jpg',
+                    alt: 'Description for Image 4',
+                    title: 'Title 4'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria5.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria5s.jpg',
+                    alt: 'Description for Image 5',
+                    title: 'Title 5'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria6.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria6s.jpg',
+                    alt: 'Description for Image 6',
+                    title: 'Title 6'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria7s.jpg',
+                    alt: 'Description for Image 7',
+                    title: 'Title 7'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria8.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria8s.jpg',
+                    alt: 'Description for Image 8',
+                    title: 'Title 8'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria9.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria9s.jpg',
+                    alt: 'Description for Image 9',
+                    title: 'Title 9'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10s.jpg',
+                    alt: 'Description for Image 10',
+                    title: 'Title 10'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11s.jpg',
+                    alt: 'Description for Image 11',
+                    title: 'Title 11'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg',
+                    alt: 'Description for Image 12',
+                    title: 'Title 12'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13s.jpg',
+                    alt: 'Description for Image 13',
+                    title: 'Title 13'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria14.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria14s.jpg',
+                    alt: 'Description for Image 14',
+                    title: 'Title 14'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria15.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria15s.jpg',
+                    alt: 'Description for Image 15',
+                    title: 'Title 15'
+                }
+            ];
+        },
+
+        getImages() {
+            return Promise.resolve(this.getData());
+        }
+    };
+
+    `,
+    ProductService: `export const ProductService = {
+        getProductsData() {
+            return [
+                {
+                    id: '1000',
+                    code: 'f230fh0g3',
+                    name: 'Bamboo Watch',
+                    description: 'Product Description',
+                    image: 'bamboo-watch.jpg',
+                    price: 65,
+                    category: 'Accessories',
+                    quantity: 24,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1001',
+                    code: 'nvklal433',
+                    name: 'Black Watch',
+                    description: 'Product Description',
+                    image: 'black-watch.jpg',
+                    price: 72,
+                    category: 'Accessories',
+                    quantity: 61,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1002',
+                    code: 'zz21cz3c1',
+                    name: 'Blue Band',
+                    description: 'Product Description',
+                    image: 'blue-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1003',
+                    code: '244wgerg2',
+                    name: 'Blue T-Shirt',
+                    description: 'Product Description',
+                    image: 'blue-t-shirt.jpg',
+                    price: 29,
+                    category: 'Clothing',
+                    quantity: 25,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1004',
+                    code: 'h456wer53',
+                    name: 'Bracelet',
+                    description: 'Product Description',
+                    image: 'bracelet.jpg',
+                    price: 15,
+                    category: 'Accessories',
+                    quantity: 73,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1005',
+                    code: 'av2231fwg',
+                    name: 'Brown Purse',
+                    description: 'Product Description',
+                    image: 'brown-purse.jpg',
+                    price: 120,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1006',
+                    code: 'bib36pfvm',
+                    name: 'Chakra Bracelet',
+                    description: 'Product Description',
+                    image: 'chakra-bracelet.jpg',
+                    price: 32,
+                    category: 'Accessories',
+                    quantity: 5,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1007',
+                    code: 'mbvjkgip5',
+                    name: 'Galaxy Earrings',
+                    description: 'Product Description',
+                    image: 'galaxy-earrings.jpg',
+                    price: 34,
+                    category: 'Accessories',
+                    quantity: 23,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1008',
+                    code: 'vbb124btr',
+                    name: 'Game Controller',
+                    description: 'Product Description',
+                    image: 'game-controller.jpg',
+                    price: 99,
+                    category: 'Electronics',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1009',
+                    code: 'cm230f032',
+                    name: 'Gaming Set',
+                    description: 'Product Description',
+                    image: 'gaming-set.jpg',
+                    price: 299,
+                    category: 'Electronics',
+                    quantity: 63,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1010',
+                    code: 'plb34234v',
+                    name: 'Gold Phone Case',
+                    description: 'Product Description',
+                    image: 'gold-phone-case.jpg',
+                    price: 24,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1011',
+                    code: '4920nnc2d',
+                    name: 'Green Earbuds',
+                    description: 'Product Description',
+                    image: 'green-earbuds.jpg',
+                    price: 89,
+                    category: 'Electronics',
+                    quantity: 23,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1012',
+                    code: '250vm23cc',
+                    name: 'Green T-Shirt',
+                    description: 'Product Description',
+                    image: 'green-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 74,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1013',
+                    code: 'fldsmn31b',
+                    name: 'Grey T-Shirt',
+                    description: 'Product Description',
+                    image: 'grey-t-shirt.jpg',
+                    price: 48,
+                    category: 'Clothing',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1014',
+                    code: 'waas1x2as',
+                    name: 'Headphones',
+                    description: 'Product Description',
+                    image: 'headphones.jpg',
+                    price: 175,
+                    category: 'Electronics',
+                    quantity: 8,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1015',
+                    code: 'vb34btbg5',
+                    name: 'Light Green T-Shirt',
+                    description: 'Product Description',
+                    image: 'light-green-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 34,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1016',
+                    code: 'k8l6j58jl',
+                    name: 'Lime Band',
+                    description: 'Product Description',
+                    image: 'lime-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 12,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1017',
+                    code: 'v435nn85n',
+                    name: 'Mini Speakers',
+                    description: 'Product Description',
+                    image: 'mini-speakers.jpg',
+                    price: 85,
+                    category: 'Clothing',
+                    quantity: 42,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1018',
+                    code: '09zx9c0zc',
+                    name: 'Painted Phone Case',
+                    description: 'Product Description',
+                    image: 'painted-phone-case.jpg',
+                    price: 56,
+                    category: 'Accessories',
+                    quantity: 41,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1019',
+                    code: 'mnb5mb2m5',
+                    name: 'Pink Band',
+                    description: 'Product Description',
+                    image: 'pink-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 63,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1020',
+                    code: 'r23fwf2w3',
+                    name: 'Pink Purse',
+                    description: 'Product Description',
+                    image: 'pink-purse.jpg',
+                    price: 110,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1021',
+                    code: 'pxpzczo23',
+                    name: 'Purple Band',
+                    description: 'Product Description',
+                    image: 'purple-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 6,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1022',
+                    code: '2c42cb5cb',
+                    name: 'Purple Gemstone Necklace',
+                    description: 'Product Description',
+                    image: 'purple-gemstone-necklace.jpg',
+                    price: 45,
+                    category: 'Accessories',
+                    quantity: 62,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1023',
+                    code: '5k43kkk23',
+                    name: 'Purple T-Shirt',
+                    description: 'Product Description',
+                    image: 'purple-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1024',
+                    code: 'lm2tny2k4',
+                    name: 'Shoes',
+                    description: 'Product Description',
+                    image: 'shoes.jpg',
+                    price: 64,
+                    category: 'Clothing',
+                    quantity: 0,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1025',
+                    code: 'nbm5mv45n',
+                    name: 'Sneakers',
+                    description: 'Product Description',
+                    image: 'sneakers.jpg',
+                    price: 78,
+                    category: 'Clothing',
+                    quantity: 52,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1026',
+                    code: 'zx23zc42c',
+                    name: 'Teal T-Shirt',
+                    description: 'Product Description',
+                    image: 'teal-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 3,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1027',
+                    code: 'acvx872gc',
+                    name: 'Yellow Earbuds',
+                    description: 'Product Description',
+                    image: 'yellow-earbuds.jpg',
+                    price: 89,
+                    category: 'Electronics',
+                    quantity: 35,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1028',
+                    code: 'tx125ck42',
+                    name: 'Yoga Mat',
+                    description: 'Product Description',
+                    image: 'yoga-mat.jpg',
+                    price: 20,
+                    category: 'Fitness',
+                    quantity: 15,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1029',
+                    code: 'gwuby345v',
+                    name: 'Yoga Set',
+                    description: 'Product Description',
+                    image: 'yoga-set.jpg',
+                    price: 20,
+                    category: 'Fitness',
+                    quantity: 25,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 8
+                }
+            ];
+        },
+
+        getProductsWithOrdersData() {
+            return [
+                {
+                    id: '1000',
+                    code: 'f230fh0g3',
+                    name: 'Bamboo Watch',
+                    description: 'Product Description',
+                    image: 'bamboo-watch.jpg',
+                    price: 65,
+                    category: 'Accessories',
+                    quantity: 24,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1000-0',
+                            productCode: 'f230fh0g3',
+                            date: '2020-09-13',
+                            amount: 65,
+                            quantity: 1,
+                            customer: 'David James',
+                            status: 'PENDING'
+                        },
+                        {
+                            id: '1000-1',
+                            productCode: 'f230fh0g3',
+                            date: '2020-05-14',
+                            amount: 130,
+                            quantity: 2,
+                            customer: 'Leon Rodrigues',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1000-2',
+                            productCode: 'f230fh0g3',
+                            date: '2019-01-04',
+                            amount: 65,
+                            quantity: 1,
+                            customer: 'Juan Alejandro',
+                            status: 'RETURNED'
+                        },
+                        {
+                            id: '1000-3',
+                            productCode: 'f230fh0g3',
+                            date: '2020-09-13',
+                            amount: 195,
+                            quantity: 3,
+                            customer: 'Claire Morrow',
+                            status: 'CANCELLED'
+                        }
+                    ]
+                },
+                {
+                    id: '1001',
+                    code: 'nvklal433',
+                    name: 'Black Watch',
+                    description: 'Product Description',
+                    image: 'black-watch.jpg',
+                    price: 72,
+                    category: 'Accessories',
+                    quantity: 61,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1001-0',
+                            productCode: 'nvklal433',
+                            date: '2020-05-14',
+                            amount: 72,
+                            quantity: 1,
+                            customer: 'Maisha Jefferson',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1001-1',
+                            productCode: 'nvklal433',
+                            date: '2020-02-28',
+                            amount: 144,
+                            quantity: 2,
+                            customer: 'Octavia Murillo',
+                            status: 'PENDING'
+                        }
+                    ]
+                },
+                {
+                    id: '1002',
+                    code: 'zz21cz3c1',
+                    name: 'Blue Band',
+                    description: 'Product Description',
+                    image: 'blue-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1002-0',
+                            productCode: 'zz21cz3c1',
+                            date: '2020-07-05',
+                            amount: 79,
+                            quantity: 1,
+                            customer: 'Stacey Leja',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1002-1',
+                            productCode: 'zz21cz3c1',
+                            date: '2020-02-06',
+                            amount: 79,
+                            quantity: 1,
+                            customer: 'Ashley Wickens',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1003',
+                    code: '244wgerg2',
+                    name: 'Blue T-Shirt',
+                    description: 'Product Description',
+                    image: 'blue-t-shirt.jpg',
+                    price: 29,
+                    category: 'Clothing',
+                    quantity: 25,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: []
+                },
+                {
+                    id: '1004',
+                    code: 'h456wer53',
+                    name: 'Bracelet',
+                    description: 'Product Description',
+                    image: 'bracelet.jpg',
+                    price: 15,
+                    category: 'Accessories',
+                    quantity: 73,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1004-0',
+                            productCode: 'h456wer53',
+                            date: '2020-09-05',
+                            amount: 60,
+                            quantity: 4,
+                            customer: 'Mayumi Misaki',
+                            status: 'PENDING'
+                        },
+                        {
+                            id: '1004-1',
+                            productCode: 'h456wer53',
+                            date: '2019-04-16',
+                            amount: 2,
+                            quantity: 30,
+                            customer: 'Francesco Salvatore',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1005',
+                    code: 'av2231fwg',
+                    name: 'Brown Purse',
+                    description: 'Product Description',
+                    image: 'brown-purse.jpg',
+                    price: 120,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1005-0',
+                            productCode: 'av2231fwg',
+                            date: '2020-01-25',
+                            amount: 120,
+                            quantity: 1,
+                            customer: 'Isabel Sinclair',
+                            status: 'RETURNED'
+                        },
+                        {
+                            id: '1005-1',
+                            productCode: 'av2231fwg',
+                            date: '2019-03-12',
+                            amount: 240,
+                            quantity: 2,
+                            customer: 'Lionel Clifford',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1005-2',
+                            productCode: 'av2231fwg',
+                            date: '2019-05-05',
+                            amount: 120,
+                            quantity: 1,
+                            customer: 'Cody Chavez',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1006',
+                    code: 'bib36pfvm',
+                    name: 'Chakra Bracelet',
+                    description: 'Product Description',
+                    image: 'chakra-bracelet.jpg',
+                    price: 32,
+                    category: 'Accessories',
+                    quantity: 5,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1006-0',
+                            productCode: 'bib36pfvm',
+                            date: '2020-02-24',
+                            amount: 32,
+                            quantity: 1,
+                            customer: 'Arvin Darci',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1006-1',
+                            productCode: 'bib36pfvm',
+                            date: '2020-01-14',
+                            amount: 64,
+                            quantity: 2,
+                            customer: 'Izzy Jones',
+                            status: 'PENDING'
+                        }
+                    ]
+                },
+                {
+                    id: '1007',
+                    code: 'mbvjkgip5',
+                    name: 'Galaxy Earrings',
+                    description: 'Product Description',
+                    image: 'galaxy-earrings.jpg',
+                    price: 34,
+                    category: 'Accessories',
+                    quantity: 23,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1007-0',
+                            productCode: 'mbvjkgip5',
+                            date: '2020-06-19',
+                            amount: 34,
+                            quantity: 1,
+                            customer: 'Jennifer Smith',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1008',
+                    code: 'vbb124btr',
+                    name: 'Game Controller',
+                    description: 'Product Description',
+                    image: 'game-controller.jpg',
+                    price: 99,
+                    category: 'Electronics',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1008-0',
+                            productCode: 'vbb124btr',
+                            date: '2020-01-05',
+                            amount: 99,
+                            quantity: 1,
+                            customer: 'Jeanfrancois David',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1008-1',
+                            productCode: 'vbb124btr',
+                            date: '2020-01-19',
+                            amount: 198,
+                            quantity: 2,
+                            customer: 'Ivar Greenwood',
+                            status: 'RETURNED'
+                        }
+                    ]
+                },
+                {
+                    id: '1009',
+                    code: 'cm230f032',
+                    name: 'Gaming Set',
+                    description: 'Product Description',
+                    image: 'gaming-set.jpg',
+                    price: 299,
+                    category: 'Electronics',
+                    quantity: 63,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1009-0',
+                            productCode: 'cm230f032',
+                            date: '2020-06-24',
+                            amount: 299,
+                            quantity: 1,
+                            customer: 'Kadeem Mujtaba',
+                            status: 'PENDING'
+                        },
+                        {
+                            id: '1009-1',
+                            productCode: 'cm230f032',
+                            date: '2020-05-11',
+                            amount: 299,
+                            quantity: 1,
+                            customer: 'Ashley Wickens',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1009-2',
+                            productCode: 'cm230f032',
+                            date: '2019-02-07',
+                            amount: 299,
+                            quantity: 1,
+                            customer: 'Julie Johnson',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1009-3',
+                            productCode: 'cm230f032',
+                            date: '2020-04-26',
+                            amount: 299,
+                            quantity: 1,
+                            customer: 'Tony Costa',
+                            status: 'CANCELLED'
+                        }
+                    ]
+                },
+                {
+                    id: '1010',
+                    code: 'plb34234v',
+                    name: 'Gold Phone Case',
+                    description: 'Product Description',
+                    image: 'gold-phone-case.jpg',
+                    price: 24,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1010-0',
+                            productCode: 'plb34234v',
+                            date: '2020-02-04',
+                            amount: 24,
+                            quantity: 1,
+                            customer: 'James Butt',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1010-1',
+                            productCode: 'plb34234v',
+                            date: '2020-05-05',
+                            amount: 48,
+                            quantity: 2,
+                            customer: 'Josephine Darakjy',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1011',
+                    code: '4920nnc2d',
+                    name: 'Green Earbuds',
+                    description: 'Product Description',
+                    image: 'green-earbuds.jpg',
+                    price: 89,
+                    category: 'Electronics',
+                    quantity: 23,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1011-0',
+                            productCode: '4920nnc2d',
+                            date: '2020-06-01',
+                            amount: 89,
+                            quantity: 1,
+                            customer: 'Art Venere',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1012',
+                    code: '250vm23cc',
+                    name: 'Green T-Shirt',
+                    description: 'Product Description',
+                    image: 'green-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 74,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1012-0',
+                            productCode: '250vm23cc',
+                            date: '2020-02-05',
+                            amount: 49,
+                            quantity: 1,
+                            customer: 'Lenna Paprocki',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1012-1',
+                            productCode: '250vm23cc',
+                            date: '2020-02-15',
+                            amount: 49,
+                            quantity: 1,
+                            customer: 'Donette Foller',
+                            status: 'PENDING'
+                        }
+                    ]
+                },
+                {
+                    id: '1013',
+                    code: 'fldsmn31b',
+                    name: 'Grey T-Shirt',
+                    description: 'Product Description',
+                    image: 'grey-t-shirt.jpg',
+                    price: 48,
+                    category: 'Clothing',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1013-0',
+                            productCode: 'fldsmn31b',
+                            date: '2020-04-01',
+                            amount: 48,
+                            quantity: 1,
+                            customer: 'Simona Morasca',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1014',
+                    code: 'waas1x2as',
+                    name: 'Headphones',
+                    description: 'Product Description',
+                    image: 'headphones.jpg',
+                    price: 175,
+                    category: 'Electronics',
+                    quantity: 8,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1014-0',
+                            productCode: 'waas1x2as',
+                            date: '2020-05-15',
+                            amount: 175,
+                            quantity: 1,
+                            customer: 'Lenna Paprocki',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1014-1',
+                            productCode: 'waas1x2as',
+                            date: '2020-01-02',
+                            amount: 175,
+                            quantity: 1,
+                            customer: 'Donette Foller',
+                            status: 'CANCELLED'
+                        }
+                    ]
+                },
+                {
+                    id: '1015',
+                    code: 'vb34btbg5',
+                    name: 'Light Green T-Shirt',
+                    description: 'Product Description',
+                    image: 'light-green-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 34,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1015-0',
+                            productCode: 'vb34btbg5',
+                            date: '2020-07-02',
+                            amount: 98,
+                            quantity: 2,
+                            customer: 'Mitsue Tollner',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1016',
+                    code: 'k8l6j58jl',
+                    name: 'Lime Band',
+                    description: 'Product Description',
+                    image: 'lime-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 12,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3,
+                    orders: []
+                },
+                {
+                    id: '1017',
+                    code: 'v435nn85n',
+                    name: 'Mini Speakers',
+                    description: 'Product Description',
+                    image: 'mini-speakers.jpg',
+                    price: 85,
+                    category: 'Clothing',
+                    quantity: 42,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1017-0',
+                            productCode: 'v435nn85n',
+                            date: '2020-07-12',
+                            amount: 85,
+                            quantity: 1,
+                            customer: 'Minna Amigon',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1018',
+                    code: '09zx9c0zc',
+                    name: 'Painted Phone Case',
+                    description: 'Product Description',
+                    image: 'painted-phone-case.jpg',
+                    price: 56,
+                    category: 'Accessories',
+                    quantity: 41,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1018-0',
+                            productCode: '09zx9c0zc',
+                            date: '2020-07-01',
+                            amount: 56,
+                            quantity: 1,
+                            customer: 'Abel Maclead',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1018-1',
+                            productCode: '09zx9c0zc',
+                            date: '2020-05-02',
+                            amount: 56,
+                            quantity: 1,
+                            customer: 'Minna Amigon',
+                            status: 'RETURNED'
+                        }
+                    ]
+                },
+                {
+                    id: '1019',
+                    code: 'mnb5mb2m5',
+                    name: 'Pink Band',
+                    description: 'Product Description',
+                    image: 'pink-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 63,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: []
+                },
+                {
+                    id: '1020',
+                    code: 'r23fwf2w3',
+                    name: 'Pink Purse',
+                    description: 'Product Description',
+                    image: 'pink-purse.jpg',
+                    price: 110,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1020-0',
+                            productCode: 'r23fwf2w3',
+                            date: '2020-05-29',
+                            amount: 110,
+                            quantity: 1,
+                            customer: 'Kiley Caldarera',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1020-1',
+                            productCode: 'r23fwf2w3',
+                            date: '2020-02-11',
+                            amount: 220,
+                            quantity: 2,
+                            customer: 'Graciela Ruta',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1021',
+                    code: 'pxpzczo23',
+                    name: 'Purple Band',
+                    description: 'Product Description',
+                    image: 'purple-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 6,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1021-0',
+                            productCode: 'pxpzczo23',
+                            date: '2020-02-02',
+                            amount: 79,
+                            quantity: 1,
+                            customer: 'Cammy Albares',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1022',
+                    code: '2c42cb5cb',
+                    name: 'Purple Gemstone Necklace',
+                    description: 'Product Description',
+                    image: 'purple-gemstone-necklace.jpg',
+                    price: 45,
+                    category: 'Accessories',
+                    quantity: 62,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1022-0',
+                            productCode: '2c42cb5cb',
+                            date: '2020-06-29',
+                            amount: 45,
+                            quantity: 1,
+                            customer: 'Mattie Poquette',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1022-1',
+                            productCode: '2c42cb5cb',
+                            date: '2020-02-11',
+                            amount: 135,
+                            quantity: 3,
+                            customer: 'Meaghan Garufi',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1023',
+                    code: '5k43kkk23',
+                    name: 'Purple T-Shirt',
+                    description: 'Product Description',
+                    image: 'purple-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1023-0',
+                            productCode: '5k43kkk23',
+                            date: '2020-04-15',
+                            amount: 49,
+                            quantity: 1,
+                            customer: 'Gladys Rim',
+                            status: 'RETURNED'
+                        }
+                    ]
+                },
+                {
+                    id: '1024',
+                    code: 'lm2tny2k4',
+                    name: 'Shoes',
+                    description: 'Product Description',
+                    image: 'shoes.jpg',
+                    price: 64,
+                    category: 'Clothing',
+                    quantity: 0,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: []
+                },
+                {
+                    id: '1025',
+                    code: 'nbm5mv45n',
+                    name: 'Sneakers',
+                    description: 'Product Description',
+                    image: 'sneakers.jpg',
+                    price: 78,
+                    category: 'Clothing',
+                    quantity: 52,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1025-0',
+                            productCode: 'nbm5mv45n',
+                            date: '2020-02-19',
+                            amount: 78,
+                            quantity: 1,
+                            customer: 'Yuki Whobrey',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1025-1',
+                            productCode: 'nbm5mv45n',
+                            date: '2020-05-21',
+                            amount: 78,
+                            quantity: 1,
+                            customer: 'Fletcher Flosi',
+                            status: 'PENDING'
+                        }
+                    ]
+                },
+                {
+                    id: '1026',
+                    code: 'zx23zc42c',
+                    name: 'Teal T-Shirt',
+                    description: 'Product Description',
+                    image: 'teal-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 3,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1026-0',
+                            productCode: 'zx23zc42c',
+                            date: '2020-04-24',
+                            amount: 98,
+                            quantity: 2,
+                            customer: 'Bette Nicka',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1027',
+                    code: 'acvx872gc',
+                    name: 'Yellow Earbuds',
+                    description: 'Product Description',
+                    image: 'yellow-earbuds.jpg',
+                    price: 89,
+                    category: 'Electronics',
+                    quantity: 35,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1027-0',
+                            productCode: 'acvx872gc',
+                            date: '2020-01-29',
+                            amount: 89,
+                            quantity: 1,
+                            customer: 'Veronika Inouye',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1027-1',
+                            productCode: 'acvx872gc',
+                            date: '2020-06-11',
+                            amount: 89,
+                            quantity: 1,
+                            customer: 'Willard Kolmetz',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1028',
+                    code: 'tx125ck42',
+                    name: 'Yoga Mat',
+                    description: 'Product Description',
+                    image: 'yoga-mat.jpg',
+                    price: 20,
+                    category: 'Fitness',
+                    quantity: 15,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: []
+                },
+                {
+                    id: '1029',
+                    code: 'gwuby345v',
+                    name: 'Yoga Set',
+                    description: 'Product Description',
+                    image: 'yoga-set.jpg',
+                    price: 20,
+                    category: 'Fitness',
+                    quantity: 25,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 8,
+                    orders: [
+                        {
+                            id: '1029-0',
+                            productCode: 'gwuby345v',
+                            date: '2020-02-14',
+                            amount: 4,
+                            quantity: 80,
+                            customer: 'Maryann Royster',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                }
+            ];
+        },
+
+        getProductsMini() {
+            return Promise.resolve(this.getProductsData().slice(0, 5));
+        },
+
+        getProductsSmall() {
+            return Promise.resolve(this.getProductsData().slice(0, 10));
+        },
+
+        getProducts() {
+            return Promise.resolve(this.getProductsData());
+        },
+
+        getProductsWithOrdersSmall() {
+            return Promise.resolve(this.getProductsWithOrdersData().slice(0, 10));
+        },
+
+        getProductsWithOrders() {
+            return Promise.resolve(this.getProductsWithOrdersData());
+        }
+    };
+
+    `
+};
+
+export { services };
diff --git a/apps/labs/components/doc/codeeditor/templates.js b/apps/labs/components/doc/codeeditor/templates.js
new file mode 100644
index 000000000..1e7cb08e3
--- /dev/null
+++ b/apps/labs/components/doc/codeeditor/templates.js
@@ -0,0 +1,1082 @@
+import pkg from '@/package.json';
+//import Aura from '@/presets/aura';
+//import Lara from '@/presets/lara';
+import { isArray, isDate, isFunction, isObject } from '@primeuix/utils/object';
+import { services } from './services';
+
+const PrimeVue = {
+    version: '^4.0.1',
+    description:
+        'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.'
+};
+
+const app_dependencies = pkg ? pkg.devDependencies : {};
+
+const core_dependencies = {
+    vue: '^3.2.45',
+    'vue-router': '^4.1.6',
+    '@vitejs/plugin-vue': '^4.0.0',
+    vite: '^4.0.0',
+    primevue: PrimeVue.version || 'latest',
+    primeicons: app_dependencies['primeicons'] || 'latest',
+    tailwindcss: app_dependencies['tailwindcss'] || 'latest',
+    autoprefixer: app_dependencies['autoprefixer'] || 'latest',
+    postcss: app_dependencies['postcss'] || 'latest',
+    'tailwindcss-primeui': app_dependencies['tailwindcss-primeui'] || 'latest'
+};
+
+// create-vue -> https://github.com/vuejs/create-vue
+const getVueApp = (props = {}, sourceType) => {
+    const path = 'src/';
+    const { code: sources, title = 'primevue_demo', description = '', service, extPages, dependencies: deps, component, extFiles, embedded } = props;
+    const dependencies = { ...core_dependencies, ...deps };
+
+    const fileExtension = '.vue';
+    const mainFileName = 'App';
+    const sourceFileName = `${path}${mainFileName}${fileExtension}`;
+    let element = '',
+        imports = '',
+        unstyled = '',
+        themeSwitchCode = '',
+        routeFiles = {};
+
+    sources.routeFiles &&
+        Object.entries(sources.routeFiles).forEach(([key, value]) => {
+            routeFiles[`${path + key}`] = {
+                content: value
+            };
+        });
+
+    let extFilesSource = extFiles
+        ? embedded
+            ? extFiles['composition']
+            : extFiles[sourceType.language]
+            ? { ...extFiles[sourceType.language] }
+            : Object.keys(extFiles)
+                  .filter((k) => !sourceTypes.includes(k))
+                  .reduce((result, current) => (result[current] = extFiles[current]) && result, {})
+        : {};
+
+    if (deps !== null && component !== null) {
+        imports += `import ${component} from 'primevue/${component.toLowerCase()}';
+`;
+        element += `app.component('${component}', ${component});
+`;
+    }
+
+    // main.js
+    unstyled += `, unstyled: true, pt: Aura`;
+    imports += `import ThemeSwitcher from './components/ThemeSwitcher.vue';
+import Configurator from './components/Configurator.vue';
+import Lara from './presets/lara';
+import Aura from './presets/aura';
+import appState from './plugins/appState.js';`;
+    element += `app.component('ThemeSwitcher', ThemeSwitcher);
+app.component('Configurator', Configurator);
+app.use(appState);`;
+
+    // App.vue
+    themeSwitchCode = ''.concat(
+        `<template>
+    <ThemeSwitcher />`,
+        sources.split('<template>')[1]
+    );
+
+    const files = {
+        'package.json': {
+            content: {
+                name: title.toLowerCase().replaceAll(' ', '_'),
+                description: `**${description}** ${PrimeVue.description}`,
+                keywords: [],
+                scripts: {
+                    dev: 'vite',
+                    build: 'vite build',
+                    preview: 'vite preview'
+                },
+                dependencies,
+                main: 'src/App.vue'
+            }
+        },
+        'vite.config.js': {
+            content: `import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+    }
+});`
+        },
+        'index.html': {
+            content: `<!DOCTYPE html>
+<html lang="en" data-preset="noir">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="**${description}** ${PrimeVue.description}" />
+        <!-- Added to show icons in the editor -->
+        <link rel="stylesheet" href="https://unpkg.com/primeicons@${dependencies['primeicons'].replace(/[\^|~]/gi, '')}/primeicons.css">
+        <title>PrimeVue Preset App</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.js"></script>
+    </body>
+</html>`
+        },
+        [`${path}main.js`]: {
+            content: `
+import "primeicons/primeicons.css";
+import "./style.css";
+import "./flags.css";
+
+import { createApp } from "vue";
+import App from "./App.vue";
+import { router } from "./router";
+import PrimeVue from "primevue/config";
+import AutoComplete from 'primevue/autocomplete';
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
+import AccordionTab from 'primevue/accordiontab';
+import AnimateOnScroll from 'primevue/animateonscroll';
+import Avatar from 'primevue/avatar';
+import AvatarGroup from 'primevue/avatargroup';
+import Badge from 'primevue/badge';
+import BadgeDirective from "primevue/badgedirective";
+import BlockUI from 'primevue/blockui';
+import Button from 'primevue/button';
+import ButtonGroup from 'primevue/buttongroup';
+import Breadcrumb from 'primevue/breadcrumb';
+import Calendar from 'primevue/calendar';
+import Card from 'primevue/card';
+import CascadeSelect from 'primevue/cascadeselect';
+import Carousel from 'primevue/carousel';
+import Checkbox from 'primevue/checkbox';
+import Chip from 'primevue/chip';
+import Chips from 'primevue/chips';
+import ColorPicker from 'primevue/colorpicker';
+import Column from 'primevue/column';
+import ColumnGroup from 'primevue/columngroup';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ConfirmPopup from 'primevue/confirmpopup';
+import ConfirmationService from 'primevue/confirmationservice';
+import ContextMenu from 'primevue/contextmenu';
+import DataTable from 'primevue/datatable';
+import DataView from 'primevue/dataview';
+import DatePicker from 'primevue/datepicker';
+import DeferredContent from 'primevue/deferredcontent';
+import Dialog from 'primevue/dialog';
+import DialogService from 'primevue/dialogservice'
+import Divider from 'primevue/divider';
+import Dock from 'primevue/dock';
+import Drawer from 'primevue/drawer';
+import Dropdown from 'primevue/dropdown';
+import DynamicDialog from 'primevue/dynamicdialog';
+import Fieldset from 'primevue/fieldset';
+import FileUpload from 'primevue/fileupload';
+import FloatLabel from 'primevue/floatlabel';
+import FocusTrap from 'primevue/focustrap';
+import Galleria from 'primevue/galleria';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import Image from 'primevue/image';
+import InlineMessage from 'primevue/inlinemessage';
+import Inplace from 'primevue/inplace';
+import InputChips from 'primevue/inputchips';
+import InputGroup from 'primevue/inputgroup';
+import InputGroupAddon from 'primevue/inputgroupaddon';
+import InputMask from 'primevue/inputmask';
+import InputNumber from 'primevue/inputnumber';
+import InputOtp from 'primevue/inputotp';
+import InputSwitch from 'primevue/inputswitch';
+import InputText from 'primevue/inputtext';
+import Knob from 'primevue/knob';
+import Listbox from 'primevue/listbox';
+import MegaMenu from 'primevue/megamenu';
+import Menu from 'primevue/menu';
+import Menubar from 'primevue/menubar';
+import Message from 'primevue/message';
+import MeterGroup from 'primevue/metergroup';
+import MultiSelect from 'primevue/multiselect';
+import OrderList from 'primevue/orderlist';
+import OrganizationChart from 'primevue/organizationchart';
+import OverlayBadge from 'primevue/overlaybadge';
+import OverlayPanel from 'primevue/overlaypanel';
+import Paginator from 'primevue/paginator';
+import Panel from 'primevue/panel';
+import PanelMenu from 'primevue/panelmenu';
+import Password from 'primevue/password';
+import PickList from 'primevue/picklist';
+import Popover from 'primevue/popover';
+import ProgressBar from 'primevue/progressbar';
+import ProgressSpinner from 'primevue/progressspinner';
+import Rating from 'primevue/rating';
+import RadioButton from 'primevue/radiobutton';
+import Ripple from 'primevue/ripple';
+import Row from 'primevue/row';
+import ScrollPanel from 'primevue/scrollpanel';
+import ScrollTop from 'primevue/scrolltop';
+import Select from 'primevue/select';
+import SelectButton from 'primevue/selectbutton';
+import Skeleton from 'primevue/skeleton';
+import Slider from 'primevue/slider';
+import Sidebar from 'primevue/sidebar';
+import SpeedDial from 'primevue/speeddial';
+import SplitButton from 'primevue/splitbutton';
+import Splitter from 'primevue/splitter';
+import SplitterPanel from 'primevue/splitterpanel';
+import Stepper from 'primevue/stepper';
+import StepList from 'primevue/steplist';
+import StepPanels from 'primevue/steppanels';
+import StepItem from 'primevue/stepitem';
+import Step from 'primevue/step';
+import StepPanel from 'primevue/steppanel';
+import StyleClass from 'primevue/styleclass';
+import TabMenu from 'primevue/tabmenu';
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import Tag from 'primevue/tag';
+import Terminal from 'primevue/terminal';
+import Textarea from 'primevue/textarea';
+import TieredMenu from 'primevue/tieredmenu';
+import Timeline from 'primevue/timeline';
+import ToggleButton from 'primevue/togglebutton';
+import ToggleSwitch from 'primevue/toggleswitch';
+import Tooltip from 'primevue/tooltip';
+import Toast from 'primevue/toast';
+import ToastService from 'primevue/toastservice';
+import Toolbar from 'primevue/toolbar';
+import Tree from 'primevue/tree';
+import TreeSelect from 'primevue/treeselect';
+import TreeTable from 'primevue/treetable';
+import VirtualScroller from 'primevue/virtualscroller';
+${imports}
+
+const app = createApp(App);
+
+app.use(PrimeVue, { ripple: true ${unstyled} });
+app.use(ConfirmationService);
+app.use(ToastService);
+app.use(DialogService);
+app.use(router);
+
+app.directive('tooltip', Tooltip);
+app.directive('badge', BadgeDirective);
+app.directive('ripple', Ripple);
+app.directive('styleclass', StyleClass);
+app.directive('focustrap', FocusTrap);
+app.directive('animateonscroll', AnimateOnScroll);
+
+app.component('Accordion', Accordion);
+app.component('AccordionPanel', AccordionPanel);
+app.component('AccordionHeader', AccordionHeader);
+app.component('AccordionContent', AccordionContent);
+app.component('AccordionTab', AccordionTab);
+app.component('AutoComplete', AutoComplete);
+app.component('Avatar', Avatar);
+app.component('AvatarGroup', AvatarGroup);
+app.component('Badge', Badge);
+app.component('BlockUI', BlockUI);
+app.component('Breadcrumb', Breadcrumb);
+app.component('Button', Button);
+app.component('ButtonGroup', ButtonGroup);
+app.component('Calendar', Calendar);
+app.component('Card', Card);
+app.component('Carousel', Carousel);
+app.component('CascadeSelect', CascadeSelect);
+app.component('Checkbox', Checkbox);
+app.component('Chip', Chip);
+app.component('Chips', Chips);
+app.component('ColorPicker', ColorPicker);
+app.component('Column', Column);
+app.component('ColumnGroup', ColumnGroup);
+app.component('ConfirmDialog', ConfirmDialog);
+app.component('ConfirmPopup', ConfirmPopup);
+app.component('ContextMenu', ContextMenu);
+app.component('DataTable', DataTable);
+app.component('DataView', DataView);
+app.component('DatePicker', DatePicker);
+app.component('DeferredContent', DeferredContent);
+app.component('Dialog', Dialog);
+app.component('Divider', Divider);
+app.component('Dock', Dock);
+app.component('Drawer', Drawer);
+app.component('Dropdown', Dropdown);
+app.component('DynamicDialog', DynamicDialog);
+app.component('Fieldset', Fieldset);
+app.component('FileUpload', FileUpload);
+app.component('FloatLabel', FloatLabel);
+app.component('Galleria', Galleria);
+app.component('IconField', IconField);
+app.component('Image', Image);
+app.component('InlineMessage', InlineMessage);
+app.component('Inplace', Inplace);
+app.component('InputChips', InputChips);
+app.component('InputGroup', InputGroup);
+app.component('InputGroupAddon', InputGroupAddon);
+app.component('InputIcon', InputIcon);
+app.component('InputMask', InputMask);
+app.component('InputNumber', InputNumber);
+app.component('InputOtp', InputOtp);
+app.component('InputSwitch', InputSwitch);
+app.component('InputText', InputText);
+app.component('Knob', Knob);
+app.component('Listbox', Listbox);
+app.component('MegaMenu', MegaMenu);
+app.component('Menu', Menu);
+app.component('Menubar', Menubar);
+app.component('Message', Message);
+app.component('MeterGroup', MeterGroup);
+app.component('MultiSelect', MultiSelect);
+app.component('OrderList', OrderList);
+app.component('OrganizationChart', OrganizationChart);
+app.component('OverlayBadge', OverlayBadge);
+app.component('OverlayPanel', OverlayPanel);
+app.component('Paginator', Paginator);
+app.component('Panel', Panel);
+app.component('PanelMenu', PanelMenu);
+app.component('Password', Password);
+app.component('PickList', PickList);
+app.component('Popover', Popover);
+app.component('ProgressBar', ProgressBar);
+app.component('ProgressSpinner', ProgressSpinner);
+app.component('RadioButton', RadioButton);
+app.component('Rating', Rating);
+app.component('Row', Row);
+app.component('ScrollPanel', ScrollPanel);
+app.component('ScrollTop', ScrollTop);
+app.component('Select', Select);
+app.component('SelectButton', SelectButton);
+app.component('Slider', Slider);
+app.component('Sidebar', Sidebar);
+app.component('Skeleton', Skeleton);
+app.component('SpeedDial', SpeedDial);
+app.component('SplitButton', SplitButton);
+app.component('Splitter', Splitter);
+app.component('SplitterPanel', SplitterPanel);
+app.component('Stepper', Stepper);
+app.component('StepList', StepList);
+app.component('StepPanels', StepPanels);
+app.component('StepItem', StepItem);
+app.component('Step', Step);
+app.component('StepPanel', StepPanel);
+
+app.component('TabMenu', TabMenu);
+app.component('Tabs', Tabs);
+app.component('TabList', TabList);
+app.component('Tab', Tab);
+app.component('TabPanels', TabPanels);
+app.component('TabPanel', TabPanel);
+app.component('Tag', Tag);
+app.component('Textarea', Textarea);
+app.component('Terminal', Terminal);
+app.component('TieredMenu', TieredMenu);
+app.component('Timeline', Timeline);
+app.component('Toast', Toast);
+app.component('Toolbar', Toolbar);
+app.component('ToggleButton', ToggleButton);
+app.component('ToggleSwitch', ToggleSwitch);
+app.component('Tree', Tree);
+app.component('TreeSelect', TreeSelect);
+app.component('TreeTable', TreeTable);
+app.component('VirtualScroller', VirtualScroller);
+${element}
+
+app.mount("#app");
+`
+        },
+        [`${path}style.css`]: {
+            content: tailwindConfig
+        },
+        [`${path}flags.css`]: {
+            content: staticStyles.flags
+        },
+        [`${path}router.js`]: {
+            content: `import { createRouter, createWebHistory } from "vue-router";
+import ${mainFileName} from "./${mainFileName}${fileExtension}";
+
+export const router = createRouter({
+    history: createWebHistory(),
+    routes: [{ path: "/", component: ${mainFileName} }]
+});`
+        },
+        [`${sourceFileName}`]: {
+            content: themeSwitchCode
+        },
+        'public/logo.svg': {
+            content: `
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="139px" height="158px" viewBox="0 0 139 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>head</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-3.000000, -7.000000)">
+            <g id="head" transform="translate(3.000000, 7.000000)">
+                <polygon id="chick-right" fill="#41B883" fill-rule="nonzero" points="102.295646 72.1832018 91.4643424 69.7770951 99.8886897 81.8076287 99.8886897 119.102283 128.772166 95.0412157 128.772166 54.1374014 115.533906 58.9496148"></polygon>
+                <polygon id="chick-left" fill="#41B883" fill-rule="nonzero" transform="translate(27.078259, 86.619842) scale(-1, 1) translate(-27.078259, -86.619842) " points="19.255651 72.1832018 8.42434732 69.7770951 16.8486946 81.8076287 16.8486946 119.102283 45.7321712 95.0412157 45.7321712 54.1374014 32.4939111 58.9496148"></polygon>
+                <polygon id="mask" fill="#41B883" points="40.9182584 84.2137354 50.5460839 69.7770951 56.5634749 73.3862552 80.6330387 73.3862552 86.6504296 69.7770951 96.2782551 84.2137354 96.2782551 138.351137 89.057386 149.178617 80.6330387 157.599991 56.5634749 157.599991 48.1391276 149.178617 40.9182584 138.351137"></polygon>
+                <polygon id="bottom-chick-right" fill="#41B883" fill-rule="nonzero" points="99.8886897 141.960297 115.533906 126.320603 115.533906 110.680909 99.8886897 123.914496"></polygon>
+                <polygon id="bottom-chick-left" fill="#41B883" fill-rule="nonzero" transform="translate(29.485216, 126.320603) scale(-1, 1) translate(-29.485216, -126.320603) " points="21.6626074 141.960297 37.3078239 126.320603 37.3078239 110.680909 21.6626074 123.914496"></polygon>
+                <path d="M89.4422148,12.342 L93.8712988,22.8580139 L79.4295605,68.5740417 L71.0052132,68.5740417 L71.0042148,56.994 L89.4422148,12.342 Z M48.1982148,11.287 L66.1912148,57.769 L66.1913004,68.5740417 L58.9704313,68.5740417 L43.3252148,22.8580139 L48.1982148,11.287 Z M66.1913004,0 L66.1912148,46.688 L59.3732148,29.074 L61.3773876,30.0763341 L61.3773876,0 L66.1913004,0 Z M75.8191259,1.91846539e-13 L75.8191259,30.0763341 L78.3042148,28.833 L71.0042148,46.513 L71.0052132,0 L75.8191259,1.91846539e-13 Z M84.2434732,0 L87.2562148,7.154 L80.6322148,23.196 L80.6330387,1.91846539e-13 L84.2434732,0 Z M56.5634749,0 L56.5632148,21.816 L50.4332148,5.981 L52.9530403,0 L56.5634749,0 Z" fill="#455C71"></path>
+                <path d="M138.399992,19.2488538 L131.179123,49.3251879 L79.4295605,68.5740417 L78.2260823,68.5740417 L92.6678206,22.8580139 L138.399992,19.2488538 Z M0,19.2488538 L44.528693,22.8580139 L60.1739095,68.5740417 L58.9704313,68.5740417 L7.22086913,49.3251879 L0,19.2488538 Z" id="head-right-2" fill="#41B883" fill-rule="nonzero"></path>
+                <polygon id="ear-right" fill="#455C71" fill-rule="nonzero" points="96.2782551 19.2488538 121.551297 16.8427471 104.702602 0 87.8539078 0"></polygon>
+                <polygon id="ear-left" fill="#455C71" fill-rule="nonzero" transform="translate(32.493911, 9.624427) scale(-1, 1) translate(-32.493911, -9.624427) " points="24.0695638 19.2488538 49.3426058 16.8427471 32.4939111 0 15.6452165 0"></polygon>
+                <polygon id="Path-2" fill="#455C71" fill-rule="nonzero" points="18.7999989 20.7999988 44.7999973 22.7999986 60.3999964 68.5999959 58.7999965 68.5999959 41.9999975 62.3999963"></polygon>
+                <polygon id="Path-3" fill="#455C71" fill-rule="nonzero" points="119.199993 20.7999988 92.3999945 22.7999986 77.5999954 68.5999959 79.5999953 68.5599959 95.1999943 62.7999963"></polygon>
+                <polygon id="Path-4" fill="#455C71" fill-rule="nonzero" points="48.3999971 72.7999957 50.399997 69.5999959 57.1999966 72.7999957 81.1999952 72.7999957 86.3999949 69.5999959 88.7999947 72.7999957 68.5999959 107.199994"></polygon>
+                <path d="M90.2104053,-1.0658141e-14 L68.485709,52.6144989 L48.1188062,-1.0658141e-14 L90.2104053,-1.0658141e-14 Z" id="Path-6" fill="#41B883" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>`
+        },
+        ...routeFiles,
+        ...extFilesSource
+    };
+
+    if (extPages && extPages.length >= 1) {
+        let routePaths = '';
+        let viewImports = '';
+
+        extPages.forEach((page, index) => {
+            let compPath = page.tabName.replace('Demo', '').toLowerCase();
+
+            routePaths += `{ path: "/${index === 0 ? '' : compPath}", component: ${page.tabName} },\n`;
+            viewImports += `import ${page.tabName} from "./components/${page.tabName}${fileExtension}";\n`;
+            files[`${path}components/${page.tabName}${fileExtension}`] = {
+                content: page.content
+            };
+        });
+
+        files[`${path}router.js`] = {
+            content: `import { createRouter, createWebHistory } from "vue-router";
+${viewImports}
+export const router = createRouter({
+    history: createWebHistory(),
+    routes: [ ${routePaths}]
+});`
+        };
+    }
+
+    if (service) {
+        service.forEach((name) => {
+            files[`${path}service/${name}.js`] = {
+                content: services[name]
+            };
+        });
+    }
+
+    files['tailwind.config.js'] = {
+        content: `/** @type {import('tailwindcss').Config} */
+const primeui = require('tailwindcss-primeui');
+export default {
+    darkMode: ['selector', '[class="p-dark"]'],
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+        "./src/*/.{vue,js,ts,jsx,tsx}",
+    ],
+    plugins: [primeui],
+    theme: {
+        screens: {
+            sm: '576px',
+            md: '768px',
+            lg: '992px',
+            xl: '1200px',
+            '2xl': '1920px'
+        }
+    }
+}`
+    };
+
+    files['postcss.config.js'] = {
+        content: `module.exports = {
+plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+}
+}`
+    };
+
+    files[`${path}components/ThemeSwitcher.vue`] = {
+        content: `<template>
+    <div class="card flex justify-end p-2 mb-4">
+        <ul class="flex list-none m-0 p-0 gap-2 items-center">
+            <li>
+                <button
+                    type="button"
+                    class="inline-flex border w-8 h-8 p-0 items-center justify-center surface-0 dark:surface-800 border border-surface-200 dark:border-surface-600 rounded"
+                    @click="onThemeToggler"
+                >
+                    <i :class="\`dark:text-white pi \${iconClass}\`" />
+                </button>
+            </li>
+        <li class="relative">
+            <button
+                v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
+                type="button"
+                class="inline-flex border w-8 h-8 p-0 items-center justify-center surface-0 dark:surface-800 border border-surface-200 dark:border-surface-600 rounded"
+            >
+                <i class="pi pi-palette dark:text-white"></i>
+            </button>
+            <Configurator />
+        </li>
+        </ul>
+    </div>
+    </template>
+
+<script>
+export default {
+    data() {
+        return {
+            iconClass: 'pi-moon'
+        }
+    },
+    methods: {
+        onThemeToggler() {
+            const root = document.getElementsByTagName('html')[0];
+
+            root.classList.toggle('p-dark');
+            this.iconClass = this.iconClass === 'pi-moon' ? 'pi-sun' : 'pi-moon';
+            this.$appState.darkTheme = !this.$appState.darkTheme;
+        }
+    },
+};
+<\/script>
+    `
+    };
+
+    files[`${path}components/Configurator.vue`] = {
+        content: `<template>
+<div class="absolute top-[2.5rem] right-0 hidden w-[16rem] p-3 bg-white dark:bg-surface-800 rounded-md shadow border border-surface-200 dark:border-surface-700 flex-col justify-start items-start gap-3.5 inline-flex origin-top z-10">
+    <div class="flex-col justify-start items-start gap-2 inline-flex w-full">
+        <span class="text-black dark:text-surface-0 text-sm font-medium">Preset</span>
+        <div class="inline-flex items-start">
+            <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presets" :allowEmpty="false" />
+        </div>
+    </div>
+    <div class="flex-col justify-start items-start gap-2 inline-flex pr-4">
+        <span class="text-black dark:text-surface-0 text-sm font-medium">Primary Colors</span>
+        <div class="self-stretch justify-start items-start gap-2 inline-flex flex-wrap">
+            <button
+                v-for="primaryColor of primaryColors"
+                :key="primaryColor.name"
+                type="button"
+                @click="updateColors('primary', primaryColor.name)"
+                class="w-4 h-4 rounded-full cursor-pointer config-button"
+                :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
+                :style="{ backgroundColor: \`\${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette[5]}\` }"
+            ></button>
+        </div>
+    </div>
+    <div class="flex-col justify-start items-start gap-2 inline-flex pr-2">
+        <span class="text-black dark:text-surface-0 text-sm font-medium">Surface Colors</span>
+        <div class="self-stretch justify-start items-start gap-2 inline-flex">
+            <button
+                v-for="surface of surfaces"
+                :key="surface.name"
+                type="button"
+                @click="updateColors('surface', surface.name)"
+                class="w-4 h-4 rounded-full cursor-pointer config-button"
+                :class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : $appState.darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                :style="{ backgroundColor: \`\${surface.palette[6]}\` }"
+            ></button>
+        </div>
+    </div>
+    <div class="flex justify-between items-center gap-2 flex w-full pt-4 pb-2 border-t border-surface-200 dark:border-surface-700">
+        <span class="text-black dark:text-surface-0 text-sm font-medium m-0">Ripple Effect</span>
+        <ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
+    </div>
+</div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                presets: ['Aura', 'Lara'],
+                selectedPrimaryColor: 'noir',
+                selectedSurfaceColor: 'slate',
+                primaryColors: [
+                    {
+                        name: 'noir',
+                        palette: {}
+                    },
+                    { name: 'emerald', palette: ['#ecfdf5', '#d1fae5', '#a7f3d0', '#6ee7b7', '#34d399', '#10b981', '#059669', '#047857', '#065f46', '#064e3b', '#022c22'] },
+                    { name: 'green', palette: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80', '#22c55e', '#16a34a', '#15803d', '#166534', '#14532d', '#052e16'] },
+                    { name: 'lime', palette: ['#f7fee7', '#ecfccb', '#d9f99d', '#bef264', '#a3e635', '#84cc16', '#65a30d', '#4d7c0f', '#3f6212', '#365314', '#1a2e05'] },
+                    { name: 'orange', palette: ['#fff7ed', '#ffedd5', '#fed7aa', '#fdba74', '#fb923c', '#f97316', '#ea580c', '#c2410c', '#9a3412', '#7c2d12', '#431407'] },
+                    { name: 'amber', palette: ['#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24', '#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f', '#451a03'] },
+                    { name: 'yellow', palette: ['#fefce8', '#fef9c3', '#fef08a', '#fde047', '#facc15', '#eab308', '#ca8a04', '#a16207', '#854d0e', '#713f12', '#422006'] },
+                    { name: 'teal', palette: ['#f0fdfa', '#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf', '#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a', '#042f2e'] },
+                    { name: 'cyan', palette: ['#ecfeff', '#cffafe', '#a5f3fc', '#67e8f9', '#22d3ee', '#06b6d4', '#0891b2', '#0e7490', '#155e75', '#164e63', '#083344'] },
+                    { name: 'sky', palette: ['#f0f9ff', '#e0f2fe', '#bae6fd', '#7dd3fc', '#38bdf8', '#0ea5e9', '#0284c7', '#0369a1', '#075985', '#0c4a6e', '#082f49'] },
+                    { name: 'blue', palette: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa', '#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a', '#172554'] },
+                    { name: 'indigo', palette: ['#eef2ff', '#e0e7ff', '#c7d2fe', '#a5b4fc', '#818cf8', '#6366f1', '#4f46e5', '#4338ca', '#3730a3', '#312e81', '#1e1b4b'] },
+                    { name: 'violet', palette: ['#f5f3ff', '#ede9fe', '#ddd6fe', '#c4b5fd', '#a78bfa', '#8b5cf6', '#7c3aed', '#6d28d9', '#5b21b6', '#4c1d95', '#2e1065'] },
+                    { name: 'purple', palette: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe', '#c084fc', '#a855f7', '#9333ea', '#7e22ce', '#6b21a8', '#581c87', '#3b0764'] },
+                    { name: 'fuchsia', palette: ['#fdf4ff', '#fae8ff', '#f5d0fe', '#f0abfc', '#e879f9', '#d946ef', '#c026d3', '#a21caf', '#86198f', '#701a75', '#4a044e'] },
+                    { name: 'pink', palette: ['#fdf2f8', '#fce7f3', '#fbcfe8', '#f9a8d4', '#f472b6', '#ec4899', '#db2777', '#be185d', '#9d174d', '#831843', '#500724'] },
+                    { name: 'rose', palette: ['#fff1f2', '#ffe4e6', '#fecdd3', '#fda4af', '#fb7185', '#f43f5e', '#e11d48', '#be123c', '#9f1239', '#881337', '#4c0519'] }
+                ],
+                surfaces: [
+                    {
+                        name: 'slate',
+                        palette: ['#ffffff', '#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1', '#94a3b8', '#64748b', '#475569', '#334155', '#1e293b', '#0f172a', '#020617']
+                    },
+                    {
+                        name: 'gray',
+                        palette: ['#ffffff', '#f9fafb', '#f3f4f6', '#e5e7eb', '#d1d5db', '#9ca3af', '#6b7280', '#4b5563', '#374151', '#1f2937', '#111827', '#030712']
+                    },
+                    {
+                        name: 'zinc',
+                        palette: ['#ffffff', '#fafafa', '#f4f4f5', '#e4e4e7', '#d4d4d8', '#a1a1aa', '#71717a', '#52525b', '#3f3f46', '#27272a', '#18181b', '#09090b']
+                    },
+                    {
+                        name: 'neutral',
+                        palette: ['#ffffff', '#fafafa', '#f5f5f5', '#e5e5e5', '#d4d4d4', '#a3a3a3', '#737373', '#525252', '#404040', '#262626', '#171717', '#0a0a0a']
+                    },
+                    {
+                        name: 'stone',
+                        palette: ['#ffffff', '#fafaf9', '#f5f5f4', '#e7e5e4', '#d6d3d1', '#a8a29e', '#78716c', '#57534e', '#44403c', '#292524', '#1c1917', '#0c0a09']
+                    },
+                    {
+                        name: 'soho',
+                        palette: ['#ffffff', '#f4f4f4', '#e8e9e9', '#d2d2d4', '#bbbcbe', '#a5a5a9', '#8e8f93', '#77787d', '#616268', '#4a4b52', '#34343d', '#1d1e27']
+                    },
+                    {
+                        name: 'viva',
+                        palette: ['#ffffff', '#f3f3f3', '#e7e7e8', '#cfd0d0', '#b7b8b9', '#9fa1a1', '#87898a', '#6e7173', '#565a5b', '#3e4244', '#262b2c', '#0e1315']
+                    },
+                    {
+                        name: 'ocean',
+                        palette: ['#ffffff', '#fbfcfc', '#F7F9F8', '#EFF3F2', '#DADEDD', '#B1B7B6', '#828787', '#5F7274', '#415B61', '#29444E', '#183240', '#0c1920']
+                    }
+                ]
+            };
+        },
+        methods: {
+            updateColors(type, colorName) {
+                let selectedColor;
+                const root = document.documentElement;
+
+                if (type === 'primary') {
+                    selectedColor = this.primaryColors.find((color) => color.name === colorName);
+                    this.selectedPrimaryColor = colorName;
+
+                    if (colorName === 'noir') {
+                        root.setAttribute('data-preset', 'noir');
+                    } else {
+                        root.removeAttribute('data-preset');
+                    }
+                } else if (type === 'surface') {
+                    selectedColor = this.surfaces.find((color) => color.name === colorName);
+                    this.selectedSurfaceColor = colorName;
+                }
+
+                if (!document.startViewTransition) {
+                    this.applyTheme(type, selectedColor.palette, colorName);
+
+                    return;
+                }
+
+                document.startViewTransition(() => this.applyTheme(type, selectedColor.palette, colorName));
+            },
+            applyTheme(type, colors, colorName) {
+                let increments;
+
+                if (type === 'primary') {
+                    increments = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+                } else if (type === 'surface') {
+                    increments = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+                }
+
+                if (colorName === 'noir') {
+                    increments.forEach((inc, index) => {
+                        document.documentElement.style.setProperty(\`--p-\${type}-\${increments[index]}\`, \`var(--p-surface-\${inc})\`);
+                    });
+                } else {
+                    colors.forEach((color, index) => {
+                        document.documentElement.style.setProperty(\`--p-\${type}-\${increments[index]}\`, color);
+                    });
+                }
+            },
+            onPresetChange(preset) {
+                this.$appState.preset = preset;
+            },
+            onRippleChange(value) {
+                this.$primevue.config.ripple = value;
+            }
+        },
+        computed: {
+            rippleActive() {
+                return this.$primevue.config.ripple;
+            }
+        }
+    };
+    <\/script>
+    `
+    };
+
+    files[`${path}plugins/appState.js`] = {
+        content: `import Lara from '@/presets/lara';
+import Aura from '@/presets/aura';
+import { reactive, watch } from 'vue';
+
+export default {
+    install: (app) => {
+        const _appState = reactive({ preset: 'Aura', darkMode: false });
+
+        watch(
+            () => _appState.preset,
+            (newValue) => {
+            if (newValue === 'Lara')
+                app.config.globalProperties.$primevue.config.pt = Lara;
+            else if (newValue === 'Aura')
+                app.config.globalProperties.$primevue.config.pt = Aura;
+            }
+        );
+
+        app.config.globalProperties.$appState = _appState;
+    }
+};
+`
+    };
+
+    // @todo - Refactor
+    const stringify = (value, indent = 2, currentIndent = 0) => {
+        const currentIndentStr = ' '.repeat(currentIndent);
+        const nextIndentStr = ' '.repeat(currentIndent + indent);
+
+        if (isArray(value)) {
+            return '[' + value.map((v) => stringify(v, indent, currentIndent + indent)).join(', ') + ']';
+        } else if (isDate(value)) {
+            return value.toISOString();
+        } else if (isFunction(value)) {
+            return value
+                .toString()
+                .split('\n')
+                .map((line, i, arr) => {
+                    try {
+                        return process?.dev ? line : i === 0 ? line : arr.length - 1 === i ? ' '.repeat(2) + line : currentIndentStr + line;
+                    } catch {
+                        return i === 0 ? line : arr.length - 1 === i ? ' '.repeat(2) + line : currentIndentStr + line;
+                    }
+                })
+                .join('\n');
+        } else if (isObject(value)) {
+            return (
+                '{\n' +
+                Object.entries(value)
+                    .map(([k, v]) => `${nextIndentStr}${k}: ${stringify(v, indent, currentIndent + indent)}`)
+                    .join(',\n') +
+                `\n${currentIndentStr}` +
+                '}'
+            );
+        } else {
+            return JSON.stringify(value);
+        }
+    };
+
+    const createPresetFiles = (presetName, stringPresetName) => {
+        const presetPath = `${path}presets/${stringPresetName}`;
+        const imports = [];
+        const keys = [];
+        const directivesKeys = [];
+
+        Object.entries(presetName).forEach(([name, value]) => {
+            if (name === 'global') {
+                imports.push(`import ${name} from './${name}'`);
+                keys.push(name);
+                files[`${presetPath}/${name}.js`] = {
+                    content: `export default {
+    css: \`${value?.css}\`
+                    }`
+                };
+            } else if (name === 'directives') {
+                Object.entries(value).forEach(([dname, dvalue]) => {
+                    const _name = dname === 'badge' ? 'badgedirective' : dname;
+
+                    imports.push(`import ${_name} from './${_name}'`);
+                    directivesKeys.push(dname === 'badge' ? `badge: badgedirective` : dname);
+                    files[`${presetPath}/${_name}/index.js`] = {
+                        content: `export default ${stringify(dvalue)}`
+                    };
+                });
+            } else {
+                imports.push(`import ${name} from './${name}'`);
+                keys.push(name);
+                files[`${presetPath}/${name}/index.js`] = {
+                    content: `export default ${stringify(value)}`
+                };
+            }
+        });
+
+        files[`${path}presets/${stringPresetName}/index.js`] = {
+            content: `${imports.join(';\n')}
+
+export default {
+    directives: {
+        ${directivesKeys.join(',\n\t\t')}
+    },
+    ${keys.join(',\n\t')}
+}
+            `
+        };
+    };
+
+    createPresetFiles(Lara, 'lara');
+    createPresetFiles(Aura, 'aura');
+
+    return { files, dependencies, sourceFileName };
+};
+
+const staticStyles = {
+    flags: `span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primevue/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}`
+};
+
+const tailwindConfig = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --p-primary-50: var(--p-surface-50);
+    --p-primary-100: var(--p-surface-100);
+    --p-primary-200: var(--p-surface-200);
+    --p-primary-300: var(--p-surface-300);
+    --p-primary-400: var(--p-surface-400);
+    --p-primary-500: var(--p-surface-500);
+    --p-primary-600: var(--p-surface-600);
+    --p-primary-700: var(--p-surface-700);
+    --p-primary-800: var(--p-surface-800);
+    --p-primary-900: var(--p-surface-900);
+    --p-primary-950: var(--p-surface-950);
+    --p-surface-0: #ffffff;
+    --p-surface-50: #f8fafc;
+    --p-surface-100: #f1f5f9;
+    --p-surface-200: #e2e8f0;
+    --p-surface-300: #cbd5e1;
+    --p-surface-400: #94a3b8;
+    --p-surface-500: #64748b;
+    --p-surface-600: #475569;
+    --p-surface-700: #334155;
+    --p-surface-800: #1e293b;
+    --p-surface-900: #0f172a;
+    --p-surface-950: #020617;
+    --p-content-border-radius: 6px;
+}
+
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+:root[data-preset="noir"] {
+    --p-primary-color: var(--p-primary-950);
+    --p-primary-contrast-color: #ffffff;
+    --p-primary-hover-color: var(--p-primary-800);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-highlight-background: var(--p-surface-950);
+    --p-highlight-color: #ffffff;
+    --p-highlight-focus-background: var(--p-surface-700);
+    --p-highlight-focus-color: #ffffff;
+}
+
+:root.p-dark {
+    --p-primary-color: var(--p-primary-400);
+    --p-primary-contrast-color: var(--p-surface-900);
+    --p-primary-hover-color: var(--p-primary-300);
+    --p-primary-active-color: var(--p-primary-200);
+    --p-content-border-color: var(--p-surface-700);
+    --p-content-hover-background: var(--p-surface-800);
+    --p-content-hover-color: var(--p-surface-0);
+    --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+    --p-highlight-color: rgba(255,255,255,.87);
+    --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+    --p-highlight-focus-color: rgba(255,255,255,.87);
+    --p-text-color: var(--p-surface-0);
+    --p-text-hover-color: var(--p-surface-0);
+    --p-text-muted-color: var(--p-surface-400);
+    --p-text-hover-muted-color: var(--p-surface-300);
+}
+
+:root.p-dark[data-preset="noir"]  {
+    --p-primary-color: var(--p-primary-50);
+    --p-primary-contrast-color: var(--p-surface-950);
+    --p-primary-hover-color: var(--p-primary-200);
+    --p-primary-active-color: var(--p-primary-300);
+    --p-highlight-background: var(--p-surface-50);
+    --p-highlight-color: var(--p-surface-950);
+    --p-highlight-focus-background: var(--p-surface-300);
+    --p-highlight-focus-color: var(--p-surface-950);
+}
+
+@keyframes fadein {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeout {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes scalein {
+    0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
+        opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+    }
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes slidedown {
+    0% {
+        max-height: 0;
+    }
+    100% {
+        max-height: auto;
+    }
+}
+@keyframes slideup {
+    0% {
+        max-height: 1000px;
+    }
+    100% {
+        max-height: 0;
+    }
+}
+
+.scalein {
+    animation: scalein 150ms linear;
+}
+
+.fadein {
+    animation: fadein 150ms linear;
+}
+
+.fadeout {
+    animation: fadeout 150ms linear;
+}
+
+.slidedown {
+    animation: slidedown 0.45s ease-in-out;
+}
+
+.slideup {
+    animation: slideup 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+:root {
+    --card-border: 1px solid var(--p-surface-200);
+    --card-background: #ffffff;
+    --ground-background: var(--p-surface-50);
+    --text-color: var(--p-surface-700);
+}
+
+:root.p-dark {
+    --card-border: 1px solid transparent;
+    --card-background: var(--p-surface-900);
+    --ground-background: var(--p-surface-950);
+    --text-color: var(--p-surface-0);
+}
+
+
+html {
+    font-size: 14px;
+    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-feature-settings: "cv02","cv03","cv04","cv11";
+    line-height: normal;
+}
+
+body {
+    margin: 0px;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: var(--ground-background);
+    font-weight: normal;
+    color: var(--text-color);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    padding: 1rem;
+}
+
+a {
+    text-decoration: none;
+}
+
+p {
+    line-height: 1.625;
+    margin: 0 0 1rem 0;
+}
+
+.card {
+    background: var(--card-background);
+    border: var(--card-border);
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}
+
+.layout-ripple-disabled [data-pc-name='ripple'] {
+    display: none !important;
+}
+
+button.config-button {
+    border: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    padding: 0;
+    cursor: pointer;
+    outline-color: transparent;
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 1px;
+}
+
+button.config-button.active-color {
+    outline-color: var(--p-primary-color);
+}
+`;
+
+export { getVueApp };
diff --git a/apps/labs/components/landing/HeroSection.vue b/apps/labs/components/landing/HeroSection.vue
new file mode 100644
index 000000000..d297cbbc2
--- /dev/null
+++ b/apps/labs/components/landing/HeroSection.vue
@@ -0,0 +1,850 @@
+<template>
+    <section class="landing-hero py-20 px-8 lg:px-20">
+        <div class="flex flex-col items-center">
+            <h1 class="text-5xl font-bold text-center xl:text-left leading-tight">UI Library for Vue.js with <span class="font-bold text-primary">Tailwind CSS</span></h1>
+            <p class="text-center mt-0 mb-8 text-surface-500 dark:text-surface-400 font-medium text-xl leading-relaxed lg:px-56">Create your own design with the flexibility of Tailwind CSS and the convenience of PrimeVue Unstyled components.</p>
+            <div class="flex items-center gap-4">
+                <NuxtLink to="/vite" class="linkbox linkbox-primary">
+                    <span>Get Started </span>
+                    <i class="pi pi-arrow-right ml-4"></i>
+                </NuxtLink>
+                <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox">
+                    <span>Give a Star</span>
+                    <i class="pi pi-star-fill ml-4 text-yellow-500"></i>
+                </a>
+            </div>
+        </div>
+        <div class="w-full flex lg:hidden items-center justify-center mt-16 mb-4">
+            <SelectButton v-model="selectedSampleOption" :options="sampleOptions" optionLabel="title" class="dark:border dark:border-white/20">
+                <template #option="slotProps">
+                    <i :class="slotProps.option.icon"></i>
+                    <div class="hidden sm:flex flex-1 text-sm font-medium leading-5">{{ slotProps.option.title }}</div>
+                </template>
+            </SelectButton>
+        </div>
+        <div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full rounded-3xl p-0 flex lg:hidden items-start gap-6 overflow-hidden">
+            <template v-for="sampleOption of sampleOptions" :key="sampleOption.title">
+                <img v-if="selectedSampleOption.title === sampleOption.title" :src="sampleOption.src + (isDark() ? '-dark.jpg' : '.jpg')" class="w-full" />
+            </template>
+        </div>
+        <div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full h-[85vh] max-h-[1040px] rounded-3xl p-6 hidden lg:flex lg:mt-20 items-start gap-6 overflow-hidden">
+            <div :class="isSlimMenu ? 'w-auto' : 'w-72'" class="rounded-2xl p-5 bg-surface-50 dark:bg-surface-900 h-full flex flex-col justify-between">
+                <div :class="isSlimMenu ? 'w-12 flex flex-col items-center' : 'w-auto'">
+                    <div class="flex items-center gap-3">
+                        <div class="w-11 h-11 border border-primary rounded-xl flex items-center justify-center">
+                            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M14.65 11.0645L13.1283 10.7253L14.3119 12.4216V17.6803L18.3698 14.2876V8.52002L16.5099 9.19856L14.65 11.0645Z" fill="var(--p-primary-color)" />
+                                <path d="M5.18078 11.0645L6.70251 10.7253L5.51894 12.4216V17.6803L1.46098 14.2876V8.52002L3.32088 9.19856L5.18078 11.0645Z" fill="var(--p-primary-color)" />
+                                <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M6.02649 12.7634L7.37914 10.7278L8.22455 11.2367H11.6062L12.4516 10.7278L13.8042 12.7634V20.397L12.7898 21.9237L11.6062 23.1111H8.22455L7.04098 21.9237L6.02649 20.397V12.7634Z"
+                                    fill="var(--p-primary-color)"
+                                />
+                                <path d="M14.311 20.9058L16.5091 18.7005V16.4952L14.311 18.3612V20.9058Z" fill="var(--p-primary-color)" />
+                                <path d="M5.51868 20.9058L3.32062 18.7005V16.4952L5.51868 18.3612V20.9058Z" fill="var(--p-primary-color)" />
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.578 0.888672H7.7177L6.36505 4.11174L8.56311 10.5579H11.4375L13.4665 4.11174L12.1138 0.888672H10.2543V10.5578H9.578V0.888672Z" fill="var(--p-primary-color)" />
+                                <path d="M8.56283 10.5575L1.29232 7.84329L0.277832 3.60242L6.53385 4.11132L8.73191 10.5575H8.56283Z" fill="var(--p-primary-color)" />
+                                <path d="M11.4372 10.5575L18.7077 7.84329L19.7222 3.60242L13.2971 4.11132L11.2681 10.5575H11.4372Z" fill="var(--p-primary-color)" />
+                                <path d="M13.8041 3.60283L17.3548 3.26356L14.9876 0.888672H12.6205L13.8041 3.60283Z" fill="var(--p-primary-color)" />
+                                <path d="M6.02676 3.60283L2.47604 3.26356L4.84318 0.888672H7.21033L6.02676 3.60283Z" fill="var(--p-primary-color)" />
+                            </svg>
+                        </div>
+                        <div :class="isSlimMenu ? 'hidden' : 'block'" class="text-surface-950 dark:text-surface-0 font-medium text-3xl">Prime</div>
+                    </div>
+                    <div class="mt-10 flex flex-col gap-2">
+                        <div
+                            v-for="(navItem, index) in sampleAppsSidebarNavs"
+                            :key="index"
+                            v-tooltip="isSlimMenu ? navItem.title : null"
+                            @click="setSelectedSampleAppsSidebarNav(navItem.title)"
+                            class="px-4 py-1 flex items-center gap-1 cursor-pointer text-base rounded-lg transition-all select-none"
+                            :class="[
+                                {
+                                    'w-12 justify-center py-4': isSlimMenu,
+                                    'w-full': !isSlimMenu
+                                },
+                                { 'text-muted-color hover:bg-emphasis bg-transparent': selectedSampleAppsSidebarNav !== navItem.title, 'text-primary-contrast bg-primary hover:bg-primary-emphasis': selectedSampleAppsSidebarNav === navItem.title }
+                            ]"
+                        >
+                            <i :class="navItem.icon"></i>
+                            <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
+                            <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'">{{ navItem.title }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div :class="isSlimMenu ? 'w-12 flex flex-col items-center' : 'w-auto'">
+                    <div class="mt-10 flex flex-col gap-2">
+                        <div
+                            v-if="false"
+                            v-tooltip="isSlimMenu ? 'Expanded Mode' : null"
+                            class="px-4 py-1 flex items-center gap-1 cursor-pointer text-base rounded-lg transition-all select-none text-muted-color hover:bg-emphasis"
+                            :class="[
+                                {
+                                    'w-12 justify-center py-4': isSlimMenu,
+                                    'w-full': !isSlimMenu
+                                }
+                            ]"
+                        >
+                            <a @click="toggleSlimMenu" class="cursor-pointer block p-0 m-0 leading-none">
+                                <i :class="isSlimMenu ? 'pi pi-window-maximize' : 'pi pi-window-minimize'"></i>
+                                <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
+                                <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'"> Slim Mode</span>
+                            </a>
+                        </div>
+                        <div
+                            v-for="(navItem, index) in sampleAppsSidebarNavsMore"
+                            :key="index"
+                            v-tooltip="isSlimMenu ? navItem.title : null"
+                            class="px-4 py-1 flex items-center gap-1 cursor-pointer text-base rounded-lg transition-all select-none"
+                            :class="[
+                                {
+                                    'w-12 justify-center py-4': isSlimMenu,
+                                    'w-full': !isSlimMenu
+                                },
+                                { 'text-muted-color hover:bg-emphasis bg-transparent': selectedSampleAppsSidebarNav !== navItem.title, 'text-primary-contrast bg-primary hover:bg-primary-emphasis ': selectedSampleAppsSidebarNav === navItem.title }
+                            ]"
+                            @click="visibleRight = true"
+                        >
+                            <i :class="navItem.icon"></i>
+                            <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
+                            <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'">{{ navItem.title }}</span>
+                        </div>
+                    </div>
+                    <Divider />
+                    <div :class="isSlimMenu ? 'justify-center' : ' gap-3'" class="flex items-center">
+                        <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png" size="large" shape="circle" class="shrink-0" />
+                        <div>
+                            <div :class="isSlimMenu ? 'hidden' : 'text-base font-medium text-color leading-5'">Robin Jonas</div>
+                            <div :class="isSlimMenu ? 'hidden' : 'text-sm text-muted-color mt-1'">hi@robin.xyz</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <OverviewApp v-if="selectedSampleAppsSidebarNav === 'Overview'" />
+            <ChatApp v-if="selectedSampleAppsSidebarNav === 'Chat'" />
+            <MoviesApp v-if="selectedSampleAppsSidebarNav === 'Movies'" />
+            <CardsApp v-if="selectedSampleAppsSidebarNav === 'Cards'" />
+            <InboxApp v-if="selectedSampleAppsSidebarNav === 'Inbox'" />
+            <CustomersApp v-if="selectedSampleAppsSidebarNav === 'Customers'" />
+
+            <Drawer
+                v-model:visible="visibleRight"
+                :containerVisible="true"
+                header="Right Sidebar"
+                position="right"
+                closeIcon="pi pi-sign-out"
+                :pt="{
+                    root: {
+                        class: '!max-w-2xl !w-full !h-screen rounded-s-2xl'
+                    },
+                    footer: {
+                        class: 'hidden'
+                    },
+                    content: {
+                        class: 'flex-1 flex flex-col'
+                    }
+                }"
+            >
+                <template #container="">
+                    <div class="flex flex-col h-screen overflow-auto">
+                        <div class="">
+                            <div class="flex align-items-center gap-3 p-6">
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="large" class="rounded-xl overflow-hidden" />
+                                <div class="flex-1">
+                                    <div class="leading-6 text-color font-medium">Brook Simmons</div>
+                                    <div class="mt-1 leading-5 text-muted-color text-sm">Sales Executive</div>
+                                </div>
+                                <Button icon="pi pi-sign-out" text rounded severity="secondary" />
+                            </div>
+                            <SelectButton
+                                v-model="selectedSidebarOption"
+                                :options="sidebarOptions"
+                                :pt="{
+                                    root: {
+                                        class: 'px-6 py-3 w-full'
+                                    },
+                                    pcToggleButton: {
+                                        root: {
+                                            class: 'flex-1 py-2.5'
+                                        },
+                                        label: {
+                                            class: 'text-sm'
+                                        }
+                                    }
+                                }"
+                            />
+                        </div>
+                        <div v-if="selectedSidebarOption === 'Interaction Logs'" class="h-[calc(100%-172px)] flex flex-col gap-4 p-6">
+                            <div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
+                                <div class="flex items-start justify-between">
+                                    <div class="leading-6 font-medium text-color">Call Logs</div>
+                                    <Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all" severity="secondary" text />
+                                </div>
+                                <div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 flex flex-col rounded-lg overflow-hidden divide-y divide-surface-200 dark:divide-surface-800">
+                                    <div v-for="(data, index) of callLogs" :key="index" class="flex items-center gap-3 p-2">
+                                        <OverlayBadge severity="success" class="w-fit">
+                                            <Avatar :image="data.image" size="small" class="rounded-md w-10 h-10 overflow-hidden flex" />
+                                        </OverlayBadge>
+
+                                        <div class="flex-1">
+                                            <div class="text-sm leading-5 font-medium text-color">{{ data.name }}</div>
+                                            <div class="mt-1 text-sm leading-5 text-muted-color">{{ data.time }}</div>
+                                        </div>
+                                        <Button icon="pi pi-phone text-sm" text class="bg-primary/10 dark:bg-primary/20 w-8 h-8" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
+                                <div class="flex items-start justify-between">
+                                    <div class="leading-6 font-medium text-color">Email Records</div>
+                                    <Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all" severity="secondary" text />
+                                </div>
+                                <div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 flex flex-col rounded-lg overflow-hidden divide-y divide-surface-200 dark:divide-surface-800">
+                                    <div v-for="(data, index) of emailRecords" :key="index" class="flex items-center gap-3 p-2">
+                                        <OverlayBadge severity="danger" class="w-fit">
+                                            <Avatar :image="data.image" size="small" class="rounded-md overflow-hidden w-10 h-10 flex" />
+                                        </OverlayBadge>
+                                        <div class="w-1/5 text-sm leading-5 font-medium text-color">{{ data.name }}</div>
+                                        <div class="flex-1">
+                                            <div class="text-sm leading-5 font-medium text-color line-clamp-2">
+                                                {{ data.title }}
+                                                <span class="text-muted-color">
+                                                    {{ data.text }}
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div class="w-1/6 text-sm leading-5 text-muted-color text-right">{{ data.time }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
+                                <div class="flex items-start justify-between">
+                                    <div class="leading-6 font-medium text-color">Meeting Notes</div>
+                                    <Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all leading-none" severity="secondary" text />
+                                </div>
+                                <div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 p-4 flex flex-col rounded-lg overflow-hidden">
+                                    <div class="flex items-start justify-between gap-1">
+                                        <div class="text-sm text-color font-medium max-w-60">Subject: Meeting Wrap-up & Action Items: Jacob Jones</div>
+                                        <div class="text-sm text-muted-color">February 14, 2024 / 2:00 PM</div>
+                                    </div>
+                                    <div class="text-sm text-muted-color mt-6">
+                                        Here's a quick review of our meeting with Brook Simmons and next steps. Summary:
+                                        <br />
+                                        <ul class="list-disc pl-5">
+                                            <li>Reviewed our SaaS solution and its features.</li>
+                                            <li>Arlene McCoy intrigued by user experience potential.</li>
+                                            <li>Voiced concerns on integration with current system.Action Items:</li>
+                                        </ul>
+                                        Demo: Schedule product demo with Arlene McCoy. (Assigned to: Jerome Bell)<br /><br />
+                                        Integration Blueprint: Draft and deliver technical blueprint. (Assigned to: Cameron Williamson)<br /><br />
+                                        Follow-up Meeting: Arrange to discuss any queries post-demo. (Assigned to: Dianne Russell)
+                                        <br /><br />
+                                        Please act on these items promptly.
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="selectedSidebarOption === 'Preferences'" class="h-[calc(100%-72px)] flex flex-col gap-4 p-6">
+                            <div v-for="(data, i) of preferences" :key="i" class="h-1/4 flex flex-col p-3 rounded-xl bg-emphasis">
+                                <div class="leading-6 font-medium text-color p-2">{{ data.title }}</div>
+                                <div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 p-4 flex flex-col gap-3 rounded-lg">
+                                    <div v-for="(pref, j) of data.prefs" :key="j" class="flex items-center gap-2">
+                                        <i class="text-lg text-color" :class="pref.icon"></i>
+                                        <div class="font-medium text-color flex-1">{{ pref.title }}</div>
+                                        <ToggleSwitch v-model="pref.checked" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="selectedSidebarOption === 'Opportunities'" class="grid grid-cols-2 gap-6 p-6">
+                            <div v-for="(data, i) of opportunities" :key="i" class="flex flex-col p-3 rounded-xl bg-emphasis">
+                                <div class="flex items-start justify-between gap-2">
+                                    <div class="font-medium text-color mt-0.5">{{ data.title }}</div>
+                                    <NuxtLink :to="data.link" target="_blank" rel="noopener">
+                                        <Button icon="pi pi-arrow-up-right text-sm !leading-none" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900" severity="secondary" text />
+                                    </NuxtLink>
+                                </div>
+                                <img class="w-full rounded-lg mt-2 block" :src="data.image" alt="Opportunutiy Image" />
+                                <div class="flex-1 mt-2 p-2 rounded-lg bg-surface-0 dark:bg-surface-900 text-xs text-color">
+                                    {{ data.text }}
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="selectedSidebarOption === 'Statistics'" class="h-[calc(100%-160px)] p-6">
+                            <div class="grid grid-cols-2 gap-4">
+                                <div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
+                                    <div class="flex items-center justify-between gap-2">
+                                        <div class="font-medium text-color p-2">Customer Satisfaction Score</div>
+                                    </div>
+                                    <div class="flex-1 py-4 mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
+                                        <Knob v-model="customerSatisfaction" :size="150" :strokeWidth="8" valueTemplate="{value}%" class="pointer-events-none" />
+                                    </div>
+                                </div>
+                                <div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
+                                    <div class="flex items-center justify-between gap-2">
+                                        <div class="font-medium text-color p-2">Estimated Lifetime Value</div>
+                                    </div>
+                                    <div class="flex-1 flex items-center gap-2 justify-center mt-2 p-2 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
+                                        <div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">$</div>
+                                        <div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">272</div>
+                                        <div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">123</div>
+                                        <div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">000</div>
+                                    </div>
+                                </div>
+                                <div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
+                                    <div class="flex items-center justify-between gap-2">
+                                        <div class="font-medium text-color p-2">Product Usage</div>
+                                    </div>
+                                    <div class="flex-1 mt-2 py-4 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
+                                        <Chart type="line" :data="lineChartData" :options="lineChartOptions" class="min-h-44 w-full" />
+                                    </div>
+                                </div>
+                                <div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
+                                    <div class="font-medium text-color p-2">Churn Risk</div>
+                                    <div class="flex-1 py-4 mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
+                                        <Knob v-model="churnRisk" :size="150" :strokeWidth="8" valueTemplate="{value}%" class="pointer-events-none" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="mt-4 w-full flex flex-col p-3 rounded-xl bg-emphasis">
+                                <div class="font-medium text-color p-2">Total Purchases</div>
+                                <div class="flex-1 py-4 px-2 w-full mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
+                                    <Chart type="bar" :data="chartData" :options="chartOptions" class="h-60 w-full" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Drawer>
+        </div>
+    </section>
+</template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+
+export default {
+    data() {
+        return {
+            lineChartData: {},
+            lineChartOptions: {},
+            chartData: {},
+            chartOptions: {},
+            sampleAppsSidebarNavs: [
+                { icon: 'pi pi-home', title: 'Overview' },
+                { icon: 'pi pi-comment', title: 'Chat' },
+                { icon: 'pi pi-inbox', title: 'Inbox' },
+                { icon: 'pi pi-th-large', title: 'Cards' },
+                { icon: 'pi pi-user', title: 'Customers' },
+                { icon: 'pi pi-video', title: 'Movies' }
+            ],
+            sampleAppsSidebarNavsMore: [{ icon: 'pi pi-cog', title: 'Settings' }],
+            selectedSampleAppsSidebarNav: 'Overview',
+            isSlimMenu: true,
+            isSlimMenuSelected: false,
+            sampleOptions: [
+                { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' },
+                { icon: 'pi pi-comment', title: 'Chat', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/chat' },
+                { icon: 'pi pi-inbox', title: 'Inbox', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/mail' },
+                { icon: 'pi pi-th-large', title: 'Cards', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/cards' },
+                { icon: 'pi pi-user', title: 'Customers', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/customers' },
+                { icon: 'pi pi-video', title: 'Movies', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/movies' }
+            ],
+            selectedSampleOption: { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' },
+            visibleRight: false,
+            selectedSidebarOption: 'Statistics',
+            sidebarOptions: ['Interaction Logs', 'Preferences', 'Statistics', 'Opportunities'],
+            callLogs: [
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png', name: 'Brook Simmons', time: '02.02.2024 | 45 min' },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg', name: 'Jacob Jones', time: '02.02.2024 | 45 min' },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg', name: 'Annette Black', time: '02.03.2024 | 13 min' },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg', name: 'Arlene McCoy', time: '02.03.2024 | 14 min' },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg', name: 'Arlene Simmons', time: '02.03.2024 | 14 min' },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg', name: 'Michael Brown', time: '02.04.2024 | 20 min' }
+            ],
+            emailRecords: [
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
+                    name: 'Brook Simmons',
+                    time: '3:24 PM',
+                    title: 'Unleash Business Potential',
+                    text: 'Automate, analyze, and accelerate with our SaaS platform. Unshackle from mundane tasks and focus on scaling your business. Contact us for a demo today!'
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
+                    name: 'Jacob Jones',
+                    time: '12.23.2023',
+                    title: 'Optimized Workflow Revolution  ',
+                    text: "Experience a workflow revolution with our intuitive SaaS tool. With enhanced features and optimized processes, it's efficiency like never before. Let's get in touch for a brief demo!"
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
+                    name: 'Annette Black',
+                    time: '12.17.2023',
+                    title: 'Innovation at Fingertips',
+                    text: 'With our SaaS solution, innovation is only a click away. Shape your future with pioneering features and minimalist design. Join us for your solution walk-through today!'
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
+                    name: 'Arlene McCoy',
+                    time: '06.17.2023',
+                    title: 'Seamless Integration',
+                    text: 'Integrate effortlessly with our user-friendly SaaS tools. Streamline your operations and boost productivity. Discover more in our demo session.'
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
+                    name: 'Arlene Simmons',
+                    time: '04.17.2023',
+                    title: 'Transform Your Business',
+                    text: 'Empower your team with our innovative SaaS solutions. Achieve unparalleled efficiency and drive growth. Book a demo to explore the possibilities.'
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
+                    name: 'Michael Brown',
+                    time: '01.05.2024',
+                    title: 'Next-Gen Collaboration',
+                    text: 'Experience the future of collaboration with our cutting-edge SaaS platform. Enhance teamwork and streamline communication. Contact us for a demo today!'
+                }
+            ],
+            preferences: [
+                {
+                    title: 'Email',
+                    prefs: [
+                        { icon: 'pi pi-bell', title: 'Notification', checked: true },
+                        { icon: 'pi pi-inbox', title: 'Newsletter', checked: false },
+                        { icon: 'pi pi-sync', title: 'Product Updates', checked: false }
+                    ]
+                },
+                {
+                    title: 'Telephone',
+                    prefs: [
+                        { icon: 'pi pi-mobile', title: 'Phone Call', checked: true },
+                        { icon: 'pi pi-volume-down', title: 'Voicemail', checked: false },
+                        { icon: 'pi pi-comments', title: 'SMS text', checked: false }
+                    ]
+                },
+                {
+                    title: 'Social Media',
+                    prefs: [
+                        { icon: 'pi pi-clock', title: 'Automated Post', checked: true },
+                        { icon: 'pi pi-user', title: 'Direct Message', checked: false }
+                    ]
+                },
+                {
+                    title: 'Data Privacy',
+                    prefs: [
+                        { icon: 'pi pi-box', title: 'Share Data with 3rd Parties', checked: true },
+                        { icon: 'pi pi-file', title: 'Cookies', checked: false }
+                    ]
+                }
+            ],
+            opportunities: [
+                {
+                    title: 'Apollo',
+                    link: 'https://primevue.org/templates/apollo/',
+                    image: 'https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg',
+                    text: 'Keep your application fresh with Apollo, the newest and most modern template available.'
+                },
+                {
+                    title: 'Ultima',
+                    link: 'https://primevue.org/templates/ultima/',
+                    image: 'https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg',
+                    text: "Elevate your application's intuitiveness with Ultima's premium Material Design interface."
+                },
+                {
+                    title: 'Diamond',
+                    link: 'https://primevue.org/templates/diamond/',
+                    image: 'https://primefaces.org/cdn/primevue/images/layouts/diamond-remastered-vue.jpg',
+                    text: "Handle complex operations with elegance with Diamond's robust and powerful premium design."
+                },
+                {
+                    title: 'Atlantis',
+                    link: 'https://primevue.org/templates/atlantis/',
+                    image: 'https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg',
+                    text: "Boost your application's capabilities, customization with the Atlantis template."
+                },
+                {
+                    title: 'Verona',
+                    link: 'https://primevue.org/templates/verona/',
+                    image: 'https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg',
+                    text: "Achieve sophistication and subtlety with Verona's minimalistic, content-focused design."
+                },
+                {
+                    title: 'Freya',
+                    link: 'https://primevue.org/templates/freya/',
+                    image: 'https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png',
+                    text: "Give your application a sleek, updated look with Freya's chic and modern premium template."
+                }
+            ],
+            customerSatisfaction: 56,
+            churnRisk: 24
+        };
+    },
+    beforeUnmount() {
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
+    },
+    mounted() {
+        this.chartData = this.setChartData();
+        this.chartOptions = this.setChartOptions();
+        this.lineChartData = this.setLineChartData();
+        this.lineChartOptions = this.setLineChartOptions();
+
+        this.redrawListener = () => {
+            this.chartOptions = this.setChartOptions();
+            this.chartData = this.setChartData();
+            this.lineChartData = this.setLineChartData();
+            this.lineChartOptions = this.setLineChartOptions();
+        };
+
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
+    },
+    methods: {
+        setSelectedSampleAppsSidebarNav(title) {
+            this.selectedSampleAppsSidebarNav = title;
+        },
+        isDark() {
+            return this.$appState.darkTheme;
+        },
+        toggleSlimMenu() {
+            this.isSlimMenu = !this.isSlimMenu;
+            this.isSlimMenuSelected = this.isSlimMenu;
+        },
+        setChartData() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
+            const hoverBackgroundColor = documentStyle.getPropertyValue('--p-primary-color');
+
+            return {
+                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+                datasets: [
+                    {
+                        type: 'bar',
+                        label: 'Investment Wallet',
+                        backgroundColor: borderColor,
+                        data: [100, 201, 404, 300, 140, 220, 314, 520, 145, 234, 325, 147],
+                        borderRadius: {
+                            topLeft: 4,
+                            topRight: 4
+                        },
+                        borderSkipped: true,
+                        barThickness: 20,
+                        hoverBackgroundColor: hoverBackgroundColor,
+                        hoverTransition: '1s ease all'
+                    }
+                ]
+            };
+        },
+        setChartOptions() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
+            const textColor = documentStyle.getPropertyValue('--p-text-color');
+            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
+            const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
+
+            const getOrCreateTooltip = (chart) => {
+                let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
+
+                if (!tooltipEl) {
+                    tooltipEl = document.createElement('div');
+                    tooltipEl.classList.add('chartjs-tooltip');
+                    tooltipEl.style.backgroundColor = backgroundColor;
+                    tooltipEl.style.boxShadow =
+                        ' 0px 33.12px 9.399px 0px rgba(0, 0, 0, 0.00), 0px 21.036px 8.504px 0px rgba(0, 0, 0, 0.01), 0px 12.084px 7.161px 0px rgba(0, 0, 0, 0.05), 0px 5.371px 5.371px 0px rgba(0, 0, 0, 0.09), 0px 1.343px 2.685px 0px rgba(0, 0, 0, 0.10)';
+                    tooltipEl.style.borderRadius = '7px';
+                    tooltipEl.style.color = textColor;
+                    tooltipEl.style.opacity = 1;
+                    tooltipEl.style.padding = '14.5px';
+                    tooltipEl.style.pointerEvents = 'none';
+                    tooltipEl.style.position = 'absolute';
+                    tooltipEl.style.transform = 'translate(-50%, 0)';
+                    tooltipEl.style.transition = 'all .2s ease';
+                    chart.canvas.parentNode.appendChild(tooltipEl);
+                }
+
+                return tooltipEl;
+            };
+
+            return {
+                maintainAspectRatio: false,
+                aspectRatio: 0.8,
+                plugins: {
+                    chartAreaBorder: {
+                        borderColor: 'red',
+                        borderWidth: 2,
+                        borderDash: [5, 5],
+                        borderDashOffset: 2
+                    },
+                    tooltip: {
+                        enabled: false,
+                        padding: 5,
+                        position: 'nearest',
+                        external: function (context) {
+                            // Tooltip Element
+                            const { chart, tooltip } = context;
+                            const tooltipEl = getOrCreateTooltip(chart);
+
+                            // Hide if no tooltip
+                            if (tooltip.opacity === 0) {
+                                tooltipEl.style.opacity = 0;
+
+                                return;
+                            }
+
+                            if (tooltip.body) {
+                                const bodyLines = tooltip.body.map((b) => {
+                                    const strArr = b.lines[0].split(':');
+                                    const data = {
+                                        text: strArr[0].trim(),
+                                        value: strArr[1].trim()
+                                    };
+
+                                    return data;
+                                });
+
+                                // Clear old content
+                                tooltipEl.innerHTML = '';
+                                bodyLines.forEach((body, i) => {
+                                    const text = document.createElement('div');
+
+                                    text.appendChild(document.createTextNode('$' + body.value + 'K'));
+                                    text.style.fontWeight = '500';
+                                    text.style.lineHeight = '21px';
+                                    text.style.fontSize = '14px';
+                                    tooltipEl.appendChild(text);
+                                });
+                            }
+
+                            const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
+
+                            // Display, position, and set styles for font
+                            tooltipEl.style.opacity = 1;
+                            tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+                            tooltipEl.style.top = positionY + tooltip.caretY + 'px';
+                            tooltipEl.style.font = tooltip.options.bodyFont.string;
+                            tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
+                        }
+                    },
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    x: {
+                        stacked: true,
+                        ticks: {
+                            color: textMutedColor
+                        },
+                        grid: {
+                            color: 'transparent',
+                            borderColor: 'transparent'
+                        }
+                    },
+                    y: {
+                        border: {
+                            display: false
+                        },
+                        stacked: true,
+                        ticks: {
+                            color: textMutedColor
+                        },
+                        grid: {
+                            color: borderColor,
+                            borderColor: 'transparent'
+                        }
+                    }
+                }
+            };
+        },
+        setLineChartData() {
+            const darkMode = this.$appState.darkTheme;
+
+            return {
+                labels: ['31', '1', '2', '3', '4', '5', '6', '7', '8'],
+                datasets: [
+                    {
+                        label: 'My First Dataset',
+                        data: [60, 64, 57, 52, 58, 70, 75, 70, 60],
+                        fill: true,
+                        borderColor: '#16A34A',
+                        tension: 0.4,
+                        borderWidth: 1.5,
+                        pointBackgroundColor: '#16A34A',
+                        pointBorderColor: darkMode ? '#09090B' : '#FFF',
+                        pointBorderWidth: 3,
+
+                        hideInLegendAndTooltip: false,
+                        pointStyle: function (context) {
+                            let index = context.dataIndex;
+
+                            if (index == 6) {
+                                return 'circle';
+                            } else {
+                                return 'line';
+                            }
+                        },
+                        pointRadius: function (context) {
+                            let index = context.dataIndex;
+
+                            if (index == 6) {
+                                return 6;
+                            } else {
+                                return 0.1;
+                            }
+                        },
+                        backgroundColor: (context) => {
+                            const bgColor = ['rgba(22,163,74,0.16)', 'rgba(22,163,74,0)'];
+
+                            if (!context.chart.chartArea) {
+                                return;
+                            }
+
+                            const {
+                                ctx,
+                                data,
+                                chartArea: { top, bottom }
+                            } = context.chart;
+                            const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
+                            const colorTranches = 1 / (bgColor.length - 1);
+
+                            for (let i = 0; i < bgColor.length; i++) {
+                                gradientBg.addColorStop(0 + i * colorTranches, bgColor[i]);
+                            }
+
+                            return gradientBg;
+                        }
+                    }
+                ],
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'top'
+                        },
+                        title: {
+                            display: true,
+                            text: 'Chart.js Line Chart'
+                        }
+                    }
+                }
+            };
+        },
+        setLineChartOptions() {
+            const darkMode = this.$appState.darkTheme;
+            const documentStyle = getComputedStyle(document.documentElement);
+
+            const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
+            const textColor = documentStyle.getPropertyValue('--p-text-color');
+            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
+            const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
+
+            const getOrCreateTooltip = (chart) => {
+                let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
+
+                if (!tooltipEl) {
+                    tooltipEl = document.createElement('div');
+                    tooltipEl.classList.add('chartjs-tooltip');
+                    tooltipEl.style.backgroundColor = backgroundColor;
+                    tooltipEl.style.boxShadow =
+                        ' 0px 33.12px 9.399px 0px rgba(0, 0, 0, 0.00), 0px 21.036px 8.504px 0px rgba(0, 0, 0, 0.01), 0px 12.084px 7.161px 0px rgba(0, 0, 0, 0.05), 0px 5.371px 5.371px 0px rgba(0, 0, 0, 0.09), 0px 1.343px 2.685px 0px rgba(0, 0, 0, 0.10)';
+                    tooltipEl.style.borderRadius = '7px';
+                    tooltipEl.style.color = textColor;
+                    tooltipEl.style.opacity = 1;
+                    tooltipEl.style.padding = '2px';
+                    tooltipEl.style.pointerEvents = 'none';
+                    tooltipEl.style.position = 'absolute';
+                    tooltipEl.style.transform = 'translate(-50%, 0)';
+                    tooltipEl.style.transition = 'all .2s ease';
+                    chart.canvas.parentNode.appendChild(tooltipEl);
+                }
+
+                return tooltipEl;
+            };
+
+            return {
+                maintainAspectRatio: false,
+                aspectRatio: 0.8,
+                plugins: {
+                    chartAreaBorder: {
+                        borderColor: 'red',
+                        borderWidth: 2,
+                        borderDash: [5, 5],
+                        borderDashOffset: 2
+                    },
+                    tooltip: {
+                        enabled: false,
+                        padding: 8,
+                        position: 'nearest',
+                        external: function (context) {
+                            // Tooltip Element
+                            const { chart, tooltip } = context;
+                            const tooltipEl = getOrCreateTooltip(chart);
+
+                            // Hide if no tooltip
+                            if (tooltip.opacity === 0) {
+                                tooltipEl.style.opacity = 0;
+
+                                return;
+                            }
+
+                            if (tooltip.body) {
+                                const bodyLines = tooltip.body.map((b) => {
+                                    const strArr = b.lines[0].split(':');
+                                    const data = {
+                                        text: strArr[0].trim(),
+                                        value: strArr[1].trim()
+                                    };
+
+                                    return data;
+                                });
+
+                                // Clear old content
+                                tooltipEl.innerHTML = '';
+                                bodyLines.forEach((body, i) => {
+                                    const text = document.createElement('div');
+
+                                    text.appendChild(document.createTextNode(body.value + '.000'));
+                                    text.style.fontWeight = '500';
+                                    text.style.lineHeight = '21px';
+                                    text.style.fontSize = '14px';
+                                    tooltipEl.appendChild(text);
+                                });
+                            }
+
+                            const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
+
+                            // Display, position, and set styles for font
+                            tooltipEl.style.opacity = 1;
+                            tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+                            tooltipEl.style.top = positionY + tooltip.caretY - 40 + 'px';
+                            tooltipEl.style.font = tooltip.options.bodyFont.string;
+                            tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
+                        }
+                    },
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    x: {
+                        stacked: true,
+                        ticks: {
+                            color: textMutedColor
+                        },
+                        grid: {
+                            color: 'transparent',
+                            borderColor: 'transparent'
+                        }
+                    },
+                    y: {
+                        display: false,
+                        grace: 14
+                    }
+                }
+            };
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/landing/samples/CardsApp.vue b/apps/labs/components/landing/samples/CardsApp.vue
new file mode 100644
index 000000000..dd3588d9d
--- /dev/null
+++ b/apps/labs/components/landing/samples/CardsApp.vue
@@ -0,0 +1,589 @@
+<template>
+    <div class="flex-1 h-full overflow-y-auto overflow-x-clip overflow-hidden border border-surface rounded-2xl p-6">
+        <div class="text-color text-2xl font-medium leading-8">Cards</div>
+        <div class="mt-1 text-muted-color leading-6">You can make cards using Aura like below 👇</div>
+        <div class="mt-6 flex flex-wrap items-start gap-6">
+            <div class="flex-1 flex flex-col gap-6">
+                <div class="border border-surface rounded-3xl p-6 flex flex-col gap-6">
+                    <div class="flex items-center gap-3">
+                        <OverlayBadge severity="danger" class="w-fit">
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png" size="large" class="rounded-lg overflow-hidden flex" />
+                        </OverlayBadge>
+                        <div>
+                            <div class="font-medium text-color leading-6">Jacob Jones</div>
+                            <div class="mt-1 text-muted-color leading-5">hi@jacobjones.co</div>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-6">
+                        <div class="text-sm leading-5 text-color">14.k <span class="text-muted-color">Followers</span></div>
+                        <div class="text-sm leading-5 text-color">359 <span class="text-muted-color">Following</span></div>
+                    </div>
+                    <p class="text-sm text-muted-color leading-5 mb-0">Meet Jacob Jones, the whimsical adventurer on a quest for life's quirks. From sock mysteries to subway adventures, join him for a laughter-filled journey!</p>
+                    <div class="flex items-center justify-between gap-2">
+                        <div class="text-sm leading-5 text-color font-medium">Mutual Friends</div>
+                        <AvatarGroup>
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar1.png" size="small" class="rounded-lg overflow-hidden" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg" size="small" class="rounded-lg overflow-hidden" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="small" class="rounded-lg overflow-hidden" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg" size="small" class="rounded-lg overflow-hidden" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png" size="small" class="rounded-lg overflow-hidden" />
+                            <Avatar label="+99" size="small" class="rounded-lg overflow-hidden text-xs" />
+                        </AvatarGroup>
+                    </div>
+                    <SelectButton
+                        v-model="selectedUserSelectButtonOption"
+                        :options="userSelectButtonOptions"
+                        :pt="{
+                            root: {
+                                class: 'w-full'
+                            },
+                            pcbutton: {
+                                root: {
+                                    class: 'flex-1'
+                                }
+                            }
+                        }"
+                    />
+                    <div class="flex flex-col gap-4">
+                        <div class="p-2 rounded-2xl flex items-center gap-3 bg-emphasis">
+                            <OverlayBadge severity="danger" class="w-fit">
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png" class="rounded-lg overflow-hidden w-10 h-10 block" />
+                            </OverlayBadge>
+                            <div class="flex-1">
+                                <div class="text-color text-sm font-medium leading-5">Jacob Jones</div>
+                                <div class="mt-1 text-muted-color text-xs leading-4">hi@jacobjones.co</div>
+                            </div>
+                            <Button label="Join" />
+                        </div>
+                        <div class="p-2 rounded-2xl flex items-center gap-3 bg-emphasis">
+                            <OverlayBadge severity="danger" class="w-fit">
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg" class="rounded-lg overflow-hidden w-10 h-10 flex" />
+                            </OverlayBadge>
+                            <div class="flex-1">
+                                <div class="text-color text-sm font-medium leading-5">Courtney Henry</div>
+                                <div class="mt-1 text-muted-color text-xs leading-4">cou.henry41@courtney.co</div>
+                            </div>
+                            <Button label="Join" />
+                        </div>
+                    </div>
+                </div>
+                <div class="border border-surface rounded-3xl p-6">
+                    <div class="flex items-center gap-3 p-3 border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05)]">
+                        <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png" class="rounded-lg overflow-hidden w-14 h-14" />
+                        <div class="flex-1">
+                            <div class="text-color font-medium leading-7">Jacob Jones</div>
+                            <div class="text-muted-color text-sm mt-1">hi@jacobjones.co</div>
+                        </div>
+                        <Button icon="pi pi-bell" severity="contrast" text />
+                    </div>
+                    <div class="mt-4 flex flex-col gap-1">
+                        <button class="w-full flex items-center gap-2 text-color p-2 bg-transparent hover:bg-emphasis active:bg-surface-200 dark:active:bg-surface-700 cursor-pointer rounded-lg transition-all select-none">
+                            <i class="pi pi-envelope text-lg w-7 h-7 flex items-center justify-center"></i>
+                            <div class="font-medium leading-normal flex-1 text-left">Messages</div>
+                        </button>
+                        <button class="w-full flex items-center gap-2 text-color p-2 bg-transparent hover:bg-emphasis active:bg-surface-200 dark:active:bg-surface-700 cursor-pointer rounded-lg transition-all select-none">
+                            <i class="pi pi-cog text-lg w-7 h-7 flex items-center justify-center"></i>
+                            <div class="font-medium leading-normal flex-1 text-left">Settings</div>
+                        </button>
+                        <button class="w-full flex items-center gap-2 text-color p-2 bg-transparent hover:bg-emphasis active:bg-surface-200 dark:active:bg-surface-700 cursor-pointer rounded-lg transition-all select-none">
+                            <i class="pi pi-sync text-lg w-7 h-7 flex items-center justify-center"></i>
+                            <div class="font-medium leading-normal flex-1 text-left">Switch Accounts</div>
+                        </button>
+                        <button class="w-full flex items-center gap-2 text-color p-2 bg-transparent hover:bg-emphasis active:bg-surface-200 dark:active:bg-surface-700 cursor-pointer rounded-lg transition-all select-none">
+                            <i class="pi pi-sign-in text-lg w-7 h-7 flex items-center justify-center"></i>
+                            <div class="font-medium leading-normal flex-1 text-left">Log out</div>
+                        </button>
+                    </div>
+                    <Divider />
+                    <div class="w-full flex items-center gap-2 text-color p-2 bg-transparent cursor-pointer rounded-lg transition-all select-none">
+                        <i
+                            class="pi text-lg w-7 h-7 flex items-center justify-center"
+                            :class="{
+                                'pi-moon': !darkMode,
+                                'pi-sun': darkMode
+                            }"
+                        ></i>
+                        <div class="font-medium leading-normal flex-1 text-left">Switch to {{ darkMode ? 'Light' : 'Dark' }}</div>
+                        <ToggleSwitch v-model="darkMode" />
+                    </div>
+                </div>
+                <div class="border border-surface rounded-3xl">
+                    <div class="pt-6 px-6 flex flex-col gap-6">
+                        <div class="flex items-start gap-2 justify-between">
+                            <div>
+                                <div class="text-2xl text-color font-medium">Data Analyst</div>
+                                <div class="mt-2 text-color">Data Insights Ltd.</div>
+                            </div>
+                            <Button @click="jobApplication = !jobApplication" :icon="jobApplication ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'" severity="secondary" outlined rounded />
+                        </div>
+                        <div class="flex flex-wrap gap-1 items-center justify-between">
+                            <div class="flex items-center gap-2 whitespace-nowrap text-muted-color">
+                                <i class="pi pi-users text-xl"></i>
+                                <div class="font-medium leading-none">Senior</div>
+                            </div>
+                            <div class="flex items-center gap-2 whitespace-nowrap text-muted-color">
+                                <i class="pi pi-stopwatch text-xl"></i>
+                                <div class="font-medium leading-none">Full-Time</div>
+                            </div>
+                            <div class="flex items-center gap-2 whitespace-nowrap text-muted-color">
+                                <i class="pi pi-money-bill text-xl"></i>
+                                <div class="font-medium leading-none">$80,000</div>
+                            </div>
+                        </div>
+                        <p class="leading-6 text-muted-color mb-0">Expert in data analysis? Join Data Insights Ltd. as a senior data analyst. Lead in the world of data with us!</p>
+                        <div class="flex flex-wrap gap-2 items-center">
+                            <Tag value="Data Analysis" rounded class="font-normal"></Tag>
+                            <Tag value="Analytics" rounded class="font-normal"></Tag>
+                            <Tag value="Big Data" rounded class="font-normal"></Tag>
+                        </div>
+                    </div>
+                    <div class="p-1 mt-4">
+                        <button class="p-4 rounded-3xl w-full bg-emphasis transition-all text-color hover:text-color-emphasis flex items-center gap-2 justify-between cursor-pointer">
+                            <div class="flex items-center [&>*]:-mr-2">
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="small" shape="circle" />
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg" size="small" shape="circle" />
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg" size="small" shape="circle" />
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg" size="small" shape="circle" />
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png" size="small" shape="circle" />
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <div class="font-medium leading-6">12 Applicants</div>
+                                <i class="pi pi-arrow-right"></i>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="flex-1 flex flex-col gap-6">
+                <div class="border border-surface rounded-3xl p-6 flex flex-col gap-6">
+                    <div class="flex items-center gap-2 text-color">
+                        <i class="pi pi-cloud-upload text-xl"></i>
+                        <div class="flex-1 font-medium leading-6">Upload Files</div>
+                        <Button icon="pi pi-times" text rounded />
+                    </div>
+                    <div>
+                        <label for="document-name" class="text-color font-medium leading-6">Document Name </label>
+                        <InputText id="document-name" v-model="documentName" class="mt-2 w-full" />
+                    </div>
+                    <div>
+                        <label class="text-color font-medium leading-6">Upload Files</label>
+                        <FileUpload
+                            name="demo[]"
+                            url="/api/upload"
+                            @upload="onTemplatedUpload($event)"
+                            :pt="{
+                                root: {
+                                    class: 'bg-transparent border-dashed mt-2'
+                                },
+                                content: {
+                                    class: 'p-0'
+                                }
+                            }"
+                            accept="image/*"
+                            :maxFileSize="1000000"
+                            @select="onSelectedFiles"
+                        >
+                            <template #header="{ chooseCallback, uploadCallback, clearCallback, files, uploadedFiles }">
+                                <div v-if="files.length > 0 || uploadedFiles.length > 0" class="flex w-full flex-wrap justify-between items-center flex-1 gap-4 border-b border-surface pb-4">
+                                    <div class="flex gap-2">
+                                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
+                                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
+                                    </div>
+                                </div>
+                                <div v-if="files.length <= 0 && uploadedFiles.length <= 0" class="flex flex-col items-center justify-center p-6 cursor-pointer" @click="chooseCallback()">
+                                    <i class="pi pi-cloud-upload text-4xl text-color" />
+                                    <div class="text-sm text-color font-medium mt-2">Click to upload <span class="text-muted-color">or and drop</span></div>
+                                    <p class="mt-2 mb-0 text-sm text-muted-color text-center">PDF, JPG, PNG, JPEG, DOC, CSV, XML, XMLX, XLS, XLSX (max 10MB)</p>
+                                </div>
+                            </template>
+                            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
+                                <div v-if="files.length > 0" class="px-4 py-0">
+                                    <h5 class="m-0 mb-2">Pending</h5>
+                                    <div class="flex flex-wrap gap-2 grow overflow-auto max-h-[210px]">
+                                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card max-w-[120px] !p-2 m-0 flex flex-col border-1 surface-border items-center gap-2 text-center">
+                                            <div>
+                                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                            </div>
+                                            <span class="font-semibold max-w-[100px] text-ellipsis whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                            <span class="text-sm text-muted-color">{{ formatSize(file.size) }}</span>
+                                            <div class="grow flex flex-col gap-2 justify-end">
+                                                <Badge value="Pending" severity="warning" />
+                                                <Button icon="pi pi-times text-sm leading-none" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="!text-sm !leading-none" label="Cancel" text severity="danger" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div v-if="uploadedFiles.length > 0" class="px-4 py-0">
+                                    <h5 class="m-0 mb-2">Completed</h5>
+                                    <div class="flex flex-wrap gap-2">
+                                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card max-w-[120px] !p-2 m-0 flex flex-col border-1 surface-border items-center gap-2 text-center">
+                                            <div>
+                                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                            </div>
+                                            <span class="font-semibold max-w-[100px] text-ellipsis whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                            <span class="text-sm text-muted-color">{{ formatSize(file.size) }}</span>
+                                            <div class="grow flex flex-col gap-2 justify-end">
+                                                <Badge value="Completed" class="mt-3" severity="success" />
+                                                <Button icon="pi pi-times text-sm leading-none" @click="removeUploadedFileCallback(index)" class="!text-sm !leading-none" label="Cancel" text severity="danger" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </FileUpload>
+                    </div>
+                    <div>
+                        <label class="text-color font-medium leading-6">Tag (Optional)</label>
+                        <AutoComplete v-model="filesTag" class="w-full mt-2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <label v-for="permission in permissions" :key="permission.key" :for="permission.key" class="cursor-pointer flex-1 flex items-center gap-1 p-2 rounded-border border border-surface hover:bg-emphasis transition-all select-none">
+                            <i class="text-color" :class="permission.icon"></i>
+                            <div class="flex-1 text-sm leading-5 text-color">{{ permission.name }}</div>
+                            <RadioButton v-model="selectedPermission" :inputId="permission.key" variant="filled" name="dynamic" :value="permission.name" />
+                        </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Button label="Cancel" outlined class="flex-1" />
+                        <Button label="Upload" class="flex-1" />
+                    </div>
+                </div>
+                <div class="border border-surface rounded-3xl p-6">
+                    <div class="flex items-start justify-between gap-1">
+                        <div class="flex items-center gap-x-2 gap-y-1 flex-wrap flex-1">
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar1.png" size="small" shape="circle" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png" size="small" shape="circle" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg" size="small" shape="circle" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="small" shape="circle" />
+                            <div class="w-full"></div>
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png" size="small" shape="circle" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg" size="small" shape="circle" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png" size="small" shape="circle" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png" size="small" shape="circle" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg" size="small" shape="circle" />
+                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg" size="small" shape="circle" />
+                        </div>
+                        <Button icon="pi pi-arrow-up-right" rounded text />
+                    </div>
+                    <div class="text-2xl font-medium text-color mt-6 leading-8">That's your avatar</div>
+                    <div class="leading-6 text-muted-color mt-2">Easy to use! place it, watch it.</div>
+                </div>
+                <div class="border border-surface rounded-3xl p-6 flex flex-col gap-6">
+                    <div class="flex items-center justify-between gap-2">
+                        <div class="text-2xl font-medium leading-8 flex-1">Add Member</div>
+                        <Button icon="pi pi-times" rounded text severity="secondary" />
+                    </div>
+                    <div>
+                        <div class="text-muted-color leading-6">Email</div>
+                        <div class="flex items-start gap-3 mt-2">
+                            <AutoComplete v-model="emailChips" inputId="multiple-ac-2" class="flex-1" multiple @complete="search" :typeahead="false" />
+                            <Button label="Invite" />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="font-medium leading-6 text-muted-color">Members</div>
+                        <div class="mt-4 flex flex-col gap-4">
+                            <div class="flex items-center gap-2 justify-between">
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png" class="w-9 h-9" shape="circle" />
+                                <div class="flex-1">
+                                    <div class="text-sm font-medium text-color leading-5">Brook Simmons</div>
+                                    <div class="text-sm text-muted-color leading-5 line-clamp-4">brook.sim42@primevue.org</div>
+                                </div>
+                                <Select
+                                    v-model="memberSelectedTypes[0]"
+                                    :options="memberTypes"
+                                    optionLabel="name"
+                                    placeholder="Select"
+                                    class="!w-16"
+                                    :pt="{
+                                        root: { class: '!border-0 !shadow-none' },
+                                        label: { class: '!p-0 !text-muted-color !text-sm' },
+                                        dropdown: { class: '!p-0 !w-auto' },
+                                        dropdownicon: { class: '!w-3 !h-3' },
+                                        option: { class: '!text-sm !px-2 !py-1' }
+                                    }"
+                                />
+                            </div>
+                            <div class="flex items-center gap-2 justify-between">
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg" class="w-9 h-9" shape="circle" />
+                                <div class="flex-1">
+                                    <div class="text-sm font-medium text-color leading-5">Dianne Russell</div>
+                                    <div class="text-sm text-muted-color leading-5 line-clamp-4">di.russ23@primevue.org</div>
+                                </div>
+                                <Select
+                                    v-model="memberSelectedTypes[1]"
+                                    :options="memberTypes"
+                                    optionLabel="name"
+                                    placeholder="Select"
+                                    class="!w-16"
+                                    :pt="{
+                                        root: { class: '!border-0 !shadow-none' },
+                                        label: { class: '!p-0 !text-muted-color !text-sm' },
+                                        dropdown: { class: '!p-0 !w-auto' },
+                                        dropdownicon: { class: '!w-3 !h-3' },
+                                        option: { class: '!text-sm !px-2 !py-1' }
+                                    }"
+                                />
+                            </div>
+                            <div class="flex items-center gap-2 justify-between">
+                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg" class="w-9 h-9" shape="circle" />
+                                <div class="flex-1">
+                                    <div class="text-sm font-medium text-color leading-5">Jacob Jones</div>
+                                    <div class="text-sm text-muted-color leading-5 line-clamp-4">jac.jon87@primevue.org</div>
+                                </div>
+                                <Select
+                                    v-model="memberSelectedTypes[2]"
+                                    :options="memberTypes"
+                                    optionLabel="name"
+                                    placeholder="Select"
+                                    class="!w-16"
+                                    :pt="{
+                                        root: { class: '!border-0 !shadow-none' },
+                                        label: { class: '!p-0 !text-muted-color !text-sm' },
+                                        dropdown: { class: '!p-0 !w-auto' },
+                                        dropdownicon: { class: '!w-3 !h-3' },
+                                        option: { class: '!text-sm !px-2 !py-1' }
+                                    }"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="font-medium leading-6 text-muted-color">Copy Link</div>
+                        <div class="flex items-center gap-3 mt-2">
+                            <InputText v-model="copiedText" type="text" class="flex-1" readOnly />
+                            <Button label="Copy" severity="secondary" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex-1 flex flex-wrap gap-6">
+                <div class="flex-1 border border-surface rounded-3xl p-6">
+                    <div class="text-color font-medium leading-6 mb-4">User Profiles</div>
+                    <SelectButton
+                        v-model="userProfiles"
+                        :options="userProfilesOptions"
+                        :pt="{
+                            root: {
+                                class: 'w-full'
+                            },
+                            pcbutton: {
+                                root: {
+                                    class: 'flex-1'
+                                }
+                            }
+                        }"
+                    />
+                    <div class="flex flex-col gap-4 mt-6">
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-volume-down text-color text-xl"></i>
+                            <div class="leading-6 text-color flex-1">Sound</div>
+                            <ToggleSwitch v-model="userProfilesValues[0]" />
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-wifi text-color text-xl"></i>
+                            <div class="leading-6 text-color flex-1">Wi-Fi</div>
+                            <ToggleSwitch v-model="userProfilesValues[1]" />
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-moon text-color text-xl"></i>
+                            <div class="leading-6 text-color flex-1">Dark Mode</div>
+                            <ToggleSwitch v-model="userProfilesValues[2]" />
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-map-marker text-color text-xl"></i>
+                            <div class="leading-6 text-color flex-1">Location Services</div>
+                            <ToggleSwitch v-model="userProfilesValues[3]" />
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-shield text-color text-xl"></i>
+                            <div class="leading-6 text-color flex-1">Privacy Settings</div>
+                            <ToggleSwitch v-model="userProfilesValues[4]" />
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-sync text-color text-xl"></i>
+                            <div class="leading-6 text-color flex-1">Auto Update</div>
+                            <ToggleSwitch v-model="userProfilesValues[5]" />
+                        </div>
+                    </div>
+                </div>
+                <div class="flex-1 border border-surface rounded-3xl p-6 flex flex-col gap-6">
+                    <div class="font-medium text-color text-2xl text-center">Forgot Password</div>
+                    <div>
+                        <div class="text-muted-color text-lg text-center leading-snug">
+                            Verification code <br />
+                            has been sent to email
+                        </div>
+                        <div class="rounded-full px-4 py-1 bg-surface-200 dark:bg-surface-800 w-fit mx-auto mt-4 text-color text-lg leading-relaxed">u*******m@gmail.com</div>
+                    </div>
+                    <div class="flex items-center justify-center">
+                        <Button label="Resend" text />
+                    </div>
+                    <div class="flex items-center justify-center">
+                        <InputOtp
+                            v-model="forgotPasswordOTP"
+                            :length="6"
+                            integerOnly
+                            :pt="{
+                                root: {
+                                    class: 'w-full [&>*]:flex-1 [&>*]:min-h-14 [&>*]:text-2xl '
+                                }
+                            }"
+                        />
+                    </div>
+                    <Button label="Change password" />
+                </div>
+                <div class="border border-surface rounded-3xl p-6">
+                    <div class="text-color font-medium leading-6 mb-6">Price Range</div>
+                    <div>
+                        <Slider v-model="priceRange" :min="0" range :max="15000" />
+                    </div>
+                    <div class="mt-4 flex gap-2">
+                        <div class="flex-1">
+                            <label for="price-min-val" class="leading-6 text-color">Min Value</label>
+                            <InputNumber
+                                v-model="priceRange[0]"
+                                :min="0"
+                                inputId="price-min-val"
+                                mode="currency"
+                                currency="USD"
+                                locale="en-US"
+                                :pt="{
+                                    root: {
+                                        class: '[&>*]:w-full mt-2'
+                                    }
+                                }"
+                            />
+                        </div>
+                        <div class="flex-1">
+                            <label for="price-max-val" class="leading-6 text-color">Max Value</label>
+                            <InputNumber
+                                v-model="priceRange[1]"
+                                inputId="price-max-val"
+                                mode="currency"
+                                currency="USD"
+                                locale="en-US"
+                                :pt="{
+                                    root: {
+                                        class: '[&>*]:w-full mt-2'
+                                    }
+                                }"
+                            />
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <div class="text-color font-medium leading-6 mb-6">Popular specs</div>
+                        <div class="flex items-center gap-4 flex-wrap">
+                            <div v-for="(data, index) of priceRangePopularSpecs" :key="index" class="flex align-items-center">
+                                <Checkbox v-model="priceRangePopularSpecsChecked" :inputId="data.value" :name="data.value" :value="data.value" />
+                                <label :for="data.value" class="ml-2">{{ data.value }}</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-3 flex-wrap [&>*]:flex-1 mt-6">
+                        <Button label="Undo" outlined />
+                        <Button label="Random" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Cards',
+    redrawListener: null,
+    data() {
+        return {
+            files: [],
+            totalSize: 0,
+            totalSizePercent: 0,
+            jobApplication: false,
+            userProfiles: 'Chilling',
+            userProfilesOptions: ['Chilling', 'Do Not Disturb'],
+            userProfilesValues: [true, true, false, false, true, false],
+            forgotPasswordOTP: '023',
+            priceRange: [0, 10000],
+            priceMinVal: 0,
+            priceMaxVal: 100000,
+            priceRangePopularSpecs: [
+                { value: 'Furnished', checked: true },
+                { value: 'Unfurnished', checked: false },
+                { value: 'Detached', checked: true },
+                { value: 'Underfloor heating', checked: false },
+                { value: 'Balcony', checked: true },
+                { value: 'Duplex', checked: false },
+                { value: 'Triplex', checked: false },
+                { value: 'Garden', checked: false },
+                { value: 'Central location', checked: false },
+                { value: 'Sea view', checked: true }
+            ],
+            priceRangePopularSpecsChecked: ['Furnished', 'Detached', 'Balcony', 'Sea view'],
+            userSelectButtonOptions: ['Joined', 'Hosted'],
+            selectedUserSelectButtonOption: 'Joined',
+            darkMode: false,
+            emailChips: [],
+            memberSelectedTypes: ['O', 'E', 'V'],
+            memberTypes: [
+                { name: 'Owner', code: 'O' },
+                { name: 'Editor', code: 'E' },
+                { name: 'Viewer', code: 'V' }
+            ],
+            copiedText: 'https://www.example.com/shared-files/user123/document-collection/file12345',
+            documentName: 'Aura Theme',
+            filesTag: ['ui', 'redesign', 'dashboard'],
+            selectedPermission: 'Everyone',
+            permissions: [
+                { name: 'Everyone', icon: 'pi pi-globe', key: 'E' },
+                { name: 'Admins only', icon: 'pi pi-users', key: 'A' }
+            ]
+        };
+    },
+    methods: {
+        onRemoveTemplatingFile(file, removeFileCallback, index) {
+            removeFileCallback(index);
+            this.totalSize -= parseInt(this.formatSize(file.size));
+            this.totalSizePercent = this.totalSize / 10;
+        },
+        onClearTemplatingUpload(clear) {
+            clear();
+            this.totalSize = 0;
+            this.totalSizePercent = 0;
+        },
+        onSelectedFiles(event) {
+            this.files = event.files;
+            this.files.forEach((file) => {
+                this.totalSize += parseInt(this.formatSize(file.size));
+            });
+        },
+        uploadEvent(callback) {
+            this.totalSizePercent = this.totalSize / 10;
+            callback();
+        },
+        onTemplatedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
+        formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
+            if (bytes === 0) {
+                return `0 ${sizes[0]}`;
+            }
+
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+            return `${formattedSize} ${sizes[i]}`;
+        },
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    },
+    components: {}
+};
+</script>
diff --git a/apps/labs/components/landing/samples/ChatApp.vue b/apps/labs/components/landing/samples/ChatApp.vue
new file mode 100644
index 000000000..cf3b070ea
--- /dev/null
+++ b/apps/labs/components/landing/samples/ChatApp.vue
@@ -0,0 +1,433 @@
+<template>
+    <div class="flex-1 h-full overflow-y-auto overflow-x-clip overflow-hidden flex border border-surface rounded-2xl">
+        <div class="w-4/12 xl:w-3/12 min-w-40 overflow-auto flex flex-col gap-6">
+            <div class="flex flex-col gap-6 pt-3 pb-2 -mb-2 px-5 sticky top-0 bg-surface-0 dark:bg-surface-950 z-10">
+                <div class="flex items-center justify-between gap-6 text-color">
+                    <div class="text-2xl font-medium lead">Chats</div>
+                    <Button icon="pi pi-plus" text />
+                </div>
+            </div>
+            <div class="px-5">
+                <IconField iconPosition="left">
+                    <InputIcon class="pi pi-search"> </InputIcon>
+                    <InputText v-model="search" placeholder="Search" class="w-full" />
+                </IconField>
+            </div>
+            <div class="w-full px-5">
+                <SelectButton
+                    v-model="value"
+                    :options="options"
+                    aria-labelledby="basic"
+                    :pt="{
+                        root: {
+                            class: 'w-full'
+                        },
+                        pcbutton: {
+                            root: {
+                                class: 'flex-1'
+                            }
+                        }
+                    }"
+                />
+            </div>
+            <div class="flex-1 flex flex-col">
+                <div
+                    v-for="chat in chats"
+                    :key="chat.name"
+                    class="flex items-center gap-2 p-4 cursor-pointer hover:bg-emphasis transition-all"
+                    :class="{
+                        'bg-emphasis': chat.name === activeChat
+                    }"
+                >
+                    <div class="relative">
+                        <div v-if="chat.active !== undefined" class="absolute top-0 right-0 p-[1px] bg-surface-0 dark:bg-surface-950 rounded-full flex items-center justify-center">
+                            <Badge :severity="chat.active ? 'success' : 'danger'" class="p-1.5"></Badge>
+                        </div>
+                        <Avatar
+                            v-bind="chat.image ? { image: chat.image } : { label: chat.capName }"
+                            :class="{
+                                '!bg-primary-100 !text-primary-950': !chat.image
+                            }"
+                            class="text-base font-medium flex"
+                            size="large"
+                            shape="circle"
+                        />
+                    </div>
+                    <div class="flex-1">
+                        <div class="flex items-start gap-1 justify-between">
+                            <div class="text-color font-medium leading-6">{{ chat.name }}</div>
+                            <div class="text-sm text-muted-color leading-5">{{ chat.time }}</div>
+                        </div>
+                        <div class="flex items-center gap-5 justify-between mt-1">
+                            <div class="text-muted-color text-sm leading-5 line-clamp-1">{{ chat.lastMessage }}</div>
+                            <Badge v-if="chat.unreadMessageCount > 0" :value="chat.unreadMessageCount" severity="contrast"></Badge>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="w-8/12 xl:w-6/12 border-x border-surface flex flex-col">
+            <div class="flex items-center p-4 gap-7 border-b border-surface">
+                <div class="flex items-center">
+                    <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png" class="mr-2 av" size="large" shape="circle" />
+                    <div class="flex-1">
+                        <div class="text-color leading-6 cursor-pointer hover:text-muted-color-emphasis transition-colors">PrimeTek</div>
+                        <div class="text-muted-color leading-5 line-clamp-1 mt-1">Cody Fisher, Esther Howard, Jerome Bell, Kristin Watson, Ronald Richards, Darrell Steward</div>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2">
+                    <Button icon="pi pi-phone" text />
+                    <Button icon="pi pi-search" text />
+                    <Button type="button" icon="pi pi-ellipsis-h" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+                    <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
+                </div>
+            </div>
+            <div class="flex-1 overflow-y-auto flex flex-col gap-8 py-8 px-6">
+                <div v-for="message in chatMessages" :key="message.id" class="flex items-start min-w-64 w-fit max-w-[60%]" :class="{ 'ml-auto mr-0 flex-row-reverse': message.type === 'sent' }">
+                    <div
+                        class="flex items-center gap-2 sticky top-0 transition-all"
+                        :class="{
+                            'flex-row-reverse': message.type === 'sent'
+                        }"
+                    >
+                        <Avatar
+                            v-bind="message.image ? { image: message.image } : { label: message.capName }"
+                            :class="{
+                                'bg-primary-100 text-primary-950': !message.image
+                            }"
+                            class="w-10 h-10 text-sm font-medium"
+                            shape="circle"
+                        />
+                        <div>
+                            <svg :class="message.type === 'received' ? 'fill-surface-100 dark:fill-surface-800' : 'fill-primary rotate-180'" class="" xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none">
+                                <path d="M1.79256 7.09551C0.516424 6.31565 0.516426 4.46224 1.79256 3.68238L7 0.500055L7 10.2778L1.79256 7.09551Z" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div :class="message.type === 'received' ? 'flex-1 bg-surface-100 dark:bg-surface-800 px-2 py-1 rounded-lg' : 'flex-1 bg-primary px-2 py-1 rounded-lg'">
+                        <p :class="message.type === 'received' ? 'text-color leading-6 mb-0' : 'text-primary-contrast leading-6 mb-0'">
+                            {{ message.message }}
+                        </p>
+                        <div v-if="message.attachment" :class="message.type === 'received' ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary-emphasis'" class="mt-2 w-full rounded-lg mb-0.5 hover:opacity-75 transition-all">
+                            <img class="w-full h-auto block cursor-pointer" :src="message.attachment" alt="Message Image" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="p-4 border-t border-surface flex items-end justify-between gap-2">
+                <div class="flex items-end gap-1 flex-1">
+                    <Button icon="pi pi-face-smile" text />
+                    <Button icon="pi pi-paperclip" text />
+                    <Textarea class="ml-1 flex-1 border-0 shadow-none max-h-32 min-h-9 bg-emphasis overflow-auto" autoResize rows="1" placeholder="Write your message..." />
+                </div>
+                <Button icon="pi pi-send" />
+            </div>
+        </div>
+        <div class="w-3/12 xl:block hidden min-w-40 py-6 px-3 overflow-auto">
+            <div class="flex flex-col items-center justify-center">
+                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png" class="w-32 h-32" size="xlarge" shape="circle" />
+                <div class="leading-6 font-medium text-color mt-4 w-full text-center">PrimeTek</div>
+                <div class="leading-5 text-sm text-muted-color mt-1 w-full text-center">@primetek</div>
+                <div class="flex items-center justify-center flex-wrap gap-1 mt-4">
+                    <Button icon="pi pi-phone text-muted-color" severity="secondary" text />
+                    <Button icon="pi pi-video text-muted-color" severity="secondary" text />
+                    <Button icon="pi pi-sign-in text-muted-color" severity="secondary" text />
+                    <Button icon="pi pi-info-circle text-muted-color" severity="secondary" text />
+                    <Button type="button" icon="pi pi-ellipsis-v text-muted-color" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+                    <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
+                </div>
+            </div>
+            <div class="flex flex-col gap-4 mt-4">
+                <div class="flex items-center gap-2">
+                    <i class="pi pi-bell text-color"></i>
+                    <div class="leading-6 font-medium text-color flex-1">Notification</div>
+                    <ToggleSwitch v-model="notification" />
+                </div>
+                <div class="flex items-center gap-2">
+                    <i class="pi pi-volume-down text-color"></i>
+                    <div class="leading-6 font-medium text-color flex-1">Sound</div>
+                    <ToggleSwitch v-model="sound" />
+                </div>
+                <div class="flex items-center gap-2">
+                    <i class="pi pi-download text-color"></i>
+                    <div class="leading-6 font-medium text-color flex-1">Save to downloads</div>
+                    <ToggleSwitch v-model="download" />
+                </div>
+            </div>
+            <div class="mt-6">
+                <div class="flex items-center gap-2">
+                    <div class="flex-1 text-color leading-6 font-medium">Members</div>
+                    <Button label="See All" class="text-sm py-0.5 px-2 text-muted-color" text />
+                </div>
+                <div class="mt-4 flex flex-col gap-4">
+                    <div v-for="member in members" :key="member.name" class="flex items-center gap-2 cursor-pointer">
+                        <Avatar
+                            v-bind="member.image ? { image: member.image } : { label: member.capName }"
+                            :class="{
+                                'bg-orange-100 text-orange-950': !member.image
+                            }"
+                            class="font-medium text-xs"
+                            shape="circle"
+                        />
+                        <div class="text-sm text-color hover:text-muted-color-emphasis transition-colors font-medium leading-5 flex-1">
+                            {{ member.name }}
+                        </div>
+                        <i class="pi pi-chevron-right text-xs text-muted-color"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-5">
+                <SelectButton
+                    v-model="media"
+                    :options="mediaOptions"
+                    :pt="{
+                        root: {
+                            class: 'w-full'
+                        },
+                        pcbutton: {
+                            root: {
+                                class: 'flex-1'
+                            }
+                        }
+                    }"
+                />
+                <div class="mt-3 mb-5 grid grid-cols-3 gap-2">
+                    <div v-for="(media, index) in chatMedia" :key="index" class="bg-emphasis hover:opacity-70 transition-all flex-1 aspect-square rounded-lg border border-surface cursor-pointer">
+                        <img class="w-full h-full object-cover block" :src="media" alt="Media Image" />
+                    </div>
+                    <div class="bg-emphasis hover:opacity-70 transition-all flex-1 aspect-square rounded-lg border border-surface cursor-pointer flex items-center justify-center">
+                        <span class="text-muted-color font-medium">99+</span>
+                    </div>
+                </div>
+                <Button
+                    label="Show more"
+                    icon="pi pi-arrow-right"
+                    iconPos="right"
+                    outlined
+                    class="w-full text-left"
+                    :pt="{
+                        root: {
+                            class: 'justify-between'
+                        }
+                    }"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Chat',
+    redrawListener: null,
+    data() {
+        return {
+            search: '',
+            download: false,
+            notification: true,
+            sound: false,
+            value: 'Chat',
+            value2: '',
+            options: ['Chat', 'Call'],
+            media: 'Media',
+            mediaOptions: ['Media', 'Link', 'Docs'],
+            activeChat: 'PrimeTek Team',
+            menuItems: [
+                {
+                    label: 'Group Info',
+                    icon: 'pi pi-info-circle'
+                },
+                {
+                    label: 'Leave group',
+                    icon: 'pi pi-sign-out'
+                }
+            ],
+            chats: [
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
+                    name: 'Cody Fisher',
+                    capName: 'CF',
+                    active: true,
+                    unreadMessageCount: 8,
+                    time: '12.30',
+                    lastMessage: "Hey there! I've heard about PrimeVue. Any cool tips for getting started?"
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png',
+                    name: 'PrimeTek Team',
+                    capName: 'PT',
+                    active: undefined,
+                    unreadMessageCount: 0,
+                    time: '11.15',
+                    lastMessage: "Let's implement PrimeVue. Elevating our UI game! 🚀"
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
+                    name: 'Jerome Bell',
+                    capName: 'JB',
+                    active: true,
+                    unreadMessageCount: 4,
+                    time: '11.15',
+                    lastMessage: "Absolutely! PrimeVue's documentation is gold—simplifies our UI work."
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
+                    name: 'Robert Fox',
+                    capName: 'RF',
+                    active: false,
+                    unreadMessageCount: 0,
+                    time: '11.15',
+                    lastMessage: "Interesting! PrimeVue sounds amazing. What's your favorite feature?"
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
+                    name: 'Esther Howard',
+                    capName: 'EH',
+                    active: true,
+                    unreadMessageCount: 9,
+                    time: '11.15',
+                    lastMessage: 'Quick one, team! Anyone using PrimeVue for mobile app development?'
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg',
+                    name: 'Darlene Robertson',
+                    capName: 'DR',
+                    active: false,
+                    unreadMessageCount: 0,
+                    time: '11.15',
+                    lastMessage: "Just explored PrimeVue's themes. Can we talk about those stunning designs? 😍"
+                },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png',
+                    name: 'Ralph Edwards',
+                    capName: 'RE',
+                    active: false,
+                    unreadMessageCount: 0,
+                    time: '11.15',
+                    lastMessage: 'PrimeVue is a game-changer, right? What are your thoughts, folks?'
+                },
+                { image: '', name: 'Ronald Richards', capName: 'RR', active: false, unreadMessageCount: 0, time: '11.15', lastMessage: "Jumping in! PrimeVue's community forum is buzzing. Any engaging discussions?" },
+                { image: '', name: 'Kristin Watson', capName: 'KW', active: false, unreadMessageCount: 0, time: '11.15', lastMessage: 'Sharing a quick win-PrimeVue tutorials are leveling up my UI skills. 👩‍💻' },
+                {
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
+                    name: 'Darrell Steward',
+                    capName: 'DS',
+                    active: false,
+                    unreadMessageCount: 0,
+                    time: '11.15',
+                    lastMessage: "Reflecting on PrimeVue's impact on our workflow. What's your take?"
+                }
+            ],
+            chatMessages: [
+                { id: 1, attachment: '', name: '', image: '', capName: 'OS', type: 'received', message: "Awesome! What's the standout feature?" },
+                { id: 2, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png', capName: 'A', type: 'received', message: 'PrimeVue rocks! Simplifies UI dev with versatile components.' },
+                { id: 3, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg', capName: 'A', type: 'received', message: 'Intriguing! Tell us more about its impact.' },
+                {
+                    id: 4,
+                    attachment: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/message-image.png',
+                    name: '',
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
+                    capName: 'A',
+                    type: 'received',
+                    message: "It's design-neutral and compatible with Tailwind. Features accessible, high-grade components!"
+                },
+                { id: 5, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png', capName: 'A', type: 'sent', message: 'Customizable themes, responsive design – UI excellence!' },
+                { id: 6, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png', capName: 'A', type: 'received', message: 'Love it! Fast-tracking our development is key.' },
+                { id: 7, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png', capName: 'A', type: 'received', message: 'Documentation rocks too – smooth integration for all.' },
+                {
+                    id: 8,
+                    attachment: '',
+                    name: '',
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
+                    capName: 'B',
+                    type: 'sent',
+                    message: 'The flexibility and ease of use are truly impressive. Have you explored the new components?'
+                },
+                {
+                    id: 9,
+                    attachment: '',
+                    name: '',
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
+                    capName: 'C',
+                    type: 'received',
+                    message: 'Absolutely, the new calendar component has saved us a ton of development time!'
+                },
+                {
+                    id: 10,
+                    attachment: '',
+                    name: '',
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
+                    capName: 'D',
+                    type: 'received',
+                    message: "And the accessibility features are top-notch. It's great to see a library focusing on inclusivity."
+                },
+                {
+                    id: 11,
+                    attachment: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/message-image.png',
+                    name: '',
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
+                    capName: 'E',
+                    type: 'sent',
+                    message: "I couldn't agree more. Plus, the documentation is incredibly thorough, which makes onboarding new team members a breeze."
+                },
+                {
+                    id: 12,
+                    attachment: '',
+                    name: '',
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png',
+                    capName: 'F',
+                    type: 'received',
+                    message: 'Do you have any tips for optimizing performance when using multiple complex components?'
+                },
+                {
+                    id: 13,
+                    attachment: '',
+                    name: '',
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
+                    capName: 'G',
+                    type: 'received',
+                    message: 'Yes! Lazy loading and code splitting can make a huge difference, especially in larger applications.'
+                },
+                {
+                    id: 14,
+                    attachment: '',
+                    name: '',
+                    image: '',
+                    capName: 'HS',
+                    type: 'received',
+                    message: "I've also found that leveraging the component's internal state management capabilities can help streamline data flow and improve performance."
+                },
+                {
+                    id: 15,
+                    attachment: '',
+                    name: '',
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
+                    capName: 'H',
+                    type: 'sent',
+                    message: "That's great advice. It's amazing how much detail and thought has gone into making PrimeVue such a powerful tool for developers."
+                }
+            ],
+            chatMedia: [
+                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image1.png',
+                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image2.png',
+                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image3.png',
+                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image4.png',
+                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image5.png'
+            ],
+            members: [
+                { name: 'Robin Jonas', capName: 'RJ', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png' },
+                { name: 'Cameron Williamson', capName: 'CW', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg' },
+                { name: 'Eleanor Pena', capName: 'EP', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png' },
+                { name: 'Arlene McCoy', capName: 'AM', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png' },
+                { name: 'Dianne Russell', capName: 'DR', image: '' }
+            ]
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
+    },
+    components: {}
+};
+</script>
diff --git a/apps/labs/components/landing/samples/CustomersApp.vue b/apps/labs/components/landing/samples/CustomersApp.vue
new file mode 100644
index 000000000..f704cc66a
--- /dev/null
+++ b/apps/labs/components/landing/samples/CustomersApp.vue
@@ -0,0 +1,265 @@
+<template>
+    <div class="h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl p-6">
+        <div class="flex items-start gap-2 justify-between">
+            <div>
+                <div class="text-2xl leading-8 text-color font-medium">Customers</div>
+                <div class="mt-1 leading-6 text-muted-color">The analysis list here shows all users</div>
+            </div>
+            <Button icon="pi pi-circle-fill text-green-500" label="950 Active User" outlined severity="secondary" />
+        </div>
+        <div class="mt-10 mb-4 flex items-center justify-between">
+            <IconField iconPosition="left">
+                <InputIcon class="pi pi-search"> </InputIcon>
+                <InputText v-model="search" placeholder="Search" />
+            </IconField>
+            <div class="flex items-center gap-3">
+                <Button icon="pi pi-filter" outlined severity="secondary" />
+                <Divider layout="vertical" class="m-0" />
+                <Button icon="pi pi-refresh" outlined severity="secondary" />
+                <Button label="1 of 15" outlined severity="secondary" />
+                <Button icon="pi pi-chevron-left" outlined severity="secondary" />
+                <Button icon="pi pi-chevron-right" outlined severity="secondary" />
+            </div>
+        </div>
+        <div class="flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto">
+            <DataTable
+                v-model:selection="selectedRows"
+                :value="tableData"
+                :rows="10"
+                :pt="{
+                    root: {
+                        class: 'w-full flex-1 overflow-auto '
+                    },
+                    thead: {
+                        class: 'sticky top-0 z-10'
+                    }
+                }"
+                :dt="{
+                    headerCell: {
+                        background: 'transparent'
+                    },
+                    row: {
+                        background: 'transparent'
+                    }
+                }"
+            >
+                <template #empty>There is no customer.</template>
+                <Column selectionMode="multiple" headerStyle="width: 1rem" style="width: 1rem"></Column>
+                <Column field="name" header="Name">
+                    <template #body="{ data }">
+                        <div class="flex items-center">
+                            <OverlayBadge :severity="data.active === undefined ? 'contrast' : data.active ? 'success' : 'danger'" class="w-fit">
+                                <Avatar
+                                    v-bind="data.image ? { image: data.image } : { label: data.capName }"
+                                    :class="{
+                                        'bg-violet-100 text-violet-950 text-xs font-medium': !data.image
+                                    }"
+                                    class="rounded-md overflow-hidden flex"
+                                />
+                            </OverlayBadge>
+                            <div class="ml-4 leading-6 text-color font-medium">{{ data.name }}</div>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="title" header="Title">
+                    <template #body="{ data }">
+                        <div class="leading-6 text-muted-color">{{ data.title }}</div>
+                    </template>
+                </Column>
+                <Column field="company" header="Company Name">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <div class="flex items-center justify-center" v-html="companyLogos[data.company.logo]"></div>
+                            <div class="leading-6 text-surface-600 dark:text-surface-400">{{ data.company.name }}</div>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="email" header="Email Address">
+                    <template #body="{ data }">
+                        <div class="leading-6 text-muted-color truncate">{{ data.email }}</div>
+                    </template>
+                </Column>
+                <Column field="lead" header="Lead Source">
+                    <template #body="{ data }">
+                        <div class="leading-6 text-muted-color">{{ data.lead }}</div>
+                    </template>
+                </Column>
+                <Column field="status" header="Status">
+                    <template #body="{ data }">
+                        <Tag :severity="data.status === 'Active' ? 'success' : data.status === 'Inactive' ? 'danger' : 'info'" :value="data.status" class="font-medium"></Tag>
+                    </template>
+                </Column>
+                <Column field="more" header="More">
+                    <template #body>
+                        <div class="flex justify-end w-full">
+                            <Button @click="displayPopover" icon="pi pi-search" rounded outlined severity="secondary" />
+                        </div>
+                    </template>
+                </Column>
+            </DataTable>
+
+            <Popover ref="op">
+                <div class="flex gap-2">
+                    <Button label="Details" size="small" outlined @click="hidePopover"></Button>
+                    <Button label="Delete" severity="danger" size="small" outlined @click="hidePopover"></Button>
+                </div>
+            </Popover>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Inbox',
+    redrawListener: null,
+    data() {
+        return {
+            search: '',
+            tableData: [
+                {
+                    id: 1,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
+                    active: true,
+                    name: 'Brook Simmons',
+                    title: 'Sales Executive ',
+                    company: { name: 'Mistranet', logo: 'mistranet' },
+                    email: 'hi@brooksmmns.co',
+                    lead: 'Linkedin',
+                    status: 'Active'
+                },
+                {
+                    id: 2,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg',
+                    active: true,
+                    name: 'Dianne Russell',
+                    title: 'CEO',
+                    company: { name: 'BriteMank', logo: 'britemank' },
+                    email: 'hi@diannerussell.com',
+                    lead: 'Website',
+                    status: 'Inactive'
+                },
+                {
+                    id: 3,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
+                    active: undefined,
+                    name: 'Amy Elsner',
+                    title: 'Product Manager',
+                    company: { name: 'ZenTrailMs', logo: 'zentrailms' },
+                    email: 'hi@amyelsner.com',
+                    lead: 'Cold Call',
+                    status: 'Prospect'
+                },
+                {
+                    id: 4,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
+                    active: true,
+                    name: 'Jacob Jones',
+                    title: 'Manager',
+                    company: { name: 'Streamlinz', logo: 'streamlinz' },
+                    email: 'jacobjones@gmail.com',
+                    lead: 'Partner',
+                    status: 'Prospect'
+                },
+                { id: 5, image: '', active: false, name: 'Cameron Watson', capName: 'CW', title: 'Product Manager', company: { name: 'BriteMank', logo: 'britemank' }, email: 'hi@cameronwilliamson', lead: 'Social Media', status: 'Active' },
+                { id: 6, image: '', active: true, name: 'Wade Warren', capName: 'WW', title: 'Director', company: { name: 'Streamlinz', logo: 'streamlinz' }, email: 'hi@annetteblack.com', lead: 'Cold Call', status: 'Inactive' },
+                {
+                    id: 7,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
+                    active: true,
+                    name: 'Guy Hawkins',
+                    title: 'Director',
+                    company: { name: 'Wavelength', logo: 'wavelength' },
+                    email: 'hi@darrellsteward.com',
+                    lead: 'Linkedin',
+                    status: 'Active'
+                },
+                {
+                    id: 8,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
+                    active: true,
+                    name: 'Annette Black',
+                    title: 'Manager',
+                    company: { name: 'Wavelength', logo: 'wavelength' },
+                    email: 'jeromebell@gmail.com',
+                    lead: 'Website',
+                    status: 'Inactive'
+                },
+                {
+                    id: 9,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg',
+                    active: undefined,
+                    name: 'Darrell Steward',
+                    title: 'Product Manager',
+                    company: { name: 'ZenTrailMs', logo: 'zentrailms' },
+                    email: 'hi@onyamalimba.co',
+                    lead: 'Website',
+                    status: 'Active'
+                },
+                { id: 10, image: '', active: true, name: 'Jerome Bell', capName: 'JB', title: 'Marketing Manager', company: { name: 'Mistranet', logo: 'mistranet' }, email: 'hi@courtneyhenryo', lead: 'Social Media', status: 'Active' },
+                {
+                    id: 11,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
+                    active: undefined,
+                    name: 'Onyama Limba',
+                    title: 'Sales Executive ',
+                    company: { name: 'BriteMank', logo: 'britemank' },
+                    email: 'hi@arlenemccoy.com',
+                    lead: 'Social Media',
+                    status: 'Active'
+                }
+            ],
+            companyLogos: {
+                mistranet: `
+                <svg  xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+                    <path class="fill-surface-600 dark:fill-surface-400" fill-rule="evenodd" clip-rule="evenodd" d="M6.82207 0.728516C5.83146 0.728516 4.88145 1.12203 4.18099 1.82249L1.89501 4.10846C1.19454 4.80892 0.801025 5.75895 0.801025 6.74956C0.801025 7.8426 1.27054 8.82597 2.01888 9.509C1.27054 10.192 0.801025 11.1754 0.801025 12.2684C0.801025 13.2591 1.19454 14.2091 1.89501 14.9095L4.18099 17.1955C4.88145 17.896 5.83146 18.2895 6.82207 18.2895C7.91511 18.2895 8.89848 17.82 9.58152 17.0716C10.2646 17.82 11.2479 18.2895 12.341 18.2895C13.3316 18.2895 14.2816 17.896 14.982 17.1955L17.268 14.9095C17.9685 14.2091 18.362 13.2591 18.362 12.2684C18.362 11.1754 17.8925 10.192 17.1442 9.509C17.8925 8.82597 18.362 7.8426 18.362 6.74956C18.362 5.75895 17.9685 4.80892 17.268 4.10846L14.982 1.82249C14.2816 1.12203 13.3316 0.728516 12.341 0.728516C11.2479 0.728516 10.2646 1.19802 9.58152 1.94637C8.89848 1.19802 7.91511 0.728516 6.82207 0.728516ZM11.9859 9.62736C12.0509 9.56231 12.0509 9.45569 11.9859 9.39064L11.4907 8.89547C10.4363 7.84105 8.72674 7.84105 7.67233 8.89547L7.17716 9.39064C7.11211 9.45569 7.11211 9.56231 7.17716 9.62736L7.67233 10.1225C8.72674 11.177 10.4363 11.177 11.4907 10.1225L11.9859 9.62736ZM11.0796 13.2931C10.7451 13.6276 10.5571 14.0814 10.5571 14.5544C10.5571 15.5396 11.3558 16.3383 12.341 16.3383C12.8141 16.3383 13.2678 16.1503 13.6023 15.8158L15.8883 13.5298C16.2229 13.1953 16.4108 12.7415 16.4108 12.2684C16.4108 11.2833 15.6121 10.4846 14.627 10.4846C14.1539 10.4846 13.7001 10.6725 13.3656 11.0071L11.0796 13.2931ZM8.60592 14.5544C8.60592 14.0814 8.41798 13.6276 8.08345 13.2931L5.79743 11.0071C5.4629 10.6725 5.00918 10.4846 4.53608 10.4846C3.5509 10.4846 2.75224 11.2833 2.75224 12.2684C2.75224 12.7415 2.94018 13.1953 3.27471 13.5298L5.56071 15.8158C5.89525 16.1503 6.34898 16.3383 6.82207 16.3383C7.80724 16.3383 8.60592 15.5396 8.60592 14.5544ZM8.60592 4.46357C8.60592 4.93666 8.41798 5.39037 8.08346 5.72489L5.79743 8.01092C5.4629 8.34545 5.00918 8.5334 4.53608 8.5334C3.5509 8.5334 2.75224 7.73473 2.75224 6.74956C2.75224 6.27646 2.94018 5.82274 3.27471 5.48821L5.56071 3.20221C5.89525 2.86767 6.34898 2.67974 6.82207 2.67974C7.80724 2.67974 8.60592 3.47838 8.60592 4.46357ZM13.3656 8.01092L11.0796 5.72489C10.7451 5.39037 10.5571 4.93666 10.5571 4.46357C10.5571 3.47838 11.3558 2.67974 12.341 2.67974C12.8141 2.67974 13.2678 2.86767 13.6023 3.20221L15.8883 5.48821C16.2229 5.82274 16.4108 6.27646 16.4108 6.74956C16.4108 7.73473 15.6121 8.5334 14.627 8.5334C14.1539 8.5334 13.7001 8.34545 13.3656 8.01092Z"/>
+                </svg>
+                `,
+                britemank: `
+                <svg class="fill-surface-600 dark:fill-surface-400" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+<g clip-path="url(#clip0_536_12504)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3011 5.75643C12.1897 5.68201 12.0754 5.6128 11.9585 5.54894C10.8679 4.95318 9.80103 3.99069 9.80103 2.74805V0.498047C11.581 0.498047 13.3211 1.02589 14.8012 2.01482C16.2812 3.00375 17.4347 4.40936 18.1159 6.05388C18.7971 7.69841 18.9754 9.50804 18.6281 11.2539C18.2808 12.9997 17.4237 14.6033 16.165 15.862C14.9063 17.1207 13.3027 17.9778 11.5568 18.3251C9.81102 18.6724 8.00139 18.4941 6.35686 17.813C4.71234 17.1318 3.30673 15.9782 2.3178 14.4982C1.32887 13.0181 0.801025 11.2781 0.801025 9.49805H3.05103C4.29367 9.49805 5.25615 10.565 5.85191 11.6555C5.91578 11.7724 5.98498 11.8867 6.05941 11.9981C6.55387 12.7381 7.25668 13.3149 8.07897 13.6555C8.90121 13.9961 9.80602 14.0852 10.6789 13.9116C11.5518 13.7379 12.3537 13.3094 12.983 12.68C13.6123 12.0507 14.0409 11.2489 14.2145 10.376C14.3882 9.50304 14.2991 8.59823 13.9585 7.77599C13.6179 6.9537 13.0411 6.25089 12.3011 5.75643Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.75102 0.498049C5.50249 0.498049 5.30335 0.700016 5.27854 0.947303C5.23471 1.38414 5.12711 1.81303 4.95848 2.22012C4.73234 2.76609 4.40087 3.26216 3.983 3.68003C3.56514 4.0979 3.06907 4.42936 2.5231 4.65551C2.116 4.82413 1.68711 4.93174 1.25028 4.97557C1.00299 5.00038 0.801026 5.19952 0.801026 5.44805L0.801025 9.49805C1.98292 9.49805 3.15324 9.26526 4.24518 8.81297C5.33711 8.36067 6.32927 7.69773 7.16497 6.86199C8.00071 6.0263 8.66365 5.03414 9.11594 3.9422C9.56824 2.85027 9.80102 1.67994 9.80102 0.498047L5.75102 0.498049Z"/>
+</g>
+<defs>
+<clipPath id="clip0_536_12504">
+<rect width="18" height="18" fill="white" transform="translate(0.800049 0.5)"/>
+</clipPath>
+</defs>
+</svg>
+                `,
+                zentrailms: `
+<svg class="fill-surface-600 dark:fill-surface-400" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.79908 18.5C14.7696 18.5 18.7991 14.4705 18.7991 9.49998C18.7991 4.52944 14.7696 0.5 9.79908 0.5C4.8285 0.5 0.799072 4.52944 0.799072 9.49998C0.799072 14.4705 4.8285 18.5 9.79908 18.5ZM12.6068 4.69258C12.7434 4.20712 12.2723 3.92006 11.8421 4.22658L5.83597 8.5053C5.36937 8.83772 5.44276 9.49998 5.94622 9.49998H7.52779V9.48774H10.6102L8.09862 10.3739L6.99139 14.3074C6.85473 14.7929 7.32579 15.0799 7.75608 14.7734L13.7622 10.4947C14.2288 10.1623 14.1553 9.49998 13.6519 9.49998H11.2535L12.6068 4.69258Z" />
+</svg>
+                `,
+                streamlinz: `<svg class="fill-surface-600 dark:fill-surface-400" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+<path d="M9.79907 0.498047C8.61719 0.498047 7.44683 0.730864 6.3549 1.18313C5.26297 1.63544 4.27086 2.29835 3.43509 3.13407C2.59938 3.96983 1.93647 4.96194 1.48415 6.05387C1.03189 7.1458 0.799072 8.31616 0.799072 9.49804C0.799072 10.6799 1.03189 11.8503 1.48415 12.9422C1.93647 14.0341 2.59938 15.0262 3.43509 15.862C4.27086 16.6977 5.26297 17.3606 6.3549 17.813C7.44683 18.2652 8.61719 18.498 9.79907 18.498V13.998C9.2081 13.998 8.62295 13.8817 8.07698 13.6555C7.53102 13.4293 7.03494 13.0979 6.61708 12.68C6.19922 12.2622 5.86777 11.7661 5.64164 11.2201C5.41545 10.6742 5.29907 10.089 5.29907 9.49804C5.29907 8.90708 5.41545 8.32192 5.64164 7.77596C5.86777 7.22999 6.19922 6.73391 6.61708 6.31606C7.03494 5.8982 7.53102 5.56674 8.07698 5.34061C8.62295 5.11443 9.2081 4.99804 9.79907 4.99804V0.498047Z" />
+<path d="M9.79905 12.5019C11.4559 12.5019 12.799 11.1588 12.799 9.50193C12.799 7.84506 11.4559 6.50195 9.79905 6.50195C8.14218 6.50195 6.79907 7.84506 6.79907 9.50193C6.79907 11.1588 8.14218 12.5019 9.79905 12.5019Z"/>
+<path d="M0.799072 9.49805C0.799072 10.6799 1.03189 11.8503 1.48415 12.9422C1.93647 14.0341 2.59938 15.0263 3.43509 15.862C4.27086 16.6977 5.26297 17.3606 6.3549 17.813C7.44683 18.2652 8.61719 18.498 9.79907 18.498C10.9809 18.498 12.1513 18.2652 13.2432 17.813C14.3352 17.3606 15.3273 16.6977 16.163 15.862C16.9988 15.0263 17.6617 14.0341 18.114 12.9422C18.5662 11.8503 18.7991 10.6799 18.7991 9.49805H14.2991C14.2991 10.089 14.1827 10.6742 13.9565 11.2201C13.7304 11.7661 13.3989 12.2622 12.9811 12.68C12.5632 13.0979 12.0671 13.4293 11.5212 13.6555C10.9752 13.8817 10.39 13.998 9.79907 13.998C9.2081 13.998 8.62295 13.8817 8.07698 13.6555C7.53102 13.4293 7.03494 13.0979 6.61708 12.68C6.19922 12.2622 5.86777 11.7661 5.64164 11.2201C5.41545 10.6742 5.29907 10.089 5.29907 9.49805H0.799072Z" />
+<path d="M12.7991 9.50199C12.7991 8.70634 12.483 7.94329 11.9204 7.38066C11.3578 6.81803 10.5948 6.50195 9.7991 6.50195C9.00345 6.50195 8.24041 6.81803 7.67778 7.38066C7.11515 7.94329 6.79907 8.70634 6.79907 9.50199H9.7991H12.7991Z" />
+</svg>`,
+                wavelength: `<svg class="fill-surface-600 dark:fill-surface-400" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+<path d="M9.79907 0.5C4.82851 0.5 0.799072 4.52943 0.799072 9.5C5.76963 9.5 9.79907 5.47056 9.79907 0.5Z" />
+<path d="M9.79907 18.5C14.7696 18.5 18.7991 14.4706 18.7991 9.5C13.8285 9.5 9.79907 13.5294 9.79907 18.5Z" />
+<path d="M9.79907 0.5C14.7696 0.5 18.7991 4.52943 18.7991 9.5C13.8285 9.5 9.79907 5.47056 9.79907 0.5Z" />
+<path d="M9.79907 18.5C4.82851 18.5 0.799072 14.4706 0.799072 9.5C5.76963 9.5 9.79907 13.5294 9.79907 18.5Z" />
+</svg>`
+            },
+            selectedRows: []
+        };
+    },
+
+    methods: {
+        displayPopover(event) {
+            this.hidePopover();
+
+            this.$nextTick(() => {
+                this.$refs.op.show(event);
+            });
+        },
+        hidePopover() {
+            this.$refs.op.hide();
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/landing/samples/InboxApp.vue b/apps/labs/components/landing/samples/InboxApp.vue
new file mode 100644
index 000000000..d032f7772
--- /dev/null
+++ b/apps/labs/components/landing/samples/InboxApp.vue
@@ -0,0 +1,364 @@
+<template>
+    <div class="flex gap-4 h-full flex-1 w-full overflow-auto">
+        <div class="w-64 h-full overflow-hidden border border-surface rounded-2xl flex flex-col">
+            <div class="flex items-center justify-between gap-2 p-4 border-b border-surface">
+                <div class="text-xl font-medium leading-7 text-color">Mails</div>
+                <Button icon="pi pi-plus" class="w-8 h-8" />
+            </div>
+            <div class="flex-1 flex flex-col overflow-auto justify-between gap-4 pt-4 pb-4 px-4">
+                <div class="flex-1 overflow-auto flex flex-col gap-2">
+                    <div v-for="(navData, i) of inboxNavs" :key="i" class="flex flex-col gap-2">
+                        <div class="text-sm font-medium leading-5 text-surface-400 dark:text-surface-500">{{ navData.title }}</div>
+                        <button
+                            v-for="(nav, j) of navData.navs"
+                            :key="j"
+                            @click="activeInboxNav = nav.name"
+                            :class="activeInboxNav === nav.name ? 'text-color bg-emphasis' : 'text-muted-color bg-transparent'"
+                            class="px-4 py-2 rounded-lg flex items-center gap-2 cursor-pointer hover:bg-emphasis transition-all"
+                        >
+                            <i :class="nav.icon"></i>
+                            <span class="font-medium">{{ nav.name }}</span>
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <div class="border border-surface rounded-border px-4 pb-4 pt-3 mb-4">
+                        <div class="font-medium text-color mb-4">Free Version</div>
+                        <ProgressBar
+                            :value="75"
+                            :pt="{
+                                value: {
+                                    class: 'bg-red-600'
+                                }
+                            }"
+                        >
+                            <span class="w-full text-center text-sm font-normal text-surface-0 leading-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">4 days left</span>
+                        </ProgressBar>
+                    </div>
+                    <Button label="Upgrade to PRO 🚀" outlined class="w-full" />
+                </div>
+            </div>
+        </div>
+        <div class="flex-1 h-full overflow-hidden flex border border-surface rounded-2xl">
+            <DataTable
+                v-model:selection="selectedRows"
+                scrollable
+                :value="tableData"
+                :rows="10"
+                :pt="{
+                    root: {
+                        class: 'w-full flex-1 overflow-x-auto'
+                    },
+                    thead: {
+                        class: 'hidden'
+                    },
+                    header: {
+                        class: 'sticky top-0 z-10'
+                    },
+                    column: {
+                        bodyCell: {
+                            class: '!border-transparent'
+                        }
+                    }
+                }"
+                :dt="{
+                    headerCell: {
+                        background: 'transparent'
+                    },
+                    row: {
+                        background: 'transparent'
+                    }
+                }"
+            >
+                <template #header>
+                    <div class="flex xl:items-center justify-between gap-2 flex-col xl:flex-row">
+                        <div class="flex items-center gap-2">
+                            <Checkbox v-model="checked" :binary="true" class="mr-1" @update:modelValue="onSelectionChange" />
+                            <Button icon="pi pi-envelope" outlined severity="secondary" />
+                            <Button icon="pi pi-exclamation-circle" outlined severity="secondary" />
+                            <Button icon="pi pi-tag" outlined severity="secondary" />
+                            <Button icon="pi pi-inbox" label="Archive" outlined severity="secondary" />
+                            <Button icon="pi pi-trash" label="Trash" outlined severity="secondary" />
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <IconField iconPosition="left" class="w-6/12 xl:max-w-36">
+                                <InputIcon class="pi pi-search"> </InputIcon>
+                                <InputText v-model="search" placeholder="Search" class="w-full" />
+                            </IconField>
+                            <Button icon="pi pi-filter" outlined severity="secondary" />
+                            <Divider layout="vertical" class="m-0" />
+                            <Button icon="pi pi-refresh" outlined severity="secondary" />
+                            <Button label="1 of 15" class="!whitespace-nowrap" outlined severity="secondary" />
+                            <Button icon="pi pi-chevron-left" outlined severity="secondary" />
+                            <Button icon="pi pi-chevron-right" outlined severity="secondary" />
+                        </div>
+                    </div>
+                </template>
+                <template #empty>Inbox is empty.</template>
+                <Column selectionMode="multiple" headerStyle="width: 1rem" style="width: 1rem"></Column>
+                <Column field="bookmarked" headerStyle="width: 1rem" style="width: 1rem; padding: 0.5rem">
+                    <template #body="{ data }">
+                        <div @click="data.bookmarked = !data.bookmarked" @click.stop>
+                            <i :class="data.bookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"></i>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="name">
+                    <template #body="{ data }">
+                        <div class="flex items-center">
+                            <OverlayBadge severity="danger" class="w-fit">
+                                <Avatar
+                                    v-bind="data.image ? { image: data.image } : { label: data.capName }"
+                                    :class="{
+                                        'bg-violet-100 text-violet-950 text-xs font-medium': !data.image
+                                    }"
+                                    class="rounded-md overflow-hidden flex"
+                                />
+                            </OverlayBadge>
+                            <div class="ml-4 leading-6 text-color font-medium">{{ data.name }}</div>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="title" style="min-width: 14rem; max-width: 20rem">
+                    <template #body="{ data }">
+                        <div class="truncate">
+                            <span class="text-color leading-6 mr-2">{{ data.title }}</span>
+                            <span class="text-muted-color leading-5 text-sm">{{ data.message }}</span>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="type" style="width: 4rem">
+                    <template #body="{ data }">
+                        <Tag v-if="data.type" severity="secondary" :value="data.type" class="font-medium"></Tag>
+                    </template>
+                </Column>
+                <Column field="time" style="width: 4rem">
+                    <template #body="{ data }">
+                        <div class="text-right text-sm leading-5 text-muted-color">{{ data.time }}</div>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Inbox',
+    redrawListener: null,
+    data() {
+        return {
+            checked: false,
+            search: '',
+            activeInboxNav: 'Inbox',
+            inboxNavs: [
+                {
+                    title: 'Navigation',
+                    navs: [
+                        { name: 'Inbox', icon: 'pi pi-inbox' },
+                        { name: 'Starry', icon: 'pi pi-star' },
+                        { name: 'Drafts', icon: 'pi pi-file-o' },
+                        { name: 'Important', icon: 'pi pi-file-import' },
+                        { name: 'Sent', icon: 'pi pi-send' },
+                        { name: 'Archive', icon: 'pi pi-inbox' },
+                        { name: 'Spam', icon: 'pi pi-info-circle' },
+                        { name: 'Trash', icon: 'pi pi-trash' }
+                    ]
+                },
+                {
+                    title: 'Other',
+                    navs: [
+                        { name: 'Security', icon: 'pi pi-tag' },
+                        { name: 'Update', icon: 'pi pi-tag' },
+                        { name: 'Marketing', icon: 'pi pi-tag' },
+                        { name: 'HR', icon: 'pi pi-tag' }
+                    ]
+                }
+            ],
+            tableData: [
+                {
+                    id: 1,
+                    bookmarked: false,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
+                    active: false,
+                    name: 'Brook Simmons',
+                    type: 'Security',
+                    time: '3:24 PM',
+                    title: 'Important Account Update',
+                    message: "Dear customer, we've made updates to enhance your account security. Please log in to review and complete the necessary steps. Thank you for choosing ABC Corporation."
+                },
+                {
+                    id: 2,
+                    bookmarked: false,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
+                    active: false,
+                    name: 'Dianne Russell',
+                    type: 'Update',
+                    time: '11:24 AM',
+                    title: 'Weekly Project Update',
+                    message: 'Hi team, attached is the weekly project update. Kindly review the progress and come prepared for our discussion in the upcoming meeting on [Date and Time].'
+                },
+                {
+                    id: 3,
+                    bookmarked: true,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
+                    active: false,
+                    name: 'Amy Elsner',
+                    type: 'Security',
+                    time: '9:24 AM',
+                    title: 'Urgent: Security Alert - Account Compromise',
+                    message: 'Dear user, we detected unauthorized access to your account. Take immediate action to secure your account. Follow the provided link to reset your password. Thank you.'
+                },
+                {
+                    id: 4,
+                    bookmarked: false,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png',
+                    active: false,
+                    name: 'Jacob Jones',
+                    type: 'Marketing',
+                    time: 'Jan 21',
+                    title: 'Exclusive Offer Inside - Limited Time Only',
+                    message: "Greetings, check out our exclusive offer! Don't miss this limited-time deal. Details enclosed in the attached flyer. Act fast; the offer expires on [Date]."
+                },
+                {
+                    id: 5,
+                    bookmarked: false,
+                    image: '',
+                    active: false,
+                    name: 'Cameron Watson',
+                    capName: 'CW',
+                    type: 'HR',
+                    time: 'Jan 15',
+                    title: 'Employee Appreciation Event - Save the Date',
+                    message: 'Hello team, mark your calendars for our upcoming Employee Appreciation Event on [Date]. Stay tuned for more details and get ready for a day of celebration!'
+                },
+                {
+                    id: 6,
+                    bookmarked: true,
+                    image: '',
+                    active: false,
+                    name: 'Wade Warren',
+                    capName: 'WW',
+                    type: 'Invoice',
+                    time: 'Jan 12',
+                    title: 'Your Recent Purchase - Order Confirmation',
+                    message: 'Hi Wade Warren, secure your spot at the XYZ Conference 2024 with early bird registration. Enjoy discounted rates until [Date].'
+                },
+                {
+                    id: 7,
+                    bookmarked: false,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
+                    active: false,
+                    name: 'Guy Hawkins',
+                    type: 'Events',
+                    time: 'Jan 11',
+                    title: 'Early Bird Registration Open - XYZ Conference 2024',
+                    message: ' Attention users, we have scheduled system maintenance on Jan 17. Expect minimal service disruption during this period. Thank you for your understanding.'
+                },
+                {
+                    id: 8,
+                    bookmarked: false,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
+                    active: false,
+                    name: 'Annette Black',
+                    type: '',
+                    time: 'Jan 8',
+                    title: 'Upcoming System Maintenance Notice',
+                    message: "Dear valued customer, as a token of appreciation, we're offering exclusive discounts for VIP customers. Explore the savings in the attached catalog. Expires [Date]."
+                },
+                {
+                    id: 9,
+                    bookmarked: true,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg',
+                    active: false,
+                    name: 'Darrell Steward',
+                    type: 'Discount',
+                    time: 'Jan 4',
+                    title: 'Special Discounts for VIP Customers',
+                    message: 'Hello Darrell Steward, stay updated with our latest news and highlights in the January edition of our newsletter. Enjoy the read!'
+                },
+                {
+                    id: 10,
+                    bookmarked: true,
+                    image: '',
+                    active: false,
+                    name: 'Jerome Bell',
+                    capName: 'JB',
+                    type: 'Newsletter',
+                    time: 'Jan 2',
+                    title: 'Monthly Newsletter - January Edition',
+                    message: "Dear user, we've updated our Terms of Service. Please review the changes to ensure compliance. Your continued use of our services implies acceptance. Thank you."
+                },
+                {
+                    id: 11,
+                    bookmarked: false,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
+                    active: false,
+                    name: 'Onyama Limba',
+                    type: '',
+                    time: 'Jan 2',
+                    title: 'Exclusive Travel Packages for You',
+                    message: 'Greetings traveler, explore our exclusive travel packages tailored just for you. Plan your next adventure with XYZ Travel. Offers valid until [Date].'
+                },
+                {
+                    id: 12,
+                    bookmarked: false,
+                    image: '',
+                    active: false,
+                    name: 'Robert Fox',
+                    capName: 'RF',
+                    type: 'Invitation',
+                    time: '12.12.2023',
+                    title: 'Invitation to Amsterdam',
+                    message: "Hello Robert Fox, you're invited to our upcoming webinar on Amsterdam. Join us on [Date and Time] for an insightful session. Reserve your spot now!"
+                },
+                {
+                    id: 13,
+                    bookmarked: true,
+                    image: '',
+                    active: false,
+                    name: 'Courtney Henry',
+                    capName: 'CH',
+                    type: '',
+                    time: '12.09.2023',
+                    title: 'New Arrivals - Check Out the Latest Books',
+                    message: 'Book enthusiasts, discover our latest arrivals! Explore the attached catalog and dive into the world of new releases. Available for purchase starting [Date].'
+                },
+                {
+                    id: 14,
+                    bookmarked: true,
+                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg',
+                    active: false,
+                    name: 'Arlene McCoy',
+                    type: '',
+                    time: '12.04.2023',
+                    title: 'New Product Demo',
+                    message: 'Exclusive demo of our latest product on Thursday.'
+                },
+                {
+                    id: 15,
+                    bookmarked: false,
+                    image: '',
+                    active: false,
+                    name: 'Jerome Bell',
+                    capName: 'JB',
+                    type: 'Newsletter',
+                    time: '10.01.2023',
+                    title: 'Monthly Newsletter - January Edition',
+                    message: "Dear user, we've updated our Terms of Service. Please review the changes to ensure compliance. Your continued use of our services implies acceptance. Thank you."
+                }
+            ],
+            selectedRows: []
+        };
+    },
+    methods: {
+        onSelectionChange(checked) {
+            if (checked) {
+                this.selectedRows = this.tableData;
+            } else {
+                this.selectedRows = [];
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/components/landing/samples/MoviesApp.vue b/apps/labs/components/landing/samples/MoviesApp.vue
new file mode 100644
index 000000000..13025530e
--- /dev/null
+++ b/apps/labs/components/landing/samples/MoviesApp.vue
@@ -0,0 +1,160 @@
+<template>
+    <div class="flex-1 flex flex-col gap-6 p-6 h-full overflow-y-auto overflow-x-clip overflow-hidden border border-surface rounded-2xl">
+        <div class="flex flex-wrap gap-4 items-center justify-between">
+            <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+            <div class="flex gap-2.5 items-center">
+                <IconField iconPosition="left">
+                    <InputIcon class="pi pi-search"> </InputIcon>
+                    <InputText v-model="search" placeholder="Search" />
+                </IconField>
+                <Button severity="secondary" outlined>
+                    <OverlayBadge
+                        severity="danger"
+                        size="small"
+                        :pt="{
+                            pcbadge: {
+                                root: {
+                                    class: '!min-w-0 !w-2.5 !h-2.5'
+                                }
+                            }
+                        }"
+                    >
+                        <i class="pi pi-bell" />
+                    </OverlayBadge>
+                </Button>
+                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" shape="circle" class="w-9 h-9 cursor-pointer" />
+            </div>
+        </div>
+        <div class="">
+            <div class="flex items-center justify-between gap-2 mb-6">
+                <div class="text-color text-xl font-medium leading-7">Keep watching</div>
+                <div class="xl:flex hidden items-center gap-2">
+                    <Button :disabled="page === 0" @click="page -= 1" icon="pi pi-chevron-left" severity="secondary" outlined />
+                    <Button :disabled="page === carouselData.length - page" @click="page += 1" icon="pi pi-chevron-right" severity="secondary" outlined />
+                </div>
+                <div class="xl:hidden flex items-center gap-2">
+                    <Button :disabled="page === 0" @click="page -= 1" icon="pi pi-chevron-left" severity="secondary" outlined />
+                    <Button :disabled="page === carouselData.length - 3" @click="page += 1" icon="pi pi-chevron-right" severity="secondary" outlined />
+                </div>
+            </div>
+            <Carousel :value="carouselData" :page="page" :numVisible="5" :numScroll="1" :responsiveOptions="responsiveOptions" :showIndicators="false" :showNavigators="false">
+                <template #item="slotProps">
+                    <div class="p-2 rounded-xl hover:bg-emphasis transition-colors cursor-pointer">
+                        <div class="relative w-full aspect-[195/118.5] rounded-lg overflow-hidden">
+                            <img :src="slotProps.data.image" class="w-full h-full object-cover" alt="Carousel Movie Image" />
+                            <div class="absolute z-10 top-2 right-2 px-2 py-1 text-sm font-medium leading-tight bg-surface-0 dark:bg-surface-950 border border-surface rounded-md">
+                                {{ slotProps.data.point }}
+                            </div>
+                            <div class="absolute z-10 bottom-2 inset-x-2">
+                                <ProgressBar
+                                    :value="slotProps.data.watchedPercent"
+                                    :showValue="false"
+                                    :pt="{
+                                        root: {
+                                            class: '!h-1.5 !bg-surface-950 dark:!bg-surface-50 !rounded-full'
+                                        },
+                                        value: {
+                                            class: '!bg-surface-0 dark:!bg-surface-950 !rounded-full'
+                                        }
+                                    }"
+                                ></ProgressBar>
+                            </div>
+                        </div>
+                        <div class="mt-2 flex items-start justify-between gap-1">
+                            <div class="px-2 flex-1">
+                                <div class="font-medium text-color leading-6 line-clamp-1">{{ slotProps.data.name }}</div>
+                                <div class="mt-1 text-muted-color text-sm leading-5">{{ slotProps.data.categories.join(', ') }}</div>
+                            </div>
+                            <Button v-if="slotProps.data.bookmarked" icon="pi pi-bookmark-fill" severity="contrast" text rounded />
+                        </div>
+                    </div>
+                </template>
+            </Carousel>
+        </div>
+        <div>
+            <div class="mb-6 flex items-center gap-4 justify-between">
+                <div class="flex items-center gap-2">
+                    <Button label="Popular" severity="secondary" />
+                    <Button label="New Releases" text severity="secondary" />
+                    <Button label="Recently Added" text severity="secondary" />
+                    <Button label="For you" text severity="secondary" />
+                </div>
+                <Button label="Show All" severity="secondary" outlined />
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-6">
+                <div v-for="(movie, index) of popularMovies" :key="index" class="cursor-pointer">
+                    <div class="relative aspect-[259/174.5] rounded-lg overflow-hidden">
+                        <img class="w-full h-full object-cover" :src="movie.image" alt="Popular Movie Cover" />
+                        <div class="absolute z-10 top-2 right-2 px-2 py-1 text-sm font-medium leading-tight bg-surface-0 dark:bg-surface-950 border border-surface rounded-md">
+                            {{ movie.point }}
+                        </div>
+                    </div>
+                    <div class="mt-2 flex items-start justify-between gap-1">
+                        <div class="px-2 flex-1">
+                            <div class="font-medium text-color leading-6 line-clamp-1">{{ movie.name }}</div>
+                            <div class="mt-1 text-muted-color text-sm leading-5">{{ movie.categories.join(', ') }}</div>
+                        </div>
+                        <Button v-if="movie.bookmarked" icon="pi pi-bookmark-fill" severity="contrast" text rounded />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Movies',
+    redrawListener: null,
+    data() {
+        return {
+            search: '',
+            page: 0,
+            value: 'Home',
+            options: ['Home', 'Movies', 'TV Shows', 'Recently Added', 'My List'],
+            responsiveOptions: [
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
+
+                {
+                    breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ],
+            carouselData: [
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover1.png', name: 'Heat', bookmarked: true, point: '4.7', watchedPercent: 80, categories: ['Action', 'Crime', 'Drama'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover2.png', name: 'Batman Begins', bookmarked: false, point: '4.8', watchedPercent: 45, categories: ['Action', 'Crime', 'Drama'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover3.png', name: 'Leon: The Professional', bookmarked: false, point: '4.3', watchedPercent: 10, categories: ['Action', 'Crime', 'Drama'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover4.png', name: 'Matrix', bookmarked: false, point: '4.9', watchedPercent: 50, categories: ['Action', 'Sci-Fi'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover5.png', name: 'Fight Club', bookmarked: false, point: '4.4', watchedPercent: 30, categories: ['Drama'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover6.png', name: 'The Big Lebowski', bookmarked: false, point: '4.7', watchedPercent: 40, categories: ['Comedy', 'Drama'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover7.png', name: 'Twelve Angry Men', bookmarked: false, point: '4.7', watchedPercent: 50, categories: ['Crime', 'Drama'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover8.png', name: 'Saving Private Ryan', bookmarked: true, point: '4.7', watchedPercent: 80, categories: ['Drama', 'War'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover9.png', name: 'Seven', bookmarked: false, point: '4.7', watchedPercent: 20, categories: ['Crime', 'Drama', 'Mystery'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', watchedPercent: 70, categories: ['Mystery', 'Thriller'] }
+            ],
+            popularMovies: [
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover7.png', name: 'Twelve Angry Men', bookmarked: false, point: '4.6', categories: ['Crime', 'Drama'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover8.png', name: 'Saving Private Ryan', bookmarked: true, point: '4.4', categories: ['Drama', 'War'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover9.png', name: 'Seven', bookmarked: false, point: '4.3', categories: ['Crime', 'Drama', 'Mystery'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', categories: ['Mystery', 'Thriller'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover11.png', name: 'Basic Instinct', bookmarked: true, point: '4.3', categories: ['Drama', 'Mystery', 'Thriller'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover12.png', name: 'Big Hero 6', bookmarked: false, point: '4.7', categories: ['Animation', 'Action', 'Adventure'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover13.png', name: 'The Lord Of The Rings: Fellowship of the ring', bookmarked: true, point: '4.9', categories: ['Action', 'Adventure', 'Drama'] },
+                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover14.png', name: 'Kill Bill', bookmarked: true, point: '4.5', categories: ['Action', 'Crime', 'Thriller'] }
+            ]
+        };
+    },
+    methods: {},
+    components: {}
+};
+</script>
diff --git a/apps/labs/components/landing/samples/OverviewApp.vue b/apps/labs/components/landing/samples/OverviewApp.vue
new file mode 100644
index 000000000..69e5c70a0
--- /dev/null
+++ b/apps/labs/components/landing/samples/OverviewApp.vue
@@ -0,0 +1,437 @@
+<template>
+    <div class="flex-1 h-full overflow-y-auto pb-0.5">
+        <div class="flex flex-wrap gap-4 items-start justify-between p-1">
+            <div class="flex-1">
+                <div class="text-muted-color font-medium leading-normal">Overview</div>
+                <div class="text-color text-3xl font-semibold leading-normal">Welcome to PrimeVue</div>
+            </div>
+            <div class="flex gap-2 whitespace-nowrap flex-nowrap">
+                <IconField iconPosition="left">
+                    <InputIcon class="pi pi-search"> </InputIcon>
+                    <InputText placeholder="Search" />
+                </IconField>
+                <Button severity="secondary" outlined>
+                    <OverlayBadge
+                        severity="danger"
+                        :pt="{
+                            pcbadge: {
+                                root: {
+                                    class: '!min-w-0 !w-2.5 !h-2.5'
+                                }
+                            }
+                        }"
+                    >
+                        <i class="pi pi-bell" />
+                    </OverlayBadge>
+                </Button>
+            </div>
+        </div>
+        <div class="mt-4 flex flex-wrap gap-6 items-center justify-between p-1">
+            <SelectButton v-model="selectedTime" :options="timeOptions" aria-labelledby="basic" :allowEmpty="false" @change="changeSelect" />
+            <div class="flex items-center gap-2">
+                <Button label="Download" icon="pi pi-download" iconPos="right" />
+                <DatePicker v-model="dates" selectionMode="range" :manualInput="false" showIcon iconDisplay="input" placeholder="06/11/2024 - 06/22/2024" />
+            </div>
+        </div>
+        <div class="flex flex-col gap-6 mt-6">
+            <div class="w-full border border-surface rounded-2xl py-5 px-7 flex flex-col justify-between">
+                <div class="flex items-center gap-6 mb-6">
+                    <div class="flex-1 text-color font-semibold leading-6">Crypto Analytics</div>
+                    <div class="flex items-center gap-5">
+                        <div v-for="(item, index) in chartData?.datasets" :key="index" class="flex items-center gap-2">
+                            <div class="w-3 h-3 rounded-full" :style="{ backgroundColor: item.backgroundColor }"></div>
+                            <span class="font-medium text-color leading-6">{{ item.label }}</span>
+                        </div>
+                    </div>
+                </div>
+                <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
+            </div>
+            <div class="flex gap-6 xl:flex-row flex-col">
+                <div class="flex-1 border border-surface rounded-2xl py-5 px-7">
+                    <div class="flex items-center gap-6 mb-4">
+                        <div class="flex-1 text-color font-semibold leading-6">Transactions</div>
+                        <Button type="button" icon="pi pi-ellipsis-h" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+                        <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
+                    </div>
+                    <DataTable
+                        :value="sampleAppsTableDatas"
+                        paginator
+                        :rows="5"
+                        dataKey="id"
+                        tableClass="overflow-x-auto dark:bg-surface-950"
+                        paginatorTemplate="PrevPageLink PageLinks NextPageLink  CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+                        pt:pcpaginator:root="!bg-transparent"
+                        :dt="{
+                            header: {
+                                background: 'transparent'
+                            },
+                            headerCell: {
+                                background: 'transparent'
+                            },
+                            row: {
+                                background: 'transparent'
+                            }
+                        }"
+                    >
+                        <Column header="Id" class="w-1/12">
+                            <template #body="slotProps">
+                                <div class="text-muted-color">{{ slotProps.data.id }}</div>
+                            </template>
+                        </Column>
+                        <Column header="Name" class="w-1/4">
+                            <template #body="slotProps">
+                                <div class="flex items-center">
+                                    <Avatar :label="slotProps.data.name.label" class="mr-2 text-xs font-medium" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                                    <div class="leading-6 text-muted-color flex-1">{{ slotProps.data.name.text }}</div>
+                                </div>
+                            </template>
+                        </Column>
+                        <Column header="Coin" class="w-1/6">
+                            <template #body="slotProps">
+                                <div class="flex items-center">
+                                    <i
+                                        :class="[
+                                            {
+                                                'pi pi-bitcoin text-yellow-500 !text-3xl': slotProps.data.coin !== 'btc',
+                                                'pi pi-ethereum bg-surface-950 text-surface-0 dark:bg-surface-0 dark:text-surface-950 w-7 h-7 rounded-full flex items-center justify-center': slotProps.data.coin !== 'eth'
+                                            }
+                                        ]"
+                                    ></i>
+                                </div>
+                            </template>
+                        </Column>
+                        <Column header="Date" class="w-1/6">
+                            <template #body="slotProps">
+                                <div class="text-muted-color">{{ slotProps.data.date }}</div>
+                            </template>
+                        </Column>
+                        <Column header="Process" class="w-1/6">
+                            <template #body="slotProps">
+                                <Tag :severity="slotProps.data.process.type" :value="slotProps.data.process.value" class="font-medium"></Tag>
+                            </template>
+                        </Column>
+                        <Column header="Amount" class="w-1/6">
+                            <template #body="slotProps">
+                                <div class="text-muted-color text-right">{{ slotProps.data.amount }}</div>
+                            </template>
+                        </Column>
+                    </DataTable>
+                </div>
+                <div class="xl:w-96 border border-surface rounded-2xl py-5 px-7 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center gap-6 mb-6">
+                            <div class="flex-1 text-color font-semibold leading-6">My Wallet</div>
+                            <Button type="button" icon="pi pi-ellipsis-h" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+                            <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
+                        </div>
+                        <MeterGroup :value="metersData" labelPosition="end">
+                            <template #label="{ value }">
+                                <div class="flex flex-col gap-6 mt-4">
+                                    <template v-for="val of value" :key="val.label">
+                                        <div class="flex items-center gap-2">
+                                            <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: val.color }"></div>
+                                            <div class="text-color uppercase font-medium leading-6 flex-1">
+                                                {{ val.label }}
+                                                <span class="text-muted-color">({{ val.value }}%)</span>
+                                            </div>
+                                            <div class="leading-6 font-medium text-color">{{ val.text }}</div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </template>
+                        </MeterGroup>
+                    </div>
+                    <Button label="Show All" outlined />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+export default {
+    name: 'Overview',
+    redrawListener: null,
+    data() {
+        return {
+            chartData: {},
+            chartOptions: {},
+            dates: [],
+            selectedTime: 'Monthly',
+            timeOptions: ['Weekly', 'Monthly', 'Yearly'],
+            menuItems: [
+                {
+                    label: 'Refresh',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-upload'
+                }
+            ],
+            sampleAppsTableDatas: [
+                { id: '#1254', name: { text: 'Amy Yelsner', label: 'AY', color: 'blue' }, coin: 'btc', date: 'May 5th', process: { type: 'success', value: 'Buy' }, amount: '3.005 BTC' },
+                { id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'success', value: 'Buy' }, amount: '0.050 ETH' },
+                { id: '#1235', name: { text: 'Stepen Shaw', label: 'SS', color: '#ECFCCB' }, coin: 'btc', date: 'May 24th', process: { type: 'danger', value: 'Sell' }, amount: '3.050 BTC' },
+                { id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'danger', value: 'Sell' }, amount: '0.050 ETH' },
+                { id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'danger', value: 'Sell' }, amount: '0.050 ETH' },
+                { id: '#7896', name: { text: 'John Doe', label: 'JD', color: 'green' }, coin: 'btc', date: 'Jun 12th', process: { type: 'success', value: 'Buy' }, amount: '2.500 BTC' },
+                { id: '#5648', name: { text: 'Jane Smith', label: 'JS', color: '#FFDDC1' }, coin: 'eth', date: 'Feb 23rd', process: { type: 'success', value: 'Buy' }, amount: '1.200 ETH' },
+                { id: '#3265', name: { text: 'Michael Johnson', label: 'MJ', color: '#FFD700' }, coin: 'btc', date: 'Apr 30th', process: { type: 'danger', value: 'Sell' }, amount: '4.000 BTC' },
+                { id: '#1423', name: { text: 'Emily Davis', label: 'ED', color: '#FFCCCB' }, coin: 'btc', date: 'Jan 15th', process: { type: 'danger', value: 'Sell' }, amount: '5.050 LTC' },
+                { id: '#6854', name: { text: 'Robert Brown', label: 'RB', color: '#C0C0C0' }, coin: 'eth', date: 'Dec 2nd', process: { type: 'success', value: 'Buy' }, amount: '0.300 ETH' }
+            ],
+            metersData: [
+                { label: 'BTC', color: '#F59E0B', value: 15, text: '27.215' },
+                { label: 'ETH', color: '#717179', value: 5, text: '4.367' },
+                { label: 'GBP', color: '#22C55E', value: 25, text: '£ 147.562,32' },
+                { label: 'EUR', color: '#84CC16', value: 11, text: '€ 137.457,25' },
+                { label: 'USD', color: '#14B8A6', value: 29, text: '$ 133.364,12' },
+                { label: 'XAU', color: '#EAB308', value: 29, text: '200 g' }
+            ]
+        };
+    },
+    beforeUnmount() {
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
+    },
+    mounted() {
+        this.chartData = this.setChartData(this.selectedTime);
+        this.chartOptions = this.setChartOptions();
+
+        this.redrawListener = () => {
+            this.chartData = this.setChartData(this.selectedTime);
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+    },
+    methods: {
+        changeSelect(e) {
+            this.redrawListener();
+        },
+        createDatasets(val) {
+            let data, labels;
+
+            if (val === 'Weekly') {
+                labels = ['6 May', '13 May', '20 May', '27 May', '3 June', '10 June', '17 June', '24 June', '1 July', '8 July', '15 July', '22 July'];
+                data = [
+                    [9000, 3000, 13000, 3000, 5000, 17000, 11000, 4000, 15000, 4000, 11000, 5000],
+                    [1800, 7600, 11100, 6800, 3300, 5800, 3600, 7200, 4300, 8100, 6800, 3700],
+                    [3800, 4800, 2100, 6600, 1000, 3800, 6500, 4200, 4300, 7000, 6800, 3700]
+                ];
+            } else if (val === 'Monthly') {
+                labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+                data = [
+                    [4000, 10000, 15000, 4000, 16000, 8000, 12000, 14000, 17000, 5000, 12000, 6000],
+                    [2100, 8400, 2400, 7500, 3700, 6500, 7400, 8000, 4800, 9000, 7600, 4200],
+                    [4100, 5200, 2400, 7400, 2300, 4100, 7200, 8000, 4800, 9000, 7600, 4200]
+                ];
+            } else if (val === 'Yearly') {
+                labels = ['2019', '2020', '2021', '2022', '2023', '2024'];
+                data = [
+                    [4500, 10500, 15500, 4500, 16500, 8500, 12500, 14500, 17500, 5500, 12500, 6500],
+                    [2250, 8700, 2550, 7650, 3850, 6650, 7650, 8250, 4950, 9250, 7850, 4450],
+                    [4350, 5450, 2650, 7650, 2550, 4350, 7450, 8250, 4950, 9250, 7850, 4450]
+                ];
+            }
+
+            return {
+                data,
+                labels
+            };
+        },
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        },
+        setChartData(timeUnit) {
+            const datasets = this.createDatasets(timeUnit);
+            const documentStyle = getComputedStyle(document.documentElement);
+            const primary200 = documentStyle.getPropertyValue('--p-primary-200');
+            const primary300 = documentStyle.getPropertyValue('--p-primary-300');
+            const primary400 = documentStyle.getPropertyValue('--p-primary-400');
+            const primary500 = documentStyle.getPropertyValue('--p-primary-500');
+            const primary600 = documentStyle.getPropertyValue('--p-primary-600');
+
+            return {
+                labels: datasets.labels,
+                datasets: [
+                    {
+                        type: 'bar',
+                        label: 'Personal Wallet',
+                        backgroundColor: primary400,
+                        hoverBackgroundColor: primary600,
+                        data: datasets.data[0],
+                        barThickness: 32
+                    },
+                    {
+                        type: 'bar',
+                        label: 'Corporate Wallet',
+                        backgroundColor: primary300,
+                        hoverBackgroundColor: primary500,
+                        data: datasets.data[1],
+                        barThickness: 32
+                    },
+                    {
+                        type: 'bar',
+                        label: 'Investment Wallet',
+                        backgroundColor: primary200,
+                        hoverBackgroundColor: primary400,
+                        data: datasets.data[2],
+                        borderRadius: {
+                            topLeft: 8,
+                            topRight: 8
+                        },
+                        borderSkipped: true,
+                        barThickness: 32
+                    }
+                ]
+            };
+        },
+        setChartOptions() {
+            const darkMode = this.$appState.darkTheme;
+            const documentStyle = getComputedStyle(document.documentElement);
+            const surface100 = documentStyle.getPropertyValue('--p-surface-100');
+            const surface900 = documentStyle.getPropertyValue('--p-surface-900');
+            const surface400 = documentStyle.getPropertyValue('--p-surface-400');
+            const surface500 = documentStyle.getPropertyValue('--p-surface-500');
+
+            return {
+                maintainAspectRatio: false,
+                aspectRatio: 0.8,
+                plugins: {
+                    tooltip: {
+                        enabled: false,
+                        position: 'nearest',
+                        external: function (context) {
+                            const { chart, tooltip } = context;
+                            let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
+
+                            if (!tooltipEl) {
+                                tooltipEl = document.createElement('div');
+                                tooltipEl.classList.add(
+                                    'chartjs-tooltip',
+                                    'dark:bg-surface-950',
+                                    'bg-surface-0',
+                                    'p-3',
+                                    'rounded-[8px]',
+                                    'overflow-hidden',
+                                    'opacity-100',
+                                    'absolute',
+                                    'transition-all',
+                                    'duration-[0.1s]',
+                                    'pointer-events-none',
+                                    'shadow-[0px_25px_20px_-5px_rgba(0,0,0,0.10),0px_10px_8px_-6px_rgba(0,0,0,0.10)]'
+                                );
+                                chart.canvas.parentNode.appendChild(tooltipEl);
+                            }
+
+                            if (tooltip.opacity === 0) {
+                                tooltipEl.style.opacity = 0;
+
+                                return;
+                            }
+
+                            const datasetPointsX = tooltip.dataPoints.map((dp) => dp.element.x);
+                            const avgX = datasetPointsX.reduce((a, b) => a + b, 0) / datasetPointsX.length;
+                            const avgY = tooltip.dataPoints[2].element.y;
+
+                            if (tooltip.body) {
+                                tooltipEl.innerHTML = '';
+                                const tooltipBody = document.createElement('div');
+
+                                tooltipBody.classList.add('flex', 'flex-col', 'gap-4', 'px-3', 'py-3', 'min-w-[18rem]');
+                                tooltip.dataPoints.reverse().forEach((body, i) => {
+                                    const row = document.createElement('div');
+
+                                    row.classList.add('flex', 'items-center', 'gap-2', 'w-full');
+                                    const point = document.createElement('div');
+
+                                    point.classList.add('w-2.5', 'h-2.5', 'rounded-full');
+                                    point.style.backgroundColor = body.dataset.backgroundColor;
+                                    row.appendChild(point);
+                                    const label = document.createElement('span');
+
+                                    label.appendChild(document.createTextNode(body.dataset.label));
+                                    label.classList.add('text-base', 'font-medium', 'text-color', 'flex-1', 'text-left', 'capitalize');
+                                    row.appendChild(label);
+                                    const value = document.createElement('span');
+
+                                    value.appendChild(document.createTextNode(body.formattedValue));
+                                    value.classList.add('text-base', 'font-medium', 'text-color', 'text-right');
+                                    row.appendChild(value);
+                                    tooltipBody.appendChild(row);
+                                });
+                                tooltipEl.appendChild(tooltipBody);
+                            }
+
+                            const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
+
+                            tooltipEl.style.opacity = 1;
+                            tooltipEl.style.font = tooltip.options.bodyFont.string;
+                            tooltipEl.style.padding = 0;
+                            const chartWidth = chart.width;
+                            const tooltipWidth = tooltipEl.offsetWidth;
+                            const chartHeight = chart.height;
+                            const tooltipHeight = tooltipEl.offsetHeight;
+
+                            let tooltipX = positionX + avgX + 24;
+                            let tooltipY = avgY;
+
+                            if (tooltipX + tooltipWidth > chartWidth) {
+                                tooltipX = positionX + avgX - tooltipWidth - 20;
+                            }
+
+                            if (tooltipY < 0) {
+                                tooltipY = 0;
+                            } else if (tooltipY + tooltipHeight > chartHeight) {
+                                tooltipY = chartHeight - tooltipHeight;
+                            }
+
+                            tooltipEl.style.left = tooltipX + 'px';
+                            tooltipEl.style.top = tooltipY + 'px';
+                        }
+                    },
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    x: {
+                        stacked: true,
+                        ticks: {
+                            color: darkMode ? surface500 : surface400
+                        },
+                        grid: {
+                            display: false,
+                            borderColor: 'transparent'
+                        },
+                        border: {
+                            display: false
+                        }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        stacked: true,
+                        ticks: {
+                            color: darkMode ? surface500 : surface400
+                        },
+                        grid: {
+                            display: true,
+                            color: darkMode ? surface900 : surface100,
+                            borderColor: 'transparent'
+                        },
+                        border: {
+                            display: false
+                        }
+                    }
+                }
+            };
+        }
+    },
+    components: {}
+};
+</script>
diff --git a/apps/labs/components/tutorial/ToggleInputSwitch.vue b/apps/labs/components/tutorial/ToggleInputSwitch.vue
new file mode 100644
index 000000000..7af7ab77b
--- /dev/null
+++ b/apps/labs/components/tutorial/ToggleInputSwitch.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="flex items-center gap-4">
+        <label :for="$attrs.inputId">{{ label }}</label>
+        <ToggleSwitch v-bind="$attrs" :pt="preset" :ptOptions="{ mergeSections: false, mergeProps: false }" />
+    </div>
+</template>
+
+<script setup>
+defineOptions({
+    inheritAttrs: false
+});
+
+defineProps(['label']);
+
+const preset = {
+    root: ({ props }) => ({
+        class: [
+            'inline-block relative',
+            'w-10 h-6',
+            'rounded-2xl',
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    slider: ({ props, attrs }) => ({
+        class: [
+            // Position
+            'absolute top-0 left-0 right-0 bottom-0 before:transform',
+            { 'before:transform before:translate-x-4': props.modelValue == props.trueValue },
+
+            // Shape
+            'rounded-2xl',
+
+            // Before:
+            'before:absolute before:top-1/2 before:left-1',
+            'before:-mt-2',
+            'before:h-4 before:w-4',
+            'before:rounded-full',
+            'before:duration-200',
+            {
+                'before:bg-surface-0 before:dark:bg-surface-500': !props.modelValue,
+                'before:bg-violet-500 before:ring-violet-300': !attrs.type & props.modelValue,
+                'before:bg-amber-500 before:ring-amber-300': attrs.type === 'accent' && props.modelValue
+            },
+
+            // Colors
+            'border border-transparent',
+            {
+                'bg-surface-300 dark:bg-surface-800': !props.modelValue,
+                'bg-violet-300': !attrs.type & props.modelValue,
+                'bg-amber-300': attrs.type === 'accent' && props.modelValue
+            },
+
+            // States
+            {
+                'peer-hover:before:bg-surface-400 peer-hover:dark:before:bg-surface-700': !props.modelValue,
+                'peer-hover:before:bg-violet-600': !attrs.type & props.modelValue,
+                'peer-hover:before:bg-amber-600': attrs.type === 'accent' && props.modelValue
+            },
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-2xl',
+            'outline-none',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    }
+};
+</script>
diff --git a/apps/labs/directives/CodeHighlight.js b/apps/labs/directives/CodeHighlight.js
new file mode 100644
index 000000000..16cd7ef66
--- /dev/null
+++ b/apps/labs/directives/CodeHighlight.js
@@ -0,0 +1,19 @@
+import { isClient } from '@primeuix/utils/dom';
+
+const CodeHighlight = {
+    mounted(el, binding) {
+        const modifiers = binding.modifiers;
+        const value = binding.value;
+
+        if (modifiers.script || value === 'script') el.className = 'language-javascript';
+        else if (modifiers.css || value === 'css') el.className = 'language-css';
+        else el.className = 'language-markup';
+
+        if (isClient()) {
+            window.Prism.highlightElement(el.children[0]);
+            el.children[0].parentElement.setAttribute('tabindex', '-1');
+        }
+    }
+};
+
+export default CodeHighlight;
diff --git a/apps/labs/doc/accordion/AccessibilityDoc.vue b/apps/labs/doc/accordion/AccessibilityDoc.vue
new file mode 100644
index 000000000..b81696beb
--- /dev/null
+++ b/apps/labs/doc/accordion/AccessibilityDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Accordion header elements is a <i>button</i> element and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the value
+            of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>pt</i> property.
+        </p>
+        <p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
+
+        <h3>Header Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/accordion/BasicDoc.vue b/apps/labs/doc/accordion/BasicDoc.vue
new file mode 100644
index 000000000..5d089978d
--- /dev/null
+++ b/apps/labs/doc/accordion/BasicDoc.vue
@@ -0,0 +1,155 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Accordion is defined using <i>AccordionPanel</i>, <i>AccordionHeader</i> and <i>AccordionContent</i> components. Each AccordionPanel must contain a unique <i>value</i> property to specify the active item.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Accordion value="0">
+    <AccordionPanel value="0">
+        <AccordionHeader>Header I</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="1">
+        <AccordionHeader>Header II</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="2">
+        <AccordionHeader>Header III</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+</Accordion>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/accordion/ControlledDoc.vue b/apps/labs/doc/accordion/ControlledDoc.vue
new file mode 100644
index 000000000..b54eede69
--- /dev/null
+++ b/apps/labs/doc/accordion/ControlledDoc.vue
@@ -0,0 +1,190 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Panels can be controlled programmatically using <i>value</i> property as a model.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex mb-4 gap-2 justify-end">
+            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
+        </div>
+
+        <Accordion v-model:value="active">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: '0',
+            code: {
+                basic: `
+<div class="flex mb-4 gap-2 justify-end">
+    <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+    <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+    <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
+</div>
+
+<Accordion v-model:value="active">
+    <AccordionPanel value="0">
+        <AccordionHeader>Header I</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="1">
+        <AccordionHeader>Header II</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="2">
+        <AccordionHeader>Header III</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+</Accordion>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex mb-4 gap-2 justify-end">
+            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
+        </div>
+
+        <Accordion v-model:value="active">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                active: '0'
+            }
+        }
+    }
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex mb-4 gap-2 justify-end">
+            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
+        </div>
+
+        <Accordion v-model:value="active">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+
+    const active = ref('0');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/accordion/DisabledDoc.vue b/apps/labs/doc/accordion/DisabledDoc.vue
new file mode 100644
index 000000000..3eb98b7b0
--- /dev/null
+++ b/apps/labs/doc/accordion/DisabledDoc.vue
@@ -0,0 +1,167 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>disabled</i> property of an AccordionPanel prevents user interaction.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="3" disabled>
+                <AccordionHeader>Header IV</AccordionHeader>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Accordion :value="['0']" multiple>
+    <AccordionPanel value="0">
+        <AccordionHeader>Header I</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="1">
+        <AccordionHeader>Header II</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="2">
+        <AccordionHeader>Header III</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="3" disabled>
+        <AccordionHeader>Header IV</AccordionHeader>
+    </AccordionPanel>
+</Accordion>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="3" disabled>
+                <AccordionHeader>Header IV</AccordionHeader>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="3" disabled>
+                <AccordionHeader>Header IV</AccordionHeader>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/accordion/DynamicDoc.vue b/apps/labs/doc/accordion/DynamicDoc.vue
new file mode 100644
index 000000000..20bf1eaea
--- /dev/null
+++ b/apps/labs/doc/accordion/DynamicDoc.vue
@@ -0,0 +1,94 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AccordionPanel can be generated dynamically using the standard <i>v-for</i> directive.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
+                <AccordionHeader>{{ tab.title }}</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">{{ tab.content }}</p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: [
+                { title: 'Title 1', content: 'Content 1', value: '0' },
+                { title: 'Title 2', content: 'Content 2', value: '1' },
+                { title: 'Title 3', content: 'Content 3', value: '2' }
+            ],
+            code: {
+                basic: `
+<Accordion value="0">
+    <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
+        <AccordionHeader>{{ tab.title }}</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">{{ tab.content }}</p>
+        </AccordionContent>
+    </AccordionPanel>
+</Accordion>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
+                <AccordionHeader>{{ tab.title }}</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">{{ tab.content }}</p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: [
+                { title: 'Title 1', content: 'Content 1', value: '0' },
+                { title: 'Title 2', content: 'Content 2', value: '1' },
+                { title: 'Title 3', content: 'Content 3', value: '2' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
+                <AccordionHeader>{{ tab.title }}</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">{{ tab.content }}</p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const tabs = ref([
+    { title: 'Title 1', content: 'Content 1', value: '0' },
+    { title: 'Title 2', content: 'Content 2', value: '1' },
+    { title: 'Title 3', content: 'Content 3', value: '2' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/accordion/ImportDoc.vue b/apps/labs/doc/accordion/ImportDoc.vue
new file mode 100644
index 000000000..3cd83fa49
--- /dev/null
+++ b/apps/labs/doc/accordion/ImportDoc.vue
@@ -0,0 +1,21 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/accordion/MultipleDoc.vue b/apps/labs/doc/accordion/MultipleDoc.vue
new file mode 100644
index 000000000..4b5d9efe7
--- /dev/null
+++ b/apps/labs/doc/accordion/MultipleDoc.vue
@@ -0,0 +1,155 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Only one tab at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple panels. In this case <i>value</i> needs to be an array.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Accordion :value="['0']" multiple>
+    <AccordionPanel value="0">
+        <AccordionHeader>Header I</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="1">
+        <AccordionHeader>Header II</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="2">
+        <AccordionHeader>Header III</AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+</Accordion>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/accordion/TemplateDoc.vue b/apps/labs/doc/accordion/TemplateDoc.vue
new file mode 100644
index 000000000..a2db25b6a
--- /dev/null
+++ b/apps/labs/doc/accordion/TemplateDoc.vue
@@ -0,0 +1,230 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Custom content for a header is defined with the default slot. The optional <i>as</i> property controls the default container element of a header, for example setting it to a <i>div</i> renders a div for the header instead of a button. The
+            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own header.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
+            <AccordionPanel value="0">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                        <Badge value="3" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                        <Badge value="4" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
+    <AccordionPanel value="0">
+        <AccordionHeader>
+            <span class="flex items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                <Badge value="3" class="ml-auto mr-2" />
+            </span>
+        </AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="1">
+        <AccordionHeader>
+            <span class="flex items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                <Badge value="4" class="ml-auto mr-2" />
+            </span>
+        </AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="2">
+        <AccordionHeader>
+            <span class="flex items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                <Badge value="2" class="ml-auto mr-2" />
+            </span>
+        </AccordionHeader>
+        <AccordionContent>
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </AccordionContent>
+    </AccordionPanel>
+</Accordion>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
+            <AccordionPanel value="0">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                        <Badge value="3" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                        <Badge value="4" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
+            <AccordionPanel value="0">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                        <Badge value="3" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                        <Badge value="4" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/AccessibilityDoc.vue b/apps/labs/doc/autocomplete/AccessibilityDoc.vue
new file mode 100644
index 000000000..2171f52e5
--- /dev/null
+++ b/apps/labs/doc/autocomplete/AccessibilityDoc.vue
@@ -0,0 +1,177 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
+            <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen
+            reader which option to read during keyboard navigation within the popup list.
+        </p>
+        <p>In multiple mode, chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input
+            element.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Closed State Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the first option.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Popup Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Chips Input Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the previous chip if the input field is empty.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available and input field is empty.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Chip Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the chips and adds focus to the input field.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="ac1">;Username</label>
+<AutoComplete inputId="ac1" />
+
+<span id="ac2">Email</span>
+<AutoComplete aria-labelledby="ac2" />
+
+<AutoComplete aria-label="City" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/BasicDoc.vue b/apps/labs/doc/autocomplete/BasicDoc.vue
new file mode 100644
index 000000000..c46d0f33a
--- /dev/null
+++ b/apps/labs/doc/autocomplete/BasicDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AutoComplete is used with the <i>v-model</i> property for two-way value binding. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value" :suggestions="items" @complete="search" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/DisabledDoc.vue b/apps/labs/doc/autocomplete/DisabledDoc.vue
new file mode 100644
index 000000000..7569f53bc
--- /dev/null
+++ b/apps/labs/doc/autocomplete/DisabledDoc.vue
@@ -0,0 +1,50 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete disabled placeholder="Disabled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<AutoComplete disabled placeholder="Disabled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete disabled placeholder="Disabled" />
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete disabled placeholder="Disabled" />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/DropdownDoc.vue b/apps/labs/doc/autocomplete/DropdownDoc.vue
new file mode 100644
index 000000000..2f7296cb6
--- /dev/null
+++ b/apps/labs/doc/autocomplete/DropdownDoc.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using <i>dropdownMode</i> property that takes <strong>blank</strong> or <strong>current</strong> as possible values.
+            <i>blank</i> is the default mode to send a query with an empty string whereas <i>current</i> setting sends a query with the current value of the input.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            let _items = [...Array(10).keys()];
+
+            this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    let _items = [...Array(10).keys()];
+
+    items.value = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            let _items = [...Array(10).keys()];
+
+            this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/FilledDoc.vue b/apps/labs/doc/autocomplete/FilledDoc.vue
new file mode 100644
index 000000000..5523184ff
--- /dev/null
+++ b/apps/labs/doc/autocomplete/FilledDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/FloatLabelDoc.vue b/apps/labs/doc/autocomplete/FloatLabelDoc.vue
new file mode 100644
index 000000000..9788b002d
--- /dev/null
+++ b/apps/labs/doc/autocomplete/FloatLabelDoc.vue
@@ -0,0 +1,129 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            items: [],
+            code: {
+                basic: `
+<FloatLabel>
+    <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/ForceSelectionDoc.vue b/apps/labs/doc/autocomplete/ForceSelectionDoc.vue
new file mode 100644
index 000000000..06f534d7c
--- /dev/null
+++ b/apps/labs/doc/autocomplete/ForceSelectionDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. Simply enable
+            <i>forceSelection</i> to enforce that input is always from the suggestion list.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+    <DocSectionCode :code="code" :service="['CountryService']" />
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null,
+            code: {
+                basic: `
+<AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
+
+
+const search = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+}
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/FormsDoc.vue b/apps/labs/doc/autocomplete/FormsDoc.vue
new file mode 100644
index 000000000..9307eb5cf
--- /dev/null
+++ b/apps/labs/doc/autocomplete/FormsDoc.vue
@@ -0,0 +1,201 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AutoComplete integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
+            <div class="flex flex-col gap-1">
+                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
+                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                country: { name: '' }
+            },
+            countries: null,
+            filteredCountries: null,
+            resolver: zodResolver(
+                z.object({
+                    country: z.union([
+                        z.object({
+                            name: z.string().min(1, 'Country is required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'Country is required.' })
+                    ])
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
+    <div class="flex flex-col gap-1">
+        <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+        <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
+            <div class="flex flex-col gap-1">
+                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                country: { name: '' }
+            },
+            countries: null,
+            filteredCountries: null,
+            resolver: zodResolver(
+                z.object({
+                    country: z.union([
+                        z.object({
+                            name: z.string().min(1, 'Country is required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'Country is required.' })
+                    ])
+                })
+            )
+        }
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        },
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
+            <div class="flex flex-col gap-1">
+                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const initialValues = ref({
+    country: { name: '' }
+});
+const resolver = ref(zodResolver(
+    z.object({
+        country: z.union([
+            z.object({
+                name: z.string().min(1, 'Country is required.')
+            }),
+            z.any().refine((val) => false, { message: 'Country is required.' })
+        ])
+    })
+));
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
+const toast = useToast();
+
+const search = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+};
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        },
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/GroupDoc.vue b/apps/labs/doc/autocomplete/GroupDoc.vue
new file mode 100644
index 000000000..287a72674
--- /dev/null
+++ b/apps/labs/doc/autocomplete/GroupDoc.vue
@@ -0,0 +1,236 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Option groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center country-item">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import { FilterMatchMode, FilterService } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            cities: null,
+            selectedCity: null,
+            filteredCities: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+    <template #optiongroup="slotProps">
+        <div class="flex items-center country-item">
+            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.option.label }}</div>
+        </div>
+    </template>
+</AutoComplete>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center country-item">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script>
+import { FilterMatchMode, FilterService } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            cities: null,
+            selectedCity: null,
+            filteredCities: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+        search(event) {
+            let query = event.query;
+            let filteredCities = [];
+
+            for (let country of this.groupedCities) {
+                let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
+
+                if (filteredItems && filteredItems.length) {
+                    filteredCities.push({ ...country, ...{ items: filteredItems } });
+                }
+            }
+
+            this.filteredCities = filteredCities;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center country-item">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { FilterMatchMode, FilterService } from '@primevue/core/api';
+
+const cities = ref();
+const selectedCity = ref();
+const filteredCities = ref();
+const groupedCities = ref([
+    {
+        label: 'Germany',
+        code: 'DE',
+        items: [
+            { label: 'Berlin', value: 'Berlin' },
+            { label: 'Frankfurt', value: 'Frankfurt' },
+            { label: 'Hamburg', value: 'Hamburg' },
+            { label: 'Munich', value: 'Munich' }
+        ]
+    },
+    {
+        label: 'USA',
+        code: 'US',
+        items: [
+            { label: 'Chicago', value: 'Chicago' },
+            { label: 'Los Angeles', value: 'Los Angeles' },
+            { label: 'New York', value: 'New York' },
+            { label: 'San Francisco', value: 'San Francisco' }
+        ]
+    },
+    {
+        label: 'Japan',
+        code: 'JP',
+        items: [
+            { label: 'Kyoto', value: 'Kyoto' },
+            { label: 'Osaka', value: 'Osaka' },
+            { label: 'Tokyo', value: 'Tokyo' },
+            { label: 'Yokohama', value: 'Yokohama' }
+        ]
+    }
+]);
+
+const search = (event) => {
+    let query = event.query;
+    let newFilteredCities = [];
+
+    for (let country of groupedCities.value) {
+        let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
+        if (filteredItems && filteredItems.length) {
+            newFilteredCities.push({...country, ...{items: filteredItems}});
+        }
+    }
+
+    filteredCities.value = newFilteredCities;
+
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            let query = event.query;
+            let filteredCities = [];
+
+            for (let country of this.groupedCities) {
+                let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
+
+                if (filteredItems && filteredItems.length) {
+                    filteredCities.push({ ...country, ...{ items: filteredItems } });
+                }
+            }
+
+            this.filteredCities = filteredCities;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/IftaLabelDoc.vue b/apps/labs/doc/autocomplete/IftaLabelDoc.vue
new file mode 100644
index 000000000..ad680907a
--- /dev/null
+++ b/apps/labs/doc/autocomplete/IftaLabelDoc.vue
@@ -0,0 +1,83 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
+            <label for="ac">Identifier</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<IftaLabel>
+    <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
+    <label for="ac">Identifier</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
+            <label for="ac">Identifier</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
+            <label for="ac">Identifier</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/ImportDoc.vue b/apps/labs/doc/autocomplete/ImportDoc.vue
new file mode 100644
index 000000000..5b15f713b
--- /dev/null
+++ b/apps/labs/doc/autocomplete/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import AutoComplete from 'primevue/autocomplete';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/InvalidDoc.vue b/apps/labs/doc/autocomplete/InvalidDoc.vue
new file mode 100644
index 000000000..2ecd4aa66
--- /dev/null
+++ b/apps/labs/doc/autocomplete/InvalidDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+                value2: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref('');
+const value2 = ref('');
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/MultipleDoc.vue b/apps/labs/doc/autocomplete/MultipleDoc.vue
new file mode 100644
index 000000000..f870122f2
--- /dev/null
+++ b/apps/labs/doc/autocomplete/MultipleDoc.vue
@@ -0,0 +1,90 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
+    </DocSectionText>
+    <div class="card">
+        <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
+        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
+
+        <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            items: [],
+            code: {
+                basic: `
+<label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
+<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
+
+<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
+<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
+        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
+
+        <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
+        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
+
+        <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(null);
+const value2 = ref(null);
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/ObjectsDoc.vue b/apps/labs/doc/autocomplete/ObjectsDoc.vue
new file mode 100644
index 000000000..eee29856b
--- /dev/null
+++ b/apps/labs/doc/autocomplete/ObjectsDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            AutoComplete can work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
+            Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+    <DocSectionCode :code="code" :service="['CountryService']" />
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null,
+            code: {
+                basic: `
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
+
+
+const search = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+}
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/SizesDoc.vue b/apps/labs/doc/autocomplete/SizesDoc.vue
new file mode 100644
index 000000000..52f6cdcc8
--- /dev/null
+++ b/apps/labs/doc/autocomplete/SizesDoc.vue
@@ -0,0 +1,85 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AutoComplete provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            items: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            items: [],
+        };
+    },
+    methods: {
+        search() {
+            this.items = [];
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const items = ref([]);
+
+const search = () => {
+    items.value = [];
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search() {
+            this.items = [];
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/TemplateDoc.vue b/apps/labs/doc/autocomplete/TemplateDoc.vue
new file mode 100644
index 000000000..293431d6f
--- /dev/null
+++ b/apps/labs/doc/autocomplete/TemplateDoc.vue
@@ -0,0 +1,173 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AutoComplete offers multiple slots for customization through templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-2">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+    <DocSectionCode :code="code" :service="['CountryService']" />
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: null,
+            filteredCountries: null,
+            code: {
+                basic: `
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+    <template #option="slotProps">
+        <div class="flex items-center">
+            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.option.name }}</div>
+        </div>
+    </template>
+    <template #header>
+        <div class="font-medium px-3 py-2">Available Countries</div>
+    </template>
+    <template #footer>
+        <div class="px-3 py-3">
+            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+        </div>
+    </template>
+</AutoComplete>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
+
+
+const search = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+}
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/autocomplete/VirtualScrollDoc.vue b/apps/labs/doc/autocomplete/VirtualScrollDoc.vue
new file mode 100644
index 000000000..1f92f6d5c
--- /dev/null
+++ b/apps/labs/doc/autocomplete/VirtualScrollDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Virtual Scrolling is a performant way to render large lists. Configuration of the scroll behavior is defined with <i>virtualScrollerOptions</i> that requires <i>itemSize</i> as the mandatory value to set the height of an item. Visit
+            <PrimeVueNuxtLink to="/virtualscroller">VirtualScroller</PrimeVueNuxtLink> documentation for more information about the configuration API.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
+            selectedItem: null,
+            filteredItems: null,
+            code: {
+                basic: `
+<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
+    :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
+            selectedItem: null,
+            filteredItems: null,
+        };
+    },
+    methods: {
+        searchItems(event) {
+            //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+            let query = event.query;
+            let _filteredItems = [];
+
+            for (let i = 0; i < this.items.length; i++) {
+                let item = this.items[i];
+
+                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                    _filteredItems.push(item);
+                }
+            }
+
+            this.filteredItems = _filteredItems;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+const selectedItem = ref();
+const filteredItems = ref();
+const searchItems = (event) => {
+    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+    let query = event.query;
+    let _filteredItems = [];
+
+    for (let i = 0; i < items.value.length; i++) {
+        let item = items.value[i];
+
+        if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+            _filteredItems.push(item);
+        }
+    }
+
+    filteredItems.value = _filteredItems;
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        searchItems(event) {
+            //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+            let query = event.query;
+            let _filteredItems = [];
+
+            for (let i = 0; i < this.items.length; i++) {
+                let item = this.items[i];
+
+                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                    _filteredItems.push(item);
+                }
+            }
+
+            this.filteredItems = _filteredItems;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/avatar/AccessibilityDoc.vue b/apps/labs/doc/avatar/AccessibilityDoc.vue
new file mode 100644
index 000000000..366f0034f
--- /dev/null
+++ b/apps/labs/doc/avatar/AccessibilityDoc.vue
@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
+            avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/avatar/AvatarGroupDoc.vue b/apps/labs/doc/avatar/AvatarGroupDoc.vue
new file mode 100644
index 000000000..ee145fd3b
--- /dev/null
+++ b/apps/labs/doc/avatar/AvatarGroupDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<AvatarGroup>
+    <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+    <Avatar image="/images/avatar/asiyajavayant.png" shape="circle" />
+    <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
+    <Avatar image="/images/avatar/ionibowcher.png" shape="circle" />
+    <Avatar image="/images/avatar/xuxuefeng.png" shape="circle" />
+    <Avatar label="+2" shape="circle" />
+</AvatarGroup>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/avatar/IconDoc.vue b/apps/labs/doc/avatar/IconDoc.vue
new file mode 100644
index 000000000..9b2a72236
--- /dev/null
+++ b/apps/labs/doc/avatar/IconDoc.vue
@@ -0,0 +1,118 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+
+<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+
+<OverlayBadge value="4" severity="danger" class="inline-flex">
+    <Avatar icon="pi pi-user" size="xlarge" />
+</OverlayBadge>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/avatar/ImageDoc.vue b/apps/labs/doc/avatar/ImageDoc.vue
new file mode 100644
index 000000000..0fd189127
--- /dev/null
+++ b/apps/labs/doc/avatar/ImageDoc.vue
@@ -0,0 +1,110 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>image</i> property to display an image as an Avatar.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+<Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
+
+<OverlayBadge value="4" severity="danger" class="inline-flex">
+    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+</OverlayBadge>
+
+<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/avatar/ImportDoc.vue b/apps/labs/doc/avatar/ImportDoc.vue
new file mode 100644
index 000000000..efe8f6619
--- /dev/null
+++ b/apps/labs/doc/avatar/ImportDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Avatar from 'primevue/avatar';
+import AvatarGroup from 'primevue/avatargroup';   //Optional for grouping
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/avatar/LabelDoc.vue b/apps/labs/doc/avatar/LabelDoc.vue
new file mode 100644
index 000000000..73f399b10
--- /dev/null
+++ b/apps/labs/doc/avatar/LabelDoc.vue
@@ -0,0 +1,114 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A letter Avatar is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Avatar label="P" class="mr-2" size="xlarge" />
+<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+
+<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+
+<OverlayBadge value="4" severity="danger" class="inline-flex">
+    <Avatar label="U" size="xlarge" />
+</OverlayBadge>
+`,
+                options: `
+<template>
+    <div class="flex flex-wrap gap-8">
+        <div class="flex-auto">
+            <h5>Label</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+        </div>
+
+        <div class="flex-auto">
+            <h5>Circle</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+        </div>
+
+        <div class="flex-auto">
+            <h5>Badge</h5>
+            <OverlayBadge value="4" severity="danger" class="inline-flex">
+                <Avatar label="U" size="xlarge" />
+            </OverlayBadge>
+        </div>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="flex flex-wrap gap-8">
+        <div class="flex-auto">
+            <h5>Label</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+        </div>
+
+        <div class="flex-auto">
+            <h5>Circle</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+        </div>
+
+        <div class="flex-auto">
+            <h5>Badge</h5>
+            <OverlayBadge value="4" severity="danger" class="inline-flex">
+                <Avatar label="U" size="xlarge" />
+            </OverlayBadge>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/badge/AccessibilityDoc.vue b/apps/labs/doc/badge/AccessibilityDoc.vue
new file mode 100644
index 000000000..d6fc47e23
--- /dev/null
+++ b/apps/labs/doc/badge/AccessibilityDoc.vue
@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
+            <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/badge/BasicDoc.vue b/apps/labs/doc/badge/BasicDoc.vue
new file mode 100644
index 000000000..ea02a9773
--- /dev/null
+++ b/apps/labs/doc/badge/BasicDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display is defined with the <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Badge value="2"></Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Badge value="2"></Badge>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Badge value="2"></Badge>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Badge value="2"></Badge>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/badge/ButtonDoc.vue b/apps/labs/doc/badge/ButtonDoc.vue
new file mode 100644
index 000000000..ed48c9969
--- /dev/null
+++ b/apps/labs/doc/badge/ButtonDoc.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons have built-in support for badges to display a badge inline.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
+        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
+<Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
+        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
+        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/badge/ImportDoc.vue b/apps/labs/doc/badge/ImportDoc.vue
new file mode 100644
index 000000000..234e72a8b
--- /dev/null
+++ b/apps/labs/doc/badge/ImportDoc.vue
@@ -0,0 +1,20 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+// import as component
+import Badge from 'primevue/badge';
+import OverlayBadge from 'primevue/overlaybadge';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/badge/OverlayDoc.vue b/apps/labs/doc/badge/OverlayDoc.vue
new file mode 100644
index 000000000..c6da655e5
--- /dev/null
+++ b/apps/labs/doc/badge/OverlayDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A badge can be added to any element by encapsulating the content with the <i>OverlayBadge</i> component.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-6">
+        <OverlayBadge value="2">
+            <i class="pi pi-bell" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge value="4" severity="danger">
+            <i class="pi pi-calendar" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge severity="danger">
+            <i class="pi pi-envelope" style="font-size: 2rem" />
+        </OverlayBadge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<OverlayBadge value="2">
+    <i class="pi pi-bell" style="font-size: 2rem" />
+</OverlayBadge>
+<OverlayBadge value="4" severity="danger">
+    <i class="pi pi-calendar" style="font-size: 2rem" />
+</OverlayBadge>
+<OverlayBadge severity="danger">
+    <i class="pi pi-envelope" style="font-size: 2rem" />
+</OverlayBadge>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-6">
+        <OverlayBadge value="2">
+            <i class="pi pi-bell" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge value="4" severity="danger">
+            <i class="pi pi-calendar" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge severity="danger">
+            <i class="pi pi-envelope" style="font-size: 2rem" />
+        </OverlayBadge>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-6">
+        <OverlayBadge value="2">
+            <i class="pi pi-bell" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge value="4" severity="danger">
+            <i class="pi pi-calendar" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge severity="danger">
+            <i class="pi pi-envelope" style="font-size: 2rem" />
+        </OverlayBadge>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/badge/SeverityDoc.vue b/apps/labs/doc/badge/SeverityDoc.vue
new file mode 100644
index 000000000..f1e8b9801
--- /dev/null
+++ b/apps/labs/doc/badge/SeverityDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Severity defines the variant of a badge.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="6" severity="secondary"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="9" severity="warn"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+        <Badge value="5" severity="contrast"></Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Badge value="2"></Badge>
+<Badge value="6" severity="secondary"></Badge>
+<Badge value="8" severity="success"></Badge>
+<Badge value="4" severity="info"></Badge>
+<Badge value="9" severity="warn"></Badge>
+<Badge value="3" severity="danger"></Badge>
+<Badge value="5" severity="contrast"></Badge>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="6" severity="secondary"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="9" severity="warn"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+        <Badge value="5" severity="contrast"></Badge>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="6" severity="secondary"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="9" severity="warn"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+        <Badge value="5" severity="contrast"></Badge>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/badge/SizeDoc.vue b/apps/labs/doc/badge/SizeDoc.vue
new file mode 100644
index 000000000..a06fdf6ef
--- /dev/null
+++ b/apps/labs/doc/badge/SizeDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>size</i> property to customize the dimensions of a Badge.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-2">
+        <Badge value="8" size="xlarge" severity="success"></Badge>
+        <Badge value="6" size="large" severity="warn"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="2" size="small"></Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Badge value="8" size="xlarge" severity="success"></Badge>
+<Badge value="6" size="large" severity="warn"></Badge>
+<Badge value="4" severity="info"></Badge>
+<Badge value="2" size="small"></Badge>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-2">
+        <Badge value="8" size="xlarge" severity="success"></Badge>
+        <Badge value="6" size="large" severity="warn"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="2" size="small"></Badge>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-2">
+        <Badge value="8" size="xlarge" severity="success"></Badge>
+        <Badge value="6" size="large" severity="warn"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="2" size="small"></Badge>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/blockui/AccessibilityDoc.vue b/apps/labs/doc/blockui/AccessibilityDoc.vue
new file mode 100644
index 000000000..7a9adaa4c
--- /dev/null
+++ b/apps/labs/doc/blockui/AccessibilityDoc.vue
@@ -0,0 +1,11 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/blockui/BasicDoc.vue b/apps/labs/doc/blockui/BasicDoc.vue
new file mode 100644
index 000000000..88478ed87
--- /dev/null
+++ b/apps/labs/doc/blockui/BasicDoc.vue
@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="mb-4">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked">
+            <Panel header="Basic">
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Panel>
+        </BlockUI>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false,
+            code: {
+                basic: `
+<div class="mb-4">
+    <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+    <Button label="Unblock" @click="blocked = false"></Button>
+</div>
+<BlockUI :blocked="blocked">
+    <Panel header="Basic">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </Panel>
+</BlockUI>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="mb-4">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked">
+            <Panel header="Basic">
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Panel>
+        </BlockUI>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="mb-4">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked">
+            <Panel header="Basic">
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Panel>
+        </BlockUI>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const blocked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/blockui/DocumentDoc.vue b/apps/labs/doc/blockui/DocumentDoc.vue
new file mode 100644
index 000000000..5004afa40
--- /dev/null
+++ b/apps/labs/doc/blockui/DocumentDoc.vue
@@ -0,0 +1,83 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>fullScreen</i> property controls the document.</p>
+    </DocSectionText>
+    <div class="card">
+        <BlockUI :blocked="blocked" fullScreen />
+        <Button label="Block" @click="blockDocument" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false,
+            code: {
+                basic: `
+<BlockUI :blocked="blocked" fullScreen />
+<Button label="Block" @click="blocked = true" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <BlockUI :blocked="blocked" fullScreen />
+        <Button label="Block" @click="blockDocument" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false
+        }
+    },
+    methods: {
+        blockDocument() {
+            this.blocked = true;
+
+            setTimeout(() => {
+                this.blocked = false;
+            }, 3000);
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <BlockUI :blocked="blocked" fullScreen />
+        <Button label="Block" @click="blockDocument" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const blocked = ref(false);
+const blockDocument = () => {
+    blocked.value = true;
+
+    setTimeout(() => {
+        blocked.value = false;
+    }, 3000);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        blockDocument() {
+            this.blocked = true;
+
+            setTimeout(() => {
+                this.blocked = false;
+            }, 3000);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/blockui/ImportDoc.vue b/apps/labs/doc/blockui/ImportDoc.vue
new file mode 100644
index 000000000..07a04631d
--- /dev/null
+++ b/apps/labs/doc/blockui/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import BlockUI from 'primevue/blockui';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/breadcrumb/AccessibilityDoc.vue b/apps/labs/doc/breadcrumb/AccessibilityDoc.vue
new file mode 100644
index 000000000..3368f258f
--- /dev/null
+++ b/apps/labs/doc/breadcrumb/AccessibilityDoc.vue
@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
+            separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/breadcrumb/BasicDoc.vue b/apps/labs/doc/breadcrumb/BasicDoc.vue
new file mode 100644
index 000000000..b839de05a
--- /dev/null
+++ b/apps/labs/doc/breadcrumb/BasicDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Breadcrumb requires a collection of menuitems as its <i>model</i>, the root item is defined with the <i>home</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home'
+            },
+            items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
+            code: {
+                basic: `
+<Breadcrumb :home="home" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home'
+            },
+            items: [
+                { label: 'Electronics' }, 
+                { label: 'Computer' }, 
+                { label: 'Accessories' }, 
+                { label: 'Keyboard' }, 
+                { label: 'Wireless' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({
+    icon: 'pi pi-home'
+});
+const items = ref([
+    { label: 'Electronics' }, 
+    { label: 'Computer' }, 
+    { label: 'Accessories' }, 
+    { label: 'Keyboard' }, 
+    { label: 'Wireless' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/breadcrumb/ImportDoc.vue b/apps/labs/doc/breadcrumb/ImportDoc.vue
new file mode 100644
index 000000000..201dc0bbf
--- /dev/null
+++ b/apps/labs/doc/breadcrumb/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Breadcrumb from 'primevue/breadcrumb';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/breadcrumb/RouterDoc.vue b/apps/labs/doc/breadcrumb/RouterDoc.vue
new file mode 100644
index 000000000..5750446f9
--- /dev/null
+++ b/apps/labs/doc/breadcrumb/RouterDoc.vue
@@ -0,0 +1,122 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="[item.icon, 'text-color']" />
+                        <span class="text-primary font-semibold">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
+                </a>
+            </template>
+        </Breadcrumb>
+    </div>
+    <DocSectionCode :code="code" hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                route: '/slider'
+            },
+            items: [{ label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }],
+            code: {
+                basic: `
+<Breadcrumb :home="home" :model="items">
+    <template #item="{ item, props }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a :href="href" v-bind="props.action" @click="navigate">
+                <span :class="[item.icon, 'text-color']" />
+                <span class="text-primary font-semibold">{{ item.label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
+        </a>
+    </template>
+</Breadcrumb>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="[item.icon, 'text-color']" />
+                        <span class="text-primary font-semibold">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
+                </a>
+            </template>
+        </Breadcrumb>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                route: '/slider'
+            },
+            items: [
+                { label: 'Components' },
+                { label: 'Form' },
+                { label: 'InputText', route: '/inputtext' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="[item.icon, 'text-color']" />
+                        <span class="text-primary font-semibold">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
+                </a>
+            </template>
+        </Breadcrumb>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({
+    icon: 'pi pi-home',
+    route: '/slider'
+});
+const items = ref([
+    { label: 'Components' },
+    { label: 'Form' },
+    { label: 'InputText', route: '/inputtext' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/breadcrumb/TemplateDoc.vue b/apps/labs/doc/breadcrumb/TemplateDoc.vue
new file mode 100644
index 000000000..166a75fe5
--- /dev/null
+++ b/apps/labs/doc/breadcrumb/TemplateDoc.vue
@@ -0,0 +1,85 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content can be placed inside the items using the <i>item</i> template. The divider between the items has its own <i>separator</i> template.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ item }">
+                <a class="cursor-pointer" :href="item.url">
+                    <span :class="item.icon"></span>
+                </a>
+            </template>
+            <template #separator> / </template>
+        </Breadcrumb>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: { icon: 'pi pi-home' },
+            items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }],
+            code: {
+                basic: `
+<Breadcrumb :home="home" :model="items">
+    <template #item="{ item }">
+        <a class="cursor-pointer" :href="item.url">
+            <span :class="item.icon"></span>
+        </a>
+    </template>
+    <template #separator> / </template>
+</Breadcrumb>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ item }">
+                <a class="cursor-pointer" :href="item.url">
+                    <span :class="item.icon"></span>
+                </a>
+            </template>
+            <template #separator> / </template>
+        </Breadcrumb>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: { icon: 'pi pi-home' },
+            items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ item }">
+                <a class="cursor-pointer" :href="item.url">
+                    <span :class="item.icon"></span>
+                </a>
+            </template>
+            <template #separator> / </template>
+        </Breadcrumb>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({ icon: 'pi pi-home' });
+const items = ref([{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/AccessibilityDoc.vue b/apps/labs/doc/button/AccessibilityDoc.vue
new file mode 100644
index 000000000..208f2ba89
--- /dev/null
+++ b/apps/labs/doc/button/AccessibilityDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
+            icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Activates the button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button icon="pi pi-check" aria-label="Submit" />
+
+<Button icon="pi pi-check" label="Submit" />
+
+<Button class="youtube p-0" aria-label="Youtube">
+    <i class="pi pi-youtube px-2"></i>
+    <span class="px-4">Youtube</span>
+</Button>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/BadgeDoc.vue b/apps/labs/doc/button/BadgeDoc.vue
new file mode 100644
index 000000000..588cf03e9
--- /dev/null
+++ b/apps/labs/doc/button/BadgeDoc.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button type="button" label="Emails" badge="2" />
+<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/BasicDoc.vue b/apps/labs/doc/button/BasicDoc.vue
new file mode 100644
index 000000000..29ddf9822
--- /dev/null
+++ b/apps/labs/doc/button/BasicDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Submit" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/ButtonGroupDoc.vue b/apps/labs/doc/button/ButtonGroupDoc.vue
new file mode 100644
index 000000000..6511c3a74
--- /dev/null
+++ b/apps/labs/doc/button/ButtonGroupDoc.vue
@@ -0,0 +1,59 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ButtonGroup>
+    <Button label="Save" icon="pi pi-check" />
+    <Button label="Delete" icon="pi pi-trash" />
+    <Button label="Cancel" icon="pi pi-times" />
+</ButtonGroup>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/DisabledDoc.vue b/apps/labs/doc/button/DisabledDoc.vue
new file mode 100644
index 000000000..7699ec631
--- /dev/null
+++ b/apps/labs/doc/button/DisabledDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be used.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Submit" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" disabled />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" disabled />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/HeadlessDoc.vue b/apps/labs/doc/button/HeadlessDoc.vue
new file mode 100644
index 000000000..41c52dca7
--- /dev/null
+++ b/apps/labs/doc/button/HeadlessDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button v-slot="slotProps" asChild>
+    <button
+        v-bind="slotProps.a11yAttrs"
+        class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+    >
+        SIGN UP
+    </button>
+</Button>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/IconOnlyDoc.vue b/apps/labs/doc/button/IconOnlyDoc.vue
new file mode 100644
index 000000000..18fe197d0
--- /dev/null
+++ b/apps/labs/doc/button/IconOnlyDoc.vue
@@ -0,0 +1,245 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons can have icons without labels.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4">
+            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button icon="pi pi-check" aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" aria-label="Search" />
+<Button icon="pi pi-user" severity="info" aria-label="User" />
+<Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
+<Button icon="pi pi-star" severity="contrast" aria-label="Star" />
+
+<Button icon="pi pi-check" rounded aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
+<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
+<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
+<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
+
+<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
+<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
+<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
+<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
+
+<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
+<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
+<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
+<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
+
+<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
+<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
+<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
+<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4">
+            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
+        </div>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4">
+            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/IconsDoc.vue b/apps/labs/doc/button/IconsDoc.vue
new file mode 100644
index 000000000..e014e487a
--- /dev/null
+++ b/apps/labs/doc/button/IconsDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button icon="pi pi-home" aria-label="Save" />
+<Button label="Profile" icon="pi pi-user" />
+<Button label="Save" icon="pi pi-check" iconPos="right" />
+<Button label="Search" icon="pi pi-search" iconPos="top" />
+<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/ImportDoc.vue b/apps/labs/doc/button/ImportDoc.vue
new file mode 100644
index 000000000..9518ba9ba
--- /dev/null
+++ b/apps/labs/doc/button/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Button from 'primevue/button';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/LinkDoc.vue b/apps/labs/doc/button/LinkDoc.vue
new file mode 100644
index 000000000..e894c6658
--- /dev/null
+++ b/apps/labs/doc/button/LinkDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-4">
+        <Button label="Link" variant="link" />
+        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
+        <Button as="router-link" label="Router" to="/" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Link" variant="link" />
+<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
+<Button as="router-link" label="Router" to="/" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center gap-4">
+        <Button label="Link" variant="link" />
+        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
+        <Button as="router-link" label="Router" to="/" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center gap-4">
+        <Button label="Link" variant="link" />
+        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
+        <Button as="router-link" label="Router" to="/" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/LoadingDoc.vue b/apps/labs/doc/button/LoadingDoc.vue
new file mode 100644
index 000000000..9701c6e91
--- /dev/null
+++ b/apps/labs/doc/button/LoadingDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Busy state is controlled with the <i>loading</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            loading: false,
+            code: {
+                basic: `
+<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            loading: false
+        };
+    },
+    methods: {
+        load() {
+            this.loading = true;
+            setTimeout(() => {
+                this.loading = false;
+            }, 2000);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const loading = ref(false);
+
+const load = () => {
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 2000);
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        load() {
+            this.loading = true;
+            setTimeout(() => {
+                this.loading = false;
+            }, 2000);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/OutlinedDoc.vue b/apps/labs/doc/button/OutlinedDoc.vue
new file mode 100644
index 000000000..83763d247
--- /dev/null
+++ b/apps/labs/doc/button/OutlinedDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Outlined buttons display a border without a transparent background.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="outlined" />
+        <Button label="Secondary" severity="secondary" variant="outlined" />
+        <Button label="Success" severity="success" variant="outlined" />
+        <Button label="Info" severity="info" variant="outlined" />
+        <Button label="Warn" severity="warn" variant="outlined" />
+        <Button label="Help" severity="help" variant="outlined" />
+        <Button label="Danger" severity="danger" variant="outlined" />
+        <Button label="Contrast" severity="contrast" variant="outlined" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Primary" variant="outlined" />
+<Button label="Secondary" severity="secondary" variant="outlined" />
+<Button label="Success" severity="success" variant="outlined" />
+<Button label="Info" severity="info" variant="outlined" />
+<Button label="Warn" severity="warn" variant="outlined" />
+<Button label="Help" severity="help" variant="outlined" />
+<Button label="Danger" severity="danger" variant="outlined" />
+<Button label="Contrast" severity="contrast" variant="outlined" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="outlined" />
+        <Button label="Secondary" severity="secondary" variant="outlined" />
+        <Button label="Success" severity="success" variant="outlined" />
+        <Button label="Info" severity="info" variant="outlined" />
+        <Button label="Warn" severity="warn" variant="outlined" />
+        <Button label="Help" severity="help" variant="outlined" />
+        <Button label="Danger" severity="danger" variant="outlined" />
+        <Button label="Contrast" severity="contrast" variant="outlined" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="outlined" />
+        <Button label="Secondary" severity="secondary" variant="outlined" />
+        <Button label="Success" severity="success" variant="outlined" />
+        <Button label="Info" severity="info" variant="outlined" />
+        <Button label="Warn" severity="warn" variant="outlined" />
+        <Button label="Help" severity="help" variant="outlined" />
+        <Button label="Danger" severity="danger" variant="outlined" />
+        <Button label="Contrast" severity="contrast" variant="outlined" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/RaisedDoc.vue b/apps/labs/doc/button/RaisedDoc.vue
new file mode 100644
index 000000000..f4be302da
--- /dev/null
+++ b/apps/labs/doc/button/RaisedDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Raised buttons display a shadow to indicate elevation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" raised />
+        <Button label="Secondary" severity="secondary" raised />
+        <Button label="Success" severity="success" raised />
+        <Button label="Info" severity="info" raised />
+        <Button label="Warn" severity="warn" raised />
+        <Button label="Help" severity="help" raised />
+        <Button label="Danger" severity="danger" raised />
+        <Button label="Contrast" severity="contrast" raised />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Primary" raised />
+<Button label="Secondary" severity="secondary" raised />
+<Button label="Success" severity="success" raised />
+<Button label="Info" severity="info" raised />
+<Button label="Warn" severity="warn" raised />
+<Button label="Help" severity="help" raised />
+<Button label="Danger" severity="danger" raised />
+<Button label="Contrast" severity="contrast" raised />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" raised />
+        <Button label="Secondary" severity="secondary" raised />
+        <Button label="Success" severity="success" raised />
+        <Button label="Info" severity="info" raised />
+        <Button label="Warn" severity="warn" raised />
+        <Button label="Help" severity="help" raised />
+        <Button label="Danger" severity="danger" raised />
+        <Button label="Contrast" severity="contrast" raised />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" raised />
+        <Button label="Secondary" severity="secondary" raised />
+        <Button label="Success" severity="success" raised />
+        <Button label="Info" severity="info" raised />
+        <Button label="Warn" severity="warn" raised />
+        <Button label="Help" severity="help" raised />
+        <Button label="Danger" severity="danger" raised />
+        <Button label="Contrast" severity="contrast" raised />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/RaisedTextDoc.vue b/apps/labs/doc/button/RaisedTextDoc.vue
new file mode 100644
index 000000000..5416b3c12
--- /dev/null
+++ b/apps/labs/doc/button/RaisedTextDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" raised />
+        <Button label="Secondary" severity="secondary" variant="text" raised />
+        <Button label="Success" severity="success" variant="text" raised />
+        <Button label="Info" severity="info" variant="text" raised />
+        <Button label="Warn" severity="warn" variant="text" raised />
+        <Button label="Help" severity="help" variant="text" raised />
+        <Button label="Danger" severity="danger" variant="text" raised />
+        <Button label="Contrast" severity="contrast" variant="text" raised />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Primary" variant="text" raised />
+<Button label="Secondary" severity="secondary" variant="text" raised />
+<Button label="Success" severity="success" variant="text" raised />
+<Button label="Info" severity="info" variant="text" raised />
+<Button label="Warn" severity="warn" variant="text" raised />
+<Button label="Help" severity="help" variant="text" raised />
+<Button label="Danger" severity="danger" variant="text" raised />
+<Button label="Contrast" severity="contrast" variant="text" raised />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" raised />
+        <Button label="Secondary" severity="secondary" variant="text" raised />
+        <Button label="Success" severity="success" variant="text" raised />
+        <Button label="Info" severity="info" variant="text" raised />
+        <Button label="Warn" severity="warn" variant="text" raised />
+        <Button label="Help" severity="help" variant="text" raised />
+        <Button label="Danger" severity="danger" variant="text" raised />
+        <Button label="Contrast" severity="contrast" variant="text" raised />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" raised />
+        <Button label="Secondary" severity="secondary" variant="text" raised />
+        <Button label="Success" severity="success" variant="text" raised />
+        <Button label="Info" severity="info" variant="text" raised />
+        <Button label="Warn" severity="warn" variant="text" raised />
+        <Button label="Help" severity="help" variant="text" raised />
+        <Button label="Danger" severity="danger" variant="text" raised />
+        <Button label="Contrast" severity="contrast" variant="text" raised />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/RoundedDoc.vue b/apps/labs/doc/button/RoundedDoc.vue
new file mode 100644
index 000000000..804d5d5f9
--- /dev/null
+++ b/apps/labs/doc/button/RoundedDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Rounded buttons have a circular border radius.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" rounded />
+        <Button label="Secondary" severity="secondary" rounded />
+        <Button label="Success" severity="success" rounded />
+        <Button label="Info" severity="info" rounded />
+        <Button label="Warn" severity="warn" rounded />
+        <Button label="Help" severity="help" rounded />
+        <Button label="Danger" severity="danger" rounded />
+        <Button label="Contrast" severity="contrast" rounded />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Primary" rounded />
+<Button label="Secondary" severity="secondary" rounded />
+<Button label="Success" severity="success" rounded />
+<Button label="Info" severity="info" rounded />
+<Button label="Warn" severity="warn" rounded />
+<Button label="Help" severity="help" rounded />
+<Button label="Danger" severity="danger" rounded />
+<Button label="Contrast" severity="contrast" rounded />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" rounded />
+        <Button label="Secondary" severity="secondary" rounded />
+        <Button label="Success" severity="success" rounded />
+        <Button label="Info" severity="info" rounded />
+        <Button label="Warn" severity="warn" rounded />
+        <Button label="Help" severity="help" rounded />
+        <Button label="Danger" severity="danger" rounded />
+        <Button label="Contrast" severity="contrast" rounded />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" rounded />
+        <Button label="Secondary" severity="secondary" rounded />
+        <Button label="Success" severity="success" rounded />
+        <Button label="Info" severity="info" rounded />
+        <Button label="Warn" severity="warn" rounded />
+        <Button label="Help" severity="help" rounded />
+        <Button label="Danger" severity="danger" rounded />
+        <Button label="Contrast" severity="contrast" rounded />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/SeverityDoc.vue b/apps/labs/doc/button/SeverityDoc.vue
new file mode 100644
index 000000000..12f005179
--- /dev/null
+++ b/apps/labs/doc/button/SeverityDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>severity</i> property defines the variant of a button.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warn" severity="warn" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
+        <Button label="Contrast" severity="contrast" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Primary" />
+<Button label="Secondary" severity="secondary" />
+<Button label="Success" severity="success" />
+<Button label="Info" severity="info" />
+<Button label="Warn" severity="warn" />
+<Button label="Help" severity="help" />
+<Button label="Danger" severity="danger" />
+<Button label="Contrast" severity="contrast" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warn" severity="warn" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
+        <Button label="Contrast" severity="contrast" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warn" severity="warn" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
+        <Button label="Contrast" severity="contrast" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/SizesDoc.vue b/apps/labs/doc/button/SizesDoc.vue
new file mode 100644
index 000000000..4e6ce2a1b
--- /dev/null
+++ b/apps/labs/doc/button/SizesDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Small" icon="pi pi-check" size="small" />
+<Button label="Normal" icon="pi pi-check" />
+<Button label="Large" icon="pi pi-check" size="large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/TemplateDoc.vue b/apps/labs/doc/button/TemplateDoc.vue
new file mode 100644
index 000000000..b08d38218
--- /dev/null
+++ b/apps/labs/doc/button/TemplateDoc.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content inside a button is defined as children.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button variant="outlined" class="!border-2">
+    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="..." fill="var(--p-primary-color)" />
+        <path d="..." fill="var(--p-text-color)" />
+    </svg>
+</Button>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/button/TextDoc.vue b/apps/labs/doc/button/TextDoc.vue
new file mode 100644
index 000000000..dd0714b45
--- /dev/null
+++ b/apps/labs/doc/button/TextDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text buttons are displayed as textual elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" />
+        <Button label="Secondary" severity="secondary" variant="text" />
+        <Button label="Success" severity="success" variant="text" />
+        <Button label="Info" severity="info" variant="text" />
+        <Button label="Warn" severity="warn" variant="text" />
+        <Button label="Help" severity="help" variant="text" />
+        <Button label="Danger" severity="danger" variant="text" />
+        <Button label="Contrast" severity="contrast" variant="text" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Primary" variant="text" />
+<Button label="Secondary" severity="secondary" variant="text" />
+<Button label="Success" severity="success" variant="text" />
+<Button label="Info" severity="info" variant="text" />
+<Button label="Warn" severity="warn" variant="text" />
+<Button label="Help" severity="help" variant="text" />
+<Button label="Danger" severity="danger" variant="text" />
+<Button label="Contrast" severity="contrast" variant="text" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" />
+        <Button label="Secondary" severity="secondary" variant="text" />
+        <Button label="Success" severity="success" variant="text" />
+        <Button label="Info" severity="info" variant="text" />
+        <Button label="Warn" severity="warn" variant="text" />
+        <Button label="Help" severity="help" variant="text" />
+        <Button label="Danger" severity="danger" variant="text" />
+        <Button label="Contrast" severity="contrast" variant="text" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" />
+        <Button label="Secondary" severity="secondary" variant="text" />
+        <Button label="Success" severity="success" variant="text" />
+        <Button label="Info" severity="info" variant="text" />
+        <Button label="Warn" severity="warn" variant="text" />
+        <Button label="Help" severity="help" variant="text" />
+        <Button label="Danger" severity="danger" variant="text" />
+        <Button label="Contrast" severity="contrast" variant="text" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/card/AccessibilityDoc.vue b/apps/labs/doc/card/AccessibilityDoc.vue
new file mode 100644
index 000000000..1792991fc
--- /dev/null
+++ b/apps/labs/doc/card/AccessibilityDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require
+            to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Card role="region">
+    Content
+</Card>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/card/AdvancedDoc.vue b/apps/labs/doc/card/AdvancedDoc.vue
new file mode 100644
index 000000000..afa9d274c
--- /dev/null
+++ b/apps/labs/doc/card/AdvancedDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
+    </DocSectionText>
+    <div class="mb-4 p-8 flex items-center justify-center">
+        <Card style="width: 25rem; overflow: hidden">
+            <template #header>
+                <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
+            </template>
+            <template #title>Advanced Card</template>
+            <template #subtitle>Card subtitle</template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+            <template #footer>
+                <div class="flex gap-4 mt-1">
+                    <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                    <Button label="Save" class="w-full" />
+                </div>
+            </template>
+        </Card>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Card style="width: 25rem; overflow: hidden">
+    <template #header>
+        <img alt="user header" src="/images/usercard.png" />
+    </template>
+    <template #title>Advanced Card</template>
+    <template #subtitle>Card subtitle</template>
+    <template #content>
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+            quas!
+        </p>
+    </template>
+    <template #footer>
+        <div class="flex gap-4 mt-1">
+            <Button label="Cancel" severity="secondary" outlined class="w-full" />
+            <Button label="Save" class="w-full" />
+        </div>
+    </template>
+</Card>
+`,
+                options: `
+<template>
+    <Card style="width: 25rem; overflow: hidden">
+        <template #header>
+            <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
+        </template>
+        <template #title>Advanced Card</template>
+        <template #subtitle>Card subtitle</template>
+        <template #content>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                quas!
+            </p>
+        </template>
+        <template #footer>
+            <div class="flex gap-4 mt-1">
+                <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                <Button label="Save" class="w-full" />
+            </div>
+        </template>
+    </Card>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <Card style="width: 25rem; overflow: hidden">
+        <template #header>
+            <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
+        </template>
+        <template #title>Advanced Card</template>
+        <template #subtitle>Card subtitle</template>
+        <template #content>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                quas!
+            </p>
+        </template>
+        <template #footer>
+            <div class="flex gap-4 mt-1">
+                <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                <Button label="Save" class="w-full" />
+            </div>
+        </template>
+    </Card>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/card/BasicDoc.vue b/apps/labs/doc/card/BasicDoc.vue
new file mode 100644
index 000000000..654c53987
--- /dev/null
+++ b/apps/labs/doc/card/BasicDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
+    </DocSectionText>
+    <div class="mb-4 p-8">
+        <Card>
+            <template #title>Simple Card</template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+        </Card>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Card>
+    <template #title>Simple Card</template>
+    <template #content>
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+            quas!
+        </p>
+    </template>
+</Card>
+`,
+                options: `
+<template>
+    <Card>
+        <template #title>Simple Card</template>
+        <template #content>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                quas!
+            </p>
+        </template>
+    </Card>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <Card>
+        <template #title>Simple Card</template>
+        <template #content>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                quas!
+            </p>
+        </template>
+    </Card>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/card/ImportDoc.vue b/apps/labs/doc/card/ImportDoc.vue
new file mode 100644
index 000000000..853997255
--- /dev/null
+++ b/apps/labs/doc/card/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Card from 'primevue/card';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/carousel/AccessibilityDoc.vue b/apps/labs/doc/carousel/AccessibilityDoc.vue
new file mode 100644
index 000000000..734d0df3f
--- /dev/null
+++ b/apps/labs/doc/carousel/AccessibilityDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
+            <i>aria-live</i> attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
+        </p>
+
+        <p>
+            A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Similarly
+            <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
+        </p>
+
+        <p>
+            Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button
+            elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
+        </p>
+
+        <p>
+            Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
+            Current page is marked with <i>aria-current</i>.
+        </p>
+
+        <h3>Next/Prev Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through interactive elements in the carousel.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates navigation.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates navigation.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Quick Navigation Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the active slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last slide link.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/carousel/BasicDoc.vue b/apps/labs/doc/carousel/BasicDoc.vue
new file mode 100644
index 000000000..a5db3642e
--- /dev/null
+++ b/apps/labs/doc/carousel/BasicDoc.vue
@@ -0,0 +1,278 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
+    </DocSectionText>
+
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ],
+            code: {
+                basic: `
+<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+    <template #item="slotProps">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+            <div class="mb-4">
+                <div class="relative mx-auto">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                </div>
+            </div>
+            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-between 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>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
+})
+
+const products = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1400px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 1
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/carousel/CircularDoc.vue b/apps/labs/doc/carousel/CircularDoc.vue
new file mode 100644
index 000000000..4936662ea
--- /dev/null
+++ b/apps/labs/doc/carousel/CircularDoc.vue
@@ -0,0 +1,278 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be added which is enabled automatically in auto play mode.</p>
+    </DocSectionText>
+
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ],
+            code: {
+                basic: `
+<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
+    <template #item="slotProps">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+            <div class="mb-4">
+                <div class="relative mx-auto">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                </div>
+            </div>
+            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-between 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>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
+})
+
+const products = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1400px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 1
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/carousel/ImportDoc.vue b/apps/labs/doc/carousel/ImportDoc.vue
new file mode 100644
index 000000000..406de0295
--- /dev/null
+++ b/apps/labs/doc/carousel/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Carousel from 'primevue/carousel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/carousel/ResponsiveDoc.vue b/apps/labs/doc/carousel/ResponsiveDoc.vue
new file mode 100644
index 000000000..d1654445c
--- /dev/null
+++ b/apps/labs/doc/carousel/ResponsiveDoc.vue
@@ -0,0 +1,280 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Carousel supports specific configuration per screen size with the <i>responsiveOptions</i> property that takes an array of objects where each object defines the max-width <i>breakpoint</i>, <i>numVisible</i> for the number of items items
+            per page and <i>numScroll</i> for number of items to scroll. When <i>responsiveOptions</i> is defined, the <i>numScroll</i> and <i>numVisible</i> properties of the Carousel are used as default when there is breakpoint that applies.
+        </p>
+    </DocSectionText>
+
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ],
+            code: {
+                basic: `
+<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+    <template #item="slotProps">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+            <div class="mb-4">
+                <div class="relative mx-auto">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                </div>
+            </div>
+            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-between 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>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
+})
+
+const products = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1400px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 1
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/carousel/VerticalDoc.vue b/apps/labs/doc/carousel/VerticalDoc.vue
new file mode 100644
index 000000000..3a19cecda
--- /dev/null
+++ b/apps/labs/doc/carousel/VerticalDoc.vue
@@ -0,0 +1,212 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>To create a vertical Carousel, <i>orientation</i> needs to be set to <i>vertical</i> along with a <i>verticalViewPortHeight</i>.</p>
+    </DocSectionText>
+
+    <div class="card">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
+    <template #item="slotProps">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+            <div class="mb-4">
+                <div class="relative mx-auto">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                </div>
+            </div>
+            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-between 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>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between 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>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
+})
+
+const products = ref();
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/AccessibilityDoc.vue b/apps/labs/doc/cascadeselect/AccessibilityDoc.vue
new file mode 100644
index 000000000..5625edb0b
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/AccessibilityDoc.vue
@@ -0,0 +1,136 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
+            The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
+        </p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
+            <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Closed State Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the cascadeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none then first option receives the focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Popup Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Hides the popup and moves focus to the next tabbable element. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Hides the popup and moves focus to the previous tabbable element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the cascadeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the cascadeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>If option is closed, opens the option otherwise moves focus to the first child option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>If option is open, closes the option otherwise moves focus to the parent option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="dd1"></span>Options</span>
+<CascadeSelect aria-labelledby="dd1" />
+
+<CascadeSelect aria-label="Options" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/BasicDoc.vue b/apps/labs/doc/cascadeselect/BasicDoc.vue
new file mode 100644
index 000000000..3812c19aa
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/BasicDoc.vue
@@ -0,0 +1,282 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            CascadeSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
+            required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/ClearIconDoc.vue b/apps/labs/doc/cascadeselect/ClearIconDoc.vue
new file mode 100644
index 000000000..d92264882
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/ClearIconDoc.vue
@@ -0,0 +1,279 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the CascadeSelect.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" showClear :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/DisabledDoc.vue b/apps/labs/doc/cascadeselect/DisabledDoc.vue
new file mode 100644
index 000000000..7807ec8f3
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/DisabledDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<CascadeSelect disabled placeholder="Disabled" class="w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/FilledDoc.vue b/apps/labs/doc/cascadeselect/FilledDoc.vue
new file mode 100644
index 000000000..6795889ec
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/FilledDoc.vue
@@ -0,0 +1,279 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/FloatLabelDoc.vue b/apps/labs/doc/cascadeselect/FloatLabelDoc.vue
new file mode 100644
index 000000000..879f8dae3
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/FloatLabelDoc.vue
@@ -0,0 +1,334 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="in">
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="on">
+            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<FloatLabel class="w-full md:w-56">
+    <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-56">
+    <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-56">
+    <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/FormsDoc.vue b/apps/labs/doc/cascadeselect/FormsDoc.vue
new file mode 100644
index 000000000..91bfffd37
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/FormsDoc.vue
@@ -0,0 +1,367 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>CascadeSelect integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                city: null
+            },
+            resolver: zodResolver(
+                z.object({
+                    city: z.union([
+                        z.object({
+                            cname: z.string().min(1, 'City is required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'City is required.' })
+                    ])
+                })
+            ),
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+    <div class="flex flex-col gap-1">
+        <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            initialValues: {
+                city: null
+            },
+            resolver: zodResolver(
+                z.object({
+                    city: z.union([
+                        z.object({
+                            cname: z.string().min(1, 'City is required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'City is required.' })
+                    ])
+                })
+            ),
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    city: null
+});
+
+const resolver = ref(zodResolver(
+    z.object({
+        city: z.union([
+            z.object({
+                cname: z.string().min(1, 'City is required.')
+            }),
+            z.any().refine((val) => false, { message: 'City is required.' })
+        ])
+    })
+));
+
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/IftaLabelDoc.vue b/apps/labs/doc/cascadeselect/IftaLabelDoc.vue
new file mode 100644
index 000000000..12e9c81be
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/IftaLabelDoc.vue
@@ -0,0 +1,288 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-56">
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
+            <label for="cs_city">City</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<IftaLabel class="w-full md:w-56">
+    <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
+    <label for="cs_city">City</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-56">
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
+            <label for="cs_city">City</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-56">
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
+            <label for="cs_city">City</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/ImportDoc.vue b/apps/labs/doc/cascadeselect/ImportDoc.vue
new file mode 100644
index 000000000..de8dc8ffa
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import CascadeSelect from 'primevue/cascadeselect';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/InvalidDoc.vue b/apps/labs/doc/cascadeselect/InvalidDoc.vue
new file mode 100644
index 000000000..1ac1b0b23
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/InvalidDoc.vue
@@ -0,0 +1,301 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+        <CascadeSelect
+            v-model="selectedCity2"
+            :invalid="!selectedCity2"
+            :options="countries"
+            optionLabel="cname"
+            optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']"
+            class="w-full sm:w-56"
+            placeholder="Select a City"
+            variant="filled"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity1: null,
+            selectedCity2: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<div class="card flex flex-wrap justify-center gap-4">
+    <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+        :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+    <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+        :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity1: null,
+            selectedCity2: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity1 = ref(null);
+const selectedCity2 = ref(null);
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/LoadingStateDoc.vue b/apps/labs/doc/cascadeselect/LoadingStateDoc.vue
new file mode 100644
index 000000000..9be6b8849
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/LoadingStateDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Loading state can be used <i>loading</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<CascadeSelect loading placeholder="Loading..." class="w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/SizesDoc.vue b/apps/labs/doc/cascadeselect/SizesDoc.vue
new file mode 100644
index 000000000..d641a5d74
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/SizesDoc.vue
@@ -0,0 +1,299 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>CascadeSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" size="small" placeholder="Small" />
+        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Normal" />
+        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+    class="w-56" size="small" placeholder="Small" />
+<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+    class="w-56" placeholder="Normal" />
+<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+    class="w-56" size="large" placeholder="Large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" size="small" placeholder="Small" />
+        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" placeholder="Normal" />
+        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" size="small" placeholder="Small" />
+        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" placeholder="Normal" />
+        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/cascadeselect/TemplateDoc.vue b/apps/labs/doc/cascadeselect/TemplateDoc.vue
new file mode 100644
index 000000000..4e90b8077
--- /dev/null
+++ b/apps/labs/doc/cascadeselect/TemplateDoc.vue
@@ -0,0 +1,359 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>CascadeSelect offers multiple slots for customization through templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
+                    <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
+                    <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-1">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </CascadeSelect>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
+    <template #option="slotProps">
+        <div class="flex items-center">
+            <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
+            <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
+            <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
+            <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
+        </div>
+    </template>
+    <template #dropdownicon>
+        <i class="pi pi-map" />
+    </template>
+    <template #header>
+        <div class="font-medium px-3 py-2">Available Countries</div>
+    </template>
+    <template #footer>
+        <div class="px-3 py-1">
+            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+        </div>
+    </template>
+</CascadeSelect>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
+                    <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
+                    <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
+                    <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-1">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </CascadeSelect>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
+                    <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
+                    <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
+                    <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-1">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </CascadeSelect>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/AccessibilityDoc.vue b/apps/labs/doc/checkbox/AccessibilityDoc.vue
new file mode 100644
index 000000000..85e63a2bd
--- /dev/null
+++ b/apps/labs/doc/checkbox/AccessibilityDoc.vue
@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using
+            <i>aria-labelledby</i>, <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="chkbox1">Remember Me</label>
+<Checkbox inputId="chkbox1" />
+
+<span id="chkbox2">Remember Me</span>
+<Checkbox aria-labelledby="chkbox2" />
+
+<Checkbox aria-label="Remember Me" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/BasicDoc.vue b/apps/labs/doc/checkbox/BasicDoc.vue
new file mode 100644
index 000000000..233714e8f
--- /dev/null
+++ b/apps/labs/doc/checkbox/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Binary checkbox is used with the <i>v-model</i> for two-way value binding and the <i>binary</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<Checkbox v-model="checked" binary />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/DisabledDoc.vue b/apps/labs/doc/checkbox/DisabledDoc.vue
new file mode 100644
index 000000000..40615d60f
--- /dev/null
+++ b/apps/labs/doc/checkbox/DisabledDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: true,
+            code: {
+                basic: `
+<Checkbox v-model="checked1" binary disabled />
+<Checkbox v-model="checked2" binary disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: true,
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked1 = ref(false);
+const checked2 = ref(true);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/DynamicDoc.vue b/apps/labs/doc/checkbox/DynamicDoc.vue
new file mode 100644
index 000000000..6fa07a6ec
--- /dev/null
+++ b/apps/labs/doc/checkbox/DynamicDoc.vue
@@ -0,0 +1,90 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Checkboxes can be generated using a list of values.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
+                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCategories: ['Marketing'],
+            categories: [
+                { name: 'Accounting', key: 'A' },
+                { name: 'Marketing', key: 'M' },
+                { name: 'Production', key: 'P' },
+                { name: 'Research', key: 'R' }
+            ],
+            code: {
+                basic: `
+<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
+    <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
+    <label :for="category.key">{{ category.name }}</label>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
+                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCategories: ['Marketing'],
+            categories: [
+                { name: "Accounting", key: "A" },
+                { name: "Marketing", key: "M" },
+                { name: "Production", key: "P" },
+                { name: "Research", key: "R" }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
+                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const categories = ref([
+    {name: "Accounting", key: "A"},
+    {name: "Marketing", key: "M"},
+    {name: "Production", key: "P"},
+    {name: "Research", key: "R"}
+]);
+const selectedCategories = ref(['Marketing']);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/FilledDoc.vue b/apps/labs/doc/checkbox/FilledDoc.vue
new file mode 100644
index 000000000..105205ae1
--- /dev/null
+++ b/apps/labs/doc/checkbox/FilledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<Checkbox v-model="checked" binary variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/FormsDoc.vue b/apps/labs/doc/checkbox/FormsDoc.vue
new file mode 100644
index 000000000..ca81d7421
--- /dev/null
+++ b/apps/labs/doc/checkbox/FormsDoc.vue
@@ -0,0 +1,200 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Checkbox integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+            <div class="flex flex-col gap-2">
+                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="cheese" value="Cheese" />
+                        <label for="cheese"> Cheese </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom"> Mushroom </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="pepper" value="Pepper" />
+                        <label for="pepper"> Pepper </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="onion" value="Onion" />
+                        <label for="onion"> Onion </label>
+                    </div>
+                </CheckboxGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                ingredient: []
+            },
+            resolver: zodResolver(
+                z.object({
+                    ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+    <div class="flex flex-col gap-2">
+        <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <Checkbox inputId="cheese" value="Cheese" />
+                <label for="cheese"> Cheese </label>
+            </div>
+            <div class="flex items-center gap-2">
+                <Checkbox inputId="mushroom" value="Mushroom" />
+                <label for="mushroom"> Mushroom </label>
+            </div>
+            <div class="flex items-center gap-2">
+                <Checkbox inputId="pepper" value="Pepper" />
+                <label for="pepper"> Pepper </label>
+            </div>
+            <div class="flex items-center gap-2">
+                <Checkbox inputId="onion" value="Onion" />
+                <label for="onion"> Onion </label>
+            </div>
+        </CheckboxGroup>
+        <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+            <div class="flex flex-col gap-2">
+                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="cheese" value="Cheese" />
+                        <label for="cheese"> Cheese </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom"> Mushroom </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="pepper" value="Pepper" />
+                        <label for="pepper"> Pepper </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="onion" value="Onion" />
+                        <label for="onion"> Onion </label>
+                    </div>
+                </CheckboxGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <Toast />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                ingredient: []
+            },
+            resolver: zodResolver(
+                z.object({
+                    ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
+                })
+            ),
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+            <div class="flex flex-col gap-2">
+                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="cheese" value="Cheese" />
+                        <label for="cheese"> Cheese </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom"> Mushroom </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="pepper" value="Pepper" />
+                        <label for="pepper"> Pepper </label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Checkbox inputId="onion" value="Onion" />
+                        <label for="onion"> Onion </label>
+                    </div>
+                </CheckboxGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    ingredient: []
+});
+const resolver = ref(zodResolver(
+    z.object({
+        ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/GroupDoc.vue b/apps/labs/doc/checkbox/GroupDoc.vue
new file mode 100644
index 000000000..aa12eca93
--- /dev/null
+++ b/apps/labs/doc/checkbox/GroupDoc.vue
@@ -0,0 +1,116 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple checkboxes can be grouped together.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
+            <label for="ingredient1"> Cheese </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
+            <label for="ingredient2"> Mushroom </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
+            <label for="ingredient3"> Pepper </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
+            <label for="ingredient4"> Onion </label>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            pizza: null,
+            code: {
+                basic: `
+<div class="card flex flex-wrap justify-center gap-4">
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
+        <label for="ingredient1"> Cheese </label>
+    </div>
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
+        <label for="ingredient2"> Mushroom </label>
+    </div>
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
+        <label for="ingredient3"> Pepper </label>
+    </div>
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
+        <label for="ingredient4"> Onion </label>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
+            <label for="ingredient1"> Cheese </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
+            <label for="ingredient2"> Mushroom </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
+            <label for="ingredient3"> Pepper </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
+            <label for="ingredient4"> Onion </label>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            pizza: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
+            <label for="ingredient1"> Cheese </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
+            <label for="ingredient2"> Mushroom </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
+            <label for="ingredient3"> Pepper </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
+            <label for="ingredient4"> Onion </label>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const pizza = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/ImportDoc.vue b/apps/labs/doc/checkbox/ImportDoc.vue
new file mode 100644
index 000000000..26691ee9a
--- /dev/null
+++ b/apps/labs/doc/checkbox/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Checkbox from 'primevue/checkbox';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/IndeterminateDoc.vue b/apps/labs/doc/checkbox/IndeterminateDoc.vue
new file mode 100644
index 000000000..2b5b93c38
--- /dev/null
+++ b/apps/labs/doc/checkbox/IndeterminateDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>indeterminate</i> is present, the checkbox masks the actual value visually.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" indeterminate binary />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<Checkbox v-model="checked" indeterminate binary />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" indeterminate binary />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" indeterminate binary />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/InvalidDoc.vue b/apps/labs/doc/checkbox/InvalidDoc.vue
new file mode 100644
index 000000000..a93536f3b
--- /dev/null
+++ b/apps/labs/doc/checkbox/InvalidDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" :invalid="!checked" binary />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<Checkbox v-model="checked" :invalid="!checked"  binary />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" :invalid="!checked"  binary />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" :invalid="!checked"  binary />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/SizesDoc.vue b/apps/labs/doc/checkbox/SizesDoc.vue
new file mode 100644
index 000000000..044dc69d3
--- /dev/null
+++ b/apps/labs/doc/checkbox/SizesDoc.vue
@@ -0,0 +1,100 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Checkbox provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+            <label for="size_small" class="text-sm">Small</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+            <label for="size_normal">Normal</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+            <label for="size_large" class="text-lg">Large</label>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            size: null,
+            code: {
+                basic: `
+<div class="card flex flex-wrap justify-center gap-4">
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+        <label for="size_small" class="text-sm">Small</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+        <label for="size_normal">Normal</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+        <label for="size_large" class="text-lg">Large</label>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+            <label for="size_small" class="text-sm">Small</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+            <label for="size_normal">Normal</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+            <label for="size_large" class="text-lg">Large</label>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            size: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+            <label for="size_small" class="text-sm">Small</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+            <label for="size_normal">Normal</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+            <label for="size_large" class="text-lg">Large</label>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const size = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/chip/AccessibilityDoc.vue b/apps/labs/doc/chip/AccessibilityDoc.vue
new file mode 100644
index 000000000..18dd9c407
--- /dev/null
+++ b/apps/labs/doc/chip/AccessibilityDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a
+            <i>tabindex</i> and focusable with the tab key.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>backspace</i>
+                        </td>
+                        <td>Hides removable.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Hides removable.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/chip/BasicDoc.vue b/apps/labs/doc/chip/BasicDoc.vue
new file mode 100644
index 000000000..0d54b5bff
--- /dev/null
+++ b/apps/labs/doc/chip/BasicDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A basic chip with a text is created with the <i>label</i> property. In addition when <i>removable</i> is added, a delete icon is displayed to remove a chip.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Action" />
+        <Chip label="Comedy" />
+        <Chip label="Mystery" />
+        <Chip label="Thriller" removable />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Chip label="Action" />
+<Chip label="Comedy" />
+<Chip label="Mystery" />
+<Chip label="Thriller" removable />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Action" />
+        <Chip label="Comedy" />
+        <Chip label="Mystery" />
+        <Chip label="Thriller" removable />
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Action" />
+        <Chip label="Comedy" />
+        <Chip label="Mystery" />
+        <Chip label="Thriller" removable />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/chip/IconDoc.vue b/apps/labs/doc/chip/IconDoc.vue
new file mode 100644
index 000000000..339ff9656
--- /dev/null
+++ b/apps/labs/doc/chip/IconDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A font icon next to the label can be displayed with the <i>icon</i> property.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Apple" icon="pi pi-apple" />
+        <Chip label="Facebook" icon="pi pi-facebook" />
+        <Chip label="Google" icon="pi pi-google" />
+        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Chip label="Apple" icon="pi pi-apple" />
+<Chip label="Facebook" icon="pi pi-facebook" />
+<Chip label="Google" icon="pi pi-google" />
+<Chip label="Microsoft" icon="pi pi-microsoft" removable />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Apple" icon="pi pi-apple" />
+        <Chip label="Facebook" icon="pi pi-facebook" />
+        <Chip label="Google" icon="pi pi-google" />
+        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+    </div>
+</template>
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Apple" icon="pi pi-apple" />
+        <Chip label="Facebook" icon="pi pi-facebook" />
+        <Chip label="Google" icon="pi pi-google" />
+        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+    </div>
+</template>
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/chip/ImageDoc.vue b/apps/labs/doc/chip/ImageDoc.vue
new file mode 100644
index 000000000..a2dcbfe07
--- /dev/null
+++ b/apps/labs/doc/chip/ImageDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>image</i> property is used to display an image like an avatar.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+        <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
+<Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" />
+<Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" />
+<Chip label="Xuxue Feng" image="/images/avatar/xuxuefeng.png" removable />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+        <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
+    </div>
+</template>
+
+<script >
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+        <Chip label="Asiya Javayant" image=https://primefaces.org/cdn/primevue"/images/avatar/asiyajavayant.png" />
+        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/chip/ImportDoc.vue b/apps/labs/doc/chip/ImportDoc.vue
new file mode 100644
index 000000000..a451d2c60
--- /dev/null
+++ b/apps/labs/doc/chip/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Chip from 'primevue/chip';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/chip/StyleDoc.vue b/apps/labs/doc/chip/StyleDoc.vue
new file mode 100644
index 000000000..bb20d0b9d
--- /dev/null
+++ b/apps/labs/doc/chip/StyleDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-chip</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-chip-image</td>
+                    <td>Container element in image mode.</td>
+                </tr>
+                <tr>
+                    <td>p-chip-text</td>
+                    <td>Text of the chip.</td>
+                </tr>
+                <tr>
+                    <td>pi-chip-remove-icon</td>
+                    <td>Remove icon.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/apps/labs/doc/chip/TemplateDoc.vue b/apps/labs/doc/chip/TemplateDoc.vue
new file mode 100644
index 000000000..5a696a1a8
--- /dev/null
+++ b/apps/labs/doc/chip/TemplateDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The default slot allows displaying custom content inside a chip.</p>
+    </DocSectionText>
+    <div class="card">
+        <Chip class="py-0 pl-0 pr-4">
+            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
+            <span class="ml-2 font-medium">PRIME</span>
+        </Chip>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Chip class="py-0 pl-0 pr-4">
+    <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
+    <span class="ml-2 font-medium">PRIME</span>
+</Chip>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Chip class="py-0 pl-0 pr-4">
+            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
+            <span class="ml-2 font-medium">PRIME</span>
+        </Chip>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Chip class="py-0 pl-0 pr-4">
+            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
+            <span class="ml-2 font-medium">PRIME</span>
+        </Chip>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/colorpicker/AccessibilityDoc.vue b/apps/labs/doc/colorpicker/AccessibilityDoc.vue
new file mode 100644
index 000000000..2912c2728
--- /dev/null
+++ b/apps/labs/doc/colorpicker/AccessibilityDoc.vue
@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers.
+            In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
+        </p>
+
+        <h3>Closed State Keyboard Support of Popup ColorPicker</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the color picker button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves focus to the color slider.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Popup Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the color and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the color and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Color Picker Slider</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>arrow keys</i></td>
+                        <td>Changes color.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Hue Slider</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">up arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Changes hue.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/colorpicker/BasicDoc.vue b/apps/labs/doc/colorpicker/BasicDoc.vue
new file mode 100644
index 000000000..8e1b824b4
--- /dev/null
+++ b/apps/labs/doc/colorpicker/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ColorPicker is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null,
+            code: {
+                basic: `
+<ColorPicker v-model="color" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const color = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/colorpicker/DisabledDoc.vue b/apps/labs/doc/colorpicker/DisabledDoc.vue
new file mode 100644
index 000000000..7fe7b20bc
--- /dev/null
+++ b/apps/labs/doc/colorpicker/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null,
+            code: {
+                basic: `
+<ColorPicker v-model="color" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const color = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/colorpicker/FormatDoc.vue b/apps/labs/doc/colorpicker/FormatDoc.vue
new file mode 100644
index 000000000..8e0518286
--- /dev/null
+++ b/apps/labs/doc/colorpicker/FormatDoc.vue
@@ -0,0 +1,104 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Default color format to use in value binding is <i>hex</i> and other possible values can be <i>rgb</i> and <i>hsb</i> using the <i>format</i> property.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
+            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
+            <span>{{ colorHEX }}</span>
+        </div>
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
+            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
+            <span>{{ JSON.stringify(colorRGB) }}</span>
+        </div>
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
+            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
+            <span>{{ JSON.stringify(colorHSB) }}</span>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            colorHEX: '6466f1',
+            colorRGB: { r: 100, g: 102, b: 241 },
+            colorHSB: { h: 239, s: 59, b: 95 },
+            code: {
+                basic: `
+<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
+<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
+<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
+            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
+            <span>{{ colorHEX }}</span>
+        </div>
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
+            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
+            <span>{{ JSON.stringify(colorRGB) }}</span>
+        </div>
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
+            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
+            <span>{{ JSON.stringify(colorHSB) }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            colorHEX: '6466f1',
+            colorRGB: { r: 100, g: 102, b: 241 },
+            colorHSB: { h: 239, s: 59, b: 95 }
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
+            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
+            <span>{{ colorHEX }}</span>
+        </div>
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
+            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
+            <span>{{ JSON.stringify(colorRGB) }}</span>
+        </div>
+        <div class="flex-1 flex flex-col items-center">
+            <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
+            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
+            <span>{{ JSON.stringify(colorHSB) }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const colorHEX = ref('6466f1');
+const colorRGB = ref({ r: 100, g: 102, b: 241 });
+const colorHSB = ref({ h: 239, s: 59, b: 95 });
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/colorpicker/FormsDoc.vue b/apps/labs/doc/colorpicker/FormsDoc.vue
new file mode 100644
index 000000000..8e5448fd4
--- /dev/null
+++ b/apps/labs/doc/colorpicker/FormsDoc.vue
@@ -0,0 +1,130 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ColorPicker integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-2">
+                <ColorPicker name="color" />
+                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                color: null
+            },
+            resolver: zodResolver(
+                z.object({
+                    color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+    <div class="flex flex-col items-center gap-2">
+        <ColorPicker name="color" />
+        <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-2">
+                <ColorPicker name="color" />
+                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                color: null
+            },
+            resolver: zodResolver(
+                z.object({
+                    color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-2">
+                <ColorPicker name="color" />
+                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    color: null
+});
+const resolver = ref(zodResolver(
+    z.object({
+        color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/colorpicker/ImportDoc.vue b/apps/labs/doc/colorpicker/ImportDoc.vue
new file mode 100644
index 000000000..7429452a6
--- /dev/null
+++ b/apps/labs/doc/colorpicker/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ColorPicker from 'primevue/colorpicker';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/colorpicker/InlineDoc.vue b/apps/labs/doc/colorpicker/InlineDoc.vue
new file mode 100644
index 000000000..737d3f2a1
--- /dev/null
+++ b/apps/labs/doc/colorpicker/InlineDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ColorPicker is displayed as a popup by default, add <i>inline</i> property to customize this behavior.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" inline />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null,
+            code: {
+                basic: `
+<ColorPicker v-model="color" inline />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" inline />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" inline />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const color = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/common/presetdoc/index.json b/apps/labs/doc/common/presetdoc/index.json
new file mode 100644
index 000000000..80fb0a478
--- /dev/null
+++ b/apps/labs/doc/common/presetdoc/index.json
@@ -0,0 +1,87 @@
+{
+  "accordion": ".p-accordionpanel {\n    @apply flex flex-col border-b border-surface-200 dark:border-surface-700\n}\n\n.p-accordionheader {\n    @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold\n        bg-surface-0 dark:bg-surface-900\n        text-surface-500 dark:text-surface-400\n        transition-colors duration-200\n}\n\n.p-accordionpanel:first-child > .p-accordionheader {\n    @apply rounded-ss-md rounded-se-md\n}\n\n.p-accordionpanel:last-child > .p-accordionheader {\n    @apply rounded-ee-md rounded-es-md\n}\n\n.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {\n    @apply rounded-ee-md rounded-es-md\n}\n\n.p-accordionheader-toggle-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {\n    @apply outline outline-1 outline-offset-[-1px] outline-primary\n}\n\n.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0;\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0;\n}\n\n.p-accordioncontent-content {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]\n}\n",
+  "autocomplete": "@import './inputtext';\n@import './chip';\n\n.p-autocomplete {\n    @apply inline-flex\n}\n\n.p-autocomplete.p-disabled {\n    @apply opacity-100\n}\n\n.p-autocomplete-loader {\n    @apply absolute top-1/2 -mt-2 end-3\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {\n    @apply end-[3.25rem]\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {\n    @apply flex-auto w-[1%]\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {\n    @apply rounded-e-none\n}\n\n.p-autocomplete-dropdown {\n    @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-e-md\n        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300\n        text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800\n        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600\n        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-autocomplete .p-autocomplete-overlay {\n    @apply min-w-full\n}\n\n.p-autocomplete-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-autocomplete-list-container {\n    @apply overflow-auto\n}\n\n.p-autocomplete-list {\n    @apply m-0 p-1 list-none flex flex-col gap-[2px]\n}\n\n.p-autocomplete-option {\n    @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm\n        text-surface-700 dark:text-surface-0 bg-transparent border-none\n        transition-colors duration-200\n}\n\n.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0\n}\n\n.p-autocomplete-option-selected {\n    @apply bg-highlight\n}\n\n.p-autocomplete-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-autocomplete-option-group {\n    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent\n}\n\n.p-autocomplete-input-multiple {\n    @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap\n        px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700 rounded-md w-full\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200 outline-none\n}\n\n.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {\n    @apply border-primary\n}\n\n.p-autocomplete.p-invalid .p-autocomplete-input-multiple {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-variant-filled.p-autocomplete-input-multiple {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-autocomplete.p-disabled .p-autocomplete-input-multiple {\n    @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400\n}\n\n.p-autocomplete-chip.p-chip {\n    @apply py-1 rounded-sm\n}\n\n.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {\n    @apply px-1\n}\n\n.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {\n    @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0\n}\n\n.p-autocomplete-input-chip {\n    @apply flex-auto inline-flex py-1\n}\n\n.p-autocomplete-input-chip input {\n    @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit\n}\n\n.p-autocomplete-input-chip input::placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-autocomplete-empty-message {\n    @apply px-3 py-2\n}\n\n.p-autocomplete-fluid {\n    @apply flex\n}\n\n.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {\n    @apply w-[1%]\n}\n",
+  "avatar": ".p-avatar {\n    @apply inline-flex items-center justify-center\n        w-8 h-8 text-base rounded-md\n        bg-surface-200 dark:bg-surface-700\n}\n\n.p-avatar-image {\n    @apply bg-transparent\n}\n\n.p-avatar-circle,\n.p-avatar-circle img {\n    @apply rounded-full\n}\n\n.p-avatar-icon {\n    @apply text-base\n}\n\n.p-avatar img {\n    @apply w-full h-full\n}\n\n.p-avatar-lg {\n    @apply w-12 h-12 text-2xl\n}\n\n.p-avatar-lg .p-avatar-icon {\n    @apply text-2xl\n}\n\n.p-avatar-xl {\n    @apply w-16 h-16 text-[2rem]\n}\n\n.p-avatar-xl .p-avatar-icon {\n    @apply text-[2rem]\n}\n\n.p-avatar-group {\n    @apply flex items-center\n}\n\n.p-avatar-group .p-avatar + .p-avatar {\n    @apply -ms-4\n}\n\n.p-avatar-group .p-avatar {\n    @apply border-2 border-surface-200 dark:border-surface-700\n}\n",
+  "badge": ".p-badge {\n    @apply inline-flex items-center justify-center rounded-md\n        py-0 px-2 text-xs font-bold min-w-6 h-6\n        bg-primary text-primary-contrast\n}\n\n.p-badge-dot {\n    @apply min-w-2 h-2 rounded-full p-0\n}\n\n.p-badge-circle {\n    @apply p-0 rounded-full\n}\n\n.p-badge-secondary {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300\n}\n\n.p-badge-success {\n    @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950\n}\n\n.p-badge-info {\n    @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950\n}\n\n.p-badge-warn {\n    @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950\n}\n\n.p-badge-danger {\n    @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950\n}\n\n.p-badge-contrast {\n    @apply bg-surface-950 dark:bg-white text-white dark:text-surface-950\n}\n\n.p-badge-sm {\n    @apply text-[0.625rem] min-w-5 h-5\n}\n\n.p-badge-lg {\n    @apply text-sm min-w-7 h-7\n}\n\n.p-badge-xl {\n    @apply text-base min-w-8 h-8\n}",
+  "blockui": ".p-blockui {\n    @apply relative\n}\n\n.p-blockui-mask {\n    @apply rounded-md\n}\n\n.p-blockui-mask.p-overlay-mask {\n    @apply absolute\n}\n\n.p-blockui-mask-document.p-overlay-mask {\n    @apply fixed\n}",
+  "breadcrumb": ".p-breadcrumb {\n    @apply bg-surface-0 dark:bg-surface-900 p-4 overflow-x-auto\n}\n\n.p-breadcrumb-list {\n    @apply m-0 p-0 list-none flex items-center flex-nowrap gap-2\n}\n\n.p-breadcrumb-separator {\n    @apply flex items-center text-surface-400 dark:text-surface-500\n}\n\n.p-breadcrumb-separator-icon:dir(rtl) {\n    @apply rotate-180\n}\n\n.p-breadcrumb::-webkit-scrollbar {\n    @apply hidden\n}\n\n.p-breadcrumb-item-link {\n    @apply no-underline flex items-center gap-2 transition-colors duration-200 rounded-md\n        text-surface-500 dark:text-surface-400\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-breadcrumb-item-label {\n    @apply transition-colors duration-200\n}\n\n.p-breadcrumb-item-icon {\n    @apply text-surface-400 dark:text-surface-500 transition-colors duration-200\n}\n\n.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n",
+  "button": "@import './badge';\n\n.p-button {\n    @apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative\n        bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast\n        border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        px-3 py-2 transition-colors duration-200 gap-2 rounded-md\n        disabled:cursor-default\n}\n\n.p-button-icon-right {\n    @apply order-1\n}\n\n.p-button-icon-right:dir(rtl) {\n    @apply order-[-1]\n}\n\n.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {\n    @apply order-1\n}\n\n.p-button-icon-bottom {\n    @apply order-2\n}\n\n.p-button-icon-only {\n    @apply w-10 px-0 gap-0\n}\n\n.p-button-icon-only.p-button-rounded {\n    @apply rounded-full h-10\n}\n\n.p-button-icon-only .p-button-label {\n    @apply invisible w-0\n}\n\n.p-button-sm {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-button-sm .p-button-icon {\n    @apply text-sm\n}\n\n.p-button-lg {\n    @apply text-[1.125rem] px-[0.875rem] py-[0.625rem]\n}\n\n.p-button-lg .p-button-icon {\n    @apply text-[1.125rem]\n}\n\n.p-button-vertical {\n    @apply flex-col\n}\n\n.p-button-label {\n    @apply font-medium\n}\n\n.p-button-fluid {\n    @apply w-full\n}\n\n.p-button-fluid.p-button-icon-only {\n    @apply w-10\n}\n\n.p-button .p-badge {\n    @apply min-w-4 h-4 leading-4\n}\n\n.p-button-raised {\n    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]\n}\n\n.p-button-rounded {\n    @apply rounded-[2rem]\n}\n\n.p-button-secondary {\n    @apply bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300\n        border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300\n        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800\n        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600\n        dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600\n        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300\n}\n\n.p-button-success {\n    @apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700\n        border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200\n        dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200\n        dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-green-500 dark:focus-visible:outline-green-400\n}\n\n.p-button-info {\n    @apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700\n        border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200\n        dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200\n        dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400\n}\n\n.p-button-warn {\n    @apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700\n        border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200\n        dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200\n        dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400\n}\n\n.p-button-help {\n    @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700\n        border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200\n        dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200\n        dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400\n}\n\n.p-button-danger {\n    @apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700\n        border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200\n        dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200\n        dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-red-500 dark:focus-visible:outline-red-400\n}\n\n.p-button-contrast {\n    @apply bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800\n        border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200\n        dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300\n        dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0\n}\n\n.p-button-outlined {\n    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100\n        border-primary-200 enabled:hover:border-primary-200 enabled:active:border-primary-200\n        text-primary enabled:hover:text-primary enabled:active:text-primary\n        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15\n        dark:border-primary-700 dark:enabled:hover:border-primary-700 dark:enabled:active:border-primary-700\n        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary\n}\n\n.p-button-outlined.p-button-secondary {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200\n        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500\n        dark:bg-transparent dark:enabled:hover:bg-white/5 dark:enabled:active:bg-white/15\n        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700\n        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400\n}\n\n.p-button-outlined.p-button-success {\n    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100\n        border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200\n        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500\n        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15\n        dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700\n        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400\n}\n\n.p-button-outlined.p-button-info {\n    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100\n        border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200\n        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500\n        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15\n        dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700\n        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400\n}\n\n.p-button-outlined.p-button-warn {\n    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100\n        border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200\n        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500\n        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15\n        dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700\n        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400\n}\n\n.p-button-outlined.p-button-help {\n    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100\n        border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200\n        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500\n        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15\n        dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700\n        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400\n}\n\n.p-button-outlined.p-button-danger {\n    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100\n        border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200\n        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500\n        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15\n        dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700\n        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400\n}\n\n.p-button-outlined.p-button-contrast {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-surface-700 enabled:hover:border-surface-700 enabled:active:border-surface-700\n        text-surface-950 enabled:hover:text-surface-950 enabled:active:text-surface-950\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-surface-500 dark:enabled:hover:border-surface-500 dark:enabled:active:border-surface-500\n        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0\n}\n\n.p-button-outlined.p-button-plain {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200\n        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-surface-600 dark:enabled:hover:border-surface-600 dark:enabled:active:border-surface-600\n        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0\n}\n\n.p-button-text {\n    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-primary enabled:hover:text-primary enabled:active:text-primary\n        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary\n}\n\n.p-button-text.p-button-secondary {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400\n}\n\n.p-button-text.p-button-success {\n    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500\n        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400\n}\n\n.p-button-text.p-button-info {\n    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500\n        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400\n}\n\n.p-button-text.p-button-warn {\n    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500\n        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400\n}\n\n.p-button-text.p-button-help {\n    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500\n        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400\n}\n\n.p-button-text.p-button-danger {\n    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500\n        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400\n}\n\n.p-button-text.p-button-contrast {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500\n        dark:bg-transparent dark:enabled:hover:bg-surface-400/5 dark:enabled:active:bg-surface-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400\n}\n\n.p-button-text.p-button-plain {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0\n}\n\n.p-button-link {\n    @apply bg-transparent enabled:hover:bg-transparent enabled:active:bg-transparent\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-primary enabled:hover:text-primary enabled:active:text-primary\n}\n\n.p-button-link:not(:disabled):hover .p-button-label {\n    @apply underline\n}\n",
+  "buttongroup": ".p-buttongroup .p-button {\n    @apply m-0 focus-visible:relative focus-visible:z-10\n}\n\n.p-buttongroup .p-button:not(:last-child) {\n    @apply border-r-0\n}\n\n.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) {\n    @apply rounded-none\n}\n\n.p-buttongroup .p-button:first-of-type:not(:only-of-type) {\n    @apply rounded-e-none\n}\n\n.p-buttongroup .p-button:last-of-type:not(:only-of-type) {\n    @apply rounded-s-none\n}\n",
+  "card": ".p-card {\n    @apply flex flex-col rounded-xl\n        bg-surface-0 dark:bg-surface-900 \n        text-surface-700 dark:text-surface-0\n        shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]\n}\n\n.p-card-caption {\n    @apply flex flex-col gap-2\n}\n\n.p-card-body {\n    @apply p-5 flex flex-col gap-2\n}\n\n.p-card-title {\n    @apply font-medium text-xl\n}\n\n.p-card-subtitle {\n    @apply text-surface-500 dark:text-surface-400\n}",
+  "carousel": "@import './button';\n\n.p-carousel {\n    @apply flex flex-col\n}\n\n.p-carousel-content-container {\n    @apply flex flex-col overflow-auto\n}\n\n.p-carousel-content {\n    @apply flex flex-row gap-1\n}\n\n.p-carousel-content:dir(rtl) {\n    @apply flex-row-reverse\n}\n\n.p-carousel-viewport {\n    @apply overflow-hidden w-full\n}\n\n.p-carousel-item-list {\n    @apply flex flex-row\n}\n\n.p-carousel-prev-button,\n.p-carousel-next-button {\n    @apply self-center flex-shrink-0\n}\n\n.p-carousel-indicator-list {\n    @apply flex flex-row justify-center flex-wrap p-4 gap-2 m-0 list-none\n}\n\n.p-carousel-indicator-list:dir(rtl) {\n    @apply rtl:flex-row-reverse\n}\n\n.p-carousel-indicator-button {\n    @apply flex items-center justify-center w-8 h-2 border-none rounded-md p-0 m-0 select-none cursor-pointer transition-colors duration-200\n        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-carousel-indicator-active .p-carousel-indicator-button {\n    @apply bg-primary\n}\n\n.p-carousel-vertical .p-carousel-content {\n    @apply flex-col\n}\n\n.p-carousel-vertical .p-carousel-item-list {\n    @apply flex-col h-full\n}\n\n.p-items-hidden .p-carousel-item {\n    @apply invisible\n}\n\n.p-items-hidden .p-carousel-item.p-carousel-item-active {\n    @apply visible\n}\n",
+  "cascadeselect": ".p-cascadeselect {\n    @apply inline-flex cursor-pointer relative select-none rounded-md\n        bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-cascadeselect:not(.p-disabled):hover {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-cascadeselect:not(.p-disabled).p-focus {\n    @apply border-primary\n}\n\n.p-cascadeselect.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-cascadeselect.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-cascadeselect.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-cascadeselect-dropdown {\n    @apply flex items-center justify-center shrink-0 bg-transparent\n        text-surface-500 dark:text-surface-400 w-10 rounded-e-md\n}\n\n.p-cascadeselect-clear-icon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10\n}\n\n.p-cascadeselect-label {\n    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]\n        py-2 px-3 overflow-ellipsis\n        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none\n}\n\n.p-cascadeselect-label.p-placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-cascadeselect.p-disabled .p-cascadeselect-label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-cascadeselect-label-empty {\n    @apply overflow-hidden opacity-0\n}\n\n.p-cascadeselect-fluid {\n    @apply flex\n}\n\n.p-cascadeselect-fluid .p-cascadeselect-label {\n    @apply w-[1%]\n}\n\n.p-cascadeselect-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-cascadeselect .p-cascadeselect-overlay {\n    @apply min-w-full\n}\n\n.p-cascadeselect-option-list {\n    @apply hidden min-w-full absolute z-10\n}\n\n.p-cascadeselect-list {\n    @apply min-w-full m-0 list-none p-1 flex flex-col gap-[2px]\n}\n\n.p-cascadeselect-option {\n    @apply cursor-pointer font-normal whitespace-nowrap\n        text-surface-700 dark:text-surface-0 bg-transparent border-none\n        transition-colors duration-200 rounded-sm\n}\n\n.p-cascadeselect-option-active {\n    @apply overflow-visible\n}\n\n.p-cascadeselect-option-active > .p-cascadeselect-option-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-cascadeselect-option-selected .p-cascadeselect-option-content {\n    @apply bg-highlight\n}\n\n.p-cascadeselect-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-cascadeselect-option-active > .p-cascadeselect-option-list {\n    @apply block start-full top-0\n}\n\n.p-cascadeselect-option-content {\n    @apply flex items-center justify-between overflow-hidden relative px-3 py-2\n}\n\n.p-cascadeselect-group-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem] text-surface-400 dark:text-surface-500\n}\n\n.p-cascadeselect-group-icon:dir(rtl) {\n    @apply rotate-180\n}\n\n\n.p-cascadeselect-mobile-active .p-cascadeselect-option-content {\n    @apply rounded-sm\n}\n\n.p-cascadeselect-mobile-active-active .p-cascadeselect-list {\n    @apply flex flex-col top-full start-0 z-10\n}\n\n.p-cascadeselect-mobile-active .p-cascadeselect-list > .p-cascadeselect-option > .p-cascadeselect-option-content .p-cascadeselect-group-icon {\n    @apply ms-auto transition-transform duration-200\n}\n\n.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {\n    @apply -rotate-90\n}\n\n.p-cascadeselect-mobile-active .p-cascadeselect-option-list {\n    @apply static shadow-none border-none ps-4\n}\n\n.p-cascadeselect-sm .p-cascadeselect-label {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-cascadeselect-lg .p-cascadeselect-label {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n",
+  "checkbox": ".p-checkbox {\n    @apply relative inline-flex select-none w-5 h-5 align-bottom\n}\n\n.p-checkbox-input {\n    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10\n        border border-transparent rounded-sm\n}\n\n.p-checkbox-box {\n    @apply flex justify-center items-center rounded-sm w-5 h-5\n        border border-surface-300 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-950\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n}\n\n.p-checkbox-icon {\n    @apply text-surface-700 dark:text-surface-0\n        text-sm w-[0.875rem] h-[0.875rem]\n        transition-colors duration-200\n}\n\n.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-checkbox-checked .p-checkbox-box {\n    @apply border-primary bg-primary\n}\n\n.p-checkbox-checked .p-checkbox-icon {\n    @apply text-primary-contrast\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {\n    @apply bg-primary-emphasis border-primary-emphasis\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {\n    @apply text-primary-contrast\n}\n\n.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-checkbox.p-invalid > .p-checkbox-box {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-checkbox.p-variant-filled .p-checkbox-box {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-checkbox.p-disabled {\n    @apply opacity-100\n}\n\n.p-checkbox.p-disabled .p-checkbox-box {\n    @apply bg-surface-200 dark:bg-surface-400 border-surface-300 dark:border-surface-700\n}\n\n.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {\n    @apply text-surface-700 dark:text-surface-900\n}\n\n.p-checkbox-sm,\n.p-checkbox-sm .p-checkbox-box {\n    @apply w-4 h-4\n}\n\n.p-checkbox-sm .p-checkbox-icon {\n    @apply w-3 h-3\n}\n\n.p-checkbox-lg,\n.p-checkbox-lg .p-checkbox-box {\n    @apply w-6 h-6\n}\n\n.p-checkbox-lg .p-checkbox-icon {\n    @apply w-4 h-4\n}\n",
+  "chip": ".p-chip {\n    @apply inline-flex items-center rounded-2xl gap-2 px-3 py-2\n        bg-surface-100 dark:bg-surface-800\n        text-surface-800 dark:text-surface-0\n}\n\n.p-chip-icon {\n    @apply text-surface-800 dark:bg-surface-0 text-base w-4 h-4\n}\n\n.p-chip-image {\n    @apply rounded-full w-8 h-8 -ms-2\n}\n\n.p-chip:has(.p-chip-remove-icon) {\n    @apply pe-2\n}\n\n.p-chip:has(.p-chip-image) {\n    @apply pt-1 pb-1\n}\n\n.p-chip-remove-icon {\n    @apply cursor-pointer text-base w-4 h-4 rounded-full\n        text-surface-800 dark:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n",
+  "colorpicker": ".p-colorpicker {\n    @apply inline-block relative;\n}\n\n.p-colorpicker-dragging {\n    @apply cursor-pointer\n}\n\n.p-colorpicker-preview {\n    @apply w-6 h-6 p-0 border-none rounded-md transition-colors duration-200 cursor-pointer disabled:cursor-auto\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-colorpicker-panel {\n    @apply bg-surface-800 dark:bg-surface-900\n        border border-surface-900 dark:border-surface-700\n        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n        w-[193px] h-[166px] absolute top-0 start-0\n}\n\n.p-colorpicker-panel-inline {\n    @apply static shadow-none\n}\n\n.p-colorpicker-content {\n    @apply relative;\n}\n\n.p-colorpicker-color-selector {\n    @apply w-[150px] h-[150px] top-[8px] start-[8px] absolute\n}\n\n.p-colorpicker-color-background {\n    @apply w-full h-full bg-[linear-gradient(to_top,#000_0%,rgba(0,0,0,0)_100%),linear-gradient(to_right,#fff_0%,rgba(255,255,255,0)_100%)];\n}\n\n.p-colorpicker-color-handle {\n    @apply absolute top-0 start-[150px] rounded-full w-[10px] h-[10px] border border-surface-0 -mt-[5px] me-0 mb-0 -ms-[5px] cursor-pointer opacity-85\n}\n\n.p-colorpicker-hue {\n    @apply w-[17px] h-[150px] top-[8px] start-[167px] absolute opacity-85 bg-[linear-gradient(0deg,red_0,#ff0_17%,#0f0_33%,#0ff_50%,#00f_67%,#f0f_83%,red)];\n}\n\n.p-colorpicker-hue-handle {\n    @apply absolute top-[150px] start-0 w-[21px] -ms-[2px] -mt-[5px] h-[10px] border-2 opacity-85 border-surface-0 cursor-pointer\n}\n",
+  "common": ".p-connected-overlay-enter-from {\n    @apply opacity-0 scale-y-75\n}\n\n.p-connected-overlay-leave-to {\n    @apply opacity-0\n}\n\n.p-connected-overlay-enter-active {\n    @apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)]\n}\n\n.p-connected-overlay-leave-active {\n    @apply transition-opacity duration-100 ease-linear\n}\n\n.p-toggleable-content-enter-from,\n.p-toggleable-content-leave-to {\n    @apply max-h-0\n}\n\n.p-toggleable-content-enter-to,\n.p-toggleable-content-leave-from {\n    @apply max-h-[1000px]\n}\n\n.p-toggleable-content-leave-active {\n    @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)];\n}\n\n.p-toggleable-content-enter-active {\n    @apply overflow-hidden transition-[max-height] duration-1000 ease-in-out\n}\n\n.p-disabled,\n.p-disabled * {\n    @apply cursor-default pointer-events-none select-none\n}\n\n.p-disabled,\n.p-component:disabled {\n    @apply opacity-60\n}\n\n.pi {\n    @apply text-base\n}\n\n.p-icon {\n    @apply w-4 h-4\n}\n\n.p-overlay-mask {\n    @apply bg-black/50 text-surface-200 transition-colors duration-150 fixed top-0 start-0 w-full h-full\n}\n\n.p-overlay-mask-enter {\n    animation: p-overlay-mask-enter-animation 150ms forwards;\n}\n\n.p-overlay-mask-leave {\n    animation: p-overlay-mask-leave-animation 150ms forwards;\n}\n\n@keyframes p-overlay-mask-enter-animation {\n    from {\n        background: transparent;\n    }\n    to {\n        background: rgba(0,0,0,0.5);\n    }\n}\n\n@keyframes p-overlay-mask-leave-animation {\n    from {\n        background: rgba(0,0,0,0.5);\n    }\n    to {\n        background: transparent;\n    }\n}\n",
+  "confirmdialog": "@import './dialog';\n@import './button';\n\n.p-confirmdialog .p-dialog-content {\n    @apply flex items-center gap-4\n}\n\n.p-confirmdialog-icon {\n    @apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8\n}",
+  "confirmpopup": "@import './button';\n\n.p-confirmpopup {\n    @apply absolute mt-[10px] top-0 left-0\n        border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none\n        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700\n        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none\n        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900\n}\n\n.p-confirmpopup-content {\n    @apply flex items-center p-3 gap-4\n}\n\n.p-confirmpopup-icon {\n    @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0\n}\n\n.p-confirmpopup-footer {\n    @apply flex justify-end gap-2 pt-0 px-3 pb-3\n}\n\n.p-confirmpopup-footer button {\n    @apply w-auto\n}\n\n.p-confirmpopup-footer button:last-child {\n    @apply m-0\n}\n\n.p-confirmpopup-flipped {\n    @apply -mt-[10px] mb-[10px]\n}\n\n.p-confirmpopup-enter-from {\n    @apply opacity-0 scale-y-75\n}\n\n.p-confirmpopup-leave-to {\n    @apply opacity-0\n}\n\n.p-confirmpopup-enter-active {\n    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]\n}\n\n.p-confirmpopup-leave-active {\n    @apply transition-opacity duration-100 ease-linear\n}\n\n.p-confirmpopup-flipped:after,\n.p-confirmpopup-flipped:before {\n    @apply bottom-auto top-full\n}\n\n.p-confirmpopup-flipped:after {\n    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900\n}\n\n.p-confirmpopup-flipped:before {\n    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700\n}\n",
+  "contextmenu": ".p-contextmenu {\n    @apply bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        rounded-md min-w-52 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-contextmenu-root-list,\n.p-contextmenu-submenu {\n    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]\n}\n\n.p-contextmenu-submenu {\n    @apply absolute min-w-full z-10 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-contextmenu-item {\n    @apply relative\n}\n\n.p-contextmenu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-contextmenu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-contextmenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-contextmenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-contextmenu-enter-from,\n.p-contextmenu-leave-active {\n    @apply opacity-0\n}\n\n.p-contextmenu-enter-active {\n    @apply transition-opacity duration-[250ms]\n}\n\n.p-contextmenu-mobile .p-contextmenu-submenu {\n    @apply static shadow-none border-none ps-4 pe-0\n}\n\n.p-contextmenu-mobile .p-contextmenu-submenu-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    @apply -rotate-90\n}\n",
+  "datatable": "@import './paginator';\n\n.p-datatable {\n    @apply relative\n}\n\n.p-datatable-table {\n    @apply border-spacing-0 w-full\n}\n\n.p-datatable-scrollable > .p-datatable-table-container {\n    @apply relative\n}\n\n.p-datatable-scrollable-table > .p-datatable-thead {\n    @apply top-0 z-10\n}\n\n.p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n    @apply sticky z-10\n}\n\n.p-datatable-scrollable-table > .p-datatable-tfoot {\n    @apply bottom-0 z-10\n}\n\n.p-datatable-scrollable .p-datatable-frozen-column {\n    @apply sticky bg-surface-0 dark:bg-surface-900\n}\n\n.p-datatable-scrollable th.p-datatable-frozen-column {\n    @apply z-10\n}\n\n.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,\n.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {\n    @apply bg-surface-0 dark:bg-surface-900\n}\n\n.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,\n.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {\n    @apply bg-surface-0 dark:bg-surface-900\n}\n\n.p-datatable-flex-scrollable {\n    @apply flex flex-col h-full\n}\n\n.p-datatable-flex-scrollable > .p-datatable-table-container {\n    @apply flex flex-col flex-1 h-full\n}\n\n.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {\n    @apply sticky z-10\n}\n\n.p-datatable-resizable-table > .p-datatable-thead > tr > th,\n.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n.p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n    @apply overflow-hidden whitespace-nowrap\n}\n\n.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {\n    @apply bg-clip-padding relative\n}\n\n.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {\n    @apply hidden\n}\n\n.p-datatable-column-resizer {\n    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent\n}\n\n.p-datatable-column-header-content {\n    @apply flex items-center gap-2\n}\n\n.p-datatable-column-resize-indicator {\n    @apply w-px absolute z-10 hidden bg-primary\n}\n\n.p-datatable-row-reorder-indicator-up,\n.p-datatable-row-reorder-indicator-down {\n    @apply absolute hidden\n}\n\n.p-datatable-reorderable-column,\n.p-datatable-reorderable-row-handle {\n    @apply cursor-move\n}\n\n.p-datatable-mask {\n    @apply absolute flex items-center justify-center z-20\n}\n\n.p-datatable-inline-filter {\n    @apply flex items-center w-full gap-2\n}\n\n.p-datatable-inline-filter .p-datatable-filter-element-container {\n    @apply flex-auto w-[1%]\n}\n\n.p-datatable-filter-overlay {\n    @apply bg-surface-0 dark:bg-surface-900 rounded-md min-w-52\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-datatable-filter-constraint-list {\n    @apply m-0 list-none flex flex-col p-1 gap-[2px]\n}\n\n.p-datatable-filter-constraint {\n    @apply px-3 py-2 rounded-sm cursor-pointer transition-colors duration-200 text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-filter-constraint-selected {\n    @apply bg-highlight\n}\n\n.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover\n{\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-datatable-filter-constraint:focus-visible {\n    @apply outline-none bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-datatable-filter-constraint-selected:focus-visible {\n    @apply bg-highlight-emphasis\n}\n\n.p-datatable-filter-constraint-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-datatable-popover-filter {\n    @apply inline-flex ms-auto\n}\n\n.p-datatable-filter-overlay-popover {\n    @apply flex flex-col gap-2\n        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-datatable-filter-operator-dropdown {\n    @apply w-full\n}\n\n.p-datatable-filter-rule-list,\n.p-datatable-filter-rule {\n    @apply flex flex-col gap-2\n}\n\n.p-datatable-filter-rule {\n    @apply border-b border-surface-200 dark:border-surface-700 last:border-b-0 pb-2 last:pb-0\n}\n\n.p-datatable-filter-add-rule-button {\n    @apply w-full\n}\n\n.p-datatable-filter-remove-rule-button {\n    @apply w-full\n}\n\n.p-datatable-filter-buttonbar {\n    @apply p-0 flex items-center justify-between\n}\n\n.p-datatable-virtualscroller-spacer {\n    @apply flex\n}\n\n.p-datatable .p-virtualscroller .p-virtualscroller-loading {\n    @apply !transform-none min-h-0 sticky top-0 start-0\n}\n\n.p-datatable-paginator-top {\n    @apply border-b border-surface-200 dark:border-surface-700\n}\n\n.p-datatable-paginator-bottom {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-datatable-header {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-footer {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-header-cell {\n    @apply py-3 px-4 font-normal text-start transition-colors duration-200\n        border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-column-title {\n    @apply font-semibold\n}\n\n.p-datatable-tbody > tr {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200\n}\n\n.p-datatable-tbody > tr > td {\n    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800\n}\n\n.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected {\n    @apply bg-highlight\n}\n\n.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {\n    @apply border-b-primary-100 dark:border-b-primary-900\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected > td {\n    @apply border-b-primary-100 dark:border-b-primary-900\n}\n\n.p-datatable-tbody > tr:focus-visible,\n.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {\n    @apply outline outline-1 -outline-offset-1 outline-primary\n}\n\n.p-datatable-tfoot > tr > td {\n    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-column-footer {\n    @apply font-semibold\n}\n\n.p-datatable-sortable-column {\n    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary\n}\n\n.p-datatable-column-title,\n.p-datatable-sort-icon,\n.p-datatable-sort-badge {\n    @apply align-middle\n}\n\n.p-datatable-sort-icon {\n    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200\n}\n\n.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-datatable-column-sorted {\n    @apply bg-highlight\n}\n\n.p-datatable-column-sorted .p-datatable-sort-icon {\n    @apply bg-highlight\n}\n\n.p-datatable-hoverable .p-datatable-selectable-row {\n    @apply cursor-pointer\n}\n\n.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {\n    @apply shadow-[inset_0_2px_0_0_theme(colors.primary)]\n}\n\n.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {\n    @apply shadow-[inset_0_-2px_0_0_theme(colors.primary)]\n}\n\n.p-datatable-loading-icon {\n    @apply text-[2rem] w-8 h-8\n}\n\n.p-datatable-gridlines .p-datatable-header {\n    @apply border-t border-x\n}\n\n.p-datatable-gridlines .p-datatable-footer {\n    @apply border-b border-x\n}\n\n.p-datatable-gridlines .p-datatable-paginator-top {\n    @apply border-t border-x\n}\n\n.p-datatable-gridlines .p-datatable-paginator-bottom {\n    @apply border-b border-x\n}\n\n.p-datatable-gridlines .p-datatable-thead > tr > th {\n    @apply border-t border-x last:border\n}\n\n.p-datatable-gridlines .p-datatable-tbody > tr > td {\n    @apply border-t border-s last:border-r\n}\n\n.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {\n    @apply border-y border-s last:border\n}\n\n.p-datatable-gridlines .p-datatable-tfoot > tr > td {\n    @apply border-y border-s last:border\n}\n\n.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {\n    @apply border-b border-s last:border-r\n}\n\n.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {\n    @apply border-b border-s last:border-r\n}\n\n.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {\n    @apply border-s last:border-r\n}\n\n.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {\n    @apply bg-surface-50 dark:bg-surface-950\n}\n\n.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected {\n    @apply bg-highlight\n}\n\n.p-datatable.p-datatable-sm .p-datatable-header {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-sm .p-datatable-footer {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-lg .p-datatable-header {\n    @apply py-4 px-5\n}\n\n.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {\n    @apply py-4 px-5\n}\n\n.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td {\n    @apply py-4 px-5\n}\n\n.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td {\n    @apply py-4 px-5\n}\n\n.p-datatable.p-datatable-lg .p-datatable-footer {\n    @apply py-4 px-5\n}\n\n.p-datatable-row-toggle-button {\n    @apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none\n        transition-colors duration-200 rounded-full border-none bg-transparent\n        text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700\n        dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary\n}\n\n.p-datatable-row-toggle-icon:dir(rtl) {\n    @apply rotate-180\n}\n",
+  "dataview": "@import './paginator';\n\n.p-dataview {\n    @apply border-none\n}\n\n.p-dataview-header {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 \n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-dataview-content {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-dataview-footer {\n    @apply py-3 px-4 border-t border-surface-200 dark:border-surface-700 \n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-dataview-paginator-top {\n    @apply border-b border-surface-200 dark:border-surface-700\n}\n\n.p-dataview-paginator-bottom {\n    @apply border-t border-surface-200 dark:border-surface-700\n}",
+  "datepicker": "@import './button';\n@import './inputtext';\n\n.p-datepicker {\n    @apply inline-flex max-w-full\n}\n\n.p-datepicker-input {\n    @apply flex-auto w-[1%]\n}\n\n.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {\n    @apply rounded-e-none\n}\n\n.p-datepicker-dropdown {\n    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none\n        w-10 rounded-e-md border border-s-0 border-surface-300 dark:border-surface-700\n        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300\n        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800\n        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600\n        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-datepicker:has(.p-datepicker-input-icon-container) {\n    @apply relative\n}\n\n.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {\n    @apply pe-10\n}\n\n.p-datepicker-input-icon-container {\n    @apply cursor-pointer absolute top-1/2 end-3 -mt-2 text-surface-400\n}\n\n.p-datepicker-fluid {\n    @apply flex\n}\n\n.p-datepicker-fluid .p-datepicker-input {\n    @apply w-[1%]\n}\n\n.p-datepicker .p-datepicker-panel {\n    @apply min-w-full\n}\n\n.p-datepicker-panel {\n    @apply w-auto p-3 rounded-md\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-datepicker-panel-inline {\n    @apply inline-block overflow-x-auto shadow-none\n}\n\n.p-datepicker-header {\n    @apply flex items-center justify-between pt-0 px-0 pb-2 font-medium gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border-b border-surface-200 dark:border-surface-700\n}\n\n.p-datepicker-next-button:dir(rtl) {\n    @apply order-[-1]\n}\n.p-datepicker-prev-button:dir(rtl) {\n    @apply order-1\n}\n\n.p-datepicker-title {\n    @apply flex items-center justify-between gap-2 font-medium\n}\n\n.p-datepicker-select-year,\n.p-datepicker-select-month {\n    @apply border-none bg-transparent m-0 cursor-pointer font-medium transition-colors duration-200\n        py-1 px-2 rounded-md text-surface-700 dark:text-surface-0\n        enabled:hover:bg-surface-100 enabled:hover:text-surface-800\n        dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-datepicker-calendar-container {\n    @apply flex\n}\n\n.p-datepicker-calendar-container .p-datepicker-calendar {\n    @apply flex-auto border-s border-surface-200 dark:border-surface-700 gap-3\n        first:ps-0 first:border-s-0 last:pe-0\n}\n\n.p-datepicker-day-view {\n    @apply w-full border-collapse text-base mt-2 mx-0 mb-0\n}\n\n.p-datepicker-weekday-cell {\n    @apply p-1\n}\n\n.p-datepicker-weekday {\n    @apply font-medium text-surface-700 dark:text-surface-0\n}\n\n.p-datepicker-day-cell {\n    @apply p-1\n}\n\n.p-datepicker-day {\n    @apply flex items-center justify-center cursor-pointer my-0 mx-auto overflow-hidden relative w-8 h-8\n        rounded-full p-1 transition-colors duration-200 border border-transparent text-surface-700 dark:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datepicker-day-selected {\n    @apply bg-primary text-primary-contrast\n}\n\n.p-datepicker-day-selected-range {\n    @apply bg-highlight\n}\n\n.p-datepicker-today > .p-datepicker-day {\n    @apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0\n}\n\n.p-datepicker-today > .p-datepicker-day-selected {\n    @apply bg-primary text-primary-contrast\n}\n\n.p-datepicker-today > .p-datepicker-day-selected-range {\n    @apply bg-highlight\n}\n\n.p-datepicker-weeknumber {\n    @apply text-center\n}\n\n.p-datepicker-month-view {\n    @apply mt-2 mb-0 mx-0\n}\n\n.p-datepicker-month {\n    @apply w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative\n        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datepicker-month-selected {\n    @apply bg-primary text-primary-contrast\n}\n\n.p-datepicker-year-view {\n    @apply mt-2 mb-0 mx-0\n}\n\n.p-datepicker-year {\n    @apply w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative\n        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datepicker-year-selected {\n    @apply bg-primary text-primary-contrast\n}\n\n.p-datepicker-buttonbar {\n    @apply flex justify-between items-center pt-2 pb-0 px-0 border-t border-surface-200 dark:border-surface-700\n}\n\n.p-datepicker-buttonbar .p-button {\n    @apply w-auto\n}\n\n.p-datepicker-time-picker {\n    @apply flex items-center justify-center border-t border-surface-200 dark:border-surface-700 p-0 gap-2\n}\n\n.p-datepicker-calendar-container + .p-datepicker-time-picker {\n    @apply pt-2 pb-0 px-0\n}\n\n.p-datepicker-time-picker > div {\n    @apply flex items-center flex-col gap-1\n}\n\n.p-datepicker-time-picker span {\n    @apply text-base\n}\n\n.p-datepicker-timeonly .p-datepicker-time-picker {\n    @apply border-t-0\n}\n",
+  "dialog": "@import './button';\n\n.p-dialog {\n    @apply max-h-[90%] scale-100 rounded-xl\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]\n}\n\n.p-dialog-content {\n    @apply overflow-y-auto pt-0 px-5 pb-5\n}\n\n.p-dialog-header {\n    @apply flex items-center justify-between shrink-0 p-5\n}\n\n.p-dialog-title {\n    @apply font-semibold text-xl\n}\n\n.p-dialog-footer {\n    @apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2\n}\n\n.p-dialog-header-actions {\n    @apply flex items-center gap-2\n}\n\n.p-dialog-enter-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]\n}\n\n.p-dialog-leave-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]\n}\n\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    @apply opacity-0 scale-75\n}\n\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n    @apply m-3 [transform:translate3d(0,0,0)]\n}\n\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n    @apply transition-all duration-300 ease-out\n}\n\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    @apply [transform:translate3d(0,-100%,0)]\n}\n\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    @apply [transform:translate3d(0,100%,0)]\n}\n\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n    @apply [transform:translate3d(-100%,0,0)]\n}\n\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n    @apply [transform:translate3d(100%,0,0)]\n}\n\n.p-dialog-left:dir(rtl) .p-dialog-enter-from,\n.p-dialog-left:dir(rtl) .p-dialog-leave-to,\n.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,\n.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,\n.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,\n.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to {\n    @apply [transform:translate3d(100%,0,0)]\n}\n.p-dialog-right:dir(rtl) .p-dialog-enter-from,\n.p-dialog-right:dir(rtl) .p-dialog-leave-to,\n.p-dialog-topright:dir(rtl) .p-dialog-enter-from,\n.p-dialog-topright:dir(rtl) .p-dialog-leave-to,\n.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,\n.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to {\n    @apply [transform:translate3d(-100%,0,0)]\n}\n\n.p-dialog-maximized {\n    @apply !w-screen !h-screen top-0 start-0 max-h-full rounded-none\n}\n\n.p-dialog-maximized .p-dialog-content {\n    @apply flex-grow\n}\n",
+  "divider": ".p-divider-horizontal {\n    @apply flex w-full relative items-center my-4 mx-0 py-0 px-4\n        before:absolute before:block before:top-1/2 before:start-0 before:w-full\n        before:border-t before:border-surface-200 dark:before:border-surface-700\n}\n\n.p-divider-horizontal .p-divider-content {\n    @apply py-0 px-2\n}\n\n.p-divider-vertical {\n    @apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0\n        before:absolute before:block before:top-0 before:start-1/2 before:h-full\n        before:border-s before:border-surface-200 before:dark:border-surface-700\n}\n\n.p-divider.p-divider-vertical .p-divider-content {\n    @apply py-2 px-0\n}\n\n.p-divider-content {\n    @apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-divider-solid.p-divider-horizontal:before {\n    @apply border-solid\n}\n\n.p-divider-solid.p-divider-vertical:before {\n    @apply border-solid\n}\n\n.p-divider-dashed.p-divider-horizontal:before {\n    @apply border-dashed\n}\n\n.p-divider-dashed.p-divider-vertical:before {\n    @apply border-dashed\n}\n\n.p-divider-dotted.p-divider-horizontal:before {\n    @apply border-dotted\n}\n\n.p-divider-dotted.p-divider-vertical:before {\n    @apply border-dotted\n}\n\n.p-divider-left:dir(rtl),\n.p-divider-right:dir(rtl) {\n    @apply flex-row-reverse\n}\n",
+  "dock": ".p-dock {\n    @apply absolute z-10 flex justify-center items-center pointer-events-none\n}\n\n.p-dock-list-container {\n    @apply flex pointer-events-auto bg-white/10 border border-white/10 p-2 rounded-xl\n}\n\n.p-dock-list {\n    @apply m-0 p-0 list-none flex items-center justify-center outline-none\n}\n\n.p-dock-item {\n    @apply transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform p-2 rounded-md\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-dock-item-link {\n    @apply flex flex-col items-center justify-center relative cursor-default w-12 h-12\n}\n\n.p-dock-top {\n    @apply start-0 top-0 w-full\n}\n\n.p-dock-top .p-dock-item {\n    @apply origin-[center_top]\n}\n\n.p-dock-bottom {\n    @apply start-0 bottom-0 w-full\n}\n\n.p-dock-bottom .p-dock-item {\n    @apply origin-[center_bottom]\n}\n\n.p-dock-right {\n    @apply end-0 top-0 h-full\n}\n\n.p-dock-right .p-dock-item {\n    @apply origin-[center_right]\n}\n\n.p-dock-right .p-dock-list {\n    @apply flex-col\n}\n\n.p-dock-left {\n    @apply start-0 top-0 h-full\n}\n\n.p-dock-left .p-dock-item {\n    @apply origin-[center_left]\n}\n\n.p-dock-left .p-dock-list {\n    @apply flex-col\n}\n\n.p-dock-mobile.p-dock-top .p-dock-list-container,\n.p-dock-mobile.p-dock-bottom .p-dock-list-container {\n    @apply overflow-x-auto w-full\n}\n\n.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,\n.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {\n    @apply mt-0 mx-auto\n}\n\n.p-dock-mobile.p-dock-left .p-dock-list-container,\n.p-dock-mobile.p-dock-right .p-dock-list-container {\n    @apply overflow-y-auto h-full\n}\n\n.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,\n.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {\n    @apply mt-auto mx-0\n}\n\n.p-dock-mobile .p-dock-list .p-dock-item {\n    @apply transform-none m-0\n}\n",
+  "drawer": "@import './button';\n\n.p-drawer {\n    @apply flex flex-col pointer-events-auto relative transition-transform duration-300\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]\n}\n\n.p-drawer {\n    @apply [transform:translate3d(0,0,0)]\n}\n\n.p-drawer-content {\n    @apply overflow-y-auto flex-grow pt-0 pb-5 px-5\n}\n\n.p-drawer-header {\n    @apply flex items-center justify-between flex-shrink-0 p-5\n}\n\n.p-drawer-footer {\n    @apply p-5\n}\n\n.p-drawer-title {\n    @apply font-semibold text-2xl\n}\n\n.p-drawer-full .p-drawer {\n    @apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0\n}\n\n.p-drawer-left .p-drawer-enter-from,\n.p-drawer-left .p-drawer-leave-to {\n    @apply -translate-x-full\n}\n\n.p-drawer-right .p-drawer-enter-from,\n.p-drawer-right .p-drawer-leave-to {\n    @apply translate-x-full\n}\n\n.p-drawer-top .p-drawer-enter-from,\n.p-drawer-top .p-drawer-leave-to {\n    @apply -translate-y-full\n}\n\n.p-drawer-bottom .p-drawer-enter-from,\n.p-drawer-bottom .p-drawer-leave-to {\n    @apply translate-y-full\n}\n\n.p-drawer-full .p-drawer-enter-from,\n.p-drawer-full .p-drawer-leave-to {\n    @apply opacity-0\n}\n\n.p-drawer-full .p-drawer-enter-active,\n.p-drawer-full .p-drawer-leave-active {\n    @apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]\n}\n\n.p-drawer-left .p-drawer {\n    @apply w-80 h-full border-r\n}\n\n.p-drawer-right .p-drawer {\n    @apply w-80 h-full border-s\n}\n\n.p-drawer-top .p-drawer {\n    @apply h-40 w-full border-b\n}\n\n.p-drawer-bottom .p-drawer {\n    @apply h-40 w-full border-t\n}\n\n.p-drawer-left .p-drawer-content,\n.p-drawer-right .p-drawer-content,\n.p-drawer-top .p-drawer-content,\n.p-drawer-bottom .p-drawer-content {\n    @apply w-full h-full\n}\n\n.p-drawer-open {\n    @apply flex\n}\n\n.p-overlay-mask:dir(rtl) {\n    @apply flex-row-reverse;\n}\n",
+  "fieldset": ".p-fieldset {\n    @apply border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        px-[1.125rem] pt-0 pb-[1.125rem]\n}\n\n.p-fieldset-legend {\n    @apply border border-transparent rounded-md px-3 py-2\n        transition-colors duration-200\n}\n\n.p-fieldset-toggleable > .p-fieldset-legend {\n    @apply p-0\n}\n\n.p-fieldset-toggle-button {\n    @apply select-none overflow-hidden relative\n        flex items-center justify-center gap-2\n        px-3 py-2\n        border-none rounded-md\n        bg-surface-0 dark:bg-surface-900\n        hover:bg-surface-100 dark:hover:bg-surface-800\n        text-surface-700 dark:text-surface-0\n        hover:text-surface-800 dark:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-fieldset-legend-label {\n    @apply font-semibold;\n}\n\n.p-fieldset-toggle-icon {\n    @apply text-surface-500 dark:text-surface-400\n        transition-colors duration-200\n}\n\n.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-fieldset .p-fieldset-content {\n    @apply p-0\n}",
+  "fileupload": "@import './button';\n@import './message';\n@import './progressbar';\n\n.p-fileupload input[type=\"file\"] {\n    @apply hidden\n}\n\n.p-fileupload-advanced {\n    @apply border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-fileupload-header {\n    @apply flex items-center p-[1.125rem] gap-2 text-surface-700 dark:text-surface-0\n}\n\n.p-fileupload-content {\n    @apply border border-transparent relative transition-colors duration-200 pt-0 px-[1.125rem] pb-[1.125rem]\n}\n\n.p-fileupload-content .p-progressbar {\n    @apply w-full absolute top-0 start-0 h-1\n}\n\n.p-fileupload-file-list {\n    @apply flex flex-col gap-2 mt-[1.125rem]\n}\n\n.p-fileupload-file {\n    @apply flex flex-wrap items-center p-4 border-b border-surface-200 dark:border-surface-700 gap-2 last:border-b-0\n}\n\n.p-fileupload-file-info {\n    @apply flex flex-col gap-2\n}\n\n.p-fileupload-file-thumbnail {\n    @apply flex-shrink-0\n}\n\n.p-fileupload-file-actions {\n    @apply ms-auto\n}\n\n.p-fileupload-highlight {\n    @apply border border-dashed border-primary\n}\n\n.p-fileupload-advanced .p-message {\n    @apply mt-0\n}\n\n.p-fileupload-basic {\n    @apply flex flex-wrap items-center justify-center gap-2\n}\n",
+  "floatlabel": ".p-floatlabel {\n    @apply block relative\n}\n\n.p-floatlabel label {\n    @apply absolute pointer-events-none top-1/2 -translate-y-1/2 transition-all duration-200 ease-out leading-none font-medium\n        start-3 text-surface-500 dark:text-surface-400\n}\n\n.p-floatlabel:has(.p-textarea) label {\n    @apply top-2 translate-y-0\n}\n\n.p-floatlabel:has(.p-inputicon:first-child) label {\n    @apply start-10\n}\n\n.p-floatlabel:has(.p-invalid) label {\n    @apply text-red-400 dark:text-red-300\n}\n\n.p-floatlabel:has(input:focus) label,\n.p-floatlabel:has(input.p-filled) label,\n.p-floatlabel:has(input:-webkit-autofill) label,\n.p-floatlabel:has(textarea:focus) label,\n.p-floatlabel:has(textarea.p-filled) label,\n.p-floatlabel:has(.p-inputwrapper-focus) label,\n.p-floatlabel:has(.p-inputwrapper-filled) label {\n    @apply -top-5 translate-y-0 text-xs font-normal\n}\n\n.p-floatlabel:has(input.p-filled) label,\n.p-floatlabel:has(textarea.p-filled) label,\n.p-floatlabel:has(.p-inputwrapper-filled) label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-floatlabel:has(input:focus) label,\n.p-floatlabel:has(input:-webkit-autofill) label,\n.p-floatlabel:has(textarea:focus) label ,\n.p-floatlabel:has(.p-inputwrapper-focus) label  {\n    @apply text-primary\n}\n\n.p-floatlabel-in .p-inputtext,\n.p-floatlabel-in .p-textarea,\n.p-floatlabel-in .p-select-label,\n.p-floatlabel-in .p-multiselect-label,\n.p-floatlabel-in .p-autocomplete-input-multiple,\n.p-floatlabel-in .p-cascadeselect-label,\n.p-floatlabel-in .p-treeselect-label {\n    @apply pt-6 pb-2\n}\n\n.p-floatlabel-in:has(input:focus) label,\n.p-floatlabel-in:has(input.p-filled) label,\n.p-floatlabel-in:has(input:-webkit-autofill) label,\n.p-floatlabel-in:has(textarea:focus) label,\n.p-floatlabel-in:has(textarea.p-filled) label,\n.p-floatlabel-in:has(.p-inputwrapper-focus) label,\n.p-floatlabel-in:has(.p-inputwrapper-filled) label {\n    @apply top-2\n}\n\n.p-floatlabel-on:has(input:focus) label,\n.p-floatlabel-on:has(input.p-filled) label,\n.p-floatlabel-on:has(input:-webkit-autofill) label,\n.p-floatlabel-on:has(textarea:focus) label,\n.p-floatlabel-on:has(textarea.p-filled) label,\n.p-floatlabel-on:has(.p-inputwrapper-focus) label,\n.p-floatlabel-on:has(.p-inputwrapper-filled) label {\n    @apply top-0 -translate-y-1/2 rounded-sm bg-surface-0 dark:bg-surface-950 py-0 px-[0.125rem]\n}\n",
+  "galleria": ".p-galleria {\n    @apply overflow-hidden border border-surface-200 dark:border-surface-700 rounded-md\n}\n\n.p-galleria-content {\n    @apply flex flex-col\n}\n\n.p-galleria-items-container {\n    @apply flex flex-col relative\n}\n\n.p-galleria-items {\n    @apply relative flex h-full\n}\n\n.p-galleria-nav-button {\n    @apply absolute top-1/2 inline-flex justify-center items-center overflow-hidden select-none border-none cursor-pointer\n        w-12 h-12 transition-colors duration-200 p-0 -mt-12 mx-2 mb-0 rounded-full\n        bg-white/10 text-surface-100 enabled:hover:bg-white/20 enabled:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-galleria-next-icon,\n.p-galleria-prev-icon {\n    @apply text-2xl w-6 h-6\n}\n\n.p-galleria-prev-button {\n    @apply start-0\n}\n\n.p-galleria-next-button {\n    @apply end-0\n}\n\n.p-galleria-prev-button:dir(rtl) {\n    @apply start-auto end-0\n}\n.p-galleria-next-button:dir(rtl) {\n    @apply end-auto start-0\n}\n\n.p-galleria-item {\n    @apply flex justify-center items-center h-full w-full\n}\n\n.p-galleria-hover-navigators .p-galleria-nav-button {\n    @apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out\n}\n\n.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {\n    @apply pointer-events-auto opacity-100\n}\n\n.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {\n    @apply pointer-events-none\n}\n\n.p-galleria-caption {\n    @apply absolute bottom-0 left-0 w-full bg-black/5 text-surface-100 p-4\n}\n\n.p-galleria-thumbnails {\n    @apply flex flex-col overflow-auto flex-shrink-0\n}\n\n.p-galleria-thumbnail-nav-button {\n    @apply self-center flex-grow-0 flex-shrink-0 basis-auto justify-center items-center overflow-hidden relative\n        my-0 mx-2 p-0 border-none select-none cursor-pointer w-8 h-8 rounded-md transition-colors duration-200 bg-transparent\n        text-surface-600 hover:bg-surface-100 hover:text-surface-700\n        dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,\n.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {\n    @apply text-base w-4 h-4\n}\n\n.p-galleria-thumbnails-content {\n    @apply flex flex-row bg-surface-0 dark:bg-surface-900 py-4 px-1\n}\n\n.p-galleria-thumbnails-viewport {\n    @apply overflow-hidden w-full\n}\n\n.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),\n.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {\n    @apply rotate-180\n}\n\n.p-galleria-thumbnail-items {\n    @apply flex\n}\n\n.p-galleria-thumbnail-item {\n    @apply overflow-auto flex items-center justify-center cursor-pointer opacity-50\n}\n\n.p-galleria-thumbnail {\n    @apply outline-transparent transition-opacity duration-300 hover:opacity-100\n}\n\n.p-galleria-thumbnail-item-current {\n    @apply opacity-100\n}\n\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    @apply flex-row\n}\n\n.p-galleria-thumbnails-left .p-galleria-items-container,\n.p-galleria-thumbnails-right .p-galleria-items-container {\n    @apply flex-row\n}\n\n.p-galleria-thumbnails-left .p-galleria-items-container,\n.p-galleria-thumbnails-top .p-galleria-items-container {\n    @apply order-2\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnails,\n.p-galleria-thumbnails-top .p-galleria-thumbnails {\n    @apply order-1\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnails-content,\n.p-galleria-thumbnails-right .p-galleria-thumbnails-content {\n    @apply flex-col flex-grow\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    @apply flex-col h-full\n}\n\n.p-galleria-indicator-list {\n    @apply flex items-center justify-center p-4 gap-2 m-0 list-none\n}\n\n.p-galleria-indicator-button {\n    @apply inline-flex items-center w-4 h-4 rounded-full m-0 p-0 border-none select-none cursor-pointer transition-colors duration-200\n        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-galleria-indicator-active .p-galleria-indicator-button {\n    @apply bg-primary\n}\n\n.p-galleria-indicators-left .p-galleria-items-container,\n.p-galleria-indicators-right .p-galleria-items-container {\n    @apply flex-row items-center\n}\n\n.p-galleria-indicators-left .p-galleria-items,\n.p-galleria-indicators-top .p-galleria-items {\n    @apply order-2\n}\n\n.p-galleria-indicators-left .p-galleria-indicator-list,\n.p-galleria-indicators-top .p-galleria-indicator-list {\n    @apply order-1\n}\n\n.p-galleria-indicators-left .p-galleria-indicator-list,\n.p-galleria-indicators-right .p-galleria-indicator-list {\n    @apply flex-col\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-list {\n    @apply absolute flex z-10 bg-black/50\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-button {\n    @apply bg-white/40 hover:bg-white/60\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {\n    @apply bg-white/90\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {\n    @apply top-0 left-0 w-full items-start\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {\n    @apply right-0 top-0 h-full items-end\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {\n    @apply bottom-0 left-0 w-full items-end\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {\n    @apply left-0 top-0 h-full items-start\n}\n\n.p-galleria-mask {\n    @apply fixed top-0 left-0 w-full h-full flex items-center justify-center\n}\n\n.p-galleria-close-button {\n    @apply absolute top-0 right-0 flex items-center justify-center overflow-hidden m-2 rounded-full\n        transition-colors duration-200 select-none cursor-pointer w-12 h-12 p-0 border-none\n        bg-white/10 text-surface-50 hover:bg-white/20 hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-galleria-close-icon {\n    @apply text-2xl w-6 h-6\n}\n\n.p-galleria-mask .p-galleria-nav-button {\n    @apply fixed top-1/2\n}\n\n.p-galleria-enter-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]\n}\n\n.p-galleria-leave-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]\n}\n\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    @apply opacity-0 scale-75\n}\n\n.p-galleria-enter-active .p-galleria-nav-button {\n    @apply opacity-0\n}\n\n.p-items-hidden .p-galleria-thumbnail-item {\n    @apply invisible\n}\n\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    @apply visible\n}\n",
+  "iconfield": ".p-iconfield {\n    @apply relative\n}\n\n.p-inputicon {\n    @apply absolute top-1/2 -mt-2 text-surface-400 leading-none\n}\n\n.p-iconfield .p-inputicon:first-child {\n    @apply start-3\n}\n\n.p-iconfield .p-inputicon:last-child {\n    @apply end-3\n}\n\n.p-iconfield .p-inputtext:not(:first-child) {\n    @apply ps-10\n}\n\n.p-iconfield .p-inputtext:not(:last-child) {\n    @apply pe-10\n}\n",
+  "iftalabel": ".p-iftalabel {\n    @apply block relative\n}\n\n.p-iftalabel label {\n    @apply absolute pointer-events-none top-2 transition-all ease-out duration-200 leading-none text-xs font-medium start-3 text-surface-500 dark:text-surface-400\n}\n\n.p-iftalabel .p-inputtext,\n.p-iftalabel .p-textarea,\n.p-iftalabel .p-select-label,\n.p-iftalabel .p-multiselect-label,\n.p-iftalabel .p-autocomplete-input-multiple,\n.p-iftalabel .p-cascadeselect-label,\n.p-iftalabel .p-treeselect-label {\n    @apply pt-6 pb-2\n}\n\n.p-iftalabel:has(.p-invalid) label {\n    @apply text-red-400 dark:text-red-300\n}\n\n.p-iftalabel:has(input:focus) label ,\n.p-iftalabel:has(input:-webkit-autofill) label,\n.p-iftalabel:has(textarea:focus) label ,\n.p-iftalabel:has(.p-inputwrapper-focus) label  {\n    @apply text-primary\n}\n\n.p-iftalabel .p-inputicon {\n    @apply top-6 translate-y-1/4 mt-0\n}\n",
+  "image": ".p-image-mask {\n    @apply flex items-center justify-center\n}\n\n.p-image-preview {\n    @apply relative inline-flex leading-none\n}\n\n.p-image-preview-mask {\n    @apply absolute start-0 top-0 w-full h-full flex items-center justify-center opacity-0\n        border-none p-0 cursor-pointer bg-transparent text-surface-200 transition-all duration-200\n}\n\n.p-image-preview:hover > .p-image-preview-mask {\n    @apply opacity-100 cursor-pointer bg-black/40 dark:bg-black/60\n}\n\n.p-image-preview-icon {\n    @apply text-2xl w-6 h-6\n}\n\n.p-image-toolbar {\n    @apply absolute top-4 end-4 start-auto bottom-auto flex z-10 p-2 bg-white/10 border border-white/20 rounded-3xl gap-2;\n}\n\n.p-image-action {\n    @apply inline-flex justify-center items-center text-surface-50 bg-transparent w-12 h-12 m-0 p-0\n        border-none cursor-pointer select-none rounded-full transition-colors duration-200\n        hover:text-surface-0 hover:bg-white/10\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-image-action .p-icon {\n    @apply text-2xl h-6 w-6\n}\n\n.p-image-action.p-disabled {\n    @apply pointer-events-auto\n}\n\n.p-image-original {\n    @apply transition-transform duration-150 max-w-[100vw] max-h-[100vh]\n}\n\n.p-image-original-enter-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]\n}\n\n.p-image-original-leave-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]\n}\n\n.p-image-original-enter-from,\n.p-image-original-leave-to {\n    @apply opacity-0 scale-75\n}\n",
+  "imagecompare": ".p-imagecompare {\n    @apply relative overflow-hidden w-full aspect-video\n}\n\n.p-imagecompare img {\n    @apply w-full h-full absolute\n}\n\n.p-imagecompare img + img {\n    @apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]\n}\n\n.p-imagecompare:dir(rtl) img + img {\n    @apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]\n}\n\n.p-imagecompare-slider {\n    @apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200\n        hover:w-[calc(100%+2rem)] hover:-ms-4\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    @apply bg-white/40 h-8 w-8\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    @apply bg-white/40 h-8 w-8\n}\n",
+  "inplace": ".p-inplace-display {\n    @apply inline cursor-pointer border border-transparent px-3 py-2 rounded-md\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-inplace-display:not(.p-disabled):hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-inplace-content {\n    @apply block\n}",
+  "inputgroup": ".p-inputgroup,\n.p-inputgroup .p-floatlabel,\n.p-inputgroup .p-iftalabel {\n    @apply flex items-stretch w-full\n}\n\n.p-inputgroup .p-inputtext,\n.p-inputgroup .p-inputwrapper {\n    @apply flex-auto w-[1%]\n}\n\n.p-inputgroupaddon {\n    @apply flex items-center justify-center p-2 min-w-10\n        border-y border-surface-300 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-950 text-surface-400\n}\n\n.p-inputgroupaddon:first-child,\n.p-inputgroupaddon + .p-inputgroupaddon {\n    @apply border-s\n}\n\n.p-inputgroupaddon:last-child {\n    @apply border-e\n}\n\n.p-inputgroup > .p-component,\n.p-inputgroup > .p-inputwrapper > .p-component,\n.p-inputgroup > .p-floatlabel > .p-component,\n.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component,\n.p-inputgroup > .p-iftalabel > .p-component,\n.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component {\n    @apply rounded-none m-0\n}\n\n.p-inputgroupaddon:first-child,\n.p-inputgroup > .p-component:first-child,\n.p-inputgroup > .p-inputwrapper:first-child > .p-component,\n.p-inputgroup > .p-floatlabel:first-child > .p-component,\n.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component,\n.p-inputgroup > .p-iftalabel:first-child > .p-component,\n.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component {\n    @apply rounded-s-md\n}\n\n.p-inputgroupaddon:last-child,\n.p-inputgroup > .p-component:last-child,\n.p-inputgroup > .p-inputwrapper:last-child > .p-component,\n.p-inputgroup > .p-floatlabel:last-child > .p-component,\n.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component,\n.p-inputgroup > .p-iftalabel:last-child > .p-component,\n.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component {\n    @apply rounded-e-md\n}\n\n.p-inputgroup .p-component:focus,\n.p-inputgroup .p-component.p-focus,\n.p-inputgroup .p-inputwrapper-focus,\n.p-inputgroup .p-component:focus ~ label,\n.p-inputgroup .p-component.p-focus ~ label,\n.p-inputgroup .p-inputwrapper-focus ~ label {\n    @apply z-10\n}\n\n.p-inputgroup > .p-button:not(.p-button-icon-only) {\n    @apply w-auto\n}\n",
+  "inputnumber": "@import './inputtext';\n\n.p-inputnumber {\n    @apply inline-flex relative\n}\n\n.p-inputnumber-button {\n    @apply flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10\n        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200\n        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300\n        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700\n        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200\n        transition-colors duration-200\n}\n\n.p-inputnumber-stacked .p-inputnumber-button {\n    @apply relative flex-auto border-none\n}\n\n.p-inputnumber-stacked .p-inputnumber-button-group {\n    @apply flex flex-col absolute top-px end-px h-[calc(100%-2px)] z-10\n}\n\n.p-inputnumber-stacked .p-inputnumber-increment-button {\n    @apply p-0 rounded-tr-[5px]\n}\n\n.p-inputnumber-stacked .p-inputnumber-decrement-button {\n    @apply p-0 rounded-br-[5px]\n}\n\n.p-inputnumber-horizontal .p-inputnumber-increment-button {\n    @apply order-3 rounded-e-md border-s-0\n}\n\n.p-inputnumber-horizontal .p-inputnumber-input {\n    @apply order-2 rounded-none\n}\n\n.p-inputnumber-horizontal .p-inputnumber-decrement-button {\n    @apply order-1 rounded-s-md border-r-0\n}\n\n.p-floatlabel:has(.p-inputnumber-horizontal) label {\n    @apply ms-10\n}\n\n.p-inputnumber-vertical {\n    @apply flex-col\n}\n\n.p-inputnumber-vertical .p-inputnumber-button {\n    @apply py-2\n}\n\n.p-inputnumber-vertical .p-inputnumber-increment-button {\n    @apply order-1 rounded-ss-md rounded-se-md w-full border-b-0\n}\n\n.p-inputnumber-vertical .p-inputnumber-input {\n    @apply order-2 rounded-none text-center\n}\n\n.p-inputnumber-vertical .p-inputnumber-decrement-button {\n    @apply order-3 rounded-ee-md rounded-es-md w-full border-t-0\n}\n\n.p-inputnumber-input {\n    @apply flex-auto\n}\n\n.p-inputnumber-fluid {\n    @apply w-full\n}\n\n.p-inputnumber-fluid .p-inputnumber-input {\n    @apply w-[1%]\n}\n\n.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {\n    @apply w-full\n}\n",
+  "inputotp": "@import './inputtext';\n\n.p-inputotp {\n    @apply flex items-center gap-2\n}\n\n.p-inputotp-input {\n    @apply text-center w-10\n}",
+  "inputtext": ".p-inputtext {\n    @apply appearance-none rounded-md\n        border border-surface-300 dark:border-surface-700 \n        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600\n        enabled:focus:border-primary dark:enabled:focus:border-primary\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 disabled:opacity-100\n        placeholder:text-surface-500 dark:placeholder:text-surface-400\n        px-3 py-2\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        outline-none\n}\n\n.p-inputtext.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-inputtext.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-inputtext-sm {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-inputtext-lg {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-inputtext-fluid {\n    @apply w-full\n}",
+  "knob": ".p-knob-range {\n    @apply fill-none transition-[stroke] duration-100 ease-in\n}\n\n.p-knob-text {\n    @apply text-xl text-center\n}\n\n.p-knob svg {\n    @apply rounded-full\n        transition-colors duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-knob svg path:first-child {\n    @apply stroke-surface-200 dark:stroke-surface-700\n}\n\n.p-knob svg path + path {\n    @apply stroke-primary\n}\n\n.p-knob svg text {\n    @apply fill-surface-500 dark:fill-surface-400\n}\n\n.p-knob-value {\n    animation-name: p-knob-dash-frame;\n    animation-fill-mode: forwards;\n    fill: none;\n}\n\n@keyframes p-knob-dash-frame {\n    100% {\n        stroke-dashoffset: 0;\n    }\n}",
+  "listbox": "@import './inputtext';\n@import './iconfield';\n\n.p-listbox {\n    @apply bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0\n        border border-surface-300 dark:border-surface-700 rounded-md\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-listbox.p-focus {\n    @apply border-primary\n}\n\n.p-listbox.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-listbox.p-disabled .p-listbox-option {\n    @apply text-surface-500 dark:text-surface-400 cursor-default\n}\n\n.p-listbox.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-listbox-header {\n    @apply pt-2 pb-1 px-4\n}\n\n.p-listbox-filter {\n    @apply w-full\n}\n\n.p-listbox-list-container {\n    @apply overflow-auto\n}\n\n.p-listbox-list {\n    @apply list-none m-0 p-1 outline-none flex flex-col gap-[2px]\n}\n\n.p-listbox-option {\n    @apply flex items-center cursor-pointer relative overflow-hidden px-3 py-2 border-none rounded-sm\n        text-surface-700 dark:text-surface-0\n        transition-colors duration-200\n}\n\n.p-listbox-striped li:nth-child(even of .p-listbox-option) {\n    @apply bg-surface-50 dark:bg-surface-900\n}\n\n.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {\n    @apply bg-highlight\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-listbox-option-check-icon {\n    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0\n}\n\n.p-listbox-option-group {\n    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold \n}\n\n.p-listbox-empty-message {\n    @apply px-3 py-2\n}",
+  "megamenu": ".p-megamenu {\n    @apply relative flex items-center rounded-md gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n}\n\n.p-megamenu-start,\n.p-megamenu-end {\n    @apply flex items-center\n}\n\n.p-megamenu-root-list {\n    @apply m-0 p-0 list-none outline-none flex items-center flex-wrap gap-2\n}\n\n.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content {\n    @apply rounded-md\n}\n\n.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {\n    @apply px-3 py-2\n}\n\n.p-megamenu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-megamenu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-megamenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-megamenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-overlay {\n    @apply hidden absolute w-auto z-10 start-0 min-w-full rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {\n    @apply block\n}\n\n.p-megamenu-submenu {\n    @apply m-0 p-1 list-none min-w-52 flex flex-col gap-[2px]\n}\n\n.p-megamenu-submenu-label {\n    @apply px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent\n}\n\n.p-megamenu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-megamenu-horizontal {\n    @apply items-center px-3 py-2\n}\n\n.p-megamenu-horizontal .p-megamenu-root-list {\n    @apply flex items-center flex-wrap gap-2\n}\n\n.p-megamenu-horizontal .p-megamenu-end {\n    @apply ms-auto self-center\n}\n\n.p-megamenu-vertical {\n    @apply inline-flex min-w-52 flex-col items-stretch p-1\n}\n\n.p-megamenu-vertical .p-megamenu-root-list {\n    @apply items-stretch flex-col gap-[2px]\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {\n    @apply start-full top-0\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply ms-auto\n}\n\n.p-megamenu-grid {\n    @apply flex\n}\n\n.p-megamenu-col-2,\n.p-megamenu-col-3,\n.p-megamenu-col-4,\n.p-megamenu-col-6,\n.p-megamenu-col-12 {\n    @apply flex-grow-0 flex-shrink-0 basis-auto p-2\n}\n\n.p-megamenu-col-2 {\n    @apply w-1/6;\n}\n\n.p-megamenu-col-3 {\n    @apply w-1/4\n}\n\n.p-megamenu-col-4 {\n    @apply w-1/3\n}\n\n.p-megamenu-col-6 {\n    @apply w-1/2\n}\n\n.p-megamenu-col-12 {\n    @apply w-full\n}\n\n.p-megamenu-button {\n    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full\n        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300\n        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-megamenu-mobile {\n    @apply flex\n}\n\n.p-megamenu-mobile .p-megamenu-button {\n    @apply flex\n}\n\n.p-megamenu-mobile .p-megamenu-root-list {\n    @apply absolute hidden flex-col top-full start-0 z-10 w-full p-1 gap-[2px]\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-megamenu-mobile-active .p-megamenu-root-list {\n    @apply flex\n}\n\n.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {\n    @apply w-full static\n}\n\n.p-megamenu-mobile .p-megamenu-overlay {\n    @apply static border-none rounded-none shadow-none\n}\n\n.p-megamenu-mobile .p-megamenu-grid {\n    @apply flex-wrap overflow-auto max-h-[90%]\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply ms-auto transition-transform duration-[200ms]\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply -rotate-180\n}\n",
+  "menu": ".p-menu {\n    @apply bg-surface-0 dark:bg-surface-900 \n        text-surface-700 dark:text-surface-0 \n        border border-surface-200 dark:border-surface-700\n        rounded-md min-w-52\n}\n\n.p-menu-list {\n    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]\n}\n\n.p-menu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-menu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-menu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-menu-item.p-focus .p-menu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0 \n}\n\n.p-menu-item.p-focus .p-menu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menu-item:not(.p-disabled) .p-menu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menu-overlay {\n    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-menu-submenu-label {\n    @apply bg-transparent px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold\n}\n\n.p-menu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}",
+  "menubar": ".p-menubar {\n    @apply flex items-center rounded-md px-3 py-2 gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n}\n\n.p-menubar-start,\n.p-megamenu-end {\n    @apply flex items-center\n}\n\n.p-menubar-root-list,\n.p-menubar-submenu {\n    @apply flex m-0 p-0 list-none outline-none\n}\n\n.p-menubar-root-list {\n    @apply items-center flex-wrap gap-2\n}\n\n.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {\n    @apply rounded-md\n}\n\n.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {\n    @apply px-3 py-2\n}\n\n.p-menubar-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-menubar-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-menubar-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-menubar-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-menubar-submenu-icon:dir(rtl) {\n    @apply rotate-180\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item-active > .p-menubar-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-submenu {\n    @apply hidden absolute min-w-52 z-10\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        flex-col p-1 gap-[2px] rounded-md\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-menubar-submenu .p-menubar-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-menubar-submenu .p-menubar-item {\n    @apply relative\n}\n\n .p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu {\n    @apply block start-full top-0\n}\n\n.p-menubar-end {\n    @apply ms-auto self-center\n}\n\n.p-menubar-button {\n    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full\n        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300\n        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-menubar-mobile {\n    @apply relative\n}\n\n.p-menubar-mobile .p-menubar-button {\n    @apply flex\n}\n\n.p-menubar-mobile .p-menubar-root-list {\n    @apply absolute hidden w-full flex-col top-full start-0 z-10 p-1 gap-[2px] rounded-md\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {\n    @apply px-3 py-3\n}\n\n.p-menubar-mobile-active .p-menubar-root-list {\n    @apply flex\n}\n\n.p-menubar-mobile .p-menubar-root-list .p-menubar-item {\n    @apply w-full static\n}\n\n.p-menubar-mobile .p-menubar-root-list .p-menubar-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply ms-auto transition-transform duration-[200ms]\n}\n\n.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply -rotate-180\n}\n\n.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-menubar-mobile  .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply -rotate-90\n}\n\n.p-menubar-mobile .p-menubar-submenu {\n    @apply w-full static shadow-none border-none ps-4 pe-0\n}\n",
+  "message": ".p-message {\n    @apply rounded-md outline outline-1\n}\n\n.p-message-content {\n    @apply flex items-center px-3 py-2 gap-2 h-full\n}\n\n.p-message-icon {\n    @apply flex-shrink-0\n}\n\n.p-message-close-button {\n    @apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none\n        w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n}\n\n.p-message-info {\n    @apply bg-blue-50/95 outline-blue-200 text-blue-600\n        dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500\n        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]\n}\n\n.p-message-info .p-message-close-button {\n    @apply hover:bg-blue-100 focus-visible:outline-blue-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500\n}\n\n.p-message-info.p-message-outlined {\n    @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600\n}\n\n.p-message-info.p-message-simple {\n    @apply text-blue-500 dark:text-blue-600\n}\n\n.p-message-success {\n    @apply bg-green-50/95 outline-green-200 text-green-600\n        dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500\n        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]\n}\n\n.p-message-success .p-message-close-button {\n    @apply hover:bg-green-100 focus-visible:outline-green-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-green-500\n}\n\n.p-message-success.p-message-outlined {\n    @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600\n}\n\n.p-message-success.p-message-simple {\n    @apply text-green-500 dark:text-green-600\n}\n\n.p-message-warn {\n    @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600\n        dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500\n        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]\n}\n\n.p-message-warn .p-message-close-button {\n    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500\n}\n\n.p-message-warn.p-message-outlined {\n    @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600\n}\n\n.p-message-warn.p-message-simple {\n    @apply text-yellow-500 dark:text-yellow-600\n}\n\n.p-message-error {\n    @apply bg-red-50/95 outline-red-200 text-red-600\n        dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500\n        shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]\n}\n\n.p-message-error .p-message-close-button {\n    @apply hover:bg-red-100 focus-visible:outline-red-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-red-500\n}\n\n.p-message-error.p-message-outlined {\n    @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600\n}\n\n.p-message-error.p-message-simple {\n    @apply text-red-500 dark:text-red-600\n}\n\n.p-message-secondary {\n    @apply bg-surface-100 outline-surface-200 text-surface-600\n        dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300\n        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-message-secondary .p-message-close-button {\n    @apply hover:bg-surface-200 focus-visible:outline-surface-600\n        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300\n}\n\n.p-message-secondary.p-message-outlined {\n    @apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600\n}\n\n.p-message-secondary.p-message-simple {\n    @apply text-surface-500 dark:text-surface-600\n}\n\n.p-message-contrast {\n    @apply bg-surface-900 outline-surface-950 text-surface-50\n        dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950\n        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-message-contrast .p-message-close-button {\n    @apply hover:bg-surface-800 focus-visible:outline-surface-50\n        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950\n}\n\n.p-message-contrast.p-message-outlined {\n    @apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0\n}\n\n.p-message-contrast.p-message-simple {\n    @apply text-surface-950 dark:text-surface-0\n}\n\n.p-message-text {\n    @apply text-base font-medium\n}\n\n.p-message-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n\n.p-message-enter-from {\n    @apply opacity-0\n}\n\n.p-message-enter-active {\n    @apply transition-opacity duration-300\n}\n\n.p-message.p-message-leave-from {\n    @apply max-h-[1000px]\n}\n\n.p-message.p-message-leave-to {\n    @apply max-h-0 opacity-0 m-0\n}\n\n.p-message-leave-active {\n    @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]\n}\n\n.p-message-leave-active .p-message-close-button {\n    @apply opacity-0\n}\n\n.p-message-sm .p-message-content {\n    @apply px-2.5 py-[0.375rem]\n}\n\n.p-message-sm .p-message-text {\n    @apply text-sm\n}\n\n.p-message-sm .p-message-icon {\n    @apply w-4 h-4 text-sm\n}\n\n.p-message-sm .p-message-close-icon {\n    @apply w-3.5 h-3.5 text-sm\n}\n\n.p-message-lg .p-message-content {\n    @apply px-3.5 py-2.5\n}\n\n.p-message-lg .p-message-text {\n    @apply text-xl\n}\n\n.p-message-lg .p-message-icon {\n    @apply w-5 h-5 text-xl\n}\n\n.p-message-lg .p-message-close-icon {\n    @apply w-[1.125rem] h-[1.125rem] text-xl\n}\n\n.p-message-outlined {\n    @apply bg-transparent outline outline-1\n}\n\n.p-message-simple {\n    @apply bg-transparent outline-none shadow-none\n}\n\n.p-message-simple .p-message-content {\n    @apply p-0\n}\n\n.p-message-outlined .p-message-close-button:hover,\n.p-message-simple .p-message-close-button:hover {\n    @apply bg-transparent\n}\n",
+  "metergroup": ".p-metergroup {\n    @apply flex gap-4\n}\n\n.p-metergroup-meters {\n    @apply flex bg-surface-200 dark:bg-surface-700 rounded-md\n}\n\n.p-metergroup-label-list {\n    @apply flex flex-wrap m-0 p-0 list-none\n}\n\n.p-metergroup-label {\n    @apply inline-flex items-center gap-2\n}\n\n.p-metergroup-label-marker {\n    @apply inline-flex w-2 h-2 rounded-full\n}\n\n.p-metergroup-label-icon {\n    @apply text-base w-4 h-4\n}\n\n.p-metergroup-horizontal {\n    @apply flex-col\n}\n\n.p-metergroup-label-list-horizontal {\n    @apply gap-4\n}\n\n.p-metergroup-horizontal .p-metergroup-meters {\n    @apply h-2\n}\n\n.p-metergroup-horizontal .p-metergroup-meter:first-of-type {\n    @apply rounded-s-md\n}\n\n.p-metergroup-horizontal .p-metergroup-meter:last-of-type {\n    @apply rounded-e-md\n}\n\n.p-metergroup-vertical {\n    @apply flex-row\n}\n\n.p-metergroup-label-list-vertical {\n    @apply flex-col gap-2\n}\n\n.p-metergroup-vertical .p-metergroup-meters {\n    @apply flex-col w-2 h-full\n}\n\n.p-metergroup-vertical .p-metergroup-label-list {\n    @apply items-start\n}\n\n.p-metergroup-vertical .p-metergroup-meter:first-of-type {\n    @apply rounded-ss-md rounded-se-md\n}\n\n.p-metergroup-vertical .p-metergroup-meter:last-of-type {\n    @apply rounded-ee-md rounded-es-md\n}\n",
+  "multiselect": "@import './checkbox';\n@import './chip';\n@import './inputtext';\n@import './iconfield';\n\n.p-multiselect {\n    @apply inline-flex cursor-pointer relative select-none rounded-md\n        bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-multiselect:not(.p-disabled):hover {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-multiselect:not(.p-disabled).p-focus {\n    @apply border-primary\n}\n\n.p-multiselect.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-multiselect.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-multiselect.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-multiselect-dropdown {\n    @apply flex items-center justify-center shrink-0 bg-transparent\n        text-surface-500 dark:text-surface-400 w-10 rounded-e-md\n}\n\n.p-multiselect-clear-icon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10\n}\n\n.p-multiselect-label-container {\n    @apply overflow-hidden flex-auto\n}\n\n.p-multiselect-label {\n    @apply flex items-center gap-1 whitespace-nowrap overflow-hidden text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0\n}\n\n.p-multiselect-label.p-placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-multiselect.p-disabled .p-multiselect-label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-multiselect-label-empty {\n    @apply overflow-hidden opacity-0\n}\n\n.p-multiselect .p-multiselect-overlay {\n    @apply min-w-full\n}\n\n.p-multiselect-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-multiselect-header {\n    @apply flex items-center pt-2 pb-1 px-4\n}\n\n.p-multiselect-header .p-checkbox {\n    @apply me-2\n}\n\n.p-multiselect-filter-container {\n    @apply flex-auto\n}\n\n.p-multiselect-filter {\n    @apply w-full\n}\n\n.p-multiselect-list-container {\n    @apply overflow-auto\n}\n\n.p-multiselect-list {\n    @apply m-0 p-1 list-none gap-[2px] flex flex-col\n}\n\n.p-multiselect-option {\n    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-3 py-2\n        rounded-sm text-surface-700 dark:text-surface-0 bg-transparent border-none\n        transition-colors duration-200\n}\n\n.p-multiselect-option:not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-0\n}\n\n.p-multiselect-option-group {\n    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold\n}\n\n.p-multiselect-empty-message {\n    @apply px-3 py-2\n}\n\n.p-multiselect-label .p-chip {\n    @apply py-1 rounded-sm\n}\n\n.p-multiselect-label:has(.p-chip) {\n    @apply py-1 px-[0.375rem]\n}\n\n.p-multiselect-fluid {\n    @apply flex\n}\n\n.p-multiselect-sm .p-multiselect-label {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-multiselect-sm .p-multiselect-dropdown .p-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-multiselect-lg .p-multiselect-label {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-multiselect-lg .p-multiselect-dropdown .p-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n",
+  "orderlist": "@import './button';\n@import './listbox';\n\n.p-orderlist {\n    @apply flex gap-[1.125rem]\n}\n\n.p-orderlist-controls {\n    @apply flex flex-col justify-center gap-2\n}",
+  "organizationchart": ".p-organizationchart-table {\n    @apply border-spacing-0 border-separate my-0 mx-auto\n}\n\n.p-organizationchart-table > tbody > tr > td {\n    @apply text-center align-top py-0 px-3\n}\n\n.p-organizationchart-node {\n    @apply inline-block relative py-3 px-4 rounded-md\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        transition-colors duration-200\n}\n\n.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {\n    @apply pt-3 px-4 pb-5\n}\n\n.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-organizationchart-node-selected {\n    @apply bg-highlight\n}\n\n.p-organizationchart-node-toggle-button {\n    @apply absolute -bottom-3 -ms-3 z-20 start-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full\n        inline-flex items-center justify-center transition-colors duration-200\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700\n        dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n.p-organizationchart-node-toggle-button-icon {\n    @apply relative top-px\n}\n\n.p-organizationchart-connector-down {\n    @apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700\n}\n\n.p-organizationchart-connector-right {\n    @apply rounded-none\n}\n\n.p-organizationchart-connector-left {\n    @apply rounded-none border-e border-surface-200 dark:border-surface-700\n}\n\n.p-organizationchart-connector-top {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-organizationchart-node-selectable {\n    @apply cursor-pointer\n}\n\n.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {\n    @apply border-e-0\n}\n\n.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {\n    @apply rounded-se-md\n}\n\n.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {\n    @apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md\n}\n",
+  "overlaybadge": "@import './badge';\n\n.p-overlaybadge {\n    @apply relative\n}\n\n.p-overlaybadge .p-badge {\n    @apply absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline outline-2 outline-surface-0 dark:outline-surface-900\n}\n\n.p-overlaybadge .p-badge:dir(rtl) {\n    @apply -translate-x-1/2 -translate-y-1/2\n}\n",
+  "paginator": ".p-paginator {\n    @apply flex items-center justify-center flex-wrap py-2 px-4 rounded-md gap-1\n        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-paginator-content {\n    @apply flex items-center justify-center flex-wrap gap-1\n}\n\n.p-paginator-content-start {\n    @apply ms-auto\n}\n\n.p-paginator-content-end {\n    @apply me-auto\n}\n\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev {\n    @apply cursor-pointer inline-flex items-center justify-center leading-none overflow-hidden relative\n        bg-transparent border-none min-w-10 h-10 transition-colors duration-200 rounded-full p-0 m-0\n        text-surface-500 dark:text-surface-400\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,\n.p-paginator-first:not(.p-disabled):hover,\n.p-paginator-prev:not(.p-disabled):hover,\n.p-paginator-next:not(.p-disabled):hover,\n.p-paginator-last:not(.p-disabled):hover {\n    @apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300\n}\n\n.p-paginator-page.p-paginator-page-selected {\n    @apply bg-highlight\n}\n\n.p-paginator-current {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-paginator-pages {\n    @apply flex items-center gap-1\n}\n\n.p-paginator-jtp-input .p-inputtext {\n    @apply max-w-10\n}\n\n.p-paginator-first:dir(rtl),\n.p-paginator-prev:dir(rtl),\n.p-paginator-next:dir(rtl),\n.p-paginator-last:dir(rtl) {\n    @apply rotate-180\n}\n",
+  "panel": "@import './button';\n\n.p-panel {\n    @apply border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-panel-header {\n    @apply flex justify-between items-center p-[1.125rem]\n}\n\n.p-panel-toggleable .p-panel-header {\n    @apply py-[0.375rem] px-[1.125rem]\n}\n\n.p-panel-title {\n    @apply leading-none font-semibold\n}\n\n.p-panel-content {\n    @apply pt-0 pb-[1.125rem] px-[1.125rem] \n}\n\n.p-panel-footer {\n    @apply pt-0 pb-[1.125rem] px-[1.125rem] \n}",
+  "panelmenu": ".p-panelmenu {\n    @apply flex flex-col gap-2\n}\n\n.p-panelmenu-panel {\n    @apply bg-surface-0 dark:bg-surface-900 rounded-md p-1\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n}\n\n.p-panelmenu-header {\n    @apply outline-none\n}\n\n.p-panelmenu-header-content {\n    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0\n}\n\n.p-panelmenu-header-link {\n    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer relative no-underline text-inherit\n}\n\n.p-panelmenu-header-icon,\n.p-panelmenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-panelmenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-header:not(.p-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) {\n    @apply rotate-180;\n}\n\n.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-submenu {\n    @apply m-0 py-0 ps-4 outline-none list-none\n}\n\n.p-panelmenu-item-link {\n    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer no-underline text-inherit relative overflow-hidden\n}\n\n.p-panelmenu-item-content {\n    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0\n}\n\n.p-panelmenu-item.p-focus > .p-panelmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n",
+  "password": "@import './inputtext';\n\n.p-password {\n    @apply inline-flex relative\n}\n\n.p-password .p-password-overlay {\n    @apply min-w-full\n}\n\n.p-password-meter {\n    @apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md\n}\n\n.p-password-meter-label {\n    @apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md\n}\n\n.p-password-meter-weak {\n    @apply bg-red-500 dark:bg-red-400\n}\n\n.p-password-meter-medium {\n    @apply bg-amber-500 dark:bg-amber-400\n}\n\n.p-password-meter-strong {\n    @apply bg-green-500 dark:bg-green-400\n}\n\n.p-password-fluid {\n    @apply flex\n}\n\n.p-password-fluid .p-password-input {\n    @apply w-full\n}\n\n.p-password-input::-ms-reveal,\n.p-password-input::-ms-clear {\n    @apply hidden\n}\n\n.p-password-overlay {\n    @apply p-3 rounded-md bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-password-content {\n    @apply flex flex-col gap-2\n}\n\n.p-password-toggle-mask-icon {\n    @apply end-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4\n}\n\n.p-password:has(.p-password-toggle-mask-icon) .p-password-input {\n    @apply pe-10\n}\n",
+  "picklist": "@import './button';\n@import './listbox';\n\n.p-picklist {\n    @apply flex gap-[1.125rem]\n}\n\n.p-picklist-controls {\n    @apply flex flex-col justify-center gap-2\n}\n\n.p-picklist-list-container {\n    @apply flex-grow flex-shrink basis-1/2\n}\n\n.p-picklist .p-listbox {\n    @apply h-full\n}",
+  "popover": ".p-popover {\n    @apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none\n        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700\n        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none\n        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900\n}\n\n.p-popover-content {\n    @apply p-3\n}\n\n.p-popover-flipped {\n    @apply -mt-[10px] mb-[10px]\n}\n\n.p-popover-enter-from {\n    @apply opacity-0 scale-y-75\n}\n\n.p-popover-leave-to {\n    @apply opacity-0\n}\n\n.p-popover-enter-active {\n    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]\n}\n\n.p-popover-leave-active {\n    @apply transition-opacity duration-100 ease-linear\n}\n\n.p-popover-flipped:after,\n.p-popover-flipped:before {\n    @apply bottom-auto top-full\n}\n\n.p-popover.p-popover-flipped:after {\n    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900\n}\n\n.p-popover.p-popover-flipped:before {\n    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700\n}\n",
+  "progressbar": ".p-progressbar {\n    @apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md\n}\n\n.p-progressbar-value {\n    @apply m-0 bg-primary\n}\n\n.p-progressbar-label {\n    @apply text-primary-contrast text-xs font-semibold\n}\n\n.p-progressbar-determinate .p-progressbar-value {\n    @apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out\n}\n\n.p-progressbar-determinate .p-progressbar-label {\n    @apply inline-flex\n}\n\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];\n}\n\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];\n\n}\n\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation-delay: 1.15s;\n}\n\n@keyframes p-progressbar-indeterminate-anim {\n    0% {\n        inset-inline-start: -35%;\n        inset-inline-end: 100%;\n    }\n    60% {\n        inset-inline-start: 100%;\n        inset-inline-end: -90%;\n    }\n    100% {\n        inset-inline-start: 100%;\n        inset-inline-end: -90%;\n    }\n}\n\n@keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        inset-inline-start: -200%;\n        inset-inline-end: 100%;\n    }\n    60% {\n        inset-inline-start: 107%;\n        inset-inline-end: -8%;\n    }\n    100% {\n        inset-inline-start: 107%;\n        inset-inline-end: -8%;\n    }\n}\n",
+  "progressspinner": ".p-progressspinner {\n    @apply relative my-0 mx-auto w-[100px] h-[100px] inline-block\n        before:block before:pt-[100%]\n}\n\n.p-progressspinner-spin {\n    @apply h-full origin-center w-full absolute top-0 bottom-0 start-0 end-0 m-auto;\n}\n\n.p-progressspinner-spin {\n    animation: p-progressspinner-rotate 2s linear infinite;\n}\n\n.p-progressspinner-circle {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: 0;\n    stroke: theme(colors.red.500);\n    stroke-linecap: round;\n    animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;\n}\n\n@keyframes p-progressspinner-rotate {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes p-progressspinner-dash {\n    0% {\n        stroke-dasharray: 1, 200;\n        stroke-dashoffset: 0;\n    }\n    50% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -35px;\n    }\n    100% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -124px;\n    }\n}\n\n@keyframes p-progressspinner-color {\n    100%,\n    0% {\n        stroke: theme(colors.red.500);\n    }\n    40% {\n        stroke: theme(colors.blue.500);\n    }\n    66% {\n        stroke: theme(colors.green.500);\n    }\n    80%,\n    90% {\n        stroke: theme(colors.yellow.500);\n    }\n}\n",
+  "radiobutton": ".p-radiobutton {\n    @apply relative inline-flex select-none w-5 h-5\n}\n\n.p-radiobutton-input {\n    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10\n        border border-transparent rounded-full\n}\n\n.p-radiobutton-box {\n    @apply flex justify-center items-center rounded-full\n        border border-surface-300 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-950\n        w-5 h-5\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n}\n\n.p-radiobutton-icon {\n    @apply bg-transparent text-xs w-3 h-3 rounded-full\n        transition-all duration-200 backface-hidden\n}\n\n.p-radiobutton-icon {\n    @apply scale-[0.1]\n}\n\n.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-radiobutton-checked .p-radiobutton-box {\n    @apply border-primary bg-primary\n}\n\n.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {\n    @apply bg-primary-contrast visible\n}\n\n.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {\n    @apply scale-100\n}\n\n.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {\n    @apply border-primary-emphasis bg-primary-emphasis\n}\n\n.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {\n    @apply bg-primary-contrast\n}\n\n.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-radiobutton.p-invalid > .p-radiobutton-box {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-radiobutton.p-variant-filled .p-radiobutton-box {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-radiobutton.p-disabled {\n    @apply opacity-100\n}\n\n.p-radiobutton.p-disabled .p-radiobutton-box {\n    @apply bg-surface-200 dark:bg-surface-400\n        border-surface-300 dark:border-surface-700\n}\n\n.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {\n    @apply bg-surface-700 dark:bg-surface-400\n}\n\n.p-radiobutton-sm,\n.p-radiobutton-sm .p-radiobutton-box {\n    @apply w-4 h-4\n}\n\n.p-radiobutton-sm .p-radiobutton-icon {\n    @apply w-2 h-2\n}\n\n.p-radiobutton-lg,\n.p-radiobutton-lg .p-radiobutton-box {\n    @apply w-6 h-6\n}\n\n.p-radiobutton-lg .p-radiobutton-icon {\n    @apply w-4 h-4\n}\n",
+  "rating": ".p-rating {\n    @apply relative flex items-center gap-1\n}\n\n.p-rating-option {\n    @apply inline-flex items-center cursor-pointer rounded-full\n}\n\n.p-rating-option.p-focus-visible {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-rating-icon {\n    @apply text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200\n}\n\n.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {\n    @apply text-primary\n}\n\n.p-rating-option-active .p-rating-icon {\n    @apply text-primary\n}",
+  "ripple": ".p-ink {\n    @apply block absolute bg-black/10 dark:bg-white/30 scale-0 rounded-[100%] pointer-events-none\n}\n\n.p-ink-active {\n    @apply transition-[opacity,transform] duration-500 scale-[2.5] opacity-0 ease-linear\n}",
+  "scrollpanel": ".p-scrollpanel-content-container {\n    @apply overflow-hidden w-full h-full relative z-10 float-left\n}\n\n.p-scrollpanel-content {\n    @apply relative overflow-auto\n        h-[calc(100%+18px)] w-[calc(100%+18px)]\n        pt-0 ps-0 pr-[18px] pb-[18px] [scrollbar-width:none]\n}\n\n.p-scrollpanel-content::-webkit-scrollbar {\n    @apply hidden\n}\n\n.p-scrollpanel-bar {\n    @apply relative rounded-sm z-20 cursor-pointer opacity-0\n        bg-surface-100 dark:bg-surface-800\n        transition-opacity duration-200 border-none\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-scrollpanel-bar-y {\n    @apply w-[9px] top-0\n}\n\n.p-scrollpanel-bar-x {\n    @apply h-[9px] bottom-0\n}\n\n.p-scrollpanel-hidden {\n    @apply invisible\n}\n\n.p-scrollpanel:hover .p-scrollpanel-bar,\n.p-scrollpanel:active .p-scrollpanel-bar {\n    @apply opacity-100\n}\n\n.p-scrollpanel-grabbed {\n    @apply select-none\n}\n",
+  "scrolltop": "@import './button';\n\n.p-scrolltop.p-button {\n    @apply fixed bottom-5 end-5\n}\n\n.p-scrolltop-sticky.p-button {\n    @apply sticky flex ms-auto\n}\n\n.p-scrolltop-enter-from {\n    @apply opacity-0\n}\n\n.p-scrolltop-enter-active {\n    @apply transition-opacity duration-150\n}\n\n.p-scrolltop.p-scrolltop-leave-to {\n    @apply opacity-0\n}\n\n.p-scrolltop-leave-active {\n    @apply transition-opacity duration-150\n}\n",
+  "select": "@import './button';\n@import './inputtext';\n@import './iconfield';\n\n.p-select {\n    @apply inline-flex cursor-pointer relative select-none rounded-md\n        bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-select:not(.p-disabled):hover {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-select:not(.p-disabled).p-focus {\n    @apply border-primary\n}\n\n.p-select.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-select.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-select.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-select-clear-icon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10\n}\n\n.p-select-dropdown {\n    @apply flex items-center justify-center shrink-0 bg-transparent\n        text-surface-500 dark:text-surface-400 w-10 rounded-e-md\n}\n\n.p-select-label {\n    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]\n        py-2 px-3 overflow-ellipsis\n        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none\n}\n\n.p-select-label.p-placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-select:has(.p-select-clear-icon) .p-select-label {\n    @apply pe-7\n}\n\n.p-select.p-disabled .p-select-label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-select-label-empty {\n    @apply overflow-hidden opacity-0\n}\n\ninput.p-select-label {\n    @apply cursor-default\n}\n\n.p-select .p-select-overlay {\n    @apply min-w-full\n}\n\n.p-select-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-select-header {\n    @apply pt-2 pb-1 px-4\n}\n\n.p-select-filter {\n    @apply w-full\n}\n\n.p-select-list-container {\n    @apply overflow-auto\n}\n\n.p-select-option-group {\n    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold\n}\n\n.p-select-list {\n    @apply m-0 p-1 list-none gap-[2px] flex flex-col\n}\n\n.p-select-option {\n    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center\n        px-3 py-2 border-none text-surface-700 dark:text-surface-0 bg-transparent rounded-sm\n        transition-colors duration-200\n}\n\n.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-select-option.p-select-option-selected {\n    @apply bg-highlight\n}\n\n.p-select-option.p-select-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-select-option-check-icon {\n    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0\n}\n\n.p-select-empty-message {\n    @apply px-3 py-2\n}\n\n.p-select-fluid {\n    @apply flex\n}\n\n.p-select-sm .p-select-label {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-select-sm .p-select-dropdown .p-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-select-lg .p-select-label {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-select-lg .p-select-dropdown .p-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n",
+  "selectbutton": "@import './togglebutton';\n\n.p-selectbutton {\n    @apply inline-flex select-none rounded-md\n}\n\n.p-selectbutton .p-togglebutton {\n    @apply rounded-none border-y border-r border-s-0\n}\n\n.p-selectbutton .p-togglebutton:focus-visible {\n    @apply relative z-10\n}\n\n.p-selectbutton .p-togglebutton:first-child {\n    @apply border-s rounded-s-md\n}\n\n.p-selectbutton .p-togglebutton:last-child {\n    @apply rounded-e-md\n}\n\n.p-selectbutton.p-invalid {\n    @apply outline outline-offset-0 outline-red-400 dark:outline-red-300\n}\n",
+  "skeleton": ".p-skeleton {\n    @apply overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md\n}\n\n.p-skeleton-circle {\n    @apply rounded-full\n}\n\n.p-skeleton-animation-none::after {\n    @apply animate-none\n}\n",
+  "slider": ".p-slider {\n    @apply relative bg-surface-200 dark:bg-surface-700 rounded-sm\n}\n\n.p-slider-handle {\n    @apply cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px]\n        bg-surface-200 dark:bg-surface-700 rounded-full\n        transition-colors duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        before:w-[16px] before:h-[16px] before:block before:rounded-full\n        before:bg-surface-0 dark:before:bg-surface-950\n        before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)]\n        before:transition-colors before:duration-200\n}\n\n.p-slider-range {\n    @apply block bg-primary rounded-sm\n}\n\n.p-slider.p-slider-horizontal {\n    @apply h-[3px]\n}\n\n.p-slider-horizontal .p-slider-range {\n    @apply top-0 start-0 h-full\n}\n\n.p-slider-horizontal .p-slider-handle {\n    @apply top-1/2 -mt-[10px] -ms-[10px]\n}\n\n.p-slider-vertical {\n    @apply min-h-[100px] w-[3px]\n}\n\n.p-slider-vertical .p-slider-handle {\n    @apply start-1/2 -mb-[10px] -ms-[10px]\n}\n\n.p-slider-vertical .p-slider-range {\n    @apply bottom-0 start-0 w-full\n}\n",
+  "speeddial": "@import './button';\n\n.p-speeddial {\n    @apply static flex gap-2\n}\n\n.p-speeddial-button {\n    @apply z-10\n}\n\n.p-speeddial-button.p-speeddial-rotate {\n    @apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform\n}\n\n.p-speeddial-list {\n    @apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2\n        transition-[top] ease-linear duration-200\n}\n\n.p-speeddial-item {\n    @apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform\n}\n\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    @apply absolute\n}\n\n.p-speeddial-mask {\n    @apply absolute start-0 top-0 w-full h-full opacity-0 bg-black/40 dark:bg-black/60 rounded-md transition-opacity duration-150\n}\n\n.p-speeddial-mask-visible {\n    @apply pointer-events-none opacity-100 transition-opacity duration-150\n}\n\n.p-speeddial-open .p-speeddial-list {\n    @apply pointer-events-auto\n}\n\n.p-speeddial-open .p-speeddial-item {\n    @apply scale-100 opacity-100\n}\n\n.p-speeddial-open .p-speeddial-rotate {\n    @apply rotate-45\n}\n",
+  "splitbutton": "@import './button';\n@import './tieredmenu';\n\n.p-splitbutton {\n    @apply inline-flex relative rounded-md\n}\n\n.p-splitbutton-button {\n    @apply rounded-e-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10\n}\n\n.p-splitbutton-dropdown {\n    @apply rounded-s-none focus-visible:z-10\n}\n\n.p-splitbutton .p-menu {\n    @apply min-w-full\n}\n\n.p-splitbutton-fluid {\n    @apply w-full\n}\n\n.p-splitbutton-rounded .p-splitbutton-dropdown {\n    @apply rounded-e-[2rem]\n}\n\n.p-splitbutton-rounded .p-splitbutton-button {\n    @apply rounded-s-[2rem]\n}\n\n.p-splitbutton-raised {\n    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]\n}\n",
+  "splitter": ".p-splitter {\n    @apply flex flex-wrap\n        border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-splitter-vertical {\n    @apply flex-col\n}\n\n.p-splitter-gutter {\n    @apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700\n}\n\n.p-splitter-gutter-handle {\n    @apply rounded-md bg-transparent \n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    @apply cursor-col-resize select-none\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    @apply cursor-row-resize select-none\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    @apply h-[24px] w-full\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    @apply w-[24px] h-full\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    @apply cursor-col-resize\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    @apply cursor-row-resize\n}\n\n.p-splitterpanel {\n    @apply flex-grow overflow-hidden\n}\n\n.p-splitterpanel-nested {\n    @apply flex\n}\n\n.p-splitterpanel .p-splitter {\n    @apply flex-grow border-none\n}",
+  "stepper": ".p-steplist {\n    @apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto\n}\n\n.p-step {\n    @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial\n}\n\n.p-step-header {\n    @apply border-none inline-flex items-center no-underline cursor-pointer\n        transition-colors duration-200 rounded-md bg-transparent p-0 gap-2\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-step.p-disabled .p-step-header {\n    @apply cursor-default\n}\n\n\n.p-stepper.p-stepper-readonly .p-step {\n    @apply cursor-auto\n}\n\n.p-step-title {\n    @apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full\n        text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200\n}\n\n.p-step-number {\n    @apply flex items-center justify-center text-surface-500 dark:text-surface-400\n        bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700\n        min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative\n        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]\n}\n\n.p-step-active .p-step-header {\n    @apply cursor-default\n}\n\n.p-step-active .p-step-number {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700\n}\n\n.p-step-active .p-step-title {\n    @apply text-primary\n}\n\n.p-step:not(.p-disabled):focus-visible {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-step:has(~ .p-step-active) .p-stepper-separator {\n    @apply bg-primary\n}\n\n.p-stepper-separator {\n    @apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200\n}\n\n.p-steppanels {\n    @apply pt-[0.875rem] pb-[1.125rem] px-2\n}\n\n.p-steppanel {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-stepper:has(.p-stepitem) {\n    @apply flex flex-col\n}\n\n.p-stepitem {\n    @apply flex flex-col flex-initial\n}\n\n.p-stepitem.p-stepitem-active {\n    @apply flex-auto\n}\n\n.p-stepitem .p-step {\n    @apply flex-initial\n}\n\n.p-stepitem .p-steppanel-content {\n    @apply w-full ps-4\n}\n\n.p-stepitem .p-steppanel {\n    @apply flex flex-auto\n}\n\n.p-stepitem .p-stepper-separator {\n    @apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ms-[1.625rem] relative start-[-2.5px]\n}\n\n.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {\n    @apply bg-primary\n}\n\n.p-stepitem:last-of-type .p-steppanel {\n    @apply ps-8\n}\n",
+  "tabs": ".p-tabs {\n    @apply flex flex-col\n}\n\n.p-tablist {\n    @apply flex relative\n}\n\n.p-tabs-scrollable > .p-tablist {\n    @apply overflow-hidden\n}\n\n.p-tablist-viewport {\n    @apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto\n}\n\n.p-tablist-viewport::-webkit-scrollbar {\n    @apply hidden\n}\n\n.p-tablist-tab-list {\n    @apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700\n}\n\n.p-tablist-content {\n    @apply flex-grow\n}\n\n.p-tablist-nav-button {\n    @apply !absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer\n        bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10\n        shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50\n        focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-tablist-prev-button {\n    @apply start-0\n}\n\n.p-tablist-next-button {\n    @apply end-0\n}\n\n.p-tablist-prev-button:dir(rtl),\n.p-tablist-next-button:dir(rtl) {\n    @apply rotate-180\n}\n\n.p-tab {\n    @apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem]\n        border-b border-surface-200 dark:border-surface-700 font-semibold\n        text-surface-500 dark:text-surface-400\n        transition-colors duration-200 -mb-px\n}\n\n.p-tab.p-disabled {\n    @apply cursor-default\n}\n\n.p-tab:not(.p-disabled):focus-visible {\n    @apply z-10 outline outline-1 outline-offset-[-1px] outline-primary\n}\n\n.p-tab:not(.p-tab-active):not(.p-disabled):hover {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-tab-active {\n    @apply border-primary text-primary\n}\n\n.p-tabpanels {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n        pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none\n}\n\n.p-tablist-active-bar {\n    @apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]\n}\n\n.p-tablist-viewport {\n    @apply [scrollbar-behavior:smooth] [scrollbar-width:none]\n}\n",
+  "tag": ".p-tag {\n    @apply inline-flex items-center justify-center\n        bg-primary-100 dark:bg-primary-500/15\n        text-primary-700 dark:text-primary-300\n        text-sm font-bold py-1 px-2 rounded-md gap-1\n}\n\n.p-tag-icon {\n    @apply text-xs w-3 h-3\n}\n\n.p-tag-rounded {\n    @apply rounded-2xl\n}\n\n.p-tag-success {\n    @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300\n}\n\n.p-tag-info {\n    @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300\n}\n\n.p-tag-warn {\n    @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300\n}\n\n.p-tag-danger {\n    @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300\n}\n\n.p-tag-secondary {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300\n}\n\n.p-tag-contrast {\n    @apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950\n}",
+  "tailwind": "@import './common';\n\n/* Form */\n@import './autocomplete';\n@import './cascadeselect';\n@import './checkbox';\n@import './colorpicker';\n@import './datepicker';\n@import './iconfield';\n@import './iftalabel';\n@import './inputgroup';\n@import './inputnumber';\n@import './inputotp';\n@import './inputtext';\n@import './floatlabel';\n@import './knob';\n@import './listbox';\n@import './multiselect';\n@import './password';\n@import './radiobutton';\n@import './rating';\n@import './select';\n@import './selectbutton';\n@import './slider';\n@import './textarea';\n@import './togglebutton';\n@import './toggleswitch';\n@import './treeselect';\n\n/* Button */\n@import './button';\n@import './buttongroup';\n@import './speeddial';\n@import './splitbutton';\n\n/* Data */\n@import './datatable';\n@import './dataview';\n@import './paginator';\n@import './picklist';\n@import './orderlist';\n@import './organizationchart';\n@import './timeline';\n@import './tree';\n@import './treetable';\n\n/* Overlay */\n@import './confirmdialog';\n@import './confirmpopup';\n@import './dialog';\n@import './drawer';\n@import './popover';\n@import './tooltip';\n\n/* Menu */\n@import './breadcrumb';\n@import './contextmenu';\n@import './dock';\n@import './menu';\n@import './menubar';\n@import './megamenu';\n@import './panelmenu';\n@import './tieredmenu';\n\n/* Panel */\n@import './accordion';\n@import './card';\n@import './divider';\n@import './fieldset';\n@import './panel';\n@import './scrollpanel';\n@import './splitter';\n@import './stepper';\n@import './tabs';\n@import './toolbar';\n\n/* File */\n@import './fileupload';\n\n/* Message */\n@import './message';\n@import './toast';\n\n/* Media */\n@import './carousel';\n@import './galleria';\n@import './image';\n@import './imagecompare';\n\n/* Misc */\n@import './avatar';\n@import './badge';\n@import './blockui';\n@import './chip';\n@import './inplace';\n@import './metergroup';\n@import './overlaybadge';\n@import './progressbar';\n@import './progressspinner';\n@import './ripple';\n@import './scrolltop';\n@import './skeleton';\n@import './tag';\n@import './terminal';\n",
+  "terminal": ".p-terminal {\n    @apply h-72 overflow-auto px-3 py-2 rounded-md\n        border border-surface-300 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n}\n\n.p-terminal-prompt {\n    @apply flex items-center\n}\n\n.p-terminal-prompt-value {\n    @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base\n}\n\n.p-terminal-prompt-label {\n    @apply me-1\n}\n\n.p-terminal-input::-ms-clear {\n    @apply hidden\n}\n",
+  "textarea": ".p-textarea {\n    @apply appearance-none rounded-md\n        border border-surface-300 dark:border-surface-700\n        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600\n        enabled:focus:border-primary\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n        disabled:bg-surface-200 disabled:text-surface-500 disabled:opacity-100 dark:disabled:bg-surface-700 dark:disabled:text-surface-400\n        placeholder:text-surface-500 dark:placeholder:text-surface-400\n        px-3 py-2\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        outline-none\n}\n\n.p-textarea.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-textarea.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-textarea-fluid {\n    @apply w-full\n}\n\n.p-textarea-resizable {\n    @apply overflow-hidden resize-none\n}\n\n.p-textarea-sm {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-textarea-lg {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n",
+  "tieredmenu": ".p-tieredmenu {\n    @apply bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        rounded-md min-w-52\n}\n\n.p-tieredmenu-root-list,\n.p-tieredmenu-submenu {\n    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]\n}\n\n.p-tieredmenu-submenu {\n    @apply absolute min-w-full z-10 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-tieredmenu-item {\n    @apply relative\n}\n\n.p-tieredmenu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-tieredmenu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-tieredmenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-tieredmenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-tieredmenu-overlay {\n    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-tieredmenu-enter-from,\n.p-tieredmenu-leave-active {\n    @apply opacity-0\n}\n\n.p-tieredmenu-enter-active {\n    @apply transition-opacity duration-[250ms]\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu {\n    @apply static shadow-none border-none ps-4 pe-0\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply -rotate-90\n}\n",
+  "timeline": ".p-timeline {\n    @apply flex flex-col flex-grow\n}\n\n.p-timeline-left .p-timeline-event-opposite {\n    @apply text-end\n}\n\n.p-timeline-left .p-timeline-event-content {\n    @apply text-start\n}\n\n.p-timeline-right .p-timeline-event {\n    @apply flex-row-reverse\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n    @apply text-start\n}\n\n.p-timeline-right .p-timeline-event-content {\n    @apply text-end\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    @apply flex-row-reverse\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    @apply text-end\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    @apply text-start\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    @apply text-start\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    @apply text-end\n}\n\n.p-timeline-vertical .p-timeline-event-opposite,\n.p-timeline-vertical .p-timeline-event-content {\n    @apply py-0 px-4 leading-none\n}\n\n.p-timeline-vertical .p-timeline-event-connector {\n    @apply w-[2px]\n}\n\n.p-timeline-event {\n    @apply flex relative min-h-20 last:min-h-0\n}\n\n.p-timeline-event-opposite {\n    @apply flex-1\n}\n\n.p-timeline-event-content {\n    @apply flex-1\n}\n\n.p-timeline-event-separator {\n    @apply flex-none flex flex-col items-center\n}\n\n.p-timeline-event-marker {\n    @apply inline-flex items-center justify-center relative self-baseline\n        border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem]\n        bg-surface-0 dark:bg-surface-900\n        before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary\n        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]\n}\n\n.p-timeline-event-connector {\n    @apply flex-grow bg-surface-200 dark:bg-surface-700\n}\n\n.p-timeline-horizontal {\n    @apply flex-row\n}\n\n.p-timeline-horizontal .p-timeline-event {\n    @apply flex-col flex-1\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n    @apply flex-none\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n    @apply flex-row\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n    @apply w-full h-[2px]\n}\n\n.p-timeline-horizontal .p-timeline-event-opposite,\n.p-timeline-horizontal .p-timeline-event-content {\n    @apply py-4 px-0\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    @apply flex-col-reverse\n}\n\n.p-timeline-bottom .p-timeline-event {\n    @apply flex-col-reverse\n}\n",
+  "toast": ".p-toast {\n    @apply w-96 rounded-md whitespace-pre-line break-words\n}\n\n.p-toast-message {\n    @apply mb-4\n}\n\n.p-toast-message-icon {\n    @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]\n}\n\n.p-toast-message-content {\n    @apply flex items-start p-3 gap-2\n}\n\n.p-toast-message-text {\n    @apply flex-auto flex flex-col gap-2\n}\n\n.p-toast-summary {\n    @apply font-medium text-base\n}\n\n.p-toast-detail {\n    @apply font-medium text-sm\n}\n\n.p-toast-close-button {\n    @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none\n        transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -end-1/4 p-0 border-none\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n}\n\n.p-toast-close-button:dir(rtl) {\n    @apply ms-auto end-auto\n}\n\n.p-toast-message-info,\n.p-toast-message-success,\n.p-toast-message-warn,\n.p-toast-message-error,\n.p-toast-message-secondary,\n.p-toast-message-contrast {\n    @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md\n}\n\n.p-toast-close-icon {\n    @apply text-base w-4 h-4\n}\n\n.p-toast-message-info {\n    @apply bg-blue-50/95 border-blue-200 text-blue-600\n        dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500\n        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]\n}\n\n.p-toast-message-info .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-info .p-toast-close-button {\n    @apply hover:bg-blue-100 focus-visible:outline-blue-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500\n}\n\n.p-toast-message-success {\n    @apply bg-green-50/95 border-green-200 text-green-600\n        dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500\n        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]\n}\n\n.p-toast-message-success .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-success .p-toast-close-button {\n    @apply hover:bg-green-100 focus-visible:outline-green-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-green-500\n}\n\n.p-toast-message-warn {\n    @apply bg-yellow-50/95 border-yellow-200 text-yellow-600\n        dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500\n        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]\n}\n\n.p-toast-message-warn .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-warn .p-toast-close-button {\n    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500\n}\n\n.p-toast-message-error {\n    @apply bg-red-50/95 border-red-200 text-red-600\n        dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500\n        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]\n}\n\n.p-toast-message-error .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-error .p-toast-close-button {\n    @apply hover:bg-red-100 focus-visible:outline-red-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-red-500\n}\n\n.p-toast-message-secondary {\n    @apply bg-surface-100 border-surface-200 text-surface-600\n        dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300\n        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-toast-message-secondary .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-secondary .p-toast-close-button {\n    @apply hover:bg-surface-200 focus-visible:outline-surface-600\n        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300\n}\n\n.p-toast-message-contrast {\n    @apply bg-surface-900 border-surface-950 text-surface-50\n        dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950\n        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-toast-message-contrast .p-toast-detail {\n    @apply text-surface-0 dark:text-surface-950\n}\n\n.p-toast-message-contrast .p-toast-close-button {\n    @apply hover:bg-surface-800 focus-visible:outline-surface-50\n        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950\n}\n\n.p-toast-top-center {\n    @apply -translate-x-1/2;\n}\n\n.p-toast-bottom-center {\n    @apply -translate-x-1/2;\n}\n\n.p-toast-center {\n    @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2\n}\n\n.p-toast-message-enter-from {\n    @apply opacity-0 translate-y-1/2\n}\n\n.p-toast-message-leave-from {\n    @apply max-h-[1000px]\n}\n\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    @apply max-h-0 opacity-0 mb-0 overflow-hidden\n}\n\n.p-toast-message-enter-active {\n    @apply [transition:transform_0.3s,opacity_0.3s]\n}\n\n.p-toast-message-leave-active {\n    @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]\n}\n",
+  "togglebutton": ".p-togglebutton {\n    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none\n        border border-surface-100 dark:border-surface-950 rounded-md\n        bg-surface-100 dark:bg-surface-950\n        text-surface-500 dark:text-surface-400 text-base font-medium\n        px-4 py-2\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        disabled:opacity-100 disabled:cursor-default\n        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500\n        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400\n        transition-colors duration-300\n        before:bg-transparent before:absolute before:start-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]\n        before:transition-colors before:duration-200\n}\n\n.p-togglebutton-content {\n    @apply relative inline-flex items-center justify-center gap-2\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    @apply relative transition-none\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n    @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0\n}\n\n.p-togglebutton.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-togglebutton-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    @apply text-surface-700 dark:text-surface-300\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    @apply text-surface-900 dark:text-surface-0\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-togglebutton-sm {\n    @apply text-sm px-[0.75rem] py-[0.375rem]\n}\n\n.p-togglebutton-lg {\n    @apply text-lg px-[1.25rem] py-[0.625rem]\n}\n",
+  "toggleswitch": ".p-toggleswitch {\n    @apply inline-block w-10 h-6\n}\n\n.p-toggleswitch-input {\n    @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 start-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]\n}\n\n.p-toggleswitch-slider {\n    @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        bg-surface-300 dark:bg-surface-700\n        border border-transparent\n        transition-colors duration-200\n}\n\n.p-toggleswitch-handle {\n    @apply absolute top-1/2 flex justify-center items-center\n        bg-surface-0 dark:bg-surface-400\n        text-surface-500 dark:text-surface-900\n        w-4 h-4 start-1 -mt-2 rounded-full\n        transition-[background,color,left] duration-200\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {\n    @apply bg-primary\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary start-5\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {\n    @apply bg-surface-400 dark:bg-surface-600\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {\n    @apply bg-primary-emphasis\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-toggleswitch.p-invalid > .p-toggleswitch-slider {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-toggleswitch.p-disabled {\n    @apply opacity-100\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-slider {\n    @apply bg-surface-200 dark:bg-surface-600\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-handle {\n    @apply bg-surface-700 dark:bg-surface-900\n}\n",
+  "toolbar": ".p-toolbar {\n    @apply flex items-center justify-between flex-wrap p-3 gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700 rounded-md\n}\n\n.p-toolbar-start,\n.p-toolbar-center,\n.p-toolbar-end {\n    @apply flex items-center\n}",
+  "tooltip": ".p-tooltip {\n    @apply absolute hidden max-w-48\n}\n\n.p-tooltip-right,\n.p-tooltip-left {\n    @apply py-0 px-1\n}\n\n.p-tooltip-top,\n.p-tooltip-bottom {\n    @apply py-1 px-0\n}\n\n.p-tooltip-text {\n    @apply whitespace-pre-line break-words  bg-surface-700 text-surface-0 py-2 px-3\n        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-tooltip-arrow {\n    @apply absolute w-0 h-0 border-solid border-transparent\n}\n\n.p-tooltip-right .p-tooltip-arrow {\n    @apply -mt-1 border-[.25rem] border-s-0 border-e-surface-700 rtl:rotate-180\n}\n\n.p-tooltip-left .p-tooltip-arrow {\n    @apply -mt-1 border-[.25rem] border-e-0 border-s-surface-700 rtl:rotate-180\n}\n\n.p-tooltip-top .p-tooltip-arrow {\n    @apply -ms-1 border-[.25rem] border-b-0 border-t-surface-700\n}\n\n.p-tooltip-bottom .p-tooltip-arrow {\n    @apply -ms-1 border-[.25rem] border-t-0 border-b-surface-700\n}\n",
+  "tree": ".p-tree {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 p-4\n}\n\n.p-tree-root-children,\n.p-tree-node-children {\n    @apply flex flex-col list-none m-0 gap-[2px]\n}\n\n.p-tree-root-children {\n    @apply pt-[2px] pb-0 px-0\n}\n\n.p-tree-node-children {\n    @apply pt-[2px] pe-0 pb-0 ps-4\n}\n\n.p-tree-node {\n    @apply p-0 outline-none\n}\n\n.p-tree-node-content {\n    @apply rounded-md px-2 py-1 flex items-center text-surface-700 dark:text-surface-0 gap-1 transition-colors duration-200\n}\n\n.p-tree-node:focus-visible > .p-tree-node-content {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {\n    @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-tree-node-content.p-tree-node-selected {\n    @apply bg-highlight\n}\n\n.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {\n    @apply text-inherit\n}\n\n.p-tree-node-toggle-button {\n    @apply cursor-pointer select-none inline-flex justify-center rounded-full items-center overflow-hidden relative flex-shrink-0\n        w-7 h-7 p-0 transition-colors duration-200 border-none\n        bg-transparent enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-800\n        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-600 dark:enabled:hover:text-surface-300\n}\n\n.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary\n}\n\n.p-tree-root {\n    @apply overflow-auto\n}\n\n.p-tree-node-selectable {\n    @apply cursor-pointer select-none\n}\n\n.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {\n    @apply invisible\n}\n\n.p-tree-node-icon {\n    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200\n}\n\n.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {\n    @apply text-primary\n}\n\n.p-tree-filter {\n    @apply mb-2\n}\n\n.p-tree-filter-input {\n    @apply w-full\n}\n\n.p-tree-loading {\n    @apply relative h-full\n}\n\n.p-tree-loading-icon {\n    @apply text-[2rem] h-8 w-8\n}\n\n.p-tree .p-tree-mask {\n    @apply absolute z-10 flex items-center justify-center\n}\n\n.p-tree-flex-scrollable {\n    @apply flex flex-1 h-full flex-col\n}\n\n.p-tree-flex-scrollable .p-tree-root {\n    @apply flex-1\n}\n",
+  "treeselect": "@import './chip';\n@import './tree';\n\n.p-treeselect {\n    @apply inline-flex cursor-pointer relative select-none rounded-md\n        bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-treeselect:not(.p-disabled):hover {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-treeselect:not(.p-disabled).p-focus {\n    @apply border-primary\n}\n\n.p-treeselect.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-treeselect.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-treeselect.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-treeselect-dropdown {\n    @apply flex items-center justify-center shrink-0 bg-transparent\n        text-surface-500 dark:text-surface-400 w-10 rounded-e-md\n}\n\n.p-treeselect-clear-icon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10\n}\n\n.p-treeselect-label-container {\n    @apply overflow-hidden flex-auto\n}\n\n.p-treeselect-label {\n    @apply flex items-center gap-1 whitespace-nowrap text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0\n}\n\n.p-treeselect-label.p-placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-treeselect.p-disabled .p-treeselect-label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-treeselect-label-empty {\n    @apply overflow-hidden invisible\n}\n\n.p-treeselect .p-treeselect-overlay {\n    @apply min-w-full\n}\n\n.p-treeselect-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n\n.p-treeselect-tree-container {\n    @apply overflow-auto\n}\n\n.p-treeselect-empty-message {\n    @apply px-3 py-2\n}\n\n.p-treeselect-fluid {\n    @apply flex\n}\n\n.p-treeselect-overlay .p-tree {\n    @apply p-1\n}\n\n.p-treeselect-overlay .p-tree-loading {\n    @apply min-h-12\n}\n\n.p-treeselect-label .p-chip {\n    @apply pt-1 pb-1 rounded-sm\n}\n\n.p-treeselect-label:has(.p-chip) {\n    @apply py-1 px-1\n}\n\n.p-treeselect-sm .p-treeselect-label {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-treeselect-sm .p-treeselect-dropdown .p-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-treeselect-lg .p-treeselect-label {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-treeselect-lg .p-treeselect-dropdown .p-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n",
+  "treetable": "@import './paginator';\n\n.p-treetable {\n    @apply relative\n}\n\n.p-treetable-table {\n    @apply border-spacing-0 w-full\n}\n\n.p-treetable-scrollable > .p-treetable-table-container {\n    @apply relative\n}\n\n.p-treetable-scrollable-table > .p-treetable-thead {\n    @apply top-0 z-10\n}\n\n.p-treetable-scrollable-table > .p-treetable-frozen-tbody {\n    @apply sticky z-10\n}\n\n.p-treetable-scrollable-table>.p-treetable-tfoot {\n    @apply bottom-0 z-10\n}\n\n.p-treetable-scrollable .p-treetable-frozen-column {\n    @apply sticky bg-surface-0 dark:bg-surface-900\n}\n\n.p-treetable-scrollable th.p-treetable-frozen-column {\n    @apply z-10\n}\n\n.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {\n    @apply bg-surface-0 dark:bg-surface-900\n}\n\n.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot  {\n    @apply bg-surface-0 dark:bg-surface-900\n}\n\n.p-treetable-flex-scrollable {\n    @apply flex flex-col h-full\n}\n\n.p-treetable-flex-scrollable > .p-treetable-table-container {\n    @apply flex flex-col flex-1 h-full\n}\n\n.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header {\n    @apply sticky z-10\n}\n\n.p-treetable-resizable-table > .p-treetable-thead > tr > th,\n.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,\n.p-treetable-resizable-table > .p-treetable-tbody > tr > td {\n    @apply overflow-hidden whitespace-nowrap\n}\n\n.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {\n    @apply bg-clip-padding relative\n}\n\n.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer {\n    @apply hidden\n}\n\n.p-treetable-column-resizer {\n    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent\n}\n\n.p-treetable-column-header-content {\n    @apply flex items-center gap-2\n}\n\n.p-treetable-column-resize-indicator {\n    @apply w-px absolute z-10 hidden bg-primary\n}\n\n.p-treetable-mask {\n    @apply absolute flex items-center justify-center z-20\n}\n\n.p-treetable-paginator-top {\n    @apply border-b border-surface-200 dark:border-surface-700\n}\n\n.p-treetable-paginator-bottom {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-treetable-header {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-treetable-footer {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-treetable-header-cell {\n    @apply py-3 px-4 font-normal text-start transition-colors duration-200\n        border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-treetable-column-title {\n    @apply font-semibold\n}\n\n.p-treetable-tbody > tr {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200\n}\n\n.p-treetable-tbody > tr > td {\n    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800\n}\n\n.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-treetable-tbody > tr.p-treetable-row-selected {\n    @apply bg-highlight\n}\n\n.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {\n    @apply border-b-primary-100 dark:border-b-primary-900\n}\n\n.p-treetable-tbody > tr.p-treetable-row-selected > td {\n    @apply border-b-primary-100 dark:border-b-primary-900\n}\n\n.p-treetable-tbody > tr:focus-visible,\n.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {\n    @apply outline outline-1 -outline-offset-1 outline-primary\n}\n\n.p-treetable-tfoot > tr > td {\n    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-treetable-column-footer {\n    @apply font-semibold\n}\n\n.p-treetable-sortable-column {\n    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary\n}\n\n.p-treetable-column-title,\n.p-treetable-sort-icon,\n.p-treetable-sort-badge {\n    @apply align-middle\n}\n\n.p-treetable-sort-icon {\n    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200\n}\n\n.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-treetable-column-sorted {\n    @apply bg-highlight\n}\n\n.p-treetable-column-sorted .p-treetable-sort-icon {\n    @apply bg-highlight\n}\n\n.p-treetable-hoverable .p-treetable-selectable-row {\n    @apply cursor-pointer\n}\n\n.p-treetable-loading-icon {\n    @apply text-[2rem] w-8 h-8\n}\n\n.p-treetable-gridlines .p-treetable-header {\n    @apply border-t border-x\n}\n\n.p-treetable-gridlines .p-treetable-footer {\n    @apply border-b border-x\n}\n\n.p-treetable-gridlines .p-treetable-paginator-top {\n    @apply border-t border-x\n}\n\n.p-treetable-gridlines .p-treetable-paginator-bottom {\n    @apply border-b border-x\n}\n\n.p-treetable-gridlines .p-treetable-thead > tr > th {\n    @apply border-t border-x last:border\n}\n\n.p-treetable-gridlines .p-treetable-tbody > tr > td {\n    @apply border-t border-s last:border-r\n}\n\n.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {\n    @apply border-y border-s last:border\n}\n\n.p-treetable-gridlines .p-treetable-tfoot > tr > td {\n    @apply border-y border-s last:border\n}\n\n.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {\n    @apply border-b border-s last:border-r\n}\n\n.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {\n    @apply border-b border-s last:border-r\n}\n\n.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {\n    @apply border-x\n}\n\n.p-treetable.p-treetable-sm .p-treetable-header {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-sm .p-treetable-footer {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-lg .p-treetable-header {\n    @apply py-4 px-5\n}\n\n.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {\n    @apply py-4 px-5\n}\n\n.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {\n    @apply py-4 px-5\n}\n\n.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {\n    @apply py-4 px-5\n}\n\n.p-treetable.p-treetable-lg .p-treetable-footer {\n    @apply py-4 px-5\n}\n\n.p-treetable-body-cell-content {\n    @apply flex items-center gap-2\n}\n\n.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button {\n    @apply text-inherit\n}\n\n.p-treetable-node-toggle-button {\n    @apply inline-flex items-center justify-center overflow-hidden relative select-none\n        transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer\n        enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900\n        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n\n}\n\n.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary\n}\n\n.p-treetable-node-toggle-icon:dir(rtl) {\n    @apply rotate-180\n}\n"
+}
\ No newline at end of file
diff --git a/apps/labs/doc/confirmdialog/AccessibilityDoc.vue b/apps/labs/doc/confirmdialog/AccessibilityDoc.vue
new file mode 100644
index 000000000..ebdb428f9
--- /dev/null
+++ b/apps/labs/doc/confirmdialog/AccessibilityDoc.vue
@@ -0,0 +1,108 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default
+            behavior. In addition <i>aria-modal</i> is added since focus is kept within the popup.
+        </p>
+
+        <p>
+            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
+            trigger and the dialog is defined.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Overlay Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Buttons Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+<ConfirmDialog id="confirm" />
+
+<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
+`
+            },
+            code2: {
+                basic: `
+<script setup>
+const confirm = useConfirm();
+const isVisible = ref(false);
+
+const openDialog = () => {
+    confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        onShow: () => {
+            isVisible.value = true;
+        },
+        onHide: () => {
+            isVisible.value = false;
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmdialog/BasicDoc.vue b/apps/labs/doc/confirmdialog/BasicDoc.vue
new file mode 100644
index 000000000..57fbac265
--- /dev/null
+++ b/apps/labs/doc/confirmdialog/BasicDoc.vue
@@ -0,0 +1,196 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
+    </DocSectionText>
+    <ConfirmDialog></ConfirmDialog>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1()" label="Save" outlined></Button>
+        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmDialog></ConfirmDialog>
+<Button @click="confirm1()" label="Save" outlined></Button>
+<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
+`,
+                options: `
+<template>
+    <Toast />
+    <ConfirmDialog></ConfirmDialog>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1()" label="Save" outlined></Button>
+        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        confirm1() {
+            this.$confirm.require({
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Save'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        },
+        confirm2() {
+            this.$confirm.require({
+                message: 'Do you want to delete this record?',
+                header: 'Danger Zone',
+                icon: 'pi pi-info-circle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Delete',
+                    severity: 'danger'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <Toast />
+    <ConfirmDialog></ConfirmDialog>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1()" label="Save" outlined></Button>
+        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm1 = () => {
+    confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Save'
+        },
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+
+const confirm2 = () => {
+    confirm.require({
+        message: 'Do you want to delete this record?',
+        header: 'Danger Zone',
+        icon: 'pi pi-info-circle',
+        rejectLabel: 'Cancel',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Delete',
+            severity: 'danger'
+        },
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        confirm1() {
+            this.$confirm.require({
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Save'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        },
+        confirm2() {
+            this.$confirm.require({
+                message: 'Do you want to delete this record?',
+                header: 'Danger Zone',
+                icon: 'pi pi-info-circle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Delete',
+                    severity: 'danger'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmdialog/ConfirmationServiceDoc.vue b/apps/labs/doc/confirmdialog/ConfirmationServiceDoc.vue
new file mode 100644
index 000000000..7f5eeee0e
--- /dev/null
+++ b/apps/labs/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+    <div class="doc-section-description">
+        <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
+    </div>
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import {createApp} from 'vue';
+import ConfirmationService from 'primevue/confirmationservice';
+
+const app = createApp(App);
+app.use(ConfirmationService);
+`
+            },
+            code2: {
+                basic: `
+import { useConfirm } from "primevue/useconfirm";
+
+const confirm = useConfirm();
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmdialog/HeadlessDoc.vue b/apps/labs/doc/confirmdialog/HeadlessDoc.vue
new file mode 100644
index 000000000..d5431a783
--- /dev/null
+++ b/apps/labs/doc/confirmdialog/HeadlessDoc.vue
@@ -0,0 +1,156 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
+    </DocSectionText>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, acceptCallback, rejectCallback }">
+            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex items-center gap-2 mt-6">
+                    <Button label="Save" @click="acceptCallback" class="w-32"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-center">
+        <Button @click="requireConfirmation()" label="Save"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmDialog group="headless">
+    <template #container="{ message, acceptCallback, rejectCallback }">
+        <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+            <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
+                <i class="pi pi-question text-5xl"></i>
+            </div>
+            <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
+            <p class="mb-0">{{ message.message }}</p>
+            <div class="flex items-center gap-2 mt-6">
+                <Button label="Save" @click="acceptCallback" class="w-32"></Button>
+                <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
+            </div>
+        </div>
+    </template>
+</ConfirmDialog>
+<Button @click="requireConfirmation()" label="Save"></Button>
+`,
+                options: `
+<template>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, acceptCallback, rejectCallback }">
+            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex items-center gap-2 mt-6">
+                    <Button label="Save" @click="acceptCallback" class="w-32"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-center">
+        <Button @click="requireConfirmation()" label="Save"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script>
+export default {
+    methods: {
+        requireConfirmation() {
+            this.$confirm.require({
+                group: 'headless',
+                header: 'Are you sure?',
+                message: 'Please confirm to proceed.',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, acceptCallback, rejectCallback }">
+            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex items-center gap-2 mt-6">
+                    <Button label="Save" @click="acceptCallback"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-center">
+        <Button @click="requireConfirmation()" label="Save"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const requireConfirmation = () => {
+    confirm.require({
+        group: 'headless',
+        header: 'Are you sure?',
+        message: 'Please confirm to proceed.',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        requireConfirmation() {
+            this.$confirm.require({
+                group: 'headless',
+                header: 'Are you sure?',
+                message: 'Please confirm to proceed.',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmdialog/ImportDoc.vue b/apps/labs/doc/confirmdialog/ImportDoc.vue
new file mode 100644
index 000000000..85c50e88e
--- /dev/null
+++ b/apps/labs/doc/confirmdialog/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ConfirmDialog from 'primevue/confirmdialog';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmdialog/PositionDoc.vue b/apps/labs/doc/confirmdialog/PositionDoc.vue
new file mode 100644
index 000000000..06e410c0f
--- /dev/null
+++ b/apps/labs/doc/confirmdialog/PositionDoc.vue
@@ -0,0 +1,186 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>position</i> property of the confirm options specifies the location of the Dialog.</p>
+    </DocSectionText>
+    <ConfirmDialog group="positioned"></ConfirmDialog>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+        <div class="flex flex-wrap justify-center gap-2">
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmDialog group="positioned"></ConfirmDialog>
+<div class="flex flex-wrap justify-center gap-2 mb-4">
+    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
+</div>
+<div class="flex flex-wrap justify-center gap-2 mb-4">
+    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
+</div>
+<div class="flex flex-wrap justify-center gap-2">
+    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
+</div>
+`,
+                options: `
+<template>
+    <Toast />
+    <ConfirmDialog group="positioned"></ConfirmDialog>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+        <div class="flex flex-wrap justify-center gap-2">
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        confirmPosition(position) {
+            this.$confirm.require({
+                group: 'positioned',
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-info-circle',
+                position: position,
+                rejectClass: 'p-button-secondary p-button-text',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    text: true
+                },
+                acceptProps: {
+                    label: 'Save',
+                    text: true
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
+                }
+            });
+        },
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <Toast />
+    <ConfirmDialog group="positioned"></ConfirmDialog>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+        <div class="flex flex-wrap justify-center gap-2">
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirmPosition = (position) => {
+    confirm.require({
+        group: 'positioned',
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-info-circle',
+        position: position,
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            text: true
+        },
+        acceptProps: {
+            label: 'Save',
+            text: true
+        },
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        confirmPosition(position) {
+            this.$confirm.require({
+                group: 'positioned',
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-info-circle',
+                position: position,
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    text: true
+                },
+                acceptProps: {
+                    label: 'Save',
+                    text: true
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmdialog/TemplateDoc.vue b/apps/labs/doc/confirmdialog/TemplateDoc.vue
new file mode 100644
index 000000000..12956bbfe
--- /dev/null
+++ b/apps/labs/doc/confirmdialog/TemplateDoc.vue
@@ -0,0 +1,164 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Templating allows customizing the message content.</p>
+    </DocSectionText>
+    <ConfirmDialog group="templating">
+        <template #message="slotProps">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
+                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-center">
+        <Button @click="showTemplate()" label="Save"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmDialog group="templating">
+    <template #message="slotProps">
+        <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
+            <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
+            <p>{{ slotProps.message.message }}</p>
+        </div>
+    </template>
+</ConfirmDialog>
+<Button @click="showTemplate()" label="Save"></Button>
+`,
+                options: `
+<template>
+    <ConfirmDialog group="templating">
+        <template #message="slotProps">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
+                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-center">
+        <Button @click="showTemplate()" label="Save"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script>
+export default {
+    methods: {
+        showTemplate() {
+            this.$confirm.require({
+                group: 'templating',
+                header: 'Confirmation',
+                message: 'Please confirm to proceed moving forward.',
+                icon: 'pi pi-exclamation-circle',
+                rejectProps: {
+                    label: 'Cancel',
+                    icon: 'pi pi-times',
+                    outlined: true,
+                    size: 'small'
+                },
+                acceptProps: {
+                    label: 'Save',
+                    icon: 'pi pi-check',
+                    size: 'small'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <ConfirmDialog group="templating">
+        <template #message="slotProps">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
+                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-center">
+        <Button @click="showTemplate()" label="Save"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const showTemplate = () => {
+    confirm.require({
+        group: 'templating',
+        header: 'Confirmation',
+        message: 'Please confirm to proceed moving forward.',
+        icon: 'pi pi-exclamation-circle',
+        rejectProps: {
+            label: 'Cancel',
+            icon: 'pi pi-times',
+            outlined: true,
+            size: 'small'
+        },
+        acceptProps: {
+            label: 'Save',
+            icon: 'pi pi-check',
+            size: 'small'
+        },
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        showTemplate() {
+            this.$confirm.require({
+                group: 'templating',
+                header: 'Confirmation',
+                message: 'Please confirm to proceed moving forward.',
+                icon: 'pi pi-exclamation-circle',
+                rejectProps: {
+                    label: 'Cancel',
+                    icon: 'pi pi-times',
+                    outlined: true,
+                    size: 'small'
+                },
+                acceptProps: {
+                    label: 'Save',
+                    icon: 'pi pi-check',
+                    size: 'small'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmpopup/AccessibilityDoc.vue b/apps/labs/doc/confirmpopup/AccessibilityDoc.vue
new file mode 100644
index 000000000..de059239d
--- /dev/null
+++ b/apps/labs/doc/confirmpopup/AccessibilityDoc.vue
@@ -0,0 +1,107 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
+            <i>aria-modal</i> is added since focus is kept within the popup.
+        </p>
+        <p>
+            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmPopup adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
+            trigger and the dialog is defined.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Overlay Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Buttons Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+<ConfirmPopup id="confirm" aria-label="popup" />
+
+<Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />
+`
+            },
+            code2: {
+                basic: `
+<script setup>
+const confirm = useConfirm();
+const isVisible = ref(false);
+const openPopup = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        onShow: () => {
+            isVisible.value = true;
+        },
+        onHide: () => {
+            isVisible.value = false;
+        }
+    });
+}
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmpopup/BasicDoc.vue b/apps/labs/doc/confirmpopup/BasicDoc.vue
new file mode 100644
index 000000000..241061c89
--- /dev/null
+++ b/apps/labs/doc/confirmpopup/BasicDoc.vue
@@ -0,0 +1,195 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
+    </DocSectionText>
+    <ConfirmPopup></ConfirmPopup>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1($event)" label="Save" outlined></Button>
+        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmPopup></ConfirmPopup>
+<Button @click="confirm1($event)" label="Save" outlined></Button>
+<Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
+`,
+                options: `
+<template>
+    <Toast />
+    <ConfirmPopup></ConfirmPopup>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1($event)" label="Save" outlined></Button>
+        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        confirm1(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Save'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        },
+        confirm2(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Do you want to delete this record?',
+                icon: 'pi pi-info-circle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Delete',
+                    severity: 'danger'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        },
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <Toast />
+    <ConfirmPopup></ConfirmPopup>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1($event)" label="Save" outlined></Button>
+        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm1 = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Save'
+        },
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+
+const confirm2 = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Do you want to delete this record?',
+        icon: 'pi pi-info-circle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Delete',
+            severity: 'danger'
+        },
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        confirm1(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Save'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        },
+        confirm2(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Do you want to delete this record?',
+                icon: 'pi pi-info-circle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Delete',
+                    severity: 'danger'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmpopup/ConfirmationServiceDoc.vue b/apps/labs/doc/confirmpopup/ConfirmationServiceDoc.vue
new file mode 100644
index 000000000..ed87bc88a
--- /dev/null
+++ b/apps/labs/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+    <div class="doc-section-description">
+        <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
+    </div>
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import {createApp} from 'vue';
+import ConfirmationService from 'primevue/confirmationservice';
+
+const app = createApp(App);
+app.use(ConfirmationService);
+`
+            },
+            code2: {
+                basic: `
+import { useConfirm } from "primevue/useconfirm";
+
+const confirm = useConfirm();
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmpopup/HeadlessDoc.vue b/apps/labs/doc/confirmpopup/HeadlessDoc.vue
new file mode 100644
index 000000000..e792019ad
--- /dev/null
+++ b/apps/labs/doc/confirmpopup/HeadlessDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
+    </DocSectionText>
+    <ConfirmPopup group="headless">
+        <template #container="{ message, acceptCallback, rejectCallback }">
+            <div class="rounded p-4">
+                <span>{{ message.message }}</span>
+                <div class="flex items-center gap-2 mt-4">
+                    <Button label="Save" @click="acceptCallback" size="small"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-center">
+        <Button @click="requireConfirmation($event)" label="Save"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmPopup group="headless">
+    <template #container="{ message, acceptCallback, rejectCallback }">
+        <div class="rounded p-4">
+            <span>{{ message.message }}</span>
+            <div class="flex items-center gap-2 mt-4">
+                <Button label="Save" @click="acceptCallback" size="small"></Button>
+                <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
+            </div>
+        </div>
+    </template>
+</ConfirmPopup>
+<Button @click="requireConfirmation($event)" label="Save"></Button>
+`,
+                options: `
+<template>
+    <Toast />
+    <ConfirmPopup group="headless">
+        <template #container="{ message, acceptCallback, rejectCallback }">
+            <div class="rounded p-4">
+                <span>{{ message.message }}</span>
+                <div class="flex items-center gap-2 mt-4">
+                    <Button label="Save" @click="acceptCallback" size="small"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-center">
+        <Button @click="requireConfirmation($event)" label="Save"></Button>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        requireConfirmation(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                group: 'headless',
+                message: 'Save your current process?',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <Toast />
+    <ConfirmPopup group="headless">
+        <template #container="{ message, acceptCallback, rejectCallback }">
+            <div class="rounded p-4">
+                <span>{{ message.message }}</span>
+                <div class="flex items-center gap-2 mt-4">
+                    <Button label="Save" @click="acceptCallback" size="small"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-center">
+        <Button @click="requireConfirmation($event)" label="Save"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const requireConfirmation = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        group: 'headless',
+        message: 'Save your current process?',
+        accept: () => {
+            toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+        },
+        reject: () => {
+            toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
+        }
+    });
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        requireConfirmation(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                group: 'headless',
+                message: 'Save your current process?',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmpopup/ImportDoc.vue b/apps/labs/doc/confirmpopup/ImportDoc.vue
new file mode 100644
index 000000000..efdcb08f7
--- /dev/null
+++ b/apps/labs/doc/confirmpopup/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ConfirmPopup from 'primevue/confirmpopup';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/confirmpopup/TemplateDoc.vue b/apps/labs/doc/confirmpopup/TemplateDoc.vue
new file mode 100644
index 000000000..fbbdf01c9
--- /dev/null
+++ b/apps/labs/doc/confirmpopup/TemplateDoc.vue
@@ -0,0 +1,158 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Templating allows customizing the message content.</p>
+    </DocSectionText>
+    <ConfirmPopup group="templating">
+        <template #message="slotProps">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-center">
+        <Button @click="showTemplate($event)" label="Save"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmPopup group="templating">
+    <template #message="slotProps">
+        <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
+            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+            <p>{{ slotProps.message.message }}</p>
+        </div>
+    </template>
+</ConfirmPopup>
+<Button @click="showTemplate($event)" label="Save"></Button>
+`,
+                options: `
+<template>
+    <Toast />
+    <ConfirmPopup group="templating">
+        <template #message="slotProps">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-center">
+        <Button @click="showTemplate($event)" label="Save"></Button>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        showTemplate(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                group: 'templating',
+                message: 'Please confirm to proceed moving forward.',
+                icon: 'pi pi-exclamation-circle',
+                rejectProps: {
+                    icon: 'pi pi-times',
+                    label: 'Cancel',
+                    outlined: true
+                },
+                acceptProps: {
+                    icon: 'pi pi-check',
+                    label: 'Confirm'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <Toast />
+    <ConfirmPopup group="templating">
+        <template #message="slotProps">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-center">
+        <Button @click="showTemplate($event)" label="Save"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const showTemplate = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        group: 'templating',
+        message: 'Please confirm to proceed moving forward.',
+        icon: 'pi pi-exclamation-circle',
+        rejectProps: {
+            icon: 'pi pi-times',
+            label: 'Cancel',
+            outlined: true
+        },
+        acceptProps: {
+            icon: 'pi pi-check',
+            label: 'Confirm'
+        },
+        accept: () => {
+            toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+        },
+        reject: () => {
+            toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
+        }
+    });
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        showTemplate(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                group: 'templating',
+                message: 'Please confirm to proceed moving forward.',
+                icon: 'pi pi-exclamation-circle',
+                rejectProps: {
+                    icon: 'pi pi-times',
+                    label: 'Cancel',
+                    outlined: true
+                },
+                acceptProps: {
+                    icon: 'pi pi-check',
+                    label: 'Confirm'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/contextmenu/AccessibilityDoc.vue b/apps/labs/doc/contextmenu/AccessibilityDoc.vue
new file mode 100644
index 000000000..c7b43a5b7
--- /dev/null
+++ b/apps/labs/doc/contextmenu/AccessibilityDoc.vue
@@ -0,0 +1,88 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
+            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as
+            the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i> and <i>aria-expanded</i> to define the relation between the item and the submenu.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the context menu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Opens a submenu if there is one available and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/contextmenu/BasicDoc.vue b/apps/labs/doc/contextmenu/BasicDoc.vue
new file mode 100644
index 000000000..68e9ecb53
--- /dev/null
+++ b/apps/labs/doc/contextmenu/BasicDoc.vue
@@ -0,0 +1,83 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using an event of the target like <i>contextmenu</i> to display the menu.</p>
+    </DocSectionText>
+    <div class="card flex md:justify-center">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
+        <ContextMenu ref="menu" :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'Copy', icon: 'pi pi-copy' },
+                { label: 'Rename', icon: 'pi pi-file-edit' }
+            ],
+            code: {
+                basic: `
+<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
+<ContextMenu ref="menu" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex md:justify-center">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-[30rem] rounded shadow-lg" aria-haspopup="true" />
+        <ContextMenu ref="menu" :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'Copy', icon: 'pi pi-copy' },
+                { label: 'Rename', icon: 'pi pi-file-edit' }
+            ]
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-[30rem] rounded shadow-lg" aria-haspopup="true" />
+        <ContextMenu ref="menu" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref();
+const items = ref([
+    { label: 'Copy', icon: 'pi pi-copy' },
+    { label: 'Rename', icon: 'pi pi-file-edit' }
+]);
+
+const onImageRightClick = (event) => {
+    menu.value.show(event);
+};
+
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/contextmenu/CommandDoc.vue b/apps/labs/doc/contextmenu/CommandDoc.vue
new file mode 100644
index 000000000..ce7044bba
--- /dev/null
+++ b/apps/labs/doc/contextmenu/CommandDoc.vue
@@ -0,0 +1,269 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <div class="card flex sm:justify-center">
+        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
+            <li
+                v-for="user in users"
+                :key="user.id"
+                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                @contextmenu="onRightClick($event, user)"
+            >
+                <div class="flex flex-1 items-center gap-2">
+                    <img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" class="w-8 h-8" />
+                    <span class="font-bold">{{ user.name }}</span>
+                </div>
+                <Tag :value="user.role" :severity="getBadge(user)" />
+            </li>
+        </ul>
+        <ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedUser: null,
+            users: [
+                { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
+                { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
+                { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
+                { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
+                { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
+            ],
+            items: [
+                {
+                    label: 'Roles',
+                    icon: 'pi pi-users',
+                    items: [
+                        {
+                            label: 'Admin',
+                            command: () => {
+                                this.selectedUser.role = 'Admin';
+                            }
+                        },
+                        {
+                            label: 'Member',
+                            command: () => {
+                                this.selectedUser.role = 'Member';
+                            }
+                        },
+                        {
+                            label: 'Guest',
+                            command: () => {
+                                this.selectedUser.role = 'Guest';
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Invite',
+                    icon: 'pi pi-user-plus',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
+    <li
+        v-for="user in users"
+        :key="user.id"
+        :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+        @contextmenu="onRightClick($event, user)"
+    >
+        <div class="flex flex-1 items-center gap-2">
+            <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
+            <span class="font-bold">{{ user.name }}</span>
+        </div>
+        <Tag :value="user.role" :severity="getBadge(user)" />
+    </li>
+</ul>
+<ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
+<Toast />
+`,
+                options: `
+<template>
+    <div class="card flex sm:justify-center">
+        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
+            <li
+                v-for="user in users"
+                :key="user.id"
+                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                @contextmenu="onRightClick($event, user)"
+            >
+                <div class="flex flex-1 items-center gap-2">
+                    <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
+                    <span class="font-bold">{{ user.name }}</span>
+                </div>
+                <Tag :value="user.role" :severity="getBadge(user)" />
+            </li>
+        </ul>
+        <ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedUser: null,
+            users: [
+                { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
+                { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
+                { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
+                { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
+                { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
+            ],
+            items: [
+                {
+                    label: 'Roles',
+                    icon: 'pi pi-users',
+                    items: [
+                        {
+                            label: 'Admin',
+                            command: () => {
+                                this.selectedUser.role = 'Admin';
+                            }
+                        },
+                        {
+                            label: 'Member',
+                            command: () => {
+                                this.selectedUser.role = 'Member';
+                            }
+                        },
+                        {
+                            label: 'Guest',
+                            command: () => {
+                                this.selectedUser.role = 'Guest';
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Invite',
+                    icon: 'pi pi-user-plus',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        onRightClick(event, user) {
+            this.selectedUser = user;
+            this.$refs.menu.show(event);
+        },
+        getBadge(user) {
+            if (user.role === 'Member') return 'info';
+            else if (user.role === 'Guest') return 'warn';
+            else return null;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex sm:justify-center">
+        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
+            <li
+                v-for="user in users"
+                :key="user.id"
+                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                @contextmenu="onRightClick($event, user)"
+            >
+                <div class="flex flex-1 items-center gap-2">
+                    <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
+                    <span class="font-bold">{{ user.name }}</span>
+                </div>
+                <Tag :value="user.role" :severity="getBadge(user)" />
+            </li>
+        </ul>
+        <ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+const selectedUser = ref();
+const menu = ref();
+const users = ref([
+    { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
+    { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
+    { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
+    { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
+    { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
+]);
+const items = ref([
+    {
+        label: 'Roles',
+        icon: 'pi pi-users',
+        items: [
+            {
+                label: 'Admin',
+                command: () => {
+                    selectedUser.value.role = 'Admin';
+                }
+            },
+            {
+                label: 'Member',
+                command: () => {
+                    selectedUser.value.role = 'Member';
+                }
+            },
+            {
+                label: 'Guest',
+                command: () => {
+                    selectedUser.value.role = 'Guest';
+                }
+            }
+        ]
+    },
+    {
+        label: 'Invite',
+        icon: 'pi pi-user-plus',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
+        }
+    }
+]);
+
+const onRightClick = (event, user) => {
+    selectedUser.value = user;
+    menu.value.show(event);
+};
+
+const getBadge = (user) => {
+    if (user.role === 'Member') return 'info';
+    else if (user.role === 'Guest') return 'warn';
+    else return null;
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onRightClick(event, user) {
+            this.selectedUser = user;
+            this.$refs.menu.show(event);
+        },
+        getBadge(user) {
+            if (user.role === 'Member') return 'info';
+            else if (user.role === 'Guest') return 'warn';
+            else return null;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/contextmenu/DataTableDoc.vue b/apps/labs/doc/contextmenu/DataTableDoc.vue
new file mode 100644
index 000000000..280f02d11
--- /dev/null
+++ b/apps/labs/doc/contextmenu/DataTableDoc.vue
@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DataTable has built-in support for ContextMenu, see the <NuxtLink to="/datatable/#contextmenu">ContextMenu</NuxtLink> demo for an example.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/contextmenu/DocumentDoc.vue b/apps/labs/doc/contextmenu/DocumentDoc.vue
new file mode 100644
index 000000000..3f753a66a
--- /dev/null
+++ b/apps/labs/doc/contextmenu/DocumentDoc.vue
@@ -0,0 +1,135 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Setting global property attaches the context menu to the document.</p>
+    </DocSectionText>
+    <div class="card text-center">
+        <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
+        <ContextMenu global :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Translate',
+                    icon: 'pi pi-language'
+                },
+                {
+                    label: 'Speech',
+                    icon: 'pi pi-volume-up',
+                    items: [
+                        {
+                            label: 'Start',
+                            icon: 'pi pi-caret-right'
+                        },
+                        {
+                            label: 'Stop',
+                            icon: 'pi pi-pause'
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print'
+                }
+            ],
+            code: {
+                basic: `
+<ContextMenu global :model="items" />
+`,
+                options: `
+<template>
+    <div class="card text-center">
+        <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
+        <ContextMenu global :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Translate',
+                    icon: 'pi pi-language'
+                },
+                {
+                    label: 'Speech',
+                    icon: 'pi pi-volume-up',
+                    items: [
+                        {
+                            label: 'Start',
+                            icon: 'pi pi-caret-right'
+                        },
+                        {
+                            label: 'Stop',
+                            icon: 'pi pi-pause'
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print'
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card text-center">
+        <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
+        <ContextMenu global :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Translate',
+        icon: 'pi pi-language'
+    },
+    {
+        label: 'Speech',
+        icon: 'pi pi-volume-up',
+        items: [
+            {
+                label: 'Start',
+                icon: 'pi pi-caret-right'
+            },
+            {
+                label: 'Stop',
+                icon: 'pi pi-pause'
+            }
+        ]
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Print',
+        icon: 'pi pi-print'
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/contextmenu/ImportDoc.vue b/apps/labs/doc/contextmenu/ImportDoc.vue
new file mode 100644
index 000000000..61db50a6d
--- /dev/null
+++ b/apps/labs/doc/contextmenu/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ContextMenu from 'primevue/contextmenu';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/contextmenu/RouterDoc.vue b/apps/labs/doc/contextmenu/RouterDoc.vue
new file mode 100644
index 000000000..642f017c7
--- /dev/null
+++ b/apps/labs/doc/contextmenu/RouterDoc.vue
@@ -0,0 +1,220 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </span>
+        <ContextMenu ref="routemenu" :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+            </template>
+        </ContextMenu>
+    </div>
+    <DocSectionCode :code="code" hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router Link',
+                    icon: 'pi pi-palette',
+                    route: '/slider'
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    url: 'https://vuejs.org/'
+                }
+            ],
+            code: {
+                basic: `
+<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
+    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="..." fill="var(--p-primary-color)" />
+        <path d="..." fill="var(--p-text-color)" />
+    </svg>
+</span>
+<ContextMenu ref="routemenu" :model="items">
+    <template #item="{ item, props }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                <span :class="item.icon" />
+                <span class="ml-2">{{ item.label }}</span>
+            </a>
+        </router-link>
+        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+        </a>
+    </template>
+</ContextMenu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </span>
+        <ContextMenu ref="routemenu" :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+            </template>
+        </ContextMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router Link',
+                    icon: 'pi pi-palette',
+                    route: '/slider'
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    url: 'https://vuejs.org/'
+                }
+            ]
+        };
+    },
+    methods: {
+        onRightClick(event) {
+            this.$refs.routemenu.show(event);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </span>
+        <ContextMenu ref="routemenu" :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+            </template>
+        </ContextMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const routemenu = ref();
+const items = ref([
+    {
+        label: 'Router Link',
+        icon: 'pi pi-palette',
+        route: '/slider'
+    },
+    {
+        label: 'Programmatic',
+        icon: 'pi pi-link',
+        command: () => {
+            router.push('/slider');
+        }
+    },
+    {
+        label: 'External',
+        icon: 'pi pi-home',
+        url: 'https://vuejs.org/'
+    }
+]);
+
+const onRightClick = (event) => {
+    routemenu.value.show(event);
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onRightClick(event) {
+            this.$refs.routemenu.show(event);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/contextmenu/TemplateDoc.vue b/apps/labs/doc/contextmenu/TemplateDoc.vue
new file mode 100644
index 000000000..57b8217cc
--- /dev/null
+++ b/apps/labs/doc/contextmenu/TemplateDoc.vue
@@ -0,0 +1,320 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ContextMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
+            <li
+                v-for="product in products"
+                :key="product.id"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
+                @contextmenu="onRightClick($event, product.id)"
+            >
+                <div class="flex flex-wrap p-2 items-center gap-4">
+                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <div class="flex-1 flex flex-col gap-1">
+                        <span class="font-bold">{{ product.name }}</span>
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ product.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold ml-8">${{ product.price }}</span>
+                </div>
+            </li>
+        </ul>
+        <ContextMenu ref="menu" :model="items" @hide="selectedId = null">
+            <template #item="{ item, props }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
+                </a>
+            </template>
+        </ContextMenu>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedId: null,
+            items: [
+                {
+                    label: 'Favorite',
+                    icon: 'pi pi-star',
+                    shortcut: '⌘+D'
+                },
+                {
+                    label: 'Add',
+                    icon: 'pi pi-shopping-cart',
+                    shortcut: '⌘+A'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp',
+                            badge: 2
+                        },
+                        {
+                            label: 'Instagram',
+                            icon: 'pi pi-instagram',
+                            badge: 3
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
+    <li
+        v-for="product in products"
+        :key="product.id"
+        :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
+        @contextmenu="onRightClick($event, product.id)"
+    >
+        <div class="flex flex-wrap p-2 items-center gap-4">
+            <img class="w-16 shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
+            <div class="flex-1 flex flex-col gap-1">
+                <span class="font-bold">{{ product.name }}</span>
+                <div class="flex items-center gap-2">
+                    <i class="pi pi-tag text-sm"></i>
+                    <span>{{ product.category }}</span>
+                </div>
+            </div>
+            <span class="font-bold ml-8">\${{ product.price }}</span>
+        </div>
+    </li>
+</ul>
+<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
+    <template #item="{ item, props }">
+        <a v-ripple class="flex items-center" v-bind="props.action">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+            <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
+        </a>
+    </template>
+</ContextMenu>
+`,
+                options: `
+<template>
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
+            <li
+                v-for="product in products"
+                :key="product.id"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
+                @contextmenu="onRightClick($event, product.id)"
+            >
+                <div class="flex flex-wrap p-2 items-center gap-4">
+                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <div class="flex-1 flex flex-col gap-1">
+                        <span class="font-bold">{{ product.name }}</span>
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ product.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold ml-8">\${{ product.price }}</span>
+                </div>
+            </li>
+        </ul>
+        <ContextMenu ref="menu" :model="items" @hide="selectedId = null">
+            <template #item="{ item, props }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
+                </a>
+            </template>
+        </ContextMenu>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedId: null,
+            items: [
+                {
+                    label: 'Favorite',
+                    icon: 'pi pi-star',
+                    shortcut: '⌘+D'
+                },
+                {
+                    label: 'Add',
+                    icon: 'pi pi-shopping-cart',
+                    shortcut: '⌘+A'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp',
+                            badge: 2
+                        },
+                        {
+                            label: 'Instagram',
+                            icon: 'pi pi-instagram',
+                            badge: 3
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    },
+    methods: {
+        onRightClick(event, id) {
+            this.selectedId = id;
+            this.$refs.menu.show(event);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]" @hide="selectedId = null">
+            <li
+                v-for="product in products"
+                :key="product.id"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
+                @contextmenu="onRightClick($event, product.id)"
+            >
+                <div class="flex flex-wrap p-2 items-center gap-4">
+                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <div class="flex-1 flex flex-col gap-1">
+                        <span class="font-bold">{{ product.name }}</span>
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ product.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold ml-8">\${{ product.price }}</span>
+                </div>
+            </li>
+        </ul>
+        <ContextMenu ref="menu" :model="items">
+            <template #item="{ item, props }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
+                </a>
+            </template>
+        </ContextMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const menu = ref();
+const items = ref([
+    {
+        label: 'Favorite',
+        icon: 'pi pi-star',
+        shortcut: '⌘+D'
+    },
+    {
+        label: 'Add',
+        icon: 'pi pi-shopping-cart',
+        shortcut: '⌘+A'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp',
+                badge: 2
+            },
+            {
+                label: 'Instagram',
+                icon: 'pi pi-instagram',
+                badge: 3
+            }
+        ]
+    }
+]);
+
+const products = ref(null);
+const selectedId = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+
+const onRightClick = (event, id) => {
+    selectedId.value = id;
+    menu.value.show(event);
+};
+
+<\/script>
+`
+            },
+            data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        onRightClick(event, id) {
+            this.selectedId = id;
+            this.$refs.menu.show(event);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/customicons/FontAwesomeDoc.vue b/apps/labs/doc/customicons/FontAwesomeDoc.vue
new file mode 100644
index 000000000..6415e68a2
--- /dev/null
+++ b/apps/labs/doc/customicons/FontAwesomeDoc.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Select>
+    <template #dropdownicon>
+        <i class="fa-light fa-chevron-down"></i>
+    </template>
+</Select>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/customicons/ImageDoc.vue b/apps/labs/doc/customicons/ImageDoc.vue
new file mode 100644
index 000000000..e39080223
--- /dev/null
+++ b/apps/labs/doc/customicons/ImageDoc.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Any time of image can be used as an icon.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Select>
+    <template #dropdownicon>
+        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
+    </template>
+</Select>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/customicons/MaterialDoc.vue b/apps/labs/doc/customicons/MaterialDoc.vue
new file mode 100644
index 000000000..4745ad008
--- /dev/null
+++ b/apps/labs/doc/customicons/MaterialDoc.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Select>
+    <template #dropdownicon>
+        <span class="material-icons">arrow_drop_down</span>
+    </template>
+</Select>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/customicons/SVGDoc.vue b/apps/labs/doc/customicons/SVGDoc.vue
new file mode 100644
index 000000000..208f276cf
--- /dev/null
+++ b/apps/labs/doc/customicons/SVGDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Inline SVGs are embedded inside the dom.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Select>
+    <template #dropdownicon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g id="chevron-down">
+                <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
+            </g>
+        </svg>
+    </template>
+</Select>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/customicons/VideoDoc.vue b/apps/labs/doc/customicons/VideoDoc.vue
new file mode 100644
index 000000000..d809d3b48
--- /dev/null
+++ b/apps/labs/doc/customicons/VideoDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A video tutorial to demonstrate how to customize icons.</p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/C_eZelJPs6o?si=GFNZIUVHzM-P9vNe" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>
diff --git a/apps/labs/doc/datatable/AccessibilityDoc.vue b/apps/labs/doc/datatable/AccessibilityDoc.vue
new file mode 100644
index 000000000..209b14abd
--- /dev/null
+++ b/apps/labs/doc/datatable/AccessibilityDoc.vue
@@ -0,0 +1,176 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table for
+            readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers utilizer
+            <i>aria-sort</i> attribute either set to "ascending" or "descending".
+        </p>
+
+        <p>
+            Built-in checkbox and radiobutton components for row selection use <i>checkbox</i> and <i>radiobutton</i>. The label to describe them is retrieved from the <i>aria.selectRow</i> and <i>aria.unselectRow</i> properties of the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Similarly header checkbox uses <i>selectAll</i> and <i>unselectAll</i> keys. When a row is selected, <i>aria-selected</i> is
+            set to true on a row.
+        </p>
+
+        <p>
+            The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties of the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
+        </p>
+
+        <p>
+            The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the
+            button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
+            <i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and <i>aria.apply</i> properties.
+            <i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well.
+        </p>
+
+        <p>
+            Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used for the
+            <i>aria-label</i>.
+        </p>
+
+        <p>Paginator is a standalone component used inside the DataTable, refer to the <PrimeVueNuxtLink to="/paginator">paginator</PrimeVueNuxtLink> for more information about the accessibility features.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Any button element inside the DataTable used for cases like filter, row expansion, edit are tabbable and can be used with <i>space</i> and <i>enter</i> keys.</p>
+
+        <h3>Sortable Headers Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves through the headers.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Sorts the column.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Sorts the column.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Filter Menu Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves through the elements inside the popup.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Hides the popup.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Selection Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the first selected row, if there is none then first row receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous row.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next row.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the selected state of the focused row depending on the metaKeySelection setting.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the selected state of the focused row depending on the metaKeySelection setting.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first row.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last row.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next row and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous row and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the rows between the most recently selected row and the focused row.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused rows and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused rows and all the options down to the last one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all rows.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/datatable/BasicDoc.vue b/apps/labs/doc/datatable/BasicDoc.vue
new file mode 100644
index 000000000..9e1b380f1
--- /dev/null
+++ b/apps/labs/doc/datatable/BasicDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DataTable requires a <i>value</i> as data to display and <i>Column</i> components as children for the representation.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/ColumnGroupDoc.vue b/apps/labs/doc/datatable/ColumnGroupDoc.vue
new file mode 100644
index 000000000..e073b8233
--- /dev/null
+++ b/apps/labs/doc/datatable/ColumnGroupDoc.vue
@@ -0,0 +1,339 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Columns can be grouped within a <i>Row</i> component and groups can be displayed within a ColumnGroup component. These groups can be displayed using <i>type</i> property that can be <i>header</i> or <i>footer</i>. Number of cells and rows
+            to span are defined with the <i>colspan</i> and <i>rowspan</i> properties of a Column.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="sales" tableStyle="min-width: 50rem">
+                <ColumnGroup type="header">
+                    <Row>
+                        <Column header="Product" :rowspan="3" />
+                        <Column header="Sale Rate" :colspan="4" />
+                    </Row>
+                    <Row>
+                        <Column header="Sales" :colspan="2" />
+                        <Column header="Profits" :colspan="2" />
+                    </Row>
+                    <Row>
+                        <Column header="Last Year" sortable field="lastYearSale" />
+                        <Column header="This Year" sortable field="thisYearSale" />
+                        <Column header="Last Year" sortable field="lastYearProfit" />
+                        <Column header="This Year" sortable field="thisYearProfit" />
+                    </Row>
+                </ColumnGroup>
+                <Column field="product" />
+                <Column field="lastYearSale">
+                    <template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
+                </Column>
+                <Column field="thisYearSale">
+                    <template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
+                </Column>
+                <Column field="lastYearProfit">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.lastYearProfit) }}
+                    </template>
+                </Column>
+                <Column field="thisYearProfit">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.thisYearProfit) }}
+                    </template>
+                </Column>
+                <ColumnGroup type="footer">
+                    <Row>
+                        <Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
+                        <Column :footer="lastYearTotal" />
+                        <Column :footer="thisYearTotal" />
+                    </Row>
+                </ColumnGroup>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sales: null,
+            code: {
+                basic: `
+<DataTable :value="sales" tableStyle="min-width: 50rem">
+    <ColumnGroup type="header">
+        <Row>
+            <Column header="Product" :rowspan="3" />
+            <Column header="Sale Rate" :colspan="4" />
+        </Row>
+        <Row>
+            <Column header="Sales" :colspan="2" />
+            <Column header="Profits" :colspan="2" />
+        </Row>
+        <Row>
+            <Column header="Last Year" sortable field="lastYearSale" />
+            <Column header="This Year" sortable field="thisYearSale" />
+            <Column header="Last Year" sortable field="lastYearProfit" />
+            <Column header="This Year" sortable field="thisYearProfit" />
+        </Row>
+    </ColumnGroup>
+    <Column field="product" />
+    <Column field="lastYearSale">
+        <template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
+    </Column>
+    <Column field="thisYearSale">
+        <template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
+    </Column>
+    <Column field="lastYearProfit">
+        <template #body="slotProps">
+            {{ formatCurrency(slotProps.data.lastYearProfit) }}
+        </template>
+    </Column>
+    <Column field="thisYearProfit">
+        <template #body="slotProps">
+            {{ formatCurrency(slotProps.data.thisYearProfit) }}
+        </template>
+    </Column>
+    <ColumnGroup type="footer">
+        <Row>
+            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
+            <Column :footer="lastYearTotal" />
+            <Column :footer="thisYearTotal" />
+        </Row>
+    </ColumnGroup>
+</DataTable>
+`,
+                options: `
+<template>
+    <DataTable :value="sales" tableStyle="min-width: 50rem">
+        <ColumnGroup type="header">
+            <Row>
+                <Column header="Product" :rowspan="3" />
+                <Column header="Sale Rate" :colspan="4" />
+            </Row>
+            <Row>
+                <Column header="Sales" :colspan="2" />
+                <Column header="Profits" :colspan="2" />
+            </Row>
+            <Row>
+                <Column header="Last Year" sortable field="lastYearSale"/>
+                <Column header="This Year" sortable field="thisYearSale"/>
+                <Column header="Last Year" sortable field="lastYearProfit"/>
+                <Column header="This Year" sortable field="thisYearProfit"/>
+            </Row>
+        </ColumnGroup>
+        <Column field="product" />
+        <Column field="lastYearSale">
+            <template #body="slotProps">
+                {{slotProps.data.lastYearSale}}%
+            </template>
+        </Column>
+        <Column field="thisYearSale">
+            <template #body="slotProps">
+                {{slotProps.data.thisYearSale}}%
+            </template>
+        </Column>
+        <Column field="lastYearProfit">
+            <template #body="slotProps">
+                {{formatCurrency(slotProps.data.lastYearProfit)}}
+            </template>
+        </Column>
+        <Column field="thisYearProfit">
+            <template #body="slotProps">
+                {{formatCurrency(slotProps.data.thisYearProfit)}}
+            </template>
+        </Column>
+        <ColumnGroup type="footer">
+            <Row>
+                <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
+                <Column :footer="lastYearTotal" />
+                <Column :footer="thisYearTotal" />
+            </Row>
+        </ColumnGroup>
+    </DataTable>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sales: null
+        }
+    },
+    created() {
+        this.sales = [
+            {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
+            {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
+            {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
+            {product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
+            {product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
+            {product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale:  65, lastYearProfit: 421132, thisYearProfit: 150005},
+            {product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
+            {product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
+            {product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
+            {product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
+        ];
+    },
+    methods: {
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        }
+    },
+    computed: {
+        lastYearTotal() {
+            let total = 0;
+            for(let sale of this.sales) {
+                total += sale.lastYearProfit;
+            }
+
+            return this.formatCurrency(total);
+        },
+        thisYearTotal() {
+            let total = 0;
+            for(let sale of this.sales) {
+                total += sale.thisYearProfit;
+            }
+
+            return this.formatCurrency(total);
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <DataTable :value="sales" tableStyle="min-width: 50rem">
+        <ColumnGroup type="header">
+            <Row>
+                <Column header="Product" :rowspan="3" />
+                <Column header="Sale Rate" :colspan="4" />
+            </Row>
+            <Row>
+                <Column header="Sales" :colspan="2" />
+                <Column header="Profits" :colspan="2" />
+            </Row>
+            <Row>
+                <Column header="Last Year" sortable field="lastYearSale"/>
+                <Column header="This Year" sortable field="thisYearSale"/>
+                <Column header="Last Year" sortable field="lastYearProfit"/>
+                <Column header="This Year" sortable field="thisYearProfit"/>
+            </Row>
+        </ColumnGroup>
+        <Column field="product" />
+        <Column field="lastYearSale">
+            <template #body="slotProps">
+                {{slotProps.data.lastYearSale}}%
+            </template>
+        </Column>
+        <Column field="thisYearSale">
+            <template #body="slotProps">
+                {{slotProps.data.thisYearSale}}%
+            </template>
+        </Column>
+        <Column field="lastYearProfit">
+            <template #body="slotProps">
+                {{formatCurrency(slotProps.data.lastYearProfit)}}
+            </template>
+        </Column>
+        <Column field="thisYearProfit">
+            <template #body="slotProps">
+                {{formatCurrency(slotProps.data.thisYearProfit)}}
+            </template>
+        </Column>
+        <ColumnGroup type="footer">
+            <Row>
+                <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
+                <Column :footer="lastYearTotal" />
+                <Column :footer="thisYearTotal" />
+            </Row>
+        </ColumnGroup>
+    </DataTable>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+
+const sales = ref([
+    {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
+    {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
+    {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
+    {product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
+    {product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
+    {product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale:  65, lastYearProfit: 421132, thisYearProfit: 150005},
+    {product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
+    {product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
+    {product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
+    {product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
+]);
+
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+};
+
+const lastYearTotal = computed(() => {
+    let total = 0;
+    for(let sale of sales.value) {
+        total += sale.lastYearProfit;
+    }
+
+    return formatCurrency(total);
+});
+
+const thisYearTotal = computed(() => {
+    let total = 0;
+    for(let sale of sales.value) {
+        total += sale.thisYearProfit;
+    }
+
+    return formatCurrency(total);
+});
+
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            this.sales = [
+                { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
+                { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
+                { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 },
+                { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 },
+                { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 },
+                { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 },
+                { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 },
+                { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 },
+                { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 },
+                { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 }
+            ];
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        }
+    },
+    computed: {
+        lastYearTotal() {
+            let total = 0;
+
+            for (let sale of this.sales) {
+                total += sale.lastYearProfit;
+            }
+
+            return this.formatCurrency(total);
+        },
+        thisYearTotal() {
+            let total = 0;
+
+            for (let sale of this.sales) {
+                total += sale.thisYearProfit;
+            }
+
+            return this.formatCurrency(total);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/ColumnToggleDoc.vue b/apps/labs/doc/datatable/ColumnToggleDoc.vue
new file mode 100644
index 000000000..b8dab4a59
--- /dev/null
+++ b/apps/labs/doc/datatable/ColumnToggleDoc.vue
@@ -0,0 +1,161 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" tableStyle="min-width: 50rem">
+                <template #header>
+                    <div style="text-align: left">
+                        <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle" display="chip" placeholder="Select Columns" />
+                    </div>
+                </template>
+                <Column field="code" header="Code" />
+                <Column v-for="(col, index) of selectedColumns" :key="col.field + '_' + index" :field="col.field" :header="col.header"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            selectedColumns: null,
+            columns: null,
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
+    <template #header>
+        <div style="text-align:left">
+            <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
+                display="chip" placeholder="Select Columns" />
+        </div>
+    </template>
+    <Column field="code" header="Code" />
+    <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div>
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <template #header>
+                <div style="text-align:left">
+                    <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
+                        display="chip" placeholder="Select Columns" />
+                </div>
+            </template>
+            <Column field="code" header="Code" />
+            <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            selectedColumns: null,
+            columns: null,
+            products: null
+        }
+    },
+    created() {
+        this.columns = [
+            {field: 'name', header: 'Name'},
+            {field: 'category', header: 'Category'},
+            {field: 'quantity', header: 'Quantity'}
+        ];
+        this.selectedColumns = this.columns;
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        onToggle(value) {
+            this.selectedColumns = this.columns.filter(col => value.includes(col));
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div>
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <template #header>
+                <div style="text-align:left">
+                    <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
+                        display="chip" placeholder="Select Columns" />
+                </div>
+            </template>
+            <Column field="code" header="Code" />
+            <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const columns = ref([
+    {field: 'name', header: 'Name'},
+    {field: 'category', header: 'Category'},
+    {field: 'quantity', header: 'Quantity'}
+]);
+const selectedColumns = ref(columns.value);
+const products = ref();
+const onToggle = (val) => {
+    selectedColumns.value = columns.value.filter(col => val.includes(col));
+};
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    created() {
+        this.columns = [
+            { field: 'name', header: 'Name' },
+            { field: 'category', header: 'Category' },
+            { field: 'quantity', header: 'Quantity' }
+        ];
+        this.selectedColumns = this.columns;
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        onToggle(value) {
+            this.selectedColumns = this.columns.filter((col) => value.includes(col));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/ConditionalStyleDoc.vue b/apps/labs/doc/datatable/ConditionalStyleDoc.vue
new file mode 100644
index 000000000..43999b8a1
--- /dev/null
+++ b/apps/labs/doc/datatable/ConditionalStyleDoc.vue
@@ -0,0 +1,166 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Particular rows and cells can be styled based on conditions. The <i>rowClass</i> receives a row data as a parameter to return a style class for a row whereas cells are customized using the <i>body</i> template.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity">
+                    <template #body="slotProps">
+                        <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity">
+        <template #body="slotProps">
+            <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity">
+                <template #body="slotProps">
+                    <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    },
+    methods: {
+        rowClass(data) {
+            return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
+        },
+        rowStyle(data) {
+            if (data.quantity === 0) {
+                return { fontWeight: 'bold', fontStyle: 'italic' };
+            }
+        },
+        stockSeverity(data) {
+            if (data.quantity === 0) return 'danger';
+            else if (data.quantity > 0 && data.quantity < 10) return 'warn';
+            else return 'success';
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity">
+                <template #body="slotProps">
+                    <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (this.products = data));
+});
+
+const products = ref();
+
+const rowClass = (data) => {
+    return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
+};
+const rowStyle = (data) => {
+    if (data.quantity === 0) {
+        return { fontWeight: 'bold', fontStyle: 'italic' };
+    }
+};
+const stockSeverity = (data) => {
+    if (data.quantity === 0) return 'danger';
+    else if (data.quantity > 0 && data.quantity < 10) return 'warn';
+    else return 'success';
+}
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsSmall().then((data) => (this.products = data));
+        },
+        rowClass(data) {
+            return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
+        },
+        rowStyle(data) {
+            if (data.quantity === 0) {
+                return { fontWeight: 'bold', fontStyle: 'italic' };
+            }
+        },
+        stockSeverity(data) {
+            if (data.quantity === 0) return 'danger';
+            else if (data.quantity > 0 && data.quantity < 10) return 'warn';
+            else return 'success';
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/ContextMenuDoc.vue b/apps/labs/doc/datatable/ContextMenuDoc.vue
new file mode 100644
index 000000000..d35782449
--- /dev/null
+++ b/apps/labs/doc/datatable/ContextMenuDoc.vue
@@ -0,0 +1,199 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            DataTable has exclusive integration with ContextMenu using the <i>contextMenu</i> event to open a menu on right click alont with <i>contextMenuSelection</i> property and <i>row-contextmenu</i> event to control the selection via the menu.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
+            <DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="price" header="Price">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.price) }}
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            menuModel: [
+                { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct) },
+                { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct) }
+            ],
+            code: {
+                basic: `
+<ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
+<DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu
+        @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="price" header="Price">
+        <template #body="slotProps">
+            {{ formatCurrency(slotProps.data.price) }}
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
+        <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
+                @rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="price" header="Price">
+                <template #body="slotProps">
+                    {{formatCurrency(slotProps.data.price)}}
+            </template>
+            </Column>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            menuModel: [
+                {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
+                {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
+            ]
+        }
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        onRowContextMenu(event) {
+            this.$refs.cm.show(event.originalEvent);
+        },
+        viewProduct(product) {
+            this.$toast.add({severity: 'info', summary: 'Product Selected', detail: product.name, life: 3000});
+        },
+        deleteProduct(product) {
+            this.products = this.products.filter((p) => p.id !== product.id);
+            this.$toast.add({severity: 'error', summary: 'Product Deleted', detail: product.name, life: 3000});
+            this.selectedProduct = null;
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card">
+        <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
+        <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
+                @rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="price" header="Price">
+                <template #body="slotProps">
+                    {{formatCurrency(slotProps.data.price)}}
+                </template>
+                </Column>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const cm = ref();
+const toast = useToast();
+const products = ref();
+const selectedProduct = ref();
+const menuModel = ref([
+    {label: 'View', icon: 'pi pi-fw pi-search', command: () => viewProduct(selectedProduct)},
+    {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => deleteProduct(selectedProduct)}
+]);
+const onRowContextMenu = (event) => {
+    cm.value.show(event.originalEvent);
+};
+const viewProduct = (product) => {
+    toast.add({severity: 'info', summary: 'Product Selected', detail: product.value.name, life: 3000});
+};
+const deleteProduct = (product) => {
+    products.value = products.value.filter((p) => p.id !== product.value.id);
+    toast.add({severity: 'error', summary: 'Product Deleted', detail: product.value.name, life: 3000});
+    selectedProduct.value = null;
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+};
+
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        onRowContextMenu(event) {
+            this.$refs.cm.show(event.originalEvent);
+        },
+        viewProduct(product) {
+            this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: product.name, life: 3000 });
+        },
+        deleteProduct(product) {
+            this.products = this.products.filter((p) => p.id !== product.id);
+            this.$toast.add({ severity: 'error', summary: 'Product Deleted', detail: product.name, life: 3000 });
+            this.selectedProduct = null;
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/DynamicColumnsDoc.vue b/apps/labs/doc/datatable/DynamicColumnsDoc.vue
new file mode 100644
index 000000000..d440b6918
--- /dev/null
+++ b/apps/labs/doc/datatable/DynamicColumnsDoc.vue
@@ -0,0 +1,121 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Columns can be created programmatically.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" tableStyle="min-width: 50rem">
+                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            columns: null,
+            code: {
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
+    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            columns: null
+        };
+    },
+    created() {
+        this.columns = [
+            { field: 'code', header: 'Code' },
+            { field: 'name', header: 'Name' },
+            { field: 'category', header: 'Category' },
+            { field: 'quantity', header: 'Quantity' }
+        ];
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const columns = [
+    { field: 'code', header: 'Code' },
+    { field: 'name', header: 'Name' },
+    { field: 'category', header: 'Category' },
+    { field: 'quantity', header: 'Quantity' }
+];
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    created() {
+        this.columns = [
+            { field: 'code', header: 'Code' },
+            { field: 'name', header: 'Name' },
+            { field: 'category', header: 'Category' },
+            { field: 'quantity', header: 'Quantity' }
+        ];
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/ExportDoc.vue b/apps/labs/doc/datatable/ExportDoc.vue
new file mode 100644
index 000000000..364ef4707
--- /dev/null
+++ b/apps/labs/doc/datatable/ExportDoc.vue
@@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DataTable can export its data to CSV format.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable ref="dt" :value="products" tableStyle="min-width: 50rem">
+                <template #header>
+                    <div class="text-end pb-4">
+                        <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
+                    </div>
+                </template>
+                <Column field="code" header="Code" exportHeader="Product Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
+    <template #header>
+        <div class="text-end pb-4">
+            <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
+        </div>
+    </template>
+    <Column field="code" header="Code" exportHeader="Product Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div>
+        <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
+            <template #header>
+                <div class="text-end pb-4">
+                    <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
+                </div>
+            </template>
+            <Column field="code" header="Code" exportHeader="Product Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        exportCSV() {
+            this.$refs.dt.exportCSV();
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div>
+        <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
+            <template #header>
+                <div class="text-end pb-4">
+                    <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
+                </div>
+            </template>
+            <Column field="code" header="Code" exportHeader="Product Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const dt = ref();
+const products = ref();
+const exportCSV = () => {
+    dt.value.exportCSV();
+};
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        exportCSV() {
+            this.$refs.dt.exportCSV();
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/GridLinesDoc.vue b/apps/labs/doc/datatable/GridLinesDoc.vue
new file mode 100644
index 000000000..09aed1ecf
--- /dev/null
+++ b/apps/labs/doc/datatable/GridLinesDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>showGridlines</i> displays borders between cells.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/ImportDoc.vue b/apps/labs/doc/datatable/ImportDoc.vue
new file mode 100644
index 000000000..f1800e604
--- /dev/null
+++ b/apps/labs/doc/datatable/ImportDoc.vue
@@ -0,0 +1,21 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import ColumnGroup from 'primevue/columngroup';   // optional
+import Row from 'primevue/row';                   // optional
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/LazyLoadDoc.vue b/apps/labs/doc/datatable/LazyLoadDoc.vue
new file mode 100644
index 000000000..db04082fd
--- /dev/null
+++ b/apps/labs/doc/datatable/LazyLoadDoc.vue
@@ -0,0 +1,489 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime <i>paging</i>, <i>sorting</i> and <i>filtering</i> occurs. Sample below
+            imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
+        </p>
+        <p>
+            Enabling the <i>lazy</i> property and assigning the logical number of rows to <i>totalRecords</i> by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually records
+            of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
+        </p>
+        <p>Note that, the implementation of <i>checkbox selection</i> in lazy mode needs to be handled manually as in this example since the DataTable cannot know about the whole dataset.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                ref="dt"
+                v-model:filters="filters"
+                v-model:selection="selectedCustomers"
+                :value="customers"
+                lazy
+                paginator
+                :first="first"
+                :rows="10"
+                dataKey="id"
+                :totalRecords="totalRecords"
+                :loading="loading"
+                @page="onPage($event)"
+                @sort="onSort($event)"
+                @filter="onFilter($event)"
+                filterDisplay="row"
+                :globalFilterFields="['name', 'country.name', 'company', 'representative.name']"
+                :selectAll="selectAll"
+                @select-all-change="onSelectAllChange"
+                @row-select="onRowSelect"
+                @row-unselect="onRowUnselect"
+                tableStyle="min-width: 75rem"
+            >
+                <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+                <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
+                    </template>
+                </Column>
+                <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
+                            <span>{{ data.country.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
+                    </template>
+                </Column>
+                <Column field="company" header="Company" filterMatchMode="contains" sortable>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
+                    </template>
+                </Column>
+                <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
+                            <span>{{ data.representative.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            loading: false,
+            totalRecords: 0,
+            customers: null,
+            selectedCustomers: null,
+            selectAll: false,
+            first: 0,
+            filters: {
+                name: { value: '', matchMode: 'contains' },
+                'country.name': { value: '', matchMode: 'contains' },
+                company: { value: '', matchMode: 'contains' },
+                'representative.name': { value: '', matchMode: 'contains' }
+            },
+            lazyParams: {},
+            columns: [
+                { field: 'name', header: 'Name' },
+                { field: 'country.name', header: 'Country' },
+                { field: 'company', header: 'Company' },
+                { field: 'representative.name', header: 'Representative' }
+            ],
+            code: {
+                basic: `
+<DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
+        :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
+        :globalFilterFields="['name','country.name', 'company', 'representative.name']"
+        v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
+    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+    <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
+        <template #filter="{filterModel,filterCallback}">
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+        </template>
+    </Column>
+    <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                <span>{{ data.country.name }}</span>
+            </div>
+        </template>
+        <template #filter="{filterModel,filterCallback}">
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+        </template>
+    </Column>
+    <Column field="company" header="Company" filterMatchMode="contains" sortable>
+        <template #filter="{filterModel,filterCallback}">
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+        </template>
+    </Column>
+    <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                <span>{{ data.representative.name }}</span>
+            </div>
+        </template>
+        <template #filter="{filterModel,filterCallback}">
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+	<div class="card">
+        <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
+            :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
+            :globalFilterFields="['name','country.name', 'company', 'representative.name']"
+            v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
+            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+            <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
+                <template #filter="{filterModel,filterCallback}">
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+                </template>
+            </Column>
+            <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{filterModel,filterCallback}">
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+                </template>
+            </Column>
+            <Column field="company" header="Company" filterMatchMode="contains" sortable>
+                <template #filter="{filterModel,filterCallback}">
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+                </template>
+            </Column>
+            <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{filterModel,filterCallback}">
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+                </template>
+            </Column>
+        </DataTable>
+	</div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            loading: false,
+            totalRecords: 0,
+            customers: null,
+            selectedCustomers: null,
+            selectAll: false,
+            first: 0,
+            filters: {
+                'name': {value: '', matchMode: 'contains'},
+                'country.name': {value: '', matchMode: 'contains'},
+                'company': {value: '', matchMode: 'contains'},
+                'representative.name': {value: '', matchMode: 'contains'},
+            },
+            lazyParams: {},
+            columns: [
+                {field: 'name', header: 'Name'},
+                {field: 'country.name', header: 'Country'},
+                {field: 'company', header: 'Company'},
+                {field: 'representative.name', header: 'Representative'}
+            ]
+        }
+    },
+    mounted() {
+        this.loading = true;
+
+        this.lazyParams = {
+            first: 0,
+            rows: 10,
+            sortField: null,
+            sortOrder: null,
+            filters: this.filters
+        };
+
+        this.loadLazyData();
+    },
+    methods: {
+        loadLazyData() {
+            this.loading = true;
+            this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
+
+            setTimeout(() => {
+                CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => {
+                    this.customers = data.customers;
+                    this.totalRecords = data.totalRecords;
+                    this.loading = false;
+                });
+            }, Math.random() * 1000 + 250);
+        },
+        onPage(event) {
+            this.lazyParams = event;
+            this.loadLazyData(event);
+        },
+        onSort(event) {
+            this.lazyParams = event;
+            this.loadLazyData(event);
+        },
+        onFilter(event) {
+            this.lazyParams.filters = this.filters;
+            this.loadLazyData(event);
+        },
+        onSelectAllChange(event) {
+            const selectAll = event.checked;
+
+            if (selectAll) {
+                CustomerService.getCustomers().then(data => {
+                    this.selectAll = true;
+                    this.selectedCustomers = data.customers;
+                });
+            }
+            else {
+                this.selectAll = false;
+                this.selectedCustomers = [];
+            }
+        },
+        onRowSelect() {
+            this.selectAll = this.selectedCustomers.length === this.totalRecords
+        },
+        onRowUnselect() {
+            this.selectAll = false;
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+	<div class="card">
+        <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
+            :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
+            :globalFilterFields="['name','country.name', 'company', 'representative.name']"
+            v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
+            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+            <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
+                <template #filter="{filterModel,filterCallback}">
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+                </template>
+            </Column>
+            <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{filterModel,filterCallback}">
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+                </template>
+            </Column>
+            <Column field="company" header="Company" filterMatchMode="contains" sortable>
+                <template #filter="{filterModel,filterCallback}">
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+                </template>
+            </Column>
+            <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{filterModel,filterCallback}">
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
+                </template>
+            </Column>
+        </DataTable>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    loading.value = true;
+
+    lazyParams.value = {
+        first: 0,
+        rows: 10,
+        sortField: null,
+        sortOrder: null,
+        filters: filters.value
+    };
+
+    loadLazyData();
+});
+
+const dt = ref();
+const loading = ref(false);
+const totalRecords = ref(0);
+const customers = ref();
+const selectedCustomers = ref();
+const selectAll = ref(false);
+const first = ref(0);
+const filters = ref({
+    'name': {value: '', matchMode: 'contains'},
+    'country.name': {value: '', matchMode: 'contains'},
+    'company': {value: '', matchMode: 'contains'},
+    'representative.name': {value: '', matchMode: 'contains'},
+});
+const lazyParams = ref({});
+const columns = ref([
+    {field: 'name', header: 'Name'},
+    {field: 'country.name', header: 'Country'},
+    {field: 'company', header: 'Company'},
+    {field: 'representative.name', header: 'Representative'}
+]);
+
+const loadLazyData = (event) => {
+    loading.value = true;
+    lazyParams.value = { ...lazyParams.value, first: event?.first || first.value };
+
+    setTimeout(() => {
+        CustomerService.getCustomers({ lazyEvent: JSON.stringify(lazyParams.value) }).then((data) => {
+            customers.value = data.customers;
+            totalRecords.value = data.totalRecords;
+            loading.value = false;
+        });
+    }, Math.random() * 1000 + 250);
+};
+const onPage = (event) => {
+    lazyParams.value = event;
+    loadLazyData(event);
+};
+const onSort = (event) => {
+    lazyParams.value = event;
+    loadLazyData(event);
+};
+const onFilter = (event) => {
+    lazyParams.value.filters = filters.value ;
+    loadLazyData(event);
+};
+const onSelectAllChange = (event) => {
+    selectAll.value = event.checked;
+
+    if (selectAll) {
+        CustomerService.getCustomers().then(data => {
+            selectAll.value = true;
+            selectedCustomers.value = data.customers;
+        });
+    }
+    else {
+        selectAll.value = false;
+        selectedCustomers.value = [];
+    }
+};
+const onRowSelect = () => {
+    selectAll.value = selectedCustomers.value.length === totalRecords.value;
+};
+const onRowUnselect = () => {
+    selectAll.value = false;
+};
+
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            this.loading = true;
+
+            this.lazyParams = {
+                first: 0,
+                rows: 10,
+                sortField: null,
+                sortOrder: null,
+                filters: this.filters
+            };
+
+            this.loadLazyData();
+        },
+        loadLazyData(event) {
+            this.loading = true;
+            this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
+
+            setTimeout(() => {
+                CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => {
+                    this.customers = data.customers;
+                    this.totalRecords = data.totalRecords;
+                    this.loading = false;
+                });
+            }, Math.random() * 1000 + 250);
+        },
+        onPage(event) {
+            this.lazyParams = event;
+            this.loadLazyData(event);
+        },
+        onSort(event) {
+            this.lazyParams = event;
+            this.loadLazyData(event);
+        },
+        onFilter(event) {
+            this.lazyParams.filters = this.filters;
+            this.loadLazyData(event);
+        },
+        onSelectAllChange(event) {
+            const selectAll = event.checked;
+
+            if (selectAll) {
+                CustomerService.getCustomers().then((data) => {
+                    this.selectAll = true;
+                    this.selectedCustomers = data.customers;
+                });
+            } else {
+                this.selectAll = false;
+                this.selectedCustomers = [];
+            }
+        },
+        onRowSelect() {
+            this.selectAll = this.selectedCustomers.length === this.totalRecords;
+        },
+        onRowUnselect() {
+            this.selectAll = false;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/ReorderDoc.vue b/apps/labs/doc/datatable/ReorderDoc.vue
new file mode 100644
index 000000000..094c836f5
--- /dev/null
+++ b/apps/labs/doc/datatable/ReorderDoc.vue
@@ -0,0 +1,157 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding <i>reorderableColumns</i> property.</p>
+        <p>
+            Similarly, adding <i>rowReorder</i> property to a column enables draggable rows. For the drag handle a column needs to have <i>rowReorder</i> property and table needs to have <i>row-reorder</i> event is required to control the state of
+            the rows after reorder completes.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" reorderableColumns @column-reorder="onColReorder" @row-reorder="onRowReorder" tableStyle="min-width: 50rem">
+                <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
+                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
+    <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
+    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+	<div>
+        <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
+            <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
+            <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
+        </DataTable>
+        <Toast />
+	</div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            products: null
+        }
+    },
+    created() {
+        this.columns = [
+            {field: 'code', header: 'Code'},
+            {field: 'name', header: 'Name'},
+            {field: 'category', header: 'Category'},
+            {field: 'quantity', header: 'Quantity'}
+        ];
+    },
+    mounted() {
+        ProductService.getProductsMini().then(data => this.products = data);
+    },
+    methods: {
+        onColReorder() {
+            this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
+        },
+        onRowReorder(event) {
+            this.products = event.value;
+            this.$toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+	<div>
+        <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
+            <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
+            <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
+        </DataTable>
+        <Toast />
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then(data => products.value = data);
+});
+
+const toast = useToast();
+const columns = ref([
+    {field: 'code', header: 'Code'},
+    {field: 'name', header: 'Name'},
+    {field: 'category', header: 'Category'},
+    {field: 'quantity', header: 'Quantity'}
+]);
+const products = ref();
+
+const onColReorder = () => {
+    toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
+};
+const onRowReorder = (event) => {
+    products.value = event.value;
+    toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
+};
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    created() {
+        this.columns = [
+            { field: 'code', header: 'Code' },
+            { field: 'name', header: 'Name' },
+            { field: 'category', header: 'Category' },
+            { field: 'quantity', header: 'Quantity' }
+        ];
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        onColReorder() {
+            this.$toast.add({ severity: 'success', summary: 'Column Reordered', life: 3000 });
+        },
+        onRowReorder(event) {
+            this.products = event.value;
+            this.$toast.add({ severity: 'success', summary: 'Rows Reordered', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/RowExpansionDoc.vue b/apps/labs/doc/datatable/RowExpansionDoc.vue
new file mode 100644
index 000000000..69b11f90b
--- /dev/null
+++ b/apps/labs/doc/datatable/RowExpansionDoc.vue
@@ -0,0 +1,485 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Row expansion is controlled with <i>expandedRows</i> property. The column that has the expander element requires <i>expander</i> property to be enabled. Optional <i>rowExpand</i> and <i>rowCollapse</i>
+            events are available as callbacks.
+        </p>
+        <p>
+            Expanded rows can either be an array of row data or when <i>dataKey</i> is present, an object whose keys are strings referring to the identifier of the row data and values are booleans to represent the expansion state e.g.
+            <i>&#123;'1004': true&#125;</i>. The <i>dataKey</i> alternative is more performant for large amounts of data.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
+                <template #header>
+                    <div class="flex flex-wrap justify-end gap-2">
+                        <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                        <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+                    </div>
+                </template>
+                <Column expander style="width: 5rem" />
+                <Column field="name" header="Name"></Column>
+                <Column header="Image">
+                    <template #body="slotProps">
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
+                    </template>
+                </Column>
+                <Column field="price" header="Price">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.price) }}
+                    </template>
+                </Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="rating" header="Reviews">
+                    <template #body="slotProps">
+                        <Rating :modelValue="slotProps.data.rating" readonly />
+                    </template>
+                </Column>
+                <Column header="Status">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+                    </template>
+                </Column>
+                <template #expansion="slotProps">
+                    <div class="p-4">
+                        <h5>Orders for {{ slotProps.data.name }}</h5>
+                        <DataTable :value="slotProps.data.orders">
+                            <Column field="id" header="Id" sortable></Column>
+                            <Column field="customer" header="Customer" sortable></Column>
+                            <Column field="date" header="Date" sortable></Column>
+                            <Column field="amount" header="Amount" sortable>
+                                <template #body="slotProps">
+                                    {{ formatCurrency(slotProps.data.amount) }}
+                                </template>
+                            </Column>
+                            <Column field="status" header="Status" sortable>
+                                <template #body="slotProps">
+                                    <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
+                                </template>
+                            </Column>
+                            <Column headerStyle="width:4rem">
+                                <template #body>
+                                    <Button icon="pi pi-search" />
+                                </template>
+                            </Column>
+                        </DataTable>
+                    </div>
+                </template>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            expandedRows: {},
+            code: {
+                basic: `
+<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
+        @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
+    <template #header>
+        <div class="flex flex-wrap justify-end gap-2">
+            <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+            <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+        </div>
+    </template>
+    <Column expander style="width: 5rem" />
+    <Column field="name" header="Name"></Column>
+    <Column header="Image">
+        <template #body="slotProps">
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
+        </template>
+    </Column>
+    <Column field="price" header="Price">
+        <template #body="slotProps">
+            {{ formatCurrency(slotProps.data.price) }}
+        </template>
+    </Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="rating" header="Reviews">
+        <template #body="slotProps">
+            <Rating :modelValue="slotProps.data.rating" readonly />
+        </template>
+    </Column>
+    <Column header="Status">
+        <template #body="slotProps">
+            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+        </template>
+    </Column>
+    <template #expansion="slotProps">
+        <div class="p-4">
+            <h5>Orders for {{ slotProps.data.name }}</h5>
+            <DataTable :value="slotProps.data.orders">
+                <Column field="id" header="Id" sortable></Column>
+                <Column field="customer" header="Customer" sortable></Column>
+                <Column field="date" header="Date" sortable></Column>
+                <Column field="amount" header="Amount" sortable>
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.amount) }}
+                    </template>
+                </Column>
+                <Column field="status" header="Status" sortable>
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
+                    </template>
+                </Column>
+                <Column headerStyle="width:4rem">
+                    <template #body>
+                        <Button icon="pi pi-search" />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </template>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
+                @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
+            <template #header>
+                <div class="flex flex-wrap justify-end gap-2">
+                    <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                    <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+                </div>
+            </template>
+            <Column expander style="width: 5rem" />
+            <Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
+                </template>
+            </Column>
+            <Column field="price" header="Price">
+                <template #body="slotProps">
+                    {{ formatCurrency(slotProps.data.price) }}
+                </template>
+            </Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="rating" header="Reviews">
+                <template #body="slotProps">
+                    <Rating :modelValue="slotProps.data.rating" readonly />
+                </template>
+            </Column>
+            <Column header="Status">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+                </template>
+            </Column>
+            <template #expansion="slotProps">
+                <div class="p-4">
+                    <h5>Orders for {{ slotProps.data.name }}</h5>
+                    <DataTable :value="slotProps.data.orders" >
+                        <Column field="id" header="Id" sortable></Column>
+                        <Column field="customer" header="Customer" sortable></Column>
+                        <Column field="date" header="Date" sortable></Column>
+                        <Column field="amount" header="Amount" sortable>
+                            <template #body="slotProps">
+                                {{ formatCurrency(slotProps.data.amount) }}
+                            </template>
+                        </Column>
+                        <Column field="status" header="Status" sortable>
+                            <template #body="slotProps">
+                                <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
+                            </template>
+                        </Column>
+                        <Column headerStyle="width:4rem">
+                            <template #body>
+                                <Button icon="pi pi-search" />
+                            </template>
+                        </Column>
+                    </DataTable>
+                </div>
+            </template>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            expandedRows: {}
+        };
+    },
+    mounted() {
+        ProductService.getProductsWithOrdersSmall().then((data) => (this.products = data));
+    },
+    methods: {
+        onRowExpand(event) {
+            this.$toast.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
+        },
+        onRowCollapse(event) {
+            this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
+        },
+        expandAll() {
+            this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {});
+        },
+        collapseAll() {
+            this.expandedRows = null;
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        },
+        getOrderSeverity(order) {
+            switch (order.status) {
+                case 'DELIVERED':
+                    return 'success';
+
+                case 'CANCELLED':
+                    return 'danger';
+
+                case 'PENDING':
+                    return 'warn';
+
+                case 'RETURNED':
+                    return 'info';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
+                @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
+            <template #header>
+                <div class="flex flex-wrap justify-end gap-2">
+                    <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                    <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+                </div>
+            </template>
+            <Column expander style="width: 5rem" />
+            <Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
+                </template>
+            </Column>
+            <Column field="price" header="Price">
+                <template #body="slotProps">
+                    {{ formatCurrency(slotProps.data.price) }}
+                </template>
+            </Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="rating" header="Reviews">
+                <template #body="slotProps">
+                    <Rating :modelValue="slotProps.data.rating" readonly />
+                </template>
+            </Column>
+            <Column header="Status">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+                </template>
+            </Column>
+            <template #expansion="slotProps">
+                <div class="p-4">
+                    <h5>Orders for {{ slotProps.data.name }}</h5>
+                    <DataTable :value="slotProps.data.orders">
+                        <Column field="id" header="Id" sortable></Column>
+                        <Column field="customer" header="Customer" sortable></Column>
+                        <Column field="date" header="Date" sortable></Column>
+                        <Column field="amount" header="Amount" sortable>
+                            <template #body="slotProps">
+                                {{ formatCurrency(slotProps.data.amount) }}
+                            </template>
+                        </Column>
+                        <Column field="status" header="Status" sortable>
+                            <template #body="slotProps">
+                                <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
+                            </template>
+                        </Column>
+                        <Column headerStyle="width:4rem">
+                            <template #body>
+                                <Button icon="pi pi-search" />
+                            </template>
+                        </Column>
+                    </DataTable>
+                </div>
+            </template>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { ProductService } from '@/service/ProductService';
+
+const products = ref();
+const expandedRows = ref({});
+const toast = useToast();
+
+onMounted(() => {
+    ProductService.getProductsWithOrdersSmall().then((data) => (products.value = data));
+});
+
+const onRowExpand = (event) => {
+    toast.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
+};
+const onRowCollapse = (event) => {
+    toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
+};
+const expandAll = () => {
+    expandedRows.value = products.value.reduce((acc, p) => (acc[p.id] = true) && acc, {});
+};
+const collapseAll = () => {
+    expandedRows.value = null;
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+const getOrderSeverity = (order) => {
+    switch (order.status) {
+        case 'DELIVERED':
+            return 'success';
+
+        case 'CANCELLED':
+            return 'danger';
+
+        case 'PENDING':
+            return 'warn';
+
+        case 'RETURNED':
+            return 'info';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5,
+    orders: [
+        {
+            id: '1000-0',
+            productCode: 'f230fh0g3',
+            date: '2020-09-13',
+            amount: 65,
+            quantity: 1,
+            customer: 'David James',
+            status: 'PENDING'
+        },
+        ...
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsWithOrdersSmall().then((data) => (this.products = data));
+        },
+        onRowExpand(event) {
+            this.$toast.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
+        },
+        onRowCollapse(event) {
+            this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
+        },
+        expandAll() {
+            this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {});
+        },
+        collapseAll() {
+            this.expandedRows = null;
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        },
+        getOrderSeverity(order) {
+            switch (order.status) {
+                case 'DELIVERED':
+                    return 'success';
+
+                case 'CANCELLED':
+                    return 'danger';
+
+                case 'PENDING':
+                    return 'warn';
+
+                case 'RETURNED':
+                    return 'info';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/SizeDoc.vue b/apps/labs/doc/datatable/SizeDoc.vue
new file mode 100644
index 000000000..cf4f9363f
--- /dev/null
+++ b/apps/labs/doc/datatable/SizeDoc.vue
@@ -0,0 +1,137 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-center mb-6">
+                <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+            </div>
+            <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            size: { label: 'Normal', value: 'null' },
+            sizeOptions: [
+                { label: 'Small', value: 'small' },
+                { label: 'Normal', value: 'null' },
+                { label: 'Large', value: 'large' }
+            ],
+            code: {
+                basic: `
+<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex justify-center mb-6">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+        </div>
+        <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            size: { label: 'Normal', value: 'null' },
+            sizeOptions: [
+                { label: 'Small', value: 'small' },
+                { label: 'Normal', value: 'null' },
+                { label: 'Large', value: 'large' }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex justify-center mb-6">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+        </div>
+        <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const size = ref({ label: 'Normal', value: 'null' });
+const sizeOptions = ref([
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'null' },
+    { label: 'Large', value: 'large' }
+]);
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/StatefulDoc.vue b/apps/labs/doc/datatable/StatefulDoc.vue
new file mode 100644
index 000000000..47a01aa83
--- /dev/null
+++ b/apps/labs/doc/datatable/StatefulDoc.vue
@@ -0,0 +1,479 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.</p>
+        <p>
+            Change the state of the table e.g paginate, navigate away and then return to this table again to test this feature, the setting is set as <i>session</i> with the <i>stateStorage</i> property so that Table retains the state until the
+            browser is closed. Other alternative is <i>local</i> referring to <i>localStorage</i> for an extended lifetime.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                v-model:filters="filters"
+                v-model:selection="selectedCustomer"
+                :value="customers"
+                stateStorage="session"
+                stateKey="dt-state-demo-session"
+                paginator
+                :rows="5"
+                filterDisplay="menu"
+                selectionMode="single"
+                dataKey="id"
+                :globalFilterFields="['name', 'country.name', 'representative.name', 'status']"
+                tableStyle="min-width: 50rem"
+            >
+                <template #header>
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText v-model="filters['global'].value" placeholder="Global Search" />
+                    </IconField>
+                </template>
+                <Column field="name" header="Name" sortable style="width: 25%">
+                    <template #filter="{ filterModel }">
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                    </template>
+                </Column>
+                <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
+                            <span>{{ data.country.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                    </template>
+                </Column>
+                <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
+                            <span>{{ data.representative.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                            <template #option="slotProps">
+                                <div class="flex items-center gap-2">
+                                    <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
+                                    <span>{{ slotProps.option.name }}</span>
+                                </div>
+                            </template>
+                        </MultiSelect>
+                    </template>
+                </Column>
+                <Column field="status" header="Status" sortable filterMatchMode="equals" style="width: 25%">
+                    <template #body="{ data }">
+                        <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                            <template #option="slotProps">
+                                <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                            </template>
+                        </Select>
+                    </template>
+                </Column>
+                <template #empty> No customers found. </template>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            selectedCustomer: null,
+            filters: null,
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
+            code: {
+                basic: `
+<DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
+    stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
+    selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
+    <template #header>
+        <IconField>
+            <InputIcon>
+                <i class="pi pi-search" />
+            </InputIcon>
+            <InputText v-model="filters['global'].value" placeholder="Global Search" />
+        </IconField>
+    </template>
+    <Column field="name" header="Name" sortable style="width: 25%">
+        <template #filter="{ filterModel }">
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+        </template>
+    </Column>
+    <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                <span>{{ data.country.name }}</span>
+            </div>
+        </template>
+        <template #filter="{ filterModel }">
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+        </template>
+    </Column>
+    <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                <span>{{ data.representative.name }}</span>
+            </div>
+        </template>
+        <template #filter="{ filterModel }">
+            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                <template #option="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                        <span>{{ slotProps.option.name }}</span>
+                    </div>
+                </template>
+            </MultiSelect>
+        </template>
+    </Column>
+    <Column field="status" header="Status" sortable filterMatchMode="equals" style="width: 25%">
+        <template #body="{ data }">
+            <Tag :value="data.status" :severity="getSeverity(data.status)" />
+        </template>
+        <template #filter="{ filterModel }">
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                <template #option="slotProps">
+                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                </template>
+            </Select>
+        </template>
+    </Column>
+    <template #empty> No customers found. </template>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
+                stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
+                selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
+            <template #header>
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
+                    <InputText v-model="filters['global'].value" placeholder="Global Search" />
+                </IconField>
+            </template>
+            <Column field="name" header="Name" sortable style="width: 25%">
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                </template>
+            </Column>
+            <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column field="status" header="Status" sortable filterMatchMode="equals" style="width: 25%">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <template #empty> No customers found. </template>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            selectedCustomer: null,
+            filters: null,
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    mounted() {
+        CustomerService.getCustomersSmall().then((data) => (this.customers = data));
+    },
+    methods: {
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+            };
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
+                stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
+                selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
+            <template #header>
+                <IconField>
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
+                <InputText v-model="filters['global'].value" placeholder="Global Search" />
+            </IconField>
+            </template>
+            <Column field="name" header="Name" sortable style="width: 25%">
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                </template>
+            </Column>
+            <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column field="status" header="Status" sortable filterMatchMode="equals" style="width: 25%">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <template #empty> No customers found. </template>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+const customers = ref();
+const selectedCustomer = ref();
+const filters = ref(
+    {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+    }
+);
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+
+onMounted(() => {
+    CustomerService.getCustomersSmall().then((data) => (customers.value = data));
+});
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warn';
+
+        case 'renewal':
+            return null;
+    }
+};
+
+<\/script>
+`,
+                data: `
+/* CustomerService */
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
+            }
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersSmall().then((data) => (this.customers = data));
+        },
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+            };
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/StripedRowsDoc.vue b/apps/labs/doc/datatable/StripedRowsDoc.vue
new file mode 100644
index 000000000..b02fbc644
--- /dev/null
+++ b/apps/labs/doc/datatable/StripedRowsDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Alternating rows are displayed when <i>stripedRows</i> property is present.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/TemplateDoc.vue b/apps/labs/doc/datatable/TemplateDoc.vue
new file mode 100644
index 000000000..49773051b
--- /dev/null
+++ b/apps/labs/doc/datatable/TemplateDoc.vue
@@ -0,0 +1,265 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content at <i>header</i> and <i>footer</i> sections are supported via templating.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" tableStyle="min-width: 50rem">
+                <template #header>
+                    <div class="flex flex-wrap items-center justify-between gap-2">
+                        <span class="text-xl font-bold">Products</span>
+                        <Button icon="pi pi-refresh" rounded raised />
+                    </div>
+                </template>
+                <Column field="name" header="Name"></Column>
+                <Column header="Image">
+                    <template #body="slotProps">
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-24 rounded" />
+                    </template>
+                </Column>
+                <Column field="price" header="Price">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.price) }}
+                    </template>
+                </Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="rating" header="Reviews">
+                    <template #body="slotProps">
+                        <Rating :modelValue="slotProps.data.rating" readonly />
+                    </template>
+                </Column>
+                <Column header="Status">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+                    </template>
+                </Column>
+                <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
+    <template #header>
+        <div class="flex flex-wrap items-center justify-between gap-2">
+            <span class="text-xl font-bold">Products</span>
+            <Button icon="pi pi-refresh" rounded raised />
+        </div>
+    </template>
+    <Column field="name" header="Name"></Column>
+    <Column header="Image">
+        <template #body="slotProps">
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
+        </template>
+    </Column>
+    <Column field="price" header="Price">
+        <template #body="slotProps">
+            {{ formatCurrency(slotProps.data.price) }}
+        </template>
+    </Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="rating" header="Reviews">
+        <template #body="slotProps">
+            <Rating :modelValue="slotProps.data.rating" readonly />
+        </template>
+    </Column>
+    <Column header="Status">
+        <template #body="slotProps">
+            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+        </template>
+    </Column>
+    <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <template #header>
+                <div class="flex flex-wrap items-center justify-between gap-2">
+                    <span class="text-xl font-bold">Products</span>
+                    <Button icon="pi pi-refresh" rounded raised />
+                </div>
+            </template>
+            <Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
+                </template>
+            </Column>
+            <Column field="price" header="Price">
+                <template #body="slotProps">
+                    {{ formatCurrency(slotProps.data.price) }}
+                </template>
+            </Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="rating" header="Reviews">
+                <template #body="slotProps">
+                    <Rating :modelValue="slotProps.data.rating" readonly />
+                </template>
+            </Column>
+            <Column header="Status">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+                </template>
+            </Column>
+            <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <template #header>
+                <div class="flex flex-wrap items-center justify-between gap-2">
+                    <span class="text-xl font-bold">Products</span>
+                    <Button icon="pi pi-refresh" rounded raised />
+                </div>
+            </template>
+            <Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
+                </template>
+            </Column>
+            <Column field="price" header="Price">
+                <template #body="slotProps">
+                    {{ formatCurrency(slotProps.data.price) }}
+                </template>
+            </Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="rating" header="Reviews">
+                <template #body="slotProps">
+                    <Rating :modelValue="slotProps.data.rating" readonly />
+                </template>
+            </Column>
+            <Column header="Status">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+                </template>
+            </Column>
+            <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/colresize/ExpandModeDoc.vue b/apps/labs/doc/datatable/colresize/ExpandModeDoc.vue
new file mode 100644
index 000000000..fae264a12
--- /dev/null
+++ b/apps/labs/doc/datatable/colresize/ExpandModeDoc.vue
@@ -0,0 +1,107 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then(data => products.value = data);
+});
+
+const products = ref();
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/colresize/FitModeDoc.vue b/apps/labs/doc/datatable/colresize/FitModeDoc.vue
new file mode 100644
index 000000000..5e597ee8d
--- /dev/null
+++ b/apps/labs/doc/datatable/colresize/FitModeDoc.vue
@@ -0,0 +1,110 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Columns can be resized with drag and drop when <i>resizableColumns</i> is enabled. Default resize mode is <i>fit</i>
+            that does not change the overall table width.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then(data => products.value = data);
+});
+
+const products = ref();
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/edit/CellEditDoc.vue b/apps/labs/doc/datatable/edit/CellEditDoc.vue
new file mode 100644
index 000000000..b4535071c
--- /dev/null
+++ b/apps/labs/doc/datatable/edit/CellEditDoc.vue
@@ -0,0 +1,304 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> templating of a Column and implementing <i>cell-edit-complete</i> to update the state.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                :value="products"
+                editMode="cell"
+                @cell-edit-complete="onCellEditComplete"
+                :pt="{
+                    table: { style: 'min-width: 50rem' },
+                    column: {
+                        bodycell: ({ state }) => ({
+                            class: [{ '!py-0': state['d_editing'] }]
+                        })
+                    }
+                }"
+            >
+                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
+                    <template #body="{ data, field }">
+                        {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
+                    </template>
+                    <template #editor="{ data, field }">
+                        <template v-if="field !== 'price'">
+                            <InputText v-model="data[field]" autofocus fluid />
+                        </template>
+                        <template v-else>
+                            <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
+                        </template>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            columns: [
+                { field: 'code', header: 'Code' },
+                { field: 'name', header: 'Name' },
+                { field: 'quantity', header: 'Quantity' },
+                { field: 'price', header: 'Price' }
+            ],
+            code: {
+                basic: `
+<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                class: [{ '!py-0': state['d_editing'] }]
+            })
+        }
+    }"
+>
+    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
+        <template #body="{ data, field }">
+            {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
+        </template>
+        <template #editor="{ data, field }">
+            <template v-if="field !== 'price'">
+                <InputText v-model="data[field]" autofocus fluid />
+            </template>
+            <template v-else>
+                <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
+            </template>
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ '!py-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
+            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
+                <template #body="{ data, field }">
+                    {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
+                </template>
+                <template #editor="{ data, field }">
+                    <template v-if="field !== 'price'">
+                        <InputText v-model="data[field]" autofocus fluid />
+                    </template>
+                    <template v-else>
+                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
+                    </template>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            columns: [
+                { field: 'code', header: 'Code' },
+                { field: 'name', header: 'Name' },
+                { field: 'quantity', header: 'Quantity' },
+                { field: 'price', header: 'Price' }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        onCellEditComplete(event) {
+            let { data, newValue, field } = event;
+
+            switch (field) {
+                case 'quantity':
+                case 'price':
+                    if (this.isPositiveInteger(newValue)) data[field] = newValue;
+                    else event.preventDefault();
+                    break;
+
+                default:
+                    if (newValue.trim().length > 0) data[field] = newValue;
+                    else event.preventDefault();
+                    break;
+            }
+        },
+        isPositiveInteger(val) {
+            let str = String(val);
+
+            str = str.trim();
+
+            if (!str) {
+                return false;
+            }
+
+            str = str.replace(/^0+/, '') || '0';
+            var n = Math.floor(Number(str));
+
+            return n !== Infinity && String(n) === str && n >= 0;
+        },
+        formatCurrency(value) {
+            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ '!py-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
+            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
+                <template #body="{ data, field }">
+                    {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
+                </template>
+                <template #editor="{ data, field }">
+                    <template v-if="field !== 'price'">
+                        <InputText v-model="data[field]" autofocus fluid />
+                    </template>
+                    <template v-else>
+                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
+                    </template>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+const products = ref();
+const columns = ref([
+    { field: 'code', header: 'Code' },
+    { field: 'name', header: 'Name' },
+    { field: 'quantity', header: 'Quantity' },
+    { field: 'price', header: 'Price' }
+]);
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const onCellEditComplete = (event) => {
+    let { data, newValue, field } = event;
+
+    switch (field) {
+        case 'quantity':
+        case 'price':
+            if (isPositiveInteger(newValue)) data[field] = newValue;
+            else event.preventDefault();
+            break;
+
+        default:
+            if (newValue.trim().length > 0) data[field] = newValue;
+            else event.preventDefault();
+            break;
+    }
+};
+const isPositiveInteger = (val) => {
+    let str = String(val);
+
+    str = str.trim();
+
+    if (!str) {
+        return false;
+    }
+
+    str = str.replace(/^0+/, '') || '0';
+    var n = Math.floor(Number(str));
+
+    return n !== Infinity && String(n) === str && n >= 0;
+};
+const formatCurrency = (value) => {
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
+}
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        onCellEditComplete(event) {
+            let { data, newValue, field } = event;
+
+            switch (field) {
+                case 'quantity':
+                case 'price':
+                    if (this.isPositiveInteger(newValue)) data[field] = newValue;
+                    else event.preventDefault();
+                    break;
+
+                default:
+                    if (newValue.trim().length > 0) data[field] = newValue;
+                    else event.preventDefault();
+                    break;
+            }
+        },
+        isPositiveInteger(val) {
+            let str = String(val);
+
+            str = str.trim();
+
+            if (!str) {
+                return false;
+            }
+
+            str = str.replace(/^0+/, '') || '0';
+            var n = Math.floor(Number(str));
+
+            return n !== Infinity && String(n) === str && n >= 0;
+        },
+        formatCurrency(value) {
+            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/edit/RowEditDoc.vue b/apps/labs/doc/datatable/edit/RowEditDoc.vue
new file mode 100644
index 000000000..d4b134ffd
--- /dev/null
+++ b/apps/labs/doc/datatable/edit/RowEditDoc.vue
@@ -0,0 +1,351 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Row editing is configured with setting <i>editMode</i> as <i>row</i> and defining <i>editingRows</i> with the v-model directive to hold the reference of the editing rows. Similarly with cell edit mode, defining input elements with
+            <i>editor</i> slot of a Column and implementing <i>row-edit-save</i> are necessary to update the state. The column to control the editing state should have <i>editor</i> templating applied.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                v-model:editingRows="editingRows"
+                :value="products"
+                editMode="row"
+                dataKey="id"
+                @row-edit-save="onRowEditSave"
+                :pt="{
+                    table: { style: 'min-width: 50rem' },
+                    column: {
+                        bodycell: ({ state }) => ({
+                            style: state['d_editing'] && 'padding-top: 0.75rem; padding-bottom: 0.75rem'
+                        })
+                    }
+                }"
+            >
+                <Column field="code" header="Code" style="width: 20%">
+                    <template #editor="{ data, field }">
+                        <InputText v-model="data[field]" fluid />
+                    </template>
+                </Column>
+                <Column field="name" header="Name" style="width: 20%">
+                    <template #editor="{ data, field }">
+                        <InputText v-model="data[field]" fluid />
+                    </template>
+                </Column>
+                <Column field="inventoryStatus" header="Status" style="width: 20%">
+                    <template #editor="{ data, field }">
+                        <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
+                            <template #option="slotProps">
+                                <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
+                            </template>
+                        </Select>
+                    </template>
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
+                    </template>
+                </Column>
+                <Column field="price" header="Price" style="width: 20%">
+                    <template #body="{ data, field }">
+                        {{ formatCurrency(data[field]) }}
+                    </template>
+                    <template #editor="{ data, field }">
+                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
+                    </template>
+                </Column>
+                <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            editingRows: [],
+            statuses: [
+                { label: 'In Stock', value: 'INSTOCK' },
+                { label: 'Low Stock', value: 'LOWSTOCK' },
+                { label: 'Out of Stock', value: 'OUTOFSTOCK' }
+            ],
+            code: {
+                basic: `
+<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                style:  state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
+            })
+        }
+    }"
+>
+    <Column field="code" header="Code" style="width: 20%">
+        <template #editor="{ data, field }">
+            <InputText v-model="data[field]" />
+        </template>
+    </Column>
+    <Column field="name" header="Name" style="width: 20%">
+        <template #editor="{ data, field }">
+            <InputText v-model="data[field]" fluid />
+        </template>
+    </Column>
+    <Column field="inventoryStatus" header="Status" style="width: 20%">
+        <template #editor="{ data, field }">
+            <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
+                <template #option="slotProps">
+                    <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
+                </template>
+            </Select>
+        </template>
+        <template #body="slotProps">
+            <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
+        </template>
+    </Column>
+    <Column field="price" header="Price" style="width: 20%">
+        <template #body="{ data, field }">
+            {{ formatCurrency(data[field]) }}
+        </template>
+        <template #editor="{ data, field }">
+            <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
+        </template>
+    </Column>
+    <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        style:  state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
+                    })
+                }
+            }"
+        >
+            <Column field="code" header="Code" style="width: 20%">
+                <template #editor="{ data, field }">
+                    <InputText v-model="data[field]" fluid />
+                </template>
+            </Column>
+            <Column field="name" header="Name" style="width: 20%">
+                <template #editor="{ data, field }">
+                    <InputText v-model="data[field]" fluid />
+                </template>
+            </Column>
+            <Column field="inventoryStatus" header="Status" style="width: 20%">
+                <template #editor="{ data, field }">
+                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
+                        </template>
+                    </Select>
+                </template>
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
+                </template>
+            </Column>
+            <Column field="price" header="Price" style="width: 20%">
+                <template #body="{ data, field }">
+                    {{ formatCurrency(data[field]) }}
+                </template>
+                <template #editor="{ data, field }">
+                    <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
+                </template>
+            </Column>
+            <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            editingRows: [],
+            statuses: [
+                { label: 'In Stock', value: 'INSTOCK' },
+                { label: 'Low Stock', value: 'LOWSTOCK' },
+                { label: 'Out of Stock', value: 'OUTOFSTOCK' }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        onRowEditSave(event) {
+            let { newData, index } = event;
+
+            this.products[index] = newData;
+        },
+        getStatusLabel(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        },
+        formatCurrency(value) {
+            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        style:  state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
+                    })
+                }
+            }"
+        >
+            <Column field="code" header="Code" style="width: 20%">
+                <template #editor="{ data, field }">
+                    <InputText v-model="data[field]" fluid />
+                </template>
+            </Column>
+            <Column field="name" header="Name" style="width: 20%">
+                <template #editor="{ data, field }">
+                    <InputText v-model="data[field]" fluid />
+                </template>
+            </Column>
+            <Column field="inventoryStatus" header="Status" style="width: 20%">
+                <template #editor="{ data, field }">
+                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
+                        </template>
+                    </Select>
+                </template>
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
+                </template>
+            </Column>
+            <Column field="price" header="Price" style="width: 20%">
+                <template #body="{ data, field }">
+                    {{ formatCurrency(data[field]) }}
+                </template>
+                <template #editor="{ data, field }">
+                    <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
+                </template>
+            </Column>
+            <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+const products = ref();
+const editingRows = ref([]);
+const statuses = ref([
+    { label: 'In Stock', value: 'INSTOCK' },
+    { label: 'Low Stock', value: 'LOWSTOCK' },
+    { label: 'Out of Stock', value: 'OUTOFSTOCK' }
+]);
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const onRowEditSave = (event) => {
+    let { newData, index } = event;
+
+    products.value[index] = newData;
+};
+const getStatusLabel = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+const formatCurrency = (value) => {
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
+}
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        onRowEditSave(event) {
+            let { newData, index } = event;
+
+            this.products[index] = newData;
+        },
+        getStatusLabel(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        },
+        formatCurrency(value) {
+            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/filter/AdvancedFilterDoc.vue b/apps/labs/doc/datatable/filter/AdvancedFilterDoc.vue
new file mode 100644
index 000000000..780d6586a
--- /dev/null
+++ b/apps/labs/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -0,0 +1,755 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>filterDisplay</i> is set as <i>menu</i>, filtering UI is placed inside a popover with support for multiple constraints and advanced templating.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id" filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+                <template #header>
+                    <div class="flex justify-between">
+                        <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                        <IconField>
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
+                            <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                        </IconField>
+                    </div>
+                </template>
+                <template #empty> No customers found. </template>
+                <template #loading> Loading customers data. Please wait. </template>
+                <Column field="name" header="Name" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        {{ data.name }}
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                    </template>
+                </Column>
+                <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
+                            <span>{{ data.country.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                    </template>
+                    <template #filterclear="{ filterCallback }">
+                        <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
+                    </template>
+                    <template #filterapply="{ filterCallback }">
+                        <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
+                    </template>
+                    <template #filterfooter>
+                        <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
+                    </template>
+                </Column>
+                <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
+                            <span>{{ data.representative.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                            <template #option="slotProps">
+                                <div class="flex items-center gap-2">
+                                    <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
+                                    <span>{{ slotProps.option.name }}</span>
+                                </div>
+                            </template>
+                        </MultiSelect>
+                    </template>
+                </Column>
+                <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+                    <template #body="{ data }">
+                        {{ formatDate(data.date) }}
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+                    </template>
+                </Column>
+                <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+                    <template #body="{ data }">
+                        {{ formatCurrency(data.balance) }}
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                    </template>
+                </Column>
+                <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                            <template #option="slotProps">
+                                <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                            </template>
+                        </Select>
+                    </template>
+                </Column>
+                <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                        <div class="flex items-center justify-between px-2">
+                            <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                            <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+                    <template #body="{ data }">
+                        <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <label for="verified-filter" class="font-bold"> Verified </label>
+                        <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: null,
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
+            loading: true,
+            code: {
+                basic: `
+<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
+        filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+    <template #header>
+        <div class="flex justify-between">
+            <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
+                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+            </IconField>
+        </div>
+    </template>
+    <template #empty> No customers found. </template>
+    <template #loading> Loading customers data. Please wait. </template>
+    <Column field="name" header="Name" style="min-width: 12rem">
+        <template #body="{ data }">
+            {{ data.name }}
+        </template>
+        <template #filter="{ filterModel }">
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+        </template>
+    </Column>
+    <Column header="Country" filterField="country.name" style="min-width: 12rem">
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                <span>{{ data.country.name }}</span>
+            </div>
+        </template>
+        <template #filter="{ filterModel }">
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+        </template>
+        <template #filterclear="{ filterCallback }">
+            <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
+        </template>
+        <template #filterapply="{ filterCallback }">
+            <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
+        </template>
+        <template #filterfooter>
+            <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
+        </template>
+    </Column>
+    <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                <span>{{ data.representative.name }}</span>
+            </div>
+        </template>
+        <template #filter="{ filterModel }">
+            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                <template #option="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                        <span>{{ slotProps.option.name }}</span>
+                    </div>
+                </template>
+            </MultiSelect>
+        </template>
+    </Column>
+    <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+        <template #body="{ data }">
+            {{ formatDate(data.date) }}
+        </template>
+        <template #filter="{ filterModel }">
+            <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+        </template>
+    </Column>
+    <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+        <template #body="{ data }">
+            {{ formatCurrency(data.balance) }}
+        </template>
+        <template #filter="{ filterModel }">
+            <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+        </template>
+    </Column>
+    <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+        <template #body="{ data }">
+            <Tag :value="data.status" :severity="getSeverity(data.status)" />
+        </template>
+        <template #filter="{ filterModel }">
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                <template #option="slotProps">
+                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                </template>
+            </Select>
+        </template>
+    </Column>
+    <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+        <template #body="{ data }">
+            <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+        </template>
+        <template #filter="{ filterModel }">
+            <Slider v-model="filterModel.value" range class="m-4"></Slider>
+            <div class="flex items-center justify-between px-2">
+                <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+            </div>
+        </template>
+    </Column>
+    <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+        <template #body="{ data }">
+            <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
+        </template>
+        <template #filter="{ filterModel }">
+            <label for="verified-filter" class="font-bold"> Verified </label>
+            <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
+                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+            <template #header>
+                <div class="flex justify-between">
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </IconField>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <template #loading> Loading customers data. Please wait. </template>
+            <Column field="name" header="Name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                </template>
+                <template #filterclear="{ filterCallback }">
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
+                </template>
+                <template #filterapply="{ filterCallback }">
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
+                </template>
+                <template #filterfooter>
+                    <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
+                </template>
+            </Column>
+            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatDate(data.date) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+                </template>
+            </Column>
+            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                </template>
+            </Column>
+            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                </template>
+                <template #filter="{ filterModel }">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
+                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+                <template #body="{ data }">
+                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
+                </template>
+                <template #filter="{ filterModel }">
+                    <label for="verified-filter" class="font-bold"> Verified </label>
+                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: null,
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
+            loading: true
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => {
+            this.customers = this.getCustomers(data);
+            this.loading = false;
+        });
+    },
+    methods: {
+        formatDate(value) {
+            return value.toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        clearFilter() {
+            this.initFilters();
+        },
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+            };
+        },
+        getCustomers(data) {
+            return [...(data || [])].map((d) => {
+                d.date = new Date(d.date);
+
+                return d;
+            });
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
+                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+            <template #header>
+                <div class="flex justify-between">
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </IconField>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <template #loading> Loading customers data. Please wait. </template>
+            <Column field="name" header="Name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                </template>
+                <template #filterclear="{ filterCallback }">
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
+                </template>
+                <template #filterapply="{ filterCallback }">
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
+                </template>
+                <template #filterfooter>
+                    <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
+                </template>
+            </Column>
+            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatDate(data.date) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+                </template>
+            </Column>
+            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                </template>
+            </Column>
+            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                </template>
+                <template #filter="{ filterModel }">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
+                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+                <template #body="{ data }">
+                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
+                </template>
+                <template #filter="{ filterModel }">
+                    <label for="verified-filter" class="font-bold"> Verified </label>
+                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+const customers = ref();
+const filters = ref();
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const loading = ref(true);
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+        customers.value = getCustomers(data);
+        loading.value = false;
+    });
+});
+
+
+const initFilters = () => {
+    filters.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    };
+};
+
+initFilters();
+
+const formatDate = (value) => {
+    return value.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+const clearFilter = () => {
+    initFilters();
+};
+const getCustomers = (data) => {
+    return [...(data || [])].map((d) => {
+        d.date = new Date(d.date);
+
+        return d;
+    });
+};
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warn';
+
+        case 'renewal':
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
+            }
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => {
+                this.customers = this.getCustomers(data);
+                this.loading = false;
+            });
+        },
+        formatDate(value) {
+            return value.toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        clearFilter() {
+            this.initFilters();
+        },
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+            };
+        },
+        getCustomers(data) {
+            return [...(data || [])].map((d) => {
+                d.date = new Date(d.date);
+
+                return d;
+            });
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/filter/BasicFilterDoc.vue b/apps/labs/doc/datatable/filter/BasicFilterDoc.vue
new file mode 100644
index 000000000..b90211a0b
--- /dev/null
+++ b/apps/labs/doc/datatable/filter/BasicFilterDoc.vue
@@ -0,0 +1,537 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Data filtering is enabled by defining the <i>filters</i> model referring to a <i>DataTableFilterMeta</i> instance and specifying a filter element for a column using the <i>filter</i> template. This template receives a
+            <i>filterModel</i> and <i>filterCallback</i> to build your own UI.
+        </p>
+        <p>The optional global filtering searches the data against a single value that is bound to the <i>global</i> key of the <i>filters</i> object. The fields to search against are defined with the <i>globalFilterFields</i>.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
+                <template #header>
+                    <div class="flex justify-end">
+                        <IconField>
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
+                            <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                        </IconField>
+                    </div>
+                </template>
+                <template #empty> No customers found. </template>
+                <template #loading> Loading customers data. Please wait. </template>
+                <Column field="name" header="Name" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        {{ data.name }}
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
+                    </template>
+                </Column>
+                <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
+                            <span>{{ data.country.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
+                    </template>
+                </Column>
+                <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
+                            <span>{{ data.representative.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
+                            <template #option="slotProps">
+                                <div class="flex items-center gap-2">
+                                    <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
+                                    <span>{{ slotProps.option.name }}</span>
+                                </div>
+                            </template>
+                        </MultiSelect>
+                    </template>
+                </Column>
+                <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
+                            <template #option="slotProps">
+                                <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                            </template>
+                        </Select>
+                    </template>
+                </Column>
+                <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
+                    <template #body="{ data }">
+                        <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+                'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                status: { value: null, matchMode: FilterMatchMode.EQUALS },
+                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+            },
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
+            loading: true,
+            code: {
+                basic: `
+<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
+        :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
+    <template #header>
+        <div class="flex justify-end">
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
+                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+            </IconField>
+        </div>
+    </template>
+    <template #empty> No customers found. </template>
+    <template #loading> Loading customers data. Please wait. </template>
+    <Column field="name" header="Name" style="min-width: 12rem">
+        <template #body="{ data }">
+            {{ data.name }}
+        </template>
+        <template #filter="{ filterModel, filterCallback }">
+            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
+        </template>
+    </Column>
+    <Column header="Country" filterField="country.name" style="min-width: 12rem">
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                <span>{{ data.country.name }}</span>
+            </div>
+        </template>
+        <template #filter="{ filterModel, filterCallback }">
+            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
+        </template>
+    </Column>
+    <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                <span>{{ data.representative.name }}</span>
+            </div>
+        </template>
+        <template #filter="{ filterModel, filterCallback }">
+            <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
+                <template #option="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                        <span>{{ slotProps.option.name }}</span>
+                    </div>
+                </template>
+            </MultiSelect>
+        </template>
+    </Column>
+    <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
+        <template #body="{ data }">
+            <Tag :value="data.status" :severity="getSeverity(data.status)" />
+        </template>
+        <template #filter="{ filterModel, filterCallback }">
+            <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
+                <template #option="slotProps">
+                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                </template>
+            </Select>
+        </template>
+    </Column>
+    <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
+        <template #body="{ data }">
+            <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
+        </template>
+        <template #filter="{ filterModel, filterCallback }">
+            <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
+                :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
+            <template #header>
+                <div class="flex justify-end">
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </IconField>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <template #loading> Loading customers data. Please wait. </template>
+            <Column field="name" header="Name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
+                </template>
+            </Column>
+            <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
+                <template #body="{ data }">
+                    <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { FilterMatchMode } from '@primevue/core/api';
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+                'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                status: { value: null, matchMode: FilterMatchMode.EQUALS },
+                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+            },
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
+            loading: true
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => {
+            this.customers = this.getCustomers(data);
+            this.loading = false;
+        });
+    },
+    methods: {
+        getCustomers(data) {
+            return [...(data || [])].map((d) => {
+                d.date = new Date(d.date);
+
+                return d;
+            });
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
+                :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
+            <template #header>
+                <div class="flex justify-end">
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </IconField>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <template #loading> Loading customers data. Please wait. </template>
+            <Column field="name" header="Name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
+                </template>
+            </Column>
+            <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
+                <template #body="{ data }">
+                    <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
+                </template>
+                <template #filter="{ filterModel, filterCallback }">
+                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { FilterMatchMode } from '@primevue/core/api';
+import { CustomerService } from '@/service/CustomerService';
+
+const customers = ref();
+const filters = ref({
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+    'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+    representative: { value: null, matchMode: FilterMatchMode.IN },
+    status: { value: null, matchMode: FilterMatchMode.EQUALS },
+    verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+});
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const loading = ref(true);
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+            customers.value = getCustomers(data);
+            loading.value = false;
+        });
+});
+
+const getCustomers = (data) => {
+    return [...(data || [])].map((d) => {
+        d.date = new Date(d.date);
+
+        return d;
+    });
+};
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warn';
+
+        case 'renewal':
+            return null;
+    }
+}
+
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => {
+                this.customers = this.getCustomers(data);
+                this.loading = false;
+            });
+        },
+        getCustomers(data) {
+            return [...(data || [])].map((d) => {
+                d.date = new Date(d.date);
+
+                return d;
+            });
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/pagination/PaginationBasicDoc.vue b/apps/labs/doc/datatable/pagination/PaginationBasicDoc.vue
new file mode 100644
index 000000000..ac3ca5fa2
--- /dev/null
+++ b/apps/labs/doc/datatable/pagination/PaginationBasicDoc.vue
@@ -0,0 +1,115 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" style="width: 25%"></Column>
+                <Column field="country.name" header="Country" style="width: 25%"></Column>
+                <Column field="company" header="Company" style="width: 25%"></Column>
+                <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            code: {
+                basic: `
+<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" style="width: 25%"></Column>
+    <Column field="country.name" header="Country" style="width: 25%"></Column>
+    <Column field="company" header="Company" style="width: 25%"></Column>
+    <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" style="width: 25%"></Column>
+            <Column field="country.name" header="Country" style="width: 25%"></Column>
+            <Column field="company" header="Company" style="width: 25%"></Column>
+            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" style="width: 25%"></Column>
+            <Column field="country.name" header="Country" style="width: 25%"></Column>
+            <Column field="company" header="Company" style="width: 25%"></Column>
+            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
+});
+
+const customers = ref();
+
+<\/script>
+`,
+                data: `
+                {
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/pagination/PaginationHeadlessDoc.vue b/apps/labs/doc/datatable/pagination/PaginationHeadlessDoc.vue
new file mode 100644
index 000000000..c815efe72
--- /dev/null
+++ b/apps/labs/doc/datatable/pagination/PaginationHeadlessDoc.vue
@@ -0,0 +1,155 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode on Pagination is enabled by adding using <i>paginatorcontainer</i>.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="customers" paginator :rows="5" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" style="width: 25%"></Column>
+                <Column field="country.name" header="Country" style="width: 25%"></Column>
+                <Column field="company" header="Company" style="width: 25%"></Column>
+                <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+                <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                    <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                        <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                        <div class="text-color font-medium">
+                            <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                            <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                        </div>
+                        <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                    </div>
+                </template>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            code: {
+                basic: `
+<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" style="width: 25%"></Column>
+    <Column field="country.name" header="Country" style="width: 25%"></Column>
+    <Column field="company" header="Company" style="width: 25%"></Column>
+    <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+    <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+        <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+            <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+            <div class="text-color font-medium">
+                <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+            </div>
+            <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+        </div>
+    </template>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" style="width: 25%"></Column>
+            <Column field="country.name" header="Country" style="width: 25%"></Column>
+            <Column field="company" header="Company" style="width: 25%"></Column>
+            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" style="width: 25%"></Column>
+            <Column field="country.name" header="Country" style="width: 25%"></Column>
+            <Column field="company" header="Company" style="width: 25%"></Column>
+            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
+});
+
+const customers = ref();
+
+<\/script>
+`,
+                data: `
+                {
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/pagination/PaginationTemplateDoc.vue b/apps/labs/doc/datatable/pagination/PaginationTemplateDoc.vue
new file mode 100644
index 000000000..7f844bdde
--- /dev/null
+++ b/apps/labs/doc/datatable/pagination/PaginationTemplateDoc.vue
@@ -0,0 +1,156 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Paginator UI is customized using the <i>paginatorTemplate</i> property. Each element can also be customized further with your own UI to replace the default one, refer to the
+            <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                :value="customers"
+                paginator
+                :rows="5"
+                :rowsPerPageOptions="[5, 10, 20, 50]"
+                paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                currentPageReportTemplate="{first} to {last} of {totalRecords}"
+                tableStyle="min-width: 50rem"
+            >
+                <template #paginatorstart>
+                    <Button type="button" icon="pi pi-refresh" text />
+                </template>
+                <template #paginatorend>
+                    <Button type="button" icon="pi pi-download" text />
+                </template>
+                <Column field="name" header="Name" style="width: 25%"></Column>
+                <Column field="country.name" header="Country" style="width: 25%"></Column>
+                <Column field="company" header="Company" style="width: 25%"></Column>
+                <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            code: {
+                basic: `
+<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
+        paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+        currentPageReportTemplate="{first} to {last} of {totalRecords}">
+    <template #paginatorstart>
+        <Button type="button" icon="pi pi-refresh" text />
+    </template>
+    <template #paginatorend>
+        <Button type="button" icon="pi pi-download" text />
+    </template>
+    <Column field="name" header="Name" style="width: 25%"></Column>
+    <Column field="country.name" header="Country" style="width: 25%"></Column>
+    <Column field="company" header="Company" style="width: 25%"></Column>
+    <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
+                paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                currentPageReportTemplate="{first} to {last} of {totalRecords}">
+            <template #paginatorstart>
+                <Button type="button" icon="pi pi-refresh" text />
+            </template>
+            <template #paginatorend>
+                <Button type="button" icon="pi pi-download" text />
+            </template>
+            <Column field="name" header="Name" style="width: 25%"></Column>
+            <Column field="country.name" header="Country" style="width: 25%"></Column>
+            <Column field="company" header="Company" style="width: 25%"></Column>
+            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
+                paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                currentPageReportTemplate="{first} to {last} of {totalRecords}">
+            <template #paginatorstart>
+                <Button type="button" icon="pi pi-refresh" text />
+            </template>
+            <template #paginatorend>
+                <Button type="button" icon="pi pi-download" text />
+            </template>
+            <Column field="name" header="Name" style="width: 25%"></Column>
+            <Column field="country.name" header="Country" style="width: 25%"></Column>
+            <Column field="company" header="Company" style="width: 25%"></Column>
+            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
+});
+
+const customers = ref();
+
+<\/script>
+`,
+                data: `
+                {
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue b/apps/labs/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
new file mode 100644
index 000000000..d3222ce8a
--- /dev/null
+++ b/apps/labs/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
@@ -0,0 +1,334 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            When <i>expandableRowGroups</i> is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the <i>expandedRows</i> property and <i>rowgroup-expand</i> and
+            <i>rowgroup-collapse</i> events.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                v-model:expandedRowGroups="expandedRowGroups"
+                :value="customers"
+                expandableRowGroups
+                rowGroupMode="subheader"
+                groupRowsBy="representative.name"
+                sortMode="single"
+                sortField="representative.name"
+                :sortOrder="1"
+                @rowgroup-expand="onRowGroupExpand"
+                @rowgroup-collapse="onRowGroupCollapse"
+                tableStyle="min-width: 50rem"
+            >
+                <template #groupheader="slotProps">
+                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" class="ml-2 inline-block" />
+                    <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
+                </template>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="name" header="Name" style="width: 20%"></Column>
+                <Column field="country" header="Country" style="width: 20%">
+                    <template #body="slotProps">
+                        <div class="flex items-center gap-2">
+                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
+                            <span>{{ slotProps.data.country.name }}</span>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="company" header="Company" style="width: 20%"></Column>
+                <Column field="status" header="Status" style="width: 20%">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                    </template>
+                </Column>
+                <Column field="date" header="Date" style="width: 20%"></Column>
+                <template #groupfooter="slotProps">
+                    <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+                </template>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            expandedRowGroups: null,
+            code: {
+                basic: `
+<DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
+        expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
+        sortMode="single" sortField="representative.name" :sortOrder="1">
+    <template #groupheader="slotProps">
+        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+        <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
+    </template>
+    <Column field="representative.name" header="Representative"></Column>
+    <Column field="name" header="Name" style="width: 20%"></Column>
+    <Column field="country" header="Country" style="width: 20%">
+        <template #body="slotProps">
+            <div class="flex items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                <span>{{ slotProps.data.country.name }}</span>
+            </div>
+        </template>
+    </Column>
+    <Column field="company" header="Company" style="width: 20%"></Column>
+    <Column field="status" header="Status" style="width: 20%">
+        <template #body="slotProps">
+            <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+        </template>
+    </Column>
+    <Column field="date" header="Date" style="width: 20%"></Column>
+    <template #groupfooter="slotProps">
+        <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+    </template>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
+                expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
+                sortMode="single" sortField="representative.name" :sortOrder="1">
+            <template #groupheader="slotProps">
+                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+                <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
+            </template>
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="name" header="Name" style="width: 20%"></Column>
+            <Column field="country" header="Country" style="width: 20%">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                        <span>{{ slotProps.data.country.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="company" header="Company" style="width: 20%"></Column>
+            <Column field="status" header="Status" style="width: 20%">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                </template>
+            </Column>
+            <Column field="date" header="Date" style="width: 20%"></Column>
+            <template #groupfooter="slotProps">
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+            </template>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            expandedRowGroups: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+    },
+    methods: {
+        onRowGroupExpand(event) {
+            this.$toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
+        },
+        onRowGroupCollapse(event) {
+            this.$toast.add({ severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000 });
+        },
+        calculateCustomerTotal(name) {
+            let total = 0;
+
+            if (this.customers) {
+                for (let customer of this.customers) {
+                    if (customer.representative.name === name) {
+                        total++;
+                    }
+                }
+            }
+
+            return total;
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
+                expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
+                sortMode="single" sortField="representative.name" :sortOrder="1">
+            <template #groupheader="slotProps">
+                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+                <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
+            </template>
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="name" header="Name" style="width: 20%"></Column>
+            <Column field="country" header="Country" style="width: 20%">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                        <span>{{ slotProps.data.country.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="company" header="Company" style="width: 20%"></Column>
+            <Column field="status" header="Status" style="width: 20%">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                </template>
+            </Column>
+            <Column field="date" header="Date" style="width: 20%"></Column>
+            <template #groupfooter="slotProps">
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+            </template>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
+});
+
+const customers = ref();
+const expandedRowGroups = ref();
+const toast = useToast();
+const onRowGroupExpand = (event) => {
+    toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
+};
+const onRowGroupCollapse = (event) => {
+    toast.add({ severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000 });
+};
+const calculateCustomerTotal = (name) => {
+    let total = 0;
+
+    if (customers.value) {
+        for (let customer of customers.value) {
+            if (customer.representative.name === name) {
+                total++;
+            }
+        }
+    }
+
+    return total;
+};
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warn';
+
+        case 'renewal':
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+        },
+        onRowGroupExpand(event) {
+            this.$toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
+        },
+        onRowGroupCollapse(event) {
+            this.$toast.add({ severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000 });
+        },
+        calculateCustomerTotal(name) {
+            let total = 0;
+
+            if (this.customers) {
+                for (let customer of this.customers) {
+                    if (customer.representative.name === name) {
+                        total++;
+                    }
+                }
+            }
+
+            return total;
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue b/apps/labs/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
new file mode 100644
index 000000000..f0306b640
--- /dev/null
+++ b/apps/labs/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
@@ -0,0 +1,290 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>rowGroupMode</i> is configured to be <i>rowspan</i>, the grouping column spans multiple rows.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
+                <Column header="#" headerStyle="width:3rem">
+                    <template #body="slotProps">
+                        {{ slotProps.index + 1 }}
+                    </template>
+                </Column>
+                <Column field="representative.name" header="Representative" style="min-width: 200px">
+                    <template #body="slotProps">
+                        <div class="flex items-center gap-2">
+                            <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
+                            <span>{{ slotProps.data.representative.name }}</span>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="name" header="Name" style="min-width: 200px"></Column>
+                <Column field="country" header="Country" style="min-width: 150px">
+                    <template #body="slotProps">
+                        <div class="flex items-center gap-2">
+                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
+                            <span>{{ slotProps.data.country.name }}</span>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="company" header="Company" style="min-width: 200px"></Column>
+                <Column field="status" header="Status" style="min-width: 100px">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                    </template>
+                </Column>
+                <Column field="date" header="Date" style="min-width: 100px"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            expandedRowGroups: null,
+            code: {
+                basic: `
+<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
+    <Column header="#" headerStyle="width:3rem">
+        <template #body="slotProps">
+            {{ slotProps.index + 1 }}
+        </template>
+    </Column>
+    <Column field="representative.name" header="Representative" style="min-width: 200px">
+        <template #body="slotProps">
+            <div class="flex items-center gap-2">
+                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
+                <span>{{ slotProps.data.representative.name }}</span>
+            </div>
+        </template>
+    </Column>
+    <Column field="name" header="Name" style="min-width: 200px"></Column>
+    <Column field="country" header="Country" style="min-width: 150px">
+        <template #body="slotProps">
+            <div class="flex items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                <span>{{ slotProps.data.country.name }}</span>
+            </div>
+        </template>
+    </Column>
+    <Column field="company" header="Company" style="min-width: 200px"></Column>
+    <Column field="status" header="Status" style="min-width: 100px">
+        <template #body="slotProps">
+            <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+        </template>
+    </Column>
+    <Column field="date" header="Date" style="min-width: 100px"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
+            <Column header="#" headerStyle="width:3rem">
+                <template #body="slotProps">
+                    {{ slotProps.index + 1 }}
+                </template>
+            </Column>
+            <Column field="representative.name" header="Representative" style="min-width: 200px">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
+                        <span>{{ slotProps.data.representative.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country" header="Country" style="min-width: 150px">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                        <span>{{ slotProps.data.country.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 100px">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                </template>
+            </Column>
+            <Column field="date" header="Date" style="min-width: 100px"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
+            <Column header="#" headerStyle="width:3rem">
+                <template #body="slotProps">
+                    {{ slotProps.index + 1 }}
+                </template>
+            </Column>
+            <Column field="representative.name" header="Representative" style="min-width: 200px">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
+                        <span>{{ slotProps.data.representative.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country" header="Country" style="min-width: 150px">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                        <span>{{ slotProps.data.country.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 100px">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                </template>
+            </Column>
+            <Column field="date" header="Date" style="min-width: 100px"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
+});
+
+const customers = ref();
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warn';
+
+        case 'renewal':
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+        },
+        onRowGroupExpand(event) {
+            this.$toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
+        },
+        onRowGroupCollapse(event) {
+            this.$toast.add({ severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000 });
+        },
+        calculateCustomerTotal(name) {
+            let total = 0;
+
+            if (this.customers) {
+                for (let customer of this.customers) {
+                    if (customer.representative.name === name) {
+                        total++;
+                    }
+                }
+            }
+
+            return total;
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue b/apps/labs/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
new file mode 100644
index 000000000..ce80c5712
--- /dev/null
+++ b/apps/labs/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
@@ -0,0 +1,302 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Rows are grouped with the <i>groupRowsBy</i> property. When <i>rowGroupMode</i> is set as <i>subheader</i>, a header and footer can be displayed for each group. The content of a group header is provided with <i>groupheader</i> and footer
+            with <i>groupfooter</i> slots.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+                <template #groupheader="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
+                        <span>{{ slotProps.data.representative.name }}</span>
+                    </div>
+                </template>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="name" header="Name" style="min-width: 200px"></Column>
+                <Column field="country" header="Country" style="min-width: 200px">
+                    <template #body="slotProps">
+                        <div class="flex items-center gap-2">
+                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
+                            <span>{{ slotProps.data.country.name }}</span>
+                        </div>
+                    </template>
+                </Column>
+                <Column field="company" header="Company" style="min-width: 200px"></Column>
+                <Column field="status" header="Status" style="min-width: 200px">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                    </template>
+                </Column>
+                <Column field="date" header="Date" style="min-width: 200px"></Column>
+                <template #groupfooter="slotProps">
+                    <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+                </template>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            code: {
+                basic: `
+<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
+        sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+    <Column field="representative.name" header="Representative"></Column>
+    <Column field="name" header="Name" style="min-width: 200px"></Column>
+    <Column field="country" header="Country" style="min-width: 200px">
+        <template #body="slotProps">
+            <div class="flex items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                <span>{{ slotProps.data.country.name }}</span>
+            </div>
+        </template>
+    </Column>
+    <Column field="company" header="Company" style="min-width: 200px"></Column>
+    <Column field="status" header="Status" style="min-width: 200px">
+        <template #body="slotProps">
+            <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+        </template>
+    </Column>
+    <Column field="date" header="Date" style="min-width: 200px"></Column>
+    <template #groupheader="slotProps">
+        <div class="flex items-center gap-2">
+            <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
+            <span>{{ slotProps.data.representative.name }}</span>
+        </div>
+    </template>
+    <template #groupfooter="slotProps">
+        <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+    </template>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
+                sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country" header="Country" style="min-width: 200px">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                        <span>{{ slotProps.data.country.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 200px">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                </template>
+            </Column>
+            <Column field="date" header="Date" style="min-width: 200px"></Column>
+            <template #groupheader="slotProps">
+                <div class="flex items-center gap-2">
+                    <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
+                    <span>{{ slotProps.data.representative.name }}</span>
+                </div>
+            </template>
+            <template #groupfooter="slotProps">
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+            </template>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+    },
+    methods: {
+        calculateCustomerTotal(name) {
+            let total = 0;
+
+            if (this.customers) {
+                for (let customer of this.customers) {
+                    if (customer.representative.name === name) {
+                        total++;
+                    }
+                }
+            }
+
+            return total;
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
+                sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country" header="Country" style="min-width: 200px">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
+                        <span>{{ slotProps.data.country.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 200px">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                </template>
+            </Column>
+            <Column field="date" header="Date" style="min-width: 200px"></Column>
+            <template #groupheader="slotProps">
+                <div class="flex items-center gap-2">
+                    <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
+                    <span>{{ slotProps.data.representative.name }}</span>
+                </div>
+            </template>
+            <template #groupfooter="slotProps">
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+            </template>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
+});
+
+const customers = ref();
+const calculateCustomerTotal = (name) => {
+    let total = 0;
+
+    if (customers.value) {
+        for (let customer of customers.value) {
+            if (customer.representative.name === name) {
+                total++;
+            }
+        }
+    }
+
+    return total;
+};
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warn';
+
+        case 'renewal':
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+        },
+        calculateCustomerTotal(name) {
+            let total = 0;
+
+            if (this.customers) {
+                for (let customer of this.customers) {
+                    if (customer.representative.name === name) {
+                        total++;
+                    }
+                }
+            }
+
+            return total;
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
new file mode 100644
index 000000000..239d55b46
--- /dev/null
+++ b/apps/labs/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
@@ -0,0 +1,120 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specifying <i>selectionMode</i> as <i>multiple</i> on a Column, displays a checkbox inside that column for selection.</p>
+        <p>The header checkbox toggles the selection state of the whole dataset by default, when paginator is enabled you may add <i>selectAll</i> property and <i>select-all-change</i> event to only control the selection of visible rows.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+                <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true,
+            code: {
+                basic: `
+<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const selectedProduct = ref();
+const metaKey = ref(true);
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowselection/ColumnRowSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
new file mode 100644
index 000000000..146248892
--- /dev/null
+++ b/apps/labs/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
@@ -0,0 +1,143 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Row selection with an element inside a column is implemented with templating.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+                <Column class="w-24 !text-end">
+                    <template #body="{ data }">
+                        <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+    <Column class="w-24 !text-end">
+        <template #body="{ data }">
+            <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+            <Column class="w-24 !text-end">
+                <template #body="{ data }">
+                    <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+        <Toast/>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        selectRow(data) {
+            this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+            <Column class="w-24 !text-end">
+                <template #body="{ data }">
+                    <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const toast = useToast();
+const selectRow = (data) => {
+    toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+};
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        selectRow(data) {
+            this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
new file mode 100644
index 000000000..da94deb7e
--- /dev/null
+++ b/apps/labs/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
@@ -0,0 +1,132 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            More than one row is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is not necessary to add to existing selections. When the optional
+            <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new row requires meta key to be present. Note that in touch enabled devices, DataTable always ignores metaKey.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-center items-center mb-6 gap-2">
+                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+                <label for="input-metakey">MetaKey</label>
+            </div>
+            <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true,
+            code: {
+                basic: `
+<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+
+<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex justify-center items-center mb-6 gap-2">
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex justify-center items-center mb-6 gap-2">
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const selectedProduct = ref();
+const metaKey = ref(true);
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
new file mode 100644
index 000000000..6acd27001
--- /dev/null
+++ b/apps/labs/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
@@ -0,0 +1,122 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Specifying <i>selectionMode</i> as <i>single</i> on a Column, displays a radio button inside that column for selection. By default, row clicks also trigger selection, set <i>selectionMode</i> of DataTable to <i>radiobutton</i> to only
+            trigger selection using the radio buttons.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+                <Column selectionMode="single" headerStyle="width: 3rem"></Column>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true,
+            code: {
+                basic: `
+<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+    <Column selectionMode="single" headerStyle="width: 3rem"></Column>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+            <Column selectionMode="single" headerStyle="width: 3rem"></Column>
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+            <Column selectionMode="single" headerStyle="width: 3rem"></Column>
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const selectedProduct = ref();
+const metaKey = ref(true);
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowselection/RowSelectEventsDoc.vue b/apps/labs/doc/datatable/rowselection/RowSelectEventsDoc.vue
new file mode 100644
index 000000000..299a946bf
--- /dev/null
+++ b/apps/labs/doc/datatable/rowselection/RowSelectEventsDoc.vue
@@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DataTable provides <i>row-select</i> and <i>row-unselect</i> events to listen selection events.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false" @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true,
+            code: {
+                basic: `
+<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
+        @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
+    <Column selectionMode="single" headerStyle="width: 3rem"></Column>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
+                @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+        <Toast/>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        onRowSelect(event) {
+            this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000 });
+        },
+        onRowUnselect(event) {
+            this.$toast.add({ severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
+                @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+        <Toast/>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const selectedProduct = ref();
+const toast = useToast();
+const onRowSelect = (event) => {
+    toast.add({ severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000 });
+};
+const onRowUnselect = (event) => {
+    toast.add({ severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000 });
+}
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        onRowSelect(event) {
+            this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000 });
+        },
+        onRowUnselect(event) {
+            this.$toast.add({ severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/rowselection/SingleRowSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/SingleRowSelectionDoc.vue
new file mode 100644
index 000000000..6044301f6
--- /dev/null
+++ b/apps/labs/doc/datatable/rowselection/SingleRowSelectionDoc.vue
@@ -0,0 +1,136 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Single row selection is enabled by defining <i>selectionMode</i> as <i>single</i> along with a value binding using <i>selection</i> property. When available, it is suggested to provide a unique identifier of a row with <i>dataKey</i> to
+            optimize performance.
+        </p>
+        <p>
+            By default, metaKey press (e.g. <i>⌘</i>) is necessary to unselect a row however this can be configured with disabling the <i>metaKeySelection</i> property. In touch enabled devices this option has no effect and behavior is same as
+            setting it to false.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-center items-center mb-6 gap-2">
+                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+                <label for="input-metakey">MetaKey</label>
+            </div>
+            <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true,
+            code: {
+                basic: `
+<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+
+<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex justify-center items-center mb-6 gap-2">
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            metaKey: true
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex justify-center items-center mb-6 gap-2">
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const selectedProduct = ref();
+const metaKey = ref(true);
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/samples/CustomersDoc.vue b/apps/labs/doc/datatable/samples/CustomersDoc.vue
new file mode 100644
index 000000000..30b9e4660
--- /dev/null
+++ b/apps/labs/doc/datatable/samples/CustomersDoc.vue
@@ -0,0 +1,709 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DataTable with selection, pagination, filtering, sorting and templating.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                v-model:filters="filters"
+                v-model:selection="selectedCustomers"
+                :value="customers"
+                paginator
+                :rows="10"
+                dataKey="id"
+                filterDisplay="menu"
+                :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
+            >
+                <template #header>
+                    <div class="flex justify-between">
+                        <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                        <IconField>
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
+                            <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                        </IconField>
+                    </div>
+                </template>
+                <template #empty> No customers found. </template>
+                <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+                <Column field="name" header="Name" sortable style="min-width: 14rem">
+                    <template #body="{ data }">
+                        {{ data.name }}
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                    </template>
+                </Column>
+                <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
+                            <span>{{ data.country.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                    </template>
+                </Column>
+                <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                    <template #body="{ data }">
+                        <div class="flex items-center gap-2">
+                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
+                            <span>{{ data.representative.name }}</span>
+                        </div>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                            <template #option="slotProps">
+                                <div class="flex items-center gap-2">
+                                    <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
+                                    <span>{{ slotProps.option.name }}</span>
+                                </div>
+                            </template>
+                        </MultiSelect>
+                    </template>
+                </Column>
+                <Column field="date" header="Date" sortable filterField="date" dataType="date" style="min-width: 10rem">
+                    <template #body="{ data }">
+                        {{ formatDate(data.date) }}
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+                    </template>
+                </Column>
+                <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
+                    <template #body="{ data }">
+                        {{ formatCurrency(data.balance) }}
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                    </template>
+                </Column>
+                <Column header="Status" sortable field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                            <template #option="slotProps">
+                                <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                            </template>
+                        </Select>
+                    </template>
+                </Column>
+                <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
+                    <template #body="{ data }">
+                        <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                    </template>
+                    <template #filter="{ filterModel }">
+                        <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                        <div class="flex items-center justify-between px-2">
+                            <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                            <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                        </div>
+                    </template>
+                </Column>
+                <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+                    <template #body>
+                        <Button type="button" icon="pi pi-cog" rounded />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            selectedCustomers: null,
+            filters: null,
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
+            code: {
+                basic: `
+<DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
+    :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+    <template #header>
+        <div class="flex justify-between">
+            <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
+                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+            </IconField>
+        </div>
+    </template>
+    <template #empty> No customers found. </template>
+    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+    <Column field="name" header="Name" sortable style="min-width: 14rem">
+        <template #body="{ data }">
+            {{ data.name }}
+        </template>
+        <template #filter="{ filterModel }">
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+        </template>
+    </Column>
+    <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                <span>{{ data.country.name }}</span>
+            </div>
+        </template>
+        <template #filter="{ filterModel }">
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+        </template>
+    </Column>
+    <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+        <template #body="{ data }">
+            <div class="flex items-center gap-2">
+                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                <span>{{ data.representative.name }}</span>
+            </div>
+        </template>
+        <template #filter="{ filterModel }">
+            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                <template #option="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                        <span>{{ slotProps.option.name }}</span>
+                    </div>
+                </template>
+            </MultiSelect>
+        </template>
+    </Column>
+    <Column field="date" header="Date" sortable filterField="date" dataType="date" style="min-width: 10rem">
+        <template #body="{ data }">
+            {{ formatDate(data.date) }}
+        </template>
+        <template #filter="{ filterModel }">
+            <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+        </template>
+    </Column>
+    <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
+        <template #body="{ data }">
+            {{ formatCurrency(data.balance) }}
+        </template>
+        <template #filter="{ filterModel }">
+            <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+        </template>
+    </Column>
+    <Column header="Status" field="status" sortable :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+        <template #body="{ data }">
+            <Tag :value="data.status" :severity="getSeverity(data.status)" />
+        </template>
+        <template #filter="{ filterModel }">
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                <template #option="slotProps">
+                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                </template>
+            </Select>
+        </template>
+    </Column>
+    <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
+        <template #body="{ data }">
+            <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+        </template>
+        <template #filter="{ filterModel }">
+            <Slider v-model="filterModel.value" range class="m-4"></Slider>
+            <div class="flex items-center justify-between px-2">
+                <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+            </div>
+        </template>
+    </Column>
+    <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+        <template #body>
+            <Button type="button" icon="pi pi-cog" rounded />
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
+            :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+            <template #header>
+                <div class="flex justify-between">
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </IconField>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+            <Column field="name" header="Name" sortable style="min-width: 14rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                </template>
+            </Column>
+            <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column field="date" header="Date" sortable filterField="date" dataType="date" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatDate(data.date) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+                </template>
+            </Column>
+            <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                </template>
+            </Column>
+            <Column header="Status" field="status" sortable :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                </template>
+                <template #filter="{ filterModel }">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
+                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+                <template #body>
+                    <Button type="button" icon="pi pi-cog" rounded />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            selectedCustomers: null,
+            filters: null,
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    mounted() {
+        CustomerService.getCustomersLarge().then((data) => {
+            this.customers = this.getCustomers(data);
+        });
+    },
+    methods: {
+        formatDate(value) {
+            return value.toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        clearFilter() {
+            this.initFilters();
+        },
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+            };
+        },
+        getCustomers(data) {
+            return [...(data || [])].map((d) => {
+                d.date = new Date(d.date);
+
+                return d;
+            });
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
+            :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+            <template #header>
+                <div class="flex justify-between">
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </IconField>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+            <Column field="name" header="Name" sortable style="min-width: 14rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                </template>
+            </Column>
+            <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column field="date" header="Date" sortable filterField="date" dataType="date" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatDate(data.date) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+                </template>
+            </Column>
+            <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                </template>
+            </Column>
+            <Column header="Status" field="status" sortable :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                </template>
+                <template #filter="{ filterModel }">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
+                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+                <template #body>
+                    <Button type="button" icon="pi pi-cog" rounded />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+
+const customers = ref();
+const selectedCustomers = ref();
+const filters = ref();
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+
+onMounted(() => {
+    CustomerService.getCustomersLarge().then((data) => {
+        customers.value = getCustomers(data);
+    });
+});
+
+
+const initFilters = () => {
+    filters.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    };
+};
+
+initFilters();
+
+const formatDate = (value) => {
+    return value.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+const clearFilter = () => {
+    initFilters();
+};
+const getCustomers = (data) => {
+    return [...(data || [])].map((d) => {
+        d.date = new Date(d.date);
+
+        return d;
+    });
+};
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warn';
+
+        case 'renewal':
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
+            }
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersLarge().then((data) => {
+                this.customers = this.getCustomers(data);
+            });
+        },
+        formatDate(value) {
+            return value.toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        clearFilter() {
+            this.initFilters();
+        },
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+            };
+        },
+        getCustomers(data) {
+            return [...(data || [])].map((d) => {
+                d.date = new Date(d.date);
+
+                return d;
+            });
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warn';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/samples/ProductsDoc.vue b/apps/labs/doc/datatable/samples/ProductsDoc.vue
new file mode 100644
index 000000000..667929a5e
--- /dev/null
+++ b/apps/labs/doc/datatable/samples/ProductsDoc.vue
@@ -0,0 +1,958 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>CRUD implementation example with a Dialog.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Toolbar class="mb-6">
+                <template #start>
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                </template>
+
+                <template #end>
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
+                </template>
+            </Toolbar>
+
+            <DataTable
+                ref="dt"
+                v-model:selection="selectedProducts"
+                :value="products"
+                dataKey="id"
+                :paginator="true"
+                :rows="10"
+                :filters="filters"
+                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                :rowsPerPageOptions="[5, 10, 25]"
+                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
+            >
+                <template #header>
+                    <div class="flex flex-wrap gap-2 items-center justify-between">
+                        <h4 class="m-0">Manage Products</h4>
+                        <IconField>
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
+                            <InputText v-model="filters['global'].value" placeholder="Search..." />
+                        </IconField>
+                    </div>
+                </template>
+
+                <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
+                <Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
+                <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
+                <Column header="Image">
+                    <template #body="slotProps">
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
+                    </template>
+                </Column>
+                <Column field="price" header="Price" sortable style="min-width: 8rem">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.price) }}
+                    </template>
+                </Column>
+                <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
+                <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Rating :modelValue="slotProps.data.rating" :readonly="true" />
+                    </template>
+                </Column>
+                <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
+                    </template>
+                </Column>
+                <Column :exportable="false" style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
+                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+
+    <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
+        <div class="flex flex-col gap-6">
+            <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
+            <div>
+                <label for="name" class="block font-bold mb-3">Name</label>
+                <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
+                <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
+            </div>
+            <div>
+                <label for="description" class="block font-bold mb-3">Description</label>
+                <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
+            </div>
+            <div>
+                <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
+                <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
+            </div>
+
+            <div>
+                <span class="block font-bold mb-4">Category</span>
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="flex items-center gap-2 col-span-6">
+                        <RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
+                        <label for="category1">Accessories</label>
+                    </div>
+                    <div class="flex items-center gap-2 col-span-6">
+                        <RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
+                        <label for="category2">Clothing</label>
+                    </div>
+                    <div class="flex items-center gap-2 col-span-6">
+                        <RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
+                        <label for="category3">Electronics</label>
+                    </div>
+                    <div class="flex items-center gap-2 col-span-6">
+                        <RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
+                        <label for="category4">Fitness</label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-12 gap-4">
+                <div class="col-span-6">
+                    <label for="price" class="block font-bold mb-3">Price</label>
+                    <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
+                </div>
+                <div class="col-span-6">
+                    <label for="quantity" class="block font-bold mb-3">Quantity</label>
+                    <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
+            <Button label="Save" icon="pi pi-check" @click="saveProduct" />
+        </template>
+    </Dialog>
+
+    <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+        <div class="flex items-center gap-4">
+            <i class="pi pi-exclamation-triangle !text-3xl" />
+            <span v-if="product"
+                >Are you sure you want to delete <b>{{ product.name }}</b
+                >?</span
+            >
+        </div>
+        <template #footer>
+            <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
+            <Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
+        </template>
+    </Dialog>
+
+    <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+        <div class="flex items-center gap-4">
+            <i class="pi pi-exclamation-triangle !text-3xl" />
+            <span v-if="product">Are you sure you want to delete the selected products?</span>
+        </div>
+        <template #footer>
+            <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
+            <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
+        </template>
+    </Dialog>
+
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+import { FilterMatchMode } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            products: null,
+            productDialog: false,
+            deleteProductDialog: false,
+            deleteProductsDialog: false,
+            product: {},
+            selectedProducts: null,
+            filters: {},
+            submitted: false,
+            statuses: [
+                { label: 'INSTOCK', value: 'instock' },
+                { label: 'LOWSTOCK', value: 'lowstock' },
+                { label: 'OUTOFSTOCK', value: 'outofstock' }
+            ],
+            code: {
+                basic: `
+<Toolbar class="mb-6">
+    <template #start>
+        <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+        <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+    </template>
+
+    <template #end>
+        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+        <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
+    </template>
+</Toolbar>
+
+<DataTable
+    ref="dt"
+    v-model:selection="selectedProducts"
+    :value="products"
+    dataKey="id"
+    :paginator="true"
+    :rows="10"
+    :filters="filters"
+    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+    :rowsPerPageOptions="[5, 10, 25]"
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
+>
+    <template #header>
+        <div class="flex flex-wrap gap-2 items-center justify-between">
+            <h4 class="m-0">Manage Products</h4>
+            <IconField>
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
+                <InputText v-model="filters['global'].value" placeholder="Search..." />
+            </IconField>
+        </div>
+    </template>
+
+    <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
+    <Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
+    <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
+    <Column header="Image">
+        <template #body="slotProps">
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
+        </template>
+    </Column>
+    <Column field="price" header="Price" sortable style="min-width: 8rem">
+        <template #body="slotProps">
+            {{ formatCurrency(slotProps.data.price) }}
+        </template>
+    </Column>
+    <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
+    <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
+        <template #body="slotProps">
+            <Rating :modelValue="slotProps.data.rating" :readonly="true" />
+        </template>
+    </Column>
+    <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
+        <template #body="slotProps">
+            <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
+        </template>
+    </Column>
+    <Column :exportable="false" style="min-width: 12rem">
+        <template #body="slotProps">
+            <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
+            <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div>
+        <div class="card">
+            <Toolbar class="mb-6">
+                <template #start>
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                </template>
+
+                <template #end>
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
+                </template>
+            </Toolbar>
+
+            <DataTable
+                ref="dt"
+                v-model:selection="selectedProducts"
+                :value="products"
+                dataKey="id"
+                :paginator="true"
+                :rows="10"
+                :filters="filters"
+                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                :rowsPerPageOptions="[5, 10, 25]"
+                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
+            >
+                <template #header>
+                    <div class="flex flex-wrap gap-2 items-center justify-between">
+                        <h4 class="m-0">Manage Products</h4>
+                        <IconField>
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
+                            <InputText v-model="filters['global'].value" placeholder="Search..." />
+                        </IconField>
+                    </div>
+                </template>
+
+                <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
+                <Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
+                <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
+                <Column header="Image">
+                    <template #body="slotProps">
+                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
+                    </template>
+                </Column>
+                <Column field="price" header="Price" sortable style="min-width: 8rem">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.price) }}
+                    </template>
+                </Column>
+                <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
+                <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Rating :modelValue="slotProps.data.rating" :readonly="true" />
+                    </template>
+                </Column>
+                <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
+                    </template>
+                </Column>
+                <Column :exportable="false" style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
+                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+
+        <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
+            <div class="flex flex-col gap-6">
+                <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
+                <div>
+                    <label for="name" class="block font-bold mb-3">Name</label>
+                    <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
+                    <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
+                </div>
+                <div>
+                    <label for="description" class="block font-bold mb-3">Description</label>
+                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
+                </div>
+                <div>
+                    <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
+                    <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
+                </div>
+
+                <div>
+                    <span class="block font-bold mb-4">Category</span>
+                    <div class="grid grid-cols-12 gap-4">
+                        <div class="flex items-center gap-2 col-span-6">
+                            <RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
+                            <label for="category1">Accessories</label>
+                        </div>
+                        <div class="flex items-center gap-2 col-span-6">
+                            <RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
+                            <label for="category2">Clothing</label>
+                        </div>
+                        <div class="flex items-center gap-2 col-span-6">
+                            <RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
+                            <label for="category3">Electronics</label>
+                        </div>
+                        <div class="flex items-center gap-2 col-span-6">
+                            <RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
+                            <label for="category4">Fitness</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-span-6">
+                        <label for="price" class="block font-bold mb-3">Price</label>
+                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
+                    </div>
+                    <div class="col-span-6">
+                        <label for="quantity" class="block font-bold mb-3">Quantity</label>
+                        <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
+                <Button label="Save" icon="pi pi-check" @click="saveProduct" />
+            </template>
+        </Dialog>
+
+        <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+            <div class="flex items-center gap-4">
+                <i class="pi pi-exclamation-triangle !text-3xl" />
+                <span v-if="product"
+                    >Are you sure you want to delete <b>{{ product.name }}</b
+                    >?</span
+                >
+            </div>
+            <template #footer>
+                <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
+                <Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
+            </template>
+        </Dialog>
+
+        <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+            <div class="flex items-center gap-4">
+                <i class="pi pi-exclamation-triangle !text-3xl" />
+                <span v-if="product">Are you sure you want to delete the selected products?</span>
+            </div>
+            <template #footer>
+                <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
+                <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
+            </template>
+        </Dialog>
+	</div>
+</template>
+
+<script>
+import { FilterMatchMode } from '@primevue/core/api';
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            productDialog: false,
+            deleteProductDialog: false,
+            deleteProductsDialog: false,
+            product: {},
+            selectedProducts: null,
+            filters: {},
+            submitted: false,
+            statuses: [
+				{label: 'INSTOCK', value: 'instock'},
+				{label: 'LOWSTOCK', value: 'lowstock'},
+				{label: 'OUTOFSTOCK', value: 'outofstock'}
+            ]
+        }
+    },
+    created() {
+        this.initFilters();
+    },
+    mounted() {
+        ProductService.getProducts().then((data) => (this.products = data));
+    },
+    methods: {
+        formatCurrency(value) {
+            if(value)
+				return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+			return;
+        },
+        openNew() {
+            this.product = {};
+            this.submitted = false;
+            this.productDialog = true;
+        },
+        hideDialog() {
+            this.productDialog = false;
+            this.submitted = false;
+        },
+        saveProduct() {
+            this.submitted = true;
+
+			if (this.product?.name?.trim()) {
+                if (this.product.id) {
+                    this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus;
+                    this.products[this.findIndexById(this.product.id)] = this.product;
+                    this.$toast.add({severity:'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
+                }
+                else {
+                    this.product.id = this.createId();
+                    this.product.code = this.createId();
+                    this.product.image = 'product-placeholder.svg';
+                    this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
+                    this.products.push(this.product);
+                    this.$toast.add({severity:'success', summary: 'Successful', detail: 'Product Created', life: 3000});
+                }
+
+                this.productDialog = false;
+                this.product = {};
+            }
+        },
+        editProduct(product) {
+            this.product = {...product};
+            this.productDialog = true;
+        },
+        confirmDeleteProduct(product) {
+            this.product = product;
+            this.deleteProductDialog = true;
+        },
+        deleteProduct() {
+            this.products = this.products.filter(val => val.id !== this.product.id);
+            this.deleteProductDialog = false;
+            this.product = {};
+            this.$toast.add({severity:'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
+        },
+        findIndexById(id) {
+            let index = -1;
+            for (let i = 0; i < this.products.length; i++) {
+                if (this.products[i].id === id) {
+                    index = i;
+                    break;
+                }
+            }
+
+            return index;
+        },
+        createId() {
+            let id = '';
+            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            for ( var i = 0; i < 5; i++ ) {
+                id += chars.charAt(Math.floor(Math.random() * chars.length));
+            }
+            return id;
+        },
+        exportCSV() {
+            this.$refs.dt.exportCSV();
+        },
+        confirmDeleteSelected() {
+            this.deleteProductsDialog = true;
+        },
+        deleteSelectedProducts() {
+            this.products = this.products.filter(val => !this.selectedProducts.includes(val));
+            this.deleteProductsDialog = false;
+            this.selectedProducts = null;
+            this.$toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
+        },
+        initFilters() {
+            this.filters = {
+                'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
+            }
+        },
+        getStatusLabel(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div>
+        <div class="card">
+            <Toolbar class="mb-6">
+                <template #start>
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                </template>
+
+                <template #end>
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
+                </template>
+            </Toolbar>
+
+            <DataTable
+                ref="dt"
+                v-model:selection="selectedProducts"
+                :value="products"
+                dataKey="id"
+                :paginator="true"
+                :rows="10"
+                :filters="filters"
+                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                :rowsPerPageOptions="[5, 10, 25]"
+                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
+            >
+                <template #header>
+                    <div class="flex flex-wrap gap-2 items-center justify-between">
+                        <h4 class="m-0">Manage Products</h4>
+                        <IconField>
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
+                            <InputText v-model="filters['global'].value" placeholder="Search..." />
+                        </IconField>
+                    </div>
+                </template>
+
+                <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
+                <Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
+                <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
+                <Column header="Image">
+                    <template #body="slotProps">
+                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
+                    </template>
+                </Column>
+                <Column field="price" header="Price" sortable style="min-width: 8rem">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.price) }}
+                    </template>
+                </Column>
+                <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
+                <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Rating :modelValue="slotProps.data.rating" :readonly="true" />
+                    </template>
+                </Column>
+                <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
+                    </template>
+                </Column>
+                <Column :exportable="false" style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
+                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+
+        <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
+            <div class="flex flex-col gap-6">
+                <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
+                <div>
+                    <label for="name" class="block font-bold mb-3">Name</label>
+                    <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
+                    <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
+                </div>
+                <div>
+                    <label for="description" class="block font-bold mb-3">Description</label>
+                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
+                </div>
+                <div>
+                    <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
+                    <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
+                </div>
+
+                <div>
+                    <span class="block font-bold mb-4">Category</span>
+                    <div class="grid grid-cols-12 gap-4">
+                        <div class="flex items-center gap-2 col-span-6">
+                            <RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
+                            <label for="category1">Accessories</label>
+                        </div>
+                        <div class="flex items-center gap-2 col-span-6">
+                            <RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
+                            <label for="category2">Clothing</label>
+                        </div>
+                        <div class="flex items-center gap-2 col-span-6">
+                            <RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
+                            <label for="category3">Electronics</label>
+                        </div>
+                        <div class="flex items-center gap-2 col-span-6">
+                            <RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
+                            <label for="category4">Fitness</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-span-6">
+                        <label for="price" class="block font-bold mb-3">Price</label>
+                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
+                    </div>
+                    <div class="col-span-6">
+                        <label for="quantity" class="block font-bold mb-3">Quantity</label>
+                        <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
+                <Button label="Save" icon="pi pi-check" @click="saveProduct" />
+            </template>
+        </Dialog>
+
+        <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+            <div class="flex items-center gap-4">
+                <i class="pi pi-exclamation-triangle !text-3xl" />
+                <span v-if="product"
+                    >Are you sure you want to delete <b>{{ product.name }}</b
+                    >?</span
+                >
+            </div>
+            <template #footer>
+                <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
+                <Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
+            </template>
+        </Dialog>
+
+        <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+            <div class="flex items-center gap-4">
+                <i class="pi pi-exclamation-triangle !text-3xl" />
+                <span v-if="product">Are you sure you want to delete the selected products?</span>
+            </div>
+            <template #footer>
+                <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
+                <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
+            </template>
+        </Dialog>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { FilterMatchMode } from '@primevue/core/api';
+import { useToast } from 'primevue/usetoast';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProducts().then((data) => (products.value = data));
+});
+
+const toast = useToast();
+const dt = ref();
+const products = ref();
+const productDialog = ref(false);
+const deleteProductDialog = ref(false);
+const deleteProductsDialog = ref(false);
+const product = ref({});
+const selectedProducts = ref();
+const filters = ref({
+    'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
+});
+const submitted = ref(false);
+const statuses = ref([
+    {label: 'INSTOCK', value: 'instock'},
+    {label: 'LOWSTOCK', value: 'lowstock'},
+    {label: 'OUTOFSTOCK', value: 'outofstock'}
+]);
+
+const formatCurrency = (value) => {
+    if(value)
+        return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+    return;
+};
+const openNew = () => {
+    product.value = {};
+    submitted.value = false;
+    productDialog.value = true;
+};
+const hideDialog = () => {
+    productDialog.value = false;
+    submitted.value = false;
+};
+const saveProduct = () => {
+    submitted.value = true;
+
+    if (product?.value.name?.trim()) {
+        if (product.value.id) {
+            product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
+            products.value[findIndexById(product.value.id)] = product.value;
+            toast.add({severity:'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
+        }
+        else {
+            product.value.id = createId();
+            product.value.code = createId();
+            product.value.image = 'product-placeholder.svg';
+            product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
+            products.value.push(product.value);
+            toast.add({severity:'success', summary: 'Successful', detail: 'Product Created', life: 3000});
+        }
+
+        productDialog.value = false;
+        product.value = {};
+    }
+};
+const editProduct = (prod) => {
+    product.value = {...prod};
+    productDialog.value = true;
+};
+const confirmDeleteProduct = (prod) => {
+    product.value = prod;
+    deleteProductDialog.value = true;
+};
+const deleteProduct = () => {
+    products.value = products.value.filter(val => val.id !== product.value.id);
+    deleteProductDialog.value = false;
+    product.value = {};
+    toast.add({severity:'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
+};
+const findIndexById = (id) => {
+    let index = -1;
+    for (let i = 0; i < products.value.length; i++) {
+        if (products.value[i].id === id) {
+            index = i;
+            break;
+        }
+    }
+
+    return index;
+};
+const createId = () => {
+    let id = '';
+    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for ( var i = 0; i < 5; i++ ) {
+        id += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return id;
+}
+const exportCSV = () => {
+    dt.value.exportCSV();
+};
+const confirmDeleteSelected = () => {
+    deleteProductsDialog.value = true;
+};
+const deleteSelectedProducts = () => {
+    products.value = products.value.filter(val => !selectedProducts.value.includes(val));
+    deleteProductsDialog.value = false;
+    selectedProducts.value = null;
+    toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
+};
+
+const getStatusLabel = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProducts().then((data) => (this.products = data));
+        },
+        formatCurrency(value) {
+            if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+
+            return;
+        },
+        openNew() {
+            this.product = {};
+            this.submitted = false;
+            this.productDialog = true;
+        },
+        hideDialog() {
+            this.productDialog = false;
+            this.submitted = false;
+        },
+        saveProduct() {
+            this.submitted = true;
+
+            if (this.product?.name?.trim()) {
+                if (this.product.id) {
+                    this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
+                    this.products[this.findIndexById(this.product.id)] = this.product;
+                    this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
+                } else {
+                    this.product.id = this.createId();
+                    this.product.code = this.createId();
+                    this.product.image = 'product-placeholder.svg';
+                    this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
+                    this.products.push(this.product);
+                    this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
+                }
+
+                this.productDialog = false;
+                this.product = {};
+            }
+        },
+        editProduct(product) {
+            this.product = { ...product };
+            this.productDialog = true;
+        },
+        confirmDeleteProduct(product) {
+            this.product = product;
+            this.deleteProductDialog = true;
+        },
+        deleteProduct() {
+            this.products = this.products.filter((val) => val.id !== this.product.id);
+            this.deleteProductDialog = false;
+            this.product = {};
+            this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
+        },
+        findIndexById(id) {
+            let index = -1;
+
+            for (let i = 0; i < this.products.length; i++) {
+                if (this.products[i].id === id) {
+                    index = i;
+                    break;
+                }
+            }
+
+            return index;
+        },
+        createId() {
+            let id = '';
+            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+            for (var i = 0; i < 5; i++) {
+                id += chars.charAt(Math.floor(Math.random() * chars.length));
+            }
+
+            return id;
+        },
+        exportCSV() {
+            this.$refs.dt.exportCSV();
+        },
+        confirmDeleteSelected() {
+            this.deleteProductsDialog = true;
+        },
+        deleteSelectedProducts() {
+            this.products = this.products.filter((val) => !this.selectedProducts.includes(val));
+            this.deleteProductsDialog = false;
+            this.selectedProducts = null;
+            this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+        },
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+            };
+        },
+        getStatusLabel(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/scroll/FlexibleScrollDoc.vue b/apps/labs/doc/datatable/scroll/FlexibleScrollDoc.vue
new file mode 100644
index 000000000..c0767ad54
--- /dev/null
+++ b/apps/labs/doc/datatable/scroll/FlexibleScrollDoc.vue
@@ -0,0 +1,151 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data viewport
+            adjusts itself according to the size changes.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+
+        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }" @show="onShow">
+            <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="company" header="Company"></Column>
+            </DataTable>
+            <template #footer>
+                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
+            </template>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            dialogVisible: false,
+            code: {
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+<Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
+    <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
+        <Column field="name" header="Name"></Column>
+        <Column field="country.name" header="Country"></Column>
+        <Column field="representative.name" header="Representative"></Column>
+        <Column field="company" header="Company"></Column>
+    </DataTable>
+    <template #footer>
+        <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
+    </template>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+
+        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
+            <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="company" header="Company"></Column>
+            </DataTable>
+            <template #footer>
+                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            dialogVisible: false
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => {
+            this.customers = data;
+        });
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+
+        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
+            <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="company" header="Company"></Column>
+            </DataTable>
+            <template #footer>
+                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+const customers = ref();
+const dialogVisible = ref(false);
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+        customers.value = data;
+    });
+});
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        onShow() {
+            CustomerService.getCustomersMedium().then((data) => {
+                this.customers = data;
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/scroll/FrozenColumnsDoc.vue b/apps/labs/doc/datatable/scroll/FrozenColumnsDoc.vue
new file mode 100644
index 000000000..5dd7adf55
--- /dev/null
+++ b/apps/labs/doc/datatable/scroll/FrozenColumnsDoc.vue
@@ -0,0 +1,181 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+
+            <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
+                <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
+                <Column field="id" header="Id" style="min-width: 100px"></Column>
+                <Column field="name" header="Name" style="min-width: 200px"></Column>
+                <Column field="country.name" header="Country" style="min-width: 200px"></Column>
+                <Column field="date" header="Date" style="min-width: 200px"></Column>
+                <Column field="company" header="Company" style="min-width: 200px"></Column>
+                <Column field="status" header="Status" style="min-width: 200px"></Column>
+                <Column field="activity" header="Activity" style="min-width: 200px"></Column>
+                <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
+                <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
+                    <template #body="{ data }">
+                        <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            balanceFrozen: false,
+            code: {
+                basic: `
+<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+<DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
+    <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
+    <Column field="id" header="Id" style="min-width: 100px"></Column>
+    <Column field="name" header="Name" style="min-width: 200px"></Column>
+    <Column field="country.name" header="Country" style="min-width: 200px"></Column>
+    <Column field="date" header="Date" style="min-width: 200px"></Column>
+    <Column field="company" header="Company" style="min-width: 200px"></Column>
+    <Column field="status" header="Status" style="min-width: 200px"></Column>
+    <Column field="activity" header="Activity" style="min-width: 200px"></Column>
+    <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
+    <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
+        <template #body="{ data }">
+            <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+
+        <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
+            <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
+            <Column field="id" header="Id" style="min-width: 100px"></Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country.name" header="Country" style="min-width: 200px"></Column>
+            <Column field="date" header="Date" style="min-width: 200px"></Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 200px"></Column>
+            <Column field="activity" header="Activity" style="min-width: 200px"></Column>
+            <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
+            <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
+                <template #body="{ data }">
+                    <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            balanceFrozen: false
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersLarge().then((data) => {
+            this.customers = data;
+        });
+    },
+    methods: {
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+
+        <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
+            <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
+            <Column field="id" header="Id" style="min-width: 100px"></Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country.name" header="Country" style="min-width: 200px"></Column>
+            <Column field="date" header="Date" style="min-width: 200px"></Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 200px"></Column>
+            <Column field="activity" header="Activity" style="min-width: 200px"></Column>
+            <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
+            <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
+                <template #body="{ data }">
+                    <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    CustomerService.getCustomersLarge().then((data) => {
+        customers.value = data;
+    });
+});
+
+const customers = ref();
+const balanceFrozen = ref(false);
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersLarge().then((data) => {
+                this.customers = data;
+            });
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/scroll/FrozenRowsDoc.vue b/apps/labs/doc/datatable/scroll/FrozenRowsDoc.vue
new file mode 100644
index 000000000..162440dff
--- /dev/null
+++ b/apps/labs/doc/datatable/scroll/FrozenRowsDoc.vue
@@ -0,0 +1,281 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Rows can be fixed during scrolling by enabling the <i>frozenValue</i> property.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                :value="customers"
+                :frozenValue="lockedCustomers"
+                scrollable
+                scrollHeight="400px"
+                :pt="{
+                    table: { style: 'min-width: 50rem' },
+                    bodyrow: ({ props }) => ({
+                        class: [{ 'font-bold': props.frozenRow }]
+                    })
+                }"
+            >
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="status" header="Status"></Column>
+                <Column style="flex: 0 0 4rem">
+                    <template #body="{ data, frozenRow, index }">
+                        <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            lockedCustomers: [
+                {
+                    id: 5135,
+                    name: 'Geraldine Bisset',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Bisset Group',
+                    status: 'proposal',
+                    date: '2019-05-05',
+                    activity: 0,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<DataTable
+    :value="customers"
+    :frozenValue="lockedCustomers"
+    scrollable
+    scrollHeight="400px"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        bodyrow: ({ props }) => ({
+            class: [{ 'font-bold': props.frozenRow }]
+        })
+    }"
+>
+    <Column field="name" header="Name"></Column>
+    <Column field="country.name" header="Country"></Column>
+    <Column field="representative.name" header="Representative"></Column>
+    <Column field="status" header="Status"></Column>
+    <Column style="flex: 0 0 4rem">
+        <template #body="{ data, frozenRow, index }">
+            <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable
+            :value="customers"
+            :frozenValue="lockedCustomers"
+            scrollable
+            scrollHeight="400px"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                bodyrow: ({ props }) => ({
+                    class: [{ 'font-bold': props.frozenRow }]
+                })
+            }"
+        >
+            <Column field="name" header="Name"></Column>
+            <Column field="country.name" header="Country"></Column>
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="status" header="Status"></Column>
+            <Column style="flex: 0 0 4rem">
+                <template #body="{ data, frozenRow, index }">
+                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            lockedCustomers: [
+                {
+                    id: 5135,
+                    name: 'Geraldine Bisset',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Bisset Group',
+                    status: 'proposal',
+                    date: '2019-05-05',
+                    activity: 0,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    }
+                }
+            ]
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => {
+            this.customers = data;
+        });
+    },
+    methods: {
+        toggleLock(data, frozen, index) {
+            if (frozen) {
+                this.lockedCustomers = this.lockedCustomers.filter((c, i) => i !== index);
+                this.customers.push(data);
+            } else {
+                this.customers = this.customers.filter((c, i) => i !== index);
+                this.lockedCustomers.push(data);
+            }
+
+            this.customers.sort((val1, val2) => {
+                return val1.id < val2.id ? -1 : 1;
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable
+            :value="customers"
+            :frozenValue="lockedCustomers"
+            scrollable
+            scrollHeight="400px"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                bodyrow: ({ props }) => ({
+                    class: [{ 'font-bold': props.frozenRow }]
+                })
+            }"
+        >
+            <Column field="name" header="Name"></Column>
+            <Column field="country.name" header="Country"></Column>
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="status" header="Status"></Column>
+            <Column style="flex: 0 0 4rem">
+                <template #body="{ data, frozenRow, index }">
+                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+const customers = ref();
+const lockedCustomers = ref([
+    {
+        id: 5135,
+        name: 'Geraldine Bisset',
+        country: {
+            name: 'France',
+            code: 'fr'
+        },
+        company: 'Bisset Group',
+        status: 'proposal',
+        date: '2019-05-05',
+        activity: 0,
+        representative: {
+            name: 'Amy Elsner',
+            image: 'amyelsner.png'
+        }
+    }
+]);
+const toggleLock = (data, frozen, index) => {
+    if (frozen) {
+        lockedCustomers.value = lockedCustomers.value.filter((c, i) => i !== index);
+        customers.value.push(data);
+    }
+    else {
+        customers.value = customers.value.filter((c, i) => i !== index);
+        lockedCustomers.value.push(data);
+    }
+
+    customers.value.sort((val1, val2) => {
+        return val1.id < val2.id ? -1 : 1;
+    });
+};
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+        customers.value = data;
+    });
+});
+
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => {
+                this.customers = data;
+            });
+        },
+        toggleLock(data, frozen, index) {
+            if (frozen) {
+                this.lockedCustomers = this.lockedCustomers.filter((c, i) => i !== index);
+                this.customers.push(data);
+            } else {
+                this.customers = this.customers.filter((c, i) => i !== index);
+                this.lockedCustomers.push(data);
+            }
+
+            this.customers.sort((val1, val2) => {
+                return val1.id < val2.id ? -1 : 1;
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/scroll/HorizontalScrollDoc.vue b/apps/labs/doc/datatable/scroll/HorizontalScrollDoc.vue
new file mode 100644
index 000000000..4ed8989d2
--- /dev/null
+++ b/apps/labs/doc/datatable/scroll/HorizontalScrollDoc.vue
@@ -0,0 +1,168 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Horizontal scrollbar is displayed when table width exceeds the parent width.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="customers" scrollable scrollHeight="400px">
+                <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
+                <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
+                <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
+                <Column field="date" header="Date" footer="Date" style="min-width: 200px"></Column>
+                <Column field="balance" header="Balance" footer="Balance" style="min-width: 200px">
+                    <template #body="{ data }">
+                        {{ formatCurrency(data.balance) }}
+                    </template>
+                </Column>
+                <Column field="company" header="Company" footer="Company" style="min-width: 200px"></Column>
+                <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
+                <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
+                <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            code: {
+                basic: `
+<DataTable :value="customers" scrollable scrollHeight="400px">
+    <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
+    <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
+    <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
+    <Column field="date" header="Date" footer="Date" style="min-width: 200px"></Column>
+    <Column field="balance" header="Balance" footer="Balance" style="min-width: 200px">
+        <template #body="{ data }">
+            {{ formatCurrency(data.balance) }}
+        </template>
+    </Column>
+    <Column field="company" header="Company" footer="Company" style="min-width: 200px"></Column>
+    <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
+    <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
+    <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" scrollable scrollHeight="400px">
+            <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
+            <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
+            <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
+            <Column field="date" header="Date" footer="Date" style="min-width: 200px"></Column>
+            <Column field="balance" header="Balance" footer="Balance" style="min-width: 200px">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+            </Column>
+            <Column field="company" header="Company" footer="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
+            <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
+            <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => {
+            this.customers = data;
+        });
+    },
+    methods: {
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" scrollable scrollHeight="400px">
+            <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
+            <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
+            <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
+            <Column field="date" header="Date" footer="Date" style="min-width: 200px"></Column>
+            <Column field="balance" header="Balance" footer="Balance" style="min-width: 200px">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+            </Column>
+            <Column field="company" header="Company" footer="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
+            <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
+            <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+const customers = ref();
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+        customers.value = data;
+    });
+});
+
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => {
+                this.customers = data;
+            });
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/scroll/VerticalScrollDoc.vue b/apps/labs/doc/datatable/scroll/VerticalScrollDoc.vue
new file mode 100644
index 000000000..d24973c8b
--- /dev/null
+++ b/apps/labs/doc/datatable/scroll/VerticalScrollDoc.vue
@@ -0,0 +1,120 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="company" header="Company"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            code: {
+                basic: `
+<DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name"></Column>
+    <Column field="country.name" header="Country"></Column>
+    <Column field="representative.name" header="Representative"></Column>
+    <Column field="company" header="Company"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name"></Column>
+            <Column field="country.name" header="Country"></Column>
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="company" header="Company"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => {
+            this.customers = data;
+        });
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name"></Column>
+            <Column field="country.name" header="Country"></Column>
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="company" header="Company"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+const customers = ref();
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+        customers.value = data;
+    });
+});
+<\/script>
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => {
+                this.customers = data;
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/sort/MultipleColumnsDoc.vue b/apps/labs/doc/datatable/sort/MultipleColumnsDoc.vue
new file mode 100644
index 000000000..c421b1823
--- /dev/null
+++ b/apps/labs/doc/datatable/sort/MultipleColumnsDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code" sortable style="width: 25%"></Column>
+                <Column field="name" header="Name" sortable style="width: 25%"></Column>
+                <Column field="category" header="Category" sortable style="width: 25%"></Column>
+                <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code" sortable style="width: 25%"></Column>
+    <Column field="name" header="Name" sortable style="width: 25%"></Column>
+    <Column field="category" header="Category" sortable style="width: 25%"></Column>
+    <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/sort/PresortDoc.vue b/apps/labs/doc/datatable/sort/PresortDoc.vue
new file mode 100644
index 000000000..a4b6fc469
--- /dev/null
+++ b/apps/labs/doc/datatable/sort/PresortDoc.vue
@@ -0,0 +1,143 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Defining a default <i>sortField</i> and <i>sortOrder</i> displays data as sorted initially in single column sorting. In <i>multiple</i> sort mode, <i>multiSortMeta</i> should be used instead by providing an array of
+            <i>DataTableSortMeta</i> objects.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code" sortable style="width: 20%"></Column>
+                <Column field="name" header="Name" sortable style="width: 20%"></Column>
+                <Column field="price" header="Price" :sortable="true">
+                    <template #body="slotProps">
+                        {{ formatCurrency(slotProps.data.price) }}
+                    </template>
+                </Column>
+                <Column field="category" header="Category" sortable style="width: 20%"></Column>
+                <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code" sortable style="width: 20%"></Column>
+    <Column field="name" header="Name" sortable style="width: 20%"></Column>
+    <Column field="price" header="Price" :sortable="true">
+        <template #body="slotProps">
+            {{ formatCurrency(slotProps.data.price) }}
+        </template>
+    </Column>
+    <Column field="category" header="Category" sortable style="width: 20%"></Column>
+    <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code" sortable style="width: 20%"></Column>
+            <Column field="name" header="Name" sortable style="width: 20%"></Column>
+            <Column field="price" header="Price" :sortable="true">
+                <template #body="slotProps">
+                    {{ formatCurrency(slotProps.data.price) }}
+                </template>
+            </Column>
+            <Column field="category" header="Category" sortable style="width: 20%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code" sortable style="width: 20%"></Column>
+            <Column field="name" header="Name" sortable style="width: 20%"></Column>
+            <Column field="price" header="Price" :sortable="true">
+                <template #body="slotProps">
+                    {{ formatCurrency(slotProps.data.price) }}
+                </template>
+            </Column>
+            <Column field="category" header="Category" sortable style="width: 20%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+}
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/sort/RemovableSortDoc.vue b/apps/labs/doc/datatable/sort/RemovableSortDoc.vue
new file mode 100644
index 000000000..c4d3309d2
--- /dev/null
+++ b/apps/labs/doc/datatable/sort/RemovableSortDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>removableSort</i> is present, the third click removes the sorting from the column.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
+                <Column field="code" header="Code" sortable style="width: 25%"></Column>
+                <Column field="name" header="Name" sortable style="width: 25%"></Column>
+                <Column field="category" header="Category" sortable style="width: 25%"></Column>
+                <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" removableSort tableStyle="min-width: 50rem">
+    <Column field="code" header="Code" sortable style="width: 25%"></Column>
+    <Column field="name" header="Name" sortable style="width: 25%"></Column>
+    <Column field="category" header="Category" sortable style="width: 25%"></Column>
+    <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/sort/SingleColumnDoc.vue b/apps/labs/doc/datatable/sort/SingleColumnDoc.vue
new file mode 100644
index 000000000..5448f7e2f
--- /dev/null
+++ b/apps/labs/doc/datatable/sort/SingleColumnDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sorting on a column is enabled by adding the <i>sortable</i> property.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code" sortable style="width: 25%"></Column>
+                <Column field="name" header="Name" sortable style="width: 25%"></Column>
+                <Column field="category" header="Category" sortable style="width: 25%"></Column>
+                <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code" sortable style="width: 25%"></Column>
+    <Column field="name" header="Name" sortable style="width: 25%"></Column>
+    <Column field="category" header="Category" sortable style="width: 25%"></Column>
+    <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue b/apps/labs/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
new file mode 100644
index 000000000..0e453456b
--- /dev/null
+++ b/apps/labs/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
@@ -0,0 +1,313 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When lazy loading is enabled via the <i>virtualScrollerOptions</i>, data is fetched on demand during scrolling instead of preload.</p>
+        <p>In sample below, an in-memory list and timeout is used to mimic fetching from a remote datasource. The <i>virtualCars</i> is an empty array that is populated on scroll.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable
+                :value="virtualCars"
+                scrollable
+                scrollHeight="400px"
+                :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }"
+                tableStyle="min-width: 50rem"
+            >
+                <Column field="id" header="Id" style="width: 20%">
+                    <template #loading>
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                            <Skeleton width="60%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="vin" header="Vin" style="width: 20%">
+                    <template #loading>
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                            <Skeleton width="40%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="year" header="Year" style="width: 20%">
+                    <template #loading>
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                            <Skeleton width="30%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="brand" header="Brand" style="width: 20%">
+                    <template #loading>
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                            <Skeleton width="40%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="color" header="Color" style="width: 20%">
+                    <template #loading>
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                            <Skeleton width="60%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CarService']" />
+</template>
+
+<script>
+import { CarService } from '@/service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            virtualCars: Array.from({ length: 100000 }),
+            lazyLoading: false,
+            loadLazyTimeout: null,
+            code: {
+                basic: `
+<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
+        :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
+    <Column field="id" header="Id" style="width: 20%">
+        <template #loading>
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                <Skeleton width="60%" height="1rem" />
+            </div>
+        </template>
+    </Column>
+    <Column field="vin" header="Vin" style="width: 20%">
+        <template #loading>
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                <Skeleton width="40%" height="1rem" />
+            </div>
+        </template>
+    </Column>
+    <Column field="year" header="Year" style="width: 20%">
+        <template #loading>
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                <Skeleton width="30%" height="1rem" />
+            </div>
+        </template>
+    </Column>
+    <Column field="brand" header="Brand" style="width: 20%">
+        <template #loading>
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                <Skeleton width="40%" height="1rem" />
+            </div>
+        </template>
+    </Column>
+    <Column field="color" header="Color" style="width: 20%">
+        <template #loading>
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                <Skeleton width="60%" height="1rem" />
+            </div>
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
+                :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
+            <Column field="id" header="Id" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="60%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+            <Column field="vin" header="Vin" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="40%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+            <Column field="year" header="Year" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="30%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+            <Column field="brand" header="Brand" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="40%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+            <Column field="color" header="Color" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="60%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CarService } from '@/service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            virtualCars: Array.from({ length: 100000 }),
+            lazyLoading: false,
+            loadLazyTimeout: null
+        };
+    },
+    mounted() {
+        this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+    },
+    methods: {
+        loadCarsLazy(event) {
+            !this.lazyLoading && (this.lazyLoading = true);
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //simulate remote connection with a timeout
+            this.loadLazyTimeout = setTimeout(() => {
+                let _virtualCars = [...this.virtualCars];
+                let { first, last } = event;
+
+                //load data of required page
+                const loadedCars = this.cars.slice(first, last);
+
+                //populate page of virtual cars
+                Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
+
+                this.virtualCars = _virtualCars;
+                this.lazyLoading = false;
+            }, Math.random() * 1000 + 250);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
+                :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
+            <Column field="id" header="Id" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="60%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+            <Column field="vin" header="Vin" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="40%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+            <Column field="year" header="Year" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="30%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+            <Column field="brand" header="Brand" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="40%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+            <Column field="color" header="Color" style="width: 20%">
+                <template #loading>
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <Skeleton width="60%" height="1rem" />
+                    </div>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CarService } from '@/service/CarService';
+
+onMounted(() => {
+    cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+});
+
+const cars = ref();
+const virtualCars = ref(Array.from({ length: 100000 }));
+const lazyLoading = ref(false);
+const loadLazyTimeout = ref();
+
+const loadCarsLazy = (event) => {
+    !lazyLoading.value && (lazyLoading.value = true);
+
+    if (loadLazyTimeout.value) {
+        clearTimeout(loadLazyTimeout.value);
+    }
+
+    //simulate remote connection with a timeout
+    loadLazyTimeout.value = setTimeout(() => {
+        let _virtualCars = [...virtualCars.value];
+        let { first, last } = event;
+
+        //load data of required page
+        const loadedCars = cars.value.slice(first, last);
+
+        //populate page of virtual cars
+        Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
+
+        virtualCars.value = _virtualCars;
+        lazyLoading.value = false;
+    }, Math.random() * 1000 + 250);
+};
+<\/script>
+`,
+                data: `
+{
+    id: 1
+    vin: tvACo,
+    brand: Norma,
+    color: Black,
+    year: 2002
+}`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+        },
+        loadCarsLazy(event) {
+            !this.lazyLoading && (this.lazyLoading = true);
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //simulate remote connection with a timeout
+            this.loadLazyTimeout = setTimeout(() => {
+                let _virtualCars = [...this.virtualCars];
+                let { first, last } = event;
+
+                //load data of required page
+                const loadedCars = this.cars.slice(first, last);
+
+                //populate page of virtual cars
+                Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
+
+                this.virtualCars = _virtualCars;
+                this.lazyLoading = false;
+            }, Math.random() * 1000 + 250);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue b/apps/labs/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
new file mode 100644
index 000000000..69772898e
--- /dev/null
+++ b/apps/labs/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Virtual Scrolling is an efficient way to render large amount data. Usage is similar to regular scrolling with the addition of <i>virtualScrollerOptions</i> property to define a fixed <i>itemSize</i>. Internally,
+            <PrimeVueNuxtLink to="/virtualscroller">VirtualScroller</PrimeVueNuxtLink> component is utilized so refer to the API of VirtualScroller for more information about the available options.
+        </p>
+        <p>In this example, <strong>100000</strong> preloaded records are rendered by the Table.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
+                <Column field="id" header="Id" style="width: 20%"></Column>
+                <Column field="vin" header="Vin" style="width: 20%"></Column>
+                <Column field="year" header="Year" style="width: 20%"></Column>
+                <Column field="brand" header="Brand" style="width: 20%"></Column>
+                <Column field="color" header="Color" style="width: 20%"></Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CarService']" />
+</template>
+
+<script>
+import { CarService } from '@/service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            code: {
+                basic: `
+<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
+    <Column field="id" header="Id" style="width: 20%"></Column>
+    <Column field="vin" header="Vin" style="width: 20%"></Column>
+    <Column field="year" header="Year" style="width: 20%"></Column>
+    <Column field="brand" header="Brand" style="width: 20%"></Column>
+    <Column field="color" header="Color" style="width: 20%"></Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
+            <Column field="id" header="Id" style="width: 20%"></Column>
+            <Column field="vin" header="Vin" style="width: 20%"></Column>
+            <Column field="year" header="Year" style="width: 20%"></Column>
+            <Column field="brand" header="Brand" style="width: 20%"></Column>
+            <Column field="color" header="Color" style="width: 20%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CarService } from '@/service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null
+        };
+    },
+    mounted() {
+        this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
+            <Column field="id" header="Id" style="width: 20%"></Column>
+            <Column field="vin" header="Vin" style="width: 20%"></Column>
+            <Column field="year" header="Year" style="width: 20%"></Column>
+            <Column field="brand" header="Brand" style="width: 20%"></Column>
+            <Column field="color" header="Color" style="width: 20%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CarService } from '@/service/CarService';
+
+const cars = ref();
+
+onMounted(() => {
+    cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+});
+<\/script>
+`,
+                data: `
+{
+    id: 1
+    vin: tvACo,
+    brand: Norma,
+    color: Black,
+    year: 2002
+}`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dataview/AccessibilityDoc.vue b/apps/labs/doc/dataview/AccessibilityDoc.vue
new file mode 100644
index 000000000..43a5cdae5
--- /dev/null
+++ b/apps/labs/doc/dataview/AccessibilityDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
+            derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API respectively.
+        </p>
+
+        <p>Refer to <PrimeVueNuxtLink to="/paginator">paginator</PrimeVueNuxtLink> accessibility documentation for the paginator of the component.</p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the checked state of a button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/dataview/BasicDoc.vue b/apps/labs/doc/dataview/BasicDoc.vue
new file mode 100644
index 000000000..7f7d397ec
--- /dev/null
+++ b/apps/labs/doc/dataview/BasicDoc.vue
@@ -0,0 +1,278 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DataView requires a <i>value</i> to display along with a <i>list</i> slot for item content.</p>
+    </DocSectionText>
+    <div class="card">
+        <DataView :value="products">
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataView :value="products">
+    <template #list="slotProps">
+        <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" />
+                        <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">
+                            <div>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                            </div>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <i class="pi pi-star-fill text-yellow-500"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col md:items-end gap-8">
+                            <span class="text-xl font-semibold">\${{ item.price }}</span>
+                            <div class="flex flex-row-reverse md:flex-row gap-2">
+                                <Button icon="pi pi-heart" outlined></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</DataView>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataView :value="products">
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataView :value="products">
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 5)));
+});
+
+const products = ref();
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dataview/ImportDoc.vue b/apps/labs/doc/dataview/ImportDoc.vue
new file mode 100644
index 000000000..ac8c94c70
--- /dev/null
+++ b/apps/labs/doc/dataview/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import DataView from 'primevue/dataview';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dataview/LayoutDoc.vue b/apps/labs/doc/dataview/LayoutDoc.vue
new file mode 100644
index 000000000..4eac835b5
--- /dev/null
+++ b/apps/labs/doc/dataview/LayoutDoc.vue
@@ -0,0 +1,478 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The <i>grid</i> mode is not built-in for flexibility purposes and requires a library with CSS grid features like Tailwind.</p>
+    </DocSectionText>
+    <div class="card">
+        <DataView :value="products" :layout="layout">
+            <template #header>
+                <div class="flex justify-end">
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                        </template>
+                    </SelectButton>
+                </div>
+            </template>
+
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid="slotProps">
+                <div class="grid grid-cols-12 gap-4">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                            <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" />
+                                    <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">
+                                <div class="flex flex-row justify-between items-start gap-2">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col gap-6 mt-6">
+                                    <span class="text-2xl font-semibold">${{ item.price }}</span>
+                                    <div class="flex gap-2">
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid',
+            options: ['list', 'grid'],
+            code: {
+                basic: `
+<DataView :value="products" :layout="layout">
+    <template #header>
+        <div class="flex justify-end">
+            <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                <template #option="{ option }">
+                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                </template>
+            </SelectButton>
+        </div>
+    </template>
+
+    <template #list="slotProps">
+        <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" />
+                        <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">
+                            <div>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                            </div>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <i class="pi pi-star-fill text-yellow-500"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col md:items-end gap-8">
+                            <span class="text-xl font-semibold">\${{ item.price }}</span>
+                            <div class="flex flex-row-reverse md:flex-row gap-2">
+                                <Button icon="pi pi-heart" outlined></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <template #grid="slotProps">
+        <div class="grid grid-cols-12 gap-4">
+            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                    <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"/>
+                            <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">
+                        <div class="flex flex-row justify-between items-start gap-2">
+                            <div>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                <div class="text-lg font-medium mt-1">{{ item.name }}</div>
+                            </div>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <i class="pi pi-star-fill text-yellow-500"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col gap-6 mt-6">
+                            <span class="text-2xl font-semibold">\${{ item.price }}</span>
+                            <div class="flex gap-2">
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
+                                <Button icon="pi pi-heart" outlined></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</DataView>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataView :value="products" :layout="layout">
+            <template #header>
+                <div class="flex justify-end">
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                        </template>
+                    </SelectButton>
+                </div>
+            </template>
+
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid="slotProps">
+                <div class="grid grid-cols-12 gap-4">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                            <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"/>
+                                    <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">
+                                <div class="flex flex-row justify-between items-start gap-2">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col gap-6 mt-6">
+                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex gap-2">
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid',
+            options: ['list', 'grid'],
+        }
+    },
+    mounted() {
+        ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataView :value="products" :layout="layout">
+            <template #header>
+                <div class="flex justify-end">
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                        </template>
+                    </SelectButton>
+                </div>
+            </template>
+
+            <template #list="slotProps">
+                <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" />
+                                 <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid="slotProps">
+                <div class="grid grid-cols-12 gap-4">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                            <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"/>
+                                    <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">
+                                <div class="flex flex-row justify-between items-start gap-2">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col gap-6 mt-6">
+                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex gap-2">
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProducts().then((data) => (products.value = data.slice(0, 12)));
+});
+
+const products = ref();
+const layout = ref('grid');
+const options = ref(['list', 'grid']);
+
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+}
+
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dataview/LoadingDoc.vue b/apps/labs/doc/dataview/LoadingDoc.vue
new file mode 100644
index 000000000..d48a6bbe3
--- /dev/null
+++ b/apps/labs/doc/dataview/LoadingDoc.vue
@@ -0,0 +1,370 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>While data is being loaded. <PrimeVueNuxtLink to="/skeleton">Skeleton</PrimeVueNuxtLink> component may be used to indicate the busy state.</p>
+    </DocSectionText>
+    <div class="card">
+        <DataView :value="products" :layout="layout">
+            <template #header>
+                <div class="flex justify-end">
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                        </template>
+                    </SelectButton>
+                </div>
+            </template>
+
+            <template #list>
+                <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-t border-surface-200 dark:border-surface-700': i !== 0 }">
+                            <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
+                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
+                                <div class="flex flex-col items-center sm:items-start gap-4">
+                                    <Skeleton width="8rem" height="2rem" />
+                                    <Skeleton width="6rem" height="1rem" />
+
+                                    <div class="flex items-center gap-4">
+                                        <Skeleton width="6rem" height="1rem" />
+                                        <Skeleton width="3rem" height="1rem" />
+                                    </div>
+                                </div>
+                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+                                    <Skeleton width="4rem" height="2rem" />
+                                    <Skeleton size="3rem" shape="circle" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid>
+                <div class="grid grid-cols-12 gap-4">
+                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 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">
+                                <Skeleton width="6rem" height="2rem" />
+                                <Skeleton width="3rem" height="1rem" />
+                            </div>
+                            <div class="flex flex-col items-center gap-4 py-8">
+                                <Skeleton width="75%" height="10rem" />
+                                <Skeleton width="8rem" height="2rem" />
+                                <Skeleton width="6rem" height="1rem" />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <Skeleton width="4rem" height="2rem" />
+                                <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid',
+            options: ['list', 'grid'],
+            code: {
+                basic: `
+<DataView :value="products" :layout="layout">
+    <template #header>
+        <div class="flex justify-end">
+            <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                <template #option="{ option }">
+                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                </template>
+            </SelectButton>
+        </div>
+    </template>
+
+    <template #list>
+        <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-t border-surface-200 dark:border-surface-700': i !== 0 }">
+                    <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
+                    <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
+                        <div class="flex flex-col items-center sm:items-start gap-4">
+                            <Skeleton width="8rem" height="2rem" />
+                            <Skeleton width="6rem" height="1rem" />
+
+                            <div class="flex items-center gap-4">
+                                <Skeleton width="6rem" height="1rem" />
+                                <Skeleton width="3rem" height="1rem" />
+                            </div>
+                        </div>
+                        <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+                            <Skeleton width="4rem" height="2rem" />
+                            <Skeleton size="3rem" shape="circle" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <template #grid>
+        <div class="grid grid-cols-12 gap-4">
+            <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 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">
+                        <Skeleton width="6rem" height="2rem" />
+                        <Skeleton width="3rem" height="1rem" />
+                    </div>
+                    <div class="flex flex-col items-center gap-4 py-8">
+                        <Skeleton width="75%" height="10rem" />
+                        <Skeleton width="8rem" height="2rem" />
+                        <Skeleton width="6rem" height="1rem" />
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <Skeleton width="4rem" height="2rem" />
+                        <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</DataView>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataView :value="products" :layout="layout">
+            <template #header>
+                <div class="flex justify-end">
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                        </template>
+                    </SelectButton>
+                </div>
+            </template>
+
+            <template #list>
+                <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-t border-surface-200 dark:border-surface-700': i !== 0 }">
+                            <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
+                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
+                                <div class="flex flex-col items-center sm:items-start gap-4">
+                                    <Skeleton width="8rem" height="2rem" />
+                                    <Skeleton width="6rem" height="1rem" />
+
+                                    <div class="flex items-center gap-4">
+                                        <Skeleton width="6rem" height="1rem" />
+                                        <Skeleton width="3rem" height="1rem" />
+                                    </div>
+                                </div>
+                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+                                    <Skeleton width="4rem" height="2rem" />
+                                    <Skeleton size="3rem" shape="circle" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid>
+                <div class="grid grid-cols-12 gap-4">
+                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 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">
+                                <Skeleton width="6rem" height="2rem" />
+                                <Skeleton width="3rem" height="1rem" />
+                            </div>
+                            <div class="flex flex-col items-center gap-4 py-8">
+                                <Skeleton width="75%" height="10rem" />
+                                <Skeleton width="8rem" height="2rem" />
+                                <Skeleton width="6rem" height="1rem" />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <Skeleton width="4rem" height="2rem" />
+                                <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid',
+            options: ['list', 'grid'],
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 6)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataView :value="products" :layout="layout">
+            <template #header>
+                <div class="flex justify-end">
+                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                        <template #option="{ option }">
+                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                        </template>
+                    </SelectButton>
+                </div>
+            </template>
+
+            <template #list>
+                <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-t border-surface-200 dark:border-surface-700': i !== 0 }">
+                            <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
+                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
+                                <div class="flex flex-col items-center sm:items-start gap-4">
+                                    <Skeleton width="8rem" height="2rem" />
+                                    <Skeleton width="6rem" height="1rem" />
+
+                                    <div class="flex items-center gap-4">
+                                        <Skeleton width="6rem" height="1rem" />
+                                        <Skeleton width="3rem" height="1rem" />
+                                    </div>
+                                </div>
+                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+                                    <Skeleton width="4rem" height="2rem" />
+                                    <Skeleton size="3rem" shape="circle" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid>
+                <div class="grid grid-cols-12 gap-4">
+                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 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">
+                                <Skeleton width="6rem" height="2rem" />
+                                <Skeleton width="3rem" height="1rem" />
+                            </div>
+                            <div class="flex flex-col items-center gap-4 py-8">
+                                <Skeleton width="75%" height="10rem" />
+                                <Skeleton width="8rem" height="2rem" />
+                                <Skeleton width="6rem" height="1rem" />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <Skeleton width="4rem" height="2rem" />
+                                <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 6)));
+});
+
+const products = ref();
+const layout = ref('grid');
+const options = ref(['list', 'grid']);
+
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+}
+
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 6)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dataview/PaginationDoc.vue b/apps/labs/doc/dataview/PaginationDoc.vue
new file mode 100644
index 000000000..99a78c53e
--- /dev/null
+++ b/apps/labs/doc/dataview/PaginationDoc.vue
@@ -0,0 +1,278 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Pagination is enabled with the <i>paginator</i> and <i>rows</i> properties. Refer to the <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> for more information about customizing the paginator.</p>
+    </DocSectionText>
+    <div class="card">
+        <DataView :value="products" paginator :rows="5">
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataView :value="products" paginator :rows="5">
+    <template #list="slotProps">
+        <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" />
+                        <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">
+                            <div>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                            </div>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <i class="pi pi-star-fill text-yellow-500"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col md:items-end gap-8">
+                            <span class="text-xl font-semibold">\${{ item.price }}</span>
+                            <div class="flex flex-row-reverse md:flex-row gap-2">
+                                <Button icon="pi pi-heart" outlined></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</DataView>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataView :value="products" paginator :rows="5">
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataView :value="products" paginator :rows="5">
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+
+const products = ref();
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dataview/SortingDoc.vue b/apps/labs/doc/dataview/SortingDoc.vue
new file mode 100644
index 000000000..92ad24a4d
--- /dev/null
+++ b/apps/labs/doc/dataview/SortingDoc.vue
@@ -0,0 +1,354 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Built-in sorting is controlled by bindings <i>sortField</i> and <i>sortField</i> properties from a custom UI.</p>
+    </DocSectionText>
+    <div class="card">
+        <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
+            <template #header>
+                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+            </template>
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            sortKey: null,
+            sortOrder: null,
+            sortField: null,
+            sortOptions: [
+                { label: 'Price High to Low', value: '!price' },
+                { label: 'Price Low to High', value: 'price' }
+            ],
+            code: {
+                basic: `
+<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
+    <template #header>
+        <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+    </template>
+    <template #list="slotProps">
+        <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" />
+                        <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">
+                            <div>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                            </div>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <i class="pi pi-star-fill text-yellow-500"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col md:items-end gap-8">
+                            <span class="text-xl font-semibold">\${{ item.price }}</span>
+                            <div class="flex flex-row-reverse md:flex-row gap-2">
+                                <Button icon="pi pi-heart" outlined></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</DataView>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
+            <template #header>
+                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+            </template>
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            sortKey: null,
+            sortOrder: null,
+            sortField: null,
+            sortOptions: [
+                { label: 'Price High to Low', value: '!price' },
+                { label: 'Price Low to High', value: 'price' }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        },
+        onSortChange(event) {
+            const value = event.value.value;
+            const sortValue = event.value;
+
+            if (value.indexOf('!') === 0) {
+                this.sortOrder = -1;
+                this.sortField = value.substring(1, value.length);
+                this.sortKey = sortValue;
+            } else {
+                this.sortOrder = 1;
+                this.sortField = value;
+                this.sortKey = sortValue;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
+            <template #header>
+                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+            </template>
+            <template #list="slotProps">
+                <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" />
+                                <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">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 5)));
+});
+
+const products = ref();
+const sortKey = ref();
+const sortOrder = ref();
+const sortField = ref();
+const sortOptions = ref([
+    {label: 'Price High to Low', value: '!price'},
+    {label: 'Price Low to High', value: 'price'},
+]);
+const onSortChange = (event) => {
+    const value = event.value.value;
+    const sortValue = event.value;
+
+    if (value.indexOf('!') === 0) {
+        sortOrder.value = -1;
+        sortField.value = value.substring(1, value.length);
+        sortKey.value = sortValue;
+    }
+    else {
+        sortOrder.value = 1;
+        sortField.value = value;
+        sortKey.value = sortValue;
+    }
+};
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        },
+        onSortChange(event) {
+            const value = event.value.value;
+            const sortValue = event.value;
+
+            if (value.indexOf('!') === 0) {
+                this.sortOrder = -1;
+                this.sortField = value.substring(1, value.length);
+                this.sortKey = sortValue;
+            } else {
+                this.sortOrder = 1;
+                this.sortField = value;
+                this.sortKey = sortValue;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/AccessibilityDoc.vue b/apps/labs/doc/datepicker/AccessibilityDoc.vue
new file mode 100644
index 000000000..41a73e8a5
--- /dev/null
+++ b/apps/labs/doc/datepicker/AccessibilityDoc.vue
@@ -0,0 +1,211 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
+            <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.
+        </p>
+        <p>
+            The optional datepicker button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
+            <i>chooseDate</i> key of the aria property from the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. This label is also used for the <i>aria-label</i> of the popup as well.
+            When there is a value selected, it is formatted and appended to the label to be able to notify users about the current value.
+        </p>
+
+        <p>
+            Popup has a <i>dialog</i> role along with <i>aria-modal</i> and <i>aria-label</i>. The navigation buttons at the header has an <i>aria-label</i> retrieved from the <i>prevYear</i>, <i>nextYear</i>, <i>prevMonth</i>, <i>nextMonth</i>,
+            <i>prevDecade</i> and <i>nextDecade</i> keys of the locale aria API. Similarly month picker button uses the <i>chooseMonth</i> and year picker button uses the <i>chooseYear</i> keys.
+        </p>
+
+        <p>
+            Main date table uses <i>grid</i> role that contains th elements with <i>col</i> as the scope along with <i>abbr</i> tag resolving to the full name of the month. Each date cell has an <i>aria-label</i> referring to the full date value.
+            Buttons at the footer utilize their readable labels as <i>aria-label</i> as well. Selected date also receives the <i>aria-selected</i> attribute.
+        </p>
+
+        <p>
+            Timepicker spinner buttons get their labels for <i>aria-label</i> from the aria locale API using the <i>prevHour</i>, <i>nextHour</i>, <i>prevMinute</i>, <i>nextMinute</i>, <i>prevSecond</i>, <i>nextSecond</i>, <i>am</i> and
+            <i>pm</i> keys.
+        </p>
+
+        <p>DatePicker also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Choose Date Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Popup Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the next focusable element within the popup.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Header Buttons Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Triggers the button action.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Triggers the button action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Date Grid Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the date, closes the popup and moves focus to the input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Closes the popup and moves focus to the input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the same day of the previous week.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Closes the popup and moves focus to the input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the same day of the next week.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next day.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous day.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves focus to the first day of the current week.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves focus to the last day of the current week.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page up</i></td>
+                        <td>Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>page up</i></td>
+                        <td>Changes the date to previous year in date picker mode. Has no effect in month or year picker.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page down</i></td>
+                        <td>Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>page down</i></td>
+                        <td>Changes the date to next year in date picker mode. Has no effect in month or year picker.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Footer Buttons Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Triggers the button action.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Triggers the button action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="date1">Date</label>
+<DatePicker inputId="date1" />
+
+<span id="date2">Date</span>
+<DatePicker aria-labelledby="date2" />
+
+<DatePicker aria-label="Date" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/BasicDoc.vue b/apps/labs/doc/datepicker/BasicDoc.vue
new file mode 100644
index 000000000..11b63e4b0
--- /dev/null
+++ b/apps/labs/doc/datepicker/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DatePicker is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/ButtonBarDoc.vue b/apps/labs/doc/datepicker/ButtonBarDoc.vue
new file mode 100644
index 000000000..1f4b7e43b
--- /dev/null
+++ b/apps/labs/doc/datepicker/ButtonBarDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>showButtonBar</i> is present, today and clear buttons are displayed at the footer.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" showButtonBar />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" showButtonBar />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" showButtonBar />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" showButtonBar />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/DateTemplateDoc.vue b/apps/labs/doc/datepicker/DateTemplateDoc.vue
new file mode 100644
index 000000000..4deeaa4c1
--- /dev/null
+++ b/apps/labs/doc/datepicker/DateTemplateDoc.vue
@@ -0,0 +1,74 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content can be placed inside date cells with the <i>date</i> slot that takes a Date as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date">
+            <template #date="slotProps">
+                <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
+                <template v-else>{{ slotProps.date.day }}</template>
+            </template>
+        </DatePicker>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date">
+    <template #date="slotProps">
+        <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
+        <template v-else>{{ slotProps.date.day }}</template>
+    </template>
+</DatePicker>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date">
+            <template #date="slotProps">
+                <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
+                <template v-else>{{ slotProps.date.day }}</template>
+            </template>
+        </DatePicker>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date">
+            <template #date="slotProps">
+                <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
+                <template v-else>{{ slotProps.date.day }}</template>
+            </template>
+        </DatePicker>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/DisabledDoc.vue b/apps/labs/doc/datepicker/DisabledDoc.vue
new file mode 100644
index 000000000..f129cd1f3
--- /dev/null
+++ b/apps/labs/doc/datepicker/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/FilledDoc.vue b/apps/labs/doc/datepicker/FilledDoc.vue
new file mode 100644
index 000000000..10a709a50
--- /dev/null
+++ b/apps/labs/doc/datepicker/FilledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/FloatLabelDoc.vue b/apps/labs/doc/datepicker/FloatLabelDoc.vue
new file mode 100644
index 000000000..ba40e0b1f
--- /dev/null
+++ b/apps/labs/doc/datepicker/FloatLabelDoc.vue
@@ -0,0 +1,112 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<FloatLabel>
+    <DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/FormatDoc.vue b/apps/labs/doc/datepicker/FormatDoc.vue
new file mode 100644
index 000000000..612091612
--- /dev/null
+++ b/apps/labs/doc/datepicker/FormatDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Default date format is <i>mm/dd/yy</i> which can be customized using the <i>dateFormat</i> property. Following options can be a part of the format.</p>
+        <ul class="mb-6 leading-loose">
+            <li><i>d</i> - day of month (no leading zero)</li>
+            <li><i>dd</i> - day of month (two digit)</li>
+            <li><i>o</i> - day of the year (no leading zeros)</li>
+            <li><i>oo</i> - day of the year (three digit)</li>
+            <li><i>D</i> - day name short</li>
+            <li><i>DD</i> - day name long</li>
+            <li><i>m</i> - month of year (no leading zero)</li>
+            <li><i>mm</i> - month of year (two digit)</li>
+            <li><i>M</i> - month name short</li>
+            <li><i>MM</i> - month name long</li>
+            <li><i>y</i> - year (two digit)</li>
+            <li><i>yy</i> - year (four digit)</li>
+            <li><i>@</i> - Unix timestamp (ms since 01/01/1970)</li>
+            <li><i>!</i> - Windows ticks (100ns since 01/01/0001)</li>
+            <li><i>'...'</i> - literal text</li>
+            <li><i>''</i> - single quote</li>
+            <li><i>anything else</i> - literal text</li>
+        </ul>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" dateFormat="dd/mm/yy" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/FormsDoc.vue b/apps/labs/doc/datepicker/FormsDoc.vue
new file mode 100644
index 000000000..d5154563d
--- /dev/null
+++ b/apps/labs/doc/datepicker/FormsDoc.vue
@@ -0,0 +1,148 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DatePicker integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <DatePicker name="date" fluid />
+                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                date: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    date: z.preprocess((val) => {
+                        if (val === '' || val === null) {
+                            return null;
+                        }
+
+                        return new Date(val);
+                    }, z.union([z.date(), z.null().refine((val) => val !== null, { message: 'Date is required.' })]))
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-1">
+        <DatePicker name="date" fluid />
+        <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <DatePicker name="date" fluid />
+                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                date: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    date: z.preprocess((val) => {
+                        if (val === '' || val === null) {
+                            return null;
+                        }
+
+                        return new Date(val);
+                    }, z.union([z.date(), z.null().refine((val) => val !== null, { message: 'Date is required.' })]))
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <DatePicker name="date" fluid />
+                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    date: ''
+});
+const resolver = ref(zodResolver(
+    z.object({
+        date: z.preprocess((val) => {
+            if (val === '' || val === null) {
+                return null;
+            }
+
+            return new Date(val);
+        }, z.union([z.date(), z.null().refine((val) => val !== null, { message: 'Date is required.' })]))
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/IconDoc.vue b/apps/labs/doc/datepicker/IconDoc.vue
new file mode 100644
index 000000000..fc5a33210
--- /dev/null
+++ b/apps/labs/doc/datepicker/IconDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An additional icon is displayed next to the input field when <i>showIcon</i> is present.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
+            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
+            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
+            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
+                <template #inputicon="slotProps">
+                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
+                </template>
+            </DatePicker>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            buttondisplay: null,
+            icondisplay: null,
+            templatedisplay: null,
+            code: {
+                basic: `
+<DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" />
+<DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" />
+<DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly>
+    <template #inputicon="slotProps">
+        <i class="pi pi-clock" @click="slotProps.clickCallback" />
+    </template>
+</DatePicker>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
+            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
+            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
+            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
+                <template #inputicon="slotProps">
+                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
+                </template>
+            </DatePicker>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            buttondisplay: null,
+            icondisplay: null,
+            templatedisplay: null,
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
+            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
+            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
+            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
+                <template #inputicon="slotProps">
+                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
+                </template>
+            </DatePicker>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const buttondisplay = ref();
+const icondisplay = ref();
+const templatedisplay = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/IftaLabelDoc.vue b/apps/labs/doc/datepicker/IftaLabelDoc.vue
new file mode 100644
index 000000000..3a181b83a
--- /dev/null
+++ b/apps/labs/doc/datepicker/IftaLabelDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
+            <label for="date">Date</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
+    <label for="date">Date</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
+            <label for="date">Date</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
+            <label for="date">Date</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/ImportDoc.vue b/apps/labs/doc/datepicker/ImportDoc.vue
new file mode 100644
index 000000000..57eccf5e9
--- /dev/null
+++ b/apps/labs/doc/datepicker/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import DatePicker from 'primevue/datepicker';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/InlineDoc.vue b/apps/labs/doc/datepicker/InlineDoc.vue
new file mode 100644
index 000000000..d6f1789dd
--- /dev/null
+++ b/apps/labs/doc/datepicker/InlineDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DatePicker is displayed as a popup by default, add <i>inline</i> property to customize this behavior.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/InvalidDoc.vue b/apps/labs/doc/datepicker/InvalidDoc.vue
new file mode 100644
index 000000000..cad85a50e
--- /dev/null
+++ b/apps/labs/doc/datepicker/InvalidDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date1: null,
+            date2: null,
+            code: {
+                basic: `
+<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+<DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date1: null,
+            date2: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date1 = ref(null);
+const date2 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/LocaleDoc.vue b/apps/labs/doc/datepicker/LocaleDoc.vue
new file mode 100644
index 000000000..1bf69abe9
--- /dev/null
+++ b/apps/labs/doc/datepicker/LocaleDoc.vue
@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Locale for different languages and formats is defined globally, refer to the <NuxtLink to="/configuration/#locale">PrimeVue Locale</NuxtLink> configuration for more information.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/datepicker/MinMaxDoc.vue b/apps/labs/doc/datepicker/MinMaxDoc.vue
new file mode 100644
index 000000000..4f020dd98
--- /dev/null
+++ b/apps/labs/doc/datepicker/MinMaxDoc.vue
@@ -0,0 +1,105 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Boundaries for the permitted dates that can be entered are defined with <i>minDate</i> and <i>maxDate</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            minDate: null,
+            maxDate: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            minDate: null,
+            maxDate: null
+        };
+    },
+    created() {
+        let today = new Date();
+        let month = today.getMonth();
+        let year = today.getFullYear();
+        let prevMonth = month === 0 ? 11 : month - 1;
+        let prevYear = prevMonth === 11 ? year - 1 : year;
+        let nextMonth = month === 11 ? 0 : month + 1;
+        let nextYear = nextMonth === 0 ? year + 1 : year;
+
+        this.minDate = new Date();
+        this.minDate.setMonth(prevMonth);
+        this.minDate.setFullYear(prevYear);
+        this.maxDate = new Date();
+        this.maxDate.setMonth(nextMonth);
+        this.maxDate.setFullYear(nextYear);
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+let today = new Date();
+let month = today.getMonth();
+let year = today.getFullYear();
+let prevMonth = (month === 0) ? 11 : month -1;
+let prevYear = (prevMonth === 11) ? year - 1 : year;
+let nextMonth = (month === 11) ? 0 : month + 1;
+let nextYear = (nextMonth === 0) ? year + 1 : year;
+
+const date = ref();
+const minDate = ref(new Date());
+const maxDate = ref(new Date());
+
+minDate.value.setMonth(prevMonth);
+minDate.value.setFullYear(prevYear);
+maxDate.value.setMonth(nextMonth);
+maxDate.value.setFullYear(nextYear);
+<\/script>
+`
+            }
+        };
+    },
+    created() {
+        let today = new Date();
+        let month = today.getMonth();
+        let year = today.getFullYear();
+        let prevMonth = month === 0 ? 11 : month - 1;
+        let prevYear = prevMonth === 11 ? year - 1 : year;
+        let nextMonth = month === 11 ? 0 : month + 1;
+        let nextYear = nextMonth === 0 ? year + 1 : year;
+
+        this.minDate = new Date();
+        this.minDate.setMonth(prevMonth);
+        this.minDate.setFullYear(prevYear);
+        this.maxDate = new Date();
+        this.maxDate.setMonth(nextMonth);
+        this.maxDate.setFullYear(nextYear);
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/MonthPickerDoc.vue b/apps/labs/doc/datepicker/MonthPickerDoc.vue
new file mode 100644
index 000000000..1b54e987e
--- /dev/null
+++ b/apps/labs/doc/datepicker/MonthPickerDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Month only picker is enabled by specifying <i>view</i> as <i>month</i> in addition to a suitable <i>dateFormat</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" view="month" dateFormat="mm/yy" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/MultipleDoc.vue b/apps/labs/doc/datepicker/MultipleDoc.vue
new file mode 100644
index 000000000..d301922ba
--- /dev/null
+++ b/apps/labs/doc/datepicker/MultipleDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>In order to choose multiple dates, set <i>selectionMode</i> as <i>multiple</i>. In this mode, the value binding should be an array.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dates: null,
+            code: {
+                basic: `
+<DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dates: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const dates = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/MultipleMonthsDoc.vue b/apps/labs/doc/datepicker/MultipleMonthsDoc.vue
new file mode 100644
index 000000000..8bd503e19
--- /dev/null
+++ b/apps/labs/doc/datepicker/MultipleMonthsDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Number of months to display is configured with the <i>numberOfMonths</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" :numberOfMonths="2" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" :numberOfMonths="2" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" :numberOfMonths="2" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" :numberOfMonths="2" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/RangeDoc.vue b/apps/labs/doc/datepicker/RangeDoc.vue
new file mode 100644
index 000000000..e6521b126
--- /dev/null
+++ b/apps/labs/doc/datepicker/RangeDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A range of dates can be selected by defining <i>selectionMode</i> as <i>range</i>, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dates: null,
+            code: {
+                basic: `
+<DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dates: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const dates = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/SizesDoc.vue b/apps/labs/doc/datepicker/SizesDoc.vue
new file mode 100644
index 000000000..4dc26716c
--- /dev/null
+++ b/apps/labs/doc/datepicker/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DatePicker provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+<DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/TimeDoc.vue b/apps/labs/doc/datepicker/TimeDoc.vue
new file mode 100644
index 000000000..8094888c8
--- /dev/null
+++ b/apps/labs/doc/datepicker/TimeDoc.vue
@@ -0,0 +1,95 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            datetime12h: null,
+            datetime24h: null,
+            time: null,
+            code: {
+                basic: `
+<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
+<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
+<DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            datetime12h: null,
+            datetime24h: null,
+            time: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const datetime12h = ref();
+const datetime24h = ref();
+const time = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/datepicker/YearPickerDoc.vue b/apps/labs/doc/datepicker/YearPickerDoc.vue
new file mode 100644
index 000000000..8d14e5427
--- /dev/null
+++ b/apps/labs/doc/datepicker/YearPickerDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specifying <i>view</i> as <i>year</i> in addition to a suitable <i>dateFormat</i> enables the year picker.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" view="year" dateFormat="yy" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<DatePicker v-model="date" view="year" dateFormat="yy" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" view="year" dateFormat="yy" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <DatePicker v-model="date" view="year" dateFormat="yy" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/deferredcontent/AccessibilityDoc.vue b/apps/labs/doc/deferredcontent/AccessibilityDoc.vue
new file mode 100644
index 000000000..79ccb4967
--- /dev/null
+++ b/apps/labs/doc/deferredcontent/AccessibilityDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
+            have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
+        </p>
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+    Content
+</DeferredContent>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/deferredcontent/BasicDoc.vue b/apps/labs/doc/deferredcontent/BasicDoc.vue
new file mode 100644
index 000000000..d2c8d6a01
--- /dev/null
+++ b/apps/labs/doc/deferredcontent/BasicDoc.vue
@@ -0,0 +1,76 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DeferredContent is used by wrapping the target.</p>
+    </DocSectionText>
+    <div class="card">
+        <div style="height: 1000px">Scroll down to lazy load an image.</div>
+
+        <DeferredContent @load="onImageLoad">
+            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
+        </DeferredContent>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<DeferredContent @load="onImageLoad">
+    <img src="/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
+</DeferredContent>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast />
+        <div style="height: 1000px">Scroll down to lazy load an image.</div>
+
+        <DeferredContent @load="onImageLoad">
+            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
+        </DeferredContent>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        onImageLoad() {
+            this.$toast.add({ severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable', life: 2000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <div style="height: 1000px">Scroll down to lazy load an image.</div>
+
+        <DeferredContent @load="onImageLoad">
+            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
+        </DeferredContent>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const onImageLoad = () => {
+    toast.add({ severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable', life: 2000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onImageLoad() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Image loaded', life: 2000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/deferredcontent/DataTableDoc.vue b/apps/labs/doc/deferredcontent/DataTableDoc.vue
new file mode 100644
index 000000000..878b0bfc2
--- /dev/null
+++ b/apps/labs/doc/deferredcontent/DataTableDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A practical example that triggers a fetch when the table becomes visible in viewport.</p>
+    </DocSectionText>
+    <div class="card">
+        <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
+
+        <DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+            <DataTable :value="products">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </DeferredContent>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { ProductService } from '/service/ProductService';
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+    <DataTable :value="products">
+        <Column field="code" header="Code"></Column>
+        <Column field="name" header="Name"></Column>
+        <Column field="category" header="Category"></Column>
+        <Column field="quantity" header="Quantity"></Column>
+    </DataTable>
+</DeferredContent>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast />
+        <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
+        
+        <DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+            <DataTable :value="products">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </DeferredContent>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    methods: {
+        onDataLoad() {
+            ProductService.getProductsSmall().then((data) => (this.products = data));
+            this.$toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
+
+        <DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+            <DataTable :value="products">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </DeferredContent>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+const products = ref(null);
+
+const onDataLoad = () => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+    toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
+};
+<\/script>
+`
+            },
+            products: null
+        };
+    },
+    methods: {
+        onDataLoad() {
+            ProductService.getProductsSmall().then((data) => (this.products = data));
+            this.$toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/deferredcontent/ImportDoc.vue b/apps/labs/doc/deferredcontent/ImportDoc.vue
new file mode 100644
index 000000000..b80368549
--- /dev/null
+++ b/apps/labs/doc/deferredcontent/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import DeferredContent from 'primevue/deferredcontent';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/AccessibilityDoc.vue b/apps/labs/doc/dialog/AccessibilityDoc.vue
new file mode 100644
index 000000000..6e11cf256
--- /dev/null
+++ b/apps/labs/doc/dialog/AccessibilityDoc.vue
@@ -0,0 +1,90 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In
+            addition <i>aria-modal</i> is added since focus is kept within the popup.
+        </p>
+        <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
+        <p>
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, you
+            may use <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Overlay Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the dialog if <i>closeOnEscape</i> is true.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Close Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" />
+
+<Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }">
+    <p>Content</p>
+</Dialog>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/BasicDoc.vue b/apps/labs/doc/dialog/BasicDoc.vue
new file mode 100644
index 000000000..02ecc10c7
--- /dev/null
+++ b/apps/labs/doc/dialog/BasicDoc.vue
@@ -0,0 +1,116 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Dialog is used as a container and visibility is controlled with a binding to <i>visible</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" @click="visible = true" />
+
+<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
+        <InputText id="username" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex items-center gap-4 mb-8">
+        <label for="email" class="font-semibold w-24">Email</label>
+        <InputText id="email" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex justify-end gap-2">
+        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+        <Button type="button" label="Save" @click="visible = false"></Button>
+    </div>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/HeadlessDoc.vue b/apps/labs/doc/dialog/HeadlessDoc.vue
new file mode 100644
index 000000000..ca04bca67
--- /dev/null
+++ b/apps/labs/doc/dialog/HeadlessDoc.vue
@@ -0,0 +1,170 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Login" icon="pi pi-user" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-primary-700)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="var(--p-primary-200)"
+                        />
+                    </svg>
+                    <div class="inline-flex flex-col gap-2">
+                        <label for="username" class="text-primary-50 font-semibold">Username</label>
+                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
+                    </div>
+                    <div class="inline-flex flex-col gap-2">
+                        <label for="password" class="text-primary-50 font-semibold">Password</label>
+                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                    </div>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Login" icon="pi pi-user" @click="visible = true" />
+
+<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
+    <template #container="{ closeCallback }">
+        <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-700)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-primary-200)"
+                />
+            </svg>
+            <div class="inline-flex flex-col gap-2">
+                <label for="username" class="text-primary-50 font-semibold">Username</label>
+                <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
+            </div>
+            <div class="inline-flex flex-col gap-2">
+                <label for="password" class="text-primary-50 font-semibold">Password</label>
+                <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
+            </div>
+            <div class="flex items-center gap-4">
+                <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+            </div>
+        </div>
+    </template>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Login" icon="pi pi-user" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-primary-700)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="var(--p-primary-200)"
+                        />
+                    </svg>
+                    <div class="inline-flex flex-col gap-2">
+                        <label for="username" class="text-primary-50 font-semibold">Username</label>
+                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
+                    </div>
+                    <div class="inline-flex flex-col gap-2">
+                        <label for="password" class="text-primary-50 font-semibold">Password</label>
+                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                    </div>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Login" icon="pi pi-user" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-primary-700)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="var(--p-primary-200)"
+                        />
+                    </svg>
+                    <div class="inline-flex flex-col gap-2">
+                        <label for="username" class="text-primary-50 font-semibold">Username</label>
+                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
+                    </div>
+                    <div class="inline-flex flex-col gap-2">
+                        <label for="password" class="text-primary-50 font-semibold">Password</label>
+                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                    </div>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/ImportDoc.vue b/apps/labs/doc/dialog/ImportDoc.vue
new file mode 100644
index 000000000..9ba13f80c
--- /dev/null
+++ b/apps/labs/doc/dialog/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Dialog from 'primevue/dialog';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/LongContentDoc.vue b/apps/labs/doc/dialog/LongContentDoc.vue
new file mode 100644
index 000000000..34f4ec170
--- /dev/null
+++ b/apps/labs/doc/dialog/LongContentDoc.vue
@@ -0,0 +1,193 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When content exceeds viewport, Dialog automatically becomes scrollable.</p>
+    </DocSectionText>
+
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="mb-8">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p class="mb-8">
+                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+                consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+            <p class="mb-8">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
+                facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
+                earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+            </p>
+            <p class="mb-8">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p class="mb-8">
+                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+                consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
+                facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
+                earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+            </p>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" @click="visible = true" />
+
+<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+    <p class="mb-8">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p class="mb-8">
+        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+    </p>
+    <p class="mb-8">
+        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    </p>
+    <p class="mb-8">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p class="mb-8">
+        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+    </p>
+    <p>
+        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    </p>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="mb-8">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p class="mb-8">
+                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+            <p class="mb-8">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+            </p>
+            <p class="mb-8">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p class="mb-8">
+                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="mb-8">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p class="mb-8">
+                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+            <p class="mb-8">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+            </p>
+            <p class="mb-8">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p class="mb-8">
+                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/MaximizableDoc.vue b/apps/labs/doc/dialog/MaximizableDoc.vue
new file mode 100644
index 000000000..d92f7724f
--- /dev/null
+++ b/apps/labs/doc/dialog/MaximizableDoc.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Adding <i>maximizable</i> property enables the full screen mode.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" @click="visible = true" />
+
+<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/PositionDoc.vue b/apps/labs/doc/dialog/PositionDoc.vue
new file mode 100644
index 000000000..80e85e634
--- /dev/null
+++ b/apps/labs/doc/dialog/PositionDoc.vue
@@ -0,0 +1,190 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>position</i> property defines the location of relative to the screen.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
+            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
+        </div>
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
+            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
+            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
+        </div>
+        <div class="flex flex-wrap justify-center gap-2">
+            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
+            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
+        </div>
+
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            position: 'center',
+            visible: false,
+            code: {
+                basic: `
+<div class="flex flex-wrap justify-center gap-2 mb-2">
+    <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
+    <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
+</div>
+<div class="flex flex-wrap justify-center gap-2 mb-2">
+    <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
+    <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
+    <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
+</div>
+<div class="flex flex-wrap justify-center gap-2">
+    <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
+    <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
+    <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
+</div>
+
+<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
+        <InputText id="username" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex items-center gap-4 mb-8">
+        <label for="email" class="font-semibold w-24">Email</label>
+        <InputText id="email" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex justify-end gap-2">
+        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+        <Button type="button" label="Save" @click="visible = false"></Button>
+    </div>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
+            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
+        </div>
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
+            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
+            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
+        </div>
+        <div class="flex flex-wrap justify-center gap-2">
+            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
+            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
+        </div>
+
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            position: 'center',
+            visible: false
+        };
+    },
+    methods: {
+        openPosition(position) {
+            this.position = position;
+            this.visible = true;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
+            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
+        </div>
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
+            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
+            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
+        </div>
+        <div class="flex flex-wrap justify-center gap-2">
+            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
+            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
+        </div>
+
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const position = ref('center');
+const visible = ref(false);
+
+const openPosition = (pos) => {
+    position.value = pos;
+    visible.value = true;
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        openPosition(position) {
+            this.position = position;
+            this.visible = true;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/ResponsiveDoc.vue b/apps/labs/doc/dialog/ResponsiveDoc.vue
new file mode 100644
index 000000000..b9b0918a3
--- /dev/null
+++ b/apps/labs/doc/dialog/ResponsiveDoc.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Dialog width can be adjusted per screen size with the <i>breakpoints</i> option where the max-width for the breakpoint and the width are defined as key-value pairs. When no breakpoint matches width defined in <i>style</i> or
+            <i>class</i> is used. Alternatively responsive utility classes of libraries like Tailwind or PrimeFlex can also be used such as <i>md:w-screen</i>.
+        </p>
+    </DocSectionText>
+
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" @click="visible = true" />
+
+<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/TemplateDoc.vue b/apps/labs/doc/dialog/TemplateDoc.vue
new file mode 100644
index 000000000..4f991697e
--- /dev/null
+++ b/apps/labs/doc/dialog/TemplateDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Header and Footer sections allow customization via templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+            <template #header>
+                <div class="inline-flex items-center justify-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                </div>
+            </template>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-2">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <template #footer>
+                <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
+                <Button label="Save" outlined severity="secondary" @click="visible = false" autofocus />
+            </template>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" @click="visible = true" />
+
+<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+    <template #header>
+        <div class="inline-flex items-center justify-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+        </div>
+    </template>
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
+        <InputText id="username" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex items-center gap-4 mb-2">
+        <label for="email" class="font-semibold w-24">Email</label>
+        <InputText id="email" class="flex-auto" autocomplete="off" />
+    </div>
+    <template #footer>
+        <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
+        <Button label="Save" outlined severity="secondary" @click="visible = false" autofocus />
+    </template>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+            <template #header>
+                <div class="inline-flex items-center justify-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                </div>
+            </template>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-2">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <template #footer>
+                <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
+                <Button label="Save" outlined severity="secondary" @click="visible = false" autofocus />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+            <template #header>
+                <div class="inline-flex items-center justify-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                </div>
+            </template>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-2">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <template #footer>
+                <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
+                <Button label="Save" outlined severity="secondary" @click="visible = false" autofocus />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dialog/WithoutModalDoc.vue b/apps/labs/doc/dialog/WithoutModalDoc.vue
new file mode 100644
index 000000000..223a82c20
--- /dev/null
+++ b/apps/labs/doc/dialog/WithoutModalDoc.vue
@@ -0,0 +1,116 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Mask layer behind the Dialog is configured with the <i>modal</i> property. By default, no modal layer is added.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" @click="visible = true" />
+
+<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
+        <InputText id="username" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex items-center gap-4 mb-8">
+        <label for="email" class="font-semibold w-24">Email</label>
+        <InputText id="email" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex justify-end gap-2">
+        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+        <Button type="button" label="Save" @click="visible = false"></Button>
+    </div>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/divider/AccessibilityDoc.vue b/apps/labs/doc/divider/AccessibilityDoc.vue
new file mode 100644
index 000000000..ce89027fa
--- /dev/null
+++ b/apps/labs/doc/divider/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/divider/BasicDoc.vue b/apps/labs/doc/divider/BasicDoc.vue
new file mode 100644
index 000000000..b3cb457d7
--- /dev/null
+++ b/apps/labs/doc/divider/BasicDoc.vue
@@ -0,0 +1,139 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Divider is basically placed between the items to separate.</p>
+    </DocSectionText>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<p class="m-0">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+
+<Divider />
+
+<p class="m-0">
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>
+
+<Divider />
+
+<p class="m-0">
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+    deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+</p>
+
+<Divider />
+
+<p class="m-0">
+    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+    maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+</p>
+`,
+                options: `
+<template>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider />
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/divider/ContentDoc.vue b/apps/labs/doc/divider/ContentDoc.vue
new file mode 100644
index 000000000..adf92b6d3
--- /dev/null
+++ b/apps/labs/doc/divider/ContentDoc.vue
@@ -0,0 +1,166 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Children are rendered within the boundaries of the divider where location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are <i>left</i>, <i>center</i> and<i>right</i> whereas vertical
+            mode supports <i>top</i>, <i>center</i> and <i>bottom</i>.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider align="left" type="solid">
+            <b>Left</b>
+        </Divider>
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider align="center" type="dotted">
+            <b>Center</b>
+        </Divider>
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider align="right" type="dashed">
+            <b>Right</b>
+        </Divider>
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<p class="m-0">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+
+<Divider align="left" type="solid">
+    <b>Left</b>
+</Divider>
+
+<p class="m-0">
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>
+
+<Divider align="center" type="dotted">
+    <b>Center</b>
+</Divider>
+
+<p class="m-0">
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+    deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+</p>
+
+<Divider align="right" type="dashed">
+    <b>Right</b>
+</Divider>
+
+<p class="m-0">
+    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+    maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+</p>
+`,
+                options: `
+<template>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider align="left" type="solid">
+            <b>Left</b>
+        </Divider>
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider align="center" type="dotted">
+            <b>Center</b>
+        </Divider>
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider align="right" type="dashed">
+            <b>Right</b>
+        </Divider>
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider align="left" type="solid">
+            <b>Left</b>
+        </Divider>
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider align="center" type="dotted">
+            <b>Center</b>
+        </Divider>
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider align="right" type="dashed">
+            <b>Right</b>
+        </Divider>
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/divider/ImportDoc.vue b/apps/labs/doc/divider/ImportDoc.vue
new file mode 100644
index 000000000..ed986827d
--- /dev/null
+++ b/apps/labs/doc/divider/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Divider from 'primevue/divider';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/divider/LoginDoc.vue b/apps/labs/doc/divider/LoginDoc.vue
new file mode 100644
index 000000000..5134636a2
--- /dev/null
+++ b/apps/labs/doc/divider/LoginDoc.vue
@@ -0,0 +1,127 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sample implementation of a login form using a divider with content.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
+                <div class="flex flex-col gap-2">
+                    <label for="username">Username</label>
+                    <InputText id="username" type="text" />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="password">Password</label>
+                    <InputText id="password" type="password" />
+                </div>
+                <div class="flex">
+                    <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
+                </div>
+            </div>
+            <div class="w-full md:w-2/12">
+                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
+                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
+            </div>
+            <div class="w-full md:w-5/12 flex items-center justify-center py-5">
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<div class="flex flex-col md:flex-row">
+    <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
+        <div class="flex flex-col gap-2">
+            <label for="username">Username</label>
+            <InputText id="username" type="text" />
+        </div>
+        <div class="flex flex-col gap-2">
+            <label for="password">Password</label>
+            <InputText id="password" type="password" />
+        </div>
+        <div class="flex">
+            <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
+        </div>
+    </div>
+    <div class="w-full md:w-2/12">
+        <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
+        <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
+    </div>
+    <div class="w-full md:w-5/12 flex items-center justify-center py-5">
+        <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
+                <div class="flex flex-col gap-2">
+                    <label for="username">Username</label>
+                    <InputText id="username" type="text" />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="password">Password</label>
+                    <InputText id="password" type="password" />
+                </div>
+                <div class="flex">
+                    <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
+                </div>
+            </div>
+            <div class="w-full md:w-2/12">
+                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
+                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
+            </div>
+            <div class="w-full md:w-5/12 flex items-center justify-center py-5">
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
+                <div class="flex flex-col gap-2">
+                    <label for="username">Username</label>
+                    <InputText id="username" type="text" />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="password">Password</label>
+                    <InputText id="password" type="password" />
+                </div>
+                <div class="flex">
+                    <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
+                </div>
+            </div>
+            <div class="w-full md:w-2/12">
+                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
+                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
+            </div>
+            <div class="w-full md:w-5/12 flex items-center justify-center py-5">
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/divider/TypeDoc.vue b/apps/labs/doc/divider/TypeDoc.vue
new file mode 100644
index 000000000..8435720ea
--- /dev/null
+++ b/apps/labs/doc/divider/TypeDoc.vue
@@ -0,0 +1,139 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Style of the border is configured with the <i>type</i> property that can either be <i>solid</i>, <i>dotted</i> or <i>dashed</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider type="solid" />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider type="dotted" />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider type="dashed" />
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<p class="m-0">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+
+<Divider type="solid" />
+
+<p class="m-0">
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>
+
+<Divider type="dotted" />
+
+<p class="m-0">
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+    deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+</p>
+
+<Divider type="dashed" />
+
+<p class="m-0">
+    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+    maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+</p>
+`,
+                options: `
+<template>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider type="solid" />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider type="dotted" />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider type="dashed" />
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider type="solid" />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider type="dotted" />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider type="dashed" />
+
+        <p class="m-0">
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/divider/VerticalDoc.vue b/apps/labs/doc/divider/VerticalDoc.vue
new file mode 100644
index 000000000..895230128
--- /dev/null
+++ b/apps/labs/doc/divider/VerticalDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Vertical divider is enabled by setting the <i>layout</i> property as <i>vertical</i>.</p>
+    </DocSectionText>
+    <div class="card flex">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider layout="vertical" />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider layout="vertical" />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<p class="m-0">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+
+<Divider layout="vertical" />
+
+<p class="m-0">
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>
+
+<Divider layout="vertical" />
+
+<p class="m-0">
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+    deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+</p>
+`,
+                options: `
+<template>
+    <div class="card flex">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider layout="vertical" />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider layout="vertical" />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider layout="vertical" />
+
+        <p class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider layout="vertical" />
+
+        <p class="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dock/AccessibilityDoc.vue b/apps/labs/doc/dock/AccessibilityDoc.vue
new file mode 100644
index 000000000..98dc321d6
--- /dev/null
+++ b/apps/labs/doc/dock/AccessibilityDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with
+            <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the first menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem in horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem in horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/dock/AdvancedDoc.vue b/apps/labs/doc/dock/AdvancedDoc.vue
new file mode 100644
index 000000000..ff133f7d8
--- /dev/null
+++ b/apps/labs/doc/dock/AdvancedDoc.vue
@@ -0,0 +1,928 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A sample desktop demo using various components.</p>
+    </DocSectionText>
+    <div class="card dock-demo">
+        <Toast position="top-center" group="tc" />
+        <Menubar :model="menubarItems">
+            <template #start>
+                <i class="pi pi-apple px-2"></i>
+            </template>
+            <template #end>
+                <i class="pi pi-video px-2" />
+                <i class="pi pi-wifi px-2" />
+                <i class="pi pi-volume-up px-2" />
+                <span class="px-2">Fri 13:07</span>
+                <i class="pi pi-search px-2" />
+                <i class="pi pi-bars px-2" />
+            </template>
+        </Menubar>
+
+        <div class="dock-window dock-advanced">
+            <Dock :model="items">
+                <template #item="{ item }">
+                    <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </a>
+                </template>
+            </Dock>
+
+            <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+                <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
+            </Dialog>
+
+            <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+                <Tree :value="nodes" />
+            </Dialog>
+
+            <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                </template>
+            </Galleria>
+        </div>
+    </div>
+    <DocSectionCode :code="code" :service="['PhotoService', 'NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+import { PhotoService } from '@/service/PhotoService';
+import TerminalService from 'primevue/terminalservice';
+
+export default {
+    data() {
+        return {
+            displayFinder: false,
+            displayTerminal: false,
+            displayPhotos: false,
+            images: null,
+            nodes: null,
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg',
+                    command: () => {
+                        this.displayFinder = true;
+                    }
+                },
+                {
+                    label: 'Terminal',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/terminal.svg',
+                    command: () => {
+                        this.displayTerminal = true;
+                    }
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Safari',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/safari.svg',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg',
+                    command: () => {
+                        this.displayPhotos = true;
+                    }
+                },
+                {
+                    label: 'GitHub',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/github.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
+                    }
+                }
+            ],
+            menubarItems: [
+                {
+                    label: 'Finder',
+                    class: 'menubar-root'
+                },
+                {
+                    label: 'File',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archive',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Quit'
+                }
+            ],
+            responsiveOptions: [
+                {
+                    breakpoint: '1024px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 2
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Dock :model="items">
+    <template #item="{ item }">
+        <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
+            <img :alt="item.label" :src="item.icon" style="width: 100%" />
+        </a>
+    </template>
+</Dock>
+`,
+                options: `
+<template>
+    <div class="card dock-demo">
+        <Toast position="top-center" group="tc" />
+        <Menubar :model="menubarItems">
+            <template #start>
+                <i class="pi pi-apple px-2"></i>
+            </template>
+            <template #end>
+                <i class="pi pi-video px-2" />
+                <i class="pi pi-wifi px-2" />
+                <i class="pi pi-volume-up px-2" />
+                <span class="px-2">Fri 13:07</span>
+                <i class="pi pi-search px-2" />
+                <i class="pi pi-bars px-2" />
+            </template>
+        </Menubar>
+
+        <div class="dock-window dock-advanced">
+            <Dock :model="items">
+                <template #item="{ item }">
+                    <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </a>
+                </template>
+            </Dock>
+
+            <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+                <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
+            </Dialog>
+
+            <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+                <Tree :value="nodes" />
+            </Dialog>
+
+            <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                </template>
+            </Galleria>
+        </div>
+    </div>
+</template>
+
+<script>
+import TerminalService from 'primevue/terminalservice';
+import { NodeService } from '@/service/NodeService';
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            displayFinder: false,
+            displayTerminal: false,
+            displayPhotos: false,
+            images: null,
+            nodes: null,
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg',
+                    command: () => {
+                        this.displayFinder = true;
+                    }
+                },
+                {
+                    label: 'Terminal',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/terminal.svg',
+                    command: () => {
+                        this.displayTerminal = true;
+                    }
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Safari',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/safari.svg',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg',
+                    command: () => {
+                        this.displayPhotos = true;
+                    }
+                },
+                {
+                    label: 'GitHub',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/github.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
+                    }
+                }
+            ],
+            menubarItems: [
+                {
+                    label: 'Finder',
+                    class: 'menubar-root'
+                },
+                {
+                    label: 'File',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archive',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Quit'
+                }
+            ],
+            responsiveOptions: [
+                {
+                    breakpoint: '1024px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 2
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    },
+    methods: {
+        onDockItemClick(event, item) {
+            if (item.command) {
+                item.command();
+            }
+
+            event.preventDefault();
+        },
+        commandHandler(text) {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch (command) {
+                case 'date':
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case 'greet':
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case 'random':
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = 'Unknown command: ' + command;
+            }
+
+            TerminalService.emit('response', response);
+        }
+    }
+};
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.dock-demo .p-menubar {
+    padding: 0;
+    border-radius: 0;
+}
+</style>
+`,
+                composition: `
+<template>
+    <div>
+        <div class="card dock-demo">
+            <Toast position="top-center" group="tc" />
+
+            <Menubar :model="menubarItems">
+                <template #start>
+                    <i class="pi pi-apple px-2"></i>
+                </template>
+                <template #end>
+                    <i class="pi pi-video px-2" />
+                    <i class="pi pi-wifi px-2" />
+                    <i class="pi pi-volume-up px-2" />
+                    <span class="px-2">Fri 13:07</span>
+                    <i class="pi pi-search px-2" />
+                    <i class="pi pi-bars px-2" />
+                </template>
+            </Menubar>
+
+            <div class="dock-window dock-advanced">
+                <Dock :model="items">
+                    <template #item="{ item }">
+                        <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
+                            <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                        </a>
+                    </template>
+                </Dock>
+
+                <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+                    <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
+                </Dialog>
+
+                <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+                    <Tree :value="nodes" />
+                </Dialog>
+
+                <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
+                    <template #item="slotProps">
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                    </template>
+                </Galleria>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import TerminalService from 'primevue/terminalservice';
+import { NodeService } from '@/service/NodeService';
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then(data => images.value = data);
+    NodeService.getTreeNodes().then(data => nodes.value = data);
+    TerminalService.on('command', commandHandler);
+})
+
+onBeforeUnmount(() => {
+    TerminalService.off('command', commandHandler);
+})
+
+const displayFinder = ref(false);
+const displayTerminal = ref(false);
+const displayPhotos = ref(false);
+const images = ref();
+const nodes = ref();
+const toast = useToast();
+const items = ref([
+    {
+        label: 'Finder',
+        icon: "https://primefaces.org/cdn/primevue//images/dock/finder.svg",
+        command: () => {
+            displayFinder.value = true;
+        }
+    },
+    {
+        label: 'Terminal',
+        icon: "https://primefaces.org/cdn/primevue//images/dock/terminal.svg",
+        command: () => {
+            displayTerminal.value = true;
+        }
+    },
+    {
+        label: 'App Store',
+        icon: "https://primefaces.org/cdn/primevue//images/dock/appstore.svg",
+        command: () => {
+            toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
+        }
+    },
+    {
+        label: 'Safari',
+        icon: "https://primefaces.org/cdn/primevue//images/dock/safari.svg",
+        command: () => {
+            toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
+        }
+    },
+    {
+        label: 'Photos',
+        icon: "https://primefaces.org/cdn/primevue//images/dock/photos.svg",
+        command: () => {
+            displayPhotos.value = true;
+        }
+    },
+    {
+        label: 'GitHub',
+        icon: "https://primefaces.org/cdn/primevue//images/dock/github.svg",
+    },
+    {
+        label: 'Trash',
+        icon: "https://primefaces.org/cdn/primevue//images/dock/trash.png",
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
+        }
+    }
+]);
+const menubarItems = ref([
+    {
+        label: 'Finder',
+        class: 'menubar-root'
+    },
+    {
+        label: 'File',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    },
+
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            },
+
+        ]
+    },
+    {
+        label: 'Users',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus',
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus',
+
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archive',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Quit'
+    }
+]);
+const responsiveOptions = ref([
+    {
+        breakpoint: '1024px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 2
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1
+    }
+]);
+
+const onDockItemClick = (event, item) => {
+    if (item.command) {
+        item.command();
+    }
+
+    event.preventDefault();
+};
+
+const commandHandler = (text) => {
+    let response;
+    let argsIndex = text.indexOf(' ');
+    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+    switch(command) {
+        case "date":
+            response = 'Today is ' + new Date().toDateString();
+            break;
+
+        case "greet":
+            response = 'Hola ' + text.substring(argsIndex + 1);
+            break;
+
+        case "random":
+            response = Math.floor(Math.random() * 100);
+            break;
+
+        default:
+            response = "Unknown command: " + command;
+    }
+
+    TerminalService.emit('response', response);
+};
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+
+}
+
+.dock-demo .p-menubar {
+    padding: 0;
+    border-radius: 0;
+}
+</style>
+`
+            }
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    },
+    methods: {
+        onDockItemClick(event, item) {
+            if (item.command) {
+                item.command();
+            }
+
+            event.preventDefault();
+        },
+        commandHandler(text) {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch (command) {
+                case 'date':
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case 'greet':
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case 'random':
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = 'Unknown command: ' + command;
+            }
+
+            TerminalService.emit('response', response);
+        }
+    }
+};
+</script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.dock-demo .p-menubar {
+    padding: 0;
+    border-radius: 0;
+}
+</style>
diff --git a/apps/labs/doc/dock/BasicDoc.vue b/apps/labs/doc/dock/BasicDoc.vue
new file mode 100644
index 000000000..41e861844
--- /dev/null
+++ b/apps/labs/doc/dock/BasicDoc.vue
@@ -0,0 +1,256 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Menu requires a collection of menuitems as its <i>model</i> and an <i>icon</i> template. Default location is <i>bottom</i> and other edges are also available when defined with the <i>position</i> property.</p>
+    </DocSectionText>
+    <div class="card dock-demo">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
+                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
+                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
+            </div>
+        </div>
+        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg)'">
+            <Dock :model="items" :position="position">
+                <template #itemicon="{ item }">
+                    <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+                }
+            ],
+            position: 'bottom',
+            positions: [
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                },
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ],
+            code: {
+                basic: `
+<Dock :model="items" :position="position">
+    <template #itemicon="{ item }">
+        <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
+    </template>
+</Dock>
+`,
+                options: `
+<template>
+    <div class="card dock-demo">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
+                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
+                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
+            </div>
+        </div>
+        <div class="dock-window">
+            <Dock :model="items" :position="position">
+                <template #itemicon="{ item }">
+                    <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+                }
+            ],
+            position: 'bottom',
+            positions: [
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                },
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ]
+        }
+    }
+}
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+
+.dock-demo > .p-dock {
+    z-index: 1000;
+}
+</style>
+`,
+                composition: `
+<template>
+    <div class="card dock-demo">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
+                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
+                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
+            </div>
+        </div>
+        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
+            <Dock :model="items" :position="position">
+                <template #itemicon="{ item }">
+                    <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Finder',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+    },
+    {
+        label: 'App Store',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+    },
+    {
+        label: 'Photos',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+    },
+    {
+        label: 'Trash',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+    }
+]);
+const position = ref('bottom');
+const positions = ref([
+    {
+        label: 'Bottom',
+        value: 'bottom'
+    },
+    {
+        label: 'Top',
+        value: 'top'
+    },
+    {
+        label: 'Left',
+        value: 'left'
+    },
+    {
+        label: 'Right',
+        value: 'right'
+    }
+]);
+
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+
+.dock-demo > .p-dock {
+    z-index: 1000;
+}
+</style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+
+.dock-demo > .p-dock {
+    z-index: 1000;
+}
+
+.dock-demo .p-menubar {
+    padding: 0;
+    border-radius: 0;
+}
+</style>
diff --git a/apps/labs/doc/dock/ImportDoc.vue b/apps/labs/doc/dock/ImportDoc.vue
new file mode 100644
index 000000000..6f75f4c52
--- /dev/null
+++ b/apps/labs/doc/dock/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Dock from 'primevue/dock';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/drawer/AccessibilityDoc.vue b/apps/labs/doc/drawer/AccessibilityDoc.vue
new file mode 100644
index 000000000..656026597
--- /dev/null
+++ b/apps/labs/doc/drawer/AccessibilityDoc.vue
@@ -0,0 +1,87 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Drawer component uses <i>complementary</i> role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like <i>aria-labelledby</i> can be added. In
+            addition <i>aria-modal</i> is added since focus is kept within the drawer when opened.
+        </p>
+
+        <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Overlay Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the drawer.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the drawer.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Close Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the drawer.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the drawer.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
+
+<Drawer id="sbar" v-model:visible="visible" role="region" >
+    <p>Content</p>
+</Drawer>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/drawer/BasicDoc.vue b/apps/labs/doc/drawer/BasicDoc.vue
new file mode 100644
index 000000000..837b50e71
--- /dev/null
+++ b/apps/labs/doc/drawer/BasicDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Drawer is used as a container and visibility is controlled with a binding to <i>visible</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<div class="card flex justify-center">
+    <Drawer v-model:visible="visible" header="Drawer">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </Drawer>
+    <Button icon="pi pi-arrow-right" @click="visible = true" />
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/drawer/FullScreenDoc.vue b/apps/labs/doc/drawer/FullScreenDoc.vue
new file mode 100644
index 000000000..6f8fa316e
--- /dev/null
+++ b/apps/labs/doc/drawer/FullScreenDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The whole page is covered when <i>position</i> property is set as <i>full</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" position="full">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-window-maximize" @click="visible = true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<div class="card flex justify-center">
+    <Drawer v-model:visible="visible" header="Drawer" position="full">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </Drawer>
+    <Button icon="pi pi-window-maximize" @click="visible = true" />
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" position="full">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-window-maximize" @click="visible = true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" position="full">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-window-maximize" @click="visible = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/drawer/HeadlessDoc.vue b/apps/labs/doc/drawer/HeadlessDoc.vue
new file mode 100644
index 000000000..8ef91ccfd
--- /dev/null
+++ b/apps/labs/doc/drawer/HeadlessDoc.vue
@@ -0,0 +1,784 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-col h-full">
+                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
+                        <span class="inline-flex items-center gap-2">
+                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                                    fill="var(--p-primary-color)"
+                                />
+                                <path
+                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                                    fill="var(--p-text-color)"
+                                />
+                            </svg>
+                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                        </span>
+                        <span>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
+                        </span>
+                    </div>
+                    <div class="overflow-y-auto">
+                        <ul class="list-none p-4 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterFromClass: 'hidden',
+                                        enterActiveClass: 'animate-slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'animate-slideup'
+                                    }"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">FAVORITES</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-home mr-2"></i>
+                                            <span class="font-medium">Dashboard</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-bookmark mr-2"></i>
+                                            <span class="font-medium">Bookmarks</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            v-ripple
+                                            v-styleclass="{
+                                                selector: '@next',
+                                                enterFromClass: 'hidden',
+                                                enterActiveClass: 'animate-slidedown',
+                                                leaveToClass: 'hidden',
+                                                leaveActiveClass: 'animate-slideup'
+                                            }"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
+                                        >
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Reports</span>
+                                            <i class="pi pi-chevron-down ml-auto"></i>
+                                        </a>
+                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
+                                            <li>
+                                                <a
+                                                    v-ripple
+                                                    v-styleclass="{
+                                                        selector: '@next',
+                                                        enterFromClass: 'hidden',
+                                                        enterActiveClass: 'animate-slidedown',
+                                                        leaveToClass: 'hidden',
+                                                        leaveActiveClass: 'animate-slideup'
+                                                    }"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
+                                                >
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Revenue</span>
+                                                    <i class="pi pi-chevron-down ml-auto"></i>
+                                                </a>
+                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
+                                                    <li>
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-table mr-2"></i>
+                                                            <span class="font-medium">View</span>
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-search mr-2"></i>
+                                                            <span class="font-medium">Search</span>
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            <li>
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Expenses</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-users mr-2"></i>
+                                            <span class="font-medium">Team</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-comments mr-2"></i>
+                                            <span class="font-medium">Messages</span>
+                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-calendar mr-2"></i>
+                                            <span class="font-medium">Calendar</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <ul class="list-none p-4 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterFromClass: 'hidden',
+                                        enterActiveClass: 'animate-slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'animate-slideup'
+                                    }"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">APPLICATION</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-folder mr-2"></i>
+                                            <span class="font-medium">Projects</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-chart-bar mr-2"></i>
+                                            <span class="font-medium">Performance</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="mt-auto">
+                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <span class="font-bold">Amy Elsner</span>
+                        </a>
+                    </div>
+                </div>
+            </template>
+        </Drawer>
+        <Button icon="pi pi-bars" @click="visible = true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Drawer v-model:visible="visible">
+    <template #container="{ closeCallback }">
+        <div class="flex flex-col h-full">
+            <div class="flex items-center justify-between px-6 pt-4 shrink-0">
+                <span class="inline-flex items-center gap-2">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="..." fill="var(--p-primary-color)" />
+                        <path d="..." fill="var(--p-text-color)" />
+                    </svg>
+                    <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                </span>
+                <span>
+                    <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
+                </span>
+            </div>
+            <div class="overflow-y-auto">
+                <ul class="list-none p-4 m-0">
+                    <li>
+                        <div
+                            v-ripple
+                            v-styleclass="{
+                                selector: '@next',
+                                enterFromClass: 'hidden',
+                                enterActiveClass: 'animate-slidedown',
+                                leaveToClass: 'hidden',
+                                leaveActiveClass: 'animate-slideup'
+                            }"
+                            class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
+                        >
+                            <span class="font-medium">FAVORITES</span>
+                            <i class="pi pi-chevron-down"></i>
+                        </div>
+                        <ul class="list-none p-0 m-0 overflow-hidden">
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-home mr-2"></i>
+                                    <span class="font-medium">Dashboard</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-bookmark mr-2"></i>
+                                    <span class="font-medium">Bookmarks</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterFromClass: 'hidden',
+                                        enterActiveClass: 'animate-slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'animate-slideup'
+                                    }"
+                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
+                                >
+                                    <i class="pi pi-chart-line mr-2"></i>
+                                    <span class="font-medium">Reports</span>
+                                    <i class="pi pi-chevron-down ml-auto"></i>
+                                </a>
+                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
+                                    <li>
+                                        <a
+                                            v-ripple
+                                            v-styleclass="{
+                                                selector: '@next',
+                                                enterFromClass: 'hidden',
+                                                enterActiveClass: 'animate-slidedown',
+                                                leaveToClass: 'hidden',
+                                                leaveActiveClass: 'animate-slideup'
+                                            }"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
+                                        >
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Revenue</span>
+                                            <i class="pi pi-chevron-down ml-auto"></i>
+                                        </a>
+                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
+                                            <li>
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-table mr-2"></i>
+                                                    <span class="font-medium">View</span>
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-search mr-2"></i>
+                                                    <span class="font-medium">Search</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Expenses</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-users mr-2"></i>
+                                    <span class="font-medium">Team</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-comments mr-2"></i>
+                                    <span class="font-medium">Messages</span>
+                                    <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-calendar mr-2"></i>
+                                    <span class="font-medium">Calendar</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-cog mr-2"></i>
+                                    <span class="font-medium">Settings</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+                <ul class="list-none p-4 m-0">
+                    <li>
+                        <div
+                            v-ripple
+                            v-styleclass="{
+                                selector: '@next',
+                                enterFromClass: 'hidden',
+                                enterActiveClass: 'animate-slidedown',
+                                leaveToClass: 'hidden',
+                                leaveActiveClass: 'animate-slideup'
+                            }"
+                            class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
+                        >
+                            <span class="font-medium">APPLICATION</span>
+                            <i class="pi pi-chevron-down"></i>
+                        </div>
+                        <ul class="list-none p-0 m-0 overflow-hidden">
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-folder mr-2"></i>
+                                    <span class="font-medium">Projects</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-chart-bar mr-2"></i>
+                                    <span class="font-medium">Performance</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-cog mr-2"></i>
+                                    <span class="font-medium">Settings</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+            <div class="mt-auto">
+                <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
+                <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                    <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </a>
+            </div>
+        </div>
+    </template>
+</Drawer>
+<Button icon="pi pi-bars" @click="visible = true" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-col h-full">
+                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
+                        <span class="inline-flex items-center gap-2">
+                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                                    fill="var(--p-primary-color)"
+                                />
+                                <path
+                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                                    fill="var(--p-text-color)"
+                                />
+                            </svg>
+                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                        </span>
+                        <span>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
+                        </span>
+                    </div>
+                    <div class="overflow-y-auto">
+                        <ul class="list-none p-4 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterFromClass: 'hidden',
+                                        enterActiveClass: 'animate-slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'animate-slideup'
+                                    }"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">FAVORITES</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-home mr-2"></i>
+                                            <span class="font-medium">Dashboard</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-bookmark mr-2"></i>
+                                            <span class="font-medium">Bookmarks</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            v-ripple
+                                            v-styleclass="{
+                                                selector: '@next',
+                                                enterFromClass: 'hidden',
+                                                enterActiveClass: 'animate-slidedown',
+                                                leaveToClass: 'hidden',
+                                                leaveActiveClass: 'animate-slideup'
+                                            }"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
+                                        >
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Reports</span>
+                                            <i class="pi pi-chevron-down ml-auto"></i>
+                                        </a>
+                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
+                                            <li>
+                                                <a
+                                                    v-ripple
+                                                    v-styleclass="{
+                                                        selector: '@next',
+                                                        enterFromClass: 'hidden',
+                                                        enterActiveClass: 'animate-slidedown',
+                                                        leaveToClass: 'hidden',
+                                                        leaveActiveClass: 'animate-slideup'
+                                                    }"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
+                                                >
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Revenue</span>
+                                                    <i class="pi pi-chevron-down ml-auto"></i>
+                                                </a>
+                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
+                                                    <li>
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-table mr-2"></i>
+                                                            <span class="font-medium">View</span>
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-search mr-2"></i>
+                                                            <span class="font-medium">Search</span>
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            <li>
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Expenses</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-users mr-2"></i>
+                                            <span class="font-medium">Team</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-comments mr-2"></i>
+                                            <span class="font-medium">Messages</span>
+                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-calendar mr-2"></i>
+                                            <span class="font-medium">Calendar</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <ul class="list-none p-4 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterFromClass: 'hidden',
+                                        enterActiveClass: 'animate-slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'animate-slideup'
+                                    }"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">APPLICATION</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-folder mr-2"></i>
+                                            <span class="font-medium">Projects</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-chart-bar mr-2"></i>
+                                            <span class="font-medium">Performance</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="mt-auto">
+                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <span class="font-bold">Amy Elsner</span>
+                        </a>
+                    </div>
+                </div>
+            </template>
+        </Drawer>
+        <Button icon="pi pi-bars" @click="visible = true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-col h-full">
+                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
+                        <span class="inline-flex items-center gap-2">
+                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                                    fill="var(--p-primary-color)"
+                                />
+                                <path
+                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                                    fill="var(--p-text-color)"
+                                />
+                            </svg>
+                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                        </span>
+                        <span>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
+                        </span>
+                    </div>
+                    <div class="overflow-y-auto">
+                        <ul class="list-none p-4 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterFromClass: 'hidden',
+                                        enterActiveClass: 'animate-slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'animate-slideup'
+                                    }"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">FAVORITES</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-home mr-2"></i>
+                                            <span class="font-medium">Dashboard</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-bookmark mr-2"></i>
+                                            <span class="font-medium">Bookmarks</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            v-ripple
+                                            v-styleclass="{
+                                                selector: '@next',
+                                                enterFromClass: 'hidden',
+                                                enterActiveClass: 'animate-slidedown',
+                                                leaveToClass: 'hidden',
+                                                leaveActiveClass: 'animate-slideup'
+                                            }"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
+                                        >
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Reports</span>
+                                            <i class="pi pi-chevron-down ml-auto"></i>
+                                        </a>
+                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
+                                            <li>
+                                                <a
+                                                    v-ripple
+                                                    v-styleclass="{
+                                                        selector: '@next',
+                                                        enterFromClass: 'hidden',
+                                                        enterActiveClass: 'animate-slidedown',
+                                                        leaveToClass: 'hidden',
+                                                        leaveActiveClass: 'animate-slideup'
+                                                    }"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
+                                                >
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Revenue</span>
+                                                    <i class="pi pi-chevron-down ml-auto"></i>
+                                                </a>
+                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
+                                                    <li>
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-table mr-2"></i>
+                                                            <span class="font-medium">View</span>
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-search mr-2"></i>
+                                                            <span class="font-medium">Search</span>
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            <li>
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Expenses</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-users mr-2"></i>
+                                            <span class="font-medium">Team</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-comments mr-2"></i>
+                                            <span class="font-medium">Messages</span>
+                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-calendar mr-2"></i>
+                                            <span class="font-medium">Calendar</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <ul class="list-none p-4 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterFromClass: 'hidden',
+                                        enterActiveClass: 'animate-slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'animate-slideup'
+                                    }"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">APPLICATION</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-folder mr-2"></i>
+                                            <span class="font-medium">Projects</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-chart-bar mr-2"></i>
+                                            <span class="font-medium">Performance</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="mt-auto">
+                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
+                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <span class="font-bold">Amy Elsner</span>
+                        </a>
+                    </div>
+                </div>
+            </template>
+        </Drawer>
+        <Button icon="pi pi-bars" @click="visible = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/drawer/ImportDoc.vue b/apps/labs/doc/drawer/ImportDoc.vue
new file mode 100644
index 000000000..2ac7335ec
--- /dev/null
+++ b/apps/labs/doc/drawer/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Drawer from 'primevue/drawer';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/drawer/PositionDoc.vue b/apps/labs/doc/drawer/PositionDoc.vue
new file mode 100644
index 000000000..2c5897661
--- /dev/null
+++ b/apps/labs/doc/drawer/PositionDoc.vue
@@ -0,0 +1,147 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Drawer location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as valid values.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex gap-2 justify-center">
+            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
+            <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
+            <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
+            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
+        </div>
+
+        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visibleLeft: false,
+            visibleRight: false,
+            visibleTop: false,
+            visibleBottom: false,
+            code: {
+                basic: `
+<div class="flex gap-2 justify-center">
+    <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
+    <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
+    <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
+    <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
+</div>
+
+<Drawer v-model:visible="visibleLeft" header="Left Drawer">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</Drawer>
+
+<Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</Drawer>
+
+<Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</Drawer>
+
+<Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</Drawer>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex gap-2 justify-center">
+            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
+            <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
+            <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
+            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
+        </div>
+
+        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visibleLeft: false,
+            visibleRight: false,
+            visibleTop: false,
+            visibleBottom: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex gap-2 justify-center">
+            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
+            <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
+            <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
+            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
+        </div>
+
+        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+
+        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visibleLeft = ref(false);
+const visibleRight = ref(false);
+const visibleTop = ref(false);
+const visibleBottom = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/drawer/SizeDoc.vue b/apps/labs/doc/drawer/SizeDoc.vue
new file mode 100644
index 000000000..1053071ea
--- /dev/null
+++ b/apps/labs/doc/drawer/SizeDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties, this responsive example utilizes Tailwind.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<div class="card flex justify-center">
+    <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </Drawer>
+    <Button icon="pi pi-arrow-right" @click="visible = true" />
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Drawer>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/drawer/TemplateDoc.vue b/apps/labs/doc/drawer/TemplateDoc.vue
new file mode 100644
index 000000000..e6ad80d30
--- /dev/null
+++ b/apps/labs/doc/drawer/TemplateDoc.vue
@@ -0,0 +1,114 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content at the header and footer sections is displayed with templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible">
+            <template #header>
+                <div class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </div>
+            </template>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
+        </Drawer>
+        <Button icon="pi pi-plus" @click="visible = true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Drawer v-model:visible="visible">
+    <template #header>
+        <div class="flex items-center gap-2">
+            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+            <span class="font-bold">Amy Elsner</span>
+        </div>
+    </template>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <template #footer>
+        <div class="flex items-center gap-2">
+            <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+            <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+        </div>
+    </template>
+</Drawer>
+<Button icon="pi pi-plus" @click="visible = true" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible">
+            <template #header>
+                <div class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </div>
+            </template>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
+        </Drawer>
+        <Button icon="pi pi-plus" @click="visible = true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible">
+            <template #header>
+                <div class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </div>
+            </template>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
+        </Drawer>
+        <Button icon="pi pi-plus" @click="visible = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/AccessibilityDoc.vue b/apps/labs/doc/dynamicdialog/AccessibilityDoc.vue
new file mode 100644
index 000000000..9d89f057b
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/AccessibilityDoc.vue
@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <p>Visit accessibility section of <NuxtLink to="/dialog/#accessibility">dialog</NuxtLink> component for more information.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/dynamicdialog/CloseDialogDoc.vue b/apps/labs/doc/dynamicdialog/CloseDialogDoc.vue
new file mode 100644
index 000000000..372e5dec2
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/CloseDialogDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>close</i> function is available through a <i>dialogRef</i> that is injected to the component loaded by the dialog.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { inject } from "vue";
+
+const dialogRef = inject('dialogRef');
+
+const closeDialog = () => {
+    dialogRef.value.close();
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/CustomizationDoc.vue b/apps/labs/doc/dynamicdialog/CustomizationDoc.vue
new file mode 100644
index 000000000..47a159ad5
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/CustomizationDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information about the available props.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ProductListDemo from './ProductListDemo';
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();
+
+const showProducts = () => {
+    dialog.open(ProductListDemo, {
+        props: {
+            header: 'Product List',
+            style: {
+                width: '50vw',
+            },
+            breakpoints:{
+                '960px': '75vw',
+                '640px': '90vw'
+            },
+            modal: true
+        }
+    });
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/DialogServiceDoc.vue b/apps/labs/doc/dynamicdialog/DialogServiceDoc.vue
new file mode 100644
index 000000000..94c5564ac
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/DialogServiceDoc.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.</p>
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
+        <p>A dynamic dialog is controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+        <p>The service is available with the <i>useDialog</i> function for Composition API or using the <i>$dialog</i> property of the application for Options API.</p>
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+<DynamicDialog />
+`
+            },
+            code2: {
+                basic: `
+import {createApp} from 'vue';
+import DialogService from 'primevue/dialogservice';
+
+const app = createApp(App);
+app.use(DialogService);
+`
+            },
+            code3: {
+                basic: `
+/* Composition API */
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();
+
+/* Options API */
+const dialog = this.$dialog;
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/EventsDoc.vue b/apps/labs/doc/dynamicdialog/EventsDoc.vue
new file mode 100644
index 000000000..f5715b91e
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/EventsDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>emits</i> object defines callbacks to handle events emitted by the component within the Dialog.</p>
+
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import ProductListDemo from './ProductListDemo';
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();
+
+const showProducts = () => {
+    dialog.open(ProductListDemo, {
+        onCancel: (e) => {
+            console.log(e);  // {user: 'primetime'}
+        }
+    });
+}
+`
+            },
+            code2: {
+                basic: `
+<script setup>
+/* ProductListDemo.vue */
+const emit = defineEmits(['cancel', 'save'])
+
+function buttonClick() {
+    emit('cancel', {user: 'primetime'});
+}
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/ExampleDoc.vue b/apps/labs/doc/dynamicdialog/ExampleDoc.vue
new file mode 100644
index 000000000..306b8cc5a
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/ExampleDoc.vue
@@ -0,0 +1,397 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A sample implementation to demonstrate loading components asynchronously, nested content and passing data.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+
+        <DynamicDialog />
+    </div>
+    <DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" />
+</template>
+
+<script>
+import { markRaw } from 'vue';
+import FooterDemo from './demo/FooterDemo';
+import ProductListDemo from './demo/ProductListDemo';
+
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+
+<DynamicDialog />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+        <Toast />
+        <DynamicDialog />
+    </div>
+</template>
+
+<script>
+import Button from 'primevue/button';
+import { markRaw, defineAsyncComponent } from 'vue';
+const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
+
+export default {
+    methods: {
+        showProducts() {
+            const dialogRef = this.$dialog.open(ProductListDemo, {
+                props: {
+                    header: 'Product List',
+                    style: {
+                        width: '50vw'
+                    },
+                    breakpoints: {
+                        '960px': '75vw',
+                        '640px': '90vw'
+                    },
+                    modal: true
+                },
+                templates: {
+                    footer: markRaw(FooterDemo)
+                },
+                onClose: (options) => {
+                    const data = options.data;
+
+                    if (data) {
+                        const buttonType = data.buttonType;
+                        const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
+
+                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
+                    }
+                }
+            });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+        <Toast />
+        <DynamicDialog />
+    </div>
+</template>
+
+<script setup>
+import { markRaw, defineAsyncComponent } from 'vue';
+import { useDialog } from 'primevue/usedialog';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
+
+const dialog = useDialog();
+const toast = useToast();
+
+const showProducts = () => {
+    const dialogRef = dialog.open(ProductListDemo, {
+        props: {
+            header: 'Product List',
+            style: {
+                width: '50vw',
+            },
+            breakpoints:{
+                '960px': '75vw',
+                '640px': '90vw'
+            },
+            modal: true
+        },
+        templates: {
+            footer: markRaw(FooterDemo)
+        },
+        onClose: (options) => {
+            const data = options.data;
+            if (data) {
+                const buttonType = data.buttonType;
+                const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
+
+                toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
+            }
+        }
+    });
+}
+<\/script>
+`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            },
+            extFiles: {
+                options: {
+                    'src/components/ProductListDemo.vue': {
+                        content: `
+<template>
+	<div>
+        <div class="flex justify-end mt-1 mb-4">
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
+        </div>
+        <DataTable :value="products">
+			<Column field="code" header="Code"></Column>
+			<Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
+                </template>
+            </Column>
+			<Column field="category" header="Category"></Column>
+			<Column field="quantity" header="Quantity"></Column>
+            <Column style="width:5rem">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
+                </template>
+            </Column>
+		</DataTable>
+
+	</div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+import InfoDemo from './InfoDemo.vue';
+
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
+    },
+    methods: {
+        selectProduct(data) {
+            this.dialogRef.close(data);
+        },
+        showInfo() {
+            this.$dialog.open(InfoDemo, {
+                props: {
+                    header: 'Information',
+                    modal: true,
+                    dismissableMask: true
+                },
+                data: {
+                    totalProducts: this.products ? this.products.length : 0
+                }
+            });
+        }
+    }
+}
+<\/script>
+`
+                    },
+                    'src/components/InfoDemo.vue': {
+                        content: `
+<template>
+    <div>
+        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
+        <div class="flex justify-end">
+            <Button type="button" label="Close" @click="closeDialog"></Button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            totalProducts: 0
+        }
+    },
+    mounted() {
+        this.totalProducts = this.dialogRef.data.totalProducts;
+    },
+    methods: {
+        closeDialog() {
+            this.dialogRef.close();
+        }
+    }
+}
+<\/script>
+                            `
+                    },
+                    'src/components/FooterDemo.vue': {
+                        content: `
+<template>
+    <Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    methods: {
+        closeDialog(e) {
+            this.dialogRef.close(e);
+        }
+    }
+};
+<\/script>
+`
+                    }
+                },
+                composition: {
+                    'src/components/ProductListDemo.vue': {
+                        content: `
+<template>
+	<div>
+        <div class="flex justify-end mt-1 mb-4">
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
+        </div>
+        <DataTable :value="products">
+			<Column field="code" header="Code"></Column>
+			<Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
+                </template>
+            </Column>
+			<Column field="category" header="Category"></Column>
+			<Column field="quantity" header="Quantity"></Column>
+            <Column style="width:5rem">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
+                </template>
+            </Column>
+		</DataTable>
+
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+import { useDialog } from "primevue/usedialog";
+import { ProductService } from "@/service/ProductService";
+import InfoDemo from "./InfoDemo.vue";
+
+const dialogRef = inject("dialogRef");
+const dialog = useDialog();
+const products = ref(null);
+
+onMounted(() => {
+    ProductService
+        .getProductsSmall()
+        .then((data) => (products.value = data.slice(0, 5)));
+});
+
+const selectProduct = (data) => {
+    dialogRef.value.close(data);
+};
+
+const showInfo = () => {
+    dialog.open(InfoDemo, {
+        props: {
+            header: "Information",
+            modal: true,
+            dismissableMask: true,
+        },
+        data: {
+            totalProducts: products.value ? products.value.length : 0,
+        }
+    });
+};
+<\/script>
+`
+                    },
+                    'src/components/InfoDemo.vue': {
+                        content: `
+<template>
+    <div>
+        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
+        <div class="flex justify-end">
+            <Button type="button" label="Close" @click="closeDialog"></Button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+
+const totalProducts = ref(0);
+const dialogRef = inject("dialogRef");
+
+onMounted(() => {
+    totalProducts.value = dialogRef.value.data.totalProducts;
+});
+
+const closeDialog = () => {
+    dialogRef.value.close();
+};
+<\/script>
+                            `
+                    },
+                    'src/components/FooterDemo.vue': {
+                        content: `
+<template>
+    <Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
+</template>
+
+<script setup>
+import { inject } from "vue";
+
+const dialogRef = inject("dialogRef");
+
+const closeDialog = (e) => {
+    dialogRef.value.close(e);
+};
+<\/script>
+`
+                    }
+                }
+            }
+        };
+    },
+    methods: {
+        showProducts() {
+            const dialogRef = this.$dialog.open(ProductListDemo, {
+                props: {
+                    header: 'Product List',
+                    style: {
+                        width: '50vw'
+                    },
+                    breakpoints: {
+                        '960px': '75vw',
+                        '640px': '90vw'
+                    },
+                    modal: true
+                },
+                templates: {
+                    footer: markRaw(FooterDemo)
+                },
+                onClose: (options) => {
+                    const data = options.data;
+
+                    if (data) {
+                        const buttonType = data.buttonType;
+                        const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };
+
+                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
+                    }
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/ImportDoc.vue b/apps/labs/doc/dynamicdialog/ImportDoc.vue
new file mode 100644
index 000000000..e7e2d515d
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import DynamicDialog from 'primevue/dynamicdialog';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/OpenDialogDoc.vue b/apps/labs/doc/dynamicdialog/OpenDialogDoc.vue
new file mode 100644
index 000000000..503078c33
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/OpenDialogDoc.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+        <p>The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.</p>
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import ProductListDemo from './ProductListDemo';
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();
+
+const showProducts = () => {
+    dialog.open(ProductListDemo, {});
+}
+`
+            },
+            code2: {
+                basic: `
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();
+
+const dynamicComponent = defineAsyncComponent(() => import('./ProductListDemo.vue'));
+
+const showProducts = () => {
+    dialog.open(dynamicComponent, {});
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/PassingDataDoc.vue b/apps/labs/doc/dynamicdialog/PassingDataDoc.vue
new file mode 100644
index 000000000..642c7e5b1
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/PassingDataDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>data</i> property to pass parameters when opening a Dialog, the internal component can later access this data using <i>dialogRef</i>.</p>
+
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+
+        <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback.</p>
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+const dialog = useDialog();
+
+const showProducts = () => {
+    dialog.open(ProductListDemo, {
+        data: {
+            user: 'primetime'
+        }
+    });
+}
+`
+            },
+            code2: {
+                basic: `
+import { inject, onMounted } from "vue";
+
+const dialogRef = inject('dialogRef');
+
+onMounted(() => {
+    const params = dialogRef.value.data; // {user: 'primetime'}
+})
+`
+            },
+            code3: {
+                basic: `
+const dialog = useDialog();
+
+const showProducts = () => {
+    dialog.open(ProductListDemo, {
+        onClose: (opt) => {
+            const callbackParams = opt.data; // {selectedId: 12}
+        }
+    });
+}
+`
+            },
+            code4: {
+                basic: `
+import { inject } from "vue";
+
+const dialogRef = inject('dialogRef');
+
+const closeDialog = () => {
+    dialogRef.value.close({
+        selectedId: 12
+    });
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/demo/FooterDemo.vue b/apps/labs/doc/dynamicdialog/demo/FooterDemo.vue
new file mode 100644
index 000000000..ed59847f2
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/demo/FooterDemo.vue
@@ -0,0 +1,14 @@
+<template>
+    <Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    methods: {
+        closeDialog(e) {
+            this.dialogRef.close(e);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/demo/InfoDemo.vue b/apps/labs/doc/dynamicdialog/demo/InfoDemo.vue
new file mode 100644
index 000000000..53a6b2968
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/demo/InfoDemo.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <p>
+            There are <strong>{{ totalProducts }}</strong> products in total in this list.
+        </p>
+        <div class="flex justify-end">
+            <Button autofocus type="button" label="Close" @click="closeDialog"></Button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            totalProducts: 0
+        };
+    },
+    mounted() {
+        this.totalProducts = this.dialogRef.data.totalProducts;
+    },
+    methods: {
+        closeDialog() {
+            this.dialogRef.close();
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/dynamicdialog/demo/ProductListDemo.vue b/apps/labs/doc/dynamicdialog/demo/ProductListDemo.vue
new file mode 100644
index 000000000..ac4dfc575
--- /dev/null
+++ b/apps/labs/doc/dynamicdialog/demo/ProductListDemo.vue
@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <div class="flex justify-end mt-1 mb-4">
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
+        </div>
+        <DataTable :value="products">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
+                </template>
+            </Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+            <Column style="width: 5rem">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+import InfoDemo from './InfoDemo.vue';
+
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
+    },
+    methods: {
+        selectProduct(data) {
+            this.dialogRef.close(data);
+        },
+        showInfo() {
+            this.$dialog.open(InfoDemo, {
+                props: {
+                    header: 'Information',
+                    modal: true,
+                    dismissableMask: true
+                },
+                data: {
+                    totalProducts: this.products ? this.products.length : 0
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/fieldset/AccessibilityDoc.vue b/apps/labs/doc/fieldset/AccessibilityDoc.vue
new file mode 100644
index 000000000..91dd1c2ee
--- /dev/null
+++ b/apps/labs/doc/fieldset/AccessibilityDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a button element is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define the id of the content section
+            along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the
+            <i>toggleButtonProps</i> property.
+        </p>
+        <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
+
+        <h6>Content Toggle Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/fieldset/BasicDoc.vue b/apps/labs/doc/fieldset/BasicDoc.vue
new file mode 100644
index 000000000..3957123e3
--- /dev/null
+++ b/apps/labs/doc/fieldset/BasicDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A simple Fieldset is created with a <i>legend</i> property along with the content as children.</p>
+    </DocSectionText>
+    <div class="card">
+        <Fieldset legend="Header">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Fieldset legend="Header">
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Fieldset>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Fieldset legend="Header">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Fieldset legend="Header">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/fieldset/ImportDoc.vue b/apps/labs/doc/fieldset/ImportDoc.vue
new file mode 100644
index 000000000..a375a6171
--- /dev/null
+++ b/apps/labs/doc/fieldset/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Fieldset from 'primevue/fieldset';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/fieldset/TemplateDoc.vue b/apps/labs/doc/fieldset/TemplateDoc.vue
new file mode 100644
index 000000000..3edffa469
--- /dev/null
+++ b/apps/labs/doc/fieldset/TemplateDoc.vue
@@ -0,0 +1,87 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Legend section can be customized with custom content using templating.</p>
+    </DocSectionText>
+    <div class="card">
+        <Fieldset>
+            <template #legend>
+                <div class="flex items-center pl-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold p-2">Amy Elsner</span>
+                </div>
+            </template>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Fieldset>
+    <template #legend>
+        <div class="flex items-center pl-2">
+            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+            <span class="font-bold p-2">Amy Elsner</span>
+        </div>
+    </template>
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Fieldset>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Fieldset>
+            <template #legend>
+                <div class="flex items-center pl-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold p-2">Amy Elsner</span>
+                </div>
+            </template>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Fieldset>
+            <template #legend>
+                <div class="flex items-center pl-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold p-2">Amy Elsner</span>
+                </div>
+            </template>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/fieldset/ToggleableDoc.vue b/apps/labs/doc/fieldset/ToggleableDoc.vue
new file mode 100644
index 000000000..286a1c460
--- /dev/null
+++ b/apps/labs/doc/fieldset/ToggleableDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Content of the fieldset can be expanded and collapsed when <i>toggleable</i> option is enabled.</p>
+    </DocSectionText>
+    <div class="card">
+        <Fieldset legend="Header" :toggleable="true">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Fieldset legend="Header" :toggleable="true">
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Fieldset>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Fieldset legend="Header" :toggleable="true">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Fieldset legend="Header" :toggleable="true">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/fileupload/AccessibilityDoc.vue b/apps/labs/doc/fileupload/AccessibilityDoc.vue
new file mode 100644
index 000000000..ea7335051
--- /dev/null
+++ b/apps/labs/doc/fileupload/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>FileUpload uses a hidden native <i>input</i> element with <i>type="file"</i> for screen readers.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Interactive elements of the uploader are buttons, visit the <NuxtLink to="/button/#accessibility">Button</NuxtLink> accessibility section for more information.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/fileupload/AdvancedDoc.vue b/apps/labs/doc/fileupload/AdvancedDoc.vue
new file mode 100644
index 000000000..1b34d8389
--- /dev/null
+++ b/apps/labs/doc/fileupload/AdvancedDoc.vue
@@ -0,0 +1,79 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
+    </DocSectionText>
+    <div class="card">
+        <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+            <template #empty>
+                <span>Drag and drop files to here to upload.</span>
+            </template>
+        </FileUpload>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+    <template #empty>
+        <span>Drag and drop files to here to upload.</span>
+    </template>
+</FileUpload>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast />
+        <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+            <template #empty>
+                <span>Drag and drop files to here to upload.</span>
+            </template>
+        </FileUpload>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        onAdvancedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+            <template #empty>
+                <span>Drag and drop files to here to upload.</span>
+            </template>
+        </FileUpload>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const onAdvancedUpload = () => {
+    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onAdvancedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/fileupload/AutoDoc.vue b/apps/labs/doc/fileupload/AutoDoc.vue
new file mode 100644
index 000000000..a54ae28d5
--- /dev/null
+++ b/apps/labs/doc/fileupload/AutoDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>auto</i> property is enabled, a file gets uploaded instantly after selection.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        onUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const onUpload = () => {
+    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/fileupload/BasicDoc.vue b/apps/labs/doc/fileupload/BasicDoc.vue
new file mode 100644
index 000000000..9f22baa3f
--- /dev/null
+++ b/apps/labs/doc/fileupload/BasicDoc.vue
@@ -0,0 +1,79 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FileUpload basic <i>mode</i> provides a simpler UI as an alternative to default advanced mode.</p>
+    </DocSectionText>
+    <div class="card flex flex-col gap-6 items-center justify-center">
+        <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+        <Button label="Upload" @click="upload" severity="secondary" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+<Button label="Upload" @click="upload" severity="secondary" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col gap-6 items-center justify-center">
+        <Toast />
+        <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+        <Button label="Upload" @click="upload" severity="secondary" />
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        upload() {
+            this.$refs.fileupload.upload();
+        },
+        onUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col gap-6 items-center justify-center">
+        <Toast />
+        <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+        <Button label="Upload" @click="upload" severity="secondary" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+const fileupload = ref();
+
+const upload = () => {
+    fileupload.value.upload();
+};
+
+const onUpload = () => {
+    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        upload() {
+            this.$refs.fileupload.upload();
+        },
+        onUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/fileupload/CustomUploadDoc.vue b/apps/labs/doc/fileupload/CustomUploadDoc.vue
new file mode 100644
index 000000000..001ff8025
--- /dev/null
+++ b/apps/labs/doc/fileupload/CustomUploadDoc.vue
@@ -0,0 +1,93 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Uploading implementation can be overridden by enabling <i>customUpload</i> property. This sample, displays the image on the client side with a grayscale filter.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-6">
+        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
+        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            src: null,
+            code: {
+                basic: `
+<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
+<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-6">
+        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
+        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            src: null
+        }
+    },
+    methods: {
+        onFileSelect(event) {
+            const file = event.files[0];
+            const reader = new FileReader();
+
+            reader.onload = async (e) => {
+                this.src = e.target.result;
+            };
+
+            reader.readAsDataURL(file);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-6">
+        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
+        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const src = ref(null);
+
+function onFileSelect(event) {
+    const file = event.files[0];
+    const reader = new FileReader();
+
+    reader.onload = async (e) => {
+        src.value = e.target.result;
+    };
+
+    reader.readAsDataURL(file);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onFileSelect(event) {
+            const file = event.files[0];
+            const reader = new FileReader();
+
+            reader.onload = async (e) => {
+                this.src = e.target.result;
+            };
+
+            reader.readAsDataURL(file);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/fileupload/ImportDoc.vue b/apps/labs/doc/fileupload/ImportDoc.vue
new file mode 100644
index 000000000..adf897abe
--- /dev/null
+++ b/apps/labs/doc/fileupload/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import FileUpload from 'primevue/fileupload';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/fileupload/TemplateDoc.vue b/apps/labs/doc/fileupload/TemplateDoc.vue
new file mode 100644
index 000000000..4d7a4e9cb
--- /dev/null
+++ b/apps/labs/doc/fileupload/TemplateDoc.vue
@@ -0,0 +1,408 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Uploader UI can be customized with templating.</p>
+    </DocSectionText>
+    <div class="card">
+        <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+            <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
+                    <div class="flex gap-2">
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
+                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
+                    </div>
+                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
+                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
+                    </ProgressBar>
+                </div>
+            </template>
+            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
+                <div class="flex flex-col gap-8 pt-4">
+                    <Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length }" severity="error">
+                        {{ message }}
+                    </Message>
+
+                    <div v-if="files.length > 0">
+                        <h5>Pending</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Pending" severity="warn" />
+                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-if="uploadedFiles.length > 0">
+                        <h5>Completed</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Completed" class="mt-4" severity="success" />
+                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template #empty>
+                <div class="flex items-center justify-center flex-col">
+                    <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
+                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
+                </div>
+            </template>
+        </FileUpload>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            files: [],
+            totalSize: 0,
+            totalSizePercent: 0,
+            code: {
+                basic: `
+<FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+    <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+        <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
+            <div class="flex gap-2">
+                <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
+                <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
+            </div>
+            <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
+                <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
+            </ProgressBar>
+        </div>
+    </template>
+    <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
+        <div class="flex flex-col gap-8 pt-4">
+            <Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length}" severity="error">
+                {{ message }}
+            </Message>
+
+            <div v-if="files.length > 0">
+                <h5>Pending</h5>
+                <div class="flex flex-wrap gap-4">
+                    <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                        <div>
+                            <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                        </div>
+                        <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                        <div>{{ formatSize(file.size) }}</div>
+                        <Badge value="Pending" severity="warn" />
+                        <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
+                    </div>
+                </div>
+            </div>
+
+            <div v-if="uploadedFiles.length > 0">
+                <h5>Completed</h5>
+                <div class="flex flex-wrap gap-4">
+                    <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                        <div>
+                            <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                        </div>
+                        <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                        <div>{{ formatSize(file.size) }}</div>
+                        <Badge value="Completed" class="mt-4" severity="success" />
+                        <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+    <template #empty>
+        <div class="flex items-center justify-center flex-col">
+            <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
+            <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
+        </div>
+    </template>
+</FileUpload>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast />
+        <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+            <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
+                    <div class="flex gap-2">
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
+                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
+                    </div>
+                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
+                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
+                    </ProgressBar>
+                </div>
+            </template>
+            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
+                <div class="flex flex-col gap-8 pt-4">
+                    <Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length}" severity="error">
+                        {{ message }}
+                    </Message>
+
+                    <div v-if="files.length > 0">
+                        <h5>Pending</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Pending" severity="warn" />
+                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-if="uploadedFiles.length > 0">
+                        <h5>Completed</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Completed" class="mt-4" severity="success" />
+                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template #empty>
+                <div class="flex items-center justify-center flex-col">
+                    <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
+                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
+                </div>
+            </template>
+        </FileUpload>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            files: [],
+            totalSize: 0,
+            totalSizePercent: 0,
+        };
+    },
+    methods: {
+        onRemoveTemplatingFile(file, removeFileCallback, index) {
+            removeFileCallback(index);
+            this.totalSize -= parseInt(this.formatSize(file.size));
+            this.totalSizePercent = this.totalSize / 10;
+        },
+        onClearTemplatingUpload(clear) {
+            clear();
+            this.totalSize = 0;
+            this.totalSizePercent = 0;
+        },
+        onSelectedFiles(event) {
+            this.files = event.files;
+            this.files.forEach((file) => {
+                this.totalSize += parseInt(this.formatSize(file.size));
+            });
+        },
+        uploadEvent(callback) {
+            this.totalSizePercent = this.totalSize / 10;
+            callback();
+        },
+        onTemplatedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
+        formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
+            if (bytes === 0) {
+                return \`0 \${sizes[0]}\`;
+            }
+
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+            return \`\${formattedSize} \${sizes[i]}\`;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+            <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
+                    <div class="flex gap-2">
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
+                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
+                    </div>
+                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
+                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
+                    </ProgressBar>
+                </div>
+            </template>
+            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
+                <div class="flex flex-col gap-8 pt-4">
+                    <div v-if="files.length > 0">
+                        <h5>Pending</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Pending" severity="warn" />
+                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-if="uploadedFiles.length > 0">
+                        <h5>Completed</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Completed" class="mt-4" severity="success" />
+                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template #empty>
+                <div class="flex items-center justify-center flex-col">
+                    <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
+                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
+                </div>
+            </template>
+        </FileUpload>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { usePrimeVue } from 'primevue/config';
+import { useToast } from "primevue/usetoast";
+
+const $primevue = usePrimeVue();
+const toast = useToast();
+
+const totalSize = ref(0);
+const totalSizePercent = ref(0);
+const files = ref([]);
+
+const onRemoveTemplatingFile = (file, removeFileCallback, index) => {
+    removeFileCallback(index);
+    totalSize.value -= parseInt(formatSize(file.size));
+    totalSizePercent.value = totalSize.value / 10;
+};
+
+const onClearTemplatingUpload = (clear) => {
+    clear();
+    totalSize.value = 0;
+    totalSizePercent.value = 0;
+};
+
+const onSelectedFiles = (event) => {
+    files.value = event.files;
+    files.value.forEach((file) => {
+        totalSize.value += parseInt(formatSize(file.size));
+    });
+};
+
+const uploadEvent = (callback) => {
+    totalSizePercent.value = totalSize.value / 10;
+    callback();
+};
+
+const onTemplatedUpload = () => {
+    toast.add({ severity: "info", summary: "Success", detail: "File Uploaded", life: 3000 });
+};
+
+const formatSize = (bytes) => {
+    const k = 1024;
+    const dm = 3;
+    const sizes = $primevue.config.locale.fileSizeTypes;
+
+    if (bytes === 0) {
+        return \`0 \${sizes[0]}\`;
+    }
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+    return \`\${formattedSize} \${sizes[i]}\`;
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onRemoveTemplatingFile(file, removeFileCallback, index) {
+            removeFileCallback(index);
+            this.totalSize -= parseInt(this.formatSize(file.size));
+            this.totalSizePercent = this.totalSize / 10;
+        },
+        onClearTemplatingUpload(clear) {
+            clear();
+            this.totalSize = 0;
+            this.totalSizePercent = 0;
+        },
+        onSelectedFiles(event) {
+            this.files = event.files;
+            this.files.forEach((file) => {
+                this.totalSize += parseInt(this.formatSize(file.size));
+            });
+            this.totalSizePercent = this.totalSize / 10;
+        },
+        uploadEvent(callback) {
+            callback();
+        },
+        onTemplatedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
+        formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
+            if (bytes === 0) {
+                return `0 ${sizes[0]}`;
+            }
+
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+            return `${formattedSize} ${sizes[i]}`;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/floatlabel/AccessibilityDoc.vue b/apps/labs/doc/floatlabel/AccessibilityDoc.vue
new file mode 100644
index 000000000..6f5b4e1eb
--- /dev/null
+++ b/apps/labs/doc/floatlabel/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>FloatLabel does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/floatlabel/BasicDoc.vue b/apps/labs/doc/floatlabel/BasicDoc.vue
new file mode 100644
index 000000000..6ebf82616
--- /dev/null
+++ b/apps/labs/doc/floatlabel/BasicDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FloatLabel is used by wrapping the input and its label.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <FloatLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<FloatLabel>
+    <InputText id="username" v-model="value" />
+    <label for="username">Username</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <FloatLabel>
+            <InputText id="username" v-model="value" />
+            <label for="username">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <FloatLabel>
+            <InputText id="username" v-model="value" />
+            <label for="username">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/floatlabel/ImportDoc.vue b/apps/labs/doc/floatlabel/ImportDoc.vue
new file mode 100644
index 000000000..b6bd6f478
--- /dev/null
+++ b/apps/labs/doc/floatlabel/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import FloatLabel from 'primevue/floatlabel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/floatlabel/InvalidDoc.vue b/apps/labs/doc/floatlabel/InvalidDoc.vue
new file mode 100644
index 000000000..0ac618180
--- /dev/null
+++ b/apps/labs/doc/floatlabel/InvalidDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the form element is invalid, the label is also highlighted.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" autocomplete="off" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" autocomplete="off" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" autocomplete="off" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            code: {
+                basic: `
+<FloatLabel>
+    <InputText id="value1" v-model="value1" :invalid="!value1" />
+    <label for="value1">Username</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <InputText id="value2" v-model="value2" :invalid="!value2" />
+    <label for="value2">Username</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputText id="value3" v-model="value3" :invalid="!value3" />
+    <label for="value3">Username</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/floatlabel/VariantsDoc.vue b/apps/labs/doc/floatlabel/VariantsDoc.vue
new file mode 100644
index 000000000..cfb1dccbb
--- /dev/null
+++ b/apps/labs/doc/floatlabel/VariantsDoc.vue
@@ -0,0 +1,89 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>variant</i> property defines the position of the label. Default value is <i>over</i>, whereas <i>in</i> and <i>on</i> are the alternatives.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel variant="in">
+            <InputText id="in_label" v-model="value1" autocomplete="off" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="on_label" v-model="value2" autocomplete="off" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            code: {
+                basic: `
+<FloatLabel variant="in">
+    <InputText id="in_label" v-model="value1" autocomplete="off" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputText id="on_label" v-model="value2" autocomplete="off" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel variant="in">
+            <InputText id="in_label" v-model="value1" autocomplete="off" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="on_label" v-model="value2" autocomplete="off" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<div class="card flex flex-wrap justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center gap-4">
+        <FloatLabel variant="in">
+            <InputText id="in_label" v-model="value1" autocomplete="off" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="on_label" v-model="value2" autocomplete="off" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/fluid/AccessibilityDoc.vue b/apps/labs/doc/fluid/AccessibilityDoc.vue
new file mode 100644
index 000000000..03b4077a4
--- /dev/null
+++ b/apps/labs/doc/fluid/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Fluid does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/fluid/BasicDoc.vue b/apps/labs/doc/fluid/BasicDoc.vue
new file mode 100644
index 000000000..5f812eeae
--- /dev/null
+++ b/apps/labs/doc/fluid/BasicDoc.vue
@@ -0,0 +1,123 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Components with the <i>fluid</i> option like <i>InputText</i> have the ability to span the full width of their component. Enabling the <i>fluid</i> for each component individually may be cumbersome so wrap the content with <i>Fluid</i> to
+            instead for an easier alternative.
+        </p>
+        <p>Any component that has the <i>fluid</i> property can be nested inside the <i>Fluid</i> component. The <i>fluid</i> property of a child component has higher precedence than the fluid container as shown in the last sample.</p>
+    </DocSectionText>
+    <div class="card flex flex-col gap-6">
+        <div>
+            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
+            <InputText id="non-fluid" />
+        </div>
+
+        <div>
+            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
+            <InputText id="non-fluid" fluid />
+        </div>
+
+        <Fluid>
+            <span class="font-bold mb-2 block">Fluid Container</span>
+            <div class="grid grid-cols-2 gap-4">
+                <div><InputText /></div>
+                <div><InputText /></div>
+                <div class="col-span-full"><InputText /></div>
+                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
+            </div>
+        </Fluid>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<div>
+    <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
+    <InputText id="non-fluid" />
+</div>
+
+<div>
+    <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
+    <InputText id="non-fluid" fluid />
+</div>
+
+<Fluid>
+    <span class="font-bold mb-2 block">Fluid Container</span>
+    <div class="grid grid-cols-2 gap-4">
+        <div><InputText /></div>
+        <div><InputText /></div>
+        <div class="col-span-full"><InputText /></div>
+        <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
+    </div>
+</Fluid>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col gap-6">
+        <div>
+            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
+            <InputText id="non-fluid" />
+        </div>
+
+        <div>
+            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
+            <InputText id="non-fluid" fluid />
+        </div>
+
+        <Fluid>
+            <span class="font-bold mb-2 block">Fluid Container</span>
+            <div class="grid grid-cols-2 gap-4">
+                <div><InputText /></div>
+                <div><InputText /></div>
+                <div class="col-span-full"><InputText /></div>
+                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
+            </div>
+        </Fluid>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+
+`,
+                composition: `
+<template>
+     <div class="card flex flex-col gap-6">
+        <div>
+            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
+            <InputText id="non-fluid" />
+        </div>
+
+        <div>
+            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
+            <InputText id="non-fluid" fluid />
+        </div>
+
+        <Fluid>
+            <span class="font-bold mb-2 block">Fluid Container</span>
+            <div class="grid grid-cols-2 gap-4">
+                <div><InputText /></div>
+                <div><InputText /></div>
+                <div class="col-span-full"><InputText /></div>
+                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
+            </div>
+        </Fluid>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/fluid/ImportDoc.vue b/apps/labs/doc/fluid/ImportDoc.vue
new file mode 100644
index 000000000..fc94d9b6b
--- /dev/null
+++ b/apps/labs/doc/fluid/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Fluid from 'primevue/fluid';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/AccessibilityDoc.vue b/apps/labs/doc/galleria/AccessibilityDoc.vue
new file mode 100644
index 000000000..16f60d75a
--- /dev/null
+++ b/apps/labs/doc/galleria/AccessibilityDoc.vue
@@ -0,0 +1,119 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Galleria uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
+            <i>aria-live</i> attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay.
+        </p>
+
+        <p>
+            A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Similarly
+            <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
+        </p>
+
+        <p>
+            Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button
+            elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
+        </p>
+
+        <p>
+            Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a <i>tablist</i> role whereas each item has a <i>tab</i> role with <i>aria-selected</i> and <i>aria-controls</i> attributes. The
+            <i>aria-label</i> attribute of a quick navigation item refers to the <i>aria.pageLabel</i> of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Current page is marked with
+            <i>aria-current</i>.
+        </p>
+
+        <p>
+            In full screen mode, modal element uses <i>dialog</i> role with <i>aria-modal</i> enabled. The close button retrieves <i>aria-label</i> from the <i>aria.close</i> property of the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
+        </p>
+
+        <h3>Next/Prev Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through interactive elements in the carousel.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates navigation.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates navigation.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Quick Navigation Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the active slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last slide link.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/galleria/AdvancedDoc.vue b/apps/labs/doc/galleria/AdvancedDoc.vue
new file mode 100644
index 000000000..9af2de13d
--- /dev/null
+++ b/apps/labs/doc/galleria/AdvancedDoc.vue
@@ -0,0 +1,512 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Advanced Galleria implementation with a custom UI.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria
+                ref="galleria"
+                v-model:activeIndex="activeIndex"
+                :value="images"
+                :numVisible="5"
+                containerStyle="max-width: 640px"
+                :showThumbnails="showThumbnails"
+                :showItemNavigators="true"
+                :showItemNavigatorsOnHover="true"
+                :circular="true"
+                :autoPlay="isAutoPlay"
+                :transitionInterval="3000"
+                :responsiveOptions="responsiveOptions"
+                :pt="{
+                    root: {
+                        class: [{ 'flex flex-col': fullScreen }]
+                    },
+                    content: {
+                        class: ['relative', { 'flex-1 justify-center': fullScreen }]
+                    },
+                    thumbnails: 'absolute w-full left-0 bottom-0'
+                }"
+            >
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <div class="grid gap-4 justify-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                    </div>
+                </template>
+                <template #footer>
+                    <div class="flex items-stretch bg-surface-950 text-white h-10">
+                        <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
+                            <i class="pi pi-th-large"></i>
+                        </button>
+                        <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
+                        <span v-if="images" class="flex items-center gap-4 ml-3">
+                            <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                            <span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
+                            <span class="text-sm">{{ images[activeIndex].alt }}</span>
+                        </span>
+                        <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
+                            <i :class="fullScreenIcon"></i>
+                        </button>
+                    </div>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeIndex: 0,
+            showThumbnails: false,
+            isAutoPlayActive: true,
+            fullScreen: false,
+            isAutoPlay: true,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria
+    ref="galleria"
+    v-model:activeIndex="activeIndex"
+    :value="images"
+    :numVisible="5"
+    containerStyle="max-width: 640px"
+    :showThumbnails="showThumbnails"
+    :showItemNavigators="true"
+    :showItemNavigatorsOnHover="true"
+    :circular="true"
+    :autoPlay="isAutoPlay"
+    :transitionInterval="3000"
+    :responsiveOptions="responsiveOptions"
+    :pt="{
+        root: {
+            class: [{ 'flex flex-col': fullScreen }]
+        },
+        content: {
+            class: ['relative', { 'flex-1 justify-center': fullScreen }]
+        },
+        thumbnails: 'absolute w-full left-0 bottom-0'
+    }"
+>
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
+    </template>
+    <template #thumbnail="slotProps">
+        <div class="grid gap-4 justify-center">
+            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+        </div>
+    </template>
+    <template #footer>
+        <div class="flex items-stretch bg-surface-950 text-white h-10">
+            <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
+                <i class="pi pi-th-large"></i>
+            </button>
+            <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
+            <span v-if="images" class="flex items-center gap-4 ml-3">
+                <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                <span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
+                <span class="text-sm">{{ images[activeIndex].alt }}</span>
+            </span>
+            <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
+                <i :class="fullScreenIcon"></i>
+            </button>
+        </div>
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria
+            ref="galleria"
+            v-model:activeIndex="activeIndex"
+            :value="images"
+            :numVisible="5"
+            containerStyle="max-width: 640px"
+            :showThumbnails="showThumbnails"
+            :showItemNavigators="true"
+            :showItemNavigatorsOnHover="true"
+            :circular="true"
+            :autoPlay="isAutoPlay"
+            :transitionInterval="3000"
+            :responsiveOptions="responsiveOptions"
+            :pt="{
+                root: {
+                    class: [{ 'flex flex-col': fullScreen }]
+                },
+                content: {
+                    class: ['relative', { 'flex-1 justify-center': fullScreen }]
+                },
+                thumbnails: 'absolute w-full left-0 bottom-0'
+            }"
+        >
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
+            </template>
+            <template #thumbnail="slotProps">
+                <div class="grid gap-4 justify-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </div>
+            </template>
+            <template #footer>
+                <div class="flex items-stretch bg-surface-950 text-white h-10">
+                    <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
+                        <i class="pi pi-th-large"></i>
+                    </button>
+                    <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
+                    <span v-if="images" class="flex items-center gap-4 ml-3">
+                        <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                        <span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
+                        <span class="text-sm">{{ images[activeIndex].alt }}</span>
+                    </span>
+                    <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
+                        <i :class="fullScreenIcon"></i>
+                    </button>
+                </div>
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeIndex: 0,
+            showThumbnails: false,
+            fullScreen: false,
+            isAutoPlay: true,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+        this.bindDocumentListeners();
+    },
+    methods: {
+        toggleAutoSlide() {
+            this.isAutoPlay = !this.isAutoPlay;
+        },
+        onThumbnailButtonClick() {
+            this.showThumbnails = !this.showThumbnails;
+        },
+        toggleFullScreen() {
+            if (this.fullScreen) {
+                this.closeFullScreen();
+            } else {
+                this.openFullScreen();
+            }
+        },
+        onFullScreenChange() {
+            this.fullScreen = !this.fullScreen;
+        },
+        openFullScreen() {
+            let elem = this.$refs.galleria.$el;
+
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+            } else if (elem.mozRequestFullScreen) {
+                /* Firefox */
+                elem.mozRequestFullScreen();
+            } else if (elem.webkitRequestFullscreen) {
+                /* Chrome, Safari & Opera */
+                elem.webkitRequestFullscreen();
+            } else if (elem.msRequestFullscreen) {
+                /* IE/Edge */
+                elem.msRequestFullscreen();
+            }
+        },
+        closeFullScreen() {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
+            }
+        },
+        bindDocumentListeners() {
+            document.addEventListener('fullscreenchange', this.onFullScreenChange);
+            document.addEventListener('mozfullscreenchange', this.onFullScreenChange);
+            document.addEventListener('webkitfullscreenchange', this.onFullScreenChange);
+            document.addEventListener('msfullscreenchange', this.onFullScreenChange);
+        },
+        unbindDocumentListeners() {
+            document.removeEventListener('fullscreenchange', this.onFullScreenChange);
+            document.removeEventListener('mozfullscreenchange', this.onFullScreenChange);
+            document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
+            document.removeEventListener('msfullscreenchange', this.onFullScreenChange);
+        }
+    },
+    computed: {
+        slideButtonIcon() {
+            return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
+        },
+        fullScreenIcon() {
+            return \`pi ${this.fullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria
+            ref="galleria"
+            v-model:activeIndex="activeIndex"
+            :value="images"
+            :numVisible="5"
+            containerStyle="max-width: 640px"
+            :showThumbnails="showThumbnails"
+            :showItemNavigators="true"
+            :showItemNavigatorsOnHover="true"
+            :circular="true"
+            :autoPlay="isAutoPlay"
+            :transitionInterval="3000"
+            :responsiveOptions="responsiveOptions"
+            :pt="{
+                root: {
+                    class: [{ 'flex flex-col': fullScreen }]
+                },
+                content: {
+                    class: ['relative', { 'flex-1 justify-center': fullScreen }]
+                },
+                thumbnails: 'absolute w-full left-0 bottom-0'
+            }"
+        >
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
+            </template>
+            <template #thumbnail="slotProps">
+                <div class="grid gap-4 justify-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </div>
+            </template>
+            <template #footer>
+                <div class="flex items-stretch bg-surface-950 text-white h-10">
+                    <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
+                        <i class="pi pi-th-large"></i>
+                    </button>
+                    <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
+                    <span v-if="images" class="flex items-center gap-4 ml-3">
+                        <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                        <span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
+                        <span class="text-sm">{{ images[activeIndex].alt }}</span>
+                    </span>
+                    <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
+                        <i :class="fullScreenIcon"></i>
+                    </button>
+                </div>
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+    bindDocumentListeners();
+});
+
+const galleria = ref();
+const images = ref();
+const activeIndex = ref(0);
+const showThumbnails = ref(false);
+const fullScreen = ref(false);
+const isAutoPlay = ref(true);
+
+const toggleAutoSlide = () => {
+    isAutoPlay.value  = !isAutoPlay.value ;
+};
+const onThumbnailButtonClick = () => {
+    showThumbnails.value  = !showThumbnails.value ;
+};
+
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+
+const toggleFullScreen = () => {
+    if (fullScreen.value ) {
+        closeFullScreen();
+    } else {
+        openFullScreen();
+    }
+};
+const onFullScreenChange = () => {
+    fullScreen.value  = !fullScreen.value ;
+};
+const openFullScreen = () =>{
+    let elem = galleria.value.$el;
+
+    if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+    } else if (elem.mozRequestFullScreen) {
+        /* Firefox */
+        elem.mozRequestFullScreen();
+    } else if (elem.webkitRequestFullscreen) {
+        /* Chrome, Safari & Opera */
+        elem.webkitRequestFullscreen();
+    } else if (elem.msRequestFullscreen) {
+        /* IE/Edge */
+        elem.msRequestFullscreen();
+    }
+};
+const closeFullScreen = () => {
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+    }
+};
+const bindDocumentListeners = () => {
+    document.addEventListener('fullscreenchange', onFullScreenChange);
+    document.addEventListener('mozfullscreenchange', onFullScreenChange);
+    document.addEventListener('webkitfullscreenchange', onFullScreenChange);
+    document.addEventListener('msfullscreenchange', onFullScreenChange);
+};
+const unbindDocumentListeners = () => {
+    document.removeEventListener('fullscreenchange', onFullScreenChange);
+    document.removeEventListener('mozfullscreenchange', onFullScreenChange);
+    document.removeEventListener('webkitfullscreenchange', onFullScreenChange);
+    document.removeEventListener('msfullscreenchange', onFullScreenChange);
+};
+
+const fullScreenIcon = computed(() => {
+    return \`pi \${fullScreen.value ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
+});
+const slideButtonIcon = computed(() => {
+    return \`pi \${isAutoPlay.value ? 'pi-pause' : 'pi-play'}\`;
+});
+<\/script>
+
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+            this.bindDocumentListeners();
+        },
+        toggleAutoSlide() {
+            this.isAutoPlay = !this.isAutoPlay;
+        },
+        onThumbnailButtonClick() {
+            this.showThumbnails = !this.showThumbnails;
+        },
+        toggleFullScreen() {
+            if (this.fullScreen) {
+                this.closeFullScreen();
+            } else {
+                this.openFullScreen();
+            }
+        },
+        onFullScreenChange() {
+            this.fullScreen = !this.fullScreen;
+        },
+        openFullScreen() {
+            let elem = this.$refs.galleria.$el;
+
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+            } else if (elem.mozRequestFullScreen) {
+                /* Firefox */
+                elem.mozRequestFullScreen();
+            } else if (elem.webkitRequestFullscreen) {
+                /* Chrome, Safari & Opera */
+                elem.webkitRequestFullscreen();
+            } else if (elem.msRequestFullscreen) {
+                /* IE/Edge */
+                elem.msRequestFullscreen();
+            }
+        },
+        closeFullScreen() {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
+            }
+        },
+        bindDocumentListeners() {
+            document.addEventListener('fullscreenchange', this.onFullScreenChange);
+            document.addEventListener('mozfullscreenchange', this.onFullScreenChange);
+            document.addEventListener('webkitfullscreenchange', this.onFullScreenChange);
+            document.addEventListener('msfullscreenchange', this.onFullScreenChange);
+        },
+        unbindDocumentListeners() {
+            document.removeEventListener('fullscreenchange', this.onFullScreenChange);
+            document.removeEventListener('mozfullscreenchange', this.onFullScreenChange);
+            document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
+            document.removeEventListener('msfullscreenchange', this.onFullScreenChange);
+        }
+    },
+    computed: {
+        slideButtonIcon() {
+            return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
+        },
+        fullScreenIcon() {
+            return `pi ${this.fullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/AutoPlayDoc.vue b/apps/labs/doc/galleria/AutoPlayDoc.vue
new file mode 100644
index 000000000..1ddf063a3
--- /dev/null
+++ b/apps/labs/doc/galleria/AutoPlayDoc.vue
@@ -0,0 +1,144 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+    :circular="true" :autoPlay="true" :transitionInterval="2000">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+            :circular="true" :autoPlay="true" :transitionInterval="2000">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+            :circular="true" :autoPlay="true" :transitionInterval="2000">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/BasicDoc.vue b/apps/labs/doc/galleria/BasicDoc.vue
new file mode 100644
index 000000000..1ed161743
--- /dev/null
+++ b/apps/labs/doc/galleria/BasicDoc.vue
@@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Galleria requires a <i>value</i> as a collection of images, <i>item</i> template for the higher resolution image and <i>thumbnail</i> template to display as a thumbnail.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/CaptionDoc.vue b/apps/labs/doc/galleria/CaptionDoc.vue
new file mode 100644
index 000000000..2ba3726e0
--- /dev/null
+++ b/apps/labs/doc/galleria/CaptionDoc.vue
@@ -0,0 +1,157 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+                <template #caption="slotProps">
+                    <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
+                    <p class="text-white">{{ slotProps.item.alt }}</p>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+    </template>
+    <template #caption="slotProps">
+        <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
+        <p class="text-white">{{ slotProps.item.alt }}</p>
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+            <template #caption="slotProps">
+                <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
+                <p class="text-white">{{ slotProps.item.alt }}</p>
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+            <template #caption="slotProps">
+                <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
+                <p class="text-white">{{ slotProps.item.alt }}</p>
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/ControlledDoc.vue b/apps/labs/doc/galleria/ControlledDoc.vue
new file mode 100644
index 000000000..525e23eae
--- /dev/null
+++ b/apps/labs/doc/galleria/ControlledDoc.vue
@@ -0,0 +1,185 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="mb-4">
+                <Button icon="pi pi-minus" @click="prev" />
+                <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
+            </div>
+
+            <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeIndex: 2,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<div>
+    <Button icon="pi pi-minus" @click="prev" />
+    <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
+</div>
+
+<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="mb-4">
+            <Button icon="pi pi-minus" @click="prev" />
+            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
+        </div>
+
+        <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeIndex: 2,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    },
+    methods: {
+        next() {
+            this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
+        },
+        prev() {
+            this.activeIndex = this.activeIndex === 0 ? 0 : this.activeIndex - 1;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="mb-4">
+            <Button icon="pi pi-minus" @click="prev" />
+            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
+        </div>
+
+        <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const activeIndex = ref(2);
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+
+const next = () => {
+    activeIndex.value = activeIndex.value === images.value.length - 1 ? images.value.length - 1 : activeIndex.value + 1;
+};
+const prev = () => {
+    activeIndex.value = activeIndex.value === 0 ? 0 : activeIndex.value - 1;
+};
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        },
+        next() {
+            this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
+        },
+        prev() {
+            this.activeIndex = this.activeIndex === 0 ? 0 : this.activeIndex - 1;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/ImportDoc.vue b/apps/labs/doc/galleria/ImportDoc.vue
new file mode 100644
index 000000000..30b4d7ce0
--- /dev/null
+++ b/apps/labs/doc/galleria/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Galleria from 'primevue/galleria';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/ResponsiveDoc.vue b/apps/labs/doc/galleria/ResponsiveDoc.vue
new file mode 100644
index 000000000..792f09a7f
--- /dev/null
+++ b/apps/labs/doc/galleria/ResponsiveDoc.vue
@@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/ThumbnailDoc.vue b/apps/labs/doc/galleria/ThumbnailDoc.vue
new file mode 100644
index 000000000..0dd8d74b0
--- /dev/null
+++ b/apps/labs/doc/galleria/ThumbnailDoc.vue
@@ -0,0 +1,224 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Thumbnails represent a smaller version of the actual content.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex flex-wrap gap-4 mb-8">
+                <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
+                    <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
+                    <label :for="option.label" class="ml-2"> {{ option.label }} </label>
+                </div>
+            </div>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <div class="grid gap-4 justify-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                    </div>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            position: 'bottom',
+            positionOptions: [
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                },
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ],
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #thumbnail="slotProps">
+        <div class="grid gap-4 justify-center">
+            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+        </div>
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
+                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
+                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
+            </div>
+        </div>
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <div class="grid gap-4 justify-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+                </div>
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            position: 'bottom',
+            positionOptions: [
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                },
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ],
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
+                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
+                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
+            </div>
+        </div>
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <div class="grid gap-4 justify-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+                </div>
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+const images = ref();
+const position = ref('bottom');
+const positionOptions = ref([
+    {
+        label: 'Bottom',
+        value: 'bottom'
+    },
+    {
+        label: 'Top',
+        value: 'top'
+    },
+    {
+        label: 'Left',
+        value: 'left'
+    },
+    {
+        label: 'Right',
+        value: 'right'
+    }
+]);
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/fullscreen/CustomContentDoc.vue b/apps/labs/doc/galleria/fullscreen/CustomContentDoc.vue
new file mode 100644
index 000000000..3d344cff2
--- /dev/null
+++ b/apps/labs/doc/galleria/fullscreen/CustomContentDoc.vue
@@ -0,0 +1,206 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-center">
+            <Galleria
+                v-model:activeIndex="activeIndex"
+                v-model:visible="displayCustom"
+                :value="images"
+                :responsiveOptions="responsiveOptions"
+                :numVisible="7"
+                containerStyle="max-width: 850px"
+                :circular="true"
+                :fullScreen="true"
+                :showItemNavigators="true"
+                :showThumbnails="false"
+            >
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+
+            <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
+                <div v-for="(image, index) of images" :key="index" class="col-span-4">
+                    <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+                </div>
+            </div>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeIndex: 0,
+            responsiveOptions: [
+                {
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+            ],
+            displayCustom: false,
+            code: {
+                basic: `
+<Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
+    containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
+            containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+
+        <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
+            <div v-for="(image, index) of images" :key="index" class="col-span-4">
+                <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeIndex: 0,
+            responsiveOptions: [
+                {
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+            ],
+            displayCustom: false
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    },
+    methods: {
+        imageClick(index) {
+            this.activeIndex = index;
+            this.displayCustom = true;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
+            containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+
+        <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
+            <div v-for="(image, index) of images" :key="index" class="col-span-4">
+                <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const activeIndex = ref(0);
+const responsiveOptions = ref([
+    {
+        breakpoint: '1024px',
+        numVisible: 5
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1
+    }
+]);
+const displayCustom = ref(false);
+
+const imageClick = (index) => {
+    activeIndex.value = index;
+    displayCustom.value = true;
+};
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        },
+        imageClick(index) {
+            this.activeIndex = index;
+            this.displayCustom = true;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/fullscreen/WithThumbnailsDoc.vue b/apps/labs/doc/galleria/fullscreen/WithThumbnailsDoc.vue
new file mode 100644
index 000000000..2d3c67bee
--- /dev/null
+++ b/apps/labs/doc/galleria/fullscreen/WithThumbnailsDoc.vue
@@ -0,0 +1,176 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Full screen mode is enabled by adding <i>fullScreen</i> property and and visibility is controlled with a binding to <i>visible</i> property.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-center">
+            <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+
+            <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1500px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '1024px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 2
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+            ],
+            displayBasic: false,
+            code: {
+                basic: `
+<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+    </template>
+</Galleria>
+
+<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+
+        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1500px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '1024px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 2
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+            ],
+            displayBasic: false
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+
+        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1500px',
+        numVisible: 5
+    },
+    {
+        breakpoint: '1024px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 2
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1
+    }
+]);
+const displayBasic = ref(false);
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+})
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue b/apps/labs/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
new file mode 100644
index 000000000..be67bf6a6
--- /dev/null
+++ b/apps/labs/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
@@ -0,0 +1,176 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Thumbnails can also be hidden in full screen mode.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-center">
+            <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+
+            <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1500px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '1024px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 2
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+            ],
+            displayBasic: false,
+            code: {
+                basic: `
+<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+    </template>
+</Galleria>
+
+<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+
+        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1500px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '1024px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 2
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+            ],
+            displayBasic: false
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+
+        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1500px',
+        numVisible: 5
+    },
+    {
+        breakpoint: '1024px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 2
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1
+    }
+]);
+const displayBasic = ref(false);
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+})
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/indicator/ClickEventDoc.vue b/apps/labs/doc/galleria/indicator/ClickEventDoc.vue
new file mode 100644
index 000000000..d39f13167
--- /dev/null
+++ b/apps/labs/doc/galleria/indicator/ClickEventDoc.vue
@@ -0,0 +1,102 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            code: {
+                basic: `
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
+    :showThumbnails="false" :showIndicators="true">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
+            :showThumbnails="false" :showIndicators="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
+            :showThumbnails="false" :showIndicators="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/indicator/HoverEventDoc.vue b/apps/labs/doc/galleria/indicator/HoverEventDoc.vue
new file mode 100644
index 000000000..a06a66617
--- /dev/null
+++ b/apps/labs/doc/galleria/indicator/HoverEventDoc.vue
@@ -0,0 +1,102 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            code: {
+                basic: `
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
+    :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
+            :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
+            :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/indicator/PositionDoc.vue b/apps/labs/doc/galleria/indicator/PositionDoc.vue
new file mode 100644
index 000000000..28c6ea89e
--- /dev/null
+++ b/apps/labs/doc/galleria/indicator/PositionDoc.vue
@@ -0,0 +1,192 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Indicators can be placed at four different sides using the <i>indicatorsPosition</i> property. In addition, enabling <i>showIndicatorsOnItem</i> moves the indicators inside the image section.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex flex-wrap gap-4 mb-8">
+                <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
+                    <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
+                    <label :for="option.label" class="ml-2"> {{ option.label }} </label>
+                </div>
+            </div>
+            <div class="flex items-center mb-8">
+                <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
+                <label for="inside_cbox" class="ml-2"> Inside </label>
+            </div>
+            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            inside: false,
+            position: 'bottom',
+            positionOptions: [
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                },
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+    :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
+                <RadioButton :value="option.value" />
+                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
+            </div>
+        </div>
+        <div class="flex items-center mb-8">
+            <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
+            <label for="inside_cbox" class="ml-2"> Inside </label>
+        </div>
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            inside: false,
+            position: 'bottom',
+            positionOptions: [
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                },
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
+                <RadioButton :value="option.value" />
+                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
+            </div>
+        </div>
+        <div class="flex items-center mb-8">
+            <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
+            <label for="inside_cbox" class="ml-2"> Inside </label>
+        </div>
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+            :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const inside = ref(false);
+const position = ref('bottom');
+const positionOptions = ref([
+    {
+        label: 'Bottom',
+        value: 'bottom'
+    },
+    {
+        label: 'Top',
+        value: 'top'
+    },
+    {
+        label: 'Left',
+        value: 'left'
+    },
+    {
+        label: 'Right',
+        value: 'right'
+    }
+]);
+
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/indicator/TemplateDoc.vue b/apps/labs/doc/galleria/indicator/TemplateDoc.vue
new file mode 100644
index 000000000..2c2935d0d
--- /dev/null
+++ b/apps/labs/doc/galleria/indicator/TemplateDoc.vue
@@ -0,0 +1,114 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Indicator content can be customized with the <i>indicator</i> property that takes an index as a parameter and expects content.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #indicator="{ index }">
+                    <span style="color: #ffffff; cursor: pointer">{{ index + 1 }}</span>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            code: {
+                basic: `
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+    :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #indicator="{ index }">
+        <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+            :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #indicator="{ index }">
+                <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+            :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #indicator="{ index }">
+                <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/navigator/HoverDoc.vue b/apps/labs/doc/galleria/navigator/HoverDoc.vue
new file mode 100644
index 000000000..32abd1b91
--- /dev/null
+++ b/apps/labs/doc/galleria/navigator/HoverDoc.vue
@@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Navigators are displayed on hover only if <i>showItemNavigatorsOnHover</i> is enabled.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/navigator/IndicatorsDoc.vue b/apps/labs/doc/galleria/navigator/IndicatorsDoc.vue
new file mode 100644
index 000000000..c8ebf0fbe
--- /dev/null
+++ b/apps/labs/doc/galleria/navigator/IndicatorsDoc.vue
@@ -0,0 +1,166 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Navigators and Indicators can be combined as well.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria
+                :value="images"
+                :responsiveOptions="responsiveOptions"
+                :numVisible="5"
+                :circular="true"
+                containerStyle="max-width: 640px"
+                :showItemNavigators="true"
+                :showThumbnails="false"
+                :showItemNavigatorsOnHover="true"
+                :showIndicators="true"
+            >
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '991px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+    :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+    </template>
+    <template #thumbnail="slotProps">
+            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+            :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+            </template>
+            <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '991px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+            :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+            </template>
+            <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '991px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/navigator/ItemThumbnailsDoc.vue b/apps/labs/doc/galleria/navigator/ItemThumbnailsDoc.vue
new file mode 100644
index 000000000..4b3647af7
--- /dev/null
+++ b/apps/labs/doc/galleria/navigator/ItemThumbnailsDoc.vue
@@ -0,0 +1,144 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Add <i>showItemNavigators</i> to display navigator elements and the left and right side.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+    :showItemNavigators="true">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+            :showItemNavigators="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+            :showItemNavigators="true">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue b/apps/labs/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
new file mode 100644
index 000000000..1fadfa98f
--- /dev/null
+++ b/apps/labs/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
@@ -0,0 +1,156 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Simple example with navigators only.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '991px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+    :showItemNavigators="true" :showThumbnails="false">
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+    </template>
+</Galleria>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+            :showItemNavigators="true" :showThumbnails="false">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '991px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+            :showItemNavigators="true" :showThumbnails="false">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '991px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>
+`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/iconfield/AccessibilityDoc.vue b/apps/labs/doc/iconfield/AccessibilityDoc.vue
new file mode 100644
index 000000000..59e583a38
--- /dev/null
+++ b/apps/labs/doc/iconfield/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>IconField and InputIcon do not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Components does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/iconfield/BasicDoc.vue b/apps/labs/doc/iconfield/BasicDoc.vue
new file mode 100644
index 000000000..27d68b4bf
--- /dev/null
+++ b/apps/labs/doc/iconfield/BasicDoc.vue
@@ -0,0 +1,89 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><i>IconField</i> wraps the <i>InputIcon</i> and the input field component.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Search" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value2" variant="filled" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            code: {
+                basic: `
+<IconField>
+    <InputIcon class="pi pi-search" />
+    <InputText v-model="value1" placeholder="Search" />
+</IconField>
+
+<IconField>
+    <InputText v-model="value2" variant="filled" />
+    <InputIcon class="pi pi-spin pi-spinner" />
+</IconField>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Search" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value2" variant="filled" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Search" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value2" variant="filled" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/iconfield/FloatLabelDoc.vue b/apps/labs/doc/iconfield/FloatLabelDoc.vue
new file mode 100644
index 000000000..79a3365da
--- /dev/null
+++ b/apps/labs/doc/iconfield/FloatLabelDoc.vue
@@ -0,0 +1,148 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="over_label" v-model="value1" autocomplete="off" />
+            </IconField>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
+            </IconField>
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="on_label" v-model="value3" autocomplete="off" />
+            </IconField>
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<FloatLabel>
+    <IconField>
+        <InputIcon class="pi pi-search" />
+        <InputText id="over_label" v-model="value1" autocomplete="off" />
+    </IconField>
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <IconField>
+        <InputIcon class="pi pi-search" />
+        <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
+    </IconField>
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <IconField>
+        <InputIcon class="pi pi-search" />
+        <InputText id="on_label" v-model="value3" autocomplete="off" />
+    </IconField>
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="over_label" v-model="value1" autocomplete="off" />
+            </IconField>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
+            </IconField>
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="on_label" v-model="value3" autocomplete="off" />
+            </IconField>
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="over_label" v-model="value1" autocomplete="off" />
+            </IconField>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
+            </IconField>
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText id="on_label" v-model="value3" autocomplete="off" />
+            </IconField>
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/iconfield/IftaLabelDoc.vue b/apps/labs/doc/iconfield/IftaLabelDoc.vue
new file mode 100644
index 000000000..4e4cc4aaa
--- /dev/null
+++ b/apps/labs/doc/iconfield/IftaLabelDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <IconField>
+                <InputIcon class="pi pi-user" />
+                <InputText id="username" v-model="value" autocomplete="off" variant="filled" />
+            </IconField>
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <IconField>
+        <InputIcon class="pi pi-user" />
+        <InputText id="username" v-model="value" variant="filled" />
+    </IconField>
+    <label for="username">Username</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <IconField>
+                <InputIcon class="pi pi-user" />
+                <InputText id="username" v-model="value" variant="filled" />
+            </IconField>
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <IconField>
+                <InputIcon class="pi pi-user" />
+                <InputText id="username" v-model="value" variant="filled" />
+            </IconField>
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/iconfield/ImportDoc.vue b/apps/labs/doc/iconfield/ImportDoc.vue
new file mode 100644
index 000000000..61231b855
--- /dev/null
+++ b/apps/labs/doc/iconfield/ImportDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/iconfield/SizesDoc.vue b/apps/labs/doc/iconfield/SizesDoc.vue
new file mode 100644
index 000000000..9fe9f69c7
--- /dev/null
+++ b/apps/labs/doc/iconfield/SizesDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IconField is compatible with the size setting of the input field.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Small" size="small" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value2" placeholder="Normal" />
+            <InputIcon class="pi pi-user" />
+        </IconField>
+
+        <IconField>
+            <InputIcon class="pi pi-lock" />
+            <InputText v-model="value3" placeholder="Large" size="large" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<IconField>
+    <InputIcon class="pi pi-search" />
+    <InputText v-model="value1" placeholder="Small" size="small" />
+</IconField>
+
+<IconField>
+    <InputIcon class="pi pi-search" />
+    <InputText v-model="value2" placeholder="Normal" />
+</IconField>
+
+<IconField>
+    <InputText v-model="value3" placeholder="Large" size="large" />
+    <InputIcon class="pi pi-spin pi-spinner" />
+</IconField>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Small" size="small" />
+        </IconField>
+
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value2" placeholder="Normal" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value3" placeholder="Large" size="large" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Small" size="small" />
+        </IconField>
+
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value2" placeholder="Normal" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value3" placeholder="Large" size="large" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/iconfield/TemplateDoc.vue b/apps/labs/doc/iconfield/TemplateDoc.vue
new file mode 100644
index 000000000..ffc53ab53
--- /dev/null
+++ b/apps/labs/doc/iconfield/TemplateDoc.vue
@@ -0,0 +1,92 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content inside an InputIcon is defined as children.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IconField>
+            <InputIcon>
+                <svg width="14" height="16" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--p-primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--p-text-color)"
+                    />
+                </svg>
+            </InputIcon>
+            <InputText v-model="value" placeholder="Search" />
+        </IconField>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IconField>
+    <InputIcon>
+        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="..." fill="var(--p-primary-color)" />
+            <path d="..." fill="var(--p-text-color)" />
+        </svg>
+    </InputIcon>
+    <InputText v-model="value" placeholder="Search" />
+</IconField>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IconField>
+            <InputIcon>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="..." fill="var(--p-primary-color)" />
+                    <path d="..." fill="var(--p-text-color)" />
+                </svg>
+            </InputIcon>
+            <InputText v-model="value" placeholder="Search" />
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IconField>
+            <InputIcon>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="..." fill="var(--p-primary-color)" />
+                    <path d="..." fill="var(--p-text-color)" />
+                </svg>
+            </InputIcon>
+            <InputText v-model="value" placeholder="Search" />
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/icons/BasicDoc.vue b/apps/labs/doc/icons/BasicDoc.vue
new file mode 100644
index 000000000..612e6a40e
--- /dev/null
+++ b/apps/labs/doc/icons/BasicDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeIcons use the <i>pi pi-&#123;icon&#125;</i> syntax such as <i>pi pi-check</i>. A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-4">
+        <i class="pi pi-check"></i>
+        <i class="pi pi-times"></i>
+        <span class="pi pi-search"></span>
+        <span class="pi pi-user"></span>
+    </div>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<i class="pi pi-check"></i>
+<i class="pi pi-times"></i>
+<span class="pi pi-search"></span>
+<span class="pi pi-user"></span>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/icons/ColorDoc.vue b/apps/labs/doc/icons/ColorDoc.vue
new file mode 100644
index 000000000..7153d5343
--- /dev/null
+++ b/apps/labs/doc/icons/ColorDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Icon color is defined with the <i>color</i> property which is inherited from parent by default.</p>
+    </DocSectionText>
+    <div class="card flex justify-center items-center gap-4">
+        <i class="pi pi-check" style="color: slateblue"></i>
+        <i class="pi pi-times" style="color: green"></i>
+        <i class="pi pi-search" style="color: 'var(--p-primary-color)'"></i>
+        <i class="pi pi-user" style="color: #708090"></i>
+    </div>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<i class="pi pi-check" style="color: slateblue"></i>
+<i class="pi pi-times" style="color: green"></i>
+<i class="pi pi-search" style="color: 'var(--p-primary-color)'"></i>
+<i class="pi pi-user" style="color: #708090"></i>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/icons/ConstantsDoc.vue b/apps/labs/doc/icons/ConstantsDoc.vue
new file mode 100644
index 000000000..6c7315daf
--- /dev/null
+++ b/apps/labs/doc/icons/ConstantsDoc.vue
@@ -0,0 +1,58 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Constants API is available to reference icons easily when used programmatically.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+import { PrimeIcons } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    items: [
+                        { label: 'New', icon: PrimeIcons.PLUS },
+                        { label: 'Open', icon: PrimeIcons.DOWNLOAD }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+</template>
+
+<script>
+import { PrimeIcons } from '@primevue/core/api';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    items: [
+                        { label: 'New', icon: PrimeIcons.PLUS },
+                        { label: 'Open', icon: PrimeIcons.DOWNLOAD }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/icons/DownloadDoc.vue b/apps/labs/doc/icons/DownloadDoc.vue
new file mode 100644
index 000000000..1f4138a25
--- /dev/null
+++ b/apps/labs/doc/icons/DownloadDoc.vue
@@ -0,0 +1,20 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+npm install primeicons
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/icons/FigmaDoc.vue b/apps/labs/doc/icons/FigmaDoc.vue
new file mode 100644
index 000000000..26eb2b320
--- /dev/null
+++ b/apps/labs/doc/icons/FigmaDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeIcons library is now available on <a href="https://www.figma.com/community/file/1354343849355792252/primeicons" target="_blank" rel="noopener noreferrer">Figma Community</a>. By adding them as a library, you can easily use these
+            icons in your designs.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/icons/ImportDoc.vue b/apps/labs/doc/icons/ImportDoc.vue
new file mode 100644
index 000000000..e8195d598
--- /dev/null
+++ b/apps/labs/doc/icons/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>CSS file of the icon library needs to be imported in <i>styles.scss</i> of your application.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: "\nimport 'primeicons/primeicons.css'\n"
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/icons/ListDoc.vue b/apps/labs/doc/icons/ListDoc.vue
new file mode 100644
index 000000000..6383aef8c
--- /dev/null
+++ b/apps/labs/doc/icons/ListDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Here is the full list of PrimeIcons. More icons will be added periodically and you may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
+    </DocSectionText>
+
+    <InputText v-model="filter" class="w-full p-4 mt-4 mb-6" placeholder="Search an icon" />
+
+    <div class="card">
+        <div class="grid grid-cols-12 gap-4 text-center">
+            <div v-for="icon of filteredIcons" :key="icon.properties.name" class="col-span-12 md:col-span-2 mb-8">
+                <i :class="'text-2xl mb-4 text-surface-500 dark:text-surface-400 pi pi-' + icon.properties.name"></i>
+                <div>pi-{{ icon.properties.name }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { IconService } from '@/service/IconService';
+
+export default {
+    data() {
+        return {
+            icons: null,
+            filter: null
+        };
+    },
+    mounted() {
+        IconService.getIcons().then((data) => {
+            let d_data = data;
+            let d_icons = d_data.filter((value) => {
+                return value.icon.tags.indexOf('deprecate') === -1;
+            });
+
+            d_icons.sort((icon1, icon2) => {
+                if (icon1.properties.name < icon2.properties.name) return -1;
+                else if (icon1.properties.name < icon2.properties.name) return 1;
+                else return 0;
+            });
+
+            this.icons = d_icons;
+        });
+    },
+    computed: {
+        filteredIcons() {
+            let sanitizedInput = this.filter?.replace(/[^\w\s]/gi, '').replace(/\s/g, '');
+
+            if (this.filter)
+                return this.icons.filter((icon) => {
+                    return (
+                        icon.icon.tags.some((tag) =>
+                            tag
+                                .replace(/[^\w\s]/gi, '')
+                                .replace(/\s/g, '')
+                                .includes(sanitizedInput.toLowerCase())
+                        ) ||
+                        icon.properties.name
+                            .replace(/[^\w\s]/gi, '')
+                            .replace(/\s/g, '')
+                            .toLowerCase()
+                            .includes(sanitizedInput.toLowerCase())
+                    );
+                });
+            else return this.icons;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/icons/SizeDoc.vue b/apps/labs/doc/icons/SizeDoc.vue
new file mode 100644
index 000000000..60614aa90
--- /dev/null
+++ b/apps/labs/doc/icons/SizeDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Size of an icon is controlled with the font-size property of the element.</p>
+    </DocSectionText>
+    <div class="card flex justify-center items-center gap-4">
+        <i class="pi pi-check" style="font-size: 1rem"></i>
+        <i class="pi pi-times" style="font-size: 1.5rem"></i>
+        <i class="pi pi-search" style="font-size: 2rem"></i>
+        <i class="pi pi-user" style="font-size: 2.5rem"></i>
+    </div>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<i class="pi pi-check" style="font-size: 1rem"></i>
+<i class="pi pi-times" style="font-size: 1.5rem"></i>
+<i class="pi pi-search" style="font-size: 2rem"></i>
+<i class="pi pi-user" style="font-size: 2.5rem"></i>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/icons/SpinDoc.vue b/apps/labs/doc/icons/SpinDoc.vue
new file mode 100644
index 000000000..8cbc3bc45
--- /dev/null
+++ b/apps/labs/doc/icons/SpinDoc.vue
@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Special <i>pi-spin</i> class applies infinite rotation to an icon.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-4">
+        <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+        <i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
+    </div>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/iftalabel/AccessibilityDoc.vue b/apps/labs/doc/iftalabel/AccessibilityDoc.vue
new file mode 100644
index 000000000..05d727668
--- /dev/null
+++ b/apps/labs/doc/iftalabel/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>IftaLabel does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/iftalabel/BasicDoc.vue b/apps/labs/doc/iftalabel/BasicDoc.vue
new file mode 100644
index 000000000..680182f42
--- /dev/null
+++ b/apps/labs/doc/iftalabel/BasicDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used by wrapping the input and its label.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <InputText id="username" v-model="value" />
+    <label for="username">Username</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/iftalabel/ImportDoc.vue b/apps/labs/doc/iftalabel/ImportDoc.vue
new file mode 100644
index 000000000..c54ef52e4
--- /dev/null
+++ b/apps/labs/doc/iftalabel/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import IftaLabel from 'primevue/iftalabel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/iftalabel/InvalidDoc.vue b/apps/labs/doc/iftalabel/InvalidDoc.vue
new file mode 100644
index 000000000..8c2075a39
--- /dev/null
+++ b/apps/labs/doc/iftalabel/InvalidDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the form element is invalid, the label is also highlighted.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<IftaLabel>
+    <InputText id="username" v-model="value" :invalid="!value" />
+    <label for="username">Username</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/image/AccessibilityDoc.vue b/apps/labs/doc/image/AccessibilityDoc.vue
new file mode 100644
index 000000000..9fabe7c72
--- /dev/null
+++ b/apps/labs/doc/image/AccessibilityDoc.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, with <i>previewButtonProps</i>
+            you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
+        </p>
+
+        <p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p>
+
+        <p>
+            Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API as <i>aria-label</i>.
+        </p>
+
+        <h3>ButtonBar Keyboard Support</h3>
+        <p>When preview is activated, close button receives the initial focus.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through button bar.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>esc</i>
+                        </td>
+                        <td>Closes the image preview.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/image/BasicDoc.vue b/apps/labs/doc/image/BasicDoc.vue
new file mode 100644
index 000000000..ab326950d
--- /dev/null
+++ b/apps/labs/doc/image/BasicDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Image is used similar to the standard <i>img</i> element.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Image src="/image.jpg" alt="Image" width="250" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/image/ImportDoc.vue b/apps/labs/doc/image/ImportDoc.vue
new file mode 100644
index 000000000..d8edd4cd3
--- /dev/null
+++ b/apps/labs/doc/image/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Image from 'primevue/image';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/image/PreviewDoc.vue b/apps/labs/doc/image/PreviewDoc.vue
new file mode 100644
index 000000000..b71b3467c
--- /dev/null
+++ b/apps/labs/doc/image/PreviewDoc.vue
@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+    </div>
+
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Image src="/image.jpg" alt="Image" width="250" preview />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/image/TemplateDoc.vue b/apps/labs/doc/image/TemplateDoc.vue
new file mode 100644
index 000000000..b1ccba7ef
--- /dev/null
+++ b/apps/labs/doc/image/TemplateDoc.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            An eye icon is displayed by default when the image is hovered in preview mode, use the <i>previewicon</i> slot for custom content. In addition, the <i>image</i> and <i>preview</i> slots are available to define the thumbnail and detailed
+            image respectively.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Image alt="Image" preview>
+            <template #previewicon>
+                <i class="pi pi-search"></i>
+            </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
+        </Image>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Image alt="Image" preview>
+    <template #previewicon>
+        <i class="pi pi-search"></i>
+    </template>
+    <template #image>
+        <img src="/thumbnail.jpg" alt="image" />
+    </template>
+    <template #preview="slotProps">
+        <img src="/image.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+    </template>
+</Image>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Image alt="Image" preview>
+            <template #previewicon>
+                <i class="pi pi-search"></i>
+            </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
+        </Image>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Image alt="Image" preview>
+            <template #previewicon>
+                <i class="pi pi-search"></i>
+            </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
+        </Image>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/imagecompare/AccessibilityDoc.vue b/apps/labs/doc/imagecompare/AccessibilityDoc.vue
new file mode 100644
index 000000000..1ca1094f1
--- /dev/null
+++ b/apps/labs/doc/imagecompare/AccessibilityDoc.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>ImageComponent component uses a native range <i>slider</i> internally. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the component.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">left arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Decrements the value.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">right arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Increments the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Set the minimum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Set the maximum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page up</i></td>
+                        <td>Increments the value by 10 steps.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page down</i></td>
+                        <td>Decrements the value by 10 steps.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="image_label">Compare Images</span>
+<ImageCompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
+    ...
+</ImageCompare>
+
+<ImageCompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
+    ...
+</ImageCompare>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/imagecompare/BasicDoc.vue b/apps/labs/doc/imagecompare/BasicDoc.vue
new file mode 100644
index 000000000..0cb3dfe0b
--- /dev/null
+++ b/apps/labs/doc/imagecompare/BasicDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Images are defined using templating with <i>left</i> and <i>right</i> slots. Use the <i>style</i> or <i>class</i> properties to define the size of the container.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ImageCompare class="shadow-lg rounded-2xl">
+            <template #left>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ImageCompare class="shadow-lg rounded-2xl">
+    <template #left>
+        <img src="~/assets/images/island1.jpg" />
+    </template>
+    <template #right>
+        <img src="~/assets/images/island2.jpg" />
+    </template>
+</ImageCompare>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ImageCompare class="shadow-lg rounded-2xl">
+            <template #left>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ImageCompare class="shadow-lg rounded-2xl">
+            <template #left>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/imagecompare/ImportDoc.vue b/apps/labs/doc/imagecompare/ImportDoc.vue
new file mode 100644
index 000000000..571ddb772
--- /dev/null
+++ b/apps/labs/doc/imagecompare/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ImageCompare from 'primevue/imagecompare';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/imagecompare/ResponsiveDoc.vue b/apps/labs/doc/imagecompare/ResponsiveDoc.vue
new file mode 100644
index 000000000..c90516e0d
--- /dev/null
+++ b/apps/labs/doc/imagecompare/ResponsiveDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Apply responsive styles to the container element to optimize display per screen size.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ImageCompare class="sm:!w-96 shadow-lg rounded-2xl">
+            <template #left>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ImageCompare class="sm:!w-96 shadow-lg rounded-2xl">
+    <template #left>
+        <img src="~/assets/images/island1.jpg" />
+    </template>
+    <template #right>
+        <img src="~/assets/images/island2.jpg" />
+    </template>
+</ImageCompare>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ImageCompare class="sm:!w-96 shadow-lg rounde-2xl">
+            <template #left>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ImageCompare class="sm:!w-96 shadow-lg">
+            <template #left>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inplace/AccessibilityDoc.vue b/apps/labs/doc/inplace/AccessibilityDoc.vue
new file mode 100644
index 000000000..5a3bc964a
--- /dev/null
+++ b/apps/labs/doc/inplace/AccessibilityDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Inplace component defines <i>aria-live</i> as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.</p>
+
+        <h3>View Mode Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Switches to content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/inplace/BasicDoc.vue b/apps/labs/doc/inplace/BasicDoc.vue
new file mode 100644
index 000000000..e8a59a792
--- /dev/null
+++ b/apps/labs/doc/inplace/BasicDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><i>Inplace</i> component requires <i>display</i> and <i>content</i> templates to define the content of each state.</p>
+    </DocSectionText>
+    <div class="card">
+        <Inplace>
+            <template #display> View Content </template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </template>
+        </Inplace>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Inplace>
+    <template #display> View Content </template>
+    <template #content>
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </template>
+</Inplace>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Inplace>
+            <template #display> View Content </template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Inplace>
+            <template #display> View Content </template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inplace/ImageDoc.vue b/apps/labs/doc/inplace/ImageDoc.vue
new file mode 100644
index 000000000..9b35aecb3
--- /dev/null
+++ b/apps/labs/doc/inplace/ImageDoc.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Any content such as an image can be placed inside an Inplace.</p>
+    </DocSectionText>
+    <div class="card">
+        <Inplace>
+            <template #display>
+                <span class="inline-flex items-center gap-2">
+                    <span class="pi pi-image"></span>
+                    <span>View Photo</span>
+                </span>
+            </template>
+            <template #content>
+                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
+            </template>
+        </Inplace>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Inplace>
+    <template #display>
+        <span class="inline-flex items-center gap-2">
+            <span class="pi pi-image"></span>
+            <span>View Photo</span>
+        </span>
+    </template>
+    <template #content>
+        <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
+    </template>
+</Inplace>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Inplace>
+            <template #display>
+                <span class="inline-flex items-center gap-2">
+                    <span class="pi pi-image"></span>
+                    <span>View Photo</span>
+                </span>
+            </template>
+            <template #content>
+                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
+            </template>
+        </Inplace>
+    </div>
+</template>
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Inplace>
+            <template #display>
+                <span class="inline-flex items-center gap-2">
+                    <span class="pi pi-image"></span>
+                    <span>View Photo</span>
+                </span>
+            </template>
+            <template #content>
+                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inplace/ImportDoc.vue b/apps/labs/doc/inplace/ImportDoc.vue
new file mode 100644
index 000000000..2bac32b80
--- /dev/null
+++ b/apps/labs/doc/inplace/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Inplace from 'primevue/inplace';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inplace/InputDoc.vue b/apps/labs/doc/inplace/InputDoc.vue
new file mode 100644
index 000000000..81ffb0b8c
--- /dev/null
+++ b/apps/labs/doc/inplace/InputDoc.vue
@@ -0,0 +1,94 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>closeCallback</i> switches the state back to display mode when called from an event.</p>
+    </DocSectionText>
+    <div class="card">
+        <Inplace>
+            <template #display>
+                {{ text || 'Click to Edit' }}
+            </template>
+            <template #content="{ closeCallback }">
+                <span class="inline-flex items-center gap-2">
+                    <InputText v-model="text" autofocus />
+                    <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
+                </span>
+            </template>
+        </Inplace>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            text: null,
+            code: {
+                basic: `
+<Inplace>
+    <template #display>
+        {{ text || 'Click to Edit' }}
+    </template>
+    <template #content="{ closeCallback }">
+        <span class="inline-flex items-center gap-2">
+            <InputText v-model="text" autofocus />
+            <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
+        </span>
+    </template>
+</Inplace>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Inplace>
+            <template #display>
+                {{ text || 'Click to Edit' }}
+            </template>
+            <template #content="{ closeCallback }">
+                <span class="inline-flex items-center gap-2">
+                    <InputText v-model="text" autofocus />
+                    <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
+                </span>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            text: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Inplace>
+            <template #display>
+                {{ text || 'Click to Edit' }}
+            </template>
+            <template #content="{ closeCallback }">
+                <span class="inline-flex items-center gap-2">
+                    <InputText v-model="text" autofocus />
+                    <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
+                </span>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const text = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inplace/LazyDoc.vue b/apps/labs/doc/inplace/LazyDoc.vue
new file mode 100644
index 000000000..0155c5287
--- /dev/null
+++ b/apps/labs/doc/inplace/LazyDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>open</i> event is used to initialize the content such as loading data in a lazy manner.</p>
+    </DocSectionText>
+    <div class="card">
+        <Inplace @open="loadData">
+            <template #display> View Data </template>
+            <template #content>
+                <DataTable :value="products">
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </template>
+        </Inplace>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<Inplace @open="loadData">
+    <template #display> View Data </template>
+    <template #content>
+        <DataTable :value="products">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </template>
+</Inplace>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Inplace @open="loadData">
+            <template #display> View Data </template>
+            <template #content>
+                <DataTable :value="products">
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script>
+import {ProductService} from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    methods: {
+        loadData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Inplace @open="loadData">
+            <template #display> View Data </template>
+            <template #content>
+                <DataTable :value="products">
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import {ProductService} from "@/service/ProductService";
+
+
+const products = ref();
+const loadData = () => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        loadData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputgroup/AccessibilityDoc.vue b/apps/labs/doc/inputgroup/AccessibilityDoc.vue
new file mode 100644
index 000000000..a9a17185d
--- /dev/null
+++ b/apps/labs/doc/inputgroup/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>InputGroup and InputGroupAddon do not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/inputgroup/BasicDoc.vue b/apps/labs/doc/inputgroup/BasicDoc.vue
new file mode 100644
index 000000000..15b4cb7ca
--- /dev/null
+++ b/apps/labs/doc/inputgroup/BasicDoc.vue
@@ -0,0 +1,176 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A group is created by wrapping the input and add-ons with the <i>InputGroup</i> component. Each add-on element is defined as a child of <i>InputGroupAddon</i> component.</p>
+    </DocSectionText>
+    <div class="card grid grid-cols-1 md:grid-cols-2 gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <InputText v-model="text1" placeholder="Username" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputNumber v-model="number" placeholder="Price" />
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <InputText v-model="text2" placeholder="Website" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-map"></i>
+            </InputGroupAddon>
+            <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
+        </InputGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            text1: null,
+            text2: null,
+            number: null,
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<InputGroup>
+    <InputGroupAddon>
+        <i class="pi pi-user"></i>
+    </InputGroupAddon>
+    <InputText v-model="text1" placeholder="Username" />
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>$</InputGroupAddon>
+    <InputNumber v-model="number" placeholder="Price" />
+    <InputGroupAddon>.00</InputGroupAddon>
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>www</InputGroupAddon>
+    <InputText v-model="text2" placeholder="Website" />
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>
+        <i class="pi pi-map"></i>
+    </InputGroupAddon>
+    <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
+</InputGroup>
+`,
+                options: `
+<template>
+    <div class="card grid grid-cols-1 md:grid-cols-2 gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <InputText v-model="text1" placeholder="Username" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputNumber v-model="number" placeholder="Price" />
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <InputText v-model="text2" placeholder="Website" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-map"></i>
+            </InputGroupAddon>
+            <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
+        </InputGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            text1: null,
+            text2: null,
+            number: null,
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card grid grid-cols-1 md:grid-cols-2 gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <InputText v-model="text1" placeholder="Username" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputNumber v-model="number" placeholder="Price" />
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <InputText v-model="text2" placeholder="Website" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-map"></i>
+            </InputGroupAddon>
+            <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
+        </InputGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const text1 = ref(null);
+const text2 = ref(null);
+const number = ref(null);
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputgroup/ButtonDoc.vue b/apps/labs/doc/inputgroup/ButtonDoc.vue
new file mode 100644
index 000000000..fb6ffcac4
--- /dev/null
+++ b/apps/labs/doc/inputgroup/ButtonDoc.vue
@@ -0,0 +1,153 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons can be placed at either side of an input element.</p>
+    </DocSectionText>
+    <div class="card flex flex-col md:flex-row gap-4">
+        <InputGroup>
+            <Button label="Search" />
+            <InputText placeholder="Keyword" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputText placeholder="Keyword" />
+            <InputGroupAddon>
+                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
+            </InputGroupAddon>
+        </InputGroup>
+        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Button icon="pi pi-check" severity="secondary" />
+            </InputGroupAddon>
+            <InputText placeholder="Vote" />
+            <InputGroupAddon>
+                <Button icon="pi pi-times" severity="secondary" />
+            </InputGroupAddon>
+        </InputGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }],
+            code: {
+                basic: `
+<InputGroup>
+    <Button label="Search" />
+    <InputText placeholder="Keyword" />
+</InputGroup>
+
+<InputGroup>
+    <InputText placeholder="Keyword" />
+    <InputGroupAddon>
+        <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
+    </InputGroupAddon>
+</InputGroup>
+<Menu ref="menu" :model="items" popup class="!min-w-fit" />
+
+<InputGroup>
+    <InputGroupAddon>
+        <Button icon="pi pi-check" severity="secondary" />
+    </InputGroupAddon>
+    <InputText placeholder="Vote" />
+    <InputGroupAddon>
+        <Button icon="pi pi-times" severity="secondary" />
+    </InputGroupAddon>
+</InputGroup>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col md:flex-row gap-4">
+        <InputGroup>
+            <Button label="Search" />
+            <InputText placeholder="Keyword" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputText placeholder="Keyword" />
+            <InputGroupAddon>
+                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
+            </InputGroupAddon>
+        </InputGroup>
+        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Button icon="pi pi-check" severity="secondary" />
+            </InputGroupAddon>
+            <InputText placeholder="Vote" />
+            <InputGroupAddon>
+                <Button icon="pi pi-times" severity="secondary" />
+            </InputGroupAddon>
+        </InputGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }],
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col md:flex-row gap-4">
+        <InputGroup>
+            <Button label="Search" />
+            <InputText placeholder="Keyword" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputText placeholder="Keyword" />
+            <InputGroupAddon>
+                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
+            </InputGroupAddon>
+        </InputGroup>
+        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Button icon="pi pi-check" severity="secondary" />
+            </InputGroupAddon>
+            <InputText placeholder="Vote" />
+            <InputGroupAddon>
+                <Button icon="pi pi-times" severity="secondary" />
+            </InputGroupAddon>
+        </InputGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const menu = ref();
+const items = ref([{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }]);
+
+const toggle = (event) => {
+    menu.value.toggle(event);
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputgroup/CheckboxDoc.vue b/apps/labs/doc/inputgroup/CheckboxDoc.vue
new file mode 100644
index 000000000..3287463a9
--- /dev/null
+++ b/apps/labs/doc/inputgroup/CheckboxDoc.vue
@@ -0,0 +1,151 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
+    </DocSectionText>
+    <div class="card flex flex-col md:flex-row gap-4">
+        <InputGroup>
+            <InputText placeholder="Price" />
+            <InputGroupAddon>
+                <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
+            </InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Checkbox v-model="checked1" :binary="true" />
+            </InputGroupAddon>
+            <InputText placeholder="Username" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Checkbox v-model="checked2" :binary="true" />
+            </InputGroupAddon>
+            <InputText placeholder="Website" />
+            <InputGroupAddon>
+                <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
+            </InputGroupAddon>
+        </InputGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: false,
+            radioValue1: '',
+            radioValue2: '',
+            code: {
+                basic: `
+<InputGroup>
+    <InputText placeholder="Price" />
+    <InputGroupAddon>
+        <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
+    </InputGroupAddon>
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>
+        <Checkbox v-model="checked1" :binary="true" />
+    </InputGroupAddon>
+    <InputText placeholder="Username" />
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>
+        <Checkbox v-model="checked2" :binary="true" />
+    </InputGroupAddon>
+    <InputText placeholder="Website" />
+    <InputGroupAddon>
+        <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
+    </InputGroupAddon>
+</InputGroup>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col md:flex-row gap-4">
+        <InputGroup>
+            <InputText placeholder="Price" />
+            <InputGroupAddon>
+                <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
+            </InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Checkbox v-model="checked1" :binary="true" />
+            </InputGroupAddon>
+            <InputText placeholder="Username" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Checkbox v-model="checked2" :binary="true" />
+            </InputGroupAddon>
+            <InputText placeholder="Website" />
+            <InputGroupAddon>
+                <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
+            </InputGroupAddon>
+        </InputGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: false,
+            radioValue1: '',
+            radioValue2: ''
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col md:flex-row gap-4">
+        <InputGroup>
+            <InputText placeholder="Price" />
+            <InputGroupAddon>
+                <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
+            </InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Checkbox v-model="checked1" :binary="true" />
+            </InputGroupAddon>
+            <InputText placeholder="Username" />
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>
+                <Checkbox v-model="checked2" :binary="true" />
+            </InputGroupAddon>
+            <InputText placeholder="Website" />
+            <InputGroupAddon>
+                <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
+            </InputGroupAddon>
+        </InputGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked1 = ref(false);
+const checked2 = ref(false);
+const radioValue1 = ref('');
+const radioValue2 = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputgroup/FloatLabelDoc.vue b/apps/labs/doc/inputgroup/FloatLabelDoc.vue
new file mode 100644
index 000000000..da8395861
--- /dev/null
+++ b/apps/labs/doc/inputgroup/FloatLabelDoc.vue
@@ -0,0 +1,160 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-col md:items-end md:flex-row gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <FloatLabel>
+                <InputText id="over_label" v-model="value1" />
+                <label for="over_label">Over Label</label>
+            </FloatLabel>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <FloatLabel variant="in">
+                <InputText id="in_label" v-model="value2" />
+                <label for="in_label">In Label</label>
+            </FloatLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <FloatLabel variant="on">
+                <InputText id="on_label" v-model="value3" />
+                <label for="on_label">On Label</label>
+            </FloatLabel>
+        </InputGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputGroup>
+    <InputGroupAddon>
+        <i class="pi pi-user"></i>
+    </InputGroupAddon>
+    <FloatLabel>
+        <InputText id="over_label" v-model="value1" />
+        <label for="over_label">Over Label</label>
+    </FloatLabel>
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>$</InputGroupAddon>
+    <FloatLabel variant="in">
+        <InputText id="in_label" v-model="value2" />
+        <label for="in_label">In Label</label>
+    </FloatLabel>
+    <InputGroupAddon>.00</InputGroupAddon>
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>www</InputGroupAddon>
+    <FloatLabel variant="on">
+        <InputText id="on_label" v-model="value3" />
+        <label for="on_label">On Label</label>
+    </FloatLabel>
+</InputGroup>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col md:items-end md:flex-row gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <FloatLabel>
+                <InputText id="over_label" v-model="value1" />
+                <label for="over_label">Over Label</label>
+            </FloatLabel>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <FloatLabel variant="in">
+                <InputText id="in_label" v-model="value2" />
+                <label for="in_label">In Label</label>
+            </FloatLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <FloatLabel variant="on">
+                <InputText id="on_label" v-model="value3" />
+                <label for="on_label">On Label</label>
+            </FloatLabel>
+        </InputGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col md:items-end md:flex-row gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <FloatLabel>
+                <InputText id="over_label" v-model="value1" />
+                <label for="over_label">Over Label</label>
+            </FloatLabel>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <FloatLabel variant="in">
+                <InputText id="in_label" v-model="value2" />
+                <label for="in_label">In Label</label>
+            </FloatLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <FloatLabel variant="on">
+                <InputText id="on_label" v-model="value3" />
+                <label for="on_label">On Label</label>
+            </FloatLabel>
+        </InputGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputgroup/IftaLabelDoc.vue b/apps/labs/doc/inputgroup/IftaLabelDoc.vue
new file mode 100644
index 000000000..14b9e2746
--- /dev/null
+++ b/apps/labs/doc/inputgroup/IftaLabelDoc.vue
@@ -0,0 +1,86 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputGroup class="md:w-80">
+            <InputGroupAddon>
+                <i class="pi pi-shopping-cart"></i>
+            </InputGroupAddon>
+            <IftaLabel>
+                <InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
+                <label for="price">Price</label>
+            </IftaLabel>
+        </InputGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 10,
+            code: {
+                basic: `
+<InputGroup class="md:w-80">
+    <InputGroupAddon>
+        <i class="pi pi-shopping-cart"></i>
+    </InputGroupAddon>
+    <IftaLabel>
+        <InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
+        <label for="price">Price</label>
+    </IftaLabel>
+</InputGroup>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputGroup class="md:w-80">
+            <InputGroupAddon>
+                <i class="pi pi-shopping-cart"></i>
+            </InputGroupAddon>
+            <IftaLabel>
+                <InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
+                <label for="price">Price</label>
+            </IftaLabel>
+        </InputGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 10
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputGroup class="md:w-80">
+            <InputGroupAddon>
+                <i class="pi pi-shopping-cart"></i>
+            </InputGroupAddon>
+            <IftaLabel>
+                <InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
+                <label for="price">Price</label>
+            </IftaLabel>
+        </InputGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(10);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputgroup/ImportDoc.vue b/apps/labs/doc/inputgroup/ImportDoc.vue
new file mode 100644
index 000000000..34b5654a9
--- /dev/null
+++ b/apps/labs/doc/inputgroup/ImportDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputGroup from 'primevue/inputgroup';
+import InputGroupAddon from 'primevue/inputgroupaddon';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputgroup/MultipleDoc.vue b/apps/labs/doc/inputgroup/MultipleDoc.vue
new file mode 100644
index 000000000..8d604854e
--- /dev/null
+++ b/apps/labs/doc/inputgroup/MultipleDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple add-ons can be placed inside the same group.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputGroup class="sm:!w-96">
+            <InputGroupAddon>
+                <i class="pi pi-clock"></i>
+            </InputGroupAddon>
+            <InputGroupAddon>
+                <i class="pi pi-star-fill"></i>
+            </InputGroupAddon>
+            <InputNumber placeholder="Price" />
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<InputGroup class="sm:!w-96">
+    <InputGroupAddon>
+        <i class="pi pi-clock"></i>
+    </InputGroupAddon>
+    <InputGroupAddon>
+        <i class="pi pi-star-fill"></i>
+    </InputGroupAddon>
+    <InputNumber placeholder="Price" />
+    <InputGroupAddon>$</InputGroupAddon>
+    <InputGroupAddon>.00</InputGroupAddon>
+</InputGroup>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputGroup class="sm:!w-96">
+            <InputGroupAddon>
+                <i class="pi pi-clock"></i>
+            </InputGroupAddon>
+            <InputGroupAddon>
+                <i class="pi pi-star-fill"></i>
+            </InputGroupAddon>
+            <InputNumber placeholder="Price" />
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputGroup class="sm:!w-96">
+            <InputGroupAddon>
+                <i class="pi pi-clock"></i>
+            </InputGroupAddon>
+            <InputGroupAddon>
+                <i class="pi pi-star-fill"></i>
+            </InputGroupAddon>
+            <InputNumber placeholder="Price" />
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/AccessibilityDoc.vue b/apps/labs/doc/inputmask/AccessibilityDoc.vue
new file mode 100644
index 000000000..b7bb6740c
--- /dev/null
+++ b/apps/labs/doc/inputmask/AccessibilityDoc.vue
@@ -0,0 +1,48 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
+            <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="date">Date</label>
+<InputMask id="date" />
+
+<span id="phone">Phone</span>
+<InputMask aria-labelledby="phone" />
+
+<InputMask aria-label="Age" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/BasicDoc.vue b/apps/labs/doc/inputmask/BasicDoc.vue
new file mode 100644
index 000000000..4974c0247
--- /dev/null
+++ b/apps/labs/doc/inputmask/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/DisabledDoc.vue b/apps/labs/doc/inputmask/DisabledDoc.vue
new file mode 100644
index 000000000..c0cbb1a6f
--- /dev/null
+++ b/apps/labs/doc/inputmask/DisabledDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<InputMask mask="99-999999" placeholder="Disabled" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}
+<\/script>
+        
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/FilledDoc.vue b/apps/labs/doc/inputmask/FilledDoc.vue
new file mode 100644
index 000000000..1f01e62d6
--- /dev/null
+++ b/apps/labs/doc/inputmask/FilledDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/FloatLabelDoc.vue b/apps/labs/doc/inputmask/FloatLabelDoc.vue
new file mode 100644
index 000000000..a0dc4a6b1
--- /dev/null
+++ b/apps/labs/doc/inputmask/FloatLabelDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            code: {
+                basic: `
+<FloatLabel>
+    <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/FormsDoc.vue b/apps/labs/doc/inputmask/FormsDoc.vue
new file mode 100644
index 000000000..6680be430
--- /dev/null
+++ b/apps/labs/doc/inputmask/FormsDoc.vue
@@ -0,0 +1,131 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
+                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                serialNumber: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    serialNumber: z.string().min(1, { message: 'Serial number is required.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+    <div class="flex flex-col gap-1">
+        <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
+        <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
+                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                serialNumber: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    serialNumber: z.string().min(1, { message: 'Serial number is required.' })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
+                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    serialNumber: ''
+});
+
+const resolver = ref(zodResolver(
+    z.object({
+        serialNumber: z.string().min(1, { message: 'Serial number is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/IftaLabelDoc.vue b/apps/labs/doc/inputmask/IftaLabelDoc.vue
new file mode 100644
index 000000000..ee7072fcf
--- /dev/null
+++ b/apps/labs/doc/inputmask/IftaLabelDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputMask id="ssn" v-model="value" mask="999-99-9999" autocomplete="off" variant="filled" />
+            <label for="ssn">SSN</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
+    <label for="ssn">SSN</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
+            <label for="ssn">SSN</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
+            <label for="ssn">SSN</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/ImportDoc.vue b/apps/labs/doc/inputmask/ImportDoc.vue
new file mode 100644
index 000000000..a804ea8b4
--- /dev/null
+++ b/apps/labs/doc/inputmask/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputMask from 'primevue/inputmask';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/InvalidDoc.vue b/apps/labs/doc/inputmask/InvalidDoc.vue
new file mode 100644
index 000000000..128d19962
--- /dev/null
+++ b/apps/labs/doc/inputmask/InvalidDoc.vue
@@ -0,0 +1,62 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            code: {
+                basic: `
+<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+<InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/MaskDoc.vue b/apps/labs/doc/inputmask/MaskDoc.vue
new file mode 100644
index 000000000..15b457c48
--- /dev/null
+++ b/apps/labs/doc/inputmask/MaskDoc.vue
@@ -0,0 +1,116 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Mask format can be a combination of the following definitions; <i>a</i> for alphabetic characters, <i>9</i> for numeric characters and <i>*</i> for alphanumberic characters. In addition, formatting characters like <i>(</i>, <i>)</i> ,
+            <i>-</i> are also accepted.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="ssn" class="font-bold block mb-2">SSN</label>
+            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="phone" class="font-bold block mb-2">Phone</label>
+            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="serial" class="font-bold block mb-2">Serial</label>
+            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            code: {
+                basic: `
+<div class="flex-auto">
+    <label for="ssn" class="font-bold block mb-2">SSN</label>
+    <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
+</div>
+
+<div class="flex-auto">
+    <label for="phone" class="font-bold block mb-2">Phone</label>
+    <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
+</div>
+
+<div class="flex-auto">
+    <label for="serial" class="font-bold block mb-2">Serial</label>
+    <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="ssn" class="font-bold block mb-2">SSN</label>
+            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="phone" class="font-bold block mb-2">Phone</label>
+            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="serial" class="font-bold block mb-2">Serial</label>
+            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="ssn" class="font-bold block mb-2">SSN</label>
+            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="phone" class="font-bold block mb-2">Phone</label>
+            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="serial" class="font-bold block mb-2">Serial</label>
+            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/OptionalDoc.vue b/apps/labs/doc/inputmask/OptionalDoc.vue
new file mode 100644
index 000000000..b8b24996f
--- /dev/null
+++ b/apps/labs/doc/inputmask/OptionalDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, <i>?</i> is used to mark anything after the question mark optional.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}
+<\/script>
+        
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/SizesDoc.vue b/apps/labs/doc/inputmask/SizesDoc.vue
new file mode 100644
index 000000000..bb94c9649
--- /dev/null
+++ b/apps/labs/doc/inputmask/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+<InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+<InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/SlotCharDoc.vue b/apps/labs/doc/inputmask/SlotCharDoc.vue
new file mode 100644
index 000000000..c2c38d964
--- /dev/null
+++ b/apps/labs/doc/inputmask/SlotCharDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Default placeholder for a mask is underscore that can be customized using <i>slotChar</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/AccessibilityDoc.vue b/apps/labs/doc/inputnumber/AccessibilityDoc.vue
new file mode 100644
index 000000000..a798bc152
--- /dev/null
+++ b/apps/labs/doc/inputnumber/AccessibilityDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element uses <i>spinbutton</i> role in addition to the
+            <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Increments the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Decrements the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Set the minimum value if provided.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Set the maximum value if provided.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="price">Price</label>
+<InputNumber inputId="price" />
+
+<span id="label_number">Number</span>
+<InputNumber aria-labelledby="label_number" />
+
+<InputNumber aria-label="Number" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/ButtonsDoc.vue b/apps/labs/doc/inputnumber/ButtonsDoc.vue
new file mode 100644
index 000000000..e14ad3cc7
--- /dev/null
+++ b/apps/labs/doc/inputnumber/ButtonsDoc.vue
@@ -0,0 +1,126 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 20,
+            value2: 25,
+            value3: 10.5,
+            code: {
+                basic: `
+<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
+    <template #incrementbuttonicon>
+        <span class="pi pi-plus" />
+    </template>
+    <template #decrementbuttonicon>
+        <span class="pi pi-minus" />
+    </template>
+</InputNumber>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 20,
+            value2: 25,
+            value3: 10.5
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid >
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(20);
+const value2 = ref(25);
+const value3 = ref(10.5);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/CurrencyDoc.vue b/apps/labs/doc/inputnumber/CurrencyDoc.vue
new file mode 100644
index 000000000..8ca7c8bab
--- /dev/null
+++ b/apps/labs/doc/inputnumber/CurrencyDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="currency-us" class="font-bold block mb-2"> United States </label>
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-india" class="font-bold block mb-2"> India </label>
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 1500,
+            value2: 2500,
+            value3: 4250,
+            value4: 5002,
+            code: {
+                basic: `
+<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
+<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
+<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="currency-us" class="font-bold block mb-2"> United States </label>
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-india" class="font-bold block mb-2"> India </label>
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 1500,
+            value2: 2500,
+            value3: 4250,
+            value4: 5002
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="currency-us" class="font-bold block mb-2"> United States </label>
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-india" class="font-bold block mb-2"> India </label>
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(1500);
+const value2 = ref(2500);
+const value3 = ref(4250);
+const value4 = ref(5002);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/DisabledDoc.vue b/apps/labs/doc/inputnumber/DisabledDoc.vue
new file mode 100644
index 000000000..6e6f053f1
--- /dev/null
+++ b/apps/labs/doc/inputnumber/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" disabled prefix="%" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50,
+            code: {
+                basic: `
+<InputNumber v-model="value" disabled prefix="%" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" disabled prefix="%" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" disabled prefix="%" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref(50);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/FilledDoc.vue b/apps/labs/doc/inputnumber/FilledDoc.vue
new file mode 100644
index 000000000..03b2c5dc9
--- /dev/null
+++ b/apps/labs/doc/inputnumber/FilledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputNumber v-model="value" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/FloatLabelDoc.vue b/apps/labs/doc/inputnumber/FloatLabelDoc.vue
new file mode 100644
index 000000000..b0d5f866c
--- /dev/null
+++ b/apps/labs/doc/inputnumber/FloatLabelDoc.vue
@@ -0,0 +1,112 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<FloatLabel>
+    <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/FormsDoc.vue b/apps/labs/doc/inputnumber/FormsDoc.vue
new file mode 100644
index 000000000..c097ed14f
--- /dev/null
+++ b/apps/labs/doc/inputnumber/FormsDoc.vue
@@ -0,0 +1,130 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputNumber integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputNumber name="amount" fluid />
+                <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                amount: 5
+            },
+            resolver: zodResolver(
+                z.object({
+                    amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+    <div class="flex flex-col gap-1">
+        <InputNumber name="amount" fluid />
+        <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputNumber name="amount" fluid />
+                <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                amount: 5
+            },
+            resolver: zodResolver(
+                z.object({
+                    amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputNumber name="amount" fluid />
+                <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    amount: 5
+});
+const resolver = ref(zodResolver(
+    z.object({
+        amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/IftaLabelDoc.vue b/apps/labs/doc/inputnumber/IftaLabelDoc.vue
new file mode 100644
index 000000000..5951c3653
--- /dev/null
+++ b/apps/labs/doc/inputnumber/IftaLabelDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
+            <label for="price_input">Price</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 1,
+            code: {
+                basic: `
+<IftaLabel>
+    <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
+    <label for="price_input">Price</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
+            <label for="price_input">Price</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 1
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
+            <label for="price_input">Price</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref(1);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/ImportDoc.vue b/apps/labs/doc/inputnumber/ImportDoc.vue
new file mode 100644
index 000000000..b66202310
--- /dev/null
+++ b/apps/labs/doc/inputnumber/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputNumber from 'primevue/inputnumber';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/InvalidDoc.vue b/apps/labs/doc/inputnumber/InvalidDoc.vue
new file mode 100644
index 000000000..5f63b1d2b
--- /dev/null
+++ b/apps/labs/doc/inputnumber/InvalidDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            code: {
+                basic: `
+<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(null);
+const value2 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/LocaleDoc.vue b/apps/labs/doc/inputnumber/LocaleDoc.vue
new file mode 100644
index 000000000..82518404b
--- /dev/null
+++ b/apps/labs/doc/inputnumber/LocaleDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 151351,
+            value2: 115744,
+            value3: 635524,
+            value4: 732762,
+            code: {
+                basic: `
+<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 151351,
+            value2: 115744,
+            value3: 635524,
+            value4: 732762
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(151351);
+const value2 = ref(115744);
+const value3 = ref(635524);
+const value4 = ref(732762);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/NumeralsDoc.vue b/apps/labs/doc/inputnumber/NumeralsDoc.vue
new file mode 100644
index 000000000..20750e2f7
--- /dev/null
+++ b/apps/labs/doc/inputnumber/NumeralsDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 42723,
+            value2: 58151,
+            value3: 2351.35,
+            value4: 50,
+            code: {
+                basic: `
+<InputNumber v-model="value1" inputId="integeronly" fluid />
+<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 42723,
+            value2: 58151,
+            value3: 2351.35,
+            value4: 50
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(42723);
+const value2 = ref(58151);
+const value3 = ref(2351.35);
+const value4 = ref(50);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue b/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
new file mode 100644
index 000000000..f812322aa
--- /dev/null
+++ b/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="mile" class="font-bold block mb-2"> Mile </label>
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="percent" class="font-bold block mb-2"> Percent </label>
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 20,
+            value2: 50,
+            value3: 10,
+            value4: 20,
+            code: {
+                basic: `
+<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+<InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="mile" class="font-bold block mb-2"> Mile </label>
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="percent" class="font-bold block mb-2"> Percent </label>
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 20,
+            value2: 50,
+            value3: 10,
+            value4: 20
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="mile" class="font-bold block mb-2"> Mile </label>
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="percent" class="font-bold block mb-2"> Percent </label>
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(20);
+const value2 = ref(50);
+const value3 = ref(10);
+const value4 = ref(20);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/SizesDoc.vue b/apps/labs/doc/inputnumber/SizesDoc.vue
new file mode 100644
index 000000000..f215787a7
--- /dev/null
+++ b/apps/labs/doc/inputnumber/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputNumber provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/VerticalDoc.vue b/apps/labs/doc/inputnumber/VerticalDoc.vue
new file mode 100644
index 000000000..6eebef2b1
--- /dev/null
+++ b/apps/labs/doc/inputnumber/VerticalDoc.vue
@@ -0,0 +1,82 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50,
+            code: {
+                basic: `
+<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
+    <template #incrementbuttonicon>
+        <span class="pi pi-plus" />
+    </template>
+    <template #decrementbuttonicon>
+        <span class="pi pi-minus" />
+    </template>
+</InputNumber>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref(50);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputotp/AccessibilityDoc.vue b/apps/labs/doc/inputotp/AccessibilityDoc.vue
new file mode 100644
index 000000000..78d025d80
--- /dev/null
+++ b/apps/labs/doc/inputotp/AccessibilityDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Input OTP uses a set of InputText components, refer to the <NuxtLink to="/inputtext">InputText</NuxtLink> component for more information about the screen reader support.</p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input otp.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the input and moves focus to the previous input element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/inputotp/BasicDoc.vue b/apps/labs/doc/inputotp/BasicDoc.vue
new file mode 100644
index 000000000..cd7d63588
--- /dev/null
+++ b/apps/labs/doc/inputotp/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputOtp is used with the <i>v-model</i> property for two-way value binding. The number of characters is defined with the <i>length</i> option, which is set to 4 by default.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputotp/FilledDoc.vue b/apps/labs/doc/inputotp/FilledDoc.vue
new file mode 100644
index 000000000..47a529cf1
--- /dev/null
+++ b/apps/labs/doc/inputotp/FilledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputotp/FormsDoc.vue b/apps/labs/doc/inputotp/FormsDoc.vue
new file mode 100644
index 000000000..139f8955f
--- /dev/null
+++ b/apps/labs/doc/inputotp/FormsDoc.vue
@@ -0,0 +1,130 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputOtp integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <InputOtp name="passcode" />
+                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                passcode: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    passcode: z.string().min(1, { message: 'Passcode is required.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-1">
+        <InputOtp name="passcode" />
+        <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <InputOtp name="passcode" />
+                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                passcode: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    passcode: z.string().min(1, { message: 'Passcode is required.' })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <InputOtp name="passcode" />
+                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    passcode: ''
+});
+const resolver = ref(zodResolver(
+    z.object({
+        passcode: z.string().min(1, { message: 'Passcode is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputotp/ImportDoc.vue b/apps/labs/doc/inputotp/ImportDoc.vue
new file mode 100644
index 000000000..6c589aa09
--- /dev/null
+++ b/apps/labs/doc/inputotp/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputOtp from 'primevue/inputotp';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputotp/IntegerOnlyDoc.vue b/apps/labs/doc/inputotp/IntegerOnlyDoc.vue
new file mode 100644
index 000000000..25b29abbf
--- /dev/null
+++ b/apps/labs/doc/inputotp/IntegerOnlyDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>integerOnly</i> is present, only integers can be accepted as input.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" integerOnly />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value" integerOnly />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" integerOnly />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" integerOnly />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputotp/MaskDoc.vue b/apps/labs/doc/inputotp/MaskDoc.vue
new file mode 100644
index 000000000..f80fbec8e
--- /dev/null
+++ b/apps/labs/doc/inputotp/MaskDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enable the <i>mask</i> option to hide the values in the input fields.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" mask />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value" mask />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" mask />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value" mask />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputotp/SampleDoc.vue b/apps/labs/doc/inputotp/SampleDoc.vue
new file mode 100644
index 000000000..9735ff581
--- /dev/null
+++ b/apps/labs/doc/inputotp/SampleDoc.vue
@@ -0,0 +1,228 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A sample UI implementation with templating and additional elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
+            <InputOtp v-model="value" :length="6" style="gap: 0">
+                <template #default="{ attrs, events, index }">
+                    <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+                    <div v-if="index === 3" class="px-4">
+                        <i class="pi pi-minus" />
+                    </div>
+                </template>
+            </InputOtp>
+            <div class="flex justify-between mt-8 self-stretch">
+                <Button label="Resend Code" link class="p-0"></Button>
+                <Button label="Submit Code"></Button>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<div class="flex flex-col items-center">
+    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+    <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
+    <InputOtp v-model="value" :length="6" style="gap: 0">
+        <template #default="{ attrs, events, index }">
+            <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            <div v-if="index === 3" class="px-4">
+                <i class="pi pi-minus" />
+            </div>
+        </template>
+    </InputOtp>
+    <div class="flex justify-between mt-8 self-stretch">
+        <Button label="Resend Code" link class="p-0"></Button>
+        <Button label="Submit Code"></Button>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
+            <InputOtp v-model="value" :length="6" style="gap: 0">
+                <template #default="{ attrs, events, index }">
+                    <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+                    <div v-if="index === 3" class="px-4">
+                        <i class="pi pi-minus" />
+                    </div>
+                </template>
+            </InputOtp>
+            <div class="flex justify-between mt-8 self-stretch">
+                <Button label="Resend Code" link class="p-0"></Button>
+                <Button label="Submit Code"></Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+
+<style scoped>
+.custom-otp-input {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    border-radius: 0;
+    border: 1px solid var(--p-inputtext-border-color);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--p-inputtext-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--p-focus-ring-color);
+}
+
+.custom-otp-input:first-child,
+.custom-otp-input:nth-child(5) {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:nth-child(3),
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+    border-color: var(--p-inputtext-border-color);
+}
+<\/style>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
+            <InputOtp v-model="value" :length="6" style="gap: 0">
+                <template #default="{ attrs, events, index }">
+                    <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+                    <div v-if="index === 3" class="px-4">
+                        <i class="pi pi-minus" />
+                    </div>
+                </template>
+            </InputOtp>
+            <div class="flex justify-between mt-8 self-stretch">
+                <Button label="Resend Code" link class="p-0"></Button>
+                <Button label="Submit Code"></Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+
+<style scoped>
+.custom-otp-input {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    border-radius: 0;
+    border: 1px solid var(--p-inputtext-border-color);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--p-inputtext-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--p-focus-ring-color);
+}
+
+.custom-otp-input:first-child,
+.custom-otp-input:nth-child(5) {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:nth-child(3),
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+    border-color: var(--p-inputtext-border-color);
+}
+<\/style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.custom-otp-input {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    border-radius: 0;
+    border: 1px solid var(--p-inputtext-border-color);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--p-inputtext-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--p-focus-ring-color);
+}
+
+.custom-otp-input:first-child,
+.custom-otp-input:nth-child(5) {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:nth-child(3),
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+    border-color: var(--p-inputtext-border-color);
+}
+</style>
diff --git a/apps/labs/doc/inputotp/SizesDoc.vue b/apps/labs/doc/inputotp/SizesDoc.vue
new file mode 100644
index 000000000..1ff38ad04
--- /dev/null
+++ b/apps/labs/doc/inputotp/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputOtp provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputOtp v-model="value1" size="small" />
+        <InputOtp v-model="value2" />
+        <InputOtp v-model="value3" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputOtp v-model="value1" size="small" />
+<InputOtp v-model="value2" />
+<InputOtp v-model="value3" size="large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputOtp v-model="value1" size="small" />
+        <InputOtp v-model="value2" />
+        <InputOtp v-model="value3" size="large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputOtp v-model="value1" size="small" />
+        <InputOtp v-model="value2" />
+        <InputOtp v-model="value3" size="large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputotp/TemplateDoc.vue b/apps/labs/doc/inputotp/TemplateDoc.vue
new file mode 100644
index 000000000..de3189954
--- /dev/null
+++ b/apps/labs/doc/inputotp/TemplateDoc.vue
@@ -0,0 +1,124 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value">
+    <template #default="{ attrs, events }">
+        <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+    </template>
+</InputOtp>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+
+<style scoped>
+.custom-otp-input {
+    width: 40px;
+    font-size: 36px;
+    border: 0 none;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    background: transparent;
+    border-bottom: 2px solid var(--p-inputtext-border-color);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--p-primary-color);
+}
+<\/style>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputOtp v-model="value">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+
+<style scoped>
+.custom-otp-input {
+    width: 40px;
+    font-size: 36px;
+    border: 0 none;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    background: transparent;
+    border-bottom: 2px solid var(--p-inputtext-border-color);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--p-primary-color);
+}
+<\/style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.custom-otp-input {
+    width: 40px;
+    font-size: 36px;
+    border: 0 none;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    background: transparent;
+    border-bottom: 2px solid var(--p-inputtext-border-color);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--p-primary-color);
+}
+</style>
diff --git a/apps/labs/doc/inputtext/AccessibilityDoc.vue b/apps/labs/doc/inputtext/AccessibilityDoc.vue
new file mode 100644
index 000000000..f983c8af6
--- /dev/null
+++ b/apps/labs/doc/inputtext/AccessibilityDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
+            <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="firstname">Firstname</label>
+<InputText id="firstname" />
+
+<span id="lastname">Lastname</span>
+<InputText aria-labelledby="lastname" />
+
+<InputText aria-label="Age"/>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/BasicDoc.vue b/apps/labs/doc/inputtext/BasicDoc.vue
new file mode 100644
index 000000000..804f28e79
--- /dev/null
+++ b/apps/labs/doc/inputtext/BasicDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputText v-model="value" type="text" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputText type="text" v-model="value" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputText type="text" v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+        
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputText type="text" v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/DisabledDoc.vue b/apps/labs/doc/inputtext/DisabledDoc.vue
new file mode 100644
index 000000000..6b42f75a0
--- /dev/null
+++ b/apps/labs/doc/inputtext/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputText v-model="value" disabled placeholder="Disabled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputText v-model="value" disabled placeholder="Disabled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputText v-model="value" disabled placeholder="Disabled" />
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputText v-model="value" disabled placeholder="Disabled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/FilledDoc.vue b/apps/labs/doc/inputtext/FilledDoc.vue
new file mode 100644
index 000000000..11ff03fa0
--- /dev/null
+++ b/apps/labs/doc/inputtext/FilledDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputText v-model="value" type="text" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputText type="text" v-model="value" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputText v-model="value" type="text" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputText v-model="value" type="text" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/FloatLabelDoc.vue b/apps/labs/doc/inputtext/FloatLabelDoc.vue
new file mode 100644
index 000000000..8ea88ae27
--- /dev/null
+++ b/apps/labs/doc/inputtext/FloatLabelDoc.vue
@@ -0,0 +1,112 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputText id="over_label" v-model="value1" autocomplete="off" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="on_label" v-model="value3" autocomplete="off" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<FloatLabel>
+    <InputText id="over_label" v-model="value1" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <InputText id="in_label" v-model="value2" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputText id="on_label" v-model="value3" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputText id="over_label" v-model="value1" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="in_label" v-model="value2" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="on_label" v-model="value3" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <InputText id="over_label" v-model="value1" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="in_label" v-model="value2" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="on_label" v-model="value3" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/FormsDoc.vue b/apps/labs/doc/inputtext/FormsDoc.vue
new file mode 100644
index 000000000..3e59714f2
--- /dev/null
+++ b/apps/labs/doc/inputtext/FormsDoc.vue
@@ -0,0 +1,153 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputText integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputText name="username" type="text" placeholder="Username" fluid />
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
+            </div>
+            <div class="flex flex-col gap-1">
+                <InputText name="email" type="text" placeholder="Email" fluid />
+                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                username: '',
+                email: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    username: z.string().min(1, { message: 'Username is required.' }),
+                    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+    <div class="flex flex-col gap-1">
+        <InputText name="username" type="text" placeholder="Username" />
+        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
+    </div>
+    <div class="flex flex-col gap-1">
+        <InputText name="email" type="text" placeholder="Email" />
+        <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputText name="username" type="text" placeholder="Username" fluid />
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
+            </div>
+            <div class="flex flex-col gap-1">
+                <InputText name="email" type="text" placeholder="Email" fluid />
+                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                username: '',
+                email: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    username: z.string().min(1, { message: 'Username is required.' }),
+                    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <InputText name="username" type="text" placeholder="Username" fluid />
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
+            </div>
+            <div class="flex flex-col gap-1">
+                <InputText name="email" type="text" placeholder="Email" fluid />
+                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    username: '',
+    email: ''
+});
+
+const resolver = ref(zodResolver(
+    z.object({
+        username: z.string().min(1, { message: 'Username is required.' }),
+        email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/HelpTextDoc.vue b/apps/labs/doc/inputtext/HelpTextDoc.vue
new file mode 100644
index 000000000..83b6772a1
--- /dev/null
+++ b/apps/labs/doc/inputtext/HelpTextDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-2">
+            <label for="username">Username</label>
+            <InputText id="username" v-model="value" aria-describedby="username-help" />
+            <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<div class="flex flex-col gap-2">
+    <label for="username">Username</label>
+    <InputText id="username" v-model="value" aria-describedby="username-help" />
+    <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-2">
+            <label for="username">Username</label>
+            <InputText id="username" v-model="value" aria-describedby="username-help" />
+            <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
+        </div>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-2">
+            <label for="username">Username</label>
+            <InputText id="username" v-model="value" aria-describedby="username-help" />
+            <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/IftaLabelDoc.vue b/apps/labs/doc/inputtext/IftaLabelDoc.vue
new file mode 100644
index 000000000..9c182948d
--- /dev/null
+++ b/apps/labs/doc/inputtext/IftaLabelDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" variant="filled" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <InputText id="username" v-model="value" variant="filled" />
+    <label for="username">Username</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" variant="filled" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" variant="filled" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/ImportDoc.vue b/apps/labs/doc/inputtext/ImportDoc.vue
new file mode 100644
index 000000000..c17eaa393
--- /dev/null
+++ b/apps/labs/doc/inputtext/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputText from 'primevue/inputtext';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/InvalidDoc.vue b/apps/labs/doc/inputtext/InvalidDoc.vue
new file mode 100644
index 000000000..53351ae6b
--- /dev/null
+++ b/apps/labs/doc/inputtext/InvalidDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            code: {
+                basic: `
+<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+<InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: ''
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputtext/SizesDoc.vue b/apps/labs/doc/inputtext/SizesDoc.vue
new file mode 100644
index 000000000..b76917666
--- /dev/null
+++ b/apps/labs/doc/inputtext/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputText v-model="value1" type="text" size="small" placeholder="Small" />
+<InputText v-model="value2" type="text" placeholder="Normal" />
+<InputText v-model="value3" type="text" size="large" placeholder="Large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/AccessibilityDoc.vue b/apps/labs/doc/knob/AccessibilityDoc.vue
new file mode 100644
index 000000000..77fcc1b93
--- /dev/null
+++ b/apps/labs/doc/knob/AccessibilityDoc.vue
@@ -0,0 +1,79 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Knob element component uses <i>slider</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
+            <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the slider.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">left arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Decrements the value.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">right arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Increments the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Set the minimum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Set the maximum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page up</i></td>
+                        <td>Increments the value by 10 steps.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page down</i></td>
+                        <td>Decrements the value by 10 steps.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="label_number">Number</span>
+<Knob aria-labelledby="label_number" />
+
+<Knob aria-label="Number" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/BasicDoc.vue b/apps/labs/doc/knob/BasicDoc.vue
new file mode 100644
index 000000000..915053633
--- /dev/null
+++ b/apps/labs/doc/knob/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Knob is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 0,
+            code: {
+                basic: `
+<Knob v-model="value" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 0
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/ColorDoc.vue b/apps/labs/doc/knob/ColorDoc.vue
new file mode 100644
index 000000000..a0b65d7a4
--- /dev/null
+++ b/apps/labs/doc/knob/ColorDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            <i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the stroke
+            of range and value sections.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50,
+            code: {
+                basic: `
+<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
+`,
+                options: `
+<template>
+  <div class="card flex justify-center">
+      <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+      return {
+          value: 50
+      }
+  }
+};
+<\/script>
+`,
+                composition: `
+<template>
+  <div class="card flex justify-center">
+      <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/DisabledDoc.vue b/apps/labs/doc/knob/DisabledDoc.vue
new file mode 100644
index 000000000..6d0fe13b8
--- /dev/null
+++ b/apps/labs/doc/knob/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50,
+            code: {
+                basic: `
+<Knob v-model="value" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/FormsDoc.vue b/apps/labs/doc/knob/FormsDoc.vue
new file mode 100644
index 000000000..465a3f914
--- /dev/null
+++ b/apps/labs/doc/knob/FormsDoc.vue
@@ -0,0 +1,133 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Knob integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-1">
+                <Knob name="knob" />
+                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                knob: 15
+            },
+            resolver: zodResolver(
+                z.object({
+                    knob: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+    <div class="flex flex-col items-center gap-1">
+        <Knob name="knob" />
+        <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-1">
+                <Knob name="knob" />
+                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <Toast />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                knob: 15
+            },
+            resolver: zodResolver(
+                z.object({
+                    knob: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-1">
+                <Knob name="knob" />
+                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+
+const toast = useToast();
+const initialValues = ref({
+    knob: 15
+});
+const resolver = ref(zodResolver(
+    z.object({
+        knob: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/ImportDoc.vue b/apps/labs/doc/knob/ImportDoc.vue
new file mode 100644
index 000000000..0e19e0664
--- /dev/null
+++ b/apps/labs/doc/knob/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Knob from 'primevue/knob';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/MinMaxDoc.vue b/apps/labs/doc/knob/MinMaxDoc.vue
new file mode 100644
index 000000000..7dcbbc269
--- /dev/null
+++ b/apps/labs/doc/knob/MinMaxDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" :min="-50" :max="50" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 10,
+            code: {
+                basic: `
+<Knob v-model="value" :min="-50" :max="50" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" :min="-50" :max="50" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 10
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" :min="-50" :max="50" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(10);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/ReactiveDoc.vue b/apps/labs/doc/knob/ReactiveDoc.vue
new file mode 100644
index 000000000..774be6264
--- /dev/null
+++ b/apps/labs/doc/knob/ReactiveDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Knob can be controlled with custom controls as well.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-2">
+        <Knob v-model="value" :size="150" readonly />
+        <div class="flex gap-2">
+            <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
+            <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 0,
+            code: {
+                basic: `
+<Knob v-model="value" :size="150" readonly />
+<div class="flex gap-2">
+    <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
+    <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-2">
+        <Knob v-model="value" :size="150" readonly />
+        <div class="flex gap-2">
+            <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
+            <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+      return {
+          value: 0
+      }
+  }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-2">
+        <Knob v-model="value" :size="150" readonly />
+        <div class="flex gap-2">
+            <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
+            <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/ReadOnlyDoc.vue b/apps/labs/doc/knob/ReadOnlyDoc.vue
new file mode 100644
index 000000000..93b9f42ae
--- /dev/null
+++ b/apps/labs/doc/knob/ReadOnlyDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>readonly</i> present, value cannot be edited.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" readonly />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50,
+            code: {
+                basic: `
+<Knob v-model="value" readonly />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" readonly />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" readonly />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/SizeDoc.vue b/apps/labs/doc/knob/SizeDoc.vue
new file mode 100644
index 000000000..346cb5a7f
--- /dev/null
+++ b/apps/labs/doc/knob/SizeDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Diameter of the knob is defined in pixels using the <i>size</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" :size="200" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 60,
+            code: {
+                basic: `
+<Knob v-model="value" :size="200" />
+`,
+                options: `
+<template>
+  <div class="card flex justify-center">
+      <Knob v-model="value" :size="200" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+      return {
+          value: 60
+      }
+  }
+};
+<\/script>
+`,
+                composition: `
+<template>
+  <div class="card flex justify-center">
+      <Knob v-model="value" :size="200" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(60);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/StepDoc.vue b/apps/labs/doc/knob/StepDoc.vue
new file mode 100644
index 000000000..4bc717125
--- /dev/null
+++ b/apps/labs/doc/knob/StepDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" :step="10" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 40,
+            code: {
+                basic: `
+<Knob v-model="value5" :step="10" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" :step="10" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 40
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" :step="10" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(40);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/StrokeDoc.vue b/apps/labs/doc/knob/StrokeDoc.vue
new file mode 100644
index 000000000..fd7a167c5
--- /dev/null
+++ b/apps/labs/doc/knob/StrokeDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The border size is specified with the <i>stroke</i> property as a number in pixels.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" :strokeWidth="5" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 40,
+            code: {
+                basic: `
+<Knob v-model="value" :strokeWidth="5" />
+`,
+                options: `
+<template>
+  <div class="card flex justify-center">
+      <Knob v-model="value" :strokeWidth="5" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+      return {
+          value: 40
+      }
+  }
+};
+<\/script>
+`,
+                composition: `
+<template>
+  <div class="card flex justify-center">
+      <Knob v-model="value" :strokeWidth="5" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(40);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/knob/TemplateDoc.vue b/apps/labs/doc/knob/TemplateDoc.vue
new file mode 100644
index 000000000..974f494eb
--- /dev/null
+++ b/apps/labs/doc/knob/TemplateDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The label can be customized with the <i>valueTemplate</i> property using either a template string or a function.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Knob v-model="value" valueTemplate="{value}%" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 60,
+            code: {
+                basic: `
+<Knob v-model="value" valueTemplate="{value}%" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" valueTemplate="{value}%" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 60
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" valueTemplate="{value}%" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(60);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/AccessibilityDoc.vue b/apps/labs/doc/listbox/AccessibilityDoc.vue
new file mode 100644
index 000000000..775219328
--- /dev/null
+++ b/apps/labs/doc/listbox/AccessibilityDoc.vue
@@ -0,0 +1,157 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can be provided <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute that sets to true when multiple selection is
+            enabled. Each list item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
+        </p>
+        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.</p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the items between the most recently selected option and the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused options and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused options and all the options down to the last one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all options.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Filter Input Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the component. If there is none, moves focus to next element in page.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="lb"></span>Options</span>
+<Listbox aria-labelledby="lb" />
+
+<Listbox aria-label="City" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/BasicDoc.vue b/apps/labs/doc/listbox/BasicDoc.vue
new file mode 100644
index 000000000..fd59606ab
--- /dev/null
+++ b/apps/labs/doc/listbox/BasicDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Listbox is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
+            that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/CheckmarkDoc.vue b/apps/labs/doc/listbox/CheckmarkDoc.vue
new file mode 100644
index 000000000..f3998037b
--- /dev/null
+++ b/apps/labs/doc/listbox/CheckmarkDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/DisabledDoc.vue b/apps/labs/doc/listbox/DisabledDoc.vue
new file mode 100644
index 000000000..68c6eed47
--- /dev/null
+++ b/apps/labs/doc/listbox/DisabledDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/FilterDoc.vue b/apps/labs/doc/listbox/FilterDoc.vue
new file mode 100644
index 000000000..26e481925
--- /dev/null
+++ b/apps/labs/doc/listbox/FilterDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Listbox provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/FormsDoc.vue b/apps/labs/doc/listbox/FormsDoc.vue
new file mode 100644
index 000000000..b39638542
--- /dev/null
+++ b/apps/labs/doc/listbox/FormsDoc.vue
@@ -0,0 +1,159 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Listbox integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <Listbox name="city" :options="cities" optionLabel="name" fluid />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                city: { name: '' }
+            },
+            resolver: zodResolver(
+                z.object({
+                    city: z.union([
+                        z.object({
+                            name: z.string().min(1, 'City is required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'City is required.' })
+                    ])
+                })
+            ),
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+    <div class="flex flex-col gap-1">
+        <Listbox name="city" :options="cities" optionLabel="name" fluid />
+        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <Listbox name="city" :options="cities" optionLabel="name" fluid />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                city: { name: '' }
+            },
+            resolver: zodResolver(
+                z.object({
+                    city: z.union([
+                        z.object({
+                            name: z.string().min(1, 'City is required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'City is required.' })
+                    ])
+                })
+            ),
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
+                <Listbox name="city" :options="cities" optionLabel="name" fluid />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    city: { name: '' }
+});
+const resolver = ref(zodResolver(
+    z.object({
+        city: z.union([
+            z.object({
+                name: z.string().min(1, 'City is required.')
+            }),
+            z.any().refine((val) => false, { message: 'City is required.' })
+        ])
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/GroupDoc.vue b/apps/labs/doc/listbox/GroupDoc.vue
new file mode 100644
index 000000000..6824d9332
--- /dev/null
+++ b/apps/labs/doc/listbox/GroupDoc.vue
@@ -0,0 +1,181 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the children
+            of a group.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Listbox>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
+    <template #optiongroup="slotProps">
+        <div class="flex items-center">
+            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.option.label }}</div>
+        </div>
+    </template>
+</Listbox>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Listbox>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Listbox>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const groupedCities = ref([
+    {
+        label: 'Germany',
+        code: 'DE',
+        items: [
+            { label: 'Berlin', value: 'Berlin' },
+            { label: 'Frankfurt', value: 'Frankfurt' },
+            { label: 'Hamburg', value: 'Hamburg' },
+            { label: 'Munich', value: 'Munich' }
+        ]
+    },
+    {
+        label: 'USA',
+        code: 'US',
+        items: [
+            { label: 'Chicago', value: 'Chicago' },
+            { label: 'Los Angeles', value: 'Los Angeles' },
+            { label: 'New York', value: 'New York' },
+            { label: 'San Francisco', value: 'San Francisco' }
+        ]
+    },
+    {
+        label: 'Japan',
+        code: 'JP',
+        items: [
+            { label: 'Kyoto', value: 'Kyoto' },
+            { label: 'Osaka', value: 'Osaka' },
+            { label: 'Tokyo', value: 'Tokyo' },
+            { label: 'Yokohama', value: 'Yokohama' }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/ImportDoc.vue b/apps/labs/doc/listbox/ImportDoc.vue
new file mode 100644
index 000000000..66f60f8af
--- /dev/null
+++ b/apps/labs/doc/listbox/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Listbox from 'primevue/listbox';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/InvalidDoc.vue b/apps/labs/doc/listbox/InvalidDoc.vue
new file mode 100644
index 000000000..fd063c8c8
--- /dev/null
+++ b/apps/labs/doc/listbox/InvalidDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null"  class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null"  class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null"  class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/MultipleDoc.vue b/apps/labs/doc/listbox/MultipleDoc.vue
new file mode 100644
index 000000000..712658fc3
--- /dev/null
+++ b/apps/labs/doc/listbox/MultipleDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Listbox allows choosing a single item by default, enable <i>multiple</i> property to choose more than one. When the optional <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new item requires meta key to
+            be present.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/TemplateDoc.vue b/apps/labs/doc/listbox/TemplateDoc.vue
new file mode 100644
index 000000000..3ff0fe1e3
--- /dev/null
+++ b/apps/labs/doc/listbox/TemplateDoc.vue
@@ -0,0 +1,118 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content for an option is displayed with the <i>option</i> slot that takes an option as a parameter. Additional available templating sections are <i>filter</i> and <i>optionGroup</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </Listbox>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: [
+                { name: 'Australia', code: 'AU' },
+                { name: 'Brazil', code: 'BR' },
+                { name: 'China', code: 'CN' },
+                { name: 'Egypt', code: 'EG' },
+                { name: 'France', code: 'FR' },
+                { name: 'Germany', code: 'DE' },
+                { name: 'India', code: 'IN' },
+                { name: 'Japan', code: 'JP' },
+                { name: 'Spain', code: 'ES' },
+                { name: 'United States', code: 'US' }
+            ],
+            code: {
+                basic: `
+<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
+    <template #option="slotProps">
+        <div class="flex items-center">
+            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.option.name }}</div>
+        </div>
+    </template>
+</Listbox>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </Listbox>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: [
+                { name: 'Australia', code: 'AU' },
+                { name: 'Brazil', code: 'BR' },
+                { name: 'China', code: 'CN' },
+                { name: 'Egypt', code: 'EG' },
+                { name: 'France', code: 'FR' },
+                { name: 'Germany', code: 'DE' },
+                { name: 'India', code: 'IN' },
+                { name: 'Japan', code: 'JP' },
+                { name: 'Spain', code: 'ES' },
+                { name: 'United States', code: 'US' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </Listbox>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCountry = ref();
+const countries = ref([
+    { name: 'Australia', code: 'AU' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'China', code: 'CN' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'France', code: 'FR' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'India', code: 'IN' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'United States', code: 'US' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/listbox/VirtualScrollDoc.vue b/apps/labs/doc/listbox/VirtualScrollDoc.vue
new file mode 100644
index 000000000..c089db856
--- /dev/null
+++ b/apps/labs/doc/listbox/VirtualScrollDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the
+            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by Listbox.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedItem: null,
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
+            code: {
+                basic: `
+<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedItem: null,
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedItem = ref();
+const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/megamenu/AccessibilityDoc.vue b/apps/labs/doc/megamenu/AccessibilityDoc.vue
new file mode 100644
index 000000000..ead362289
--- /dev/null
+++ b/apps/labs/doc/megamenu/AccessibilityDoc.vue
@@ -0,0 +1,96 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            MegaMenu component uses the <i>menubar</i> role along with <i>aria-orientation</i> and the value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
+            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MegaMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the
+            id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i> and <i>aria-expanded</i> to define the relation between the item and the submenu.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>If focus is inside a popup menu, moves focus to the first element in the submenu otherwise closes the submenu and moves focus to the root item of the closed submenu in horizontal mode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If focus is on a root element, moves focus to the next menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the next menu group.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If focus is on a root element, moves focus to the previous menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the previous menu group.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/megamenu/BasicDoc.vue b/apps/labs/doc/megamenu/BasicDoc.vue
new file mode 100644
index 000000000..827a385b3
--- /dev/null
+++ b/apps/labs/doc/megamenu/BasicDoc.vue
@@ -0,0 +1,339 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MegaMenu requires a collection of menuitems as its <i>model</i>.</p>
+    </DocSectionText>
+    <div class="card lg:px-20">
+        <MegaMenu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
+                    items: [
+                        [
+                            {
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                            },
+                            {
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Bedroom',
+                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Office',
+                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
+                    items: [
+                        [
+                            {
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Home Theater',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Gaming',
+                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Appliances',
+                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
+                    items: [
+                        [
+                            {
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Swimming',
+                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Tennis',
+                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                            }
+                        ]
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<MegaMenu :model="items" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
+                    items: [
+                        [
+                            {
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                            },
+                            {
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Bedroom',
+                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Office',
+                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
+                    items: [
+                        [
+                            {
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Home Theater',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Gaming',
+                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Appliances',
+                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
+                    items: [
+                        [
+                            {
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Swimming',
+                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Tennis',
+                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                            }
+                        ]
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Furniture',
+        icon: 'pi pi-box',
+        items: [
+            [
+                {
+                    label: 'Living Room',
+                    items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                }
+            ],
+            [
+                {
+                    label: 'Kitchen',
+                    items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                },
+                {
+                    label: 'Bathroom',
+                    items: [{ label: 'Accessories' }]
+                }
+            ],
+            [
+                {
+                    label: 'Bedroom',
+                    items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                }
+            ],
+            [
+                {
+                    label: 'Office',
+                    items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Electronics',
+        icon: 'pi pi-mobile',
+        items: [
+            [
+                {
+                    label: 'Computer',
+                    items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                }
+            ],
+            [
+                {
+                    label: 'Home Theater',
+                    items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                }
+            ],
+            [
+                {
+                    label: 'Gaming',
+                    items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                }
+            ],
+            [
+                {
+                    label: 'Appliances',
+                    items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Sports',
+        icon: 'pi pi-clock',
+        items: [
+            [
+                {
+                    label: 'Football',
+                    items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                }
+            ],
+            [
+                {
+                    label: 'Running',
+                    items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                }
+            ],
+            [
+                {
+                    label: 'Swimming',
+                    items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                }
+            ],
+            [
+                {
+                    label: 'Tennis',
+                    items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                }
+            ]
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/megamenu/CommandDoc.vue b/apps/labs/doc/megamenu/CommandDoc.vue
new file mode 100644
index 000000000..32c099f53
--- /dev/null
+++ b/apps/labs/doc/megamenu/CommandDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property of a menuitem defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+{
+    label: 'Log out',
+    icon: 'pi pi-signout',
+    command: () => {
+        // Callback to run
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/megamenu/ImportDoc.vue b/apps/labs/doc/megamenu/ImportDoc.vue
new file mode 100644
index 000000000..0dd5cf79f
--- /dev/null
+++ b/apps/labs/doc/megamenu/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import MegaMenu from 'primevue/megamenu';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/megamenu/RouterDoc.vue b/apps/labs/doc/megamenu/RouterDoc.vue
new file mode 100644
index 000000000..f868a2d9d
--- /dev/null
+++ b/apps/labs/doc/megamenu/RouterDoc.vue
@@ -0,0 +1,180 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<MegaMenu :model="items">
+    <template #item="{ item }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple :href="href" @click="navigate">
+                <span :class="item.icon" />
+                <span class="ml-2">{{ item.label }}</span>
+            </a>
+        </router-link>
+        <a v-else v-ripple :href="item.url" :target="item.target">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+        </a>
+    </template>
+</MegaMenu>
+`,
+                options: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items">
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+            </template>
+        </MegaMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Navigation',
+                    icon: 'pi pi-link',
+                    items: [
+                        [
+                            {
+                                label: 'Router',
+                                items: [
+                                    { label: 'Theming', route: '/slider' },
+                                    { label: 'Unstyled', route: '/slider' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Programmatic',
+                                items: [
+                                    {
+                                        label: 'Installation',
+                                        command: () => {
+                                            this.$router.push('/slider');
+                                        }
+                                    }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'External',
+                                items: [
+                                    {
+                                        label: 'Vue.js',
+                                        url: 'https://vuejs.org/'
+                                    },
+                                    {
+                                        label: 'Vite.js',
+                                        url: 'https://vuejs.org/'
+                                    }
+                                ]
+                            }
+                        ]
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items">
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+            </template>
+        </MegaMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Navigation',
+        icon: 'pi pi-link',
+        items: [
+            [
+                {
+                    label: 'Router',
+                    items: [
+                        { label: 'Theming', route: '/slider' },
+                        { label: 'Unstyled', route: '/slider' }
+                    ]
+                }
+            ],
+            [
+                {
+                    label: 'Programmatic',
+                    items: [
+                        {
+                            label: 'Installation',
+                            command: () => {
+                                router.push('/slider');
+                            }
+                        }
+                    ]
+                }
+            ],
+            [
+                {
+                    label: 'External',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
+                }
+            ]
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/megamenu/TemplateDoc.vue b/apps/labs/doc/megamenu/TemplateDoc.vue
new file mode 100644
index 000000000..349dab72e
--- /dev/null
+++ b/apps/labs/doc/megamenu/TemplateDoc.vue
@@ -0,0 +1,331 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            MegaMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. Additional slots named <i>start</i> and <i>end</i> are provided to embed content before or after the menu.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <MegaMenu :model="items" class="p-4 bg-surface-0 dark:bg-surface-950" style="border-radius: 3rem">
+            <template #start>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--p-primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--p-text-color)"
+                    />
+                </svg>
+            </template>
+            <template #item="{ item }">
+                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                    <span>{{ item.label }}</span>
+                </a>
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
+                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
+                        <i :class="[item.icon, 'text-lg']"></i>
+                    </span>
+                    <span class="inline-flex flex-col gap-1">
+                        <span class="font-bold text-lg">{{ item.label }}</span>
+                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
+                    </span>
+                </a>
+                <div v-else class="flex flex-col items-start gap-4 p-2">
+                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
+                    <span>{{ item.subtext }}</span>
+                    <Button :label="item.label" outlined />
+                </div>
+            </template>
+            <template #end>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+        </MegaMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Company',
+                    root: true,
+                    items: [
+                        [
+                            {
+                                items: [
+                                    { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
+                                    { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
+                                    { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                items: [
+                                    { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
+                                    { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
+                                    { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                items: [
+                                    { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
+                                    { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
+                                    { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Resources',
+                    root: true
+                },
+                {
+                    label: 'Contact',
+                    root: true
+                }
+            ],
+            code: {
+                basic: `
+<MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
+    <template #start>
+        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+            <path d="..." fill="var(--p-primary-color)" />
+            <path d="..." fill="var(--p-text-color)" />
+        </svg>
+    </template>
+    <template #item="{ item }">
+        <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+            <span>{{ item.label }}</span>
+        </a>
+        <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
+            <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
+                <i :class="[item.icon, 'text-lg']"></i>
+            </span>
+            <span class="inline-flex flex-col gap-1">
+                <span class="font-bold text-lg">{{ item.label }}</span>
+                <span class="whitespace-nowrap">{{ item.subtext }}</span>
+            </span>
+        </a>
+        <div v-else class="flex flex-col items-start gap-4 p-2">
+            <img alt="megamenu-demo" :src="item.image" class="w-full" />
+            <span>{{ item.subtext }}</span>
+            <Button :label="item.label" outlined />
+        </div>
+    </template>
+    <template #end>
+        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+    </template>
+</MegaMenu>
+`,
+                options: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
+            <template #start>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--p-primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--p-text-color)"
+                    />
+                </svg>
+            </template>
+            <template #item="{ item }">
+                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                    <span>{{ item.label }}</span>
+                </a>
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
+                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
+                        <i :class="[item.icon, 'text-lg']"></i>
+                    </span>
+                    <span class="inline-flex flex-col gap-1">
+                        <span class="font-bold text-lg">{{ item.label }}</span>
+                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
+                    </span>
+                </a>
+                <div v-else class="flex flex-col items-start gap-4 p-2">
+                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
+                    <span>{{ item.subtext }}</span>
+                    <Button :label="item.label" outlined />
+                </div>
+            </template>
+            <template #end>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+        </MegaMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Company',
+                    root: true,
+                    items: [
+                        [
+                            {
+                                items: [
+                                    { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
+                                    { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
+                                    { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                items: [
+                                    { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
+                                    { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
+                                    { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                items: [
+                                    { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
+                                    { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
+                                    { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Resources',
+                    root: true
+                },
+                {
+                    label: 'Contact',
+                    root: true
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
+            <template #start>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--p-primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--p-text-color)"
+                    />
+                </svg>
+            </template>
+            <template #item="{ item }">
+                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                    <span>{{ item.label }}</span>
+                </a>
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
+                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
+                        <i :class="[item.icon, 'text-lg']"></i>
+                    </span>
+                    <span class="inline-flex flex-col gap-1">
+                        <span class="font-bold text-lg">{{ item.label }}</span>
+                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
+                    </span>
+                </a>
+                <div v-else class="flex flex-col items-start gap-4 p-2">
+                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
+                    <span>{{ item.subtext }}</span>
+                    <Button :label="item.label" outlined />
+                </div>
+            </template>
+            <template #end>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+        </MegaMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Company',
+        root: true,
+        items: [
+            [
+                {
+                    items: [
+                        { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
+                        { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
+                        { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
+                    ]
+                }
+            ],
+            [
+                {
+                    items: [
+                        { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
+                        { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
+                        { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
+                    ]
+                }
+            ],
+            [
+                {
+                    items: [
+                        { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
+                        { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
+                        { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
+                    ]
+                }
+            ],
+            [
+                {
+                    items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Resources',
+        root: true
+    },
+    {
+        label: 'Contact',
+        root: true
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/megamenu/VerticalDoc.vue b/apps/labs/doc/megamenu/VerticalDoc.vue
new file mode 100644
index 000000000..06dbbab24
--- /dev/null
+++ b/apps/labs/doc/megamenu/VerticalDoc.vue
@@ -0,0 +1,339 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Layout of the MegaMenu is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
+    </DocSectionText>
+    <div class="card">
+        <MegaMenu :model="items" orientation="vertical" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
+                    items: [
+                        [
+                            {
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                            },
+                            {
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Bedroom',
+                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Office',
+                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
+                    items: [
+                        [
+                            {
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Home Theater',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Gaming',
+                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Appliances',
+                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
+                    items: [
+                        [
+                            {
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Swimming',
+                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Tennis',
+                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                            }
+                        ]
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<MegaMenu :model="items" orientation="vertical" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items" orientation="vertical" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
+                    items: [
+                        [
+                            {
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                            },
+                            {
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Bedroom',
+                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Office',
+                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
+                    items: [
+                        [
+                            {
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Home Theater',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Gaming',
+                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Appliances',
+                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
+                    items: [
+                        [
+                            {
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Swimming',
+                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Tennis',
+                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                            }
+                        ]
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items" orientation="vertical" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Furniture',
+        icon: 'pi pi-box',
+        items: [
+            [
+                {
+                    label: 'Living Room',
+                    items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                }
+            ],
+            [
+                {
+                    label: 'Kitchen',
+                    items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                },
+                {
+                    label: 'Bathroom',
+                    items: [{ label: 'Accessories' }]
+                }
+            ],
+            [
+                {
+                    label: 'Bedroom',
+                    items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                }
+            ],
+            [
+                {
+                    label: 'Office',
+                    items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Electronics',
+        icon: 'pi pi-mobile',
+        items: [
+            [
+                {
+                    label: 'Computer',
+                    items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                }
+            ],
+            [
+                {
+                    label: 'Home Theater',
+                    items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                }
+            ],
+            [
+                {
+                    label: 'Gaming',
+                    items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                }
+            ],
+            [
+                {
+                    label: 'Appliances',
+                    items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Sports',
+        icon: 'pi pi-clock',
+        items: [
+            [
+                {
+                    label: 'Football',
+                    items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                }
+            ],
+            [
+                {
+                    label: 'Running',
+                    items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                }
+            ],
+            [
+                {
+                    label: 'Swimming',
+                    items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                }
+            ],
+            [
+                {
+                    label: 'Tennis',
+                    items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                }
+            ]
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menu/AccessibilityDoc.vue b/apps/labs/doc/menu/AccessibilityDoc.vue
new file mode 100644
index 000000000..77ec0f18d
--- /dev/null
+++ b/apps/labs/doc/menu/AccessibilityDoc.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Menu component uses the <i>menu</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to the
+            label of the item and <i>aria-disabled</i> defined if the item is disabled.
+        </p>
+
+        <p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>If menu is in overlay mode, popup gets closes and focus moves to the target.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/menu/BasicDoc.vue b/apps/labs/doc/menu/BasicDoc.vue
new file mode 100644
index 000000000..bb40cad90
--- /dev/null
+++ b/apps/labs/doc/menu/BasicDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Menu requires a collection of menuitems as its <i>model</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'New', icon: 'pi pi-plus' },
+                { label: 'Search', icon: 'pi pi-search' }
+            ],
+            code: {
+                basic: `
+<Menu :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'New', icon: 'pi pi-plus' },
+                { label: 'Search', icon: 'pi pi-search' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    { label: 'New', icon: 'pi pi-plus' },
+    { label: 'Search', icon: 'pi pi-search' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menu/CommandDoc.vue b/apps/labs/doc/menu/CommandDoc.vue
new file mode 100644
index 000000000..a32dbabc4
--- /dev/null
+++ b/apps/labs/doc/menu/CommandDoc.vue
@@ -0,0 +1,105 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<Menu :model="items" />
+<Toast />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
+                    }
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const items = ref([
+    {
+        label: 'New',
+        icon: 'pi pi-plus',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+        }
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search',
+        command: () => {
+            toast.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
+        }
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menu/GroupDoc.vue b/apps/labs/doc/menu/GroupDoc.vue
new file mode 100644
index 000000000..160de6691
--- /dev/null
+++ b/apps/labs/doc/menu/GroupDoc.vue
@@ -0,0 +1,135 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Menu supports single level of grouping by defining children with the <i>items</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Documents',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search'
+                        }
+                    ]
+                },
+                {
+                    label: 'Profile',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog'
+                        },
+                        {
+                            label: 'Logout',
+                            icon: 'pi pi-sign-out'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Menu :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Documents',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search'
+                        }
+                    ]
+                },
+                {
+                    label: 'Profile',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog'
+                        },
+                        {
+                            label: 'Logout',
+                            icon: 'pi pi-sign-out'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Documents',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-search'
+            }
+        ]
+    },
+    {
+        label: 'Profile',
+        items: [
+            {
+                label: 'Settings',
+                icon: 'pi pi-cog'
+            },
+            {
+                label: 'Logout',
+                icon: 'pi pi-sign-out'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menu/ImportDoc.vue b/apps/labs/doc/menu/ImportDoc.vue
new file mode 100644
index 000000000..7728b4830
--- /dev/null
+++ b/apps/labs/doc/menu/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Menu from 'primevue/menu';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menu/PopupDoc.vue b/apps/labs/doc/menu/PopupDoc.vue
new file mode 100644
index 000000000..1121fb21a
--- /dev/null
+++ b/apps/labs/doc/menu/PopupDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Overlay mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> function of the menu ref with an event of the target.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button type="button" icon="pi pi-ellipsis-v" plain @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+        <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Options',
+                    items: [
+                        {
+                            label: 'Refresh',
+                            icon: 'pi pi-refresh'
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-upload'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+<Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+        <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Refresh',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-upload'
+                }
+            ]
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+        <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const menu = ref();
+const items = ref([
+    {
+        label: 'Options',
+        items: [
+            {
+                label: 'Refresh',
+                icon: 'pi pi-refresh'
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-upload'
+            }
+        ]
+    }
+]);
+
+const toggle = (event) => {
+    menu.value.toggle(event);
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        },
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/menu/RouterDoc.vue b/apps/labs/doc/menu/RouterDoc.vue
new file mode 100644
index 000000000..2a382b797
--- /dev/null
+++ b/apps/labs/doc/menu/RouterDoc.vue
@@ -0,0 +1,168 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Menu :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+            </template>
+        </Menu>
+    </div>
+    <DocSectionCode :code="code" hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Navigate',
+                    items: [
+                        {
+                            label: 'Router Link',
+                            icon: 'pi pi-palette',
+                            route: '/slider'
+                        },
+                        {
+                            label: 'Programmatic',
+                            icon: 'pi pi-link',
+                            command: () => {
+                                this.$router.push('/slider');
+                            }
+                        },
+                        {
+                            label: 'External',
+                            icon: 'pi pi-home',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Menu :model="items">
+    <template #item="{ item, props }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                <span :class="item.icon" />
+                <span class="ml-2">{{ item.label }}</span>
+            </a>
+        </router-link>
+        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+        </a>
+    </template>
+</Menu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+            </template>
+        </Menu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router Link',
+                    icon: 'pi pi-palette',
+                    route: '/slider'
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    url: 'https://vuejs.org/'
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+            </template>
+        </Menu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Router Link',
+        icon: 'pi pi-palette',
+        route: '/slider'
+    },
+    {
+        label: 'Programmatic',
+        icon: 'pi pi-link',
+        command: () => {
+            router.push('/slider');
+        }
+    },
+    {
+        label: 'External',
+        icon: 'pi pi-home',
+        url: 'https://vuejs.org/'
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menu/TemplateDoc.vue b/apps/labs/doc/menu/TemplateDoc.vue
new file mode 100644
index 000000000..9bb38cf03
--- /dev/null
+++ b/apps/labs/doc/menu/TemplateDoc.vue
@@ -0,0 +1,321 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Menu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. The submenu label has its own <i>submenulabel</i> template, additional slots named <i>start</i> and
+            <i>end</i> are provided to embed content before or after the menu.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Menu :model="items" class="w-full md:w-60">
+            <template #start>
+                <span class="inline-flex items-center gap-1 px-2 py-2">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-primary-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="var(--p-text-color)"
+                        />
+                    </svg>
+                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
+                </span>
+            </template>
+            <template #submenulabel="{ item }">
+                <span class="text-primary font-bold">{{ item.label }}</span>
+            </template>
+            <template #item="{ item, props }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+            <template #end>
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
+                    <span class="inline-flex flex-col items-start">
+                        <span class="font-bold">Amy Elsner</span>
+                        <span class="text-sm">Admin</span>
+                    </span>
+                </button>
+            </template>
+        </Menu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    separator: true
+                },
+                {
+                    label: 'Documents',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            shortcut: '⌘+N'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search',
+                            shortcut: '⌘+S'
+                        }
+                    ]
+                },
+                {
+                    label: 'Profile',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Messages',
+                            icon: 'pi pi-inbox',
+                            badge: 2
+                        },
+                        {
+                            label: 'Logout',
+                            icon: 'pi pi-sign-out',
+                            shortcut: '⌘+Q'
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                }
+            ],
+            code: {
+                basic: `
+<Menu :model="items" class="w-full md:w-60">
+    <template #start>
+        <span class="inline-flex items-center gap-1 px-2 py-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                <path d="..." fill="var(--p-primary-color)" />
+                <path d="..." fill="var(--p-text-color)" />
+            </svg>
+            <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
+        </span>
+    </template>
+    <template #submenulabel="{ item }">
+        <span class="text-primary font-bold">{{ item.label }}</span>
+    </template>
+    <template #item="{ item, props }">
+        <a v-ripple class="flex items-center" v-bind="props.action">
+            <span :class="item.icon" />
+            <span>{{ item.label }}</span>
+            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+        </a>
+    </template>
+    <template #end>
+        <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
+            <span class="inline-flex flex-col items-start">
+                <span class="font-bold">Amy Elsner</span>
+                <span class="text-sm">Admin</span>
+            </span>
+        </button>
+    </template>
+</Menu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" class="w-full md:w-60">
+            <template #start>
+                <span class="inline-flex items-center gap-1 px-2 py-2">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-primary-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="var(--p-text-color)"
+                        />
+                    </svg>
+                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
+                </span>
+            </template>
+            <template #submenulabel="{ item }">
+                <span class="text-primary font-bold">{{ item.label }}</span>
+            </template>
+            <template #item="{ item, props }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+            <template #end>
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
+                    <span class="inline-flex flex-col items-start">
+                        <span class="font-bold">Amy Elsner</span>
+                        <span class="text-sm">Admin</span>
+                    </span>
+                </button>
+            </template>
+        </Menu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    separator: true
+                },
+                {
+                    label: 'Documents',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            shortcut: '⌘+N'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search',
+                            shortcut: '⌘+S'
+                        }
+                    ]
+                },
+                {
+                    label: 'Profile',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Messages',
+                            icon: 'pi pi-inbox',
+                            badge: 2
+                        },
+                        {
+                            label: 'Logout',
+                            icon: 'pi pi-sign-out',
+                            shortcut: '⌘+Q'
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" class="w-full md:w-60">
+            <template #start>
+                <span class="inline-flex items-center gap-1 px-2 py-2">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-primary-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="var(--p-text-color)"
+                        />
+                    </svg>
+                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
+                </span>
+            </template>
+            <template #submenulabel="{ item }">
+                <span class="text-primary font-bold">{{ item.label }}</span>
+            </template>
+            <template #item="{ item, props }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+            <template #end>
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
+                    <span class="inline-flex flex-col items-start">
+                        <span class="font-bold">Amy Elsner</span>
+                        <span class="text-sm">Admin</span>
+                    </span>
+                </button>
+            </template>
+        </Menu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        separator: true
+    },
+    {
+        label: 'Documents',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                shortcut: '⌘+N'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-search',
+                shortcut: '⌘+S'
+            }
+        ]
+    },
+    {
+        label: 'Profile',
+        items: [
+            {
+                label: 'Settings',
+                icon: 'pi pi-cog',
+                shortcut: '⌘+O'
+            },
+            {
+                label: 'Messages',
+                icon: 'pi pi-inbox',
+                badge: 2
+            },
+            {
+                label: 'Logout',
+                icon: 'pi pi-sign-out',
+                shortcut: '⌘+Q'
+            }
+        ]
+    },
+    {
+        separator: true
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menubar/AccessibilityDoc.vue b/apps/labs/doc/menubar/AccessibilityDoc.vue
new file mode 100644
index 000000000..25f0d8c49
--- /dev/null
+++ b/apps/labs/doc/menubar/AccessibilityDoc.vue
@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Menubar component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to
+            the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MenuBar uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition,
+            menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
+        </p>
+
+        <p>
+            In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe the
+            button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">PrimeVue Locale</a> API as the <i>aria-label</i>.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If focus is on a root element, moves focus to the next menuitem otherwise opens a submenu if there is one available and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If focus is on a root element, moves focus to the previous menuitem otherwise closes a submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/menubar/AdvancedDoc.vue b/apps/labs/doc/menubar/AdvancedDoc.vue
new file mode 100644
index 000000000..052e6b873
--- /dev/null
+++ b/apps/labs/doc/menubar/AdvancedDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Menubar is a simple horizontal navigation component, for advanced use cases consider <a href="https://primeblocks.org/marketing/navbar" target="_blank" rel="noopener noreferrer">Marketing</a> and
+            <a href="https://primeblocks.org/application/navbar" target="_blank" rel="noopener noreferrer">Application</a> NavBars in PrimeBlocks or <a href="https://primevue.org/templates" target="_blank" rel="noopener noreferrer">templates</a> with
+            horizontal menus in application templates.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/menubar/BasicDoc.vue b/apps/labs/doc/menubar/BasicDoc.vue
new file mode 100644
index 000000000..5349ef2a2
--- /dev/null
+++ b/apps/labs/doc/menubar/BasicDoc.vue
@@ -0,0 +1,189 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Menubar requires a collection of menuitems as its <i>model</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <Menubar :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-home'
+                },
+                {
+                    label: 'Features',
+                    icon: 'pi pi-star'
+                },
+                {
+                    label: 'Projects',
+                    icon: 'pi pi-search',
+                    items: [
+                        {
+                            label: 'Components',
+                            icon: 'pi pi-bolt'
+                        },
+                        {
+                            label: 'Blocks',
+                            icon: 'pi pi-server'
+                        },
+                        {
+                            label: 'UI Kit',
+                            icon: 'pi pi-pencil'
+                        },
+                        {
+                            label: 'Templates',
+                            icon: 'pi pi-palette',
+                            items: [
+                                {
+                                    label: 'Apollo',
+                                    icon: 'pi pi-palette'
+                                },
+                                {
+                                    label: 'Ultima',
+                                    icon: 'pi pi-palette'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Contact',
+                    icon: 'pi pi-envelope'
+                }
+            ],
+            code: {
+                basic: `
+<Menubar :model="items" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <Menubar :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-home'
+                },
+                {
+                    label: 'Features',
+                    icon: 'pi pi-star'
+                },
+                {
+                    label: 'Projects',
+                    icon: 'pi pi-search',
+                    items: [
+                        {
+                            label: 'Components',
+                            icon: 'pi pi-bolt'
+                        },
+                        {
+                            label: 'Blocks',
+                            icon: 'pi pi-server'
+                        },
+                        {
+                            label: 'UI Kit',
+                            icon: 'pi pi-pencil'
+                        },
+                        {
+                            label: 'Templates',
+                            icon: 'pi pi-palette',
+                            items: [
+                                {
+                                    label: 'Apollo',
+                                    icon: 'pi pi-palette'
+                                },
+                                {
+                                    label: 'Ultima',
+                                    icon: 'pi pi-palette'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Contact',
+                    icon: 'pi pi-envelope'
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Menubar :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-home'
+    },
+    {
+        label: 'Features',
+        icon: 'pi pi-star'
+    },
+    {
+        label: 'Projects',
+        icon: 'pi pi-search',
+        items: [
+            {
+                label: 'Components',
+                icon: 'pi pi-bolt'
+            },
+            {
+                label: 'Blocks',
+                icon: 'pi pi-server'
+            },
+            {
+                label: 'UI Kit',
+                icon: 'pi pi-pencil'
+            },
+            {
+                label: 'Templates',
+                icon: 'pi pi-palette',
+                items: [
+                    {
+                        label: 'Apollo',
+                        icon: 'pi pi-palette'
+                    },
+                    {
+                        label: 'Ultima',
+                        icon: 'pi pi-palette'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Contact',
+        icon: 'pi pi-envelope'
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menubar/CommandDoc.vue b/apps/labs/doc/menubar/CommandDoc.vue
new file mode 100644
index 000000000..7514f0cb6
--- /dev/null
+++ b/apps/labs/doc/menubar/CommandDoc.vue
@@ -0,0 +1,213 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <div class="card">
+        <Menubar :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Import',
+                            icon: 'pi pi-cloud-download',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-cloud-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                            }
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Menubar :model="items" />
+<Toast />
+`,
+                options: `
+<template>
+    <div class="card">
+        <Menubar :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Import',
+                            icon: 'pi pi-cloud-download',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-cloud-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                            }
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Menubar :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                command: () => {
+                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                }
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print',
+                command: () => {
+                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search',
+        command: () => {
+            toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Sync',
+        icon: 'pi pi-cloud',
+        items: [
+            {
+                label: 'Import',
+                icon: 'pi pi-cloud-download',
+                command: () => {
+                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                }
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-cloud-upload',
+                command: () => {
+                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                }
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menubar/ImportDoc.vue b/apps/labs/doc/menubar/ImportDoc.vue
new file mode 100644
index 000000000..03e41bb8c
--- /dev/null
+++ b/apps/labs/doc/menubar/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Menubar from 'primevue/menubar';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menubar/RouterDoc.vue b/apps/labs/doc/menubar/RouterDoc.vue
new file mode 100644
index 000000000..f41934932
--- /dev/null
+++ b/apps/labs/doc/menubar/RouterDoc.vue
@@ -0,0 +1,221 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
+    </DocSectionText>
+    <div class="card">
+        <Menubar :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span>{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+    <DocSectionCode :code="code" hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Styled',
+                            route: '/slider'
+                        },
+                        {
+                            label: 'Unstyled',
+                            route: '/slider'
+                        }
+                    ]
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            url: 'https://vitejs.dev/'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Menubar :model="items">
+    <template #item="{ item, props, hasSubmenu }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                <span :class="item.icon" />
+                <span>{{ item.label }}</span>
+            </a>
+        </router-link>
+        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+            <span :class="item.icon" />
+            <span>{{ item.label }}</span>
+            <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
+        </a>
+    </template>
+</Menubar>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Menubar :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span>{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Styled',
+                            route: '/slider'
+                        },
+                        {
+                            label: 'Unstyled',
+                            route: '/slider'
+                        }
+                    ]
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            url: 'https://vitejs.dev/'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Menubar :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span>{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Router',
+        icon: 'pi pi-palette',
+        items: [
+            {
+                label: 'Styled',
+                route: '/slider'
+            },
+            {
+                label: 'Unstyled',
+                route: '/slider'
+            }
+        ]
+    },
+    {
+        label: 'Programmatic',
+        icon: 'pi pi-link',
+        command: () => {
+            router.push('/slider');
+        }
+    },
+    {
+        label: 'External',
+        icon: 'pi pi-home',
+        items: [
+            {
+                label: 'Vue.js',
+                url: 'https://vuejs.org/'
+            },
+            {
+                label: 'Vite.js',
+                url: 'https://vitejs.dev/'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/menubar/TemplateDoc.vue b/apps/labs/doc/menubar/TemplateDoc.vue
new file mode 100644
index 000000000..a1e674401
--- /dev/null
+++ b/apps/labs/doc/menubar/TemplateDoc.vue
@@ -0,0 +1,248 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Menubar offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. Additional slots named <i>start</i> and <i>end</i> are provided to embed content before or after the menu.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <Menubar :model="items">
+            <template #start>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--p-primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--p-text-color)"
+                    />
+                </svg>
+            </template>
+            <template #item="{ item, props, hasSubmenu, root }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span>{{ item.label }}</span>
+                    <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
+                </a>
+            </template>
+            <template #end>
+                <div class="flex items-center gap-2">
+                    <InputText placeholder="Search" type="text" class="w-36" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                </div>
+            </template>
+        </Menubar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-home'
+                },
+                {
+                    label: 'Projects',
+                    icon: 'pi pi-search',
+                    badge: 3,
+                    items: [
+                        {
+                            label: 'Core',
+                            icon: 'pi pi-bolt',
+                            shortcut: '⌘+S'
+                        },
+                        {
+                            label: 'Blocks',
+                            icon: 'pi pi-server',
+                            shortcut: '⌘+B'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'UI Kit',
+                            icon: 'pi pi-pencil',
+                            shortcut: '⌘+U'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Menubar :model="items">
+    <template #start>
+        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+            <path d="..." fill="var(--p-primary-color)" />
+            <path d="..." fill="var(--p-text-color)" />
+        </svg>
+    </template>
+    <template #item="{ item, props, hasSubmenu, root }">
+        <a v-ripple class="flex items-center" v-bind="props.action">
+            <span>{{ item.label }}</span>
+            <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+            <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
+        </a>
+    </template>
+    <template #end>
+        <div class="flex items-center gap-2">
+            <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
+            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+        </div>
+    </template>
+</Menubar>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Menubar :model="items">
+            <template #start>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--p-primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--p-text-color)"
+                    />
+                </svg>
+            </template>
+            <template #item="{ item, props, hasSubmenu, root }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span>{{ item.label }}</span>
+                    <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
+                </a>
+            </template>
+            <template #end>
+                <div class="flex items-center gap-2">
+                    <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                </div>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-home'
+                },
+                {
+                    label: 'Projects',
+                    icon: 'pi pi-search',
+                    badge: 3,
+                    items: [
+                        {
+                            label: 'Core',
+                            icon: 'pi pi-bolt',
+                            shortcut: '⌘+S'
+                        },
+                        {
+                            label: 'Blocks',
+                            icon: 'pi pi-server',
+                            shortcut: '⌘+B'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'UI Kit',
+                            icon: 'pi pi-pencil',
+                            shortcut: '⌘+U'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Menubar :model="items">
+            <template #start>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--p-primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--p-text-color)"
+                    />
+                </svg>
+            </template>
+            <template #item="{ item, props, hasSubmenu, root }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span>{{ item.label }}</span>
+                    <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
+                </a>
+            </template>
+            <template #end>
+                <div class="flex items-center gap-2">
+                    <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                </div>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-home'
+    },
+    {
+        label: 'Projects',
+        icon: 'pi pi-search',
+        badge: 3,
+        items: [
+            {
+                label: 'Core',
+                icon: 'pi pi-bolt',
+                shortcut: '⌘+S'
+            },
+            {
+                label: 'Blocks',
+                icon: 'pi pi-server',
+                shortcut: '⌘+B'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'UI Kit',
+                icon: 'pi pi-pencil',
+                shortcut: '⌘+U'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/AccessibilityDoc.vue b/apps/labs/doc/message/AccessibilityDoc.vue
new file mode 100644
index 000000000..76ed4e21a
--- /dev/null
+++ b/apps/labs/doc/message/AccessibilityDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Message component uses <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and
+            <i>aria-label</i> can optionally be used as well.
+        </p>
+
+        <p>
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, you
+            may use <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
+        </p>
+
+        <h3>Close Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the message.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/message/BasicDoc.vue b/apps/labs/doc/message/BasicDoc.vue
new file mode 100644
index 000000000..de68e088a
--- /dev/null
+++ b/apps/labs/doc/message/BasicDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message>Message Content</Message>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/ClosableDoc.vue b/apps/labs/doc/message/ClosableDoc.vue
new file mode 100644
index 000000000..bcc286f5a
--- /dev/null
+++ b/apps/labs/doc/message/ClosableDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enable <i>closable</i> option to display an icon to remove a message.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message closable>Closable Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message closable>Closable Message</Message>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Message closable>Closable Message</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Message closable>Closable Message</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/DynamicDoc.vue b/apps/labs/doc/message/DynamicDoc.vue
new file mode 100644
index 000000000..25394b42d
--- /dev/null
+++ b/apps/labs/doc/message/DynamicDoc.vue
@@ -0,0 +1,116 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple messages can be displayed using the standard v-for directive.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center justify-center gap-4">
+        <div class="flex gap-2">
+            <Button label="Show" @click="addMessages()" />
+            <Button label="Clear" severity="secondary" @click="clearMessages()" />
+        </div>
+        <transition-group name="p-message" tag="div" class="flex flex-col">
+            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
+        </transition-group>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            messages: [],
+            count: 0,
+            code: {
+                basic: `
+<Button label="Show" @click="addMessages()" />
+<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
+<transition-group name="p-message" tag="div" class="flex flex-col">
+    <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
+</transition-group>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center justify-center gap-4">
+        <div class="flex gap-2">
+            <Button label="Show" @click="addMessages()" />
+            <Button label="Clear" severity="secondary" @click="clearMessages()" />
+        </div>
+        <transition-group name="p-message" tag="div" class="flex flex-col">
+            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
+        </transition-group>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            messages: [],
+            count: 0
+        };
+    },
+    methods: {
+        addMessages() {
+            this.messages = [
+                { severity: 'info', content: 'Dynamic Info Message', id: this.count++ },
+                { severity: 'success', content: 'Dynamic Success Message', id: this.count++ },
+                { severity: 'warn', content: 'Dynamic Warn Message', id: this.count++ }
+            ];
+        },
+        clearMessages() {
+            this.messages = [];
+        }
+    }
+};
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center justify-center gap-4">
+        <div class="flex gap-2">
+            <Button label="Show" @click="addMessages()" />
+            <Button label="Clear" severity="secondary" @click="clearMessages()" />
+        </div>
+        <transition-group name="p-message" tag="div" class="flex flex-col">
+            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
+        </transition-group>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const messages = ref([]);
+let count = ref(0);
+
+const addMessages = () => {
+    messages.value = [
+        { severity: 'info', content: 'Dynamic Info Message', id: count.value++ },
+        { severity: 'success', content: 'Dynamic Success Message', id: count.value++ },
+        { severity: 'warn', content: 'Dynamic Warn Message', id: count.value++ }
+    ];
+};
+
+const clearMessages = () => {
+    messages.value = [];
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        addMessages() {
+            this.messages = [
+                { severity: 'info', content: 'Dynamic Info Message', id: this.count++ },
+                { severity: 'success', content: 'Dynamic Success Message', id: this.count++ },
+                { severity: 'warn', content: 'Dynamic Warn Message', id: this.count++ }
+            ];
+        },
+        clearMessages() {
+            this.messages = [];
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/FormsDoc.vue b/apps/labs/doc/message/FormsDoc.vue
new file mode 100644
index 000000000..0190ca896
--- /dev/null
+++ b/apps/labs/doc/message/FormsDoc.vue
@@ -0,0 +1,83 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Validation errors in a form are displayed with the <i>error</i> severity.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+            <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+            <div class="flex flex-col gap-1">
+                <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+                <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+            </div>
+            <div class="flex flex-col gap-1">
+                <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+                <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            username: null,
+            email: null,
+            code: {
+                basic: `
+<Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+<Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+<div class="flex flex-col gap-1">
+    <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+    <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+</div>
+<div class="flex flex-col gap-1">
+    <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+    <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
+</div>
+`,
+                options: `
+<template>
+    <div class="flex flex-col gap-4">
+        <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+        <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+            <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+            <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
+        </div>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="flex flex-col gap-4">
+        <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+        <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+            <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+            <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
+        </div>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/IconDoc.vue b/apps/labs/doc/message/IconDoc.vue
new file mode 100644
index 000000000..ae6b0d799
--- /dev/null
+++ b/apps/labs/doc/message/IconDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Icon property and the <i>icon</i> slots are available to customize the icon of the message</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-4">
+        <Message severity="info" icon="pi pi-send">Info Message</Message>
+        <Message severity="success">
+            <template #icon>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+            <span class="ml-2">How may I help you?</span>
+        </Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message severity="info" icon="pi pi-send">Info Message</Message>
+<Message severity="success">
+    <template #icon>
+        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+    </template>
+    <span class="ml-2">How may I help you?</span>
+</Message>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center gap-4">
+        <Message severity="info" icon="pi pi-send">Info Message</Message>
+        <Message severity="success">
+            <template #icon>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+            <span class="ml-2">How may I help you?</span>
+        </Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center gap-4">
+        <Message severity="info" icon="pi pi-send">Info Message</Message>
+        <Message severity="success">
+            <template #icon>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+            <span class="ml-2">How may I help you?</span>
+        </Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/ImportDoc.vue b/apps/labs/doc/message/ImportDoc.vue
new file mode 100644
index 000000000..642a1d845
--- /dev/null
+++ b/apps/labs/doc/message/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Message from 'primevue/message';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/LifeDoc.vue b/apps/labs/doc/message/LifeDoc.vue
new file mode 100644
index 000000000..7dfc36f2c
--- /dev/null
+++ b/apps/labs/doc/message/LifeDoc.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Messages can disappear automatically by defined the <i>life</i> in milliseconds.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center justify-center">
+        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
+        <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
+<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center justify-center">
+        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
+        <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    },
+    methods: {
+        showMessage() {
+            this.visible = true;
+
+            setTimeout(() => {
+                this.visible = false;
+            }, 3500);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center justify-center">
+        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
+        <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+let visible = ref(false);
+
+const showMessage() {
+    visible.value = true;
+
+    setTimeout(() => {
+        visible.value = false;
+    }, 3500);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        showMessage() {
+            this.visible = true;
+
+            setTimeout(() => {
+                this.visible = false;
+            }, 3500);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/OutlinedDoc.vue b/apps/labs/doc/message/OutlinedDoc.vue
new file mode 100644
index 000000000..b4660ca98
--- /dev/null
+++ b/apps/labs/doc/message/OutlinedDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configure the <i>variant</i> value as <i>outlined</i> for messages with borders and no background.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="outlined">Success Message</Message>
+        <Message severity="info" variant="outlined">Info Message</Message>
+        <Message severity="warn" variant="outlined">Warn Message</Message>
+        <Message severity="error" variant="outlined">Error Message</Message>
+        <Message severity="secondary" variant="outlined">Secondary Message</Message>
+        <Message severity="contrast" variant="outlined">Contrast Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message severity="success" variant="outlined">Success Message</Message>
+<Message severity="info" variant="outlined">Info Message</Message>
+<Message severity="warn" variant="outlined">Warn Message</Message>
+<Message severity="error" variant="outlined">Error Message</Message>
+<Message severity="secondary" variant="outlined">Secondary Message</Message>
+<Message severity="contrast" variant="outlined">Contrast Message</Message>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="outlined">Success Message</Message>
+        <Message severity="info" variant="outlined">Info Message</Message>
+        <Message severity="warn" variant="outlined">Warn Message</Message>
+        <Message severity="error" variant="outlined">Error Message</Message>
+        <Message severity="secondary" variant="outlined">Secondary Message</Message>
+        <Message severity="contrast" variant="outlined">Contrast Message</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success" variant="outlined">Success Message</Message>
+        <Message severity="info" variant="outlined">Info Message</Message>
+        <Message severity="warn" variant="outlined">Warn Message</Message>
+        <Message severity="error" variant="outlined">Error Message</Message>
+        <Message severity="secondary" variant="outlined">Secondary Message</Message>
+        <Message severity="contrast" variant="outlined">Contrast Message</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/SeverityDoc.vue b/apps/labs/doc/message/SeverityDoc.vue
new file mode 100644
index 000000000..1273078bc
--- /dev/null
+++ b/apps/labs/doc/message/SeverityDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>severity</i> option specifies the type of the message.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success">Success Message</Message>
+        <Message severity="info">Info Message</Message>
+        <Message severity="warn">Warn Message</Message>
+        <Message severity="error">Error Message</Message>
+        <Message severity="secondary">Secondary Message</Message>
+        <Message severity="contrast">Contrast Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message severity="success">Success Message</Message>
+<Message severity="info">Info Message</Message>
+<Message severity="warn">Warn Message</Message>
+<Message severity="error">Error Message</Message>
+<Message severity="secondary">Secondary Message</Message>
+<Message severity="contrast">Contrast Message</Message>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success">Success Message</Message>
+        <Message severity="info">Info Message</Message>
+        <Message severity="warn">Warn Message</Message>
+        <Message severity="error">Error Message</Message>
+        <Message severity="secondary">Secondary Message</Message>
+        <Message severity="contrast">Contrast Message</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Message severity="success">Success Message</Message>
+        <Message severity="info">Info Message</Message>
+        <Message severity="warn">Warn Message</Message>
+        <Message severity="error">Error Message</Message>
+        <Message severity="secondary">Secondary Message</Message>
+        <Message severity="contrast">Contrast Message</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/SimpleDoc.vue b/apps/labs/doc/message/SimpleDoc.vue
new file mode 100644
index 000000000..8d1bdeb8e
--- /dev/null
+++ b/apps/labs/doc/message/SimpleDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configure the <i>variant</i> value as <i>simple</i> for messages without borders, backgrounds and paddings.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-8 justify-center">
+        <Message severity="success" variant="simple">Success Message</Message>
+        <Message severity="info" variant="simple">Info Message</Message>
+        <Message severity="warn" variant="simple">Warn Message</Message>
+        <Message severity="error" variant="simple">Error Message</Message>
+        <Message severity="secondary" variant="simple">Secondary Message</Message>
+        <Message severity="contrast" variant="simple">Contrast Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message severity="success" variant="simple">Success Message</Message>
+<Message severity="info" variant="simple">Info Message</Message>
+<Message severity="warn" variant="simple">Warn Message</Message>
+<Message severity="error" variant="simple">Error Message</Message>
+<Message severity="secondary" variant="simple">Secondary Message</Message>
+<Message severity="contrast" variant="simple">Contrast Message</Message>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-8 justify-center">
+        <Message severity="success" variant="simple">Success Message</Message>
+        <Message severity="info" variant="simple">Info Message</Message>
+        <Message severity="warn" variant="simple">Warn Message</Message>
+        <Message severity="error" variant="simple">Error Message</Message>
+        <Message severity="secondary" variant="simple">Secondary Message</Message>
+        <Message severity="contrast" variant="simple">Contrast Message</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-8 justify-center">
+        <Message severity="success" variant="simple">Success Message</Message>
+        <Message severity="info" variant="simple">Info Message</Message>
+        <Message severity="warn" variant="simple">Warn Message</Message>
+        <Message severity="error" variant="simple">Error Message</Message>
+        <Message severity="secondary" variant="simple">Secondary Message</Message>
+        <Message severity="contrast" variant="simple">Contrast Message</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/message/SizesDoc.vue b/apps/labs/doc/message/SizesDoc.vue
new file mode 100644
index 000000000..15a21ca48
--- /dev/null
+++ b/apps/labs/doc/message/SizesDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Message size="small" icon="pi pi-send">Small Message</Message>
+        <Message icon="pi pi-user">Normal Message</Message>
+        <Message size="large" icon="pi pi-check">Large Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message size="small" icon="pi pi-send">Small Message</Message>
+<Message icon="pi pi-user">Normal Message</Message>
+<Message size="large" icon="pi pi-check">Large Message</Message>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Message size="small" icon="pi pi-send">Small Message</Message>
+        <Message icon="pi pi-user">Normal Message</Message>
+        <Message size="large" icon="pi pi-check">Large Message</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Message size="small" icon="pi pi-send">Small Message</Message>
+        <Message icon="pi pi-user">Normal Message</Message>
+        <Message size="large" icon="pi pi-check">Large Message</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/metergroup/AccessibilityDoc.vue b/apps/labs/doc/metergroup/AccessibilityDoc.vue
new file mode 100644
index 000000000..9dbdf98ce
--- /dev/null
+++ b/apps/labs/doc/metergroup/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>MeterGroup component uses <i>meter</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> prop.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/metergroup/BasicDoc.vue b/apps/labs/doc/metergroup/BasicDoc.vue
new file mode 100644
index 000000000..73d49dae5
--- /dev/null
+++ b/apps/labs/doc/metergroup/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }],
+            code: {
+                basic: `
+<MeterGroup :value="value" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }],
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/metergroup/IconDoc.vue b/apps/labs/doc/metergroup/IconDoc.vue
new file mode 100644
index 000000000..db2c19cb6
--- /dev/null
+++ b/apps/labs/doc/metergroup/IconDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Icons can be displayed next to the labels instead of the default marker.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+                { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+                { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+                { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+                { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+                { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+                { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+    { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+    { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+    { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/metergroup/ImportDoc.vue b/apps/labs/doc/metergroup/ImportDoc.vue
new file mode 100644
index 000000000..0994d4f81
--- /dev/null
+++ b/apps/labs/doc/metergroup/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import MeterGroup from 'primevue/metergroup';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/metergroup/LabelDoc.vue b/apps/labs/doc/metergroup/LabelDoc.vue
new file mode 100644
index 000000000..1bf85a2f3
--- /dev/null
+++ b/apps/labs/doc/metergroup/LabelDoc.vue
@@ -0,0 +1,72 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The position of the labels relative to the meters is defined using the <i>labelPosition</i> property. The default orientation of the labels is horizontal, and the vertical alternative is available through the
+            <i>labelOrientation</i> option.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { label: 'Apps', color: '#34d399', value: 16 },
+    { label: 'Messages', color: '#fbbf24', value: 8 },
+    { label: 'Media', color: '#60a5fa', value: 24 },
+    { label: 'System', color: '#c084fc', value: 10 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/metergroup/MinMaxDoc.vue b/apps/labs/doc/metergroup/MinMaxDoc.vue
new file mode 100644
index 000000000..6294de068
--- /dev/null
+++ b/apps/labs/doc/metergroup/MinMaxDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" :max="200" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" :max="200"  />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" :max="200"  />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
+            ],
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" :max="200"  />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { label: 'Apps', color: '#34d399', value: 16 },
+    { label: 'Messages', color: '#fbbf24', value: 8 },
+    { label: 'Media', color: '#60a5fa', value: 24 },
+    { label: 'System', color: '#c084fc', value: 10 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/metergroup/MultipleDoc.vue b/apps/labs/doc/metergroup/MultipleDoc.vue
new file mode 100644
index 000000000..3fd4bf1af
--- /dev/null
+++ b/apps/labs/doc/metergroup/MultipleDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Adding more items to the array displays the meters in a group.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 16 },
+                { label: 'Messages', color: '#fbbf24', value: 8 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 10 }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { label: 'Apps', color: '#34d399', value: 16 },
+    { label: 'Messages', color: '#fbbf24', value: 8 },
+    { label: 'Media', color: '#60a5fa', value: 24 },
+    { label: 'System', color: '#c084fc', value: 10 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/metergroup/TemplateDoc.vue b/apps/labs/doc/metergroup/TemplateDoc.vue
new file mode 100644
index 000000000..2a4678f16
--- /dev/null
+++ b/apps/labs/doc/metergroup/TemplateDoc.vue
@@ -0,0 +1,213 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MeterGroup provides templating support for labels, meter items, and content around the meters.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-wrap gap-4">
+                    <template v-for="val of value" :key="val.label">
+                        <Card class="flex-1 border border-surface shadow-none">
+                            <template #content>
+                                <div class="flex justify-between gap-8">
+                                    <div class="flex flex-col gap-1">
+                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
+                                        <span class="font-bold text-lg">{{ val.value }}%</span>
+                                    </div>
+                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
+                                        <i :class="val.icon" />
+                                    </span>
+                                </div>
+                            </template>
+                        </Card>
+                    </template>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" />
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex justify-between mt-4 mb-2 relative">
+                    <span>Storage</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
+                    <span class="font-medium">1TB</span>
+                </div>
+            </template>
+            <template #end>
+                <div class="flex justify-between mt-4">
+                    <Button label="Manage Storage" outlined size="small" />
+                    <Button label="Update Plan" size="small" />
+                </div>
+            </template>
+        </MeterGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+                { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+                { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+                { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" labelPosition="start">
+    <template #label="{ value }">
+        <div class="flex flex-wrap gap-4">
+            <template v-for="val of value" :key="val.label">
+                <Card class="flex-1 border border-surface shadow-none">
+                    <template #content>
+                        <div class="flex justify-between gap-8">
+                            <div class="flex flex-col gap-1">
+                                <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
+                                <span class="font-bold text-lg">{{ val.value }}%</span>
+                            </div>
+                            <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                                <i :class="val.icon" />
+                            </span>
+                        </div>
+                    </template>
+                </Card>
+            </template>
+        </div>
+    </template>
+    <template #meter="slotProps">
+        <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
+    </template>
+    <template #start="{ totalPercent }">
+        <div class="flex justify-between mt-4 mb-2 relative">
+            <span>Storage</span>
+            <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
+            <span class="font-medium">1TB</span>
+        </div>
+    </template>
+    <template #end>
+        <div class="flex justify-between mt-4">
+            <Button label="Manage Storage" outlined size="small" />
+            <Button label="Update Plan" size="small" />
+        </div>
+    </template>
+</MeterGroup>
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-wrap gap-4">
+                    <template v-for="val of value" :key="val.label">
+                        <Card class="flex-1 border border-surface shadow-none">
+                            <template #content>
+                                <div class="flex justify-between gap-8">
+                                    <div class="flex flex-col gap-1">
+                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
+                                        <span class="font-bold text-lg">{{ val.value }}%</span>
+                                    </div>
+                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                                        <i :class="val.icon" />
+                                    </span>
+                                </div>
+                            </template>
+                        </Card>
+                    </template>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex justify-between mt-4 mb-2 relative">
+                    <span>Storage</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
+                    <span class="font-medium">1TB</span>
+                </div>
+            </template>
+            <template #end>
+                <div class="flex justify-between mt-4">
+                    <Button label="Manage Storage" outlined size="small" />
+                    <Button label="Update Plan" size="small" />
+                </div>
+            </template>
+        </MeterGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+                { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+                { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+                { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-wrap gap-4">
+                    <template v-for="val of value" :key="i">
+                        <Card class="flex-1 border border-surface shadow-none">
+                            <template #content>
+                                <div class="flex justify-between gap-8">
+                                    <div class="flex flex-col gap-1">
+                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
+                                        <span class="font-bold text-lg">{{ val.value }}%</span>
+                                    </div>
+                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                                        <i :class="val.icon" />
+                                    </span>
+                                </div>
+                            </template>
+                        </Card>
+                    </template>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex justify-between mt-4 mb-2 relative">
+                    <span>Storage</span>
+                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
+                    <span class="font-medium">1TB</span>
+                </div>
+            </template>
+            <template #end>
+                <div class="flex justify-between mt-4">
+                    <Button label="Manage Storage" outlined size="small" />
+                    <Button label="Update Plan" size="small" />
+                </div>
+            </template>
+        </MeterGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+    { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+    { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+    { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/metergroup/VerticalDoc.vue b/apps/labs/doc/metergroup/VerticalDoc.vue
new file mode 100644
index 000000000..ee8a757b6
--- /dev/null
+++ b/apps/labs/doc/metergroup/VerticalDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts either <i>horizontal</i> or <i>vertical</i> as available options.</p>
+    </DocSectionText>
+    <div class="card flex justify-center" style="height: 360px">
+        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 24 },
+                { label: 'Messages', color: '#fbbf24', value: 16 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 12 }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center" style="height: 360px">
+        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { label: 'Apps', color: '#34d399', value: 24 },
+                { label: 'Messages', color: '#fbbf24', value: 16 },
+                { label: 'Media', color: '#60a5fa', value: 24 },
+                { label: 'System', color: '#c084fc', value: 12 }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center" style="height: 360px">
+        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { label: 'Apps', color: '#34d399', value: 24 },
+    { label: 'Messages', color: '#fbbf24', value: 16 },
+    { label: 'Media', color: '#60a5fa', value: 24 },
+    { label: 'System', color: '#c084fc', value: 12 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/AccessibilityDoc.vue b/apps/labs/doc/multiselect/AccessibilityDoc.vue
new file mode 100644
index 000000000..8e3f69da7
--- /dev/null
+++ b/apps/labs/doc/multiselect/AccessibilityDoc.vue
@@ -0,0 +1,241 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
+            The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
+        </p>
+        <p>The popup listbox uses <i>listbox</i> as the role with <i>aria-multiselectable</i> enabled. Each list item has an <i>option</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.</p>
+
+        <p>
+            Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
+        </p>
+
+        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p>
+
+        <p>
+            Close button uses <i>close</i> key of the <i>aria</i> property from the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API as the <i>aria-label</i> by default, this can be
+            overriden with the <i>closeButtonProps</i>.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Closed State Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none then first option receives the focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Popup Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the selection state of the focused option, then moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the selection state of the focused option, then moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the items between the most recently selected option and the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused options and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused options and all the options down to the last one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all options.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Toggle All Checkbox Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Filter Input Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="dd1"></span>Options</span>
+<MultiSelect aria-labelledby="dd1" />
+
+<MultiSelect aria-label="Options" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/BasicDoc.vue b/apps/labs/doc/multiselect/BasicDoc.vue
new file mode 100644
index 000000000..3a5fedcd3
--- /dev/null
+++ b/apps/labs/doc/multiselect/BasicDoc.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            MultiSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
+            Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+    :maxSelectedLabels="3" class="w-full md:w-80" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/ChipsDoc.vue b/apps/labs/doc/multiselect/ChipsDoc.vue
new file mode 100644
index 000000000..3dbe2e740
--- /dev/null
+++ b/apps/labs/doc/multiselect/ChipsDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Selected values are displayed as a comma separated list by default, setting <i>display</i> as <i>chip</i> displays them as chips.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+    :maxSelectedLabels="3" class="w-full md:w-80" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/ClearIconDoc.vue b/apps/labs/doc/multiselect/ClearIconDoc.vue
new file mode 100644
index 000000000..89b0e8747
--- /dev/null
+++ b/apps/labs/doc/multiselect/ClearIconDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the MultiSelect.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" showClear :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+    :maxSelectedLabels="3" class="w-full md:w-80" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/DisabledDoc.vue b/apps/labs/doc/multiselect/DisabledDoc.vue
new file mode 100644
index 000000000..503d747af
--- /dev/null
+++ b/apps/labs/doc/multiselect/DisabledDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
+`,
+                options: `
+<template>
+    <div class="flex justify-center">
+        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="flex justify-center">
+        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/FilledDoc.vue b/apps/labs/doc/multiselect/FilledDoc.vue
new file mode 100644
index 000000000..edc322c58
--- /dev/null
+++ b/apps/labs/doc/multiselect/FilledDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+    :maxSelectedLabels="3" class="w-full md:w-80" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/FilterDoc.vue b/apps/labs/doc/multiselect/FilterDoc.vue
new file mode 100644
index 000000000..fc93eb63f
--- /dev/null
+++ b/apps/labs/doc/multiselect/FilterDoc.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
+            fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
+    :maxSelectedLabels="3" class="w-full md:w-80" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/FloatLabelDoc.vue b/apps/labs/doc/multiselect/FloatLabelDoc.vue
new file mode 100644
index 000000000..e9adce82e
--- /dev/null
+++ b/apps/labs/doc/multiselect/FloatLabelDoc.vue
@@ -0,0 +1,133 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-80">
+            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<FloatLabel class="w-full md:w-80">
+    <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-80" variant="in">
+    <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-80" variant="on">
+    <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-80">
+            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-80">
+            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/FormsDoc.vue b/apps/labs/doc/multiselect/FormsDoc.vue
new file mode 100644
index 000000000..e7007ec24
--- /dev/null
+++ b/apps/labs/doc/multiselect/FormsDoc.vue
@@ -0,0 +1,167 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
+            <div class="flex flex-col gap-1">
+                <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" fluid />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                city: []
+            },
+            resolver: zodResolver(
+                z.object({
+                    city: z
+                        .array(
+                            z.object({
+                                name: z.string().min(1, 'City is required.')
+                            })
+                        )
+                        .min(1, 'City is required.')
+                })
+            ),
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+    <div class="flex flex-col gap-1">
+        <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
+        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                city: []
+            },
+            resolver: zodResolver(
+                z.object({
+                    city: z
+                    .array(
+                        z.object({
+                            name: z.string().min(1, 'City is required.')
+                        })
+                    )
+                    .min(1, 'City is required.')
+                })
+            ),
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    city: []
+});
+const resolver = ref(zodResolver(
+    z.object({
+        city: z
+            .array(
+                z.object({
+                    name: z.string().min(1, 'City is required.')
+                })
+            )
+            .min(1, 'City is required.')
+    })
+));
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/GroupDoc.vue b/apps/labs/doc/multiselect/GroupDoc.vue
new file mode 100644
index 000000000..6b3da3766
--- /dev/null
+++ b/apps/labs/doc/multiselect/GroupDoc.vue
@@ -0,0 +1,181 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the children
+            of a group.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </MultiSelect>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
+    <template #optiongroup="slotProps">
+        <div class="flex items-center">
+            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.option.label }}</div>
+        </div>
+    </template>
+</MultiSelect>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </MultiSelect>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </MultiSelect>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const groupedCities = ref([
+    {
+        label: 'Germany',
+        code: 'DE',
+        items: [
+            { label: 'Berlin', value: 'Berlin' },
+            { label: 'Frankfurt', value: 'Frankfurt' },
+            { label: 'Hamburg', value: 'Hamburg' },
+            { label: 'Munich', value: 'Munich' }
+        ]
+    },
+    {
+        label: 'USA',
+        code: 'US',
+        items: [
+            { label: 'Chicago', value: 'Chicago' },
+            { label: 'Los Angeles', value: 'Los Angeles' },
+            { label: 'New York', value: 'New York' },
+            { label: 'San Francisco', value: 'San Francisco' }
+        ]
+    },
+    {
+        label: 'Japan',
+        code: 'JP',
+        items: [
+            { label: 'Kyoto', value: 'Kyoto' },
+            { label: 'Osaka', value: 'Osaka' },
+            { label: 'Tokyo', value: 'Tokyo' },
+            { label: 'Yokohama', value: 'Yokohama' }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/IftaLabelDoc.vue b/apps/labs/doc/multiselect/IftaLabelDoc.vue
new file mode 100644
index 000000000..d4b417236
--- /dev/null
+++ b/apps/labs/doc/multiselect/IftaLabelDoc.vue
@@ -0,0 +1,87 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
+            <label for="ms_cities">Cities</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<IftaLabel>
+    <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
+    <label for="ms_cities">Cities</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
+            <label for="ms_cities">Cities</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full"variant="filled" />
+            <label for="ms_cities">Cities</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/ImportDoc.vue b/apps/labs/doc/multiselect/ImportDoc.vue
new file mode 100644
index 000000000..d83e23c70
--- /dev/null
+++ b/apps/labs/doc/multiselect/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import MultiSelect from 'primevue/multiselect';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/InvalidDoc.vue b/apps/labs/doc/multiselect/InvalidDoc.vue
new file mode 100644
index 000000000..33f901399
--- /dev/null
+++ b/apps/labs/doc/multiselect/InvalidDoc.vue
@@ -0,0 +1,88 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
+        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities1: [],
+            selectedCities2: [],
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+        :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
+<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+        :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+                :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
+        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+                :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities1: [],
+            selectedCities2: [],
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+                :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
+        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+                :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities1 = ref([]);
+const selectedCities2 = ref([]);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/LoadingStateDoc.vue b/apps/labs/doc/multiselect/LoadingStateDoc.vue
new file mode 100644
index 000000000..0ad78452f
--- /dev/null
+++ b/apps/labs/doc/multiselect/LoadingStateDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Loading state can be used <i>loading</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/SizesDoc.vue b/apps/labs/doc/multiselect/SizesDoc.vue
new file mode 100644
index 000000000..1e8f07828
--- /dev/null
+++ b/apps/labs/doc/multiselect/SizesDoc.vue
@@ -0,0 +1,89 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MultiSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
+        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
+        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
+<MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
+<MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
+        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
+        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
+        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
+        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const countries = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/TemplateDoc.vue b/apps/labs/doc/multiselect/TemplateDoc.vue
new file mode 100644
index 000000000..1665410e5
--- /dev/null
+++ b/apps/labs/doc/multiselect/TemplateDoc.vue
@@ -0,0 +1,178 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MultiSelect offers multiple slots for customization through templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #filtericon>
+                <i class="pi pi-map-marker" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
+                </div>
+            </template>
+        </MultiSelect>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCountries: null,
+            countries: [
+                { name: 'Australia', code: 'AU' },
+                { name: 'Brazil', code: 'BR' },
+                { name: 'China', code: 'CN' },
+                { name: 'Egypt', code: 'EG' },
+                { name: 'France', code: 'FR' },
+                { name: 'Germany', code: 'DE' },
+                { name: 'India', code: 'IN' },
+                { name: 'Japan', code: 'JP' },
+                { name: 'Spain', code: 'ES' },
+                { name: 'United States', code: 'US' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
+    <template #option="slotProps">
+        <div class="flex items-center">
+            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.option.name }}</div>
+        </div>
+    </template>
+    <template #dropdownicon>
+        <i class="pi pi-map" />
+    </template>
+    <template #filtericon>
+        <i class="pi pi-map-marker" />
+    </template>
+    <template #header>
+        <div class="font-medium px-3 py-2">Available Countries</div>
+    </template>
+    <template #footer>
+        <div class="p-3 flex justify-between">
+            <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+            <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
+        </div>
+    </template>
+</MultiSelect>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #filtericon>
+                <i class="pi pi-map-marker" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
+                </div>
+            </template>
+        </MultiSelect>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCountries: null,
+            countries: [
+                { name: 'Australia', code: 'AU' },
+                { name: 'Brazil', code: 'BR' },
+                { name: 'China', code: 'CN' },
+                { name: 'Egypt', code: 'EG' },
+                { name: 'France', code: 'FR' },
+                { name: 'Germany', code: 'DE' },
+                { name: 'India', code: 'IN' },
+                { name: 'Japan', code: 'JP' },
+                { name: 'Spain', code: 'ES' },
+                { name: 'United States', code: 'US' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #filtericon>
+                <i class="pi pi-map-marker" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
+                </div>
+            </template>
+        </MultiSelect>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCountries = ref();
+const countries = ref([
+    { name: 'Australia', code: 'AU' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'China', code: 'CN' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'France', code: 'FR' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'India', code: 'IN' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'United States', code: 'US' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/multiselect/VirtualScrollDoc.vue b/apps/labs/doc/multiselect/VirtualScrollDoc.vue
new file mode 100644
index 000000000..5830ef027
--- /dev/null
+++ b/apps/labs/doc/multiselect/VirtualScrollDoc.vue
@@ -0,0 +1,107 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the
+            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by MultiSelect.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <MultiSelect
+            v-model="selectedItems"
+            :options="items"
+            :maxSelectedLabels="3"
+            :selectAll="selectAll"
+            @selectall-change="onSelectAllChange($event)"
+            @change="onChange($event)"
+            optionLabel="label"
+            optionValue="value"
+            :virtualScrollerOptions="{ itemSize: 44 }"
+            filter
+            placeholder="Select Item"
+            class="w-full md:w-80"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedItems: null,
+            selectAll: false,
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
+            code: {
+                basic: `
+<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
+    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
+            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedItems: null,
+            selectAll: false,
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
+        };
+    },
+    methods: {
+        onSelectAllChange(event) {
+            this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
+            this.selectAll = event.checked;
+        },
+        onChange(event) {
+            this.selectAll = event.value.length === this.items.length;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
+            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+
+const selectedItems = ref();
+const selectAll = ref(false);
+const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+
+const onSelectAllChange = (event) => {
+    selectedItems.value = event.checked ? items.value.map((item) => item.value) : [];
+    selectAll.value = event.checked;
+};
+const onChange = (event) => {
+    selectAll.value = event.value.length === items.value.length;
+}
+
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        onSelectAllChange(event) {
+            this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
+            this.selectAll = event.checked;
+        },
+        onChange(event) {
+            this.selectAll = event.value.length === this.items.length;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/nuxt/CSSVariablesDoc.vue b/apps/labs/doc/nuxt/CSSVariablesDoc.vue
new file mode 100644
index 000000000..868f14201
--- /dev/null
+++ b/apps/labs/doc/nuxt/CSSVariablesDoc.vue
@@ -0,0 +1,97 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Final step is defining the default values for the colors in RGB format, this can be done in a global CSS file in your Nuxt application. See the
+            <a href="https://nuxt.com/docs/getting-started/styling" target="_blank" rel="noopener noreferrer">styling</a> section at Nuxt documentation for more information.
+        </p>
+        <p>With a future update of the primeui tailwind plugin, this step will be done implicitly.</p>
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+/* Primary and Surface Palettes */
+:root {
+    --p-primary-50: #ecfdf5;
+    --p-primary-100: #d1fae5;
+    --p-primary-200: #a7f3d0;
+    --p-primary-300: #6ee7b7;
+    --p-primary-400: #34d399;
+    --p-primary-500: #10b981;
+    --p-primary-600: #059669;
+    --p-primary-700: #047857;
+    --p-primary-800: #065f46;
+    --p-primary-900: #064e3b;
+    --p-primary-950: #022c22;
+    --p-surface-0: #ffffff;
+    --p-surface-50: #fafafa;
+    --p-surface-100: #f4f4f5;
+    --p-surface-200: #e4e4e7;
+    --p-surface-300: #d4d4d8;
+    --p-surface-400: #a1a1aa;
+    --p-surface-500: #71717a;
+    --p-surface-600: #52525b;
+    --p-surface-700: #3f3f46;
+    --p-surface-800: #27272a;
+    --p-surface-900: #18181b;
+    --p-surface-950: #09090b;
+    --p-content-border-radius: 6px;
+}
+
+/* Light */
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+/* 
+ * Dark Mode
+ * Defaults to system, change the selector to match the darkMode in tailwind.config.
+ * For example; 
+ * darkMode: ['selector', '[class*="app-dark"]'] 
+ * should be;
+ * :root[class="app-dark"] {
+*/
+@media (prefers-color-scheme: dark) {
+    :root {
+        --p-primary-color: var(--p-primary-400);
+        --p-primary-contrast-color: var(--p-surface-900);
+        --p-primary-hover-color: var(--p-primary-300);
+        --p-primary-active-color: var(--p-primary-200);
+        --p-content-border-color: var(--p-surface-700);
+        --p-content-hover-background: var(--p-surface-800);
+        --p-content-hover-color: var(--p-surface-0);
+        --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+        --p-highlight-color: rgba(255, 255, 255, 0.87);
+        --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+        --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
+        --p-text-color: var(--p-surface-0);
+        --p-text-hover-color: var(--p-surface-0);
+        --p-text-muted-color: var(--p-surface-400);
+        --p-text-hover-muted-color: var(--p-surface-300);
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/nuxt/DownloadDoc.vue b/apps/labs/doc/nuxt/DownloadDoc.vue
new file mode 100644
index 000000000..7b109e2de
--- /dev/null
+++ b/apps/labs/doc/nuxt/DownloadDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue" target="_blank" rel="noopener noreferrer">npm registry</a>. For this setup, we'll also use the <i>@primevue/nuxt-module</i> module.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+# Using npm
+npm install primevue
+npm install --save-dev @primevue/nuxt-module
+
+# Using yarn
+yarn add primevue
+yarn add --dev @primevue/nuxt-module
+
+# Using pnpm
+pnpm add primevue
+pnpm add -D @primevue/nuxt-module
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/nuxt/ExampleDoc.vue b/apps/labs/doc/nuxt/ExampleDoc.vue
new file mode 100644
index 000000000..39f84b4d3
--- /dev/null
+++ b/apps/labs/doc/nuxt/ExampleDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Visit the <a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-unstyled-tailwind" target="_blank" rel="noopener noreferrer">nuxt-unstyled-tailwind</a> project as an example.</p>
+    </DocSectionText>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/apps/labs/doc/nuxt/NuxtConfigDoc.vue b/apps/labs/doc/nuxt/NuxtConfigDoc.vue
new file mode 100644
index 000000000..a57619914
--- /dev/null
+++ b/apps/labs/doc/nuxt/NuxtConfigDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>In your <i>nuxt-config</i> file, add the <i>@primevue/nuxt-module</i> module and configure PrimeVue plugin with theme set as <i>none</i>, this option disables the default design token based theming..</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+export default defineNuxtConfig({
+    modules: [
+        '@primevue/nuxt-module'
+    ],
+    primevue: {
+        options: {
+            theme: 'none'
+        }
+    }
+})
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/nuxt/StylesDoc.vue b/apps/labs/doc/nuxt/StylesDoc.vue
new file mode 100644
index 000000000..8ab832273
--- /dev/null
+++ b/apps/labs/doc/nuxt/StylesDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Download a release from <a href="https://github.com/primefaces/primevue-tailwind/releases" target="_blank" rel="noopener noreferrer">github</a> that matches your PrimeVue version. The minimum version requirement is v4.1.1. Once the zip is
+            downloaded, extract the contents to a folder e.g. <i>./src/assets/primevue</i> .
+        </p>
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: ` 
+- src
+  - assets
+    - primevue
+      - common.css
+      - button.css
+      - ...
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/nuxt/TailwindDoc.vue b/apps/labs/doc/nuxt/TailwindDoc.vue
new file mode 100644
index 000000000..597dc10de
--- /dev/null
+++ b/apps/labs/doc/nuxt/TailwindDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            You may either choose to install the <a href="https://github.com/nuxt-modules/tailwindcss" target="_blank" rel="noopener noreferrer">@nuxtjs/tailwindcss module</a> or
+            <a href="https://tailwindcss.com/docs/guides/nuxtjs" target="_blank" rel="noopener noreferrer">install Tailwind CSS manually</a>; the prerequisite steps are covered by their guides. If you have Nuxt and Tailwind configured successfully,
+            follow the next steps.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/nuxt/tailwind/ImportStylesDoc.vue b/apps/labs/doc/nuxt/tailwind/ImportStylesDoc.vue
new file mode 100644
index 000000000..b99512210
--- /dev/null
+++ b/apps/labs/doc/nuxt/tailwind/ImportStylesDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Instead of the <i>@tailwind</i> directive, import the styles from node_modules.</p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+
+        <p>Add PrimeVue styles between the components and utilities.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+/* Don't use @tailwind */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`
+            },
+            code2: {
+                basic: `
+/* Use @import */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "./primevue/tailwind.css";
+@import "tailwindcss/utilities";
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/nuxt/tailwind/PostCSSImportDoc.vue b/apps/labs/doc/nuxt/tailwind/PostCSSImportDoc.vue
new file mode 100644
index 000000000..9ad40011b
--- /dev/null
+++ b/apps/labs/doc/nuxt/tailwind/PostCSSImportDoc.vue
@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports" target="_blank" rel="noopener noreferrer">postcss-import</a> plugin manages organization of multiple CSS files at build time. Begin with downloading
+            the plugin.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+
+        <p>Add it as the first plugin at your PostCSS configuration.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+npm install -D postcss-import
+`
+            },
+            code2: {
+                basic: `
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/nuxt/tailwind/PrimeUIPluginDoc.vue b/apps/labs/doc/nuxt/tailwind/PrimeUIPluginDoc.vue
new file mode 100644
index 000000000..7c1f3a691
--- /dev/null
+++ b/apps/labs/doc/nuxt/tailwind/PrimeUIPluginDoc.vue
@@ -0,0 +1,34 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://github.com/primefaces/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
+            PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+
+        <p>Configure Tailwind to use the plugin.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+npm i tailwindcss-primeui
+`
+            },
+            code2: {
+                basic: `
+module.exports = {
+    // ...
+    plugins: [require('tailwindcss-primeui')]
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/orderlist/AccessibilityDoc.vue b/apps/labs/doc/orderlist/AccessibilityDoc.vue
new file mode 100644
index 000000000..1b8eaff64
--- /dev/null
+++ b/apps/labs/doc/orderlist/AccessibilityDoc.vue
@@ -0,0 +1,138 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the listbox can be provided with <i>listProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute. Each list item
+            has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
+        </p>
+        <p>
+            Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i> and <i>aria.moveBottom</i> properties of the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and
+            <i>moveBottomButtonProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>ListBox Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the items between the most recently selected option and the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused options and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused options and all the options down to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all options.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Buttons Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Executes button action.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Executes button action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="lb">Options</span>
+<OrderList aria-labelledby="lb" />
+
+<OrderList aria-label="City" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/orderlist/BasicDoc.vue b/apps/labs/doc/orderlist/BasicDoc.vue
new file mode 100644
index 000000000..b943bf003
--- /dev/null
+++ b/apps/labs/doc/orderlist/BasicDoc.vue
@@ -0,0 +1,99 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>option</i> template for its content.</p>
+    </DocSectionText>
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
+            <template #option="{ option }">
+                {{ option.name }}
+            </template>
+        </OrderList>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
+    <template #option="{ option }">
+        {{ option.name }}
+    </template>
+</OrderList>
+`,
+                options: `
+<template>
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
+            <template #option="{ option }">
+                {{ option.name }}
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService'
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
+            <template #option="{ option }">
+                {{ option.name }}
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/orderlist/ImportDoc.vue b/apps/labs/doc/orderlist/ImportDoc.vue
new file mode 100644
index 000000000..ec94ed990
--- /dev/null
+++ b/apps/labs/doc/orderlist/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import OrderList from 'primevue/orderlist';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/orderlist/TemplateDoc.vue b/apps/labs/doc/orderlist/TemplateDoc.vue
new file mode 100644
index 000000000..74b22176c
--- /dev/null
+++ b/apps/labs/doc/orderlist/TemplateDoc.vue
@@ -0,0 +1,126 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>For custom content support define an <i>option</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p>
+    </DocSectionText>
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
+            <template #option="{ option, selected }">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
+                    <div class="flex-1 flex flex-col">
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
+                    </div>
+                    <span class="font-bold sm:ml-8">${{ option.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
+    <template #option="{ option , selected }">
+        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
+            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
+            <div class="flex-1 flex flex-col">
+                <span class="font-medium text-sm">{{ option.name }}</span>
+                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
+            </div>
+            <span class="font-bold sm:ml-8">\${{ option.price }}</span>
+        </div>
+    </template>
+</OrderList>
+`,
+                options: `
+<template>
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
+            <template #option="{ option , selected }">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
+                    <div class="flex-1 flex flex-col">
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
+                    </div>
+                    <span class="font-bold sm:ml-8">\${{ option.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService'
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
+            <template #option="{ option , selected }">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
+                    <div class="flex-1 flex flex-col">
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
+                    </div>
+                    <span class="font-bold sm:ml-8">\${{ option.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/organizationchart/AccessibilityDoc.vue b/apps/labs/doc/organizationchart/AccessibilityDoc.vue
new file mode 100644
index 000000000..0b87eebc4
--- /dev/null
+++ b/apps/labs/doc/organizationchart/AccessibilityDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of
+            reader support in the upcoming versions.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the focusable elements within the chart.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the expanded state of a node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the expanded state of a node.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/organizationchart/BasicDoc.vue b/apps/labs/doc/organizationchart/BasicDoc.vue
new file mode 100644
index 000000000..e7509ceab
--- /dev/null
+++ b/apps/labs/doc/organizationchart/BasicDoc.vue
@@ -0,0 +1,148 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>OrganizationChart requires a collection of <i>TreeNode</i> instances as a <i>value</i>.</p>
+    </DocSectionText>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data">
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                label: 'Argentina',
+                children: [
+                    {
+                        label: 'Argentina',
+                        children: [
+                            {
+                                label: 'Argentina'
+                            },
+                            {
+                                label: 'Croatia'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'France',
+                        children: [
+                            {
+                                label: 'France'
+                            },
+                            {
+                                label: 'Morocco'
+                            }
+                        ]
+                    }
+                ]
+            },
+            code: {
+                basic: `
+<OrganizationChart :value="data">
+    <template #default="slotProps">
+        <span>{{ slotProps.node.label }}</span>
+    </template>
+</OrganizationChart>
+`,
+                options: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data">
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                label: 'Argentina',
+                children: [
+                    {
+                        label: 'Argentina',
+                        children: [
+                            {
+                                label: 'Argentina'
+                            },
+                            {
+                                label: 'Croatia'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'France',
+                        children: [
+                            {
+                                label: 'France'
+                            },
+                            {
+                                label: 'Morocco'
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data">
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const data = ref({
+    label: 'Argentina',
+    children: [
+        {
+            label: 'Argentina',
+            children: [
+                {
+                    label: 'Argentina'
+                },
+                {
+                    label: 'Croatia'
+                }
+            ]
+        },
+        {
+            label: 'France',
+            children: [
+                {
+                    label: 'France'
+                },
+                {
+                    label: 'Morocco'
+                }
+            ]
+        }
+    ]
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/organizationchart/ColoredDoc.vue b/apps/labs/doc/organizationchart/ColoredDoc.vue
new file mode 100644
index 000000000..7bd02597e
--- /dev/null
+++ b/apps/labs/doc/organizationchart/ColoredDoc.vue
@@ -0,0 +1,259 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Styling a specific node is configured with <i>styleClass</i> and <i>style</i> options of a TreeNode.</p>
+    </DocSectionText>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #person="slotProps">
+                <div class="flex flex-col">
+                    <div class="flex flex-col items-center">
+                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
+                        <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
+                        <span>{{ slotProps.node.data.title }}</span>
+                    </div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                type: 'person',
+                styleClass: '!bg-indigo-100 !text-indigo-900 rounded-xl',
+                data: {
+                    image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
+                    name: 'Amy Elsner',
+                    title: 'CEO'
+                },
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'person',
+                        styleClass: '!bg-purple-100 !text-purple-900 rounded-xl',
+                        data: {
+                            image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
+                            name: 'Anna Fali',
+                            title: 'CMO'
+                        },
+                        children: [
+                            {
+                                label: 'Sales',
+                                styleClass: '!bg-purple-100 !text-purple-900 rounded-xl'
+                            },
+                            {
+                                label: 'Marketing',
+                                styleClass: '!bg-purple-100 !text-purple-900 rounded-xl'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        type: 'person',
+                        styleClass: '!bg-teal-100 !text-teal-900 rounded-xl',
+                        data: {
+                            image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
+                            name: 'Stephen Shaw',
+                            title: 'CTO'
+                        },
+                        children: [
+                            {
+                                label: 'Development',
+                                styleClass: '!bg-teal-100 !text-teal-900 rounded-xl'
+                            },
+                            {
+                                label: 'UI/UX Design',
+                                styleClass: '!bg-teal-100 !text-teal-900 rounded-xl'
+                            }
+                        ]
+                    }
+                ]
+            },
+            code: {
+                basic: `
+<OrganizationChart :value="data" collapsible>
+    <template #person="slotProps">
+        <div class="flex flex-col">
+            <div class="flex flex-col items-center">
+                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
+                <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
+                <span>{{ slotProps.node.data.title }}</span>
+            </div>
+        </div>
+    </template>
+    <template #default="slotProps">
+        <span>{{ slotProps.node.label }}</span>
+    </template>
+</OrganizationChart>
+`,
+                options: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #person="slotProps">
+                <div class="flex flex-col">
+                    <div class="flex flex-col items-center">
+                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
+                        <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
+                        <span>{{ slotProps.node.data.title }}</span>
+                    </div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                type: 'person',
+                styleClass: '!bg-indigo-100 text-white rounded-xl',
+                data: {
+                    image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
+                    name: 'Amy Elsner',
+                    title: 'CEO'
+                },
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'person',
+                        styleClass: '!bg-purple-100 text-white rounded-xl',
+                        data: {
+                            image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
+                            name: 'Anna Fali',
+                            title: 'CMO'
+                        },
+                        children: [
+                            {
+                                label: 'Sales',
+                                styleClass: '!bg-purple-100 text-white rounded-xl'
+                            },
+                            {
+                                label: 'Marketing',
+                                styleClass: '!bg-purple-100 text-white rounded-xl'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        type: 'person',
+                        styleClass: '!bg-teal-100 text-white rounded-xl',
+                        data: {
+                            image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
+                            name: 'Stephen Shaw',
+                            title: 'CTO'
+                        },
+                        children: [
+                            {
+                                label: 'Development',
+                                styleClass: '!bg-teal-100 text-white rounded-xl'
+                            },
+                            {
+                                label: 'UI/UX Design',
+                                styleClass: '!bg-teal-100 text-white rounded-xl'
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #person="slotProps">
+                <div class="flex flex-col">
+                    <div class="flex flex-col items-center">
+                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
+                        <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
+                        <span>{{ slotProps.node.data.title }}</span>
+                    </div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const data = ref({
+    key: '0',
+    type: 'person',
+    styleClass: '!bg-indigo-100 text-white rounded-xl',
+    data: {
+        image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
+        name: 'Amy Elsner',
+        title: 'CEO'
+    },
+    children: [
+        {
+            key: '0_0',
+            type: 'person',
+            styleClass: '!bg-purple-100 text-white rounded-xl',
+            data: {
+                image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
+                name: 'Anna Fali',
+                title: 'CMO'
+            },
+            children: [
+                {
+                    label: 'Sales',
+                    styleClass: '!bg-purple-100 text-white rounded-xl'
+                },
+                {
+                    label: 'Marketing',
+                    styleClass: '!bg-purple-100 text-white rounded-xl'
+                }
+            ]
+        },
+        {
+            key: '0_1',
+            type: 'person',
+            styleClass: '!bg-teal-100 text-white rounded-xl',
+            data: {
+                image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
+                name: 'Stephen Shaw',
+                title: 'CTO'
+            },
+            children: [
+                {
+                    label: 'Development',
+                    styleClass: '!bg-teal-100 text-white rounded-xl'
+                },
+                {
+                    label: 'UI/UX Design',
+                    styleClass: '!bg-teal-100 text-white rounded-xl'
+                }
+            ]
+        }
+    ]
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/organizationchart/ImportDoc.vue b/apps/labs/doc/organizationchart/ImportDoc.vue
new file mode 100644
index 000000000..d611547e8
--- /dev/null
+++ b/apps/labs/doc/organizationchart/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import OrganizationChart from 'primevue/organizationchart';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/organizationchart/SelectionDoc.vue b/apps/labs/doc/organizationchart/SelectionDoc.vue
new file mode 100644
index 000000000..30ca5f0ce
--- /dev/null
+++ b/apps/labs/doc/organizationchart/SelectionDoc.vue
@@ -0,0 +1,252 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the v-model directive. Note that selection on a particular node can be disabled if the
+            <i>selectable</i> is false on the node instance.
+        </p>
+    </DocSectionText>
+    <div class="card overflow-x-auto">
+        <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
+            <template #person="slotProps">
+                <div class="flex flex-col">
+                    <div class="flex flex-col items-center">
+                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
+                        <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
+                        <span>{{ slotProps.node.data.title }}</span>
+                    </div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                type: 'person',
+                data: {
+                    image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
+                    name: 'Amy Elsner',
+                    title: 'CEO'
+                },
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'person',
+                        data: {
+                            image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
+                            name: 'Anna Fali',
+                            title: 'CMO'
+                        },
+                        children: [
+                            {
+                                key: '0_0_0',
+                                label: 'Sales'
+                            },
+                            {
+                                key: '0_0_"1',
+                                label: 'Marketing'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        type: 'person',
+                        data: {
+                            image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
+                            name: 'Stephen Shaw',
+                            title: 'CTO'
+                        },
+                        children: [
+                            {
+                                key: '0_1_0',
+                                label: 'Development'
+                            },
+                            {
+                                key: '0_1_1',
+                                label: 'UI/UX Design'
+                            }
+                        ]
+                    }
+                ]
+            },
+            selection: {},
+            code: {
+                basic: `
+<OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
+    <template #person="slotProps">
+        <div class="flex flex-col">
+            <div class="flex flex-col items-center">
+                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
+                <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
+                <span>{{ slotProps.node.data.title }}</span>
+            </div>
+        </div>
+    </template>
+    <template #default="slotProps">
+        <span>{{ slotProps.node.label }}</span>
+    </template>
+</OrganizationChart>
+`,
+                options: `
+<template>
+    <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
+        <template #person="slotProps">
+            <div class="flex flex-col">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
+                    <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
+                    <span>{{ slotProps.node.data.title }}</span>
+                </div>
+            </div>
+        </template>
+        <template #default="slotProps">
+            <span>{{ slotProps.node.label }}</span>
+        </template>
+    </OrganizationChart>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                type: 'person',
+                data: {
+                    image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
+                    name: 'Amy Elsner',
+                    title: 'CEO'
+                },
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'person',
+                        data: {
+                            image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
+                            name: 'Anna Fali',
+                            title: 'CMO'
+                        },
+                        children: [
+                            {
+                                key: '0_0_0',
+                                label: 'Sales'
+                            },
+                            {
+                                key: '0_0_"1',
+                                label: 'Marketing'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        type: 'person',
+                        data: {
+                            image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
+                            name: 'Stephen Shaw',
+                            title: 'CTO'
+                        },
+                        children: [
+                            {
+                                key: '0_1_0',
+                                label: 'Development'
+                            },
+                            {
+                                key: '0_1_1',
+                                label: 'UI/UX Design'
+                            }
+                        ]
+                    }
+                ]
+            },
+            selection: {}
+        };
+    },
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
+        <template #person="slotProps">
+            <div class="flex flex-col">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
+                    <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
+                    <span>{{ slotProps.node.data.title }}</span>
+                </div>
+            </div>
+        </template>
+        <template #default="slotProps">
+            <span>{{ slotProps.node.label }}</span>
+        </template>
+    </OrganizationChart>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const data = ref({
+    key: '0',
+    type: 'person',
+    data: {
+        image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
+        name: 'Amy Elsner',
+        title: 'CEO'
+    },
+    children: [
+        {
+            key: '0_0',
+            type: 'person',
+            data: {
+                image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
+                name: 'Anna Fali',
+                title: 'CMO'
+            },
+            children: [
+                {
+                    key: '0_0_0',
+                    label: 'Sales'
+                },
+                {
+                    key: '0_0_"1',
+                    label: 'Marketing'
+                }
+            ]
+        },
+        {
+            key: '0_1',
+            type: 'person',
+            data: {
+                image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
+                name: 'Stephen Shaw',
+                title: 'CTO'
+            },
+            children: [
+                {
+                    key: '0_1_0',
+                    label: 'Development'
+                },
+                {
+                    key: '0_1_1',
+                    label: 'UI/UX Design'
+                }
+            ]
+        }
+    ]
+});
+const selection = ref({});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/organizationchart/TemplateDoc.vue b/apps/labs/doc/organizationchart/TemplateDoc.vue
new file mode 100644
index 000000000..123c3b9a7
--- /dev/null
+++ b/apps/labs/doc/organizationchart/TemplateDoc.vue
@@ -0,0 +1,235 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>type</i> property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.</p>
+    </DocSectionText>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #country="slotProps">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem flag flag-${slotProps.node.data}`" />
+                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{ slotProps.node.data.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                type: 'country',
+                label: 'Argentina',
+                data: 'ar',
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'country',
+                        label: 'Argentina',
+                        data: 'ar',
+                        children: [
+                            {
+                                key: '0_0_0',
+                                type: 'country',
+                                label: 'Argentina',
+                                data: 'ar'
+                            },
+                            {
+                                key: '0_0_1',
+                                type: 'country',
+                                label: 'Croatia',
+                                data: 'hr'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        type: 'country',
+                        label: 'France',
+                        data: 'fr',
+                        children: [
+                            {
+                                key: '0_1_0',
+                                type: 'country',
+                                label: 'France',
+                                data: 'fr'
+                            },
+                            {
+                                key: '0_1_1',
+                                type: 'country',
+                                label: 'Morocco',
+                                data: 'ma'
+                            }
+                        ]
+                    }
+                ]
+            },
+            code: {
+                basic: `
+<OrganizationChart :value="data" collapsible>
+    <template #country="slotProps">
+        <div class="flex flex-col items-center">
+            <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
+            <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
+        </div>
+    </template>
+    <template #default="slotProps">
+        <span>{{slotProps.node.data.label}}</span>
+    </template>
+</OrganizationChart>
+`,
+                options: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #country="slotProps">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
+                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{slotProps.node.data.label}}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                type: 'country',
+                label: 'Argentina',
+                data: 'ar',
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'country',
+                        label: 'Argentina',
+                        data: 'ar',
+                        children: [
+                            {
+                                key: '0_0_0',
+                                type: 'country',
+                                label: 'Argentina',
+                                data: 'ar'
+                            },
+                            {
+                                key: '0_0_1',
+                                type: 'country',
+                                label: 'Croatia',
+                                data: 'hr'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        type: 'country',
+                        label: 'France',
+                        data: 'fr',
+                        children: [
+                            {
+                                key: '0_1_0',
+                                type: 'country',
+                                label: 'France',
+                                data: 'fr'
+                            },
+                            {
+                                key: '0_1_1',
+                                type: 'country',
+                                label: 'Morocco',
+                                data: 'ma'
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #country="slotProps">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
+                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{slotProps.node.data.label}}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const data = ref({
+    key: '0',
+    type: 'country',
+    label: 'Argentina',
+    data: 'ar',
+    children: [
+        {
+            key: '0_0',
+            type: 'country',
+            label: 'Argentina',
+            data: 'ar',
+            children: [
+                {
+                    key: '0_0_0',
+                    type: 'country',
+                    label: 'Argentina',
+                    data: 'ar'
+                },
+                {
+                    key: '0_0_1',
+                    type: 'country',
+                    label: 'Croatia',
+                    data: 'hr'
+                }
+            ]
+        },
+        {
+            key: '0_1',
+            type: 'country',
+            label: 'France',
+            data: 'fr',
+            children: [
+                {
+                    key: '0_1_0',
+                    type: 'country',
+                    label: 'France',
+                    data: 'fr'
+                },
+                {
+                    key: '0_1_1',
+                    type: 'country',
+                    label: 'Morocco',
+                    data: 'ma'
+                }
+            ]
+        }
+    ]
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/overview/IdeaDoc.vue b/apps/labs/doc/overview/IdeaDoc.vue
new file mode 100644
index 000000000..a8e963e5c
--- /dev/null
+++ b/apps/labs/doc/overview/IdeaDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            At PrimeTek, we have been developing UI component libraries for 20+ years. Despite the rapid technical enhancements in web, the requirements have not changed significantly. Developers are still expected to build UIs with reusable UI
+            components like dropdowns, tabs, tables, modals and so on. Some teams prefer to use 3rd party UI libraries to save time so that they can focus on the application requirements whereas developing an in-house library may also be preferred to
+            be in full control. We are aiming to find the best of both worlds, a 3rd party UI library that is easy to tune and customize as if it were an in-house library.
+        </p>
+        <p>
+            The most common variable in this equation is styling, for example a modal dialog is a familiar UI item in applications, the main requirements are to be displayed as an overlay and be accessible. Although the requirements are same, the UI
+            and UX would vary depending the design used in the application due to the subjective nature. This is the main idea of an unstyled core, following the same example, PrimeVue
+            <a href="https://primevue.org/dialog/" target="_blank" rel="noopener noreferrer">Dialog</a> component provides a functional pattern out of the box while giving you the complete liberty on styling.
+        </p>
+        <p>
+            Traditional UI libraries have opinionated styling APIs, some prefer to even base it on a design system like Material. These APIs only permit customizing the opinions as they only allow what you can customize and at some point will get in
+            your way. PrimeVue is styled by default, with the upcoming v4 it will also provide a new theming API that is designed to be customizable without restrictions however the unstyled mode of PrimeVue is the key in case you'd like take the
+            freestyle approach without the need to learn new theming APIs.
+        </p>
+        <p>
+            Tailwind is a perfect fit for the unstyled mode of PrimeVue, as it is also unopinionated unlike Bootstrap. There is no <i>btn</i> class in Tailwind, instead it provides the building blocks e.g. utilities to build your own button. PrimeVue
+            takes this approach to the next level by styling the components with Tailwind utilities, so instead of using a class like <i>.p-button</i> to style a Button, styling is done with Tailwind utilities that are served as <i>presets</i>.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/overview/PresetDoc.vue b/apps/labs/doc/overview/PresetDoc.vue
new file mode 100644
index 000000000..c139fc433
--- /dev/null
+++ b/apps/labs/doc/overview/PresetDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            A Tailwind CSS preset is a pass-through object to style PrimeVue, the components are not aware of Tailwind in core as the utility classes are injected via <i>pt</i>. This makes the architecture flexible as another CSS library like UnoCSS
+            or Bootstrap can be used instead of Tailwind.
+        </p>
+        <p>
+            The release bundle contains two built-in presets; <b>lara</b> and <b>aura</b>. In the future, more presets are planned e.g. for Material Design. The presets are implemented for you to use as a base to build your own, you may use them as
+            they are or use them as reference when creating your own design. A preset can only for a single component or multiple, visit the Gallery to view the community driven presets. Releases of presets are not published to NPM as copy-paste
+            approach is a more suitable strategy for easier customization instead of an imported module from node_modules.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+        <p>
+            Presets are reactive, as a result changing the configuration reskins the entire UI suite. This allows switching the design system at runtime e.g. from Material Design from Google to Fluent of Microsoft with a single line instead of
+            rewriting the application with another UI library.
+        </p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+import Lara from '@/presets/lara';
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    unstyled: true,
+    pt: Lara
+});
+`
+            },
+            code2: {
+                basic: `
+import Lara from '@/presets/lara';
+import Aura from '@/presets/aura';
+import { usePrimeVue } from "primevue/config";
+
+const primevue = usePrimeVue();
+
+primevue.config.pt = Lara;
+//or
+primevue.config.pt = Aura;
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/overview/passthrough/GlobalDoc.vue b/apps/labs/doc/overview/passthrough/GlobalDoc.vue
new file mode 100644
index 000000000..f073f2394
--- /dev/null
+++ b/apps/labs/doc/overview/passthrough/GlobalDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PassThrough configuration for each component type can be defined globally with the <i>pt</i> option of PrimeVue.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    pt: {
+        inputtext: {
+            root: 'bg-surface-50 text-surface-900 ...'
+        }
+        panel: {
+            //...
+            header: {
+                class: 'bg-primary-400'
+            }
+        },
+        autocomplete: {
+            //...
+            input: {
+                root: 'w-16rem' // OR { class: 'w-16rem' }
+            }
+        },
+        //...
+    }
+});
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/overview/passthrough/LocalDoc.vue b/apps/labs/doc/overview/passthrough/LocalDoc.vue
new file mode 100644
index 000000000..35ee66f18
--- /dev/null
+++ b/apps/labs/doc/overview/passthrough/LocalDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>This example styles a InputText component by passing the Tailwind utilities to the input element, since PrimeVue is in unstyled mode <i>.p-inputtext</i> class does not exist at all.</p>
+        <div class="card flex justify-center">
+            <InputText type="text" :pt="myInputStyle" placeholder="InputText" />
+        </div>
+        <DocSectionCode :code="code" hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            myInputStyle: {
+                root: 'bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent'
+            },
+            code: {
+                basic: `
+<InputText :pt="myInputStyle" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputText :pt="myInputStyle" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            myInputStyle: {
+                root: 'bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent'
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputText :pt="myInputStyle" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const myInputStyle = ref({
+    root: 'bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent'
+});
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/overview/passthrough/OverrideDoc.vue b/apps/labs/doc/overview/passthrough/OverrideDoc.vue
new file mode 100644
index 000000000..18e959bef
--- /dev/null
+++ b/apps/labs/doc/overview/passthrough/OverrideDoc.vue
@@ -0,0 +1,20 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A global configuration can be overriden with the local <i>pt</i> configuration in case you'd like to change the style of a particular component.</p>
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<InputText :pt="myInputStyle" :ptOptions="{mergeSections: true, mergeProps: false}">
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/overview/passthrough/ReuseDoc.vue b/apps/labs/doc/overview/passthrough/ReuseDoc.vue
new file mode 100644
index 000000000..9e8823cd0
--- /dev/null
+++ b/apps/labs/doc/overview/passthrough/ReuseDoc.vue
@@ -0,0 +1,85 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The set of the utilities can easily be converted to a reusable class using the <i>@apply</i> directive of Tailwind if you'd like to reuse them in your application. Note that, the built-in presets do not follow this approach for reuse as
+            it would mean creating opinionated Tailwind components whereas focus of PrimeVue is creating Vue components. Also it would require us to naming class names and as we all know developers are not good at naming things.
+        </p>
+        <div class="card flex justify-center">
+            <InputText type="text" :pt="myInputStyle" placeholder="InputText" />
+        </div>
+        <DocSectionCode :code="code" hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            myInputStyle: {
+                root: 'myTailwindInput'
+            },
+            code: {
+                basic: `
+<style scoped>
+.myTailwindInput {
+    @apply bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent;
+}
+</style>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputText :pt="myInputStyle" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            myInputStyle: {
+                root: 'myTailwindInput'
+            }
+        }
+    }
+}
+<\/script>
+
+<style scoped>
+.myTailwindInput {
+    @apply bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent;
+}
+</style>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputText :pt="myInputStyle" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const myInputStyle = ref({
+    root: 'myTailwindInput'
+});
+<\/script>
+
+<style scoped>
+.myTailwindInput {
+    @apply bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent;
+}
+</style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.myTailwindInput {
+    @apply bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent;
+}
+</style>
diff --git a/apps/labs/doc/paginator/AccessibilityDoc.vue b/apps/labs/doc/paginator/AccessibilityDoc.vue
new file mode 100644
index 000000000..28efb6f5b
--- /dev/null
+++ b/apps/labs/doc/paginator/AccessibilityDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Paginator is placed inside a <i>nav</i> element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.</p>
+
+        <p>
+            First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API respectively.
+        </p>
+
+        <p>
+            Page links are also button elements with an <i>aria-label</i> attribute derived from the <i>aria.pageLabel</i> of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Current
+            page is marked with <i>aria-current</i> set to "page" as well.
+        </p>
+
+        <p>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p>
+
+        <p>
+            Rows per page dropdown internally uses a dropdown component, refer to the <NuxtLink to="/select">select</NuxtLink> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
+            <i>aria.rowsPerPageLabel</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
+        </p>
+
+        <p>
+            Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers to
+            the <i>aria.jumpToPageDropdownLabel</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the paginator elements.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Executes the paginator element action.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Executes the paginator element action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Rows Per Page Dropdown Keyboard Support</h3>
+        <p>Refer to the <NuxtLink to="/select">select</NuxtLink> documentation for more details about keyboard support.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/paginator/BasicDoc.vue b/apps/labs/doc/paginator/BasicDoc.vue
new file mode 100644
index 000000000..aaf94e2e5
--- /dev/null
+++ b/apps/labs/doc/paginator/BasicDoc.vue
@@ -0,0 +1,46 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Paginator is used as a controlled component with <i>first</i> and <i>rows</i> properties to manage the first index and number of records to display per page. Total number of records need to be with <i>totalRecords</i> property. Default
+            template includes a dropdown to change the <i>rows</i> so <i>rowsPerPageOptions</i> is also necessary for the dropdown options.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/paginator/CurrentPageReportDoc.vue b/apps/labs/doc/paginator/CurrentPageReportDoc.vue
new file mode 100644
index 000000000..14fda1a73
--- /dev/null
+++ b/apps/labs/doc/paginator/CurrentPageReportDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Current page report item in the template displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;</p>
+        <ul class="mb-6 leading-relaxed">
+            <li>{currentPage}</li>
+            <li>{totalPages}</li>
+            <li>{rows}</li>
+            <li>{first}</li>
+            <li>{last}</li>
+            <li>{totalRecords}</li>
+        </ul>
+    </DocSectionText>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            first: 0,
+            code: {
+                basic: `
+<Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+            currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            first: 0
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+            currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const first = ref(0);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/paginator/CustomContentDoc.vue b/apps/labs/doc/paginator/CustomContentDoc.vue
new file mode 100644
index 000000000..2dddef7ee
--- /dev/null
+++ b/apps/labs/doc/paginator/CustomContentDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>There are two templates available named <i>start</i> and <i>end</i> to add custom content to these locations. Both templates get a state object as a slot property to provide the current page, first index and the rows.</p>
+    </DocSectionText>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
+            <template #start="slotProps"> Page: {{ slotProps.state.page }} First: {{ slotProps.state.first }} Rows: {{ slotProps.state.rows }} </template>
+            <template #end>
+                <Button type="button" icon="pi pi-search" />
+            </template>
+        </Paginator>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
+    <template #start="slotProps">
+        Page: {{ slotProps.state.page }}
+        First: {{ slotProps.state.first }}
+        Rows: {{ slotProps.state.rows }}
+    </template>
+    <template #end>
+        <Button type="button" icon="pi pi-search" />
+    </template>
+</Paginator>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
+            <template #start="slotProps">
+                Page: {{ slotProps.state.page }}
+                First: {{ slotProps.state.first }}
+                Rows: {{ slotProps.state.rows }}
+            </template>
+            <template #end>
+                <Button type="button" icon="pi pi-search" />
+            </template>
+        </Paginator>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
+            <template #start="slotProps">
+                Page: {{ slotProps.state.page }}
+                First: {{ slotProps.state.first }}
+                Rows: {{ slotProps.state.rows }}
+            </template>
+            <template #end>
+                <Button type="button" icon="pi pi-search" />
+            </template>
+        </Paginator>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/paginator/HeadlessDoc.vue b/apps/labs/doc/paginator/HeadlessDoc.vue
new file mode 100644
index 000000000..dd95e560a
--- /dev/null
+++ b/apps/labs/doc/paginator/HeadlessDoc.vue
@@ -0,0 +1,102 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements. The template receives the following data;</p>
+        <ul class="mb-6 leading-relaxed">
+            <li>first</li>
+            <li>last</li>
+            <li>rows</li>
+            <li>page</li>
+            <li>pageCount</li>
+            <li>totalRecords</li>
+            <li>firstPageCallback</li>
+            <li>lastPageCallback</li>
+            <li>prevPageCallback</li>
+            <li>nextPageCallback</li>
+            <li>rowChangeCallback</li>
+        </ul>
+    </DocSectionText>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120">
+            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </Paginator>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Paginator :rows="10" :totalRecords="120">
+    <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+        <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+            <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                <div class="text-color font-medium">
+                    <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                    <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                </div>
+                <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+            </div>
+        </template>
+    </template>
+</Paginator>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120">
+            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </Paginator>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120">
+            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </Paginator>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/paginator/ImportDoc.vue b/apps/labs/doc/paginator/ImportDoc.vue
new file mode 100644
index 000000000..b9f43af30
--- /dev/null
+++ b/apps/labs/doc/paginator/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Paginator from 'primevue/paginator';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/paginator/ResponsiveDoc.vue b/apps/labs/doc/paginator/ResponsiveDoc.vue
new file mode 100644
index 000000000..20f0dce18
--- /dev/null
+++ b/apps/labs/doc/paginator/ResponsiveDoc.vue
@@ -0,0 +1,82 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Paginator elements can be customized per screen size by defining a template per breakpoint. Note that breakpoints are based on max-width setting, if default key is omitted then the default template would be used. Example below has 4
+            settings; up to 640px, between 641px-960px, between 961px-1300px and larger than 1301px which is the default.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <Paginator
+            :template="{
+                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+                '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
+            }"
+            :rows="10"
+            :totalRecords="120"
+        ></Paginator>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Paginator
+    :template="{
+        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
+    }"
+    :rows="10"
+    :totalRecords="120">
+</Paginator>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Paginator
+            :template="{
+                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+                '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
+            }"
+            :rows="10"
+            :totalRecords="120">
+        </Paginator>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Paginator
+            :template="{
+                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+                '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
+            }"
+            :rows="10"
+            :totalRecords="120">
+        </Paginator>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/paginator/TemplateDoc.vue b/apps/labs/doc/paginator/TemplateDoc.vue
new file mode 100644
index 000000000..7b95f6ad0
--- /dev/null
+++ b/apps/labs/doc/paginator/TemplateDoc.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
+            can be placed inside a paginator in any order.
+        </p>
+        <ul class="mb-6 leading-relaxed">
+            <li>FirstPageLink</li>
+            <li>PrevPageLink</li>
+            <li>PageLinks</li>
+            <li>NextPageLink</li>
+            <li>LastPageLink</li>
+            <li>RowsPerPageDropdown</li>
+            <li>JumpToPageDropdown</li>
+            <li>JumpToPageInput</li>
+            <li>CurrentPageReport</li>
+        </ul>
+    </DocSectionText>
+    <div class="card">
+        <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+
+        <div class="p-4 text-center">
+            <img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="rounded w-full sm:w-[30rem]" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            first: 0,
+            code: {
+                basic: `
+<Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+
+<div class="p-4 text-center">
+    <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
+</div>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+
+        <div class="p-4 text-center">
+            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            first: 0
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+
+        <div class="p-4 text-center">
+            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const first = ref(0);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panel/AccessibilityDoc.vue b/apps/labs/doc/panel/AccessibilityDoc.vue
new file mode 100644
index 000000000..d0d6cd3b5
--- /dev/null
+++ b/apps/labs/doc/panel/AccessibilityDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value
+            of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
+        </p>
+        <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
+
+        <h3>Content Toggle Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/panel/BasicDoc.vue b/apps/labs/doc/panel/BasicDoc.vue
new file mode 100644
index 000000000..4fda697ea
--- /dev/null
+++ b/apps/labs/doc/panel/BasicDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A simple Panel is created with a <i>header</i> property along with the content as children.</p>
+    </DocSectionText>
+    <div class="card">
+        <Panel header="Header">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Panel header="Header">
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Panel>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Panel header="Header">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Panel header="Header">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panel/ImportDoc.vue b/apps/labs/doc/panel/ImportDoc.vue
new file mode 100644
index 000000000..418371d7c
--- /dev/null
+++ b/apps/labs/doc/panel/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Panel from 'primevue/panel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panel/TemplateDoc.vue b/apps/labs/doc/panel/TemplateDoc.vue
new file mode 100644
index 000000000..3ff207020
--- /dev/null
+++ b/apps/labs/doc/panel/TemplateDoc.vue
@@ -0,0 +1,231 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Header, icons and footer sections of the panel are customizable via templating.</p>
+    </DocSectionText>
+    <div class="card">
+        <Panel toggleable>
+            <template #header>
+                <div class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </div>
+            </template>
+            <template #footer>
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center gap-2">
+                        <Button icon="pi pi-user" rounded text></Button>
+                        <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
+                    </div>
+                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
+                </div>
+            </template>
+            <template #icons>
+                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
+                <Menu ref="menu" id="config_menu" :model="items" popup />
+            </template>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Refresh',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ],
+            code: {
+                basic: `
+<Panel toggleable>
+    <template #header>
+        <div class="flex items-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <span class="font-bold">Amy Elsner</span>
+        </div>
+    </template>
+    <template #footer>
+        <div class="flex flex-wrap items-center justify-between gap-4">
+            <div class="flex items-center gap-2">
+                <Button icon="pi pi-user" rounded text></Button>
+                <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
+            </div>
+            <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
+        </div>
+    </template>
+    <template #icons>
+        <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
+        <Menu ref="menu" id="config_menu" :model="items" popup />
+    </template>
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Panel>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast />
+        <Panel toggleable>
+            <template #header>
+                <div class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </div>
+            </template>
+            <template #footer>
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center gap-2">
+                        <Button icon="pi pi-user" rounded text></Button>
+                        <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
+                    </div>
+                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
+                </div>
+            </template>
+            <template #icons>
+                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
+                <Menu ref="menu" id="config_menu" :model="items" popup />
+            </template>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Refresh',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ]
+        }
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        },
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <Panel toggleable>
+            <template #header>
+                <div class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </div>
+            </template>
+            <template #footer>
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center gap-2">
+                        <Button icon="pi pi-user" rounded text></Button>
+                        <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
+                    </div>
+                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
+                </div>
+            </template>
+            <template #icons>
+                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
+                <Menu ref="menu" id="config_menu" :model="items" popup />
+            </template>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from "primevue/usetoast";
+import { useRouter } from 'vue-router';
+import Menu from 'primevue/menu';
+
+const menu = ref(null);
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Refresh',
+        icon: 'pi pi-refresh'
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times'
+    }
+]);
+
+const toggle = (event) => {
+    menu.value.toggle(event);
+};
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        },
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/panel/ToggleableDoc.vue b/apps/labs/doc/panel/ToggleableDoc.vue
new file mode 100644
index 000000000..ef73d1add
--- /dev/null
+++ b/apps/labs/doc/panel/ToggleableDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
+    </DocSectionText>
+    <div class="card">
+        <Panel header="Header" toggleable>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Panel header="Header" toggleable>
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Panel>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Panel header="Header" toggleable>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Panel header="Header" toggleable>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panelmenu/AccessibilityDoc.vue b/apps/labs/doc/panelmenu/AccessibilityDoc.vue
new file mode 100644
index 000000000..bb26c4d6f
--- /dev/null
+++ b/apps/labs/doc/panelmenu/AccessibilityDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Accordion header elements have a <i>button</i> role, an <i>aria-label</i> defined using the <i>label</i> property of the menuitem model and <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for
+            the visibility state.
+        </p>
+        <p>The content of an accordion panel uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
+
+        <p>
+            The tree elements has a <i>tree</i> as the role and each menu item has a <i>treeitem</i> role along with <i>aria-label</i> and <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The
+            <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
+        </p>
+
+        <h3>Header Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/panelmenu/BasicDoc.vue b/apps/labs/doc/panelmenu/BasicDoc.vue
new file mode 100644
index 000000000..8499c5cf2
--- /dev/null
+++ b/apps/labs/doc/panelmenu/BasicDoc.vue
@@ -0,0 +1,285 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PanelMenu requires a collection of menuitems as its <i>model</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Documents',
+                            icon: 'pi pi-file',
+                            items: [
+                                {
+                                    label: 'Invoices',
+                                    icon: 'pi pi-file-pdf',
+                                    items: [
+                                        {
+                                            label: 'Pending',
+                                            icon: 'pi pi-stop'
+                                        },
+                                        {
+                                            label: 'Paid',
+                                            icon: 'pi pi-check-circle'
+                                        }
+                                    ]
+                                },
+                                {
+                                    label: 'Clients',
+                                    icon: 'pi pi-users'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Images',
+                            icon: 'pi pi-image',
+                            items: [
+                                {
+                                    label: 'Logos',
+                                    icon: 'pi pi-image'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Cloud',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Upload',
+                            icon: 'pi pi-cloud-upload'
+                        },
+                        {
+                            label: 'Download',
+                            icon: 'pi pi-cloud-download'
+                        },
+                        {
+                            label: 'Sync',
+                            icon: 'pi pi-refresh'
+                        }
+                    ]
+                },
+                {
+                    label: 'Devices',
+                    icon: 'pi pi-desktop',
+                    items: [
+                        {
+                            label: 'Phone',
+                            icon: 'pi pi-mobile'
+                        },
+                        {
+                            label: 'Desktop',
+                            icon: 'pi pi-desktop'
+                        },
+                        {
+                            label: 'Tablet',
+                            icon: 'pi pi-tablet'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Documents',
+                            icon: 'pi pi-file',
+                            items: [
+                                {
+                                    label: 'Invoices',
+                                    icon: 'pi pi-file-pdf',
+                                    items: [
+                                        {
+                                            label: 'Pending',
+                                            icon: 'pi pi-stop'
+                                        },
+                                        {
+                                            label: 'Paid',
+                                            icon: 'pi pi-check-circle'
+                                        }
+                                    ]
+                                },
+                                {
+                                    label: 'Clients',
+                                    icon: 'pi pi-users'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Images',
+                            icon: 'pi pi-image',
+                            items: [
+                                {
+                                    label: 'Logos',
+                                    icon: 'pi pi-image'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Cloud',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Upload',
+                            icon: 'pi pi-cloud-upload'
+                        },
+                        {
+                            label: 'Download',
+                            icon: 'pi pi-cloud-download'
+                        },
+                        {
+                            label: 'Sync',
+                            icon: 'pi pi-refresh'
+                        }
+                    ]
+                },
+                {
+                    label: 'Devices',
+                    icon: 'pi pi-desktop',
+                    items: [
+                        {
+                            label: 'Phone',
+                            icon: 'pi pi-mobile'
+                        },
+                        {
+                            label: 'Desktop',
+                            icon: 'pi pi-desktop'
+                        },
+                        {
+                            label: 'Tablet',
+                            icon: 'pi pi-tablet'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Files',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'Documents',
+                icon: 'pi pi-file',
+                items: [
+                    {
+                        label: 'Invoices',
+                        icon: 'pi pi-file-pdf',
+                        items: [
+                            {
+                                label: 'Pending',
+                                icon: 'pi pi-stop'
+                            },
+                            {
+                                label: 'Paid',
+                                icon: 'pi pi-check-circle'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'Clients',
+                        icon: 'pi pi-users'
+                    }
+                ]
+            },
+            {
+                label: 'Images',
+                icon: 'pi pi-image',
+                items: [
+                    {
+                        label: 'Logos',
+                        icon: 'pi pi-image'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Cloud',
+        icon: 'pi pi-cloud',
+        items: [
+            {
+                label: 'Upload',
+                icon: 'pi pi-cloud-upload'
+            },
+            {
+                label: 'Download',
+                icon: 'pi pi-cloud-download'
+            },
+            {
+                label: 'Sync',
+                icon: 'pi pi-refresh'
+            }
+        ]
+    },
+    {
+        label: 'Devices',
+        icon: 'pi pi-desktop',
+        items: [
+            {
+                label: 'Phone',
+                icon: 'pi pi-mobile'
+            },
+            {
+                label: 'Desktop',
+                icon: 'pi pi-desktop'
+            },
+            {
+                label: 'Tablet',
+                icon: 'pi pi-tablet'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panelmenu/CommandDoc.vue b/apps/labs/doc/panelmenu/CommandDoc.vue
new file mode 100644
index 000000000..7f4c59e32
--- /dev/null
+++ b/apps/labs/doc/panelmenu/CommandDoc.vue
@@ -0,0 +1,225 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search',
+                            command: () => {
+                                this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Import',
+                            icon: 'pi pi-cloud-download',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-cloud-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Sign Out',
+                    icon: 'pi pi-sign-out',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu :model="items" />
+<Toast />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search',
+                            command: () => {
+                                this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Import',
+                            icon: 'pi pi-cloud-download',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-cloud-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Sign Out',
+                    icon: 'pi pi-sign-out',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+                    }
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const items = ref([
+    {
+        label: 'Files',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                command: () => {
+                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                }
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-search',
+                command: () => {
+                    toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                }
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print',
+                command: () => {
+                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Sync',
+        icon: 'pi pi-cloud',
+        items: [
+            {
+                label: 'Import',
+                icon: 'pi pi-cloud-download',
+                command: () => {
+                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                }
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-cloud-upload',
+                command: () => {
+                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Sign Out',
+        icon: 'pi pi-sign-out',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+        }
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panelmenu/ControlledDoc.vue b/apps/labs/doc/panelmenu/ControlledDoc.vue
new file mode 100644
index 000000000..9368ed18f
--- /dev/null
+++ b/apps/labs/doc/panelmenu/ControlledDoc.vue
@@ -0,0 +1,337 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
+            value is a boolean.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Button type="button" label="Toggle All" text @click="toggleAll" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            expandedKeys: {},
+            items: [
+                {
+                    key: '0',
+                    label: 'Users',
+                    icon: 'pi pi-users',
+                    items: [
+                        {
+                            key: '0_1',
+                            label: 'New',
+                            items: [
+                                {
+                                    key: '0_1_0',
+                                    label: 'Member'
+                                },
+                                {
+                                    key: '0_1_1',
+                                    label: 'Group'
+                                }
+                            ]
+                        },
+                        {
+                            key: '0_2',
+                            label: 'Search'
+                        }
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Tasks',
+                    icon: 'pi pi-server',
+                    items: [
+                        {
+                            key: '1_0',
+                            label: 'Add New'
+                        },
+                        {
+                            key: '1_1',
+                            label: 'Pending'
+                        },
+                        {
+                            key: '1_2',
+                            label: 'Overdue'
+                        }
+                    ]
+                },
+                {
+                    key: '2',
+                    label: 'Calendar',
+                    icon: 'pi pi-calendar',
+                    items: [
+                        {
+                            key: '2_0',
+                            label: 'New Event'
+                        },
+                        {
+                            key: '2_1',
+                            label: 'Today'
+                        },
+                        {
+                            key: '2_2',
+                            label: 'This Week'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Button type="button" label="Toggle All" text @click="toggleAll" />
+<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Button type="button" label="Toggle All" text @click="toggleAll" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            expandedKeys: {},
+            items: [
+                {
+                    key: '0',
+                    label: 'Users',
+                    icon: 'pi pi-users',
+                    items: [
+                        {
+                            key: '0_1',
+                            label: 'New',
+                            items: [
+                                {
+                                    key: '0_1_0',
+                                    label: 'Member'
+                                },
+                                {
+                                    key: '0_1_1',
+                                    label: 'Group'
+                                }
+                            ]
+                        },
+                        {
+                            key: '0_2',
+                            label: 'Search'
+                        }
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Tasks',
+                    icon: 'pi pi-server',
+                    items: [
+                        {
+                            key: '1_0',
+                            label: 'Add New'
+                        },
+                        {
+                            key: '1_1',
+                            label: 'Pending'
+                        },
+                        {
+                            key: '1_2',
+                            label: 'Overdue'
+                        }
+                    ]
+                },
+                {
+                    key: '2',
+                    label: 'Calendar',
+                    icon: 'pi pi-calendar',
+                    items: [
+                        {
+                            key: '2_0',
+                            label: 'New Event'
+                        },
+                        {
+                            key: '2_1',
+                            label: 'Today'
+                        },
+                        {
+                            key: '2_2',
+                            label: 'This Week'
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+        toggleAll() {
+            if (Object.keys(this.expandedKeys).length) this.collapseAll();
+            else this.expandAll();
+        },
+        expandAll() {
+            for (let node of this.items) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = {
+                ...this.expandedKeys
+            };
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            if (node.items && node.items.length) {
+                this.expandedKeys[node.key] = true;
+
+                for (let child of node.items) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Button type="button" label="Toggle All" text @click="toggleAll" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const expandedKeys = ref({});
+const items = ref([
+    {
+        key: '0',
+        label: 'Users',
+        icon: 'pi pi-users',
+        items: [
+            {
+                key: '0_1',
+                label: 'New',
+                items: [
+                    {
+                        key: '0_1_0',
+                        label: 'Member'
+                    },
+                    {
+                        key: '0_1_1',
+                        label: 'Group'
+                    }
+                ]
+            },
+            {
+                key: '0_2',
+                label: 'Search'
+            }
+        ]
+    },
+    {
+        key: '1',
+        label: 'Tasks',
+        icon: 'pi pi-server',
+        items: [
+            {
+                key: '1_0',
+                label: 'Add New'
+            },
+            {
+                key: '1_1',
+                label: 'Pending'
+            },
+            {
+                key: '1_2',
+                label: 'Overdue'
+            }
+        ]
+    },
+    {
+        key: '2',
+        label: 'Calendar',
+        icon: 'pi pi-calendar',
+        items: [
+            {
+                key: '2_0',
+                label: 'New Event'
+            },
+            {
+                key: '2_1',
+                label: 'Today'
+            },
+            {
+                key: '2_2',
+                label: 'This Week'
+            }
+        ]
+    }
+]);
+
+const toggleAll = () => {
+    if (Object.keys(expandedKeys.value).length) collapseAll();
+    else expandAll();
+}
+
+const expandAll = () => {
+    for (let node of items.value) {
+        expandNode(node);
+    }
+
+    expandedKeys.value = {...expandedKeys.value};
+};
+
+const collapseAll = () => {
+    expandedKeys.value = {};
+};
+
+const expandNode = (node) => {
+    if (node.items && node.items.length) {
+        expandedKeys.value[node.key] = true;
+
+        for (let child of node.items) {
+            expandNode(child);
+        }
+    }
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        toggleAll() {
+            if (Object.keys(this.expandedKeys).length) this.collapseAll();
+            else this.expandAll();
+        },
+        expandAll() {
+            for (let node of this.items) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = {
+                ...this.expandedKeys
+            };
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            if (node.items && node.items.length) {
+                this.expandedKeys[node.key] = true;
+
+                for (let child of node.items) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/panelmenu/ImportDoc.vue b/apps/labs/doc/panelmenu/ImportDoc.vue
new file mode 100644
index 000000000..fbe84cdde
--- /dev/null
+++ b/apps/labs/doc/panelmenu/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import PanelMenu from 'primevue/panelmenu';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panelmenu/MultipleDoc.vue b/apps/labs/doc/panelmenu/MultipleDoc.vue
new file mode 100644
index 000000000..b36fbdd65
--- /dev/null
+++ b/apps/labs/doc/panelmenu/MultipleDoc.vue
@@ -0,0 +1,285 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Only one root menuitem at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple root menuitems.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" multiple class="w-full md:w-80" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Documents',
+                            icon: 'pi pi-file',
+                            items: [
+                                {
+                                    label: 'Invoices',
+                                    icon: 'pi pi-file-pdf',
+                                    items: [
+                                        {
+                                            label: 'Pending',
+                                            icon: 'pi pi-stop'
+                                        },
+                                        {
+                                            label: 'Paid',
+                                            icon: 'pi pi-check-circle'
+                                        }
+                                    ]
+                                },
+                                {
+                                    label: 'Clients',
+                                    icon: 'pi pi-users'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Images',
+                            icon: 'pi pi-image',
+                            items: [
+                                {
+                                    label: 'Logos',
+                                    icon: 'pi pi-image'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Cloud',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Upload',
+                            icon: 'pi pi-cloud-upload'
+                        },
+                        {
+                            label: 'Download',
+                            icon: 'pi pi-cloud-download'
+                        },
+                        {
+                            label: 'Sync',
+                            icon: 'pi pi-refresh'
+                        }
+                    ]
+                },
+                {
+                    label: 'Devices',
+                    icon: 'pi pi-desktop',
+                    items: [
+                        {
+                            label: 'Phone',
+                            icon: 'pi pi-mobile'
+                        },
+                        {
+                            label: 'Desktop',
+                            icon: 'pi pi-desktop'
+                        },
+                        {
+                            label: 'Tablet',
+                            icon: 'pi pi-tablet'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu :model="items" multiple />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" multiple class="w-full md:w-80" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Documents',
+                            icon: 'pi pi-file',
+                            items: [
+                                {
+                                    label: 'Invoices',
+                                    icon: 'pi pi-file-pdf',
+                                    items: [
+                                        {
+                                            label: 'Pending',
+                                            icon: 'pi pi-stop'
+                                        },
+                                        {
+                                            label: 'Paid',
+                                            icon: 'pi pi-check-circle'
+                                        }
+                                    ]
+                                },
+                                {
+                                    label: 'Clients',
+                                    icon: 'pi pi-users'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Images',
+                            icon: 'pi pi-image',
+                            items: [
+                                {
+                                    label: 'Logos',
+                                    icon: 'pi pi-image'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Cloud',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Upload',
+                            icon: 'pi pi-cloud-upload'
+                        },
+                        {
+                            label: 'Download',
+                            icon: 'pi pi-cloud-download'
+                        },
+                        {
+                            label: 'Sync',
+                            icon: 'pi pi-refresh'
+                        }
+                    ]
+                },
+                {
+                    label: 'Devices',
+                    icon: 'pi pi-desktop',
+                    items: [
+                        {
+                            label: 'Phone',
+                            icon: 'pi pi-mobile'
+                        },
+                        {
+                            label: 'Desktop',
+                            icon: 'pi pi-desktop'
+                        },
+                        {
+                            label: 'Tablet',
+                            icon: 'pi pi-tablet'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" multiple class="w-full md:w-80" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Files',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'Documents',
+                icon: 'pi pi-file',
+                items: [
+                    {
+                        label: 'Invoices',
+                        icon: 'pi pi-file-pdf',
+                        items: [
+                            {
+                                label: 'Pending',
+                                icon: 'pi pi-stop'
+                            },
+                            {
+                                label: 'Paid',
+                                icon: 'pi pi-check-circle'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'Clients',
+                        icon: 'pi pi-users'
+                    }
+                ]
+            },
+            {
+                label: 'Images',
+                icon: 'pi pi-image',
+                items: [
+                    {
+                        label: 'Logos',
+                        icon: 'pi pi-image'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Cloud',
+        icon: 'pi pi-cloud',
+        items: [
+            {
+                label: 'Upload',
+                icon: 'pi pi-cloud-upload'
+            },
+            {
+                label: 'Download',
+                icon: 'pi pi-cloud-download'
+            },
+            {
+                label: 'Sync',
+                icon: 'pi pi-refresh'
+            }
+        ]
+    },
+    {
+        label: 'Devices',
+        icon: 'pi pi-desktop',
+        items: [
+            {
+                label: 'Phone',
+                icon: 'pi pi-mobile'
+            },
+            {
+                label: 'Desktop',
+                icon: 'pi pi-desktop'
+            },
+            {
+                label: 'Tablet',
+                icon: 'pi pi-tablet'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panelmenu/RouterDoc.vue b/apps/labs/doc/panelmenu/RouterDoc.vue
new file mode 100644
index 000000000..e6d7ba6d5
--- /dev/null
+++ b/apps/labs/doc/panelmenu/RouterDoc.vue
@@ -0,0 +1,233 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+    <DocSectionCode :code="code" hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Styled',
+                            icon: 'pi pi-eraser',
+                            route: '/slider'
+                        },
+                        {
+                            label: 'Unstyled',
+                            icon: 'pi pi-heart',
+                            route: '/slider'
+                        }
+                    ]
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            icon: 'pi pi-star',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            icon: 'pi pi-bookmark',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu :model="items">
+    <template #item="{ item }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
+                <span :class="item.icon" />
+                <span class="ml-2">{{ item.label }}</span>
+            </a>
+        </router-link>
+        <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+            <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+        </a>
+    </template>
+</PanelMenu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Styled',
+                            icon: 'pi pi-eraser',
+                            route: '/slider'
+                        },
+                        {
+                            label: 'Unstyled',
+                            icon: 'pi pi-heart',
+                            route: '/slider'
+                        }
+                    ]
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            icon: 'pi pi-star',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            icon: 'pi pi-bookmark',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Router',
+        icon: 'pi pi-palette',
+        items: [
+            {
+                label: 'Styled',
+                icon: 'pi pi-eraser',
+                route: '/slider'
+            },
+            {
+                label: 'Unstyled',
+                icon: 'pi pi-heart',
+                route: '/slider'
+            }
+        ]
+    },
+    {
+        label: 'Programmatic',
+        icon: 'pi pi-link',
+        command: () => {
+            router.push('/slider');
+        }
+    },
+    {
+        label: 'External',
+        icon: 'pi pi-home',
+        items: [
+            {
+                label: 'Vue.js',
+                icon: 'pi pi-star',
+                url: 'https://vuejs.org/'
+            },
+            {
+                label: 'Vite.js',
+                icon: 'pi pi-bookmark',
+                url: 'https://vuejs.org/'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/panelmenu/TemplateDoc.vue b/apps/labs/doc/panelmenu/TemplateDoc.vue
new file mode 100644
index 000000000..03fafa9ff
--- /dev/null
+++ b/apps/labs/doc/panelmenu/TemplateDoc.vue
@@ -0,0 +1,276 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PanelMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
+            <template #item="{ item }">
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
+                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
+                    <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Mail',
+                    icon: 'pi pi-envelope',
+                    badge: 5,
+                    items: [
+                        {
+                            label: 'Compose',
+                            icon: 'pi pi-file-edit',
+                            shortcut: '⌘+N'
+                        },
+                        {
+                            label: 'Inbox',
+                            icon: 'pi pi-inbox',
+                            badge: 5
+                        },
+                        {
+                            label: 'Sent',
+                            icon: 'pi pi-send',
+                            shortcut: '⌘+S'
+                        },
+                        {
+                            label: 'Trash',
+                            icon: 'pi pi-trash',
+                            shortcut: '⌘+T'
+                        }
+                    ]
+                },
+                {
+                    label: 'Reports',
+                    icon: 'pi pi-chart-bar',
+                    shortcut: '⌘+R',
+                    items: [
+                        {
+                            label: 'Sales',
+                            icon: 'pi pi-chart-line',
+                            badge: 3
+                        },
+                        {
+                            label: 'Products',
+                            icon: 'pi pi-list',
+                            badge: 6
+                        }
+                    ]
+                },
+                {
+                    label: 'Profile',
+                    icon: 'pi pi-user',
+                    shortcut: '⌘+W',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Privacy',
+                            icon: 'pi pi-shield',
+                            shortcut: '⌘+P'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu :model="items">
+    <template #item="{ item }">
+        <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
+            <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
+            <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
+            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+        </a>
+    </template>
+</PanelMenu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
+            <template #item="{ item }">
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
+                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
+                    <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Mail',
+                    icon: 'pi pi-envelope',
+                    badge: 5,
+                    items: [
+                        {
+                            label: 'Compose',
+                            icon: 'pi pi-file-edit',
+                            shortcut: '⌘+N'
+                        },
+                        {
+                            label: 'Inbox',
+                            icon: 'pi pi-inbox',
+                            badge: 5
+                        },
+                        {
+                            label: 'Sent',
+                            icon: 'pi pi-send',
+                            shortcut: '⌘+S'
+                        },
+                        {
+                            label: 'Trash',
+                            icon: 'pi pi-trash',
+                            shortcut: '⌘+T'
+                        }
+                    ]
+                },
+                {
+                    label: 'Reports',
+                    icon: 'pi pi-chart-bar',
+                    shortcut: '⌘+R',
+                    items: [
+                        {
+                            label: 'Sales',
+                            icon: 'pi pi-chart-line',
+                            badge: 3
+                        },
+                        {
+                            label: 'Products',
+                            icon: 'pi pi-list',
+                            badge: 6
+                        }
+                    ]
+                },
+                {
+                    label: 'Profile',
+                    icon: 'pi pi-user',
+                    shortcut: '⌘+W',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Privacy',
+                            icon: 'pi pi-shield',
+                            shortcut: '⌘+P'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
+            <template #item="{ item }">
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
+                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
+                    <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Mail',
+        icon: 'pi pi-envelope',
+        badge: 5,
+        items: [
+            {
+                label: 'Compose',
+                icon: 'pi pi-file-edit',
+                shortcut: '⌘+N'
+            },
+            {
+                label: 'Inbox',
+                icon: 'pi pi-inbox',
+                badge: 5
+            },
+            {
+                label: 'Sent',
+                icon: 'pi pi-send',
+                shortcut: '⌘+S'
+            },
+            {
+                label: 'Trash',
+                icon: 'pi pi-trash',
+                shortcut: '⌘+T'
+            }
+        ]
+    },
+    {
+        label: 'Reports',
+        icon: 'pi pi-chart-bar',
+        shortcut: '⌘+R',
+        items: [
+            {
+                label: 'Sales',
+                icon: 'pi pi-chart-line',
+                badge: 3
+            },
+            {
+                label: 'Products',
+                icon: 'pi pi-list',
+                badge: 6
+            }
+        ]
+    },
+    {
+        label: 'Profile',
+        icon: 'pi pi-user',
+        shortcut: '⌘+W',
+        items: [
+            {
+                label: 'Settings',
+                icon: 'pi pi-cog',
+                shortcut: '⌘+O'
+            },
+            {
+                label: 'Privacy',
+                icon: 'pi pi-shield',
+                shortcut: '⌘+P'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/AccessibilityDoc.vue b/apps/labs/doc/password/AccessibilityDoc.vue
new file mode 100644
index 000000000..bc5782f5d
--- /dev/null
+++ b/apps/labs/doc/password/AccessibilityDoc.vue
@@ -0,0 +1,52 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader is notified about the changes to the strength of the password
+            using a section that has <i>aria-live</i> while typing.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Hides the strength meter if open.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="pwd1">Password</label>
+<Password inputId="pwd1" />
+
+<span id="pwd2">Password</span>
+<Password aria-labelledby="pwd2" />
+
+<Password aria-label="Password"/>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/BasicDoc.vue b/apps/labs/doc/password/BasicDoc.vue
new file mode 100644
index 000000000..2ccba43be
--- /dev/null
+++ b/apps/labs/doc/password/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Password is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Password v-model="value" :feedback="false" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Password v-model="value" :feedback="false" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" :feedback="false" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" :feedback="false" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/DisabledDoc.vue b/apps/labs/doc/password/DisabledDoc.vue
new file mode 100644
index 000000000..782daf6cf
--- /dev/null
+++ b/apps/labs/doc/password/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Password disabled placeholder="Disabled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Password disabled placeholder="Disabled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Password disabled placeholder="Disabled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password disabled placeholder="Disabled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/FilledDoc.vue b/apps/labs/doc/password/FilledDoc.vue
new file mode 100644
index 000000000..e3d8ed17c
--- /dev/null
+++ b/apps/labs/doc/password/FilledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Password v-model="value" :feedback="false" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Password v-model="value" :feedback="false" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" :feedback="false" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" :feedback="false" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/FloatLabelDoc.vue b/apps/labs/doc/password/FloatLabelDoc.vue
new file mode 100644
index 000000000..045c7a797
--- /dev/null
+++ b/apps/labs/doc/password/FloatLabelDoc.vue
@@ -0,0 +1,112 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <Password v-model="value1" inputId="over_label" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Password v-model="value2" inputId="in_label" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Password v-model="value3" inputId="on_label" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<FloatLabel>
+    <Password v-model="value1" inputId="over_label" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <Password v-model="value2" inputId="in_label" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <Password v-model="value3" inputId="on_label" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <Password v-model="value1" inputId="over_label" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Password v-model="value2" inputId="in_label" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Password v-model="value3" inputId="on_label" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+   <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <Password v-model="value1" inputId="over_label" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Password v-model="value2" inputId="in_label" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Password v-model="value3" inputId="on_label" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/FormsDoc.vue b/apps/labs/doc/password/FormsDoc.vue
new file mode 100644
index 000000000..2d4d12761
--- /dev/null
+++ b/apps/labs/doc/password/FormsDoc.vue
@@ -0,0 +1,174 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputText is used with the <i>v-model</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
+            <div class="flex flex-col gap-1">
+                <Password name="password" placeholder="Password" :feedback="false" fluid />
+                <template v-if="$form.password?.invalid">
+                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
+                </template>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                password: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    password: z
+                        .string()
+                        .min(3, { message: 'Minimum 3 characters.' })
+                        .max(8, { message: 'Maximum 8 characters.' })
+                        .refine((value) => /[a-z]/.test(value), {
+                            message: 'Must have a lowercase letter.'
+                        })
+                        .refine((value) => /[A-Z]/.test(value), {
+                            message: 'Must have an uppercase letter.'
+                        })
+                        .refine((value) => /\d/.test(value), {
+                            message: 'Must have a number.'
+                        })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
+    <div class="flex flex-col gap-1">
+        <Password name="password" placeholder="Password" :feedback="false" fluid />
+        <template v-if="$form.password?.invalid">
+            <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
+        </template>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
+            <div class="flex flex-col gap-1">
+                <Password name="password" placeholder="Password" :feedback="false" fluid />
+                <template v-if="$form.password?.invalid">
+                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
+                </template>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                password: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    password: z
+                        .string()
+                        .min(3, { message: 'Minimum 3 characters.' })
+                        .max(8, { message: 'Maximum 8 characters.' })
+                        .refine((value) => /[a-z]/.test(value), {
+                            message: 'Must have a lowercase letter.'
+                        })
+                        .refine((value) => /[A-Z]/.test(value), {
+                            message: 'Must have an uppercase letter.'
+                        })
+                        .refine((value) => /\d/.test(value), {
+                            message: 'Must have a number.'
+                        })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
+            <div class="flex flex-col gap-1">
+                <Password name="password" placeholder="Password" :feedback="false" fluid />
+                <template v-if="$form.password?.invalid">
+                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
+                </template>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    password: ''
+});
+const resolver = ref(zodResolver(
+    z.object({
+        password: z
+            .string()
+            .min(3, { message: 'Minimum 3 characters.' })
+            .max(8, { message: 'Maximum 8 characters.' })
+            .refine((value) => /[a-z]/.test(value), {
+                message: 'Must have a lowercase letter.'
+            })
+            .refine((value) => /[A-Z]/.test(value), {
+                message: 'Must have an uppercase letter.'
+            })
+            .refine((value) => /\d/.test(value), {
+                message: 'Must have a number.'
+            })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/IftaLabelDoc.vue b/apps/labs/doc/password/IftaLabelDoc.vue
new file mode 100644
index 000000000..0603344d7
--- /dev/null
+++ b/apps/labs/doc/password/IftaLabelDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Password v-model="value" inputId="password" variant="filled" />
+            <label for="password">Password</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <Password v-model="value" inputId="password" variant="filled" />
+    <label for="password">Password</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Password v-model="value" inputId="password" variant="filled" />
+            <label for="password">Password</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Password v-model="value" inputId="password" variant="filled" />
+            <label for="password">Password</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/ImportDoc.vue b/apps/labs/doc/password/ImportDoc.vue
new file mode 100644
index 000000000..6ca42fcd6
--- /dev/null
+++ b/apps/labs/doc/password/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Password from 'primevue/password';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/InvalidDoc.vue b/apps/labs/doc/password/InvalidDoc.vue
new file mode 100644
index 000000000..0ffe1e671
--- /dev/null
+++ b/apps/labs/doc/password/InvalidDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            code: {
+                basic: `
+<Password v-model="value1" :invalid="!value1" placeholder="Password" />
+<Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/LocaleDoc.vue b/apps/labs/doc/password/LocaleDoc.vue
new file mode 100644
index 000000000..e2650e32b
--- /dev/null
+++ b/apps/labs/doc/password/LocaleDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Labels are translated at component level by <i>promptLabel</i>, <i>weakLabel</i>, <i>mediumLabel</i> and <i>strongLabel</i> properties. In order to apply global translations for all Password components in the application, refer to the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a>.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/MeterDoc.vue b/apps/labs/doc/password/MeterDoc.vue
new file mode 100644
index 000000000..70703adc3
--- /dev/null
+++ b/apps/labs/doc/password/MeterDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Strength meter is displayed as a popup while a value is being entered.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Password v-model="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Password v-model="value" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/SizesDoc.vue b/apps/labs/doc/password/SizesDoc.vue
new file mode 100644
index 000000000..08ac4e418
--- /dev/null
+++ b/apps/labs/doc/password/SizesDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Password provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Password v-model="value1" type="text" size="small" placeholder="Small" />
+        <Password v-model="value2" type="text" placeholder="Normal" />
+        <Password v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<div class="card flex flex-col items-center gap-4">
+    <Password v-model="value1" type="text" size="small" placeholder="Small" />
+    <Password v-model="value2" type="text" placeholder="Normal" />
+    <Password v-model="value3" type="text" size="large" placeholder="Large" />
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Password v-model="value1" type="text" size="small" placeholder="Small" />
+        <Password v-model="value2" type="text" placeholder="Normal" />
+        <Password v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Password v-model="value1" type="text" size="small" placeholder="Small" />
+        <Password v-model="value2" type="text" placeholder="Normal" />
+        <Password v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/TemplateDoc.vue b/apps/labs/doc/password/TemplateDoc.vue
new file mode 100644
index 000000000..9b8735603
--- /dev/null
+++ b/apps/labs/doc/password/TemplateDoc.vue
@@ -0,0 +1,106 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>3 slots are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Password v-model="value">
+            <template #header>
+                <div class="font-semibold text-xm mb-4">Pick a password</div>
+            </template>
+            <template #footer>
+                <Divider />
+                <ul class="pl-2 ml-2 my-0 leading-normal">
+                    <li>At least one lowercase</li>
+                    <li>At least one uppercase</li>
+                    <li>At least one numeric</li>
+                    <li>Minimum 8 characters</li>
+                </ul>
+            </template>
+        </Password>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Password v-model="value">
+    <template #header>
+        <div class="font-semibold text-xm mb-4">Pick a password</div>
+    </template>
+    <template #footer>
+        <Divider />
+        <ul class="pl-2 ml-2 my-0 leading-normal">
+            <li>At least one lowercase</li>
+            <li>At least one uppercase</li>
+            <li>At least one numeric</li>
+            <li>Minimum 8 characters</li>
+        </ul>
+    </template>
+</Password>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value">
+            <template #header>
+                <div class="font-semibold text-xm mb-4">Pick a password</div>
+            </template>
+            <template #footer>
+                <Divider />
+                <ul class="pl-2 ml-2 my-0 leading-normal">
+                    <li>At least one lowercase</li>
+                    <li>At least one uppercase</li>
+                    <li>At least one numeric</li>
+                    <li>Minimum 8 characters</li>
+                </ul>
+            </template>
+        </Password>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value">
+            <template #header>
+                <div class="font-semibold text-xm mb-4">Pick a password</div>
+            </template>
+            <template #footer>
+                <Divider />
+                <ul class="pl-2 ml-2 my-0 leading-normal">
+                    <li>At least one lowercase</li>
+                    <li>At least one uppercase</li>
+                    <li>At least one numeric</li>
+                    <li>Minimum 8 characters</li>
+                </ul>
+            </template>
+        </Password>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/password/ToggleMaskDoc.vue b/apps/labs/doc/password/ToggleMaskDoc.vue
new file mode 100644
index 000000000..6a6b2447e
--- /dev/null
+++ b/apps/labs/doc/password/ToggleMaskDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>toggleMask</i> is present, an icon is displayed to show the value as plain text.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Password v-model="value" toggleMask />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Password v-model="value" toggleMask />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" toggleMask />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" toggleMask />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/picklist/AccessibilityDoc.vue b/apps/labs/doc/picklist/AccessibilityDoc.vue
new file mode 100644
index 000000000..f0946797e
--- /dev/null
+++ b/apps/labs/doc/picklist/AccessibilityDoc.vue
@@ -0,0 +1,139 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the source listbox and target listbox can be provided with <i>sourceListProps</i> and <i>targetListProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list elements has a <i>listbox</i> role with
+            the <i>aria-multiselectable</i> attribute. Each list item has an <i>option</i> role with <i>aria-selected</i> as their attributes.
+        </p>
+        <p>
+            Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i>, <i>aria.moveBottom</i>,<i>aria.moveToTarget</i>, <i>aria.moveAllToTarget</i>,
+            <i>aria.moveToSource</i> and <i>aria.moveAllToSource</i> properties of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, alternatively you may use
+            <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i>, <i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> <i>moveAllFromButtonProps</i>
+            <i>moveToTargetProps</i>, <i>moveAllToTargetProps</i>, <i>moveToSourceProps</i> and <i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>ListBox Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the items between the most recently selected option and the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused options and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused options and all the options down to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all options.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Buttons Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Executes button action.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Executes button action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="lb">Options</span>
+<PickList aria-labelledby="lb" />
+
+<PickList aria-label="City" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/picklist/BasicDoc.vue b/apps/labs/doc/picklist/BasicDoc.vue
new file mode 100644
index 000000000..792665045
--- /dev/null
+++ b/apps/labs/doc/picklist/BasicDoc.vue
@@ -0,0 +1,100 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PickList requires a multidimensional array as its value bound with the <i>v-model </i>directive and a template for its content that gets the <i>option</i> instance and the index via slotProps.</p>
+    </DocSectionText>
+    <div class="card">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px">
+            <template #option="{ option }">
+                {{ option.name }}
+            </template>
+        </PickList>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<PickList v-model="products" dataKey="id" breakpoint="1400px">
+    <template #option="{ option  }">
+        {{ option.name }}
+    </template>
+</PickList>
+`,
+                options: `
+<template>
+    <div class="card">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px">
+            <template #option="{ option  }">
+                {{ option.name }}
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService'
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px">
+            <template #option="{ option  }">
+                {{ option.name }}
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
+});
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+</script>
diff --git a/apps/labs/doc/picklist/ImportDoc.vue b/apps/labs/doc/picklist/ImportDoc.vue
new file mode 100644
index 000000000..979990d91
--- /dev/null
+++ b/apps/labs/doc/picklist/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import PickList from 'primevue/picklist';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/picklist/TemplateDoc.vue b/apps/labs/doc/picklist/TemplateDoc.vue
new file mode 100644
index 000000000..418cc5d9f
--- /dev/null
+++ b/apps/labs/doc/picklist/TemplateDoc.vue
@@ -0,0 +1,128 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>For custom content support define an <i>option</i> template that gets the item instance as a parameter. In addition <i>sourceheader</i> and <i>targetheader</i> slots are provided for further customization.</p>
+    </DocSectionText>
+    <div class="card">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
+            <template #option="{ option, selected }">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
+                    <div class="flex-1 flex flex-col">
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
+                    </div>
+                    <span class="font-bold">${{ option.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
+    <template #option="{ option , selected }">
+        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
+            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
+            <div class="flex-1 flex flex-col">
+                <span class="font-medium text-sm">{{ option.name }}</span>
+                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
+            </div>
+            <span class="font-bold">\${{ option.price }}</span>
+        </div>
+    </template>
+</PickList>
+`,
+                options: `
+<template>
+    <div class="card">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
+            <template #option="{ option , selected }">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
+                    <div class="flex-1 flex flex-col">
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
+                    </div>
+                    <span class="font-bold">\${{ option.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService'
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px">
+            <template #option="{ option , selected }">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
+                    <div class="flex-1 flex flex-col">
+                        <span class="font-medium text-sm">{{ option.name }}</span>
+                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
+                    </div>
+                    <span class="font-bold">\${{ option.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
+});
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+</script>
diff --git a/apps/labs/doc/popover/AccessibilityDoc.vue b/apps/labs/doc/popover/AccessibilityDoc.vue
new file mode 100644
index 000000000..3b88b00b4
--- /dev/null
+++ b/apps/labs/doc/popover/AccessibilityDoc.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Popover component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition <i>aria-modal</i> is
+            added since focus is kept within the popup.
+        </p>
+        <p>Popover adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the trigger and the popup is defined.</p>
+
+        <h3>Popover Keyboard Support</h3>
+        <p>When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.</p>
+
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/popover/BasicDoc.vue b/apps/labs/doc/popover/BasicDoc.vue
new file mode 100644
index 000000000..e6e76970b
--- /dev/null
+++ b/apps/labs/doc/popover/BasicDoc.vue
@@ -0,0 +1,229 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Popover is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
+
+        <Popover ref="op">
+            <div class="flex flex-col gap-4 w-[25rem]">
+                <div>
+                    <span class="font-medium block mb-2">Share this document</span>
+                    <InputGroup>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
+                        <InputGroupAddon>
+                            <i class="pi pi-copy"></i>
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Invite Member</span>
+                    <InputGroup>
+                        <InputText disabled></InputText>
+                        <Button label="Invite" icon="pi pi-users"></Button>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
+                            <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                            </div>
+                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
+                                <span>{{ member.role }}</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Popover>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            members: [
+                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+            ],
+            code: {
+                basic: `
+<Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
+
+<Popover ref="op">
+    <div class="flex flex-col gap-4 w-[25rem]">
+        <div>
+            <span class="font-medium block mb-2">Share this document</span>
+            <InputGroup>
+                <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
+                <InputGroupAddon>
+                    <i class="pi pi-copy"></i>
+                </InputGroupAddon>
+            </InputGroup>
+        </div>
+        <div>
+            <span class="font-medium block mb-2">Invite Member</span>
+            <InputGroup>
+                <InputText disabled />
+                <Button label="Invite" icon="pi pi-users"></Button>
+            </InputGroup>
+        </div>
+        <div>
+            <span class="font-medium block mb-2">Team Members</span>
+            <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
+                    <div>
+                        <span class="font-medium">{{ member.name }}</span>
+                        <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                    </div>
+                    <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
+                        <span>{{ member.role }}</span>
+                        <i class="pi pi-angle-down"></i>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</Popover>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
+
+        <Popover ref="op">
+            <div class="flex flex-col gap-4 w-[25rem]">
+                <div>
+                    <span class="font-medium block mb-2">Share this document</span>
+                    <InputGroup>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
+                        <InputGroupAddon>
+                            <i class="pi pi-copy"></i>
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Invite Member</span>
+                    <InputGroup>
+                        <InputText disabled />
+                        <Button label="Invite" icon="pi pi-users"></Button>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
+                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                            </div>
+                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
+                                <span>{{ member.role }}</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Popover>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            members: [
+                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+            ]
+        }
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
+
+        <Popover ref="op">
+            <div class="flex flex-col gap-4 w-[25rem]">
+                <div>
+                    <span class="font-medium block mb-2">Share this document</span>
+                    <InputGroup>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
+                        <InputGroupAddon>
+                            <i class="pi pi-copy"></i>
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Invite Member</span>
+                    <InputGroup>
+                        <InputText disabled />
+                        <Button label="Invite" icon="pi pi-users"></Button>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
+                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                            </div>
+                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
+                                <span>{{ member.role }}</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Popover>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const op = ref();
+const members = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+]);
+
+const toggle = (event) => {
+    op.value.toggle(event);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/popover/DataTableDoc.vue b/apps/labs/doc/popover/DataTableDoc.vue
new file mode 100644
index 000000000..9fc123fe8
--- /dev/null
+++ b/apps/labs/doc/popover/DataTableDoc.vue
@@ -0,0 +1,374 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Place the Popover outside of the data iteration components to avoid rendering it multiple times.</p>
+    </DocSectionText>
+
+    <div class="card">
+        <DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
+            <Column field="id" header="Id" class="w-1/6"></Column>
+            <Column field="code" header="Code" class="w-1/6"></Column>
+            <Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
+            <Column field="price" header="Price" sortable class="w-1/6">
+                <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
+            </Column>
+            <Column header="Image" class="w-1/6">
+                <template #body="slotProps">
+                    <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
+                </template>
+            </Column>
+            <Column header="Details" class="w-1/6">
+                <template #body="slotProps">
+                    <Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+
+        <Popover ref="op">
+            <div v-if="selectedProduct" class="rounded flex flex-col">
+                <div class="flex justify-center rounded">
+                    <div class="relative mx-auto">
+                        <img class="rounded w-44 sm:w-64" :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" />
+                        <Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                    </div>
+                </div>
+                <div class="pt-4">
+                    <div class="flex flex-row justify-between items-start gap-2 mb-4">
+                        <div>
+                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
+                            <div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
+                        </div>
+                        <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                            <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                <span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
+                                <i class="pi pi-star-fill text-yellow-500"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex gap-2">
+                        <Button icon="pi pi-shopping-cart" :label="`Buy Now | \$${selectedProduct.price}`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
+                        <Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
+                    </div>
+                </div>
+            </div>
+        </Popover>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null,
+            code: {
+                basic: `
+<DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
+    <Column field="id" header="Id" class="w-1/6"></Column>
+    <Column field="code" header="Code" class="w-1/6"></Column>
+    <Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
+    <Column field="price" header="Price" sortable class="w-1/6">
+        <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
+    </Column>
+    <Column header="Image" class="w-1/6">
+        <template #body="slotProps">
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
+        </template>
+    </Column>
+    <Column header="Details" class="w-1/6">
+        <template #body="slotProps">
+            <Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
+        </template>
+    </Column>
+</DataTable>
+
+<Popover ref="op">
+    <div v-if="selectedProduct" class="rounded flex flex-col">
+        <div class="flex justify-center rounded">
+            <div class="relative mx-auto">
+                <img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
+                <Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+            </div>
+        </div>
+        <div class="pt-4">
+            <div class="flex flex-row justify-between items-start gap-2 mb-4">
+                <div>
+                    <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
+                    <div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
+                </div>
+                <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                    <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                        <span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
+                        <i class="pi pi-star-fill text-yellow-500"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="flex gap-2">
+                <Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
+                <Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
+            </div>
+        </div>
+    </div>
+</Popover>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
+            <Column field="id" header="Id" class="w-1/6"></Column>
+            <Column field="code" header="Code" class="w-1/6"></Column>
+            <Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
+            <Column field="price" header="Price" sortable class="w-1/6">
+                <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
+            </Column>
+            <Column header="Image" class="w-1/6">
+                <template #body="slotProps">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
+                </template>
+            </Column>
+            <Column header="Details" class="w-1/6">
+                <template #body="slotProps">
+                    <Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+
+        <Popover ref="op">
+            <div v-if="selectedProduct" class="rounded flex flex-col">
+                <div class="flex justify-center rounded">
+                    <div class="relative mx-auto">
+                        <img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
+                        <Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                    </div>
+                </div>
+                <div class="pt-4">
+                    <div class="flex flex-row justify-between items-start gap-2 mb-4">
+                        <div>
+                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
+                            <div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
+                        </div>
+                        <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                            <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                <span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
+                                <i class="pi pi-star-fill text-yellow-500"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex gap-2">
+                        <Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
+                        <Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
+                    </div>
+                </div>
+            </div>
+        </Popover>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    },
+    methods: {
+        displayProduct(event, product) {
+            this.$refs.op.hide();
+
+            if (this.selectedProduct?.id === product.id) {
+                this.selectedProduct = null;
+            } else {
+                this.selectedProduct = product;
+
+                this.$nextTick(() => {
+                    this.$refs.op.show(event);
+                });
+            }
+        },
+        hidePopover() {
+            this.$refs.op.hide();
+        },
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
+            <Column field="id" header="Id" class="w-1/6"></Column>
+            <Column field="code" header="Code" class="w-1/6"></Column>
+            <Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
+            <Column field="price" header="Price" sortable class="w-1/6">
+                <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
+            </Column>
+            <Column header="Image" class="w-1/6">
+                <template #body="slotProps">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
+                </template>
+            </Column>
+            <Column header="Details" class="w-1/6">
+                <template #body="slotProps">
+                    <Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+
+        <Popover ref="op">
+            <div v-if="selectedProduct" class="rounded flex flex-col">
+                <div class="flex justify-center rounded">
+                    <div class="relative mx-auto">
+                        <img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
+                        <Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                    </div>
+                </div>
+                <div class="pt-4">
+                    <div class="flex flex-row justify-between items-start gap-2 mb-4">
+                        <div>
+                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
+                            <div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
+                        </div>
+                        <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                            <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                <span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
+                                <i class="pi pi-star-fill text-yellow-500"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex gap-2">
+                        <Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
+                        <Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
+                    </div>
+                </div>
+            </div>
+        </Popover>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import { useToast } from "primevue/usetoast";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+
+const op = ref();
+const products = ref();
+const selectedProduct = ref();
+
+const displayProduct = (event, product) => {
+    op.value.hide();
+
+    if (selectedProduct.value?.id === product.id) {
+        selectedProduct.value = null;
+    } else {
+        selectedProduct.value = product;
+
+        nextTick(() => {
+            op.value.show(event);
+        });
+    }
+}
+
+const hidePopover = () => {
+    op.value.hide();
+}
+
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warn';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+}
+<\/script>
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    },
+    methods: {
+        displayProduct(event, product) {
+            this.$refs.op.hide();
+
+            if (this.selectedProduct?.id === product.id) {
+                this.selectedProduct = null;
+            } else {
+                this.selectedProduct = product;
+
+                this.$nextTick(() => {
+                    this.$refs.op.show(event);
+                });
+            }
+        },
+        hidePopover() {
+            this.$refs.op.hide();
+        },
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/popover/ImportDoc.vue b/apps/labs/doc/popover/ImportDoc.vue
new file mode 100644
index 000000000..0506d4cdd
--- /dev/null
+++ b/apps/labs/doc/popover/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Popover from 'primevue/popover';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/popover/SelectDataDoc.vue b/apps/labs/doc/popover/SelectDataDoc.vue
new file mode 100644
index 000000000..da73a51b4
--- /dev/null
+++ b/apps/labs/doc/popover/SelectDataDoc.vue
@@ -0,0 +1,165 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>In this sample, data is retrieved from the content inside the popover.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
+
+        <Popover ref="op">
+            <div class="flex flex-col gap-4">
+                <div>
+                    <span class="font-medium block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
+                            <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Popover>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedMember: null,
+            members: [
+                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+            ],
+            code: {
+                basic: `
+<Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
+
+<Popover ref="op">
+    <div class="flex flex-col gap-4">
+        <div>
+            <span class="font-medium block mb-2">Team Members</span>
+            <ul class="list-none p-0 m-0 flex flex-col">
+                <li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
+                    <div>
+                        <span class="font-medium">{{ member.name }}</span>
+                        <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</Popover>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
+
+        <Popover ref="op">
+            <div class="flex flex-col gap-4">
+                <div>
+                    <span class="font-medium block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
+                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Popover>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedMember: null,
+            members: [
+                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+            ]
+        }
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        },
+        selectMember(member) {
+            this.selectedMember = member;
+            this.$refs.op.hide();
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
+
+        <Popover ref="op">
+            <div class="flex flex-col gap-4">
+                <div>
+                    <span class="font-medium block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
+                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Popover>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const op = ref();
+const selectedMember = ref(null);
+const members = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+]);
+
+const toggle = (event) => {
+    op.value.toggle(event);
+}
+
+const selectMember = (member) => {
+    selectedMember.value = member;
+    op.value.hide();
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        },
+        selectMember(member) {
+            this.selectedMember = member;
+            this.$refs.op.hide();
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressbar/AccessibilityDoc.vue b/apps/labs/doc/progressbar/AccessibilityDoc.vue
new file mode 100644
index 000000000..3bec619c1
--- /dev/null
+++ b/apps/labs/doc/progressbar/AccessibilityDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            ProgressBar components uses <i>progressbar</i> role along with <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
+            <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <p>Not applicable.</p>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="label_status" />
+<ProgressBar aria-labelledby="label_status" />
+
+<ProgressBar aria-label="Status" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressbar/BasicDoc.vue b/apps/labs/doc/progressbar/BasicDoc.vue
new file mode 100644
index 000000000..f3ea996b1
--- /dev/null
+++ b/apps/labs/doc/progressbar/BasicDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ProgressBar is used with the <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressBar :value="50"></ProgressBar>
+`,
+                options: `
+<template>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+</template>
+
+<script >
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressbar/DynamicDoc.vue b/apps/labs/doc/progressbar/DynamicDoc.vue
new file mode 100644
index 000000000..2793a2b1d
--- /dev/null
+++ b/apps/labs/doc/progressbar/DynamicDoc.vue
@@ -0,0 +1,132 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Value is reactive so updating it dynamically changes the bar as well.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="value"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 0,
+            interval: null,
+            code: {
+                basic: `
+<ProgressBar :value="value"></ProgressBar>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast></Toast>
+        <ProgressBar :value="value1" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 0,
+            interval: null
+        };
+    },
+    mounted() {
+        this.startProgress();
+    },
+    beforeUnmount() {
+        this.endProgress();
+    },
+    methods: {
+        startProgress() {
+            this.interval = setInterval(() => {
+                let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
+
+                if (newValue >= 100) {
+                    newValue = 100;
+                    this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
+                }
+
+                this.value1 = newValue;
+            }, 2000);
+        },
+        endProgress() {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast></Toast>
+        <ProgressBar :value="value1" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useToast } from "primevue/usetoast";
+
+onMounted(() => {
+    startProgress();
+});
+
+onBeforeUnmount(() => {
+    endProgress();
+});
+
+const toast = useToast();
+const value1 = ref(0);
+const interval = ref();
+const startProgress = () => {
+    interval.value = setInterval(() => {
+        let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
+        if (newValue >= 100) {
+            newValue = 100;
+            toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
+        }
+        value1.value = newValue;
+    }, 2000);
+};
+const endProgress = () => {
+    clearInterval(interval.value);
+    interval.value = null;
+};
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.startProgress();
+    },
+    beforeUnmount() {
+        this.endProgress();
+    },
+    methods: {
+        startProgress() {
+            this.interval = setInterval(() => {
+                let newValue = this.value + Math.floor(Math.random() * 10) + 1;
+
+                if (newValue >= 100) {
+                    newValue = 100;
+                    this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
+                    this.endProgress();
+                }
+
+                this.value = newValue;
+            }, 2000);
+        },
+        endProgress() {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressbar/ImportDoc.vue b/apps/labs/doc/progressbar/ImportDoc.vue
new file mode 100644
index 000000000..557d425d5
--- /dev/null
+++ b/apps/labs/doc/progressbar/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ProgressBar from 'primevue/progressbar';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressbar/IndeterminateDoc.vue b/apps/labs/doc/progressbar/IndeterminateDoc.vue
new file mode 100644
index 000000000..c9cd369df
--- /dev/null
+++ b/apps/labs/doc/progressbar/IndeterminateDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>For progresses with no value to track, set the <i>mode</i> property to <i>indeterminate</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+`,
+                options: `
+<template>
+    <div class="card">
+        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressbar/TemplateDoc.vue b/apps/labs/doc/progressbar/TemplateDoc.vue
new file mode 100644
index 000000000..87b680f63
--- /dev/null
+++ b/apps/labs/doc/progressbar/TemplateDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content inside the ProgressBar is defined with the <i>default</i> slot.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="value"> {{ value }}/100 </ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 40,
+            code: {
+                basic: `
+<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
+`,
+                options: `
+<template>
+    <div class="card">
+        <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 40
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref(40);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressspinner/AccessibilityDoc.vue b/apps/labs/doc/progressspinner/AccessibilityDoc.vue
new file mode 100644
index 000000000..83aa25230
--- /dev/null
+++ b/apps/labs/doc/progressspinner/AccessibilityDoc.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>ProgressSpinner components uses <i>progressbar</i> role. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressSpinner aria-label="Loading" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressspinner/BasicDoc.vue b/apps/labs/doc/progressspinner/BasicDoc.vue
new file mode 100644
index 000000000..3b4ad63c5
--- /dev/null
+++ b/apps/labs/doc/progressspinner/BasicDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An infinite spin animation is displayed by default.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ProgressSpinner />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressSpinner />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ProgressSpinner />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ProgressSpinner />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressspinner/CustomDoc.vue b/apps/labs/doc/progressspinner/CustomDoc.vue
new file mode 100644
index 000000000..90607c664
--- /dev/null
+++ b/apps/labs/doc/progressspinner/CustomDoc.vue
@@ -0,0 +1,46 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ProgressSpinner can be customized with styling property like <i>style</i>, <i>strokeWidth</i> <i>fill</i> and <i>animationDuration</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent" animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
+    animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
+            animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
+            animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/progressspinner/ImportDoc.vue b/apps/labs/doc/progressspinner/ImportDoc.vue
new file mode 100644
index 000000000..53b051d06
--- /dev/null
+++ b/apps/labs/doc/progressspinner/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ProgressSpinner from 'primevue/progressspinner';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/AccessibilityDoc.vue b/apps/labs/doc/radiobutton/AccessibilityDoc.vue
new file mode 100644
index 000000000..6fd159adb
--- /dev/null
+++ b/apps/labs/doc/radiobutton/AccessibilityDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
+            <i>aria-labelledby</i>, <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">left arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the previous radio button, if there is none then last radio button receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">right arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>If the focused radio button is unchecked, changes the state to checked.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="rb1">One</label>
+<RadioButton inputId="rb1" />
+
+<span id="rb2">Two</span>
+<RadioButton aria-labelledby="rb2" />
+
+<RadioButton aria-label="Three" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/DisabledDoc.vue b/apps/labs/doc/radiobutton/DisabledDoc.vue
new file mode 100644
index 000000000..235777828
--- /dev/null
+++ b/apps/labs/doc/radiobutton/DisabledDoc.vue
@@ -0,0 +1,58 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-2">
+        <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 2,
+            code: {
+                basic: `
+<RadioButton v-model="value" :value="1" disabled />
+<RadioButton v-model="value" :value="2" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center gap-2">
+        <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 2
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center gap-2">
+        <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref(2);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/DynamicDoc.vue b/apps/labs/doc/radiobutton/DynamicDoc.vue
new file mode 100644
index 000000000..5ea7468a5
--- /dev/null
+++ b/apps/labs/doc/radiobutton/DynamicDoc.vue
@@ -0,0 +1,90 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>RadioButtons can be generated using a list of values.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
+                <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            categories: [
+                { name: 'Accounting', key: 'A' },
+                { name: 'Marketing', key: 'M' },
+                { name: 'Production', key: 'P' },
+                { name: 'Research', key: 'R' }
+            ],
+            selectedCategory: 'Production',
+            code: {
+                basic: `
+<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
+    <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
+    <label :for="category.key">{{ category.name }}</label>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
+                <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCategory: 'Production',
+            categories: [
+                { name: 'Accounting', key: 'A' },
+                { name: 'Marketing', key: 'M' },
+                { name: 'Production', key: 'P' },
+                { name: 'Research', key: 'R' }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
+                <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const selectedCategory = ref('Production');
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/FilledDoc.vue b/apps/labs/doc/radiobutton/FilledDoc.vue
new file mode 100644
index 000000000..207b6b870
--- /dev/null
+++ b/apps/labs/doc/radiobutton/FilledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<RadioButton v-model="value" value="1" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/FormsDoc.vue b/apps/labs/doc/radiobutton/FormsDoc.vue
new file mode 100644
index 000000000..1c7e79864
--- /dev/null
+++ b/apps/labs/doc/radiobutton/FormsDoc.vue
@@ -0,0 +1,198 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>RadioButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-2">
+                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="cheese" value="Cheese" />
+                        <label for="cheese">Cheese</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom">Mushroom</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="pepper" value="Pepper" />
+                        <label for="pepper">Pepper</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="onion" value="Onion" />
+                        <label for="onion">Onion</label>
+                    </div>
+                </RadioButtonGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                ingredient: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    ingredient: z.string().min(1, { message: 'Ingredient is required.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+        <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton inputId="cheese" value="Cheese" />
+                <label for="cheese">Cheese</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton inputId="mushroom" value="Mushroom" />
+                <label for="mushroom">Mushroom</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton inputId="pepper" value="Pepper" />
+                <label for="pepper">Pepper</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton inputId="onion" value="Onion" />
+                <label for="onion">Onion</label>
+            </div>
+        </RadioButtonGroup>
+        <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-2">
+                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="cheese" value="Cheese" />
+                        <label for="cheese">Cheese</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom">Mushroom</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="pepper" value="Pepper" />
+                        <label for="pepper">Pepper</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="onion" value="Onion" />
+                        <label for="onion">Onion</label>
+                    </div>
+                </RadioButtonGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                ingredient: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    ingredient: z.string().min(1, { message: 'Ingredient is required.' })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-2">
+                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="cheese" value="Cheese" />
+                        <label for="cheese">Cheese</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom">Mushroom</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="pepper" value="Pepper" />
+                        <label for="pepper">Pepper</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="onion" value="Onion" />
+                        <label for="onion">Onion</label>
+                    </div>
+                </RadioButtonGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    ingredient: ''
+});
+const resolver = ref(zodResolver(
+    z.object({
+        ingredient: z.string().min(1, { message: 'Ingredient is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/GroupDoc.vue b/apps/labs/doc/radiobutton/GroupDoc.vue
new file mode 100644
index 000000000..0592368df
--- /dev/null
+++ b/apps/labs/doc/radiobutton/GroupDoc.vue
@@ -0,0 +1,122 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>RadioButton is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1">Cheese</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2">Mushroom</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3">Pepper</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4">Onion</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            ingredient: '',
+            code: {
+                basic: `
+<div class="flex flex-wrap gap-4">
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+        <label for="ingredient1">Cheese</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+        <label for="ingredient2">Mushroom</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+        <label for="ingredient3">Pepper</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+        <label for="ingredient4">Onion</label>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1">Cheese</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2">Mushroom</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3">Pepper</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4">Onion</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            ingredient: ''
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1">Cheese</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2">Mushroom</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3">Pepper</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4">Onion</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const ingredient = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/ImportDoc.vue b/apps/labs/doc/radiobutton/ImportDoc.vue
new file mode 100644
index 000000000..1cea94b37
--- /dev/null
+++ b/apps/labs/doc/radiobutton/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import RadioButton from 'primevue/radiobutton';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/InvalidDoc.vue b/apps/labs/doc/radiobutton/InvalidDoc.vue
new file mode 100644
index 000000000..ed365a93c
--- /dev/null
+++ b/apps/labs/doc/radiobutton/InvalidDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" :invalid="value === null" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<RadioButton v-model="value" value="1" :invalid="value === null" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" :invalid="value === null" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            val: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" :invalid="value === null" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const val = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/SizesDoc.vue b/apps/labs/doc/radiobutton/SizesDoc.vue
new file mode 100644
index 000000000..1f3794489
--- /dev/null
+++ b/apps/labs/doc/radiobutton/SizesDoc.vue
@@ -0,0 +1,106 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>RadioButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+                <label for="size_small" class="text-sm">Small</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+                <label for="size_normal">Normal</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+                <label for="size_large" class="text-lg">Large</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            size: null,
+            code: {
+                basic: `
+<div class="flex flex-wrap gap-4">
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+        <label for="size_small" class="text-sm">Small</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+        <label for="size_normal">Normal</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+        <label for="size_large" class="text-lg">Large</label>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+                <label for="size_small" class="text-sm">Small</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+                <label for="size_normal">Normal</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+                <label for="size_large" class="text-lg">Large</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            size: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+                <label for="size_small" class="text-sm">Small</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+                <label for="size_normal">Normal</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+                <label for="size_large" class="text-lg">Large</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const size = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/AccessibilityDoc.vue b/apps/labs/doc/rating/AccessibilityDoc.vue
new file mode 100644
index 000000000..91655b8ac
--- /dev/null
+++ b/apps/labs/doc/rating/AccessibilityDoc.vue
@@ -0,0 +1,50 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the
+            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API via <i>star</i> and <i>stars</i> of the <i>aria</i> property.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the star representing the value, if there is none then first star receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">left arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">right arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the next star, if there is none then first star receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>If the focused star does not represent the value, changes the value to the star value.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/rating/BasicDoc.vue b/apps/labs/doc/rating/BasicDoc.vue
new file mode 100644
index 000000000..1daf28d57
--- /dev/null
+++ b/apps/labs/doc/rating/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Rating is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Rating v-model="value" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/DisabledDoc.vue b/apps/labs/doc/rating/DisabledDoc.vue
new file mode 100644
index 000000000..d0e8e0a0d
--- /dev/null
+++ b/apps/labs/doc/rating/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 5,
+            code: {
+                basic: `
+<Rating v-model="value" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 5
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(5);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/FormsDoc.vue b/apps/labs/doc/rating/FormsDoc.vue
new file mode 100644
index 000000000..65f5d6fea
--- /dev/null
+++ b/apps/labs/doc/rating/FormsDoc.vue
@@ -0,0 +1,130 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Rating integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
+            <div class="flex flex-col items-center gap-2">
+                <Rating name="rating" />
+                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                rating: null
+            },
+            resolver: zodResolver(
+                z.object({
+                    rating: z.union([z.number(), z.literal(null)]).refine((value) => value !== null, { message: 'Rating is required.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
+    <div class="flex flex-col items-center gap-2">
+        <Rating name="rating" />
+        <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
+            <div class="flex flex-col items-center gap-2">
+                <Rating name="rating" />
+                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                rating: null
+            },
+            resolver: zodResolver(
+                z.object({
+                    rating: z.union([z.number(), z.literal(null)]).refine((value) => value !== null, { message: 'Rating is required.' })
+                })
+            )
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
+            <div class="flex flex-col items-center gap-2">
+                <Rating name="rating" />
+                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    rating: null
+});
+const resolver = ref(zodResolver(
+    z.object({
+        rating: z.union([z.number(), z.literal(null)]).refine((value) => value !== null, { message: 'Rating is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/ImportDoc.vue b/apps/labs/doc/rating/ImportDoc.vue
new file mode 100644
index 000000000..2070a2b4a
--- /dev/null
+++ b/apps/labs/doc/rating/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Rating from 'primevue/rating';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/NumberOfStarsDoc.vue b/apps/labs/doc/rating/NumberOfStarsDoc.vue
new file mode 100644
index 000000000..4f602e18b
--- /dev/null
+++ b/apps/labs/doc/rating/NumberOfStarsDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Number of stars to display is defined with <i>stars</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" :stars="10" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 5,
+            code: {
+                basic: `
+<Rating v-model="value" :stars="10" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" :stars="10" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 5
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" :stars="10" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(5);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/ReadOnlyDoc.vue b/apps/labs/doc/rating/ReadOnlyDoc.vue
new file mode 100644
index 000000000..75b05f2ee
--- /dev/null
+++ b/apps/labs/doc/rating/ReadOnlyDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>readOnly</i> present, value cannot be edited.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" readonly />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 3,
+            code: {
+                basic: `
+<Rating v-model="value" readonly />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" readonly />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 3
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" readonly />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(3);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/TemplateDoc.vue b/apps/labs/doc/rating/TemplateDoc.vue
new file mode 100644
index 000000000..6f756f6d5
--- /dev/null
+++ b/apps/labs/doc/rating/TemplateDoc.vue
@@ -0,0 +1,82 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom icons are used to override the default icons with <i>onicon</i>, <i>officon</i> and <i>cancelicon</i> slots.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value">
+            <template #onicon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
+            </template>
+            <template #officon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
+            </template>
+        </Rating>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Rating v-model="value">
+    <template #onicon>
+        <img src="/images/rating/custom-onicon.png" height="24" width="24" />
+    </template>
+    <template #officon>
+        <img src="/images/rating/custom-officon.png" height="24" width="24" />
+    </template>
+</Rating>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value">
+            <template #onicon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
+            </template>
+            <template #officon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
+            </template>
+        </Rating>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value">
+            <template #onicon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
+            </template>
+            <template #officon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
+            </template>
+        </Rating>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/ripple/AccessibilityDoc.vue b/apps/labs/doc/ripple/AccessibilityDoc.vue
new file mode 100644
index 000000000..d041d790a
--- /dev/null
+++ b/apps/labs/doc/ripple/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Ripple element has the <i>aria-hidden</i> attribute as true so that it gets ignored by the screen readers.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/ripple/ConfigurationDoc.vue b/apps/labs/doc/ripple/ConfigurationDoc.vue
new file mode 100644
index 000000000..4006dd485
--- /dev/null
+++ b/apps/labs/doc/ripple/ConfigurationDoc.vue
@@ -0,0 +1,34 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>To start with, Ripple needs to be enabled globally. See the <a href="https://primevue.org/configuration/#ripple">Configuration API</a> for details.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+mounted() {
+    this.$primevue.config.ripple = true;
+}
+`,
+                options: `
+mounted() {
+    this.$primevue.config.ripple = true;
+}
+`,
+                composition: `
+import { usePrimeVue } from 'primevue/config';
+
+const PrimeVue = usePrimeVue();
+
+PrimeVue.config.ripple = true;
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/ripple/CustomDoc.vue b/apps/labs/doc/ripple/CustomDoc.vue
new file mode 100644
index 000000000..a3fc12c30
--- /dev/null
+++ b/apps/labs/doc/ripple/CustomDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
+    </DocSectionText>
+    <div class="card flex flex-col gap-4 items-center">
+        <span
+            >Ripple option at the <span class="mx-1 h-8 w-8 rounded-border inline-flex items-center justify-center bg-primary text-primary-contrast"><i class="pi pi-palette"></i></span> configurator needs to be turned on for the demo.</span
+        >
+        <div class="flex justify-center gap-2">
+            <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
+            <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
+            <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
+<div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
+<div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
+`,
+                options: `
+<template>
+    <div class="flex justify-center items-center gap-2">
+        <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
+        <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
+        <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
+    </div>
+</template>
+
+<style scoped>
+.box {
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
+</style>
+`,
+                composition: `
+<template>
+    <div class="flex justify-center items-center gap-2">
+        <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
+        <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
+        <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
+    </div>
+</template>
+
+<style scoped>
+.box {
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
+</style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.box {
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
+</style>
diff --git a/apps/labs/doc/ripple/DefaultDoc.vue b/apps/labs/doc/ripple/DefaultDoc.vue
new file mode 100644
index 000000000..ed558f32f
--- /dev/null
+++ b/apps/labs/doc/ripple/DefaultDoc.vue
@@ -0,0 +1,88 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <span
+            >Ripple option at the <span class="mx-1 h-8 w-8 rounded-border inline-flex items-center justify-center bg-primary text-primary-contrast"><i class="pi pi-palette"></i></span> configurator needs to be turned on for the demo.</span
+        >
+        <div v-ripple class="ripple-box">Default</div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<div v-ripple class="ripple-box">Default</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <div v-ripple class="ripple-box">Default</div>
+    </div>
+</template>
+
+<script>
+<\/script>
+
+<style scoped>
+.ripple-box {
+    display: flex;
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+    padding: 3rem;
+    font-weight: bold;
+    background: var(--p-content-background);
+    border: 1px solid var(--p-content-border-color);
+    border-radius: var(--p-content-border-radius);
+}
+<\/style>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <div v-ripple class="ripple-box">Default</div>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+
+<style scoped>
+.ripple-box {
+    display: flex;
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+    padding: 3rem;
+    font-weight: bold;
+    background: var(--p-content-background);
+    border: 1px solid var(--p-content-border-color);
+    border-radius: var(--p-content-border-radius);
+}
+<\/style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.ripple-box {
+    display: flex;
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+    padding: 3rem;
+    font-weight: bold;
+    background: var(--p-content-background);
+    border: 1px solid var(--p-content-border-color);
+    border-radius: var(--p-content-border-radius);
+}
+</style>
diff --git a/apps/labs/doc/ripple/ImportDoc.vue b/apps/labs/doc/ripple/ImportDoc.vue
new file mode 100644
index 000000000..db3da431d
--- /dev/null
+++ b/apps/labs/doc/ripple/ImportDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
+
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+
+        <p>Ripple describes how to use it with your own components and standard elements that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
+
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+
+app.use(PrimeVue, { ripple: true });
+`
+            },
+            code2: {
+                basic: `
+import Ripple from 'primevue/ripple';
+
+app.directive('ripple', Ripple);
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/scrollpanel/AccessibilityDoc.vue b/apps/labs/doc/scrollpanel/AccessibilityDoc.vue
new file mode 100644
index 000000000..1ab4e5a06
--- /dev/null
+++ b/apps/labs/doc/scrollpanel/AccessibilityDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Scrollbars of the ScrollPanel has a <i>scrollbar</i> role along with the <i>aria-controls</i> attribute that refers to the id of the scrollable content container and the <i>aria-orientation</i> to indicate the orientation of scrolling.</p>
+
+        <h3>Header Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus through the bar.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Scrolls content down when vertical scrolling is available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Scrolls content up when vertical scrolling is available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left</i></td>
+                        <td>Scrolls content left when horizontal scrolling is available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right</i></td>
+                        <td>Scrolls content right when horizontal scrolling is available.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/scrollpanel/BasicDoc.vue b/apps/labs/doc/scrollpanel/BasicDoc.vue
new file mode 100644
index 000000000..aab0e33d6
--- /dev/null
+++ b/apps/labs/doc/scrollpanel/BasicDoc.vue
@@ -0,0 +1,99 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ScrollPanel is defined using dimensions for the scrollable viewport.</p>
+    </DocSectionText>
+    <div class="card">
+        <ScrollPanel style="width: 100%; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <p class="m-0">
+                Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+                recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
+            </p>
+        </ScrollPanel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ScrollPanel style="width: 100%; height: 200px">
+    <p>
+        Lorem ipsum dolor ...
+    </p>
+</ScrollPanel>
+                
+`,
+                options: `
+<template>
+    <div class="card">
+        <ScrollPanel style="width: 100%; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <p class="m-0">
+                Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+                recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
+            </p>
+        </ScrollPanel>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <ScrollPanel style="width: 100%; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <p class="m-0">
+                Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+                recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
+            </p>
+        </ScrollPanel>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/scrollpanel/CustomDoc.vue b/apps/labs/doc/scrollpanel/CustomDoc.vue
new file mode 100644
index 000000000..5456d0e19
--- /dev/null
+++ b/apps/labs/doc/scrollpanel/CustomDoc.vue
@@ -0,0 +1,102 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Scrollbar visuals can be styled for a unified look across different platforms.</p>
+    </DocSectionText>
+    <div class="card">
+        <ScrollPanel
+            style="width: 100%; height: 200px"
+            :dt="{
+                bar: {
+                    background: '{primary.color}'
+                }
+            }"
+        >
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </ScrollPanel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ScrollPanel
+    style="width: 100%; height: 200px"
+    :dt="{
+        bar: {
+            background: '{primary.color}'
+        }
+    }"
+>
+    ...
+</ScrollPanel>
+`,
+                options: `
+<template>
+    <div class="card">
+        <ScrollPanel
+            style="width: 100%; height: 200px"
+            :dt="{
+                bar: {
+                    background: '{primary.color}'
+                }
+            }"
+        >
+            ...
+        </ScrollPanel>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <ScrollPanel
+            style="width: 100%; height: 200px"
+            :dt="{
+                bar: {
+                    background: '{primary.color}'
+                }
+            }"
+        >
+            ...
+        </ScrollPanel>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/scrollpanel/ImportDoc.vue b/apps/labs/doc/scrollpanel/ImportDoc.vue
new file mode 100644
index 000000000..08dcfd182
--- /dev/null
+++ b/apps/labs/doc/scrollpanel/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ScrollPanel from 'primevue/scrollpanel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/scrolltop/AccessibilityDoc.vue b/apps/labs/doc/scrolltop/AccessibilityDoc.vue
new file mode 100644
index 000000000..d1b0c157e
--- /dev/null
+++ b/apps/labs/doc/scrolltop/AccessibilityDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default,
+            you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Scrolls to top.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Scrolls to top.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/scrolltop/BasicDoc.vue b/apps/labs/doc/scrolltop/BasicDoc.vue
new file mode 100644
index 000000000..55bc559b2
--- /dev/null
+++ b/apps/labs/doc/scrolltop/BasicDoc.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ScrollTop listens window scroll by default.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center">
+        <p>Scroll down the page to display the ScrollTop component.</p>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
+        <ScrollTop />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ScrollTop />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center" style="height: 2000px">
+        <p>Scroll down the page to display the ScrollTop component.</p>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
+        <ScrollTop />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center" style="height: 2000px">
+        <p>Scroll down the page to display the ScrollTop component.</p>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
+        <ScrollTop />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/scrolltop/ElementDoc.vue b/apps/labs/doc/scrolltop/ElementDoc.vue
new file mode 100644
index 000000000..245e850bc
--- /dev/null
+++ b/apps/labs/doc/scrolltop/ElementDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Setting the <i>target</i> property to <i>parent</i> binds ScrollTop to its parent element that has scrolling content.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ScrollPanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
+                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
+                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
+                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
+                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'contrast', raised: true, rounded: true }" />
+        </ScrollPanel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ScrollPanel style="width: 250px; height: 200px">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
+        elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
+        feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
+        dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
+        Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+    </p>
+    <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'contrast', raised: true, rounded: true }" />
+</ScrollPanel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ScrollPanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
+                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
+                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
+                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
+                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'contrast', raised: true, rounded: true }" />
+        </ScrollPanel>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ScrollPanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
+                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
+                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
+                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
+                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'contrast', raised: true, rounded: true }" />
+        </ScrollPanel>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/scrolltop/ImportDoc.vue b/apps/labs/doc/scrolltop/ImportDoc.vue
new file mode 100644
index 000000000..5429340a9
--- /dev/null
+++ b/apps/labs/doc/scrolltop/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ScrollTop from 'primevue/scrolltop';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/AccessibilityDoc.vue b/apps/labs/doc/select/AccessibilityDoc.vue
new file mode 100644
index 000000000..d87799708
--- /dev/null
+++ b/apps/labs/doc/select/AccessibilityDoc.vue
@@ -0,0 +1,197 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The select element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
+            editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which
+            option to read during keyboard navigation within the popup list.
+        </p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the <i>aria-activedescendant</i> of
+            the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
+        </p>
+
+        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Closed State Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the select element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and select is not editable then first option receives the focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Popup Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, then moves focus to the select element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>If the select is editable, removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>If the select is editable, removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>If the select is editable, moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>If the select is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the option whose label starts with the characters being typed if select is not editable.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Filter Input Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Closes the popup and moves focus to the select element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the select element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="dd1"></span>Options</span>
+<select aria-labelledby="dd1" />
+
+<select aria-label="Options" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/BasicDoc.vue b/apps/labs/doc/select/BasicDoc.vue
new file mode 100644
index 000000000..5c13e5aea
--- /dev/null
+++ b/apps/labs/doc/select/BasicDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Select is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
+            that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/CheckmarkDoc.vue b/apps/labs/doc/select/CheckmarkDoc.vue
new file mode 100644
index 000000000..fb6863b42
--- /dev/null
+++ b/apps/labs/doc/select/CheckmarkDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/ClearIconDoc.vue b/apps/labs/doc/select/ClearIconDoc.vue
new file mode 100644
index 000000000..fba5c5cf2
--- /dev/null
+++ b/apps/labs/doc/select/ClearIconDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the Select.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/DisabledDoc.vue b/apps/labs/doc/select/DisabledDoc.vue
new file mode 100644
index 000000000..a6795e2bf
--- /dev/null
+++ b/apps/labs/doc/select/DisabledDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Select disabled placeholder="Select a City" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/EditableDoc.vue b/apps/labs/doc/select/EditableDoc.vue
new file mode 100644
index 000000000..eb204dfbf
--- /dev/null
+++ b/apps/labs/doc/select/EditableDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>editable</i> is present, the input can also be entered with typing.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/FilledDoc.vue b/apps/labs/doc/select/FilledDoc.vue
new file mode 100644
index 000000000..f3e7c20e2
--- /dev/null
+++ b/apps/labs/doc/select/FilledDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/FilterDoc.vue b/apps/labs/doc/select/FilterDoc.vue
new file mode 100644
index 000000000..77669b0f3
--- /dev/null
+++ b/apps/labs/doc/select/FilterDoc.vue
@@ -0,0 +1,154 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Select provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
+            <template #value="slotProps">
+                <div v-if="slotProps.value" class="flex items-center">
+                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
+                    <div>{{ slotProps.value.name }}</div>
+                </div>
+                <span v-else>
+                    {{ slotProps.placeholder }}
+                </span>
+            </template>
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </Select>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: [
+                { name: 'Australia', code: 'AU' },
+                { name: 'Brazil', code: 'BR' },
+                { name: 'China', code: 'CN' },
+                { name: 'Egypt', code: 'EG' },
+                { name: 'France', code: 'FR' },
+                { name: 'Germany', code: 'DE' },
+                { name: 'India', code: 'IN' },
+                { name: 'Japan', code: 'JP' },
+                { name: 'Spain', code: 'ES' },
+                { name: 'United States', code: 'US' }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
+    <template #value="slotProps">
+        <div v-if="slotProps.value" class="flex items-center">
+            <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
+            <div>{{ slotProps.value.name }}</div>
+        </div>
+        <span v-else>
+            {{ slotProps.placeholder }}
+        </span>
+    </template>
+    <template #option="slotProps">
+        <div class="flex items-center">
+            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+            <div>{{ slotProps.option.name }}</div>
+        </div>
+    </template>
+</Select>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
+            <template #value="slotProps">
+                <div v-if="slotProps.value" class="flex items-center">
+                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.value.name }}</div>
+                </div>
+                <span v-else>
+                    {{ slotProps.placeholder }}
+                </span>
+            </template>
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </Select>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: [
+                { name: 'Australia', code: 'AU' },
+                { name: 'Brazil', code: 'BR' },
+                { name: 'China', code: 'CN' },
+                { name: 'Egypt', code: 'EG' },
+                { name: 'France', code: 'FR' },
+                { name: 'Germany', code: 'DE' },
+                { name: 'India', code: 'IN' },
+                { name: 'Japan', code: 'JP' },
+                { name: 'Spain', code: 'ES' },
+                { name: 'United States', code: 'US' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
+            <template #value="slotProps">
+                <div v-if="slotProps.value" class="flex items-center">
+                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.value.name }}</div>
+                </div>
+                <span v-else>
+                    {{ slotProps.placeholder }}
+                </span>
+            </template>
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </Select>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCountry = ref();
+const countries = ref([
+    { name: 'Australia', code: 'AU' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'China', code: 'CN' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'France', code: 'FR' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'India', code: 'IN' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'United States', code: 'US' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/FloatLabelDoc.vue b/apps/labs/doc/select/FloatLabelDoc.vue
new file mode 100644
index 000000000..77e3c8aaf
--- /dev/null
+++ b/apps/labs/doc/select/FloatLabelDoc.vue
@@ -0,0 +1,133 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="in">
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="on">
+            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<FloatLabel class="w-full md:w-56">
+    <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-56" variant="in">
+    <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-56" variant="on">
+    <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-stretch gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="in">
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="on">
+            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-stretch gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="in">
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="on">
+            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/FormsDoc.vue b/apps/labs/doc/select/FormsDoc.vue
new file mode 100644
index 000000000..479d5eaf3
--- /dev/null
+++ b/apps/labs/doc/select/FormsDoc.vue
@@ -0,0 +1,163 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
+            <div class="flex flex-col gap-1">
+                <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                city: { name: '' }
+            },
+            resolver: zodResolver(
+                z.object({
+                    city: z.union([
+                        z.object({
+                            name: z.string().min(1, 'City is required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'City is required.' })
+                    ])
+                })
+            ),
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
+    <div class="flex flex-col gap-1">
+        <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
+        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
+            <div class="flex flex-col gap-1">
+                <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                city: { name: '' }
+            },
+            resolver: zodResolver(
+                z.object({
+                    city: z.union([
+                        z.object({
+                            name: z.string().min(1, 'City is required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'City is required.' })
+                    ])
+                })
+            ),
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
+            <div class="flex flex-col gap-1">
+                <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    city: { name: '' }
+});
+const resolver = ref(zodResolver(
+    z.object({
+        city: z.union([
+            z.object({
+                name: z.string().min(1, 'City is required.')
+            }),
+            z.any().refine((val) => false, { message: 'City is required.' })
+        ])
+    })
+));
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/GroupDoc.vue b/apps/labs/doc/select/GroupDoc.vue
new file mode 100644
index 000000000..f5645f564
--- /dev/null
+++ b/apps/labs/doc/select/GroupDoc.vue
@@ -0,0 +1,181 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the children
+            of a group.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Select>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
+    <template #optiongroup="slotProps">
+        <div class="flex items-center">
+            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+            <div>{{ slotProps.option.label }}</div>
+        </div>
+    </template>
+</Select>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Select>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Select>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const groupedCities = ref([
+    {
+        label: 'Germany',
+        code: 'DE',
+        items: [
+            { label: 'Berlin', value: 'Berlin' },
+            { label: 'Frankfurt', value: 'Frankfurt' },
+            { label: 'Hamburg', value: 'Hamburg' },
+            { label: 'Munich', value: 'Munich' }
+        ]
+    },
+    {
+        label: 'USA',
+        code: 'US',
+        items: [
+            { label: 'Chicago', value: 'Chicago' },
+            { label: 'Los Angeles', value: 'Los Angeles' },
+            { label: 'New York', value: 'New York' },
+            { label: 'San Francisco', value: 'San Francisco' }
+        ]
+    },
+    {
+        label: 'Japan',
+        code: 'JP',
+        items: [
+            { label: 'Kyoto', value: 'Kyoto' },
+            { label: 'Osaka', value: 'Osaka' },
+            { label: 'Tokyo', value: 'Tokyo' },
+            { label: 'Yokohama', value: 'Yokohama' }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/IftaLabelDoc.vue b/apps/labs/doc/select/IftaLabelDoc.vue
new file mode 100644
index 000000000..a703e7bdb
--- /dev/null
+++ b/apps/labs/doc/select/IftaLabelDoc.vue
@@ -0,0 +1,87 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-56">
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
+            <label for="dd-city">City</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<IftaLabel>
+    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
+    <label for="dd-city">City</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-56">
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
+            <label for="dd-city">City</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-56">
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
+            <label for="dd-city">City</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/ImportDoc.vue b/apps/labs/doc/select/ImportDoc.vue
new file mode 100644
index 000000000..8ee8a0a1b
--- /dev/null
+++ b/apps/labs/doc/select/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Select from 'primevue/select';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/InvalidDoc.vue b/apps/labs/doc/select/InvalidDoc.vue
new file mode 100644
index 000000000..ad04dc8ea
--- /dev/null
+++ b/apps/labs/doc/select/InvalidDoc.vue
@@ -0,0 +1,82 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
+        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity1: null,
+            selectedCity2: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
+<Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
+        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity1: null,
+            selectedCity2: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
+        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity1 = ref(null);
+const selectedCity2 = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/LazyVirtualScrollDoc.vue b/apps/labs/doc/select/LazyVirtualScrollDoc.vue
new file mode 100644
index 000000000..80fe0e33a
--- /dev/null
+++ b/apps/labs/doc/select/LazyVirtualScrollDoc.vue
@@ -0,0 +1,136 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <div class="card flex justify-center">
+        <Select
+            v-model="selectedItem"
+            :options="items"
+            optionLabel="label"
+            optionValue="value"
+            :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }"
+            placeholder="Select Item"
+            class="w-full md:w-56"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedItem: null,
+            items: Array.from({ length: 100000 }),
+            loading: false,
+            code: {
+                basic: `
+<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
+    :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
+            :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedItem: null,
+            items: Array.from({ length: 100000 }),
+            loading: false
+        };
+    },
+    loadLazyTimeout: null,
+    methods: {
+        onLazyLoad(event) {
+            this.loading = true;
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //imitate delay of a backend call
+            this.loadLazyTimeout = setTimeout(() => {
+                const { first, last } = event;
+                const _items = [...this.items];
+
+                for (let i = first; i < last; i++) {
+                    _items[i] = { label: \`Item #\${i}\`, value: i };
+                }
+
+                this.items = _items;
+                this.loading = false;
+            }, Math.random() * 1000 + 250);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
+            :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedItem = ref();
+const items = ref(Array.from({ length: 100000 }));
+const loading = ref(false);
+const loadLazyTimeout = ref();
+const onLazyLoad = (event) => {
+    loading.value = true;
+
+    if (loadLazyTimeout.value) {
+        clearTimeout(loadLazyTimeout.value);
+    }
+
+    //imitate delay of a backend call
+    loadLazyTimeout.value = setTimeout(() => {
+        const { first, last } = event;
+        const _items = [...items.value];
+
+        for (let i = first; i < last; i++) {
+            _items[i] = { label: \`Item #\${i}\`, value: i };
+        }
+
+        items.value = _items;
+        loading.value = false;
+    }, Math.random() * 1000 + 250);
+}
+<\/script>
+`
+            }
+        };
+    },
+    loadLazyTimeout: null,
+    methods: {
+        onLazyLoad(event) {
+            this.loading = true;
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //imitate delay of a backend call
+            this.loadLazyTimeout = setTimeout(() => {
+                const { first, last } = event;
+                const items = [...this.items];
+
+                for (let i = first; i < last; i++) {
+                    items[i] = { label: `Item #${i}`, value: i };
+                }
+
+                this.items = items;
+                this.loading = false;
+            }, Math.random() * 1000 + 250);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/LoadingStateDoc.vue b/apps/labs/doc/select/LoadingStateDoc.vue
new file mode 100644
index 000000000..6a05914ba
--- /dev/null
+++ b/apps/labs/doc/select/LoadingStateDoc.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Loading state can be used <i>loading</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/SizesDoc.vue b/apps/labs/doc/select/SizesDoc.vue
new file mode 100644
index 000000000..2cbe09ac8
--- /dev/null
+++ b/apps/labs/doc/select/SizesDoc.vue
@@ -0,0 +1,89 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Select provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
+        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
+        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
+<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
+<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
+        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
+        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
+        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
+        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/TemplateDoc.vue b/apps/labs/doc/select/TemplateDoc.vue
new file mode 100644
index 000000000..c58fc6d9f
--- /dev/null
+++ b/apps/labs/doc/select/TemplateDoc.vue
@@ -0,0 +1,198 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Select offers multiple slots for customization through templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
+            <template #value="slotProps">
+                <div v-if="slotProps.value" class="flex items-center">
+                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
+                    <div>{{ slotProps.value.name }}</div>
+                </div>
+                <span v-else>
+                    {{ slotProps.placeholder }}
+                </span>
+            </template>
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium p-3">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </Select>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: [
+                { name: 'Australia', code: 'AU' },
+                { name: 'Brazil', code: 'BR' },
+                { name: 'China', code: 'CN' },
+                { name: 'Egypt', code: 'EG' },
+                { name: 'France', code: 'FR' },
+                { name: 'Germany', code: 'DE' },
+                { name: 'India', code: 'IN' },
+                { name: 'Japan', code: 'JP' },
+                { name: 'Spain', code: 'ES' },
+                { name: 'United States', code: 'US' }
+            ],
+            code: {
+                basic: `
+<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
+    <template #value="slotProps">
+        <div v-if="slotProps.value" class="flex items-center">
+            <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
+            <div>{{ slotProps.value.name }}</div>
+        </div>
+        <span v-else>
+            {{ slotProps.placeholder }}
+        </span>
+    </template>
+    <template #option="slotProps">
+        <div class="flex items-center">
+            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+            <div>{{ slotProps.option.name }}</div>
+        </div>
+    </template>
+    <template #dropdownicon>
+        <i class="pi pi-map" />
+    </template>
+    <template #header>
+        <div class="font-medium p-3">Available Countries</div>
+    </template>
+    <template #footer>
+        <div class="p-3">
+            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+        </div>
+    </template>
+</Select>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
+            <template #value="slotProps">
+                <div v-if="slotProps.value" class="flex items-center">
+                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.value.name }}</div>
+                </div>
+                <span v-else>
+                    {{ slotProps.placeholder }}
+                </span>
+            </template>
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium p-3">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </Select>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: [
+                { name: 'Australia', code: 'AU' },
+                { name: 'Brazil', code: 'BR' },
+                { name: 'China', code: 'CN' },
+                { name: 'Egypt', code: 'EG' },
+                { name: 'France', code: 'FR' },
+                { name: 'Germany', code: 'DE' },
+                { name: 'India', code: 'IN' },
+                { name: 'Japan', code: 'JP' },
+                { name: 'Spain', code: 'ES' },
+                { name: 'United States', code: 'US' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
+            <template #value="slotProps">
+                <div v-if="slotProps.value" class="flex items-center">
+                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.value.name }}</div>
+                </div>
+                <span v-else>
+                    {{ slotProps.placeholder }}
+                </span>
+            </template>
+            <template #option="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium p-3">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </Select>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCountry = ref();
+const countries = ref([
+    { name: 'Australia', code: 'AU' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'China', code: 'CN' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'France', code: 'FR' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'India', code: 'IN' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'United States', code: 'US' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/select/VirtualScrollDoc.vue b/apps/labs/doc/select/VirtualScrollDoc.vue
new file mode 100644
index 000000000..626174a00
--- /dev/null
+++ b/apps/labs/doc/select/VirtualScrollDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the
+            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by Select.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedItem: null,
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
+            code: {
+                basic: `
+<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+    :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+            :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedItem: null,
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+            :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedItem = ref();
+const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/AccessibilityDoc.vue b/apps/labs/doc/selectbutton/AccessibilityDoc.vue
new file mode 100644
index 000000000..17f59dad3
--- /dev/null
+++ b/apps/labs/doc/selectbutton/AccessibilityDoc.vue
@@ -0,0 +1,50 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>SelectButton component uses ToggleButton internally and has <i>group</i> role. Value to describe the component can be provided via <i>aria-labelledby</i> property.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state of a button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="label_number">Number</span>
+<Slider aria-labelledby="label_number" />
+
+<Slider aria-label="Number" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/BasicDoc.vue b/apps/labs/doc/selectbutton/BasicDoc.vue
new file mode 100644
index 000000000..e83fac879
--- /dev/null
+++ b/apps/labs/doc/selectbutton/BasicDoc.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            SelectButton is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
+            Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'One-Way',
+            options: ['One-Way', 'Return'],
+            code: {
+                basic: `
+<SelectButton v-model="value" :options="options" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'One-Way',
+            options: ['One-Way', 'Return']
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('One-Way');
+const options = ref(['One-Way', 'Return']);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/DisabledDoc.vue b/apps/labs/doc/selectbutton/DisabledDoc.vue
new file mode 100644
index 000000000..19d9b1a8d
--- /dev/null
+++ b/apps/labs/doc/selectbutton/DisabledDoc.vue
@@ -0,0 +1,76 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the <i>optionDisabled</i> property.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
+        <SelectButton v-model="value" :options="options1" disabled />
+        <SelectButton v-model="value2" :options="options2" optionDisabled="constant" optionLabel="name" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'Off',
+            value2: null,
+            options1: ['Off', 'On'],
+            options2: [
+                { name: 'Option 1', value: 1, constant: false },
+                { name: 'Option 2', value: 2, constant: true }
+            ],
+            code: {
+                basic: `
+<SelectButton v-model="value" :options="options" disabled />
+<SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
+        <SelectButton v-model="value" :options="options" disabled />
+        <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'Off',
+            value2: null,
+            options1: ['Off', 'On'],
+            options2: [
+                { name: 'Option 1', value: 1, constant: false },
+                { name: 'Option 2', value: 2, constant: true }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
+        <SelectButton v-model="value" :options="options" disabled />
+        <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref('Off');
+const value2 = ref();
+const options1 = ref(['Off', 'On']);
+const options2 = ref([
+    { name: 'Option 1', value: 1, constant: false },
+    { name: 'Option 2', value: 2, constant: true }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/FormsDoc.vue b/apps/labs/doc/selectbutton/FormsDoc.vue
new file mode 100644
index 000000000..7fd4888e9
--- /dev/null
+++ b/apps/labs/doc/selectbutton/FormsDoc.vue
@@ -0,0 +1,132 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex items-center flex-col gap-1">
+                <SelectButton name="selection" :options="options" />
+                <Message v-if="$form.selection?.invalid" severity="error" size="small" variant="simple">{{ $form.selection.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                selection: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
+                })
+            ),
+            options: ['One-Way', 'Return'],
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-1">
+        <SelectButton name="selection" :options="options" />
+        <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <SelectButton name="selection" :options="options" />
+                <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                selection: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
+                })
+            ),
+            options: ['One-Way', 'Return'],
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <SelectButton name="selection" :options="options" />
+                <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    selection: ''
+});
+const resolver = ref(zodResolver(
+    z.object({
+        selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/ImportDoc.vue b/apps/labs/doc/selectbutton/ImportDoc.vue
new file mode 100644
index 000000000..4920f1520
--- /dev/null
+++ b/apps/labs/doc/selectbutton/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import SelectButton from 'primevue/selectbutton';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/InvalidDoc.vue b/apps/labs/doc/selectbutton/InvalidDoc.vue
new file mode 100644
index 000000000..1914a8d86
--- /dev/null
+++ b/apps/labs/doc/selectbutton/InvalidDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            options: ['One-Way', 'Return'],
+            code: {
+                basic: `
+<SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null"  />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null"  />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            options: ['One-Way', 'Return'],
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null"  />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref(['One-Way', 'Return']);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/MultipleDoc.vue b/apps/labs/doc/selectbutton/MultipleDoc.vue
new file mode 100644
index 000000000..4f15196da
--- /dev/null
+++ b/apps/labs/doc/selectbutton/MultipleDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            options: [
+                { name: 'Option 1', value: 1 },
+                { name: 'Option 2', value: 2 },
+                { name: 'Option 3', value: 3 }
+            ],
+            code: {
+                basic: `
+<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            options: [
+                { name: 'Option 1', value: 1 },
+                { name: 'Option 2', value: 2 },
+                { name: 'Option 3', value: 3 }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { name: 'Option 1', value: 1 },
+    { name: 'Option 2', value: 2 },
+    { name: 'Option 3', value: 3 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/SizesDoc.vue b/apps/labs/doc/selectbutton/SizesDoc.vue
new file mode 100644
index 000000000..9bb30e3f3
--- /dev/null
+++ b/apps/labs/doc/selectbutton/SizesDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: 'Beginner',
+            value3: 'Expert',
+            options: ['Beginner', 'Expert'],
+            code: {
+                basic: `
+<SelectButton v-model="value1" :options="options" size="small" />
+<SelectButton v-model="value2" :options="options" />
+<SelectButton v-model="value3" :options="options" size="large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: 'Beginner',
+            value3: 'Expert',
+            options: ['Beginner', 'Expert'],
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref('Beginner');
+const value3 = ref('Expert');
+const options = ref(['Beginner', 'Expert']);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/TemplateDoc.vue b/apps/labs/doc/selectbutton/TemplateDoc.vue
new file mode 100644
index 000000000..61859eefb
--- /dev/null
+++ b/apps/labs/doc/selectbutton/TemplateDoc.vue
@@ -0,0 +1,88 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+            <template #option="slotProps">
+                <i :class="slotProps.option.icon"></i>
+            </template>
+        </SelectButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            options: [
+                { icon: 'pi pi-align-left', value: 'Left' },
+                { icon: 'pi pi-align-right', value: 'Right' },
+                { icon: 'pi pi-align-center', value: 'Center' },
+                { icon: 'pi pi-align-justify', value: 'Justify' }
+            ],
+            code: {
+                basic: `
+<SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+    <template #option="slotProps">
+        <i :class="slotProps.option.icon"></i>
+    </template>
+</SelectButton>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+            <template #option="slotProps">
+                <i :class="slotProps.option.icon"></i>
+            </template>
+        </SelectButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            options: [
+                { icon: 'pi pi-align-left', value: 'Left' },
+                { icon: 'pi pi-align-right', value: 'Right' },
+                { icon: 'pi pi-align-center', value: 'Center' },
+                { icon: 'pi pi-align-justify', value: 'Justify' }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+            <template #option="slotProps">
+                <i :class="slotProps.option.icon"></i>
+            </template>
+        </SelectButton>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { icon: 'pi pi-align-left', value: 'Left' },
+    { icon: 'pi pi-align-right', value: 'Right' },
+    { icon: 'pi pi-align-center', value: 'Center' },
+    { icon: 'pi pi-align-justify', value: 'Justify' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/skeleton/AccessibilityDoc.vue b/apps/labs/doc/skeleton/AccessibilityDoc.vue
new file mode 100644
index 000000000..845210682
--- /dev/null
+++ b/apps/labs/doc/skeleton/AccessibilityDoc.vue
@@ -0,0 +1,14 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Skeleton uses <i>aria-hidden</i> as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you
+            may use <i>aria-busy</i> on the container element as well to indicate the loading process.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <p>Component does not include any interactive elements.</p>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/skeleton/CardDoc.vue b/apps/labs/doc/skeleton/CardDoc.vue
new file mode 100644
index 000000000..e2d8ce2a5
--- /dev/null
+++ b/apps/labs/doc/skeleton/CardDoc.vue
@@ -0,0 +1,99 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sample Card implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <div class="flex mb-4">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div>
+                    <Skeleton width="10rem" class="mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="mb-2"></Skeleton>
+                    <Skeleton height=".5rem"></Skeleton>
+                </div>
+            </div>
+            <Skeleton width="100%" height="150px"></Skeleton>
+            <div class="flex justify-between mt-4">
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+    <div class="flex mb-4">
+        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+        <div>
+            <Skeleton width="10rem" class="mb-2"></Skeleton>
+            <Skeleton width="5rem" class="mb-2"></Skeleton>
+            <Skeleton height=".5rem"></Skeleton>
+        </div>
+    </div>
+    <Skeleton width="100%" height="150px"></Skeleton>
+    <div class="flex justify-between mt-4">
+        <Skeleton width="4rem" height="2rem"></Skeleton>
+        <Skeleton width="4rem" height="2rem"></Skeleton>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <div class="flex mb-4">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div>
+                    <Skeleton width="10rem" class="mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="mb-2"></Skeleton>
+                    <Skeleton height=".5rem"></Skeleton>
+                </div>
+            </div>
+            <Skeleton width="100%" height="150px"></Skeleton>
+            <div class="flex justify-between mt-4">
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <div class="flex mb-4">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div>
+                    <Skeleton width="10rem" class="mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="mb-2"></Skeleton>
+                    <Skeleton height=".5rem"></Skeleton>
+                </div>
+            </div>
+            <Skeleton width="100%" height="150px"></Skeleton>
+            <div class="flex justify-between mt-4">
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/skeleton/DataTableDoc.vue b/apps/labs/doc/skeleton/DataTableDoc.vue
new file mode 100644
index 000000000..f45d85633
--- /dev/null
+++ b/apps/labs/doc/skeleton/DataTableDoc.vue
@@ -0,0 +1,138 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+    </DocSectionText>
+    <div class="card">
+        <DataTable :value="products">
+            <Column field="code" header="Code">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="name" header="Name">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="category" header="Category">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="quantity" header="Quantity">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<DataTable :value="products">
+    <Column field="code" header="Code">
+        <template #body>
+            <Skeleton></Skeleton>
+        </template>
+    </Column>
+    <Column field="name" header="Name">
+        <template #body>
+            <Skeleton></Skeleton>
+        </template>
+    </Column>
+    <Column field="category" header="Category">
+        <template #body>
+            <Skeleton></Skeleton>
+        </template>
+    </Column>
+    <Column field="quantity" header="Quantity">
+        <template #body>
+            <Skeleton></Skeleton>
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products">
+            <Column field="code" header="Code">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="name" header="Name">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="category" header="Category">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="quantity" header="Quantity">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            products: new Array(4)
+        };
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products">
+            <Column field="code" header="Code">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="name" header="Name">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="category" header="Category">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+            <Column field="quantity" header="Quantity">
+                <template #body>
+                    <Skeleton></Skeleton>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const products = ref(new Array(4));
+<\/script>
+`
+            },
+            products: new Array(4)
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/skeleton/ImportDoc.vue b/apps/labs/doc/skeleton/ImportDoc.vue
new file mode 100644
index 000000000..ffed605b6
--- /dev/null
+++ b/apps/labs/doc/skeleton/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Skeleton from 'primevue/skeleton';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/skeleton/ListDoc.vue b/apps/labs/doc/skeleton/ListDoc.vue
new file mode 100644
index 000000000..4574a9d72
--- /dev/null
+++ b/apps/labs/doc/skeleton/ListDoc.vue
@@ -0,0 +1,195 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <ul class="m-0 p-0 list-none">
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+    <ul class="m-0 p-0 list-none">
+        <li class="mb-4">
+            <div class="flex">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div class="self-center" style="flex: 1">
+                    <Skeleton width="100%" class="mb-2"></Skeleton>
+                    <Skeleton width="75%"></Skeleton>
+                </div>
+            </div>
+        </li>
+        <li class="mb-4">
+            <div class="flex">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div class="self-center" style="flex: 1">
+                    <Skeleton width="100%" class="mb-2"></Skeleton>
+                    <Skeleton width="75%"></Skeleton>
+                </div>
+            </div>
+        </li>
+        <li class="mb-4">
+            <div class="flex">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div class="self-center" style="flex: 1">
+                    <Skeleton width="100%" class="mb-2"></Skeleton>
+                    <Skeleton width="75%"></Skeleton>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div class="flex">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div class="self-center" style="flex: 1">
+                    <Skeleton width="100%" class="mb-2"></Skeleton>
+                    <Skeleton width="75%"></Skeleton>
+                </div>
+            </div>
+        </li>
+    </ul>
+</div>
+`,
+                options: `
+<template>
+    <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <ul class="m-0 p-0 list-none">
+            <li class="mb-4">
+                <div class="flex">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div class="self-center" style="flex: 1">
+                        <Skeleton width="100%" class="mb-2"></Skeleton>
+                        <Skeleton width="75%"></Skeleton>
+                    </div>
+                </div>
+            </li>
+            <li class="mb-4">
+                <div class="flex">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div class="self-center" style="flex: 1">
+                        <Skeleton width="100%" class="mb-2"></Skeleton>
+                        <Skeleton width="75%"></Skeleton>
+                    </div>
+                </div>
+            </li>
+            <li class="mb-4">
+                <div class="flex">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div class="self-center" style="flex: 1">
+                        <Skeleton width="100%" class="mb-2"></Skeleton>
+                        <Skeleton width="75%"></Skeleton>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="flex">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div class="self-center" style="flex: 1">
+                        <Skeleton width="100%" class="mb-2"></Skeleton>
+                        <Skeleton width="75%"></Skeleton>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <ul class="m-0 p-0 list-none">
+            <li class="mb-4">
+                <div class="flex">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div class="self-center" style="flex: 1">
+                        <Skeleton width="100%" class="mb-2"></Skeleton>
+                        <Skeleton width="75%"></Skeleton>
+                    </div>
+                </div>
+            </li>
+            <li class="mb-4">
+                <div class="flex">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div class="self-center" style="flex: 1">
+                        <Skeleton width="100%" class="mb-2"></Skeleton>
+                        <Skeleton width="75%"></Skeleton>
+                    </div>
+                </div>
+            </li>
+            <li class="mb-4">
+                <div class="flex">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div class="self-center" style="flex: 1">
+                        <Skeleton width="100%" class="mb-2"></Skeleton>
+                        <Skeleton width="75%"></Skeleton>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="flex">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div class="self-center" style="flex: 1">
+                        <Skeleton width="100%" class="mb-2"></Skeleton>
+                        <Skeleton width="75%"></Skeleton>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/skeleton/ShapesDoc.vue b/apps/labs/doc/skeleton/ShapesDoc.vue
new file mode 100644
index 000000000..4f6572315
--- /dev/null
+++ b/apps/labs/doc/skeleton/ShapesDoc.vue
@@ -0,0 +1,172 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Various shapes and sizes can be created using styling properties like <i>shape</i>, <i>width</i>, <i>height</i>, <i>borderRadius</i> and <i>class</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rectangle</h5>
+                <Skeleton class="mb-2"></Skeleton>
+                <Skeleton width="10rem" class="mb-2"></Skeleton>
+                <Skeleton width="5rem" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2"></Skeleton>
+                <Skeleton width="10rem" height="4rem"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rounded</h5>
+                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Square</h5>
+                <div class="flex items-end">
+                    <Skeleton size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton size="5rem"></Skeleton>
+                </div>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Circle</h5>
+                <div class="flex items-end">
+                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="5rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<h5>Rectangle</h5>
+<Skeleton class="mb-2"></Skeleton>
+<Skeleton width="10rem" class="mb-2"></Skeleton>
+<Skeleton width="5rem" class="mb-2"></Skeleton>
+<Skeleton height="2rem" class="mb-2"></Skeleton>
+<Skeleton width="10rem" height="4rem"></Skeleton>
+
+<h5>Rounded</h5>
+<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+
+<h5 class="mt-4">Square</h5>
+<Skeleton size="2rem" class="mr-2"></Skeleton>
+<Skeleton size="3rem" class="mr-2"></Skeleton>
+<Skeleton size="4rem" class="mr-2"></Skeleton>
+<Skeleton size="5rem"></Skeleton>
+
+<h5 class="mt-4">Circle</h5>
+<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+<Skeleton shape="circle" size="5rem"></Skeleton>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rectangle</h5>
+                <Skeleton class="mb-2"></Skeleton>
+                <Skeleton width="10rem" class="mb-2"></Skeleton>
+                <Skeleton width="5rem" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2"></Skeleton>
+                <Skeleton width="10rem" height="4rem"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rounded</h5>
+                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Square</h5>
+                <div class="flex items-end">
+                    <Skeleton size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton size="5rem"></Skeleton>
+                </div>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Circle</h5>
+                <div class="flex items-end">
+                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="5rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rectangle</h5>
+                <Skeleton class="mb-2"></Skeleton>
+                <Skeleton width="10rem" class="mb-2"></Skeleton>
+                <Skeleton width="5rem" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2"></Skeleton>
+                <Skeleton width="10rem" height="4rem"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rounded</h5>
+                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Square</h5>
+                <div class="flex items-end">
+                    <Skeleton size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton size="5rem"></Skeleton>
+                </div>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Circle</h5>
+                <div class="flex items-end">
+                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="5rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/AccessibilityDoc.vue b/apps/labs/doc/slider/AccessibilityDoc.vue
new file mode 100644
index 000000000..003d823cd
--- /dev/null
+++ b/apps/labs/doc/slider/AccessibilityDoc.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined
+            using <i>aria-labelledby</i> and <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the slider.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">left arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Decrements the value.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">right arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Increments the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Set the minimum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Set the maximum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page up</i></td>
+                        <td>Increments the value by 10 steps.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page down</i></td>
+                        <td>Decrements the value by 10 steps.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="label_number">Number</span>
+<Slider aria-labelledby="label_number" />
+
+<Slider aria-label="Number" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/BasicDoc.vue b/apps/labs/doc/slider/BasicDoc.vue
new file mode 100644
index 000000000..9f44f23ce
--- /dev/null
+++ b/apps/labs/doc/slider/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Slider is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Slider v-model="value" class="w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/FilterDoc.vue b/apps/labs/doc/slider/FilterDoc.vue
new file mode 100644
index 000000000..5632c6426
--- /dev/null
+++ b/apps/labs/doc/slider/FilterDoc.vue
@@ -0,0 +1,105 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Image filter implementation using multiple sliders.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
+            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            filter: 0,
+            filterValues: [100, 100, 0],
+            filterOptions: [
+                { label: 'Contrast', value: 0 },
+                { label: 'Brightness', value: 1 },
+                { label: 'Sepia', value: 2 }
+            ],
+            code: {
+                basic: `
+<img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+<SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
+<Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
+            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            filter: 0,
+            filterValues: [100, 100, 0],
+            filterOptions: [
+                { label: 'Contrast', value: 0 },
+                { label: 'Brightness', value: 1 },
+                { label: 'Sepia', value: 2 }
+            ]
+        }
+    },
+    computed: {
+        filterStyle() {
+            return {
+                filter: \`contrast(\${this.filterValues[0]}%) brightness(\${this.filterValues[1]}%) sepia(\${this.filterValues[2]}%)\`
+            };
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
+            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const filter = ref(0);
+const filterValues = ref([100, 100, 0]);
+const filterOptions = ref([
+    { label: 'Contrast', value: 0 },
+    { label: 'Brightness', value: 1 },
+    { label: 'Sepia', value: 2 }
+]);
+const filterStyle = computed(() => {
+    return {
+        filter: \`contrast(\${this.filterValues[0]}%) brightness(\${this.filterValues[1]}%) sepia(\${this.filterValues[2]}%)\`
+    };
+})
+<\/script>
+`
+            }
+        };
+    },
+    computed: {
+        filterStyle() {
+            return {
+                filter: `contrast(${this.filterValues[0]}%) brightness(${this.filterValues[1]}%) sepia(${this.filterValues[2]}%)`
+            };
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/FormsDoc.vue b/apps/labs/doc/slider/FormsDoc.vue
new file mode 100644
index 000000000..6e8d339e5
--- /dev/null
+++ b/apps/labs/doc/slider/FormsDoc.vue
@@ -0,0 +1,130 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Slider integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-4">
+                <Slider name="slider" />
+                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                slider: 0
+            },
+            resolver: zodResolver(
+                z.object({
+                    slider: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+    <div class="flex flex-col gap-4">
+        <Slider name="slider" />
+        <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-4">
+                <Slider name="slider" />
+                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                slider: 0
+            },
+            resolver: zodResolver(
+                z.object({
+                    slider: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
+                })
+            ),
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-4">
+                <Slider name="slider" />
+                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    slider: 0
+});
+const resolver = ref(zodResolver(
+    z.object({
+        slider: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/ImportDoc.vue b/apps/labs/doc/slider/ImportDoc.vue
new file mode 100644
index 000000000..edde33fc8
--- /dev/null
+++ b/apps/labs/doc/slider/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Slider from 'primevue/slider';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/InputDoc.vue b/apps/labs/doc/slider/InputDoc.vue
new file mode 100644
index 000000000..c4bb3413d
--- /dev/null
+++ b/apps/labs/doc/slider/InputDoc.vue
@@ -0,0 +1,64 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Slider is connected to an input field using two-way binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="w-56">
+            <InputText v-model.number="value" class="w-full mb-4" />
+            <Slider v-model="value" class="w-full" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50,
+            code: {
+                basic: `
+<InputText v-model.number="value" />
+<Slider v-model="value" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="w-56">
+            <InputText v-model.number="value" class="w-full mb-4" />
+            <Slider v-model="value" class="w-full" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="w-56">
+            <InputText v-model.number="value" class="w-full mb-4" />
+            <Slider v-model="value" class="w-full" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/RangeDoc.vue b/apps/labs/doc/slider/RangeDoc.vue
new file mode 100644
index 000000000..2d9c9f012
--- /dev/null
+++ b/apps/labs/doc/slider/RangeDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Slider v-model="value" range class="w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [20, 80],
+            code: {
+                basic: `
+<Slider v-model="value" range class="w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" range class="w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [20, 80]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" range class="w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref([20, 80]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/StepDoc.vue b/apps/labs/doc/slider/StepDoc.vue
new file mode 100644
index 000000000..0df6e00a4
--- /dev/null
+++ b/apps/labs/doc/slider/StepDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Size of each movement is defined with the <i>step</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Slider v-model="value" :step="20" class="w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 20,
+            code: {
+                basic: `
+<Slider v-model="value" :step="20" class="w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" :step="20" class="w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 20
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" :step="20" class="w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(20);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/VerticalDoc.vue b/apps/labs/doc/slider/VerticalDoc.vue
new file mode 100644
index 000000000..cfbddb1dc
--- /dev/null
+++ b/apps/labs/doc/slider/VerticalDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Default layout of slider is <i>horizontal</i>, use <i>orientation</i> property for the alternative <i>vertical</i> mode.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Slider v-model="value" orientation="vertical" class="h-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50,
+            code: {
+                basic: `
+<Slider v-model="value" orientation="vertical" class="h-56" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" orientation="vertical" class="h-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 50
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" orientation="vertical" class="h-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/AccessibilityDoc.vue b/apps/labs/doc/speeddial/AccessibilityDoc.vue
new file mode 100644
index 000000000..1657bdf68
--- /dev/null
+++ b/apps/labs/doc/speeddial/AccessibilityDoc.vue
@@ -0,0 +1,132 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the <i>aria-labelledby</i> or <i>aria-label</i> props. Addititonally the button includes
+            includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
+        </p>
+
+        <p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the button.</p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Menu Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the visibility of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the visibility of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Opens the menu and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Opens the menu and moves focus to the last item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Opens the menu and moves focus to the last item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Opens the menu and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the menu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <h3>Menu Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Actives the menuitem, closes the menu and sets focus on the menu button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Actives the menuitem, closes the menu and sets focus on the menu button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the menu and sets focus on the menu button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>arrow keys</i>
+                        </td>
+                        <td>Navigates between the menu items.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last item.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<SpeedDial aria-label="Options" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/CircleDoc.vue b/apps/labs/doc/speeddial/CircleDoc.vue
new file mode 100644
index 000000000..5dab22aeb
--- /dev/null
+++ b/apps/labs/doc/speeddial/CircleDoc.vue
@@ -0,0 +1,175 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items can be displayed around the button when <i>type</i> is set to <i>circle</i>. Additional <i>radius</i> property defines the radius of the circle.</p>
+    </DocSectionText>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/ImportDoc.vue b/apps/labs/doc/speeddial/ImportDoc.vue
new file mode 100644
index 000000000..84b262c2b
--- /dev/null
+++ b/apps/labs/doc/speeddial/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import SpeedDial from 'primevue/speeddial';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/LinearDoc.vue b/apps/labs/doc/speeddial/LinearDoc.vue
new file mode 100644
index 000000000..eaf3246a2
--- /dev/null
+++ b/apps/labs/doc/speeddial/LinearDoc.vue
@@ -0,0 +1,187 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SpeedDial items are defined with the <i>model</i> property based on MenuModel API. Default orientation of the items is linear and <i>direction</i> property is used to define the position of the items related to the button.</p>
+    </DocSectionText>
+    <div class="card">
+        <div style="position: relative; height: 500px">
+            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+<SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+<SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+<SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <div style="position: relative; height: 500px">
+            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div style="position: relative; height: 500px">
+            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/MaskDoc.vue b/apps/labs/doc/speeddial/MaskDoc.vue
new file mode 100644
index 000000000..f3e32fc4f
--- /dev/null
+++ b/apps/labs/doc/speeddial/MaskDoc.vue
@@ -0,0 +1,173 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Adding <i>mask</i> property displays a modal layer behind the popup items.</p>
+    </DocSectionText>
+    <div class="card p-4">
+        <div :style="{ position: 'relative', height: '350px' }">
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
+`,
+                options: `
+<template>
+    <div class="card p-4">
+        <div :style="{ position: 'relative', height: '350px' }">
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+data() {
+    return {
+        items: [
+            {
+                label: 'Add',
+                icon: 'pi pi-pencil',
+                command: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                }
+            },
+            {
+                label: 'Update',
+                icon: 'pi pi-refresh',
+                command: () => {
+                    this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                }
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-trash',
+                command: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                }
+            },
+            {
+                label: 'Upload',
+                icon: 'pi pi-upload',
+                command: () => {
+                    this.$router.push('/fileupload');
+                }
+            },
+            {
+                label: 'Vue Website',
+                icon: 'pi pi-external-link',
+                command: () => {
+                    window.location.href = 'https://vuejs.org/';
+                }
+            }
+        ]
+    }
+}
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card p-4">
+        <div :style="{ position: 'relative', height: '350px' }">
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/QuarterCircleDoc.vue b/apps/labs/doc/speeddial/QuarterCircleDoc.vue
new file mode 100644
index 000000000..ba455cfe3
--- /dev/null
+++ b/apps/labs/doc/speeddial/QuarterCircleDoc.vue
@@ -0,0 +1,187 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Setting <i>type</i> as <i>quarter-circle</i> displays the items at one of four corners of a button based on the <i>direction</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <div style="position: relative; height: 500px">
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <div style="position: relative; height: 500px">
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+data() {
+    return {
+        items: [
+            {
+                label: 'Add',
+                icon: 'pi pi-pencil',
+                command: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                }
+            },
+            {
+                label: 'Update',
+                icon: 'pi pi-refresh',
+                command: () => {
+                    this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                }
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-trash',
+                command: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                }
+            },
+            {
+                label: 'Upload',
+                icon: 'pi pi-upload',
+                command: () => {
+                    this.$router.push('/fileupload');
+                }
+            },
+            {
+                label: 'Vue Website',
+                icon: 'pi pi-external-link',
+                command: () => {
+                    window.location.href = 'https://vuejs.org/';
+                }
+            }
+        ]
+    }
+}
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div style="position: relative; height: 500px">
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/SemiCircleDoc.vue b/apps/labs/doc/speeddial/SemiCircleDoc.vue
new file mode 100644
index 000000000..8165512e0
--- /dev/null
+++ b/apps/labs/doc/speeddial/SemiCircleDoc.vue
@@ -0,0 +1,185 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>type</i> is defined as <i>semi-circle</i>, items are displayed in a half-circle around the button.</p>
+    </DocSectionText>
+    <div class="card">
+        <div style="position: relative; height: 500px">
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <div style="position: relative; height: 500px">
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card" :style="{ position: 'relative', height: '500px' }">
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/TemplateDoc.vue b/apps/labs/doc/speeddial/TemplateDoc.vue
new file mode 100644
index 000000000..ba29ae75e
--- /dev/null
+++ b/apps/labs/doc/speeddial/TemplateDoc.vue
@@ -0,0 +1,252 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            SpeedDial offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. The button has its own <i>button</i> template, additional slot named <i>icon</i> is provided to embed
+            icon content for default button.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
+                <template #button="{ toggleCallback }">
+                    <Button outlined class="border" @click="toggleCallback">
+                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                                fill="var(--p-primary-color)"
+                            />
+                            <path
+                                d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                                fill="var(--p-text-color)"
+                            />
+                        </svg>
+                    </Button>
+                </template>
+                <template #item="{ item, toggleCallback }">
+                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
+                        <span :class="item.icon" />
+                        <span>
+                            {{ item.label }}
+                        </span>
+                    </div>
+                </template>
+            </SpeedDial>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
+    <template #button="{ toggleCallback }">
+        <Button outlined class="border" @click="toggleCallback">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="..." fill="var(--p-primary-color)" />
+                <path d="..." fill="var(--p-text-color)" />
+            </svg>
+        </Button>
+    </template>
+    <template #item="{ item, toggleCallback }">
+        <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
+            <span :class="item.icon" />
+            <span>
+                {{ item.label }}
+            </span>
+        </div>
+    </template>
+</SpeedDial>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
+                <template #button="{ toggleCallback }">
+                    <Button outlined class="border" @click="toggleCallback">
+                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="..." fill="var(--p-primary-color)" />
+                            <path d="..." fill="var(--p-text-color)" />
+                        </svg>
+                    </Button>
+                </template>
+                <template #item="{ item, toggleCallback }">
+                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
+                        <span :class="item.icon" />
+                        <span>
+                            {{ item.label }}
+                        </span>
+                    </div>
+                </template>
+            </SpeedDial>
+        </div>
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
+                <template #button="{ toggleCallback }">
+                    <Button outlined class="border" @click="toggleCallback">
+                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="..." fill="var(--p-primary-color)" />
+                            <path d="..." fill="var(--p-text-color)" />
+                        </svg>
+                    </Button>
+                </template>
+                <template #item="{ item, toggleCallback }">
+                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
+                        <span :class="item.icon" />
+                        <span>
+                            {{ item.label }}
+                        </span>
+                    </div>
+                </template>
+            </SpeedDial>
+        </div>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/speeddial/TooltipDoc.vue b/apps/labs/doc/speeddial/TooltipDoc.vue
new file mode 100644
index 000000000..3e43b9b46
--- /dev/null
+++ b/apps/labs/doc/speeddial/TooltipDoc.vue
@@ -0,0 +1,179 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items display a tooltip on hover when a standalone <PrimeVueNuxtLink to="/tooltip">Tooltip</PrimeVueNuxtLink> is present with a target that matches the items.</p>
+    </DocSectionText>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '350px' }">
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
+<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '350px' }">
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '350px' }">
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
+            <Toast />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/AccessibilityDoc.vue b/apps/labs/doc/splitbutton/AccessibilityDoc.vue
new file mode 100644
index 000000000..841f2cec1
--- /dev/null
+++ b/apps/labs/doc/splitbutton/AccessibilityDoc.vue
@@ -0,0 +1,149 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            SplitButton component renders two native button elements, main button uses the label property to define <i>aria-label</i> by default which can be customized with <i>buttonProps</i>. Dropdown button requires an explicit definition to
+            describe it using <i>menuButtonProps</i> option and also includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
+        </p>
+
+        <p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the dropdown button.</p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Main Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Menu Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">enter</i>
+                                <i class="mb-1">space</i>
+                                <i class="mb-1">down arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Opens the menu and moves focus to the first item.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Menu Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Closes the popup, then moves focus to the target element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>In nested mode if option is closed, opens the option otherwise moves focus to the first child option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>In nested mode if option is open, closes the option otherwise moves focus to the parent option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/BasicDoc.vue b/apps/labs/doc/splitbutton/BasicDoc.vue
new file mode 100644
index 000000000..a2bfd80e4
--- /dev/null
+++ b/apps/labs/doc/splitbutton/BasicDoc.vue
@@ -0,0 +1,138 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" @click="save" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+                { label: 'Upload', to: '/fileupload' }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/DisabledDoc.vue b/apps/labs/doc/splitbutton/DisabledDoc.vue
new file mode 100644
index 000000000..bb1f6ce63
--- /dev/null
+++ b/apps/labs/doc/splitbutton/DisabledDoc.vue
@@ -0,0 +1,136 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" @click="save" :model="items" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" @click="save" :model="items" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <SplitButton label="Save" @click="save" :model="items" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <SplitButton label="Save" @click="save" :model="items" disabled />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/IconsDoc.vue b/apps/labs/doc/splitbutton/IconsDoc.vue
new file mode 100644
index 000000000..0287d8e25
--- /dev/null
+++ b/apps/labs/doc/splitbutton/IconsDoc.vue
@@ -0,0 +1,146 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The buttons and menuitems have support to display icons.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-power-off',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-power-off',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-power-off',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/ImportDoc.vue b/apps/labs/doc/splitbutton/ImportDoc.vue
new file mode 100644
index 000000000..4eb903ebf
--- /dev/null
+++ b/apps/labs/doc/splitbutton/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import SplitButton from 'primevue/splitbutton';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/NestedDoc.vue b/apps/labs/doc/splitbutton/NestedDoc.vue
new file mode 100644
index 000000000..a6093104c
--- /dev/null
+++ b/apps/labs/doc/splitbutton/NestedDoc.vue
@@ -0,0 +1,270 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multi-level menus are supported with a nested menu hierarchy.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" @click="save" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+</template>
+
+<script setup>
+const items = [
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                items: [
+                    {
+                        label: 'Document',
+                        icon: 'pi pi-file'
+                    },
+                    {
+                        label: 'Image',
+                        icon: 'pi pi-image'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Open',
+                icon: 'pi pi-folder-open'
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-file-edit',
+        items: [
+            {
+                label: 'Copy',
+                icon: 'pi pi-copy'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times'
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Slack',
+                icon: 'pi pi-slack'
+            },
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp'
+            }
+        ]
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/OutlinedDoc.vue b/apps/labs/doc/splitbutton/OutlinedDoc.vue
new file mode 100644
index 000000000..79651768c
--- /dev/null
+++ b/apps/labs/doc/splitbutton/OutlinedDoc.vue
@@ -0,0 +1,165 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Outlined buttons display a border without a background initially.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    },
+    methods: {
+        toast() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/RaisedDoc.vue b/apps/labs/doc/splitbutton/RaisedDoc.vue
new file mode 100644
index 000000000..6e33f9865
--- /dev/null
+++ b/apps/labs/doc/splitbutton/RaisedDoc.vue
@@ -0,0 +1,165 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Raised buttons display a shadow to indicate elevation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/RaisedTextDoc.vue b/apps/labs/doc/splitbutton/RaisedTextDoc.vue
new file mode 100644
index 000000000..c74f82479
--- /dev/null
+++ b/apps/labs/doc/splitbutton/RaisedTextDoc.vue
@@ -0,0 +1,161 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text buttons can be displayed as raised as well for elevation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/RoundedDoc.vue b/apps/labs/doc/splitbutton/RoundedDoc.vue
new file mode 100644
index 000000000..5b039dcb7
--- /dev/null
+++ b/apps/labs/doc/splitbutton/RoundedDoc.vue
@@ -0,0 +1,165 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Rounded buttons have a circular border radius.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/SeverityDoc.vue b/apps/labs/doc/splitbutton/SeverityDoc.vue
new file mode 100644
index 000000000..bc69f68d7
--- /dev/null
+++ b/apps/labs/doc/splitbutton/SeverityDoc.vue
@@ -0,0 +1,165 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>severity</i> property defines the variant of a button.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" :model="items" @click="save"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/SizesDoc.vue b/apps/labs/doc/splitbutton/SizesDoc.vue
new file mode 100644
index 000000000..4e4811fcc
--- /dev/null
+++ b/apps/labs/doc/splitbutton/SizesDoc.vue
@@ -0,0 +1,145 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SplitButton provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
+    </DocSectionText>
+    <div class="card flex items-center justify-center flex-wrap gap-4">
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
+`,
+                options: `
+<template>
+    <div class="card flex items-center justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex items-center justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/TemplateDoc.vue b/apps/labs/doc/splitbutton/TemplateDoc.vue
new file mode 100644
index 000000000..673e1152b
--- /dev/null
+++ b/apps/labs/doc/splitbutton/TemplateDoc.vue
@@ -0,0 +1,157 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content inside a button is defined as children.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SplitButton :model="items" @click="save" severity="contrast">
+            <span class="flex items-center font-bold">
+                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
+                <span>PrimeVue</span>
+            </span>
+        </SplitButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton :model="items" @click="save" severity="contrast">
+    <span class="flex items-center font-bold">
+        <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
+        <span>PrimeVue</span>
+    </span>
+</SplitButton>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <SplitButton :model="items" @click="save" severity="contrast">
+            <span class="flex items-center font-bold">
+                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
+                <span>PrimeVue</span>
+            </span>
+        </SplitButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <SplitButton :model="items" @click="save" severity="contrast">
+            <span class="flex items-center font-bold">
+                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
+                <span>PrimeVue</span>
+            </span>
+        </SplitButton>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitbutton/TextDoc.vue b/apps/labs/doc/splitbutton/TextDoc.vue
new file mode 100644
index 000000000..7f9084033
--- /dev/null
+++ b/apps/labs/doc/splitbutton/TextDoc.vue
@@ -0,0 +1,161 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text buttons are displayed as textual elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" :model="items" @click="save" text></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Toast />
+        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitter/AccessibilityDoc.vue b/apps/labs/doc/splitter/AccessibilityDoc.vue
new file mode 100644
index 000000000..f5189a7f8
--- /dev/null
+++ b/apps/labs/doc/splitter/AccessibilityDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.</p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus through the splitter bar.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves a vertical splitter down.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves a vertical splitter up.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves a horizontal splitter to the left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves a horizontal splitter to the right.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/splitter/HorizontalDoc.vue b/apps/labs/doc/splitter/HorizontalDoc.vue
new file mode 100644
index 000000000..4833c4a50
--- /dev/null
+++ b/apps/labs/doc/splitter/HorizontalDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Splitter requires two SplitterPanel components as children which are displayed horizontally by default.</p>
+    </DocSectionText>
+    <div class="card">
+        <Splitter style="height: 300px" class="mb-8">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Splitter style="height: 300px" class="mb-8">
+    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+</Splitter>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px" class="mb-8">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px" class="mb-8">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitter/ImportDoc.vue b/apps/labs/doc/splitter/ImportDoc.vue
new file mode 100644
index 000000000..785566b50
--- /dev/null
+++ b/apps/labs/doc/splitter/ImportDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Splitter from 'primevue/splitter';
+import SplitterPanel from 'primevue/splitterpanel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitter/NestedDoc.vue b/apps/labs/doc/splitter/NestedDoc.vue
new file mode 100644
index 000000000..53bfa9e35
--- /dev/null
+++ b/apps/labs/doc/splitter/NestedDoc.vue
@@ -0,0 +1,95 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Splitters can be combined to create advanced layouts.</p>
+    </DocSectionText>
+    <div class="card">
+        <Splitter style="height: 300px">
+            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel :size="80">
+                <Splitter layout="vertical">
+                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
+                    <SplitterPanel :size="85">
+                        <Splitter>
+                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
+                        </Splitter>
+                    </SplitterPanel>
+                </Splitter>
+            </SplitterPanel>
+        </Splitter>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Splitter style="height: 300px">
+    <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
+    <SplitterPanel :size="80">
+        <Splitter layout="vertical">
+            <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
+            <SplitterPanel :size="85">
+                <Splitter>
+                    <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
+                    <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
+                </Splitter>
+            </SplitterPanel>
+        </Splitter>
+    </SplitterPanel>
+</Splitter>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px">
+            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel :size="80">
+                <Splitter layout="vertical">
+                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
+                    <SplitterPanel :size="85">
+                        <Splitter>
+                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
+                        </Splitter>
+                    </SplitterPanel>
+                </Splitter>
+            </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px">
+            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel :size="80">
+                <Splitter layout="vertical">
+                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
+                    <SplitterPanel :size="85">
+                        <Splitter>
+                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
+                        </Splitter>
+                    </SplitterPanel>
+                </Splitter>
+            </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitter/SizeDoc.vue b/apps/labs/doc/splitter/SizeDoc.vue
new file mode 100644
index 000000000..9e4c1e51e
--- /dev/null
+++ b/apps/labs/doc/splitter/SizeDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Initial dimension of a panel is percentage based and defined using the <i>size</i> property. In addition,<i>minSize</i> is provided to set a minimum value during a resize.</p>
+    </DocSectionText>
+    <div class="card">
+        <Splitter style="height: 300px">
+            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Splitter style="height: 300px">
+    <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
+</Splitter>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px">
+            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px">
+            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/splitter/VerticalDoc.vue b/apps/labs/doc/splitter/VerticalDoc.vue
new file mode 100644
index 000000000..874deaeb2
--- /dev/null
+++ b/apps/labs/doc/splitter/VerticalDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Panels are displayed as stacked by setting the <i>layout</i> to <i>vertical</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <Splitter style="height: 300px" layout="vertical">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Splitter style="height: 300px" layout="vertical">
+    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+</Splitter>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px" layout="vertical">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px" layout="vertical">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/stepper/AccessibilityDoc.vue b/apps/labs/doc/stepper/AccessibilityDoc.vue
new file mode 100644
index 000000000..7b844f424
--- /dev/null
+++ b/apps/labs/doc/stepper/AccessibilityDoc.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Stepper container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Stepper. Each stepper header has a
+            <i>tab</i> role and <i>aria-controls</i> to refer to the corresponding stepper content element. The content element of each stepper has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of the header and
+            <i>aria-labelledby</i> reference to the header as the accessible name.
+        </p>
+
+        <h3>Tab Header Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused stepper header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused stepper header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/stepper/HorizontalDoc.vue b/apps/labs/doc/stepper/HorizontalDoc.vue
new file mode 100644
index 000000000..0897d01ac
--- /dev/null
+++ b/apps/labs/doc/stepper/HorizontalDoc.vue
@@ -0,0 +1,169 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Stepper consists of a combination of <i>StepList</i>, <i>Step</i>, <i>StepPanels</i> and <i>StepPanel</i> components. The <i>value</i> property is essential for associating Step and StepPanel with each other.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Stepper value="1" class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Header I</Step>
+                <Step value="2">Header II</Step>
+                <Step value="3">Header III</Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" value="1">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="2">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="3">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="pt-6">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Stepper value="1">
+    <StepList>
+        <Step value="1">Header I</Step>
+        <Step value="2">Header II</Step>
+        <Step value="3">Header III</Step>
+    </StepList>
+    <StepPanels>
+        <StepPanel v-slot="{ activateCallback }" value="1">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+            </div>
+            <div class="flex pt-6 justify-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
+            </div>
+        </StepPanel>
+        <StepPanel v-slot="{ activateCallback }" value="2">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+            </div>
+            <div class="flex pt-6 justify-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+            </div>
+        </StepPanel>
+        <StepPanel v-slot="{ activateCallback }" value="3">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+            </div>
+            <div class="pt-6">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+            </div>
+        </StepPanel>
+    </StepPanels>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Stepper value="1" class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Header I</Step>
+                <Step value="2">Header II</Step>
+                <Step value="3">Header III</Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" value="1">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                   <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="2">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="3">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="pt-6">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Stepper value="1" class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Header I</Step>
+                <Step value="2">Header II</Step>
+                <Step value="3">Header III</Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" value="1">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="2">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="3">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="pt-6">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/stepper/ImportDoc.vue b/apps/labs/doc/stepper/ImportDoc.vue
new file mode 100644
index 000000000..adbe2f056
--- /dev/null
+++ b/apps/labs/doc/stepper/ImportDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Stepper from 'primevue/stepper';
+import StepList from 'primevue/steplist';
+import StepPanels from 'primevue/steppanels';
+import StepItem from 'primevue/stepitem';
+import Step from 'primevue/step';
+import StepPanel from 'primevue/steppanel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/stepper/LinearDoc.vue b/apps/labs/doc/stepper/LinearDoc.vue
new file mode 100644
index 000000000..d3ef33431
--- /dev/null
+++ b/apps/labs/doc/stepper/LinearDoc.vue
@@ -0,0 +1,169 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>linear</i> property is present, current step must be completed in order to move to the next step.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Stepper value="1" linear class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Header I</Step>
+                <Step value="2">Header II</Step>
+                <Step value="3">Header III</Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" value="1">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="2">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="3">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="pt-6">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Stepper value="1" linear>
+    <StepList>
+        <Step value="1">Header I</Step>
+        <Step value="2">Header II</Step>
+        <Step value="3">Header III</Step>
+    </StepList>
+    <StepPanels>
+        <StepPanel v-slot="{ activateCallback }" value="1">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+            </div>
+            <div class="flex pt-6 justify-end">
+                <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
+            </div>
+        </StepPanel>
+        <StepPanel v-slot="{ activateCallback }" value="2">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+            </div>
+            <div class="flex pt-6 justify-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+            </div>
+        </StepPanel>
+        <StepPanel v-slot="{ activateCallback }" value="3">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+            </div>
+            <div class="pt-6">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+            </div>
+        </StepPanel>
+    </StepPanels>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Stepper value="1" linear class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Header I</Step>
+                <Step value="2">Header II</Step>
+                <Step value="3">Header III</Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" value="1">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="2">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="3">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="pt-6">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Stepper value="1" linear class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Header I</Step>
+                <Step value="2">Header II</Step>
+                <Step value="3">Header III</Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" value="1">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="2">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" value="3">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="pt-6">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/stepper/StepsOnlyDoc.vue b/apps/labs/doc/stepper/StepsOnlyDoc.vue
new file mode 100644
index 000000000..4357a0744
--- /dev/null
+++ b/apps/labs/doc/stepper/StepsOnlyDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use Stepper with a <i>StepList</i> only for custom requirements where a progress indicator is needed.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Stepper value="1" class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Design</Step>
+                <Step value="2">Development</Step>
+                <Step value="3">QA</Step>
+            </StepList>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Stepper value="1" class="basis-[50rem]">
+    <StepList>
+        <Step value="1">Design</Step>
+        <Step value="2">Development</Step>
+        <Step value="3">QA</Step>
+    </StepList>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Stepper value="1" class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Design</Step>
+                <Step value="2">Development</Step>
+                <Step value="3">QA</Step>
+            </StepList>
+        </Stepper>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Stepper value="1" class="basis-[50rem]">
+            <StepList>
+                <Step value="1">Design</Step>
+                <Step value="2">Development</Step>
+                <Step value="3">QA</Step>
+            </StepList>
+        </Stepper>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/stepper/TemplateDoc.vue b/apps/labs/doc/stepper/TemplateDoc.vue
new file mode 100644
index 000000000..8a2749b63
--- /dev/null
+++ b/apps/labs/doc/stepper/TemplateDoc.vue
@@ -0,0 +1,491 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Custom content for a step is defined with the default slot. The optional <i>as</i> property controls the default container element of a step, for example setting it to a <i>button</i> renders a button for the header instead of a div. The
+            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own step.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Stepper v-model:value="activeStep" class="basis-[40rem]">
+            <StepList>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
+                    <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-user" />
+                            </span>
+                        </button>
+                        <Divider />
+                    </div>
+                </Step>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
+                    <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-star" />
+                            </span>
+                        </button>
+                        <Divider />
+                    </div>
+                </Step>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
+                    <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-id-card" />
+                            </span>
+                        </button>
+                    </div>
+                </Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" :value="1">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
+                        <div class="field">
+                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
+                        </div>
+                        <div class="field">
+                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
+                        </div>
+                        <div class="field">
+                            <Password v-model="password" placeholder="Password" fluid />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" :value="2">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
+                        <div class="flex flex-wrap justify-center gap-4">
+                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
+                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
+                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
+                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
+                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
+                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
+                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
+                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" :value="3">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
+                        <div class="text-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-start">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            activeStep: 1,
+            name: null,
+            email: null,
+            password: null,
+            option1: false,
+            option2: false,
+            option3: false,
+            option4: false,
+            option5: false,
+            option6: false,
+            option7: false,
+            option8: false,
+            option9: false,
+            option10: false,
+            code: {
+                basic: `
+<Stepper v-model:value="activeStep" class="basis-[40rem]">
+    <StepList>
+        <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
+            <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
+                <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                    <span
+                        :class="[
+                            'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                            { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                        ]"
+                    >
+                        <i class="pi pi-user" />
+                    </span>
+                </button>
+                <Divider />
+            </div>
+        </Step>
+        <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
+            <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
+                <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                    <span
+                        :class="[
+                            'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                            { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                        ]"
+                    >
+                        <i class="pi pi-star" />
+                    </span>
+                </button>
+                <Divider />
+            </div>
+        </Step>
+        <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
+            <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
+                <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                    <span
+                        :class="[
+                            'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                            { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                        ]"
+                    >
+                        <i class="pi pi-id-card" />
+                    </span>
+                </button>
+            </div>
+        </Step>
+    </StepList>
+    <StepPanels>
+        <StepPanel v-slot="{ activateCallback }" :value="1">
+            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
+                <div class="field">
+                    <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
+                </div>
+                <div class="field">
+                    <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
+                </div>
+                <div class="field">
+                    <Password v-model="password" placeholder="Password" fluid />
+                </div>
+            </div>
+            <div class="flex pt-6 justify-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
+            </div>
+        </StepPanel>
+        <StepPanel v-slot="{ activateCallback }" :value="2">
+            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
+                    <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
+                    <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
+                    <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
+                    <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
+                    <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
+                    <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
+                    <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
+                    <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
+                    <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
+                </div>
+            </div>
+            <div class="flex pt-6 justify-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
+            </div>
+        </StepPanel>
+        <StepPanel v-slot="{ activateCallback }" :value="3">
+            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
+                <div class="text-center">
+                    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
+                </div>
+            </div>
+            <div class="flex pt-6 justify-start">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
+            </div>
+        </StepPanel>
+    </StepPanels>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Stepper v-model:value="activeStep" class="basis-[40rem]">
+            <StepList>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
+                    <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-user" />
+                            </span>
+                        </button>
+                        <Divider />
+                    </div>
+                </Step>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
+                    <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-star" />
+                            </span>
+                        </button>
+                        <Divider />
+                    </div>
+                </Step>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
+                    <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-id-card" />
+                            </span>
+                        </button>
+                    </div>
+                </Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" :value="1">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
+                        <div class="field">
+                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
+                        </div>
+                        <div class="field">
+                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
+                        </div>
+                        <div class="field">
+                            <Password v-model="password" placeholder="Password" fluid />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" :value="2">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
+                        <div class="flex flex-wrap justify-center gap-4">
+                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
+                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
+                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
+                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
+                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
+                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
+                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
+                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" :value="3">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
+                        <div class="text-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-start">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            activeStep: 1,
+            name: null,
+            email: null,
+            password: null,
+            option1: false,
+            option2: false,
+            option3: false,
+            option4: false,
+            option5: false,
+            option6: false,
+            option7: false,
+            option8: false,
+            option9: false,
+            option10: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Stepper v-model:value="activeStep" class="basis-[40rem]">
+            <StepList>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
+                    <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-user" />
+                            </span>
+                        </button>
+                        <Divider />
+                    </div>
+                </Step>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
+                    <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-star" />
+                            </span>
+                        </button>
+                        <Divider />
+                    </div>
+                </Step>
+                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
+                    <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
+                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
+                            <span
+                                :class="[
+                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
+                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
+                                ]"
+                            >
+                                <i class="pi pi-id-card" />
+                            </span>
+                        </button>
+                    </div>
+                </Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel v-slot="{ activateCallback }" :value="1">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
+                        <div class="field">
+                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
+                        </div>
+                        <div class="field">
+                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
+                        </div>
+                        <div class="field">
+                            <Password v-model="password" placeholder="Password" fluid />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" :value="2">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
+                        <div class="flex flex-wrap justify-center gap-4">
+                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
+                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
+                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
+                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
+                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
+                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
+                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
+                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
+                    </div>
+                </StepPanel>
+                <StepPanel v-slot="{ activateCallback }" :value="3">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
+                        <div class="text-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
+                        </div>
+                    </div>
+                    <div class="flex pt-6 justify-start">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const activeStep = ref(1);
+const completed = ref(false);
+const products = ref();
+const name = ref();
+const email = ref();
+const password = ref();
+const option1 = ref(false);
+const option2 = ref(false);
+const option3 = ref(false);
+const option4 = ref(false);
+const option5 = ref(false);
+const option6 = ref(false);
+const option7 = ref(false);
+const option8 = ref(false);
+const option9 = ref(false);
+const option10 = ref(false);
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/stepper/VerticalDoc.vue b/apps/labs/doc/stepper/VerticalDoc.vue
new file mode 100644
index 000000000..fff08e9ee
--- /dev/null
+++ b/apps/labs/doc/stepper/VerticalDoc.vue
@@ -0,0 +1,177 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Horizontal layout requires <i>StepItem</i> as a wrapper of <i>Step</i> and <i>StepPanel</i> components.</p>
+    </DocSectionText>
+    <div class="card">
+        <Stepper value="1">
+            <StepItem value="1">
+                <Step>Header I</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                    <div class="py-6">
+                        <Button label="Next" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+            <StepItem value="2">
+                <Step>Header II</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex py-6 gap-2">
+                        <Button label="Back" severity="secondary" @click="activateCallback('1')" />
+                        <Button label="Next" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+            <StepItem value="3">
+                <Step>Header III</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="py-6">
+                        <Button label="Back" severity="secondary" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Stepper value="1">
+    <StepItem value="1">
+        <Step>Header I</Step>
+        <StepPanel v-slot="{ activateCallback }">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+            </div>
+             <div class="py-6">
+                <Button label="Next" @click="activateCallback('2')" />
+            </div>
+        </StepPanel>
+    </StepItem>
+    <StepItem value="2">
+        <Step>Header II</Step>
+        <StepPanel v-slot="{ activateCallback }">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+            </div>
+            <div class="flex py-6 gap-2">
+                <Button label="Back" severity="secondary" @click="activateCallback('1')" />
+                <Button label="Next" @click="activateCallback('3')" />
+            </div>
+        </StepPanel>
+    </StepItem>
+    <StepItem value="3">
+        <Step>Header III</Step>
+        <StepPanel v-slot="{ activateCallback }">
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+            </div>
+             <div class="py-6">
+                <Button label="Back" severity="secondary" @click="activateCallback('2')" />
+            </div>
+        </StepPanel>
+    </StepItem>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Stepper value="1">
+            <StepItem value="1">
+                <Step>Header I</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                     <div class="py-6">
+                        <Button label="Next" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+            <StepItem value="2">
+                <Step>Header II</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex py-6 gap-2">
+                        <Button label="Back" severity="secondary" @click="activateCallback('1')" />
+                        <Button label="Next" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+            <StepItem value="3">
+                <Step>Header III</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                     <div class="py-6">
+                        <Button label="Back" severity="secondary" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+        </Stepper>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Stepper value="1">
+            <StepItem value="1">
+                <Step>Header I</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                    <div class="py-6">
+                        <Button label="Next" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+            <StepItem value="2">
+                <Step>Header II</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex py-6 gap-2">
+                        <Button label="Back" severity="secondary" @click="activateCallback('1')" />
+                        <Button label="Next" @click="activateCallback('3')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+            <StepItem value="3">
+                <Step>Header III</Step>
+                <StepPanel v-slot="{ activateCallback }">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="py-6">
+                        <Button label="Back" severity="secondary" @click="activateCallback('2')" />
+                    </div>
+                </StepPanel>
+            </StepItem>
+        </Stepper>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tabs/AccessibilityDoc.vue b/apps/labs/doc/tabs/AccessibilityDoc.vue
new file mode 100644
index 000000000..a6e8cee4b
--- /dev/null
+++ b/apps/labs/doc/tabs/AccessibilityDoc.vue
@@ -0,0 +1,74 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            The tabs container in TabList is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Tabs. Each Tab has a
+            <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding TabPanel. TabPanel has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of Tab and
+            <i>aria-labelledby</i> reference to Tab as the accessible name.
+        </p>
+
+        <h3>Tab Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Moves scroll position to first header.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Moves scroll position to last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/tabs/BasicDoc.vue b/apps/labs/doc/tabs/BasicDoc.vue
new file mode 100644
index 000000000..23e6e0eb8
--- /dev/null
+++ b/apps/labs/doc/tabs/BasicDoc.vue
@@ -0,0 +1,147 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Tabs is defined using <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>TabPanel</i> components. Tab and TabPanel components are associated with their <i>value</i> properties</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tabs value="0">
+    <TabList>
+        <Tab value="0">Header I</Tab>
+        <Tab value="1">Header II</Tab>
+        <Tab value="2">Header III</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </TabPanel>
+        <TabPanel value="1">
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </TabPanel>
+        <TabPanel value="2">
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+    `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tabs/ControlledDoc.vue b/apps/labs/doc/tabs/ControlledDoc.vue
new file mode 100644
index 000000000..496cd0832
--- /dev/null
+++ b/apps/labs/doc/tabs/ControlledDoc.vue
@@ -0,0 +1,182 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Tabs can be controlled programmatically using <i>value</i> property as a model.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
+        </div>
+
+        <Tabs v-model:value="value">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '0',
+            code: {
+                basic: `
+<div class="flex mb-2 gap-2 justify-end">
+    <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
+    <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
+    <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
+</div>
+
+<Tabs v-model:value="value">
+    <TabList>
+        <Tab value="0">Header I</Tab>
+        <Tab value="1">Header II</Tab>
+        <Tab value="2">Header III</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </TabPanel>
+        <TabPanel value="1">
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </TabPanel>
+        <TabPanel value="2">
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
+        </div>
+
+        <Tabs v-model:value="value">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '0'
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
+        </div>
+
+        <Tabs v-model:value="value">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('0');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tabs/DisabledDoc.vue b/apps/labs/doc/tabs/DisabledDoc.vue
new file mode 100644
index 000000000..4fa332251
--- /dev/null
+++ b/apps/labs/doc/tabs/DisabledDoc.vue
@@ -0,0 +1,151 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>disabled</i> property of a Tab prevents user interaction.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+                <Tab disabled>Header IV</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tabs value="0">
+    <TabList>
+        <Tab value="0">Header I</Tab>
+        <Tab value="1">Header II</Tab>
+        <Tab value="2">Header III</Tab>
+        <Tab disabled>Header IV</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </TabPanel>
+        <TabPanel value="1">
+            <p class="m-0">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+        </TabPanel>
+        <TabPanel value="2">
+            <p class="m-0">
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+                <Tab disabled>Header IV</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+                <Tab disabled>Header IV</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel value="1">
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel value="2">
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tabs/DynamicDoc.vue b/apps/labs/doc/tabs/DynamicDoc.vue
new file mode 100644
index 000000000..b8bd886f0
--- /dev/null
+++ b/apps/labs/doc/tabs/DynamicDoc.vue
@@ -0,0 +1,102 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive on Tab and TabPanel.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: [
+                { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
+                { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
+                { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
+            ],
+            code: {
+                basic: `
+<Tabs value="0">
+    <TabList>
+        <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
+            <p class="m-0">{{ tab.content }}</p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: [
+                { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
+                { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
+                { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const tabs = ref([
+    { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
+    { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
+    { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tabs/ImportDoc.vue b/apps/labs/doc/tabs/ImportDoc.vue
new file mode 100644
index 000000000..414f593b4
--- /dev/null
+++ b/apps/labs/doc/tabs/ImportDoc.vue
@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tabs/ScrollableDoc.vue b/apps/labs/doc/tabs/ScrollableDoc.vue
new file mode 100644
index 000000000..56697026c
--- /dev/null
+++ b/apps/labs/doc/tabs/ScrollableDoc.vue
@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Adding <i>scrollable</i> property displays navigational buttons at each side to scroll between tabs.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0" scrollable>
+            <TabList>
+                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
+                    {{ tab.title }}
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content`, value: `${i}` })),
+            code: {
+                basic: `
+<Tabs value="0" scrollable>
+    <TabList>
+        <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
+            {{ tab.title }}
+        </Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
+            <p class="m-0">{{ tab.content }}</p>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0" scrollable>
+            <TabList>
+                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
+                    {{ tab.title }}
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\`, value: \`\${i}\` }))
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0" scrollable>
+            <TabList>
+                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
+                    {{ tab.title }}
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
+                    <p class="m-0">{{ tab.content }}</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\`, value: \`\${i}\` })));
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tabs/TabMenuDoc.vue b/apps/labs/doc/tabs/TabMenuDoc.vue
new file mode 100644
index 000000000..306ead932
--- /dev/null
+++ b/apps/labs/doc/tabs/TabMenuDoc.vue
@@ -0,0 +1,112 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like
+            <a href="https://router.vuejs.org/guide/essentials/nested-routes#Nested-Named-Routes" target="_blank" rel="noopener noreferrer">router-view</a>. For the purpose of this demo, <i>router-view</i> is not included.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="/dashboard">
+            <TabList>
+                <Tab v-for="tab in items" :key="tab.label" :value="tab.route" as="div" class="flex items-center gap-2">
+                    <i :class="tab.icon" />
+                    <span>{{ tab.label }}</span>
+                </Tab>
+            </TabList>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
+                { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
+                { route: '/products', label: 'Products', icon: 'pi pi-list' },
+                { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
+            ],
+            code: {
+                basic: `
+<Tabs value="/dashboard">
+    <TabList>
+        <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+            <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+                <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                    <i :class="tab.icon" />
+                    <span>{{ tab.label }}</span>
+                </a>
+            </router-link>
+        </Tab>
+    </TabList>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="/dashboard">
+            <TabList>
+                <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+                    <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+                        <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                            <i :class="tab.icon" />
+                            <span>{{ tab.label }}</span>
+                        </a>
+                    </router-link>
+                </Tab>
+            </TabList>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
+                { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
+                { route: '/products', label: 'Products', icon: 'pi pi-list' },
+                { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="/dashboard">
+            <TabList>
+                <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+                    <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+                        <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                            <i :class="tab.icon" />
+                            <span>{{ tab.label }}</span>
+                        </a>
+                    </router-link>
+                </Tab>
+            </TabList>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
+    { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
+    { route: '/products', label: 'Products', icon: 'pi pi-list' },
+    { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tabs/TemplateDoc.vue b/apps/labs/doc/tabs/TemplateDoc.vue
new file mode 100644
index 000000000..346ae952f
--- /dev/null
+++ b/apps/labs/doc/tabs/TemplateDoc.vue
@@ -0,0 +1,190 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Custom content for a tab is defined with the default slot. The optional <i>as</i> property controls the default container element of a tab, for example setting it to a <i>div</i> renders a div for the header instead of a button. The
+            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own tab header.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0" as="div" class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                </Tab>
+                <Tab value="1" as="div" class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                </Tab>
+                <Tab v-slot="slotProps" value="2" asChild>
+                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" />
+                    </div>
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0" as="p" class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </TabPanel>
+                <TabPanel value="1" as="p" class="m-0">
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </TabPanel>
+                <TabPanel v-slot="slotProps" value="2" asChild>
+                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
+                        <p class="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </div>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tabs value="0">
+    <TabList>
+        <Tab value="0" as="div" class="flex items-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+        </Tab>
+        <Tab value="1" as="div" class="flex items-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+        </Tab>
+        <Tab v-slot="slotProps" value="2" asChild>
+            <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                <Badge value="2" />
+            </div>
+        </Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0" as="p" class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </TabPanel>
+        <TabPanel value="1" as="p" class="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </TabPanel>
+        <TabPanel v-slot="slotProps" value="2" asChild>
+            <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
+                <p class="m-0">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </div>
+        </TabPanel>
+    </TabPanels>
+</Tabs>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0" as="div" class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                </Tab>
+                <Tab value="1" as="div" class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                </Tab>
+                <Tab v-slot="slotProps" value="2" asChild>
+                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" />
+                    </div>
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0" as="p" class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </TabPanel>
+                <TabPanel value="1" as="p" class="m-0">
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </TabPanel>
+                <TabPanel v-slot="slotProps" value="2" asChild>
+                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
+                        <p class="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </div>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0" as="div" class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                </Tab>
+                <Tab value="1" as="div" class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                </Tab>
+                <Tab v-slot="slotProps" value="2" asChild>
+                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" />
+                    </div>
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0" as="p" class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </TabPanel>
+                <TabPanel value="1" as="p" class="m-0">
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </TabPanel>
+                <TabPanel v-slot="slotProps" value="2" asChild>
+                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
+                        <p class="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </div>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tag/AccessibilityDoc.vue b/apps/labs/doc/tag/AccessibilityDoc.vue
new file mode 100644
index 000000000..d04f9df90
--- /dev/null
+++ b/apps/labs/doc/tag/AccessibilityDoc.vue
@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic,
+            <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/tag/BasicDoc.vue b/apps/labs/doc/tag/BasicDoc.vue
new file mode 100644
index 000000000..81305d50b
--- /dev/null
+++ b/apps/labs/doc/tag/BasicDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Label of the tag is defined with the <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Tag value="New"></Tag>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tag value="New"></Tag>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Tag value="New"></Tag>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Tag value="New"></Tag>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tag/IconDoc.vue b/apps/labs/doc/tag/IconDoc.vue
new file mode 100644
index 000000000..4a7fa14f3
--- /dev/null
+++ b/apps/labs/doc/tag/IconDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A font icon next to the value can be displayed with the <i>icon</i> property.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Tag icon="pi pi-user" value="Primary"></Tag>
+        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
+        <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
+        <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+        <Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
+        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tag icon="pi pi-user" value="Primary"></Tag>
+<Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
+<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
+<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+<Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
+<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+<Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Tag icon="pi pi-user" value="Primary"></Tag>
+        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
+        <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
+        <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+        <Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
+        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Tag icon="pi pi-user" value="Primary"></Tag>
+        <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
+        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
+        <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+        <Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
+        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tag/ImportDoc.vue b/apps/labs/doc/tag/ImportDoc.vue
new file mode 100644
index 000000000..0c02a8505
--- /dev/null
+++ b/apps/labs/doc/tag/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Tag from 'primevue/tag';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tag/PillDoc.vue b/apps/labs/doc/tag/PillDoc.vue
new file mode 100644
index 000000000..ea8e67f49
--- /dev/null
+++ b/apps/labs/doc/tag/PillDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>rounded</i>, displays a tag as a pill.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Tag value="Primary" rounded></Tag>
+        <Tag severity="secondary" value="Secondary" rounded></Tag>
+        <Tag severity="success" value="Success" rounded></Tag>
+        <Tag severity="info" value="Info" rounded></Tag>
+        <Tag severity="warn" value="Warn" rounded></Tag>
+        <Tag severity="danger" value="Danger" rounded></Tag>
+        <Tag severity="contrast" value="Contrast" rounded></Tag>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tag value="Primary" rounded></Tag>
+<Tag severity="secondary" value="Secondary" rounded></Tag>
+<Tag severity="success" value="Success" rounded></Tag>
+<Tag severity="info" value="Info" rounded></Tag>
+<Tag severity="warn" value="Warn" rounded></Tag>
+<Tag severity="danger" value="Danger" rounded></Tag>
+<Tag severity="contrast" value="Contrast" rounded></Tag>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Tag value="Primary" rounded></Tag>
+        <Tag severity="secondary" value="Secondary" rounded></Tag>
+        <Tag severity="success" value="Success" rounded></Tag>
+        <Tag severity="info" value="Info" rounded></Tag>
+        <Tag severity="warn" value="Warn" rounded></Tag>
+        <Tag severity="danger" value="Danger" rounded></Tag>
+        <Tag severity="contrast" value="Contrast" rounded></Tag>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Tag value="Primary" rounded></Tag>
+        <Tag severity="success" value="Success" rounded></Tag>
+        <Tag severity="secondary" value="Secondary" rounded></Tag>
+        <Tag severity="info" value="Info" rounded></Tag>
+        <Tag severity="warn" value="Warn" rounded></Tag>
+        <Tag severity="danger" value="Danger" rounded></Tag>
+        <Tag severity="contrast" value="Contrast" rounded></Tag>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tag/SeverityDoc.vue b/apps/labs/doc/tag/SeverityDoc.vue
new file mode 100644
index 000000000..8650d4cdf
--- /dev/null
+++ b/apps/labs/doc/tag/SeverityDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Severity defines the variant of a tag.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Tag value="Primary"></Tag>
+        <Tag severity="secondary" value="Secondary"></Tag>
+        <Tag severity="success" value="Success"></Tag>
+        <Tag severity="info" value="Info"></Tag>
+        <Tag severity="warn" value="Warn"></Tag>
+        <Tag severity="danger" value="Danger"></Tag>
+        <Tag severity="contrast" value="Contrast"></Tag>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tag value="Primary"></Tag>
+<Tag severity="secondary" value="Secondary"></Tag>
+<Tag severity="success" value="Success"></Tag>
+<Tag severity="info" value="Info"></Tag>
+<Tag severity="warn" value="Warn"></Tag>
+<Tag severity="danger" value="Danger"></Tag>
+<Tag severity="contrast" value="Contrast"></Tag>
+`,
+                options: `
+<template>
+    <div class="flex flex-wrap justify-center gap-2">
+        <Tag value="Primary"></Tag>
+        <Tag severity="secondary" value="Secondary"></Tag>
+        <Tag severity="success" value="Success"></Tag>
+        <Tag severity="info" value="Info"></Tag>
+        <Tag severity="warn" value="Warn"></Tag>
+        <Tag severity="danger" value="Danger"></Tag>
+        <Tag severity="contrast" value="Contrast"></Tag>
+    </div>
+</template>
+
+<script>
+
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="flex flex-wrap justify-center gap-2">
+        <Tag value="Primary"></Tag>
+        <Tag severity="secondary" value="Secondary"></Tag>
+        <Tag severity="success" value="Success"></Tag>
+        <Tag severity="info" value="Info"></Tag>
+        <Tag severity="warn" value="Warn"></Tag>
+        <Tag severity="danger" value="Danger"></Tag>
+        <Tag severity="contrast" value="Contrast"></Tag>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tag/TemplateDoc.vue b/apps/labs/doc/tag/TemplateDoc.vue
new file mode 100644
index 000000000..ebaf00656
--- /dev/null
+++ b/apps/labs/doc/tag/TemplateDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Children of the component are passed as the content for templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
+            <div class="flex items-center gap-2 px-1">
+                <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
+                <span class="text-base">Italy</span>
+            </div>
+        </Tag>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
+    <div class="flex items-center gap-2 px-1">
+        <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
+        <span class="text-base">Italy</span>
+    </div>
+</Tag>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
+            <div class="flex items-center gap-2 px-1">
+                <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
+                <span class="text-base">Italy</span>
+            </div>
+        </Tag>
+    </div>    
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
+            <div class="flex items-center gap-2 px-1">
+                <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
+                <span class="text-base">Italy</span>
+            </div>
+        </Tag>
+    </div>    
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/terminal/AccessibilityDoc.vue b/apps/labs/doc/terminal/AccessibilityDoc.vue
new file mode 100644
index 000000000..861b87cdd
--- /dev/null
+++ b/apps/labs/doc/terminal/AccessibilityDoc.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Terminal component has an input element that can be described with <i>aria-label</i> or <i>aria-labelledby</i> props. The element that lists the previous commands has <i>aria-live</i> so that changes are received by the screen reader.</p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the input element.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Executes the command when focus in on the input element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/terminal/BasicDoc.vue b/apps/labs/doc/terminal/BasicDoc.vue
new file mode 100644
index 000000000..da4f5ad66
--- /dev/null
+++ b/apps/labs/doc/terminal/BasicDoc.vue
@@ -0,0 +1,166 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Commands are processed using an EventBus implementation called <i>TerminalService</i>. Import this service into your component and subscribe to the <i>command</i> event to process the commands by sending replies with the
+            <i>response</i> event.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
+        <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" aria-label="PrimeVue Terminal Service" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import TerminalService from 'primevue/terminalservice';
+
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Terminal
+    welcomeMessage="Welcome to PrimeVue"
+    prompt="primevue $"
+    aria-label="PrimeVue Terminal Service"
+/>
+`,
+                options: `
+<template>
+    <div>
+        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+        <Terminal
+            welcomeMessage="Welcome to PrimeVue"
+            prompt="primevue $"
+            aria-label="PrimeVue Terminal Service"
+        />
+    </div>
+</template>
+
+<script>
+import TerminalService from "primevue/terminalservice";
+
+export default {
+    methods: {
+        commandHandler(text) {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch(command) {
+                case "date":
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case "greet":
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case "random":
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = "Unknown command: " + command;
+            }
+            
+            TerminalService.emit('response', response);
+        }
+    },
+    mounted() {
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div>
+        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+        <Terminal
+            welcomeMessage="Welcome to PrimeVue"
+            prompt="primevue $"
+            aria-label="PrimeVue Terminal Service"
+        />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import TerminalService from "primevue/terminalservice";
+
+onMounted(() => {
+    TerminalService.on('command', commandHandler);
+})
+
+onBeforeUnmount(() => {
+    TerminalService.off('command', commandHandler);
+})
+
+const commandHandler = (text) => {
+    let response;
+    let argsIndex = text.indexOf(' ');
+    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+    switch(command) {
+        case "date":
+            response = 'Today is ' + new Date().toDateString();
+            break;
+
+        case "greet":
+            response = 'Hola ' + text.substring(argsIndex + 1);
+            break;
+
+        case "random":
+            response = Math.floor(Math.random() * 100);
+            break;
+
+        default:
+            response = "Unknown command: " + command;
+    }
+    
+    TerminalService.emit('response', response);
+}
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    },
+    methods: {
+        commandHandler(text) {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch (command) {
+                case 'date':
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case 'greet':
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case 'random':
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = 'Unknown command: ' + command;
+            }
+
+            TerminalService.emit('response', response);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/terminal/ImportDoc.vue b/apps/labs/doc/terminal/ImportDoc.vue
new file mode 100644
index 000000000..ab88b96a2
--- /dev/null
+++ b/apps/labs/doc/terminal/ImportDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Terminal from 'primevue/terminal';
+import TerminalService from 'primevue/terminalservice'
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/AccessibilityDoc.vue b/apps/labs/doc/textarea/AccessibilityDoc.vue
new file mode 100644
index 000000000..6554e58cd
--- /dev/null
+++ b/apps/labs/doc/textarea/AccessibilityDoc.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
+            <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="address1">Address 1</label>
+<Textarea id="address1" />
+
+<span id="address2">Address 2</span>
+<Textarea aria-labelledby="address2" />
+
+<Textarea aria-label="Address Details"/>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/AutoResizeDoc.vue b/apps/labs/doc/textarea/AutoResizeDoc.vue
new file mode 100644
index 000000000..1ed5dcaed
--- /dev/null
+++ b/apps/labs/doc/textarea/AutoResizeDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<Textarea v-model="value" autoResize rows="5" cols="30" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/BasicDoc.vue b/apps/labs/doc/textarea/BasicDoc.vue
new file mode 100644
index 000000000..59c915acc
--- /dev/null
+++ b/apps/labs/doc/textarea/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<Textarea v-model="value" rows="5" cols="30" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/DisabledDoc.vue b/apps/labs/doc/textarea/DisabledDoc.vue
new file mode 100644
index 000000000..fc9c83222
--- /dev/null
+++ b/apps/labs/doc/textarea/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" disabled style="resize: none" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'Disabled',
+            code: {
+                basic: `
+<Textarea v-model="value" rows="5" cols="30" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'Disabled'
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('Disabled');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/FilledDoc.vue b/apps/labs/doc/textarea/FilledDoc.vue
new file mode 100644
index 000000000..160760b69
--- /dev/null
+++ b/apps/labs/doc/textarea/FilledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" variant="filled" rows="5" cols="30" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<Textarea v-model="value" variant="filled" rows="5" cols="30" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" variant="filled" rows="5" cols="30" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" variant="filled" rows="5" cols="30" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/FloatLabelDoc.vue b/apps/labs/doc/textarea/FloatLabelDoc.vue
new file mode 100644
index 000000000..3ce419f58
--- /dev/null
+++ b/apps/labs/doc/textarea/FloatLabelDoc.vue
@@ -0,0 +1,112 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-stretch gap-4">
+        <FloatLabel>
+            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" class="h-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" class="h-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" class="h-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            code: {
+                basic: `
+<FloatLabel>
+    <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: ''
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/FormsDoc.vue b/apps/labs/doc/textarea/FormsDoc.vue
new file mode 100644
index 000000000..a180e651d
--- /dev/null
+++ b/apps/labs/doc/textarea/FormsDoc.vue
@@ -0,0 +1,130 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Textarea integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <Textarea name="address" rows="5" cols="30" style="resize: none" />
+                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                address: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    address: z.string().min(1, { message: 'Address is required.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-1">
+        <Textarea name="address" rows="5" cols="30" style="resize: none" />
+        <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <Textarea name="address" rows="5" cols="30" style="resize: none" />
+                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                address: ''
+            },
+            resolver: zodResolver(
+                z.object({
+                    address: z.string().min(1, { message: 'Address is required.' })
+                })
+            ),
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <Textarea name="address" rows="5" cols="30" style="resize: none" />
+                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    address: ''
+});
+const resolver = ref(zodResolver(
+    z.object({
+        address: z.string().min(1, { message: 'Address is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/IftaLabelDoc.vue b/apps/labs/doc/textarea/IftaLabelDoc.vue
new file mode 100644
index 000000000..d53e47b34
--- /dev/null
+++ b/apps/labs/doc/textarea/IftaLabelDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
+            <label for="description">Description</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
+    <label for="description">Description</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
+            <label for="description">Description</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
+            <label for="description">Description</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/ImportDoc.vue b/apps/labs/doc/textarea/ImportDoc.vue
new file mode 100644
index 000000000..4759484fb
--- /dev/null
+++ b/apps/labs/doc/textarea/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Textarea from 'primevue/textarea';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/InvalidDoc.vue b/apps/labs/doc/textarea/InvalidDoc.vue
new file mode 100644
index 000000000..29a0ae6a4
--- /dev/null
+++ b/apps/labs/doc/textarea/InvalidDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/SizesDoc.vue b/apps/labs/doc/textarea/SizesDoc.vue
new file mode 100644
index 000000000..12a2a820d
--- /dev/null
+++ b/apps/labs/doc/textarea/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Textarea provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+<Textarea v-model="value2" placeholder="Normal" rows="3" />
+<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tieredmenu/AccessibilityDoc.vue b/apps/labs/doc/tieredmenu/AccessibilityDoc.vue
new file mode 100644
index 000000000..168e804fe
--- /dev/null
+++ b/apps/labs/doc/tieredmenu/AccessibilityDoc.vue
@@ -0,0 +1,94 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            TieredMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
+            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a TieredMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the
+            id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i> and <i>aria-expanded</i> to define the relation between the item and the submenu.
+        </p>
+
+        <p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Closes the popup, then moves focus to the target element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>If option is closed, opens the option otherwise moves focus to the first child option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>If option is open, closes the option otherwise moves focus to the parent option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/tieredmenu/BasicDoc.vue b/apps/labs/doc/tieredmenu/BasicDoc.vue
new file mode 100644
index 000000000..7673bb460
--- /dev/null
+++ b/apps/labs/doc/tieredmenu/BasicDoc.vue
@@ -0,0 +1,258 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TieredMenu requires a collection of menuitems as its <i>model</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<TieredMenu :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                items: [
+                    {
+                        label: 'Document',
+                        icon: 'pi pi-file'
+                    },
+                    {
+                        label: 'Image',
+                        icon: 'pi pi-image'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Open',
+                icon: 'pi pi-folder-open'
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-file-edit',
+        items: [
+            {
+                label: 'Copy',
+                icon: 'pi pi-copy'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times'
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Slack',
+                icon: 'pi pi-slack'
+            },
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tieredmenu/CommandDoc.vue b/apps/labs/doc/tieredmenu/CommandDoc.vue
new file mode 100644
index 000000000..4d6a755a0
--- /dev/null
+++ b/apps/labs/doc/tieredmenu/CommandDoc.vue
@@ -0,0 +1,213 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Import',
+                            icon: 'pi pi-cloud-download',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-cloud-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                            }
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<TieredMenu :model="items" />
+<Toast />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Import',
+                            icon: 'pi pi-cloud-download',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-cloud-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                            }
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                command: () => {
+                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                }
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print',
+                command: () => {
+                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search',
+        command: () => {
+            toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Sync',
+        icon: 'pi pi-cloud',
+        items: [
+            {
+                label: 'Import',
+                icon: 'pi pi-cloud-download',
+                command: () => {
+                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                }
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-cloud-upload',
+                command: () => {
+                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                }
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tieredmenu/ImportDoc.vue b/apps/labs/doc/tieredmenu/ImportDoc.vue
new file mode 100644
index 000000000..44f0298aa
--- /dev/null
+++ b/apps/labs/doc/tieredmenu/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import TieredMenu from 'primevue/tieredmenu';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tieredmenu/PopupDoc.vue b/apps/labs/doc/tieredmenu/PopupDoc.vue
new file mode 100644
index 000000000..855059c43
--- /dev/null
+++ b/apps/labs/doc/tieredmenu/PopupDoc.vue
@@ -0,0 +1,277 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Overlay mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> function of the menu ref with an event of the target.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
+        <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
+<TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
+        <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
+        <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const menu = ref();
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                items: [
+                    {
+                        label: 'Document',
+                        icon: 'pi pi-file'
+                    },
+                    {
+                        label: 'Image',
+                        icon: 'pi pi-image'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Open',
+                icon: 'pi pi-folder-open'
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-file-edit',
+        items: [
+            {
+                label: 'Copy',
+                icon: 'pi pi-copy'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times'
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Slack',
+                icon: 'pi pi-slack'
+            },
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp'
+            }
+        ]
+    }
+]);
+
+const toggle = (event) => {
+    menu.value.toggle(event);
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/tieredmenu/RouterDoc.vue b/apps/labs/doc/tieredmenu/RouterDoc.vue
new file mode 100644
index 000000000..0c94e529f
--- /dev/null
+++ b/apps/labs/doc/tieredmenu/RouterDoc.vue
@@ -0,0 +1,221 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+    <DocSectionCode :code="code" hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Styled',
+                            route: '/slider'
+                        },
+                        {
+                            label: 'Unstyled',
+                            route: '/slider'
+                        }
+                    ]
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<TieredMenu :model="items">
+    <template #item="{ item, props, hasSubmenu }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                <span :class="item.icon" />
+                <span class="ml-2">{{ item.label }}</span>
+            </a>
+        </router-link>
+        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+            <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
+        </a>
+    </template>
+</TieredMenu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Styled',
+                            route: '/slider'
+                        },
+                        {
+                            label: 'Unstyled',
+                            route: '/slider'
+                        }
+                    ]
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/slider');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Router',
+        icon: 'pi pi-palette',
+        items: [
+            {
+                label: 'Styled',
+                route: '/slider'
+            },
+            {
+                label: 'Unstyled',
+                route: '/slider'
+            }
+        ]
+    },
+    {
+        label: 'Programmatic',
+        icon: 'pi pi-link',
+        command: () => {
+            router.push('/slider');
+        }
+    },
+    {
+        label: 'External',
+        icon: 'pi pi-home',
+        items: [
+            {
+                label: 'Vue.js',
+                url: 'https://vuejs.org/'
+            },
+            {
+                label: 'Vite.js',
+                url: 'https://vuejs.org/'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tieredmenu/TemplateDoc.vue b/apps/labs/doc/tieredmenu/TemplateDoc.vue
new file mode 100644
index 000000000..b9c19299e
--- /dev/null
+++ b/apps/labs/doc/tieredmenu/TemplateDoc.vue
@@ -0,0 +1,328 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TieredMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file',
+                                    shortcut: '⌘+N'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image',
+                                    shortcut: '⌘+I'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video',
+                                    shortcut: '⌘+L'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            shortcut: '⌘+P'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy',
+                            shortcut: '⌘+C'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            shortcut: '⌘+D'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    shortcut: '⌘+S'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack',
+                            badge: 2
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp',
+                            badge: 3
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<TieredMenu :model="items">
+    <template #item="{ item, props, hasSubmenu }">
+        <a v-ripple class="flex items-center" v-bind="props.action">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+            <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
+        </a>
+    </template>
+</TieredMenu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file',
+                                    shortcut: '⌘+N'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image',
+                                    shortcut: '⌘+I'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video',
+                                    shortcut: '⌘+L'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            shortcut: '⌘+P'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy',
+                            shortcut: '⌘+C'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            shortcut: '⌘+D'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    shortcut: '⌘+S'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack',
+                            badge: 2
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp',
+                            badge: 3
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <a v-ripple class="flex items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                items: [
+                    {
+                        label: 'Document',
+                        icon: 'pi pi-file',
+                        shortcut: '⌘+N'
+                    },
+                    {
+                        label: 'Image',
+                        icon: 'pi pi-image',
+                        shortcut: '⌘+I'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-video',
+                        shortcut: '⌘+L'
+                    }
+                ]
+            },
+            {
+                label: 'Open',
+                icon: 'pi pi-folder-open',
+                shortcut: '⌘+O'
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print',
+                shortcut: '⌘+P'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-file-edit',
+        items: [
+            {
+                label: 'Copy',
+                icon: 'pi pi-copy',
+                shortcut: '⌘+C'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times',
+                shortcut: '⌘+D'
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search',
+        shortcut: '⌘+S'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Slack',
+                icon: 'pi pi-slack',
+                badge: 2
+            },
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp',
+                badge: 3
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/timeline/AccessibilityDoc.vue b/apps/labs/doc/timeline/AccessibilityDoc.vue
new file mode 100644
index 000000000..00bdb5414
--- /dev/null
+++ b/apps/labs/doc/timeline/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/timeline/AlignmentDoc.vue b/apps/labs/doc/timeline/AlignmentDoc.vue
new file mode 100644
index 000000000..c27ba3d73
--- /dev/null
+++ b/apps/labs/doc/timeline/AlignmentDoc.vue
@@ -0,0 +1,134 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Content location relative the line is defined with the <i>align</i> property.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-12">
+        <Timeline :value="events" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="right" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ],
+            code: {
+                basic: `
+<Timeline :value="events" class="w-full md:w-80">
+    <template #content="slotProps">
+        {{ slotProps.item.status }}
+    </template>
+</Timeline>
+
+<Timeline :value="events" align="right" class="w-full md:w-80">
+    <template #content="slotProps">
+        {{ slotProps.item.status }}
+    </template>
+</Timeline>
+
+<Timeline :value="events" align="alternate" class="w-full md:w-80">
+    <template #content="slotProps">
+        {{ slotProps.item.status }}
+    </template>
+</Timeline>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-12">
+        <Timeline :value="events" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="right" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-12">
+        <Timeline :value="events" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="right" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/timeline/BasicDoc.vue b/apps/labs/doc/timeline/BasicDoc.vue
new file mode 100644
index 000000000..5b470d764
--- /dev/null
+++ b/apps/labs/doc/timeline/BasicDoc.vue
@@ -0,0 +1,86 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Timeline requires a <i>value</i> for the collection of events and <i>content</i> slot that receives an object as a parameter to return content.</p>
+    </DocSectionText>
+    <div class="card">
+        <Timeline :value="events">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ],
+            code: {
+                basic: `
+<Timeline :value="events">
+    <template #content="slotProps">
+        {{ slotProps.item.status }}
+    </template>
+</Timeline>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Timeline :value="events">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Timeline :value="events">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/timeline/HorizontalDoc.vue b/apps/labs/doc/timeline/HorizontalDoc.vue
new file mode 100644
index 000000000..530ec6419
--- /dev/null
+++ b/apps/labs/doc/timeline/HorizontalDoc.vue
@@ -0,0 +1,122 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TimeLine orientation is controlled with the <i>layout</i> property, default is <i>vertical</i> having <i>horizontal</i> as the alternative.</p>
+    </DocSectionText>
+    <div class="card flex flex-col gap-4">
+        <Timeline :value="events" layout="horizontal" align="top">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="bottom">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="alternate">
+            <template #opposite> &nbsp; </template>
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: ['2020', '2021', '2022', '2023'],
+            code: {
+                basic: `
+<Timeline :value="events" layout="horizontal" align="top">
+    <template #content="slotProps">
+        {{ slotProps.item }}
+    </template>
+</Timeline>
+
+<Timeline :value="events" layout="horizontal" align="bottom">
+    <template #content="slotProps">
+        {{ slotProps.item }}
+    </template>
+</Timeline>
+
+<Timeline :value="events" layout="horizontal" align="alternate">
+    <template #opposite> &nbsp; </template>
+    <template #content="slotProps">
+        {{ slotProps.item }}
+    </template>
+</Timeline>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col gap-4">
+        <Timeline :value="events" layout="horizontal" align="top">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="bottom">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="alternate">
+            <template #opposite> &nbsp; </template>
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: ['2020', '2021', '2022', '2023']
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col gap-4">
+        <Timeline :value="events" layout="horizontal" align="top">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="bottom">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="alternate">
+            <template #opposite> &nbsp; </template>
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const events = ref(['2020', '2021', '2022', '2023']);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/timeline/ImportDoc.vue b/apps/labs/doc/timeline/ImportDoc.vue
new file mode 100644
index 000000000..0bc532b09
--- /dev/null
+++ b/apps/labs/doc/timeline/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Timeline from 'primevue/timeline';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/timeline/OppositeDoc.vue b/apps/labs/doc/timeline/OppositeDoc.vue
new file mode 100644
index 000000000..b3af07467
--- /dev/null
+++ b/apps/labs/doc/timeline/OppositeDoc.vue
@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Additional content at the other side of the line can be provided with the <i>opposite</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <Timeline :value="events">
+            <template #opposite="slotProps">
+                <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
+            </template>
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ],
+            code: {
+                basic: `
+<Timeline :value="events">
+    <template #opposite="slotProps">
+        <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
+    </template>
+    <template #content="slotProps">
+        {{slotProps.item.status}}
+    </template>
+</Timeline>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Timeline :value="events">
+            <template #opposite="slotProps">
+                <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
+            </template>
+            <template #content="slotProps">
+                {{slotProps.item.status}}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Timeline :value="events">
+            <template #opposite="slotProps">
+                <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
+            </template>
+            <template #content="slotProps">
+                {{slotProps.item.status}}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/timeline/TemplateDoc.vue b/apps/labs/doc/timeline/TemplateDoc.vue
new file mode 100644
index 000000000..fdbcaf4b6
--- /dev/null
+++ b/apps/labs/doc/timeline/TemplateDoc.vue
@@ -0,0 +1,220 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sample implementation with custom content and styled markers.</p>
+    </DocSectionText>
+    <div class="card">
+        <Timeline :value="events" align="alternate" class="customized-timeline">
+            <template #marker="slotProps">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                    <i :class="slotProps.item.icon"></i>
+                </span>
+            </template>
+            <template #content="slotProps">
+                <Card class="mt-4">
+                    <template #title>
+                        {{ slotProps.item.status }}
+                    </template>
+                    <template #subtitle>
+                        {{ slotProps.item.date }}
+                    </template>
+                    <template #content>
+                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                            neque quas!
+                        </p>
+                        <Button label="Read more" text></Button>
+                    </template>
+                </Card>
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ],
+            code: {
+                basic: `
+<Timeline :value="events" align="alternate" class="customized-timeline">
+    <template #marker="slotProps">
+        <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+            <i :class="slotProps.item.icon"></i>
+        </span>
+    </template>
+    <template #content="slotProps">
+        <Card class="mt-4">
+            <template #title>
+                {{ slotProps.item.status }}
+            </template>
+            <template #subtitle>
+                {{ slotProps.item.date }}
+            </template>
+            <template #content>
+                <img v-if="slotProps.item.image" :src="\`/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                    neque quas!
+                </p>
+                <Button label="Read more" text></Button>
+            </template>
+        </Card>
+    </template>
+</Timeline>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Timeline :value="events" align="alternate" class="customized-timeline">
+            <template #marker="slotProps">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                    <i :class="slotProps.item.icon"></i>
+                </span>
+            </template>
+            <template #content="slotProps">
+                <Card class="mt-4">
+                    <template #title>
+                        {{ slotProps.item.status }}
+                    </template>
+                    <template #subtitle>
+                        {{ slotProps.item.date }}
+                    </template>
+                    <template #content>
+                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                            neque quas!
+                        </p>
+                        <Button label="Read more" text></Button>
+                    </template>
+                </Card>
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ]
+        };
+    }
+};
+<\/script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.customized-timeline) {
+        .p-timeline-event:nth-child(even) {
+            flex-direction: row;
+
+            .p-timeline-event-content {
+                text-align: left;
+            }
+        }
+
+        .p-timeline-event-opposite {
+            flex: 0;
+        }
+    }
+}
+</style>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Timeline :value="events" align="alternate" class="customized-timeline">
+            <template #marker="slotProps">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                    <i :class="slotProps.item.icon"></i>
+                </span>
+            </template>
+            <template #content="slotProps">
+                <Card class="mt-4">
+                    <template #title>
+                        {{ slotProps.item.status }}
+                    </template>
+                    <template #subtitle>
+                        {{ slotProps.item.date }}
+                    </template>
+                    <template #content>
+                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                            neque quas!
+                        </p>
+                        <Button label="Read more" text></Button>
+                    </template>
+                </Card>
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+<\/script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.customized-timeline) {
+        .p-timeline-event:nth-child(even) {
+            flex-direction: row;
+
+            .p-timeline-event-content {
+                text-align: left;
+            }
+        }
+
+        .p-timeline-event-opposite {
+            flex: 0;
+        }
+    }
+}
+</style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.customized-timeline) {
+        .p-timeline-event:nth-child(even) {
+            flex-direction: row !important;
+
+            .p-timeline-event-content {
+                text-align: left !important;
+            }
+        }
+
+        .p-timeline-event-opposite {
+            flex: 0;
+        }
+    }
+}
+</style>
diff --git a/apps/labs/doc/toast/AccessibilityDoc.vue b/apps/labs/doc/toast/AccessibilityDoc.vue
new file mode 100644
index 000000000..83732b240
--- /dev/null
+++ b/apps/labs/doc/toast/AccessibilityDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Toast component use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true".</p>
+
+        <p>
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, you
+            may use <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
+        </p>
+
+        <h3>Close Button Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the message.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+<ConfirmDialog id="confirm" />
+
+<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
+
+`
+            },
+            code2: {
+                basic: `
+<script setup>
+const confirm = useConfirm();
+const isVisible = ref(false);
+
+const openDialog = () => {
+    confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        onShow: () => {
+            isVisible.value = true;
+        },
+        onHide: () => {
+            isVisible.value = false;
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/BasicDoc.vue b/apps/labs/doc/toast/BasicDoc.vue
new file mode 100644
index 000000000..c9176531e
--- /dev/null
+++ b/apps/labs/doc/toast/BasicDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface that defines properties such as severity, summary and
+            detail.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Show" @click="show()" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Toast />
+<Button label="Show" @click="show()" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <Button label="Show" @click="show()" />
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        show() {
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <Button label="Show" @click="show()" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const show = () => {
+    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        show() {
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/HeadlessDoc.vue b/apps/labs/doc/toast/HeadlessDoc.vue
new file mode 100644
index 000000000..b1650b38e
--- /dev/null
+++ b/apps/labs/doc/toast/HeadlessDoc.vue
@@ -0,0 +1,220 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire toast UI instead of the default elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Toast position="top-center" group="headless" @close="visible = false">
+            <template #container="{ message, closeCallback }">
+                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
+                    <div class="flex items-center gap-5">
+                        <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
+                        <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
+                        <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
+                    </div>
+                    <div class="flex gap-4 mb-4 justify-end">
+                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
+                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
+                    </div>
+                </section>
+            </template>
+        </Toast>
+        <Button @click="show" label="View" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            progress: 0,
+            interval: null,
+            code: {
+                basic: `
+<Toast position="top-center" group="headless" @close="visible = false">
+    <template #container="{ message, closeCallback }">
+        <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
+            <div class="flex items-center gap-5">
+                <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
+                <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+                <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
+                <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
+            </div>
+            <div class="flex gap-4 mb-4 justify-end">
+                <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
+                <Button label="Cancel" size="small" @click="closeCallback"></Button>
+            </div>
+        </section>
+    </template>
+</Toast>
+<Button @click="show" label="View" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast position="top-center" group="headless" @close="visible = false">
+            <template #container="{ message, closeCallback }">
+                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
+                    <div class="flex items-center gap-5">
+                        <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
+                        <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
+                        <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
+                    </div>
+                    <div class="flex gap-4 mb-4 justify-end">
+                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
+                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
+                    </div>
+                </section>
+            </template>
+        </Toast>
+        <Button @click="show" label="View" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            progress: 0,
+            interval: null
+        }
+    },
+    beforeUnmount() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    },
+    methods: {
+        show() {
+            if (!this.visible) {
+                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg rounded-2xl' });
+                this.visible = true;
+                this.progress = 0;
+
+                if (this.interval) {
+                    clearInterval(this.interval);
+                }
+
+                this.interval = setInterval(() => {
+                    if (this.progress <= 100) {
+                        this.progress = this.progress + 20;
+                    }
+
+                    if (this.progress >= 100) {
+                        this.progress = 100;
+                        clearInterval(this.interval);
+                    }
+                }, 1000);
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast position="top-center" group="headless" @close="visible = false">
+            <template #container="{ message, closeCallback }">
+                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
+                    <div class="flex items-center gap-5">
+                        <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
+                        <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
+                        <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
+                    </div>
+                    <div class="flex gap-4 mb-4 justify-end">
+                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
+                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
+                    </div>
+                </section>
+            </template>
+        </Toast>
+        <Button @click="show" label="View" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+import { ref, onUnmounted } from 'vue';
+const toast = useToast();
+const visible = ref(false);
+const progress = ref(0);
+const interval = ref();
+
+onUnmounted(() => {
+    if (interval.value) {
+        clearInterval(interval.value);
+    }
+})
+
+const show = () => {
+    if (!visible.value) {
+        toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg rounded-2xl' });
+        visible.value = true;
+        progress.value = 0;
+
+        if (interval.value) {
+            clearInterval(interval.value);
+        }
+
+        interval.value = setInterval(() => {
+            if (progress.value <= 100) {
+                progress.value = progress.value + 20;
+            }
+
+            if (progress.value >= 100) {
+                progress.value = 100;
+                clearInterval(interval.value);
+            }
+        }, 1000);
+    }
+};
+<\/script>
+`
+            }
+        };
+    },
+    beforeUnmount() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    },
+    methods: {
+        show() {
+            if (!this.visible) {
+                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg rounded-2xl' });
+                this.visible = true;
+                this.progress = 0;
+
+                if (this.interval) {
+                    clearInterval(this.interval);
+                }
+
+                this.interval = setInterval(() => {
+                    if (this.progress <= 100) {
+                        this.progress = this.progress + 20;
+                    }
+
+                    if (this.progress >= 100) {
+                        this.progress = 100;
+                        clearInterval(this.interval);
+                    }
+                }, 1000);
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/ImportDoc.vue b/apps/labs/doc/toast/ImportDoc.vue
new file mode 100644
index 000000000..554940f0b
--- /dev/null
+++ b/apps/labs/doc/toast/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Toast from 'primevue/toast';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/MultipleDoc.vue b/apps/labs/doc/toast/MultipleDoc.vue
new file mode 100644
index 000000000..7919142a9
--- /dev/null
+++ b/apps/labs/doc/toast/MultipleDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple messages are displayed by passing an array to the <i>show</i> method.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Multiple" @click="showMultiple()" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Toast />
+<Button label="Multiple" @click="showMultiple()" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <Button label="Multiple" @click="showMultiple()" />
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        showMultiple() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
+            this.$toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content', life: 3100 });
+            this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <Button label="Multiple" @click="showMultiple()" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const showMultiple = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
+    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
+    toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content', life: 3100 });
+    toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        showMultiple() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
+            this.$toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content', life: 3100 });
+            this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/PositionDoc.vue b/apps/labs/doc/toast/PositionDoc.vue
new file mode 100644
index 000000000..0443d37c8
--- /dev/null
+++ b/apps/labs/doc/toast/PositionDoc.vue
@@ -0,0 +1,107 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A message can be targeted to a certain Toast component by matching the <i>group</i> keys whereas location is customized with the <i>position</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-2">
+            <Button label="Top Left" @click="showTopLeft" />
+            <Button label="Bottom Left" @click="showBottomLeft" />
+            <Button label="Bottom Right" @click="showBottomRight" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Toast position="top-left" group="tl" />
+<Toast position="bottom-left" group="bl" />
+<Toast position="bottom-right" group="br" />
+
+<Button label="Top Left" @click="showTopLeft" />
+<Button label="Bottom Left" @click="showBottomLeft" />
+<Button label="Bottom Right" @click="showBottomRight" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast position="top-left" group="tl" />
+        <Toast position="bottom-left" group="bl" />
+        <Toast position="bottom-right" group="br" />
+
+        <div class="flex flex-wrap gap-2">
+            <Button label="Top Left" @click="showTopLeft" />
+            <Button label="Bottom Left" @click="showBottomLeft" />
+            <Button label="Bottom Right" @click="showBottomRight" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        showTopLeft() {
+            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000 });
+        },
+        showBottomLeft() {
+            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', group: 'bl', life: 3000 });
+        },
+        showBottomRight() {
+            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', group: 'br', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast position="top-left" group="tl" />
+        <Toast position="bottom-left" group="bl" />
+        <Toast position="bottom-right" group="br" />
+
+        <div class="flex flex-wrap gap-2">
+            <Button label="Top Left" @click="showTopLeft" />
+            <Button label="Bottom Left" @click="showBottomLeft" />
+            <Button label="Bottom Right" @click="showBottomRight" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const showTopLeft = () => {
+    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000 });
+};
+
+const showBottomLeft = () => {
+    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', group: 'bl', life: 3000 });
+};
+
+const showBottomRight = () => {
+    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', group: 'br', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        showTopLeft() {
+            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000 });
+        },
+        showBottomLeft() {
+            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', group: 'bl', life: 3000 });
+        },
+        showBottomRight() {
+            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', group: 'br', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/SeverityDoc.vue b/apps/labs/doc/toast/SeverityDoc.vue
new file mode 100644
index 000000000..13db6d749
--- /dev/null
+++ b/apps/labs/doc/toast/SeverityDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>severity</i> option specifies the type of the message.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-2">
+            <Button label="Success" severity="success" @click="showSuccess" />
+            <Button label="Info" severity="info" @click="showInfo" />
+            <Button label="Warn" severity="warn" @click="showWarn" />
+            <Button label="Error" severity="danger" @click="showError" />
+            <Button label="Secondary" severity="secondary" @click="showSecondary" />
+            <Button label="Contrast" severity="contrast" @click="showContrast" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Toast />
+<Button label="Success" severity="success" @click="showSuccess" />
+<Button label="Info" severity="info" @click="showInfo" />
+<Button label="Warn" severity="warn" @click="showWarn" />
+<Button label="Error" severity="danger" @click="showError" />
+<Button label="Secondary" severity="secondary" @click="showSecondary" />
+<Button label="Contrast" severity="contrast" @click="showContrast" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <div class="flex flex-wrap gap-2">
+            <Button label="Success" severity="success" @click="showSuccess" />
+            <Button label="Info" severity="info" @click="showInfo" />
+            <Button label="Warn" severity="warn" @click="showWarn" />
+            <Button label="Error" severity="danger" @click="showError" />
+            <Button label="Secondary" severity="secondary" @click="showSecondary" />
+            <Button label="Contrast" severity="contrast" @click="showContrast" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        showSuccess() {
+            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
+        },
+        showInfo() {
+            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
+        },
+        showWarn() {
+            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
+        },
+        showError() {
+            this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
+        },
+        showSecondary() {
+            this.$toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
+        },
+        showContrast() {
+            this.$toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <div class="flex flex-wrap gap-2">
+            <Button label="Success" severity="success" @click="showSuccess" />
+            <Button label="Info" severity="info" @click="showInfo" />
+            <Button label="Warn" severity="warn" @click="showWarn" />
+            <Button label="Error" severity="danger" @click="showError" />
+            <Button label="Secondary" severity="secondary" @click="showSecondary" />
+            <Button label="Contrast" severity="contrast" @click="showContrast" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const showSuccess = () => {
+    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
+};
+
+const showInfo = () => {
+    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
+};
+
+const showWarn = () => {
+    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
+};
+
+const showError = () => {
+    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
+};
+
+const showSecondary = () => {
+    toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
+};
+
+const showContrast = () => {
+    toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        showSuccess() {
+            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
+        },
+        showInfo() {
+            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
+        },
+        showWarn() {
+            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
+        },
+        showError() {
+            this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
+        },
+        showSecondary() {
+            this.$toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
+        },
+        showContrast() {
+            this.$toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/StickyDoc.vue b/apps/labs/doc/toast/StickyDoc.vue
new file mode 100644
index 000000000..fb149ac5c
--- /dev/null
+++ b/apps/labs/doc/toast/StickyDoc.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A message disappears after the number of milliseconds defined in the <i>life</i> option. Omit the <i>life</i> option to make the message sticky.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-2">
+            <Button @click="showSticky" label="Sticky" />
+            <Button label="Clear" severity="secondary" @click="clear()" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Toast />
+<Button @click="showSticky" label="Sticky" />
+<Button label="Clear" severity="secondary" @click="clear()" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <div class="flex flex-wrap gap-2">
+            <Button @click="showSticky" label="Sticky" />
+            <Button label="Clear" severity="secondary" @click="clear()" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        showSticky() {
+            this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
+        },
+        clear() {
+            this.$toast.removeAllGroups();
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <div class="flex flex-wrap gap-2">
+            <Button @click="showSticky" label="Sticky" />
+            <Button label="Clear" severity="secondary" @click="clear()" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const showSticky = () => {
+    toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
+}
+
+const clear = () => {
+    toast.removeAllGroups();
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        showSticky() {
+            this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content' });
+        },
+        clear() {
+            this.$toast.removeAllGroups();
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/TemplateDoc.vue b/apps/labs/doc/toast/TemplateDoc.vue
new file mode 100644
index 000000000..83e5f3252
--- /dev/null
+++ b/apps/labs/doc/toast/TemplateDoc.vue
@@ -0,0 +1,149 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content inside a message is defined with the <i>message</i> template.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Toast position="bottom-center" group="bc" @close="onClose">
+            <template #message="slotProps">
+                <div class="flex flex-col items-start flex-auto">
+                    <div class="flex items-center gap-2">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold">Amy Elsner</span>
+                    </div>
+                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
+                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
+                </div>
+            </template>
+        </Toast>
+        <Button @click="showTemplate" label="View" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Toast position="bottom-center" group="bc" @close="onClose">
+    <template #message="slotProps">
+        <div class="flex flex-col items-start flex-auto">
+            <div class="flex items-center gap-2">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <span class="font-bold">Amy Elsner</span>
+            </div>
+            <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
+            <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
+        </div>
+    </template>
+</Toast>
+<Button @click="showTemplate" label="View" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast position="bottom-center" group="bc" @close="onClose">
+            <template #message="slotProps">
+                <div class="flex flex-col items-start flex-auto">
+                    <div class="flex items-center gap-2">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold">Amy Elsner</span>
+                    </div>
+                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
+                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
+                </div>
+            </template>
+        </Toast>
+        <Button @click="showTemplate" label="View" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    },
+    methods: {
+        showTemplate() {
+            if (!this.visible) {
+                this.$toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
+                this.visible = true;
+            }
+        },
+        onReply() {
+            this.$toast.removeGroup('bc');
+            this.visible = false;
+        },
+        onClose() {
+            this.visible = false;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast position="bottom-center" group="bc" @close="onClose">
+            <template #message="slotProps">
+                <div class="flex flex-col items-start flex-auto">
+                    <div class="flex items-center gap-2">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold">Amy Elsner</span>
+                    </div>
+                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
+                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
+                </div>
+            </template>
+        </Toast>
+        <Button @click="showTemplate" label="View" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+import { ref } from 'vue';
+const toast = useToast();
+const visible = ref(false);
+
+const showTemplate = () => {
+    if (!visible.value) {
+        toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
+        visible.value = true;
+    } 
+};
+
+const onReply = () => {
+    toast.removeGroup('bc');
+    visible.value = false;
+}
+
+const onClose = () => {
+    visible.value = false;
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        showTemplate() {
+            if (!this.visible) {
+                this.$toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
+                this.visible = true;
+            }
+        },
+        onReply() {
+            this.$toast.removeGroup('bc');
+            this.visible = false;
+        },
+        onClose() {
+            this.visible = false;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/toast/ToastServiceDoc.vue b/apps/labs/doc/toast/ToastServiceDoc.vue
new file mode 100644
index 000000000..9b4c2e04a
--- /dev/null
+++ b/apps/labs/doc/toast/ToastServiceDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Toast component is controlled via the <i>ToastService</i> that needs to be installed as an application plugin.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+    <div class="doc-section-description">
+        <p>The service is available with the <i>useToast</i> function for Composition API or using the <i>$toast</i> property of the application for Options API.</p>
+    </div>
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import {createApp} from 'vue';
+import ToastService from 'primevue/toastservice';
+
+const app = createApp(App);
+app.use(ToastService);
+`
+            },
+            code2: {
+                basic: `
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/AccessibilityDoc.vue b/apps/labs/doc/togglebutton/AccessibilityDoc.vue
new file mode 100644
index 000000000..e98beb7a7
--- /dev/null
+++ b/apps/labs/doc/togglebutton/AccessibilityDoc.vue
@@ -0,0 +1,52 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            ToggleButton component uses a native button element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is
+            highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
+            does not change related to state.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Keyboard Support</h3>
+        <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="rememberme">Remember Me</span>
+<ToggleButton aria-labelledby="rememberme" />
+
+<ToggleButton aria-label="Remember Me" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/BasicDoc.vue b/apps/labs/doc/togglebutton/BasicDoc.vue
new file mode 100644
index 000000000..1e72a9b8c
--- /dev/null
+++ b/apps/labs/doc/togglebutton/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleButton is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleButton v-model="checked" onLabel="On" offLabel="Off" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/CustomizedDoc.vue b/apps/labs/doc/togglebutton/CustomizedDoc.vue
new file mode 100644
index 000000000..662ff9d55
--- /dev/null
+++ b/apps/labs/doc/togglebutton/CustomizedDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
+    offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
+            offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
+            offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/DisabledDoc.vue b/apps/labs/doc/togglebutton/DisabledDoc.vue
new file mode 100644
index 000000000..c048aaa45
--- /dev/null
+++ b/apps/labs/doc/togglebutton/DisabledDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
+    class="w-full sm:w-40" aria-label="Confirmation" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
+            class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
+            class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/FormsDoc.vue b/apps/labs/doc/togglebutton/FormsDoc.vue
new file mode 100644
index 000000000..db411a861
--- /dev/null
+++ b/apps/labs/doc/togglebutton/FormsDoc.vue
@@ -0,0 +1,131 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-1">
+                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
+                <Message v-if="$form.consent?.invalid" severity="error" size="small" variant="simple">{{ $form.consent.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                consent: false
+            },
+            resolver: zodResolver(
+                z.object({
+                    consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+    <div class="flex flex-col items-center gap-1">
+        <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
+        <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-1">
+                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
+                <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                consent: false
+            },
+            resolver: zodResolver(
+                z.object({
+                    consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
+                })
+            ),
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-1">
+                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
+                <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    consent: false
+});
+
+const resolver = ref(zodResolver(
+    z.object({
+        consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/ImportDoc.vue b/apps/labs/doc/togglebutton/ImportDoc.vue
new file mode 100644
index 000000000..c4aede4dd
--- /dev/null
+++ b/apps/labs/doc/togglebutton/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ToggleButton from 'primevue/togglebutton';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/InvalidDoc.vue b/apps/labs/doc/togglebutton/InvalidDoc.vue
new file mode 100644
index 000000000..ffedaa463
--- /dev/null
+++ b/apps/labs/doc/togglebutton/InvalidDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/SizesDoc.vue b/apps/labs/doc/togglebutton/SizesDoc.vue
new file mode 100644
index 000000000..7544fc7f4
--- /dev/null
+++ b/apps/labs/doc/togglebutton/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: false,
+            value2: false,
+            value3: false,
+            code: {
+                basic: `
+<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: false,
+            value2: false,
+            value3: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(false);
+const value2 = ref(false);
+const value3 = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/AccessibilityDoc.vue b/apps/labs/doc/toggleswitch/AccessibilityDoc.vue
new file mode 100644
index 000000000..af92ea041
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/AccessibilityDoc.vue
@@ -0,0 +1,52 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            ToggleSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with
+            <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the switch.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<label for="switch1">Remember Me</label>
+<ToggleSwitch inputId="switch1" />
+
+<span id="switch2">Remember Me</span>
+<ToggleSwitch aria-labelledby="switch2" />
+
+<ToggleSwitch aria-label="Remember Me" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/BasicDoc.vue b/apps/labs/doc/toggleswitch/BasicDoc.vue
new file mode 100644
index 000000000..a4ccf41ea
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleSwitch is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleSwitch v-model="checked" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/DisabledDoc.vue b/apps/labs/doc/toggleswitch/DisabledDoc.vue
new file mode 100644
index 000000000..eaecb5be0
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/DisabledDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleSwitch v-model="checked" disabled />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" disabled />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/FormsDoc.vue b/apps/labs/doc/toggleswitch/FormsDoc.vue
new file mode 100644
index 000000000..106eff1a4
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/FormsDoc.vue
@@ -0,0 +1,124 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleSwitch integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
+            <div class="flex flex-col items-center gap-2">
+                <ToggleSwitch name="activation" />
+                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                activation: false
+            },
+            resolver: zodResolver(
+                z.object({
+                    activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
+                })
+            ),
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
+    <div class="flex flex-col items-center gap-2">
+        <ToggleSwitch name="activation" />
+        <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
+            <div class="flex flex-col items-center gap-2">
+                <ToggleSwitch name="activation" />
+                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                activation: false
+            },
+            resolver: zodResolver(
+                z.object({
+                    activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
+                })
+            ),
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
+            <div class="flex flex-col items-center gap-2">
+                <ToggleSwitch name="activation" />
+                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    activation: false
+});
+const resolver = ref(zodResolver(
+    z.object({
+        activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
+    })
+));
+<\/script>
+        `
+            }
+        };
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/ImportDoc.vue b/apps/labs/doc/toggleswitch/ImportDoc.vue
new file mode 100644
index 000000000..bedc30c65
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ToggleSwitch from 'primevue/toggleswitch';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/InvalidDoc.vue b/apps/labs/doc/toggleswitch/InvalidDoc.vue
new file mode 100644
index 000000000..626d86720
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/InvalidDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" :invalid="!checked" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleSwitch v-model="checked" :invalid="!checked" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" :invalid="!checked" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" :invalid="!checked" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/PreselectionDoc.vue b/apps/labs/doc/toggleswitch/PreselectionDoc.vue
new file mode 100644
index 000000000..1c3412d02
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/PreselectionDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>checked</i> property displays the component as active initially.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: true,
+            code: {
+                basic: `
+<ToggleSwitch v-model="checked" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: true
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(true);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/TemplateDoc.vue b/apps/labs/doc/toggleswitch/TemplateDoc.vue
new file mode 100644
index 000000000..9055fa083
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/TemplateDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>handle</i> slot is available to display custom content.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-4">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
+            </template>
+        </ToggleSwitch>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleSwitch v-model="checked">
+    <template #handle="{ checked }">
+        <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
+    </template>
+</ToggleSwitch>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
+            </template>
+        </ToggleSwitch>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
+            </template>
+        </ToggleSwitch>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toolbar/AccessibilityDoc.vue b/apps/labs/doc/toolbar/AccessibilityDoc.vue
new file mode 100644
index 000000000..7f0dffa18
--- /dev/null
+++ b/apps/labs/doc/toolbar/AccessibilityDoc.vue
@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Toolbar uses <i>toolbar</i> role to the root element, <i>aria-orientation</i> is not included as it defaults to "horizontal". Any valid attribute is passed to the root element so you may add additional properties like
+            <i>aria-labelledby</i> to define the element if required.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/toolbar/BasicDoc.vue b/apps/labs/doc/toolbar/BasicDoc.vue
new file mode 100644
index 000000000..e6d941a3c
--- /dev/null
+++ b/apps/labs/doc/toolbar/BasicDoc.vue
@@ -0,0 +1,149 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> properties to place content at these sections.</p>
+    </DocSectionText>
+    <div class="card">
+        <Toolbar>
+            <template #start>
+                <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
+                <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
+                <Button icon="pi pi-upload" severity="secondary" text />
+            </template>
+
+            <template #center>
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
+                    <InputText placeholder="Search" />
+                </IconField>
+            </template>
+
+            <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
+        </Toolbar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ],
+            code: {
+                basic: `
+<Toolbar>
+    <template #start>
+        <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
+        <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
+        <Button icon="pi pi-upload" severity="secondary" text />
+    </template>
+
+    <template #center>
+        <IconField>
+            <InputIcon>
+                <i class="pi pi-search" />
+            </InputIcon>
+            <InputText placeholder="Search" />
+        </IconField>
+    </template>
+
+    <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
+</Toolbar>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toolbar>
+            <template #start>
+                <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
+                <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
+                <Button icon="pi pi-upload" severity="secondary" text />
+            </template>
+
+            <template #center>
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
+                    <InputText placeholder="Search" />
+                </IconField>
+            </template>
+
+            <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
+        </Toolbar>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toolbar>
+            <template #start>
+                <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
+                <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
+                <Button icon="pi pi-upload" severity="secondary" text />
+            </template>
+
+            <template #center>
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
+                    <InputText placeholder="Search" />
+                </IconField>
+            </template>
+
+            <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
+        </Toolbar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times'
+    }
+])
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toolbar/CustomDoc.vue b/apps/labs/doc/toolbar/CustomDoc.vue
new file mode 100644
index 000000000..418b26c3f
--- /dev/null
+++ b/apps/labs/doc/toolbar/CustomDoc.vue
@@ -0,0 +1,137 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A customized toolbar with navigation bar functionality.</p>
+    </DocSectionText>
+    <div class="card">
+        <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
+            <template #start>
+                <div class="flex items-center gap-2">
+                    <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-text-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="transparent"
+                        />
+                    </svg>
+                    <Button label="Files" text plain />
+                    <Button label="Edit" text plain />
+                    <Button label="View" text plain />
+                </div>
+            </template>
+
+            <template #end>
+                <div class="flex items-center gap-2">
+                    <Button label="Share" severity="contrast" size="small" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
+                </div>
+            </template>
+        </Toolbar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
+    <template #start>
+        <div class="flex items-center gap-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="..." fill="var(--p-text-color)" />
+                <path d="..." fill="transparent" />
+            </svg>
+            <Button label="Files" text plain />
+            <Button label="Edit" text plain />
+            <Button label="View" text plain />
+        </div>
+    </template>
+
+    <template #end>
+        <div class="flex items-center gap-2">
+            <Button label="Share" severity="contrast" size="small" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
+        </div>
+    </template>
+</Toolbar>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
+            <template #start>
+                <div class="flex items-center gap-2">
+                    <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-text-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="transparent"
+                        />
+                    </svg>
+                    <Button label="Files" text plain />
+                    <Button label="Edit" text plain />
+                    <Button label="View" text plain />
+                </div>
+            </template>
+
+            <template #end>
+                <div class="flex items-center gap-2">
+                    <Button label="Share" severity="contrast" size="small" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
+                </div>
+            </template>
+        </Toolbar>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
+            <template #start>
+                <div class="flex items-center gap-2">
+                    <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--p-text-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="transparent"
+                        />
+                    </svg>
+                    <Button label="Files" text plain />
+                    <Button label="Edit" text plain />
+                    <Button label="View" text plain />
+                </div>
+            </template>
+
+            <template #end>
+                <div class="flex items-center gap-2">
+                    <Button label="Share" severity="contrast" size="small" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
+                </div>
+            </template>
+        </Toolbar>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toolbar/ImportDoc.vue b/apps/labs/doc/toolbar/ImportDoc.vue
new file mode 100644
index 000000000..963fcbf0d
--- /dev/null
+++ b/apps/labs/doc/toolbar/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Toolbar from 'primevue/toolbar';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tooltip/AccessibilityDoc.vue b/apps/labs/doc/tooltip/AccessibilityDoc.vue
new file mode 100644
index 000000000..2cdbc1e71
--- /dev/null
+++ b/apps/labs/doc/tooltip/AccessibilityDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Tooltip component uses <i>tooltip</i> role and when it becomes visible the generated id of the tooltip is defined as the <i>aria-describedby</i> of the target.</p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the tooltip when focus is on the target.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/tooltip/AutoHideDoc.vue b/apps/labs/doc/tooltip/AutoHideDoc.vue
new file mode 100644
index 000000000..ab27de8bb
--- /dev/null
+++ b/apps/labs/doc/tooltip/AutoHideDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to customize this behavior so that tooltip stays open when the cursor is on the tooltip.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tooltip/CustomDoc.vue b/apps/labs/doc/tooltip/CustomDoc.vue
new file mode 100644
index 000000000..264ece90c
--- /dev/null
+++ b/apps/labs/doc/tooltip/CustomDoc.vue
@@ -0,0 +1,92 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A tooltip sample with a custom style and content.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center">
+        <Button
+            v-tooltip.bottom="{
+                value: 'PrimeVue Rocks',
+                pt: {
+                    arrow: {
+                        style: {
+                            borderBottomColor: 'var(--p-primary-color)'
+                        }
+                    },
+                    text: '!bg-primary !text-primary-contrast !font-medium'
+                }
+            }"
+            severity="secondary"
+            label="Button"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button
+    v-tooltip.bottom="{
+        value: 'PrimeVue Rocks',
+        pt: {
+            arrow: {
+                style: {
+                    borderBottomColor: 'var(--p-primary-color)'
+                }
+            },
+            text: '!bg-primary !text-primary-contrast !font-medium'
+        }
+    }"
+    label="Button"
+/>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center">
+        <Button
+            v-tooltip.bottom="{
+                value: 'PrimeVue Rocks',
+                pt: {
+                    arrow: {
+                        style: {
+                            borderBottomColor: 'var(--p-primary-color)'
+                        }
+                    },
+                    text: '!bg-primary !text-primary-contrast !font-medium'
+                }
+            }"
+            severity="secondary"
+            label="Button"
+        />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center">
+        <Button
+            v-tooltip.bottom="{
+                value: 'PrimeVue Rocks',
+                pt: {
+                    arrow: {
+                        style: {
+                            borderBottomColor: 'var(--p-primary-color)'
+                        }
+                    },
+                    text: '!bg-primary !text-primary-contrast !font-medium'
+                }
+            }"
+            severity="secondary"
+            label="Button"
+        />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tooltip/DelayDoc.vue b/apps/labs/doc/tooltip/DelayDoc.vue
new file mode 100644
index 000000000..06e6a43e0
--- /dev/null
+++ b/apps/labs/doc/tooltip/DelayDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Delays to the enter and leave events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center">
+        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center">
+        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center">
+        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tooltip/EventDoc.vue b/apps/labs/doc/tooltip/EventDoc.vue
new file mode 100644
index 000000000..7a90e5555
--- /dev/null
+++ b/apps/labs/doc/tooltip/EventDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Event to display the tooltip is defined as a modifier, default event is hover.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center">
+        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center">
+        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tooltip/ImportDoc.vue b/apps/labs/doc/tooltip/ImportDoc.vue
new file mode 100644
index 000000000..d46f41a90
--- /dev/null
+++ b/apps/labs/doc/tooltip/ImportDoc.vue
@@ -0,0 +1,20 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Tooltip from 'primevue/tooltip';
+
+app.directive('tooltip', Tooltip);
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tooltip/PositionDoc.vue b/apps/labs/doc/tooltip/PositionDoc.vue
new file mode 100644
index 000000000..ff97c21d0
--- /dev/null
+++ b/apps/labs/doc/tooltip/PositionDoc.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>There are four choices to position the tooltip, default value is <i>right</i> and alternatives are <i>top</i>, <i>bottom</i>, <i>left</i>.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
+        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
+        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
+<InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
+<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
+<InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
+        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
+        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
+        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
+        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/AccessibilityDoc.vue b/apps/labs/doc/tree/AccessibilityDoc.vue
new file mode 100644
index 000000000..3937308c6
--- /dev/null
+++ b/apps/labs/doc/tree/AccessibilityDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The root list element has a <i>tree</i> role whereas each list item has a <i>treeitem</i> role along with <i>aria-label</i>,
+            <i>aria-selected</i> and <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. The container element of a treenode has the <i>group</i> role. Checkbox and toggle icons are
+            hidden from screen readers as their parent element with <i>treeitem</i> role and attributes are used instead for readers and keyboard support. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated
+            implicitly and added to each treeitem.
+        </p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>
+                            Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+                            page tab sequence.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>
+                            Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
+                            page tab sequence.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Selects the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Selects the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/tree/BasicDoc.vue b/apps/labs/doc/tree/BasicDoc.vue
new file mode 100644
index 000000000..325bd1d00
--- /dev/null
+++ b/apps/labs/doc/tree/BasicDoc.vue
@@ -0,0 +1,96 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/ControlledDoc.vue b/apps/labs/doc/tree/ControlledDoc.vue
new file mode 100644
index 000000000..dc31eb2db
--- /dev/null
+++ b/apps/labs/doc/tree/ControlledDoc.vue
@@ -0,0 +1,182 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that
+            <i>expandedKeys</i> also supports two-way binding with the v-model directive.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-2 mb-6">
+            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+        </div>
+        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {},
+            code: {
+                basic: `
+<div class="flex flex-wrap gap-2 mb-6">
+    <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+    <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+</div>
+<Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-2 mb-6">
+            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+        </div>
+        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {}
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        expandAll() {
+            for (let node of this.nodes) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = { ...this.expandedKeys };
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            if (node.children && node.children.length) {
+                this.expandedKeys[node.key] = true;
+
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-2 mb-6">
+            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+        </div>
+        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+const expandedKeys = ref({});
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+
+const expandAll = () => {
+    for (let node of nodes.value) {
+        expandNode(node);
+    }
+
+    expandedKeys.value = { ...expandedKeys.value };
+};
+
+const collapseAll = () => {
+    expandedKeys.value = {};
+};
+
+const expandNode = (node) => {
+    if (node.children && node.children.length) {
+        expandedKeys.value[node.key] = true;
+
+        for (let child of node.children) {
+            expandNode(child);
+        }
+    }
+};
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        expandAll() {
+            for (let node of this.nodes) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = { ...this.expandedKeys };
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            if (node.children && node.children.length) {
+                this.expandedKeys[node.key] = true;
+
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/EventsDoc.vue b/apps/labs/doc/tree/EventsDoc.vue
new file mode 100644
index 000000000..52517471b
--- /dev/null
+++ b/apps/labs/doc/tree/EventsDoc.vue
@@ -0,0 +1,158 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An event is provided for each type of user interaction such as expand, collapse and selection.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tree
+            v-model:selectionKeys="selectedKey"
+            :value="nodes"
+            selectionMode="single"
+            :metaKeySelection="false"
+            @nodeSelect="onNodeSelect"
+            @nodeUnselect="onNodeUnselect"
+            @nodeExpand="onNodeExpand"
+            @nodeCollapse="onNodeCollapse"
+            class="w-full md:w-[30rem]"
+        ></Tree>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            code: {
+                basic: `
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
+    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast />
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
+            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.label, life: 3000 });
+        },
+        onNodeExpand(node) {
+            this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
+        },
+        onNodeCollapse(node) {
+            this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
+            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+import { useToast } from "primevue/usetoast";
+
+const nodes = ref(null);
+const selectedKey = ref(null);
+const toast = useToast();
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+
+const onNodeSelect = (node) => {
+    toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+};
+
+const onNodeUnselect = (node) => {
+    toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.label, life: 3000 });
+};
+
+const onNodeExpand = (node) => {
+    toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
+};
+
+const onNodeCollapse (node) => {
+    toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+};
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.label, life: 3000 });
+        },
+        onNodeExpand(node) {
+            this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
+        },
+        onNodeCollapse(node) {
+            this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/FilterDoc.vue b/apps/labs/doc/tree/FilterDoc.vue
new file mode 100644
index 000000000..c8a2bf8d4
--- /dev/null
+++ b/apps/labs/doc/tree/FilterDoc.vue
@@ -0,0 +1,149 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Filtering is enabled by adding the <i>filter</i> property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
+            <i>filterBy</i> property. In addition <i>filterMode</i> specifies the filtering strategy. In <i>lenient</i> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On
+            the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
+        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {},
+            code: {
+                basic: `
+<Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
+<Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
+        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {}
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then(data => this.nodes = data);
+    },
+    methods: {
+        expandAll() {
+            for (let node of this.nodes) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = { ...this.expandedKeys };
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            this.expandedKeys[node.key] = true;
+
+            if (node.children && node.children.length) {
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
+        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then(data => nodes.value = data);
+});
+
+const expandedKeys = ref({});
+
+const expandAll = () => {
+    for (let node of nodes.value) {
+        expandNode(node);
+    }
+
+    expandedKeys.value = { ...expandedKeys.value };
+};
+
+const collapseAll = () => {
+    expandedKeys.value = {};
+};
+
+const expandNode = (node) => {
+    expandedKeys.value[node.key] = true;
+
+    if (node.children && node.children.length) {
+        for (let child of node.children) {
+            expandNode(child);
+        }
+    }
+};
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/ImportDoc.vue b/apps/labs/doc/tree/ImportDoc.vue
new file mode 100644
index 000000000..0d82a40de
--- /dev/null
+++ b/apps/labs/doc/tree/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Tree from 'primevue/tree';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/LazyDoc.vue b/apps/labs/doc/tree/LazyDoc.vue
new file mode 100644
index 000000000..95916cc45
--- /dev/null
+++ b/apps/labs/doc/tree/LazyDoc.vue
@@ -0,0 +1,392 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using <i>loading</i> property and <i>node-expand</i> method. Default value of <i>loadingMode</i> is <i>mask</i> and also
+            <i>icon</i> is available.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
+            <label class="font-bold block mb-2">Mask Mode</label>
+            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
+        </div>
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
+            <label class="font-bold block mb-2">Icon Mode</label>
+            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            nodes2: null,
+            loading: false,
+            code: {
+                basic: `
+<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
+<Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
+            <label class="font-bold block mb-2">Mask Mode</label>
+            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
+        </div>
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
+            <label class="font-bold block mb-2">Icon Mode</label>
+            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            nodes2: null,
+            loading: false
+        };
+    },
+    mounted() {
+        this.loading = true;
+        this.nodes2 = this.initiateNodes2();
+
+        setTimeout(() => {
+            this.nodes = this.initiateNodes();
+            this.loading = false;
+            this.nodes2.map((node) => (node.loading = false));
+        }, 2000);
+    },
+    methods: {
+        onNodeExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+
+                setTimeout(() => {
+                    let _node = { ...node };
+
+                    _node.children = [];
+
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+
+                    let _nodes = { ...this.nodes };
+                    _nodes[parseInt(node.key, 10)] = _node;
+
+                    this.nodes = _nodes;
+                    this.loading = false;
+                }, 500);
+            }
+        },
+        onNodeExpand2(node) {
+            if (!node.children) {
+                node.loading = true;
+
+                setTimeout(() => {
+                    let _node = { ...node };
+
+                    _node.children = [];
+
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+
+                    let _nodes = { ...this.nodes2 };
+
+                    _nodes[parseInt(node.key, 10)] = { ..._node, loading: false };
+
+                    this.nodes2 = _nodes;
+                }, 500);
+            }
+        },
+        initiateNodes() {
+            return [
+                {
+                    key: '0',
+                    label: 'Node 0',
+                    leaf: false
+                },
+                {
+                    key: '1',
+                    label: 'Node 1',
+                    leaf: false
+                },
+                {
+                    key: '2',
+                    label: 'Node 2',
+                    leaf: false
+                }
+            ];
+        },
+        initiateNodes2() {
+            return [
+                {
+                    key: '0',
+                    label: 'Node 0',
+                    leaf: false,
+                    loading: true
+                },
+                {
+                    key: '1',
+                    label: 'Node 1',
+                    leaf: false,
+                    loading: true
+                },
+                {
+                    key: '2',
+                    label: 'Node 2',
+                    leaf: false,
+                    loading: true
+                }
+            ];
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
+            <label class="font-bold block mb-2">Mask Mode</label>
+            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
+        </div>
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
+            <label class="font-bold block mb-2">Icon Mode</label>
+            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const nodes = ref(null);
+const nodes2 = ref(null);
+const loading = ref(false);
+
+onMounted(() => {
+    loading.value = true;
+    nodes2.value = initiateNodes2();
+
+    setTimeout(() => {
+        nodes.value = initiateNodes();
+        loading.value = false;
+        nodes2.value.map((node) => (node.loading = false));
+    }, 2000);
+});
+
+const onNodeExpand = (node) => {
+    if (!node.children) {
+        loading.value = true;
+
+        setTimeout(() => {
+            let _node = { ...node };
+
+            _node.children = [];
+
+            for (let i = 0; i < 3; i++) {
+                _node.children.push({
+                    key: node.key + '-' + i,
+                    label: 'Lazy ' + node.label + '-' + i
+                });
+            }
+
+            let _nodes = { ...nodes.value };
+            _nodes[parseInt(node.key, 10)] = _node;
+
+            nodes.value = _nodes;
+            loading.value = false;
+        }, 500);
+    }
+};
+
+const onNodeExpand2 = (node) => {
+    if (!node.children) {
+        node.loading = true;
+
+        setTimeout(() => {
+            let _node = { ...node };
+
+            _node.children = [];
+
+            for (let i = 0; i < 3; i++) {
+                _node.children.push({
+                    key: node.key + '-' + i,
+                    label: 'Lazy ' + node.label + '-' + i
+                });
+            }
+
+            let _nodes = { ...nodes2.value };
+
+            _nodes[parseInt(node.key, 10)] = { ..._node, loading: false };
+
+            nodes2.value = _nodes;
+        }, 500);
+    }
+};
+
+const initiateNodes = () => {
+    return [
+        {
+            key: '0',
+            label: 'Node 0',
+            leaf: false
+        },
+        {
+            key: '1',
+            label: 'Node 1',
+            leaf: false
+        },
+        {
+            key: '2',
+            label: 'Node 2',
+            leaf: false
+        }
+    ];
+};
+
+const initiateNodes2 = () => {
+    return [
+        {
+            key: '0',
+            label: 'Node 0',
+            leaf: false,
+            loading: true
+        },
+        {
+            key: '1',
+            label: 'Node 1',
+            leaf: false,
+            loading: true
+        },
+        {
+            key: '2',
+            label: 'Node 2',
+            leaf: false,
+            loading: true
+        }
+    ];
+};
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.loading = true;
+        this.nodes2 = this.initiateNodes2();
+
+        setTimeout(() => {
+            this.nodes = this.initiateNodes();
+            this.loading = false;
+            this.nodes2.map((node) => (node.loading = false));
+        }, 2000);
+    },
+    methods: {
+        onNodeExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+
+                setTimeout(() => {
+                    let _node = { ...node };
+
+                    _node.children = [];
+
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+
+                    let _nodes = { ...this.nodes };
+
+                    _nodes[parseInt(node.key, 10)] = _node;
+
+                    this.nodes = _nodes;
+                    this.loading = false;
+                }, 500);
+            }
+        },
+        onNodeExpand2(node) {
+            if (!node.children) {
+                node.loading = true;
+
+                setTimeout(() => {
+                    let _node = { ...node };
+
+                    _node.children = [];
+
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+
+                    let _nodes = { ...this.nodes2 };
+
+                    _nodes[parseInt(node.key, 10)] = { ..._node, loading: false };
+
+                    this.nodes2 = _nodes;
+                }, 500);
+            }
+        },
+        initiateNodes() {
+            return [
+                {
+                    key: '0',
+                    label: 'Node 0',
+                    leaf: false
+                },
+                {
+                    key: '1',
+                    label: 'Node 1',
+                    leaf: false
+                },
+                {
+                    key: '2',
+                    label: 'Node 2',
+                    leaf: false
+                }
+            ];
+        },
+        initiateNodes2() {
+            return [
+                {
+                    key: '0',
+                    label: 'Node 0',
+                    leaf: false,
+                    loading: true
+                },
+                {
+                    key: '1',
+                    label: 'Node 1',
+                    leaf: false,
+                    loading: true
+                },
+                {
+                    key: '2',
+                    label: 'Node 2',
+                    leaf: false,
+                    loading: true
+                }
+            ];
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/TemplateDoc.vue b/apps/labs/doc/tree/TemplateDoc.vue
new file mode 100644
index 000000000..f89a4f43c
--- /dev/null
+++ b/apps/labs/doc/tree/TemplateDoc.vue
@@ -0,0 +1,167 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tree :value="nodes" class="w-full md:w-[30rem]">
+            <template #default="slotProps">
+                <b>{{ slotProps.node.label }}</b>
+            </template>
+            <template #url="slotProps">
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
+            </template>
+        </Tree>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: [
+                {
+                    key: '0',
+                    label: 'Introduction',
+                    children: [
+                        { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
+                        { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
+                        { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
+                        { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Components In-Depth',
+                    children: [
+                        { key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/guide/components/registration.html#component-registration', type: 'url' },
+                        { key: '1-1', label: 'Props', data: 'https://vuejs.org/guide/components/props.html#props', type: 'url' },
+                        { key: '1-2', label: 'Components Events', data: 'https://vuejs.org/guide/components/events.html#component-events', type: 'url' },
+                        { key: '1-3', label: 'Slots', data: 'https://vuejs.org/guide/components/slots.html#slots', type: 'url' }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Tree :value="nodes" class="w-full md:w-[30rem]">
+    <template #default="slotProps">
+        <b>{{ slotProps.node.label }}</b>
+    </template>
+    <template #url="slotProps">
+        <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
+    </template>
+</Tree>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Tree :value="nodes" class="w-full md:w-[30rem]">
+            <template #default="slotProps">
+                <b>{{ slotProps.node.label }}</b>
+            </template>
+            <template #url="slotProps">
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
+            </template>
+        </Tree>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: [
+                {
+                    key: '0',
+                    label: 'Introduction',
+                    children: [
+                        { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
+                        { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
+                        { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
+                        { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Components In-Depth',
+                    children: [
+                        { key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/guide/components/registration.html#component-registration', type: 'url' },
+                        { key: '1-1', label: 'Props', data: 'https://vuejs.org/guide/components/props.html#props', type: 'url' },
+                        { key: '1-2', label: 'Components Events', data: 'https://vuejs.org/guide/components/events.html#component-events', type: 'url' },
+                        { key: '1-3', label: 'Slots', data: 'https://vuejs.org/guide/components/slots.html#slots', type: 'url' }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Tree :value="nodes" class="w-full md:w-[30rem]">
+            <template #default="slotProps">
+                <b>{{ slotProps.node.label }}</b>
+            </template>
+            <template #url="slotProps">
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
+            </template>
+        </Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const nodes = ref([
+    {
+        key: '0',
+        label: 'Introduction',
+        children: [
+            { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
+            { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
+            { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
+                { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
+        ]
+    },
+    {
+        key: '1',
+        label: 'Components In-Depth',
+        children: [
+            { key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/guide/components/registration.html#component-registration', type: 'url' },
+            { key: '1-1', label: 'Props', data: 'https://vuejs.org/guide/components/props.html#props', type: 'url' },
+            { key: '1-2', label: 'Components Events', data: 'https://vuejs.org/guide/components/events.html#component-events', type: 'url' },
+            { key: '1-3', label: 'Slots', data: 'https://vuejs.org/guide/components/slots.html#slots', type: 'url' }
+        ]
+    }
+]);
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Introduction',
+    children: [
+        { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
+        { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
+        { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
+        { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
+    ]
+},
+{
+    key: '1',
+    label: 'Components In-Depth',
+    children: [
+        { key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/guide/components/registration.html#component-registration', type: 'url' },
+        { key: '1-1', label: 'Props', data: 'https://vuejs.org/guide/components/props.html#props', type: 'url' },
+        { key: '1-2', label: 'Components Events', data: 'https://vuejs.org/guide/components/events.html#component-events', type: 'url' },
+        { key: '1-3', label: 'Slots', data: 'https://vuejs.org/guide/components/slots.html#slots', type: 'url' }
+    ]
+},
+...`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/selection/CheckboxDoc.vue b/apps/labs/doc/tree/selection/CheckboxDoc.vue
new file mode 100644
index 000000000..ac69506d0
--- /dev/null
+++ b/apps/labs/doc/tree/selection/CheckboxDoc.vue
@@ -0,0 +1,131 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
+        <p>
+            In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node object to indicate
+            selection.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            code: {
+                basic: `
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast />
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+import { useToast } from "primevue/usetoast";
+
+const nodes = ref(null);
+const selectedKey = ref(null);
+const toast = useToast();
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+
+const onNodeSelect = (node) => {
+    toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+};
+
+const onNodeUnselect = (node) => {
+    toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
+};
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/selection/MultipleDoc.vue b/apps/labs/doc/tree/selection/MultipleDoc.vue
new file mode 100644
index 000000000..e02fd4bc5
--- /dev/null
+++ b/apps/labs/doc/tree/selection/MultipleDoc.vue
@@ -0,0 +1,119 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is not necessary to add to existing selections. When the optional
+            <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new node requires meta key to be present. Note that in touch enabled devices, Tree always ignores metaKey.
+        </p>
+        <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex items-center mb-6 gap-2">
+            <ToggleSwitch v-model="checked" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            checked: false,
+            nodes: null,
+            selectedKey: null,
+            code: {
+                basic: `
+<Tree v-model:selectionKeys="selectedKey" :value="nodes"
+    selectionMode="multiple" :metaKeySelection="checked"></Tree>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex items-center mb-6 gap-2">
+            <ToggleSwitch v-model="checked" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            checked: false,
+            nodes: null,
+            selectedKey: null
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex items-center mb-6 gap-2">
+            <ToggleSwitch v-model="checked" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+const selectedKey = ref(null);
+const checked = ref(false);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/tree/selection/SingleDoc.vue b/apps/labs/doc/tree/selection/SingleDoc.vue
new file mode 100644
index 000000000..6ebc73094
--- /dev/null
+++ b/apps/labs/doc/tree/selection/SingleDoc.vue
@@ -0,0 +1,126 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
+    </DocSectionText>
+    <div class="card">
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            code: {
+                basic: `
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Toast />
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+import { useToast } from "primevue/usetoast";
+
+const nodes = ref(null);
+const selectedKey = ref(null);
+const toast = useToast();
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+
+const onNodeSelect = (node) => {
+    toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+};
+
+const onNodeUnselect = (node) => {
+    toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
+};
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/AccessibilityDoc.vue b/apps/labs/doc/treeselect/AccessibilityDoc.vue
new file mode 100644
index 000000000..7667de90e
--- /dev/null
+++ b/apps/labs/doc/treeselect/AccessibilityDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The treeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The
+            relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
+        </p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
+            <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. Checkbox and toggle icons are hidden from screen readers as their parent element with <i>treeitem</i> role and attributes
+            are used instead for readers and keyboard support. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each
+            treeitem.
+        </p>
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
+
+        <h3>Closed State Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the treeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Popup Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option, closes the popup if selection mode is single.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option, closes the popup if selection mode is single.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the treeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next treenode.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous treenode.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="dd1">Options</span>
+<TreeSelect aria-labelledby="dd1" />
+
+<TreeSelect aria-label="Options" />
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/BasicDoc.vue b/apps/labs/doc/treeselect/BasicDoc.vue
new file mode 100644
index 000000000..87b8dd5e6
--- /dev/null
+++ b/apps/labs/doc/treeselect/BasicDoc.vue
@@ -0,0 +1,103 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            TreeSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Internally <PrimeVueNuxtLink to="/tree">Tree</PrimeVueNuxtLink> component is used so the options model is based on
+            TreeNode API.
+        </p>
+        <p>In single selection mode, value binding should be the <i>key</i> value of a node.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/CheckboxDoc.vue b/apps/labs/doc/treeselect/CheckboxDoc.vue
new file mode 100644
index 000000000..425f963d1
--- /dev/null
+++ b/apps/labs/doc/treeselect/CheckboxDoc.vue
@@ -0,0 +1,114 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
+        <p>
+            In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node object to indicate
+            selection.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="activeNodes" hideToggleCode importCode hideStackBlitz v-bind="$attrs" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Items" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            activeNodes: {
+                basic: `
+{
+    '0-0': {
+        partialChecked: false,
+        checked: true
+    }
+}
+`
+            },
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/ClearIconDoc.vue b/apps/labs/doc/treeselect/ClearIconDoc.vue
new file mode 100644
index 000000000..dd361db2d
--- /dev/null
+++ b/apps/labs/doc/treeselect/ClearIconDoc.vue
@@ -0,0 +1,99 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the TreeSelect.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" showClear :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/DisabledDoc.vue b/apps/labs/doc/treeselect/DisabledDoc.vue
new file mode 100644
index 000000000..449283924
--- /dev/null
+++ b/apps/labs/doc/treeselect/DisabledDoc.vue
@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/FilledDoc.vue b/apps/labs/doc/treeselect/FilledDoc.vue
new file mode 100644
index 000000000..40f92741d
--- /dev/null
+++ b/apps/labs/doc/treeselect/FilledDoc.vue
@@ -0,0 +1,99 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/FilterDoc.vue b/apps/labs/doc/treeselect/FilterDoc.vue
new file mode 100644
index 000000000..38faef2a2
--- /dev/null
+++ b/apps/labs/doc/treeselect/FilterDoc.vue
@@ -0,0 +1,107 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Filtering is enabled by adding the <i>filter</i> property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
+            <i>filterBy</i> property. In addition <i>filterMode</i> specifies the filtering strategy. In <i>lenient</i> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On
+            the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+<TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/FloatLabelDoc.vue b/apps/labs/doc/treeselect/FloatLabelDoc.vue
new file mode 100644
index 000000000..a9b6d660a
--- /dev/null
+++ b/apps/labs/doc/treeselect/FloatLabelDoc.vue
@@ -0,0 +1,157 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-80">
+            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<FloatLabel class="w-full md:w-80">
+    <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-80" variant="in">
+    <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-80" variant="on">
+    <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
+    <label for="on_label">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-80">
+            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-80">
+            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/FormsDoc.vue b/apps/labs/doc/treeselect/FormsDoc.vue
new file mode 100644
index 000000000..cb809e1f2
--- /dev/null
+++ b/apps/labs/doc/treeselect/FormsDoc.vue
@@ -0,0 +1,138 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TreeSelect is used with the <i>v-model</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
+            <div class="flex flex-col gap-1">
+                <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
+                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                node: null
+            },
+            resolver: zodResolver(
+                z.object({
+                    node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
+                })
+            ),
+            nodes: null,
+            code: {
+                basic: `
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
+    <div class="flex flex-col gap-1">
+        <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
+        <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
+    </div>
+    <Button type="submit" severity="secondary" label="Submit" />
+</Form>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
+            <div class="flex flex-col gap-1">
+                <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
+                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script>
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { z } from 'zod';
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            initialValues: {
+                node: null
+            },
+            resolver: zodResolver(
+                z.object({
+                    node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
+                })
+            ),
+            nodes: null,
+        }
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
+            <div class="flex flex-col gap-1">
+                <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
+                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+import { NodeService } from '/service/NodeService';
+
+const toast = useToast();
+const initialValues = ref({
+    node: null
+});
+const resolver = ref(zodResolver(
+    z.object({
+        node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+        `
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onFormSubmit({ valid }) {
+            if (valid) {
+                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/IftaLabelDoc.vue b/apps/labs/doc/treeselect/IftaLabelDoc.vue
new file mode 100644
index 000000000..065be229c
--- /dev/null
+++ b/apps/labs/doc/treeselect/IftaLabelDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
+            <label for="t_file">File</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<IftaLabel class="w-full md:w-80">
+    <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
+    <label for="t_file">File</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
+            <label for="t_file">File</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
+            <label for="t_file">File</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/ImportDoc.vue b/apps/labs/doc/treeselect/ImportDoc.vue
new file mode 100644
index 000000000..14ccf5097
--- /dev/null
+++ b/apps/labs/doc/treeselect/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import TreeSelect from 'primevue/treeselect';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/InvalidDoc.vue b/apps/labs/doc/treeselect/InvalidDoc.vue
new file mode 100644
index 000000000..e90eec608
--- /dev/null
+++ b/apps/labs/doc/treeselect/InvalidDoc.vue
@@ -0,0 +1,106 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue1: {},
+            selectedValue2: {},
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+<TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue1: {},
+            selectedValue2: {},
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue1 = ref({});
+const selectedValue2 = ref({});
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/LazyDoc.vue b/apps/labs/doc/treeselect/LazyDoc.vue
new file mode 100644
index 000000000..054997ad6
--- /dev/null
+++ b/apps/labs/doc/treeselect/LazyDoc.vue
@@ -0,0 +1,358 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using <i>loading</i> property and <i>node-expand</i> method. Default value of <i>loadingMode</i> is <i>mask</i> and also
+            <i>icon</i> is available.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            nodes2: null,
+            loading: false,
+            selectedValue: null,
+            selectedValue2: null,
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
+<TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            nodes2: null,
+            loading: false,
+            selectedValue: null,
+            selectedValue2: null,
+        }
+    },
+    mounted() {
+        this.loading = true;
+        this.nodes2 = this.initiateNodes2();
+
+        setTimeout(() => {
+            this.nodes = this.initiateNodes();
+            this.loading = false;
+            this.nodes2.map((node) => (node.loading = false));
+        }, 2000);
+    },
+    methods: {
+        onNodeExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+
+                setTimeout(() => {
+                    let _node = { ...node };
+
+                    _node.children = [];
+
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+
+                    this.nodes[parseInt(node.key, 10)] = _node;
+                    this.loading = false;
+                }, 500);
+            }
+        },
+        onNodeExpand2(node) {
+            if (!node.children) {
+                node.loading = true;
+
+                setTimeout(() => {
+                    let _node = { ...node };
+
+                    _node.children = [];
+
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+
+                    this.nodes2[parseInt(node.key, 10)] = { ..._node, loading: false };
+                }, 500);
+            }
+        },
+        initiateNodes() {
+            return [
+                {
+                    key: '0',
+                    label: 'Node 0',
+                    leaf: false
+                },
+                {
+                    key: '1',
+                    label: 'Node 1',
+                    leaf: false
+                },
+                {
+                    key: '2',
+                    label: 'Node 2',
+                    leaf: false
+                }
+            ];
+        },
+        initiateNodes2() {
+            return [
+                {
+                    key: '0',
+                    label: 'Node 0',
+                    leaf: false,
+                    loading: true
+                },
+                {
+                    key: '1',
+                    label: 'Node 1',
+                    leaf: false,
+                    loading: true
+                },
+                {
+                    key: '2',
+                    label: 'Node 2',
+                    leaf: false,
+                    loading: true
+                }
+            ];
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const nodes = ref(null);
+const nodes2 = ref(null);
+const selectedValue = ref(null);
+const selectedValue2 = ref(null);
+const loading = ref(false);
+
+onMounted(() => {
+    loading.value = true;
+    nodes2.value = initiateNodes2();
+
+    setTimeout(() => {
+        nodes.value = initiateNodes();
+        loading.value = false;
+        nodes2.value.map((node) => (node.loading = false));
+    }, 2000);
+});
+
+const onNodeExpand = (node) => {
+    if (!node.children) {
+        loading.value = true;
+
+        setTimeout(() => {
+            let _node = { ...node };
+
+            _node.children = [];
+
+            for (let i = 0; i < 3; i++) {
+                _node.children.push({
+                    key: node.key + '-' + i,
+                    label: 'Lazy ' + node.label + '-' + i
+                });
+            }
+
+            nodes.value[parseInt(node.key, 10)] = _node;
+            loading.value = false;
+        }, 500);
+    }
+};
+
+const onNodeExpand2 = (node) => {
+    if (!node.children) {
+        node.loading = true;
+
+        setTimeout(() => {
+            let _node = { ...node };
+
+            _node.children = [];
+
+            for (let i = 0; i < 3; i++) {
+                _node.children.push({
+                    key: node.key + '-' + i,
+                    label: 'Lazy ' + node.label + '-' + i
+                });
+            }
+
+            nodes2.value[parseInt(node.key, 10)] = { ..._node, loading: false };
+        }, 500);
+    }
+};
+
+const initiateNodes = () => {
+    return [
+        {
+            key: '0',
+            label: 'Node 0',
+            leaf: false
+        },
+        {
+            key: '1',
+            label: 'Node 1',
+            leaf: false
+        },
+        {
+            key: '2',
+            label: 'Node 2',
+            leaf: false
+        }
+    ];
+};
+
+const initiateNodes2 = () => {
+    return [
+        {
+            key: '0',
+            label: 'Node 0',
+            leaf: false,
+            loading: true
+        },
+        {
+            key: '1',
+            label: 'Node 1',
+            leaf: false,
+            loading: true
+        },
+        {
+            key: '2',
+            label: 'Node 2',
+            leaf: false,
+            loading: true
+        }
+    ];
+};
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.loading = true;
+        this.nodes2 = this.initiateNodes2();
+
+        setTimeout(() => {
+            this.nodes = this.initiateNodes();
+            this.loading = false;
+            this.nodes2.map((node) => (node.loading = false));
+        }, 2000);
+    },
+    methods: {
+        onNodeExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+
+                setTimeout(() => {
+                    let _node = { ...node };
+
+                    _node.children = [];
+
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+
+                    this.nodes[parseInt(node.key, 10)] = _node;
+                    this.loading = false;
+                }, 500);
+            }
+        },
+        onNodeExpand2(node) {
+            if (!node.children) {
+                node.loading = true;
+
+                setTimeout(() => {
+                    let _node = { ...node };
+
+                    _node.children = [];
+
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+
+                    this.nodes2[parseInt(node.key, 10)] = { ..._node, loading: false };
+                }, 500);
+            }
+        },
+        initiateNodes() {
+            return [
+                {
+                    key: '0',
+                    label: 'Node 0',
+                    leaf: false
+                },
+                {
+                    key: '1',
+                    label: 'Node 1',
+                    leaf: false
+                },
+                {
+                    key: '2',
+                    label: 'Node 2',
+                    leaf: false
+                }
+            ];
+        },
+        initiateNodes2() {
+            return [
+                {
+                    key: '0',
+                    label: 'Node 0',
+                    leaf: false,
+                    loading: true
+                },
+                {
+                    key: '1',
+                    label: 'Node 1',
+                    leaf: false,
+                    loading: true
+                },
+                {
+                    key: '2',
+                    label: 'Node 2',
+                    leaf: false,
+                    loading: true
+                }
+            ];
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/MultipleDoc.vue b/apps/labs/doc/treeselect/MultipleDoc.vue
new file mode 100644
index 000000000..e99bda7bb
--- /dev/null
+++ b/apps/labs/doc/treeselect/MultipleDoc.vue
@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is not necessary to add to existing selections. When the optional
+            <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new node requires meta key to be present. Note that in touch enabled devices, TreeSelect always ignores metaKey.
+        </p>
+        <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
+    </DocSectionText>
+    <DocSectionCode :code="activeNodes" hideToggleCode importCode hideStackBlitz v-bind="$attrs" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            activeNodes: {
+                basic: `
+{
+    '0-0': true,
+    '0-1-0': true
+}
+`
+            },
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/SizesDoc.vue b/apps/labs/doc/treeselect/SizesDoc.vue
new file mode 100644
index 000000000..7c6981700
--- /dev/null
+++ b/apps/labs/doc/treeselect/SizesDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TreeSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
+        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
+        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            nodes: null,
+            code: {
+                basic: `
+<TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
+<TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
+<TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
+        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
+        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            nodes: null
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
+        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
+        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const nodes = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treeselect/TemplateDoc.vue b/apps/labs/doc/treeselect/TemplateDoc.vue
new file mode 100644
index 000000000..786851b70
--- /dev/null
+++ b/apps/labs/doc/treeselect/TemplateDoc.vue
@@ -0,0 +1,151 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TreeSelect offers multiple slots for customization through templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
+            <template #dropdownicon>
+                <i class="pi pi-search" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Files</div>
+            </template>
+            <template #footer>
+                <div class="px-3 pt-1 pb-2 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </TreeSelect>
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
+    <template #dropdownicon>
+        <i class="pi pi-search" />
+    </template>
+    <template #header>
+        <div class="font-medium px-3 py-2">Available Files</div>
+    </template>
+    <template #footer>
+        <div class="px-3 pt-1 pb-2 flex justify-between">
+            <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+            <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
+        </div>
+    </template>
+</TreeSelect>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
+            <template #dropdownicon>
+                <i class="pi pi-search" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Files</div>
+            </template>
+            <template #footer>
+                <div class="px-3 pt-1 pb-2 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </TreeSelect>
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
+            <template #dropdownicon>
+                <i class="pi pi-search" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Files</div>
+            </template>
+            <template #footer>
+                <div class="px-3 pt-1 pb-2 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </TreeSelect>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/AccessibilityDoc.vue b/apps/labs/doc/treetable/AccessibilityDoc.vue
new file mode 100644
index 000000000..c98490b02
--- /dev/null
+++ b/apps/labs/doc/treetable/AccessibilityDoc.vue
@@ -0,0 +1,128 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            DataTable uses a <i>treegrid</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table for
+            readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers utilizer
+            <i>aria-sort</i> attribute either set to "ascending" or "descending".
+        </p>
+
+        <p>Row elements manage <i>aria-expanded</i> for state along with <i>aria-posinset</i>, <i>aria-setsize</i> and <i>aria-level</i> attribute to define the hierachy.</p>
+
+        <p>When selection is enabled, <i>aria-selected</i> is set to true on a row. In checkbox mode, TreeTable component uses a hidden native checkbox element.</p>
+
+        <p>Editable cells use custom templating so you need to manage aria roles and attributes manually if required.</p>
+
+        <p>Paginator is a standalone component used inside the DataTable, refer to the <PrimeVueNuxtLink to="/paginator">paginator</PrimeVueNuxtLink> for more information about the accessibility features.</p>
+
+        <h3>Sortable Headers Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves through the headers.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Sorts the column.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Sorts the column.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>
+                            Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+                            page tab sequence.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>
+                            Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
+                            page tab sequence.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Selects the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Selects the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first same-level node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last same-level node.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/treetable/BasicDoc.vue b/apps/labs/doc/treetable/BasicDoc.vue
new file mode 100644
index 000000000..0089b701b
--- /dev/null
+++ b/apps/labs/doc/treetable/BasicDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TreeTable requires a collection of <i>TreeNode</i> instances as a <i>value</i> and <i>Column</i> components as children for the representation. The column with the element to toggle a node should have <i>expander</i> enabled.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/ColumnToggleDoc.vue b/apps/labs/doc/treetable/ColumnToggleDoc.vue
new file mode 100644
index 000000000..52b85d73b
--- /dev/null
+++ b/apps/labs/doc/treetable/ColumnToggleDoc.vue
@@ -0,0 +1,169 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+                <template #header>
+                    <div style="text-align: left">
+                        <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip" />
+                    </div>
+                </template>
+                <Column field="name" header="Name" :expander="true"></Column>
+                <Column v-for="col of selectedColumns" :key="col.field" :field="col.field" :header="col.header"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedColumns: null,
+            columns: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
+    <template #header>
+        <div style="text-align:left">
+            <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
+        </div>
+    </template>
+    <Column field="name" header="Name" :expander="true"></Column>
+    <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <template #header>
+                <div style="text-align:left">
+                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
+                </div>
+            </template>
+            <Column field="name" header="Name" :expander="true"></Column>
+            <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedColumns: null,
+            columns: null,
+        }
+    },
+    created() {
+        this.columns = [
+            { field: 'size', header: 'Size' },
+            { field: 'type', header: 'Type' }
+        ];
+
+        this.selectedColumns = this.columns;
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onToggle(value) {
+            this.selectedColumns = this.columns.filter(col => value.includes(col));
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <template #header>
+                <div style="text-align:left">
+                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
+                </div>
+            </template>
+            <Column field="name" header="Name" :expander="true"></Column>
+            <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const columns = ref([
+    {field: 'size', header: 'Size'},
+    {field: 'type', header: 'Type'}
+]);
+const nodes = ref();
+const selectedColumns = ref(columns.value);
+const onToggle = (val) => {
+    selectedColumns.value = columns.value.filter(col => val.includes(col));
+};
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    created() {
+        this.columns = [
+            { field: 'size', header: 'Size' },
+            { field: 'type', header: 'Type' }
+        ];
+
+        this.selectedColumns = this.columns;
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        },
+        onToggle(value) {
+            this.selectedColumns = this.columns.filter((col) => value.includes(col));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/ContextMenuDoc.vue b/apps/labs/doc/treetable/ContextMenuDoc.vue
new file mode 100644
index 000000000..4fbd32f6e
--- /dev/null
+++ b/apps/labs/doc/treetable/ContextMenuDoc.vue
@@ -0,0 +1,235 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            TreeTable has exclusive integration with ContextMenu using the <i>contextMenu</i> event to open a menu on right click alont with <i>contextMenuSelection</i> property and <i>row-contextmenu</i> event to control the selection via the menu.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
+            <TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedNode: null,
+            menuModel: [
+                { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewNode(this.selectedNode) },
+                { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteNode(this.selectedNode) }
+            ],
+            code: {
+                basic: `
+<ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
+<TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
+        <TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedNode: null,
+            menuModel: [
+                { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewNode(this.selectedNode) },
+                { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteNode(this.selectedNode) }
+            ]
+        }
+    },
+    methods: {
+        onRowContextMenu(event) {
+            this.$refs.cm.show(event.originalEvent);
+        },
+        viewNode(node) {
+            this.$toast.add({ severity: 'info', summary: 'Node Selected', detail: node.data.name, life: 3000 });
+        },
+        deleteNode(node) {
+            this.nodes = this.filterNodes(this.nodes, node.key);
+            this.$toast.add({ severity: 'error', summary: 'Node Deleted', detail: node.data.name, life: 3000 });
+            this.selectedNode = null;
+        },
+        filterNodes(nodes, keyToRemove) {
+            return nodes
+                .map((node) => {
+                    if (node.key === keyToRemove) {
+                        return null;
+                    }
+
+                    if (node.children) {
+                        const filteredChildren = this.filterNodes(node.children, keyToRemove);
+
+                        return { ...node, children: filteredChildren };
+                    }
+
+                    return node;
+                })
+                .filter((node) => node !== null);
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
+        <TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const cm = ref();
+const toast = useToast();
+const nodes = ref();
+const selectedNode = ref();
+const menuModel = ref(
+    [
+        { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewNode(this.selectedNode) },
+        { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteNode(this.selectedNode) }
+    ]
+);
+
+const onRowContextMenu = (event) => {
+    cm.value.show(event.originalEvent);
+};
+
+const viewNode = (product) => {
+    toast.add({severity: 'info', summary: 'Node Selected', detail: node.data.name, life: 3000});
+};
+
+const deleteProduct = (node) => {
+    nodes.value = filterNodes(nodes.value, node.key);
+    toast.add({severity: 'error', summary: 'Node Deleted', detail: node.data.name, life: 3000});
+    selectedProduct.value = null;
+};
+
+const filterNodes = (nodeList, keyToRemove) => {
+    return nodes
+        .map((node) => {
+            if (node.key === keyToRemove) {
+                return null;
+            }
+
+            if (node.children) {
+                const filteredChildren = filterNodes(node.children, keyToRemove);
+
+                return { ...node, children: filteredChildren };
+            }
+
+            return node;
+        })
+        .filter((node) => node !== null);
+}
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        },
+        onRowContextMenu(event) {
+            this.$refs.cm.show(event.originalEvent);
+        },
+        viewNode(node) {
+            this.$toast.add({ severity: 'info', summary: 'Node Selected', detail: node.data.name, life: 3000 });
+        },
+        deleteNode(node) {
+            this.nodes = this.filterNodes(this.nodes, node.key);
+            this.$toast.add({ severity: 'error', summary: 'Node Deleted', detail: node.data.name, life: 3000 });
+            this.selectedNode = null;
+        },
+        filterNodes(nodes, keyToRemove) {
+            return nodes
+                .map((node) => {
+                    if (node.key === keyToRemove) {
+                        return null;
+                    }
+
+                    if (node.children) {
+                        const filteredChildren = this.filterNodes(node.children, keyToRemove);
+
+                        return { ...node, children: filteredChildren };
+                    }
+
+                    return node;
+                })
+                .filter((node) => node !== null);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/ControlledDoc.vue b/apps/labs/doc/treetable/ControlledDoc.vue
new file mode 100644
index 000000000..68bf18bf4
--- /dev/null
+++ b/apps/labs/doc/treetable/ControlledDoc.vue
@@ -0,0 +1,150 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Expansion state is controlled with <i>expandedKeys</i> property. The <i>expandedKeys</i> should be an object whose keys refer to the node key and values represent the expanded state e.g. <i>&#123;'0-0': true&#125;</i>.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Button @click="toggleApplications" label="Toggle Applications" />
+            <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {},
+            code: {
+                basic: `
+<Button @click="toggleApplications" label="Toggle Applications" />
+<TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Button @click="toggleApplications" label="Toggle Applications" />
+        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {}
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        toggleApplications() {
+            let _expandedKeys = { ...this.expandedKeys };
+
+            if (_expandedKeys['0']) delete _expandedKeys['0'];
+            else _expandedKeys['0'] = true;
+
+            this.expandedKeys = _expandedKeys;
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Button @click="toggleApplications" label="Toggle Applications" />
+        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+const expandedKeys = ref({});
+const toggleApplications = () => {
+    let _expandedKeys = { ...expandedKeys.value };
+
+    if (_expandedKeys['0']) delete _expandedKeys['0'];
+    else _expandedKeys['0'] = true;
+
+    expandedKeys.value = _expandedKeys;
+}
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        },
+        toggleApplications() {
+            let _expandedKeys = { ...this.expandedKeys };
+
+            if (_expandedKeys['0']) delete _expandedKeys['0'];
+            else _expandedKeys['0'] = true;
+
+            this.expandedKeys = _expandedKeys;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/DynamicColumnsDoc.vue b/apps/labs/doc/treetable/DynamicColumnsDoc.vue
new file mode 100644
index 000000000..c05eb61d6
--- /dev/null
+++ b/apps/labs/doc/treetable/DynamicColumnsDoc.vue
@@ -0,0 +1,130 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Columns can be created programmatically.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            columns: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
+    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            columns: null
+        }
+    },
+    created() {
+        this.columns = [
+            { field: 'name', header: 'Name', expander: true },
+            { field: 'size', header: 'Size' },
+            { field: 'type', header: 'Type' }
+        ];
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+const columns = ref([
+    { field: 'name', header: 'Name', expander: true },
+    { field: 'size', header: 'Size' },
+    { field: 'type', header: 'Type' }
+]);
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    created() {
+        this.columns = [
+            { field: 'name', header: 'Name', expander: true },
+            { field: 'size', header: 'Size' },
+            { field: 'type', header: 'Type' }
+        ];
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/FilterDoc.vue b/apps/labs/doc/treetable/FilterDoc.vue
new file mode 100644
index 000000000..74c5c1e7e
--- /dev/null
+++ b/apps/labs/doc/treetable/FilterDoc.vue
@@ -0,0 +1,229 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Filtering is enabled by adding the <i>filter</i> property to a Column. The <i>filterMode</i> specifies the filtering strategy, in <i>lenient</i> mode when the query matches a node, children of the node are not searched further as all
+            descendants of the node are included. On the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants. A general filled called <i>globalFilter</i> is also provided to search all columns that
+            support filtering.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-center mb-6">
+                <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
+            </div>
+            <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
+                <template #header>
+                    <div class="flex justify-end">
+                        <IconField>
+                            <InputIcon class="pi pi-search" />
+                            <InputText v-model="filters['global']" placeholder="Global Search" />
+                        </IconField>
+                    </div>
+                </template>
+                <Column field="name" header="Name" expander style="min-width: 12rem">
+                    <template #filter>
+                        <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
+                    </template>
+                </Column>
+                <Column field="size" header="Size" style="min-width: 12rem">
+                    <template #filter>
+                        <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
+                    </template>
+                </Column>
+                <Column field="type" header="Type" style="min-width: 12rem">
+                    <template #filter>
+                        <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
+                    </template>
+                </Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            filters: {},
+            filterMode: { label: 'Lenient', value: 'lenient' },
+            filterOptions: [
+                { label: 'Lenient', value: 'lenient' },
+                { label: 'Strict', value: 'strict' }
+            ],
+            code: {
+                basic: `
+<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
+<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
+    <template #header>
+        <div class="flex justify-end">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText v-model="filters['global']" placeholder="Global Search" />
+            </IconField>
+        </div>
+    </template>
+    <Column field="name" header="Name" expander style="min-width: 12rem">
+        <template #filter>
+            <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
+        </template>
+    </Column>
+    <Column field="size" header="Size" style="min-width: 12rem">
+        <template #filter>
+            <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
+        </template>
+    </Column>
+    <Column field="type" header="Type" style="min-width: 12rem">
+        <template #filter>
+            <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
+        </template>
+    </Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex justify-center mb-6">
+            <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
+        </div>
+        <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
+            <template #header>
+                <div class="flex justify-end">
+                    <IconField>
+                        <InputIcon class="pi pi-search" />
+                        <InputText v-model="filters['global']" placeholder="Global Search" />
+                    </IconField>
+                </div>
+            </template>
+            <Column field="name" header="Name" expander style="min-width: 12rem">
+                <template #filter>
+                    <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
+                </template>
+            </Column>
+            <Column field="size" header="Size" style="min-width: 12rem">
+                <template #filter>
+                    <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
+                </template>
+            </Column>
+            <Column field="type" header="Type" style="min-width: 12rem">
+                <template #filter>
+                    <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
+                </template>
+            </Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            filters: {},
+            filterMode: { label: 'Lenient', value: 'lenient' },
+            filterOptions: [
+                { label: 'Lenient', value: 'lenient' },
+                { label: 'Strict', value: 'strict' }
+            ]
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex justify-center mb-6">
+            <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
+        </div>
+        <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
+            <template #header>
+                <div class="flex justify-end">
+                    <IconField>
+                        <InputIcon class="pi pi-search" />
+                        <InputText v-model="filters['global']" placeholder="Global Search" />
+                    </IconField>
+                </div>
+            </template>
+            <Column field="name" header="Name" expander style="min-width: 12rem">
+                <template #filter>
+                    <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
+                </template>
+            </Column>
+            <Column field="size" header="Size" style="min-width: 12rem">
+                <template #filter>
+                    <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
+                </template>
+            </Column>
+            <Column field="type" header="Type" style="min-width: 12rem">
+                <template #filter>
+                    <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
+                </template>
+            </Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+const filters = ref({});
+const filterMode = ref({ label: 'Lenient', value: 'lenient' });
+const filterOptions = ref([
+    { label: 'Lenient', value: 'lenient' },
+    { label: 'Strict', value: 'strict' }
+]);
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/ImportDoc.vue b/apps/labs/doc/treetable/ImportDoc.vue
new file mode 100644
index 000000000..709138a2a
--- /dev/null
+++ b/apps/labs/doc/treetable/ImportDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import TreeTable from 'primevue/treetable';
+import Column from 'primevue/column';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/LazyLoadDoc.vue b/apps/labs/doc/treetable/LazyLoadDoc.vue
new file mode 100644
index 000000000..07e044876
--- /dev/null
+++ b/apps/labs/doc/treetable/LazyLoadDoc.vue
@@ -0,0 +1,320 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime <i>paging</i>, <i>sorting</i> and <i>filtering</i> occurs. Sample below
+            imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
+        </p>
+        <p>
+            Enabling the <i>lazy</i> property and assigning the logical number of rows to <i>totalRecords</i> by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually records
+            of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
+        </p>
+        <p>In addition, only the root elements should be loaded, children can be loaded on demand using <i>nodeExpand</i> callback.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            rows: 10,
+            loading: false,
+            totalRecords: 0,
+            code: {
+                basic: `
+<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+    @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+            @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander></Column>
+            <Column field="size" header="Size"></Column>
+            <Column field="type" header="Type"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            rows: 10,
+            loading: false,
+            totalRecords: 0
+        };
+    },
+    mounted() {
+        this.loading = true;
+
+        setTimeout(() => {
+            this.loading = false;
+            this.nodes = this.loadNodes(0, this.rows);
+            this.totalRecords = 1000;
+        }, 1000);
+    },
+    methods: {
+        onExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+
+                setTimeout(() => {
+                    let lazyNode = { ...node };
+
+                    lazyNode.children = [
+                        {
+                            data: {
+                                name: lazyNode.data.name + ' - 0',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'File'
+                            }
+                        },
+                        {
+                            data: {
+                                name: lazyNode.data.name + ' - 1',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'File'
+                            }
+                        }
+                    ];
+
+                    let nodes = this.nodes.map((n) => {
+                        if (n.key === node.key) {
+                            n = lazyNode;
+                        }
+
+                        return n;
+                    });
+
+                    this.loading = false;
+                    this.nodes = nodes;
+                }, 250);
+            }
+        },
+        onPage(event) {
+            this.loading = true;
+
+            //imitate delay of a backend call
+            setTimeout(() => {
+                this.loading = false;
+                this.nodes = this.loadNodes(event.first, this.rows);
+            }, 1000);
+        },
+        loadNodes(first, rows) {
+            let nodes = [];
+
+            for (let i = 0; i < rows; i++) {
+                let node = {
+                    key: first + i,
+                    data: {
+                        name: 'Item ' + (first + i),
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'Type ' + (first + i)
+                    },
+                    leaf: false
+                };
+
+                nodes.push(node);
+            }
+
+            return nodes;
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div>
+        <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+            @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" :expander="true"></Column>
+            <Column field="size" header="Size"></Column>
+            <Column field="type" header="Type"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+onMounted(() => {
+    loading.value = true;
+
+    setTimeout(() => {
+        loading.value = false;
+        nodes.value = loadNodes(0, rows.value);
+        totalRecords.value = 1000;
+    }, 1000);
+});
+
+const nodes = ref();
+const rows = ref(10);
+const loading = ref(false);
+const totalRecords = ref(0);
+const onExpand = (node) => {
+    if (!node.children) {
+        loading.value = true;
+
+        setTimeout(() => {
+            let lazyNode = {...node};
+
+            lazyNode.children = [
+                {
+                    data: {
+                        name: lazyNode.data.name + ' - 0',
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'File'
+                    },
+                },
+                {
+                    data: {
+                        name: lazyNode.data.name + ' - 1',
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'File'
+                    }
+                }
+            ];
+
+            let newNodes = nodes.value.map(n => {
+                if (n.key === node.key) {
+                    n = lazyNode;
+                }
+
+                return n;
+            });
+
+            loading.value = false;
+            nodes.value = newNodes;
+        }, 250);
+    }
+};
+const onPage = (event) => {
+    loading.value = true;
+
+    //imitate delay of a backend call
+    setTimeout(() => {
+        loading.value = false;
+        nodes.value = loadNodes(event.first, rows.value);
+    }, 1000);
+};
+const loadNodes = (first, rows) => {
+    let nodes = [];
+
+    for(let i = 0; i < rows; i++) {
+        let node = {
+            key: (first + i),
+            data: {
+                name: 'Item ' + (first + i),
+                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                type: 'Type ' + (first + i)
+            },
+            leaf: false
+        };
+
+        nodes.push(node);
+    }
+
+    return nodes;
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            this.loading = true;
+
+            setTimeout(() => {
+                this.loading = false;
+                this.nodes = this.loadNodes(0, this.rows);
+                this.totalRecords = 1000;
+            }, 1000);
+        },
+
+        onExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+
+                setTimeout(() => {
+                    let lazyNode = { ...node };
+
+                    lazyNode.children = [
+                        {
+                            data: {
+                                name: lazyNode.data.name + ' - 0',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'File'
+                            }
+                        },
+                        {
+                            data: {
+                                name: lazyNode.data.name + ' - 1',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'File'
+                            }
+                        }
+                    ];
+
+                    let nodes = this.nodes.map((n) => {
+                        if (n.key === node.key) {
+                            n = lazyNode;
+                        }
+
+                        return n;
+                    });
+
+                    this.loading = false;
+                    this.nodes = nodes;
+                }, 250);
+            }
+        },
+        onPage(event) {
+            this.loading = true;
+
+            //imitate delay of a backend call
+            setTimeout(() => {
+                this.loading = false;
+                this.nodes = this.loadNodes(event.first, this.rows);
+            }, 1000);
+        },
+        loadNodes(first, rows) {
+            let nodes = [];
+
+            for (let i = 0; i < rows; i++) {
+                let node = {
+                    key: first + i,
+                    data: {
+                        name: 'Item ' + (first + i),
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'Type ' + (first + i)
+                    },
+                    leaf: false
+                };
+
+                nodes.push(node);
+            }
+
+            return nodes;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/SizeDoc.vue b/apps/labs/doc/treetable/SizeDoc.vue
new file mode 100644
index 000000000..f496ab229
--- /dev/null
+++ b/apps/labs/doc/treetable/SizeDoc.vue
@@ -0,0 +1,138 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-center mb-6">
+                <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+            </div>
+            <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            size: { label: 'Normal', value: 'normal' },
+            sizeOptions: [
+                { label: 'Small', value: 'small' },
+                { label: 'Normal', value: 'normal' },
+                { label: 'Large', value: 'large' }
+            ],
+            code: {
+                basic: `
+<TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            size: { label: 'Normal', value: 'normal' },
+            sizeOptions: [
+                { label: 'Small', value: 'small', class: 'sm' },
+                { label: 'Normal', value: 'normal' },
+                { label: 'Large', value: 'large', class: 'lg' }
+            ]
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+const size = ref({ label: 'Normal', value: 'normal' });
+const sizeOptions = ref([
+    { label: 'Small', value: 'small', class: 'sm' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Large', value: 'large', class: 'lg' }
+]);
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/TemplateDoc.vue b/apps/labs/doc/treetable/TemplateDoc.vue
new file mode 100644
index 000000000..484e6999c
--- /dev/null
+++ b/apps/labs/doc/treetable/TemplateDoc.vue
@@ -0,0 +1,181 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content at <i>header</i> and <i>footer</i> slots are supported via templating.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+                <template #header>
+                    <div class="text-xl font-bold">File Viewer</div>
+                </template>
+                <Column field="name" header="Name" expander style="width: 250px"></Column>
+                <Column field="size" header="Size" style="width: 150px"></Column>
+                <Column field="type" header="Type" style="width: 150px"></Column>
+                <Column style="width: 10rem">
+                    <template #body>
+                        <div class="flex flex-wrap gap-2">
+                            <Button type="button" icon="pi pi-search" rounded />
+                            <Button type="button" icon="pi pi-pencil" rounded severity="success" />
+                        </div>
+                    </template>
+                </Column>
+                <template #footer>
+                    <div class="flex justify-start">
+                        <Button icon="pi pi-refresh" label="Reload" severity="warn" />
+                    </div>
+                </template>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
+    <template #header>
+        <div class="text-xl font-bold">File Viewer</div>
+    </template>
+    <Column field="name" header="Name" expander style="width: 250px"></Column>
+    <Column field="size" header="Size" style="width: 150px"></Column>
+    <Column field="type" header="Type" style="width: 150px"></Column>
+    <Column style="width: 10rem">
+        <template #body>
+            <div class="flex flex-wrap gap-2">
+                <Button type="button" icon="pi pi-search" rounded />
+                <Button type="button" icon="pi pi-pencil" rounded severity="success" />
+            </div>
+        </template>
+    </Column>
+    <template #footer>
+        <div class="flex justify-start">
+            <Button icon="pi pi-refresh" label="Reload" severity="warn" />
+        </div>
+    </template>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <template #header>
+                <div class="text-xl font-bold">File Viewer</div>
+            </template>
+            <Column field="name" header="Name" expander style="width: 250px"></Column>
+            <Column field="size" header="Size" style="width: 150px"></Column>
+            <Column field="type" header="Type" style="width: 150px"></Column>
+            <Column style="width: 10rem">
+                <template #body>
+                    <div class="flex flex-wrap gap-2">
+                        <Button type="button" icon="pi pi-search" rounded/>
+                        <Button type="button" icon="pi pi-pencil" rounded severity="success" />
+                    </div>
+                </template>
+            </Column>
+            <template #footer>
+                <div class="flex justify-start">
+                    <Button icon="pi pi-refresh" label="Reload" severity="warn" />
+                </div>
+            </template>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <template #header>
+                <div class="text-xl font-bold">File Viewer</div>
+            </template>
+            <Column field="name" header="Name" expander style="width: 250px"></Column>
+            <Column field="size" header="Size" style="width: 150px"></Column>
+            <Column field="type" header="Type" style="width: 150px"></Column>
+            <Column style="width: 10rem">
+                <template #body>
+                    <div class="flex flex-wrap gap-2">
+                        <Button type="button" icon="pi pi-search" rounded/>
+                        <Button type="button" icon="pi pi-pencil" rounded severity="success" />
+                    </div>
+                </template>
+            </Column>
+            <template #footer>
+                <div class="flex justify-start">
+                    <Button icon="pi pi-refresh" label="Reload" severity="warn" />
+                </div>
+            </template>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/pagination/PaginationBasicDoc.vue b/apps/labs/doc/treetable/pagination/PaginationBasicDoc.vue
new file mode 100644
index 000000000..0ad73bfcb
--- /dev/null
+++ b/apps/labs/doc/treetable/pagination/PaginationBasicDoc.vue
@@ -0,0 +1,157 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    created() {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        this.nodes = files;
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const nodes = ref();
+
+let files = [];
+for (let i = 0; i < 50; i++) {
+    let node = {
+        key: i,
+        data: {
+            name: 'Item ' + i,
+            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+            type: 'Type ' + i
+        },
+        children: [
+            {
+                key: i + ' - 0',
+                data: {
+                    name: 'Item ' + i + ' - 0',
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                }
+            }
+        ]
+    };
+
+    files.push(node);
+}
+
+nodes.value = files;
+
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            let files = [];
+
+            for (let i = 0; i < 50; i++) {
+                let node = {
+                    key: i,
+                    data: {
+                        name: 'Item ' + i,
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'Type ' + i
+                    },
+                    children: [
+                        {
+                            key: i + ' - 0',
+                            data: {
+                                name: 'Item ' + i + ' - 0',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'Type ' + i
+                            }
+                        }
+                    ]
+                };
+
+                files.push(node);
+            }
+
+            this.nodes = files;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/pagination/PaginationHeadlessDoc.vue b/apps/labs/doc/treetable/pagination/PaginationHeadlessDoc.vue
new file mode 100644
index 000000000..cef671a7c
--- /dev/null
+++ b/apps/labs/doc/treetable/pagination/PaginationHeadlessDoc.vue
@@ -0,0 +1,197 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+                <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                    <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                        <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                        <div class="text-color font-medium">
+                            <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                            <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                        </div>
+                        <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                    </div>
+                </template>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+    <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+        <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+            <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+            <div class="text-color font-medium">
+                <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+            </div>
+            <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+        </div>
+    </template>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    created() {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        this.nodes = files;
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const nodes = ref();
+
+let files = [];
+for (let i = 0; i < 50; i++) {
+    let node = {
+        key: i,
+        data: {
+            name: 'Item ' + i,
+            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+            type: 'Type ' + i
+        },
+        children: [
+            {
+                key: i + ' - 0',
+                data: {
+                    name: 'Item ' + i + ' - 0',
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                }
+            }
+        ]
+    };
+
+    files.push(node);
+}
+
+nodes.value = files;
+
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            let files = [];
+
+            for (let i = 0; i < 50; i++) {
+                let node = {
+                    key: i,
+                    data: {
+                        name: 'Item ' + i,
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'Type ' + i
+                    },
+                    children: [
+                        {
+                            key: i + ' - 0',
+                            data: {
+                                name: 'Item ' + i + ' - 0',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'Type ' + i
+                            }
+                        }
+                    ]
+                };
+
+                files.push(node);
+            }
+
+            this.nodes = files;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/pagination/PaginationTemplateDoc.vue b/apps/labs/doc/treetable/pagination/PaginationTemplateDoc.vue
new file mode 100644
index 000000000..ffd68eea1
--- /dev/null
+++ b/apps/labs/doc/treetable/pagination/PaginationTemplateDoc.vue
@@ -0,0 +1,216 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Paginator UI is customized using the <i>paginatorTemplate</i> property. Each element can also be customized further with your own UI to replace the default one, refer to the
+            <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable
+                :value="nodes"
+                :paginator="true"
+                :rows="5"
+                :rowsPerPageOptions="[5, 10, 25, 50]"
+                paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                currentPageReportTemplate="{first} to {last} of {totalRecords}"
+                tableStyle="min-width: 50rem"
+            >
+                <template #paginatorstart>
+                    <Button type="button" icon="pi pi-refresh" text />
+                </template>
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+                <template #paginatorend>
+                    <Button type="button" icon="pi pi-download" text />
+                </template>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable
+    :value="nodes"
+    :paginator="true"
+    :rows="5"
+    :rowsPerPageOptions="[5, 10, 25, 50]"
+    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+    currentPageReportTemplate="{first} to {last} of {totalRecords}"
+    tableStyle="min-width: 50rem"
+>
+    <template #paginatorstart>
+        <Button type="button" icon="pi pi-refresh" text />
+    </template>
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+    <template #paginatorend>
+        <Button type="button" icon="pi pi-download" text />
+    </template>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable
+            :value="nodes"
+            :paginator="true"
+            :rows="5"
+            :rowsPerPageOptions="[5, 10, 25, 50]"
+            paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+            currentPageReportTemplate="{first} to {last} of {totalRecords}"
+            tableStyle="min-width: 50rem"
+        >
+            <template #paginatorstart>
+                <Button type="button" icon="pi pi-refresh" text />
+            </template>
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+            <template #paginatorend>
+                <Button type="button" icon="pi pi-download" text />
+            </template>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    created() {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        this.nodes = files;
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable
+            :value="nodes"
+            :paginator="true"
+            :rows="5"
+            :rowsPerPageOptions="[5, 10, 25, 50]"
+            paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+            currentPageReportTemplate="{first} to {last} of {totalRecords}"
+            tableStyle="min-width: 50rem"
+        >
+            <template #paginatorstart>
+                <Button type="button" icon="pi pi-refresh" text />
+            </template>
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+            <template #paginatorend>
+                <Button type="button" icon="pi pi-download" text />
+            </template>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const nodes = ref();
+
+let files = [];
+for (let i = 0; i < 50; i++) {
+    let node = {
+        key: i,
+        data: {
+            name: 'Item ' + i,
+            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+            type: 'Type ' + i
+        },
+        children: [
+            {
+                key: i + ' - 0',
+                data: {
+                    name: 'Item ' + i + ' - 0',
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                }
+            }
+        ]
+    };
+
+    files.push(node);
+}
+
+nodes.value = files;
+
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            let files = [];
+
+            for (let i = 0; i < 50; i++) {
+                let node = {
+                    key: i,
+                    data: {
+                        name: 'Item ' + i,
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'Type ' + i
+                    },
+                    children: [
+                        {
+                            key: i + ' - 0',
+                            data: {
+                                name: 'Item ' + i + ' - 0',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'Type ' + i
+                            }
+                        }
+                    ]
+                };
+
+                files.push(node);
+            }
+
+            this.nodes = files;
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/resize/ExpandModeDoc.vue b/apps/labs/doc/treetable/resize/ExpandModeDoc.vue
new file mode 100644
index 000000000..d60f52844
--- /dev/null
+++ b/apps/labs/doc/treetable/resize/ExpandModeDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander></Column>
+            <Column field="size" header="Size"></Column>
+            <Column field="type" header="Type"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander></Column>
+            <Column field="size" header="Size"></Column>
+            <Column field="type" header="Type"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/resize/FitModeDoc.vue b/apps/labs/doc/treetable/resize/FitModeDoc.vue
new file mode 100644
index 000000000..418fcd872
--- /dev/null
+++ b/apps/labs/doc/treetable/resize/FitModeDoc.vue
@@ -0,0 +1,120 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Columns can be resized with drag and drop when <i>resizableColumns</i> is enabled. Default resize mode is <i>fit</i>
+            that does not change the overall table width.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander></Column>
+            <Column field="size" header="Size"></Column>
+            <Column field="type" header="Type"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander></Column>
+            <Column field="size" header="Size"></Column>
+            <Column field="type" header="Type"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/scroll/FlexibleScrollDoc.vue b/apps/labs/doc/treetable/scroll/FlexibleScrollDoc.vue
new file mode 100644
index 000000000..cc9d82a96
--- /dev/null
+++ b/apps/labs/doc/treetable/scroll/FlexibleScrollDoc.vue
@@ -0,0 +1,121 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data viewport
+            adjusts itself according to the size changes.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-center">
+            <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+
+            <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
+                <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
+                    <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
+                    <Column field="size" header="Size" style="min-width: 200px"></Column>
+                    <Column field="type" header="Type" style="min-width: 200px"></Column>
+                </TreeTable>
+                <template #footer>
+                    <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
+                </template>
+            </Dialog>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            dialogVisible: false,
+            code: {
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+<Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
+    <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
+        <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
+        <Column field="size" header="Size" style="min-width: 200px"></Column>
+        <Column field="type" header="Type" style="min-width: 200px"></Column>
+    </TreeTable>
+    <template #footer>
+        <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
+    </template>
+</Dialog>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
+            <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
+                <Column field="size" header="Size" style="min-width: 200px"></Column>
+                <Column field="type" header="Type" style="min-width: 200px"></Column>
+            </TreeTable>
+            <template #footer>
+                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            dialogVisible: false
+        };
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
+            <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
+                <Column field="size" header="Size" style="min-width: 200px"></Column>
+                <Column field="type" header="Type" style="min-width: 200px"></Column>
+            </TreeTable>
+            <template #footer>
+                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+});
+
+const nodes = ref();
+const dialogVisible = ref(false);
+
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/scroll/FrozenColumnsDoc.vue b/apps/labs/doc/treetable/scroll/FrozenColumnsDoc.vue
new file mode 100644
index 000000000..1e7aa1274
--- /dev/null
+++ b/apps/labs/doc/treetable/scroll/FrozenColumnsDoc.vue
@@ -0,0 +1,129 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" scrollable scrollHeight="300px">
+                <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
+                <Column field="size" header="Size" style="min-width: 200px"></Column>
+                <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+                <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+                <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+                <Column field="size" header="Size 3" style="min-width: 200px"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" scrollable scrollHeight="300px">
+    <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
+    <Column field="size" header="Size" style="min-width: 200px"></Column>
+    <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+    <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+    <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+    <Column field="size" header="Size 3" style="min-width: 200px"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px">
+            <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
+            <Column field="size" header="Size" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px">
+            <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
+            <Column field="size" header="Size" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/scroll/HorizontalScrollDoc.vue b/apps/labs/doc/treetable/scroll/HorizontalScrollDoc.vue
new file mode 100644
index 000000000..23b710777
--- /dev/null
+++ b/apps/labs/doc/treetable/scroll/HorizontalScrollDoc.vue
@@ -0,0 +1,129 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Horizontal scrollbar is displayed when table width exceeds the parent width.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" scrollable scrollHeight="300px">
+                <Column field="name" header="Name" expander style="min-width: 250px"></Column>
+                <Column field="size" header="Size" style="min-width: 200px"></Column>
+                <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+                <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+                <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+                <Column field="size" header="Size 3" style="min-width: 200px"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" scrollable scrollHeight="300px">
+    <Column field="name" header="Name" expander style="min-width: 250px"></Column>
+    <Column field="size" header="Size" style="min-width: 200px"></Column>
+    <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+    <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+    <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+    <Column field="size" header="Size 3" style="min-width: 200px"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px">
+            <Column field="name" header="Name" expander style="min-width: 250px"></Column>
+            <Column field="size" header="Size" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px">
+            <Column field="name" header="Name" expander style="min-width: 250px"></Column>
+            <Column field="size" header="Size" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/scroll/VerticalScrollDoc.vue b/apps/labs/doc/treetable/scroll/VerticalScrollDoc.vue
new file mode 100644
index 000000000..f814eeac8
--- /dev/null
+++ b/apps/labs/doc/treetable/scroll/VerticalScrollDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/apps/labs/doc/treetable/selection/CheckboxRowSelectionDoc.vue
new file mode 100644
index 000000000..51b54eb2c
--- /dev/null
+++ b/apps/labs/doc/treetable/selection/CheckboxRowSelectionDoc.vue
@@ -0,0 +1,134 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
+        <p>
+            In checkbox selection mode, value binding should be a key-value pair where key (or the dataKey) is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="introCode" hideToggleCode importCode hideStackBlitz />
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            introCode: {
+                basic: `
+{
+    '0-0': {
+        partialChecked: false,
+        checked: true
+    }
+}
+`
+            },
+            code: {
+                basic: `
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+const selectedKey = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/apps/labs/doc/treetable/selection/MultipleRowsSelectionDoc.vue
new file mode 100644
index 000000000..f76e9876b
--- /dev/null
+++ b/apps/labs/doc/treetable/selection/MultipleRowsSelectionDoc.vue
@@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is not necessary to add to existing selections. When the optional
+            <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new node requires meta key to be present. Note that in touch enabled devices, TreeTable always ignores metaKey.
+        </p>
+        <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-center items-center mb-6 gap-2">
+                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+                <label for="input-metakey">MetaKey</label>
+            </div>
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            metaKey: true,
+            code: {
+                basic: `
+<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex justify-center items-center mb-6 gap-2">
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            metaKey: true
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex justify-center items-center mb-6 gap-2">
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+const selectedKey = ref();
+const metaKey = ref(true);
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/selection/RowSelectionEventsDoc.vue b/apps/labs/doc/treetable/selection/RowSelectionEventsDoc.vue
new file mode 100644
index 000000000..e3b131eb8
--- /dev/null
+++ b/apps/labs/doc/treetable/selection/RowSelectionEventsDoc.vue
@@ -0,0 +1,144 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TreeTable provides <i>nodeSelect</i> and <i>nodeUnselect</i> events to listen selection events.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            code: {
+                basic: `
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 });
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.data.name, life: 3000 });
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast'
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+const selectedKey = ref();
+const toast = useToast();
+const onNodeSelect = (node) => {
+    toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 });
+};
+const onNodeUnselect = (node) => {
+    toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.data.name, life: 3000 });
+};
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        },
+        onNodeSelect(node) {
+            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 });
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.data.name, life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/selection/SingleRowSelectionDoc.vue b/apps/labs/doc/treetable/selection/SingleRowSelectionDoc.vue
new file mode 100644
index 000000000..7a0f7d700
--- /dev/null
+++ b/apps/labs/doc/treetable/selection/SingleRowSelectionDoc.vue
@@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
+        <p>
+            By default, metaKey press (e.g. <i>⌘</i>) is necessary to unselect a node however this can be configured with disabling the <i>metaKeySelection</i> property. In touch enabled devices this option has no effect and behavior is same as
+            setting it to false.
+        </p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-center items-center mb-6 gap-2">
+                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+                <label for="input-metakey">MetaKey</label>
+            </div>
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            metaKey: true,
+            code: {
+                basic: `
+<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <div class="flex justify-center items-center mb-6 gap-2">
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            metaKey: true
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex justify-center items-center mb-6 gap-2">
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
+            <label for="input-metakey">MetaKey</label>
+        </div>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+const selectedKey = ref();
+const metaKey = ref(true);
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/sort/MultipleColumnsDoc.vue b/apps/labs/doc/treetable/sort/MultipleColumnsDoc.vue
new file mode 100644
index 000000000..a4d43fbb2
--- /dev/null
+++ b/apps/labs/doc/treetable/sort/MultipleColumnsDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+                <Column field="size" header="Size" sortable style="width: 33%"></Column>
+                <Column field="type" header="Type" sortable style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+    <Column field="size" header="Size" sortable style="width: 33%"></Column>
+    <Column field="type" header="Type" sortable style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/sort/RemovableSortDoc.vue b/apps/labs/doc/treetable/sort/RemovableSortDoc.vue
new file mode 100644
index 000000000..cf789134a
--- /dev/null
+++ b/apps/labs/doc/treetable/sort/RemovableSortDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>removableSort</i> is present, the third click removes the sorting from the column.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+                <Column field="size" header="Size" sortable style="width: 33%"></Column>
+                <Column field="type" header="Type" sortable style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+    <Column field="size" header="Size" sortable style="width: 33%"></Column>
+    <Column field="type" header="Type" sortable style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/treetable/sort/SingleColumnDoc.vue b/apps/labs/doc/treetable/sort/SingleColumnDoc.vue
new file mode 100644
index 000000000..df6f9353e
--- /dev/null
+++ b/apps/labs/doc/treetable/sort/SingleColumnDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sorting on a column is enabled by adding the <i>sortable</i> property.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+                <Column field="size" header="Size" sortable style="width: 33%"></Column>
+                <Column field="type" header="Type" sortable style="width: 33%"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+    <Column field="size" header="Size" sortable style="width: 33%"></Column>
+    <Column field="type" header="Type" sortable style="width: 33%"></Column>
+</TreeTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/virtualscroller/AccessibilityDoc.vue b/apps/labs/doc/virtualscroller/AccessibilityDoc.vue
new file mode 100644
index 000000000..18486ae47
--- /dev/null
+++ b/apps/labs/doc/virtualscroller/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>VirtualScroller has no specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any built-in interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/virtualscroller/BasicDoc.vue b/apps/labs/doc/virtualscroller/BasicDoc.vue
new file mode 100644
index 000000000..a144d1bfa
--- /dev/null
+++ b/apps/labs/doc/virtualscroller/BasicDoc.vue
@@ -0,0 +1,79 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            VirtualScroller requires <i>items</i> as the data to display, <i>itemSize</i> for the dimensions of an item and <i>item</i> template are required on component. In addition, an initial array is required based on the total number of items
+            to display. Size of the viewport is configured using <i>scrollWidth</i>, <i>scrollHeight</i> properties directly or with CSS <i>width</i> and <i>height</i> styles.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null,
+            code: {
+                basic: `
+<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+    </template>
+</VirtualScroller>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null
+        };
+    },
+    created() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+    }
+};
+</script>
diff --git a/apps/labs/doc/virtualscroller/DelayDoc.vue b/apps/labs/doc/virtualscroller/DelayDoc.vue
new file mode 100644
index 000000000..70921ce5d
--- /dev/null
+++ b/apps/labs/doc/virtualscroller/DelayDoc.vue
@@ -0,0 +1,145 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>delay</i> property adds a threshold to wait in milliseconds during scrolling for render optimization.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <div>
+            <span class="font-bold block mb-2">No Delay</span>
+            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">150ms</span>
+            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">500ms</span>
+            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null,
+            code: {
+                basic: `
+<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+    </template>
+</VirtualScroller>
+
+<VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+    </template>
+</VirtualScroller>
+
+<VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+    </template>
+</VirtualScroller>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <div>
+            <span class="font-bold block mb-2">No Delay</span>
+            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">150ms</span>
+            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">500ms</span>
+            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <div>
+            <span class="font-bold block mb-2">No Delay</span>
+            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">150ms</span>
+            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">500ms</span>
+            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+    }
+};
+</script>
diff --git a/apps/labs/doc/virtualscroller/GridDoc.vue b/apps/labs/doc/virtualscroller/GridDoc.vue
new file mode 100644
index 000000000..8255f56d6
--- /dev/null
+++ b/apps/labs/doc/virtualscroller/GridDoc.vue
@@ -0,0 +1,92 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Scrolling can be enabled vertically and horizontally when <i>orientation</i> is set as <i>both</i>. In this mode, <i>itemSize</i> should be an array where first value is the height of an item and second is the width.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+                    <template v-for="(el, index) of item" :key="index">
+                        <div style="width: 100px">{{ el }}</div>
+                    </template>
+                </div>
+            </template>
+        </VirtualScroller>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null,
+            code: {
+                basic: `
+<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+            <template v-for="(el, index) of item" :key="index">
+                <div style="width: 100px">{{ el }}</div>
+            </template>
+        </div>
+    </template>
+</VirtualScroller>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+                    <template v-for="(el, index) of item" :key="index">
+                        <div style="width: 100px">{{ el }}</div>
+                    </template>
+                </div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null
+        };
+    },
+    created() {
+        this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+                    <template v-for="(el, index) of item" :key="index">
+                        <div style="width: 100px">{{ el }}</div>
+                    </template>
+                </div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => `Item #${i}_${j}`));
+    }
+};
+</script>
diff --git a/apps/labs/doc/virtualscroller/HorizontalDoc.vue b/apps/labs/doc/virtualscroller/HorizontalDoc.vue
new file mode 100644
index 000000000..1d09d6eff
--- /dev/null
+++ b/apps/labs/doc/virtualscroller/HorizontalDoc.vue
@@ -0,0 +1,76 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Setting <i>orientation</i> to <i>horizontal</i> enables scrolling horizontally. In this case, the <i>itemSize</i> should refer to the width of an item.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null,
+            code: {
+                basic: `
+<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+    </template>
+</VirtualScroller>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null
+        };
+    },
+    created() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+    }
+};
+</script>
diff --git a/apps/labs/doc/virtualscroller/ImportDoc.vue b/apps/labs/doc/virtualscroller/ImportDoc.vue
new file mode 100644
index 000000000..69dfeb1ee
--- /dev/null
+++ b/apps/labs/doc/virtualscroller/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import VirtualScroller from 'primevue/virtualscroller';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/virtualscroller/LazyDoc.vue b/apps/labs/doc/virtualscroller/LazyDoc.vue
new file mode 100644
index 000000000..feb6d4815
--- /dev/null
+++ b/apps/labs/doc/virtualscroller/LazyDoc.vue
@@ -0,0 +1,151 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded on demand. To implement lazy loading, enable the <i>lazy</i>property and implement <i>onLazyLoad</i> callback to return
+            data.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            lazyItems: null,
+            lazyLoading: false,
+            loadLazyTimeout: null,
+            code: {
+                basic: `
+<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+    </template>
+</VirtualScroller>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            lazyItems: null,
+            lazyLoading: false,
+            loadLazyTimeout: null
+        };
+    },
+    mounted() {
+        this.lazyItems = Array.from({ length: 100000 });
+    },
+    methods: {
+        onLazyLoad(event) {
+            this.lazyLoading = true;
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //imitate delay of a backend call
+            this.loadLazyTimeout = setTimeout(() => {
+                const { first, last } = event;
+                const lazyItems = [...this.lazyItems];
+
+                for (let i = first; i < last; i++) {
+                    lazyItems[i] = \`Item #\${i}\`;
+                }
+
+                this.lazyItems = lazyItems;
+                this.lazyLoading = false;
+
+            }, Math.random() * 1000 + 250);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const lazyItems = ref(Array.from({ length: 10000 }));
+const lazyLoading = ref(false);
+const loadLazyTimeout = ref();
+const onLazyLoad = (event) => {
+    lazyLoading.value = true;
+
+    if (loadLazyTimeout.value) {
+        clearTimeout(loadLazyTimeout.value);
+    }
+
+    //imitate delay of a backend call
+    loadLazyTimeout.value = setTimeout(() => {
+        const { first, last } = event;
+        const _lazyItems = [...lazyItems.value];
+
+        for (let i = first; i < last; i++) {
+            _lazyItems[i] = \`Item #\${i}\`;
+        }
+
+        lazyItems.value = _lazyItems;
+        lazyLoading.value = false;
+
+    }, Math.random() * 1000 + 250);
+};
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.lazyItems = Array.from({ length: 100000 });
+    },
+    methods: {
+        onLazyLoad(event) {
+            this.lazyLoading = true;
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //imitate delay of a backend call
+            this.loadLazyTimeout = setTimeout(() => {
+                const { first, last } = event;
+                const lazyItems = [...this.lazyItems];
+
+                for (let i = first; i < last; i++) {
+                    lazyItems[i] = `Item #${i}`;
+                }
+
+                this.lazyItems = lazyItems;
+                this.lazyLoading = false;
+            }, Math.random() * 1000 + 250);
+        }
+    }
+};
+</script>
diff --git a/apps/labs/doc/virtualscroller/LoadingDoc.vue b/apps/labs/doc/virtualscroller/LoadingDoc.vue
new file mode 100644
index 000000000..f8df4d6b5
--- /dev/null
+++ b/apps/labs/doc/virtualscroller/LoadingDoc.vue
@@ -0,0 +1,138 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Busy state is enabled by adding <i>showLoader</i> property which blocks the UI with a modal by default. Alternatively, <i>loader</i> template can be used to customize items e.g. with
+            <PrimeVueNuxtLink to="/skeleton">Skeleton</PrimeVueNuxtLink>.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <div>
+            <span class="font-bold block mb-2">Modal</span>
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">Skeleton</span>
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+                <template v-slot:loader="{ options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+                        <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
+                    </div>
+                </template>
+            </VirtualScroller>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null,
+            code: {
+                basic: `
+<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+    </template>
+</VirtualScroller>
+
+<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+    <template v-slot:item="{ item, options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+    </template>
+    <template v-slot:loader="{ options }">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+            <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
+        </div>
+    </template>
+</VirtualScroller>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <div>
+            <span class="font-bold block mb-2">Modal</span>
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">Skeleton</span>
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+                <template v-slot:loader="{ options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+                        <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
+                    </div>
+                </template>
+            </VirtualScroller>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <div>
+            <span class="font-bold block mb-2">Modal</span>
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">Skeleton</span>
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+                <template v-slot:loader="{ options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+                        <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
+                    </div>
+                </template>
+            </VirtualScroller>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>
+`
+            }
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+    }
+};
+</script>
diff --git a/apps/labs/doc/vite/CSSVariablesDoc.vue b/apps/labs/doc/vite/CSSVariablesDoc.vue
new file mode 100644
index 000000000..e78b05966
--- /dev/null
+++ b/apps/labs/doc/vite/CSSVariablesDoc.vue
@@ -0,0 +1,94 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Final step is defining the default values for the CSS variables utilized by the <i>tailwindcss-primeui</i>, this can be done in a global CSS file in your Vite application e.g. <i>src/assets/base.css</i>.</p>
+        <p>With a future update of the primeui tailwind plugin, this step will be done implicitly.</p>
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+/* Primary and Surface Palettes */
+:root {
+    --p-primary-50: #ecfdf5;
+    --p-primary-100: #d1fae5;
+    --p-primary-200: #a7f3d0;
+    --p-primary-300: #6ee7b7;
+    --p-primary-400: #34d399;
+    --p-primary-500: #10b981;
+    --p-primary-600: #059669;
+    --p-primary-700: #047857;
+    --p-primary-800: #065f46;
+    --p-primary-900: #064e3b;
+    --p-primary-950: #022c22;
+    --p-surface-0: #ffffff;
+    --p-surface-50: #fafafa;
+    --p-surface-100: #f4f4f5;
+    --p-surface-200: #e4e4e7;
+    --p-surface-300: #d4d4d8;
+    --p-surface-400: #a1a1aa;
+    --p-surface-500: #71717a;
+    --p-surface-600: #52525b;
+    --p-surface-700: #3f3f46;
+    --p-surface-800: #27272a;
+    --p-surface-900: #18181b;
+    --p-surface-950: #09090b;
+    --p-content-border-radius: 6px;
+}
+
+/* Light */
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+/* 
+ * Dark Mode
+ * Defaults to system, change the selector to match the darkMode in tailwind.config.
+ * For example; 
+ * darkMode: ['selector', '[class*="app-dark"]'] 
+ * should be;
+ * :root[class="app-dark"] {
+*/
+@media (prefers-color-scheme: dark) {
+    :root {
+        --p-primary-color: var(--p-primary-400);
+        --p-primary-contrast-color: var(--p-surface-900);
+        --p-primary-hover-color: var(--p-primary-300);
+        --p-primary-active-color: var(--p-primary-200);
+        --p-content-border-color: var(--p-surface-700);
+        --p-content-hover-background: var(--p-surface-800);
+        --p-content-hover-color: var(--p-surface-0);
+        --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+        --p-highlight-color: rgba(255, 255, 255, 0.87);
+        --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+        --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
+        --p-text-color: var(--p-surface-0);
+        --p-text-hover-color: var(--p-surface-0);
+        --p-text-muted-color: var(--p-surface-400);
+        --p-text-hover-muted-color: var(--p-surface-300);
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/vite/DownloadDoc.vue b/apps/labs/doc/vite/DownloadDoc.vue
new file mode 100644
index 000000000..e92d789b0
--- /dev/null
+++ b/apps/labs/doc/vite/DownloadDoc.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue" target="_blank" rel="noopener noreferrer">npm registry</a>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+# Using npm
+npm install primevue
+
+# Using yarn
+yarn add primevue
+
+# Using pnpm
+pnpm add primevue
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/vite/ExampleDoc.vue b/apps/labs/doc/vite/ExampleDoc.vue
new file mode 100644
index 000000000..73cbe435f
--- /dev/null
+++ b/apps/labs/doc/vite/ExampleDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Visit the <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-unstyled-tailwind" target="_blank" rel="noopener noreferrer">vite-unstyled-tailwind</a> project as an example.</p>
+    </DocSectionText>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/apps/labs/doc/vite/PluginDoc.vue b/apps/labs/doc/vite/PluginDoc.vue
new file mode 100644
index 000000000..d4cb81d5a
--- /dev/null
+++ b/apps/labs/doc/vite/PluginDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configure PrimeVue plugin with theme set as <i>none</i>, this option disables the default design token based theming.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    theme: 'none'
+});
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/vite/StylesDoc.vue b/apps/labs/doc/vite/StylesDoc.vue
new file mode 100644
index 000000000..8ab832273
--- /dev/null
+++ b/apps/labs/doc/vite/StylesDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Download a release from <a href="https://github.com/primefaces/primevue-tailwind/releases" target="_blank" rel="noopener noreferrer">github</a> that matches your PrimeVue version. The minimum version requirement is v4.1.1. Once the zip is
+            downloaded, extract the contents to a folder e.g. <i>./src/assets/primevue</i> .
+        </p>
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: ` 
+- src
+  - assets
+    - primevue
+      - common.css
+      - button.css
+      - ...
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/vite/TailwindDoc.vue b/apps/labs/doc/vite/TailwindDoc.vue
new file mode 100644
index 000000000..cea200409
--- /dev/null
+++ b/apps/labs/doc/vite/TailwindDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The prerequisite steps are covered by the <a href="https://tailwindcss.com/docs/guides/vite#vue" target="_blank" rel="noopener noreferrer">Install Tailwind CSS with Vite</a> guide. If you have Vite and Tailwind configured successfully,
+            follow the next steps.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/vite/tailwind/ImportStylesDoc.vue b/apps/labs/doc/vite/tailwind/ImportStylesDoc.vue
new file mode 100644
index 000000000..b99512210
--- /dev/null
+++ b/apps/labs/doc/vite/tailwind/ImportStylesDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Instead of the <i>@tailwind</i> directive, import the styles from node_modules.</p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+
+        <p>Add PrimeVue styles between the components and utilities.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+/* Don't use @tailwind */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`
+            },
+            code2: {
+                basic: `
+/* Use @import */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "./primevue/tailwind.css";
+@import "tailwindcss/utilities";
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/vite/tailwind/PostCSSImportDoc.vue b/apps/labs/doc/vite/tailwind/PostCSSImportDoc.vue
new file mode 100644
index 000000000..9ad40011b
--- /dev/null
+++ b/apps/labs/doc/vite/tailwind/PostCSSImportDoc.vue
@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports" target="_blank" rel="noopener noreferrer">postcss-import</a> plugin manages organization of multiple CSS files at build time. Begin with downloading
+            the plugin.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+
+        <p>Add it as the first plugin at your PostCSS configuration.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+npm install -D postcss-import
+`
+            },
+            code2: {
+                basic: `
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/vite/tailwind/PrimeUIPluginDoc.vue b/apps/labs/doc/vite/tailwind/PrimeUIPluginDoc.vue
new file mode 100644
index 000000000..7c1f3a691
--- /dev/null
+++ b/apps/labs/doc/vite/tailwind/PrimeUIPluginDoc.vue
@@ -0,0 +1,34 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://github.com/primefaces/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
+            PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+
+        <p>Configure Tailwind to use the plugin.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+npm i tailwindcss-primeui
+`
+            },
+            code2: {
+                basic: `
+module.exports = {
+    // ...
+    plugins: [require('tailwindcss-primeui')]
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/error.vue b/apps/labs/error.vue
new file mode 100644
index 000000000..dabdf1edb
--- /dev/null
+++ b/apps/labs/error.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="flex min-h-screen items-center justify-center">
+        <div class="flex card flex-col items-center gap-8 sm:p-20">
+            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 text-primary">
+                <span class="font-bold text-9xl"> 4 </span>
+                <div class="flex items-center justify-center bg-primary text-primary-contrast rounded-full w-28 h-28">
+                    <i class="pi pi-prime !text-6xl"></i>
+                </div>
+                <span class="font-bold text-9xl"> 4 </span>
+            </div>
+            <div class="font-bold text-center text-4xl border-t border-surface pt-8">Page Not Found</div>
+            <NuxtLink to="/"><Button label="GO TO HOMEPAGE" /></NuxtLink>
+        </div>
+    </div>
+</template>
diff --git a/apps/labs/layouts/AppEventBus.js b/apps/labs/layouts/AppEventBus.js
new file mode 100644
index 000000000..72b901cf5
--- /dev/null
+++ b/apps/labs/layouts/AppEventBus.js
@@ -0,0 +1,3 @@
+import { EventBus } from '@primevue/core/utils';
+
+export default EventBus();
diff --git a/apps/labs/layouts/custom.vue b/apps/labs/layouts/custom.vue
new file mode 100644
index 000000000..02ece5b64
--- /dev/null
+++ b/apps/labs/layouts/custom.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <slot></slot>
+    </div>
+</template>
diff --git a/apps/labs/layouts/default.vue b/apps/labs/layouts/default.vue
new file mode 100644
index 000000000..f9d7a5469
--- /dev/null
+++ b/apps/labs/layouts/default.vue
@@ -0,0 +1,69 @@
+<template>
+    <div class="layout-wrapper" :class="containerClass">
+        <AppNews />
+        <AppTopBar @menubutton-click="onMenuButtonClick" />
+        <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
+        <div class="layout-content">
+            <app-menu :active="sidebarActive" />
+            <div class="layout-content-slot">
+                <slot></slot>
+            </div>
+        </div>
+        <AppFooter />
+        <Toast />
+        <Toast position="top-left" group="tl" />
+        <Toast position="bottom-left" group="bl" />
+        <Toast position="bottom-right" group="br" />
+    </div>
+</template>
+
+<script>
+import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';
+
+export default {
+    data() {
+        return {
+            sidebarActive: false
+        };
+    },
+    watch: {
+        $route: {
+            immediate: true,
+            handler() {
+                if (!process.client || typeof window === 'undefined') {
+                    return;
+                }
+
+                this.sidebarActive = false;
+                unblockBodyScroll('blocked-scroll');
+                this.$toast.removeAllGroups();
+            }
+        }
+    },
+    methods: {
+        onMenuButtonClick() {
+            if (this.sidebarActive) {
+                this.sidebarActive = false;
+                unblockBodyScroll('blocked-scroll');
+            } else {
+                this.sidebarActive = true;
+                blockBodyScroll('blocked-scroll');
+            }
+        },
+        onMaskClick() {
+            this.sidebarActive = false;
+            unblockBodyScroll('blocked-scroll');
+        }
+    },
+    computed: {
+        containerClass() {
+            return [
+                'layout-wrapper',
+                {
+                    'layout-news-active': this.$appState.newsActive
+                }
+            ];
+        }
+    }
+};
+</script>
diff --git a/apps/labs/middleware/route.global.js b/apps/labs/middleware/route.global.js
new file mode 100644
index 000000000..89c09ed84
--- /dev/null
+++ b/apps/labs/middleware/route.global.js
@@ -0,0 +1,9 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+    useNuxtApp().hook('page:finish', () => {
+        if (to.path !== from.path && history.state.scroll) {
+            setTimeout(() => window.scrollTo(history.state.scroll), 0);
+        } else {
+            setTimeout(() => window.scrollTo(0, 0), 0);
+        }
+    });
+});
diff --git a/apps/labs/nuxt.config.js b/apps/labs/nuxt.config.js
new file mode 100644
index 000000000..55650365e
--- /dev/null
+++ b/apps/labs/nuxt.config.js
@@ -0,0 +1,86 @@
+const baseUrl = '/';
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    compatibilityDate: '2024-11-01',
+    devtools: { enabled: true },
+    modules: ['@primevue/nuxt-module'],
+    components: [
+        {
+            path: '~/components',
+            pathPrefix: false
+        }
+    ],
+    experimental: {
+        watcher: 'chokidar'
+    },
+    vite: {
+        optimizeDeps: {
+            noDiscovery: true,
+            include: []
+        },
+        esbuild: {
+            minifyIdentifiers: false,
+            minifyWhitespace: false
+        },
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    silenceDeprecations: ['legacy-js-api'] //@todo
+                }
+            }
+        }
+    },
+    runtimeConfig: {
+        GITHUB_TOKEN: ''
+    },
+    primevue: {
+        options: {
+            theme: 'none'
+        }
+    },
+    app: {
+        baseURL: baseUrl,
+        head: {
+            title: 'Tailwind CSS based Vue UI Component Library',
+            meta: [
+                { charset: 'utf-8' },
+                { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+                { name: 'description', content: 'Build your own UI library with the flexibility of Tailwind CSS and the convenience of PrimeVue components.' },
+                { name: 'robots', content: 'index,follow' },
+                { name: 'twitter:card', content: 'summary_large_image' },
+                { name: 'twitter:site', content: '@primevue' },
+                { name: 'twitter:title', content: 'Tailwind CSS based Vue UI Component Library' },
+                { name: 'twitter:description', content: 'Build your own UI library with the flexibility of Tailwind CSS and the convenience of PrimeVue components.' },
+                { property: 'og:type', content: 'website' },
+                { property: 'og:title', content: 'Tailwind CSS based Vue UI Component Library' },
+                { property: 'og:url', content: 'https://tailwind.primevue.org/' },
+                { property: 'og:description', content: 'Build your own UI library with the flexibility of Tailwind CSS and the convenience of PrimeVue components.' },
+                { property: 'og:image', content: 'https://www.primefaces.org/static/social/primevue-preview.jpg' },
+                { property: 'og:ttl', content: '604800' }
+            ],
+            link: [
+                { rel: 'icon', href: baseUrl + 'favicon.ico' },
+                { rel: 'stylesheet', as: 'font', href: 'https://rsms.me/inter/inter.css' }
+            ],
+            script: [
+                {
+                    src: baseUrl + 'scripts/prism.js',
+                    'data-manual': true
+                }
+            ],
+            htmlAttrs: {}
+        }
+    },
+    css: ['@/assets/styles/tailwind.css', '@/assets/styles/app/app.scss', '@/assets/styles/demo/flags.css', 'primeicons/primeicons.css'],
+    postcss: {
+        plugins: {
+            'postcss-import': {},
+            tailwindcss: {},
+            autoprefixer: {}
+        }
+    },
+    layouts: {
+        default: '~/layouts/default.vue'
+    }
+});
diff --git a/apps/labs/nuxt.config.ts b/apps/labs/nuxt.config.ts
deleted file mode 100644
index 8ae12e6c5..000000000
--- a/apps/labs/nuxt.config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-  compatibilityDate: '2024-11-01',
-  devtools: { enabled: true }
-})
diff --git a/apps/labs/package.json b/apps/labs/package.json
index 199fdbb7a..4914b23d1 100644
--- a/apps/labs/package.json
+++ b/apps/labs/package.json
@@ -1,16 +1,65 @@
 {
     "name": "labs",
-    "private": true,
+    "version": "4.3.1",
+    "author": "PrimeTek Informatics",
+    "description": "",
+    "homepage": "https://primevue.org/",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/primefaces/primevue.git",
+        "directory": "packages/labs"
+    },
+    "bugs": {
+        "url": "https://github.com/primefaces/primevue/issues"
+    },
+    "keywords": [
+        "primevue",
+        "vue",
+        "vue.js",
+        "vue3",
+        "ui library",
+        "component library",
+        "tailwind",
+        "unstyled",
+        "passthrough"
+    ],
     "type": "module",
     "scripts": {
-        "build": "nuxt build",
+        "build": "pnpm run build:prebuild && nuxt build",
         "dev": "nuxt dev",
         "generate": "nuxt generate",
         "preview": "nuxt preview",
-        "postinstall": "nuxt prepare"
+        "postinstall": "nuxt prepare",
+        "build:prebuild": "node ./scripts/prebuild.js",
+        "build:presetdoc": "node ./scripts/build-presetdoc.js"
+    },
+    "dependencies": {
+        "@docsearch/js": "catalog:app",
+        "@primeuix/themes": "catalog:",
+        "@primevue/core": "workspace:*",
+        "@primevue/forms": "workspace:*",
+        "@primevue/nuxt-module": "workspace:*",
+        "primeicons": "catalog:",
+        "primevue": "workspace:*",
+        "chart.js": "catalog:app",
+        "quill": "catalog:app",
+        "superstruct": "^2.0.2",
+        "valibot": "^0.42.1",
+        "yup": "1.4.0",
+        "zod": "3.23.8"
     },
     "devDependencies": {
+        "@stackblitz/sdk": "^1.8.2",
+        "autoprefixer": "^10",
+        "jsdom": "^19.0.0",
         "nuxt": "catalog:app",
+        "postcss": "^8.4.31",
+        "sass": "catalog:app",
+        "sass-loader": "catalog:app",
+        "tailwindcss": "^3",
+        "tailwindcss-primeui": "catalog:",
+        "typedoc": "0.27.9",
         "vite": "catalog:app"
     }
 }
diff --git a/apps/labs/pages/accordion/index.vue b/apps/labs/pages/accordion/index.vue
new file mode 100755
index 000000000..28a3999fd
--- /dev/null
+++ b/apps/labs/pages/accordion/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/accordion/#api" ptLink="/accordion/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/accordion/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/accordion/BasicDoc.vue';
+import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
+import Disabled from '@/doc/accordion/DisabledDoc.vue';
+import DynamicDoc from '@/doc/accordion/DynamicDoc.vue';
+import ImportDoc from '@/doc/accordion/ImportDoc.vue';
+import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
+import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: Disabled
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'accordion'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/autocomplete/index.vue b/apps/labs/pages/autocomplete/index.vue
new file mode 100755
index 000000000..6bb7a71a0
--- /dev/null
+++ b/apps/labs/pages/autocomplete/index.vue
@@ -0,0 +1,128 @@
+<template>
+    <DocComponent
+        title="Vue AutoComplete Component"
+        header="AutoComplete"
+        description="AutoComplete is an input component that provides real-time suggestions when being typed."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/autocomplete/#api"
+        ptLink="/autocomplete/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/autocomplete/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/autocomplete/BasicDoc.vue';
+import DisabledDoc from '@/doc/autocomplete/DisabledDoc.vue';
+import DropdownDoc from '@/doc/autocomplete/DropdownDoc.vue';
+import FilledDoc from '@/doc/autocomplete/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/autocomplete/FloatLabelDoc.vue';
+import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue';
+import FormsDoc from '@/doc/autocomplete/FormsDoc.vue';
+import GroupDoc from '@/doc/autocomplete/GroupDoc.vue';
+import IftaLabelDoc from '@/doc/autocomplete/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/autocomplete/ImportDoc.vue';
+import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue';
+import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue';
+import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc.vue';
+import SizesDoc from '@/doc/autocomplete/SizesDoc.vue';
+import TemplateDoc from '@/doc/autocomplete/TemplateDoc.vue';
+import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dropdown',
+                    label: 'Dropdown',
+                    component: DropdownDoc
+                },
+                {
+                    id: 'objects',
+                    label: 'Objects',
+                    component: ObjectsDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'forceselection',
+                    label: 'Force Selection',
+                    component: ForceSelectionDoc
+                },
+                {
+                    id: 'virtualscroll',
+                    label: 'Virtual Scroll',
+                    component: VirtualScrollDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'autocomplete'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/avatar/index.vue b/apps/labs/pages/avatar/index.vue
new file mode 100755
index 000000000..518291015
--- /dev/null
+++ b/apps/labs/pages/avatar/index.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/avatar/#api" ptLink="/avatar/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/avatar/AccessibilityDoc';
+import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
+import IconDoc from '@/doc/avatar/IconDoc.vue';
+import ImageDoc from '@/doc/avatar/ImageDoc.vue';
+import ImportDoc from '@/doc/avatar/ImportDoc.vue';
+import LabelDoc from '@/doc/avatar/LabelDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'label',
+                    label: 'Label',
+                    component: LabelDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                },
+                {
+                    id: 'avatargroup',
+                    label: 'AvatarGroup',
+                    component: AvatarGroupDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'avatar'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/badge/index.vue b/apps/labs/pages/badge/index.vue
new file mode 100755
index 000000000..cd87650fc
--- /dev/null
+++ b/apps/labs/pages/badge/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/badge/#api" ptLink="/badge/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/badge/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/badge/BasicDoc.vue';
+import ButtonDoc from '@/doc/badge/ButtonDoc.vue';
+import ImportDoc from '@/doc/badge/ImportDoc.vue';
+import OverlayDoc from '@/doc/badge/OverlayDoc.vue';
+import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
+import SizeDoc from '@/doc/badge/SizeDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'severity',
+                    label: 'Severity',
+                    component: SeverityDoc
+                },
+                {
+                    id: 'size',
+                    label: 'Size',
+                    component: SizeDoc
+                },
+                {
+                    id: 'overlay',
+                    label: 'Overlay',
+                    component: OverlayDoc
+                },
+                {
+                    id: 'button',
+                    label: 'Button',
+                    component: ButtonDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: ['badge', 'directives.badge']
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/blockui/index.vue b/apps/labs/pages/blockui/index.vue
new file mode 100644
index 000000000..8d53b0389
--- /dev/null
+++ b/apps/labs/pages/blockui/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/blockui/#api" ptLink="/blockui/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/blockui/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/blockui/BasicDoc.vue';
+import DocumentDoc from '@/doc/blockui/DocumentDoc.vue';
+import ImportDoc from '@/doc/blockui/ImportDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'document',
+                    label: 'Document',
+                    component: DocumentDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'blockui'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/breadcrumb/index.vue b/apps/labs/pages/breadcrumb/index.vue
new file mode 100755
index 000000000..e61febf79
--- /dev/null
+++ b/apps/labs/pages/breadcrumb/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocComponent title="Vue Breadcrumb Component" header="Breadcrumb" description="Breadcrumb provides contextual information about page hierarchy." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/breadcrumb/#api" ptLink="/breadcrumb/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/breadcrumb/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/breadcrumb/BasicDoc.vue';
+import ImportDoc from '@/doc/breadcrumb/ImportDoc.vue';
+import RouterDoc from '@/doc/breadcrumb/RouterDoc.vue';
+import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'breadcrumb'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/button/index.vue b/apps/labs/pages/button/index.vue
new file mode 100755
index 000000000..a838f8610
--- /dev/null
+++ b/apps/labs/pages/button/index.vue
@@ -0,0 +1,132 @@
+<template>
+    <DocComponent title="Vue Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/button/#api" ptLink="/button/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/button/AccessibilityDoc.vue';
+import BadgeDoc from '@/doc/button/BadgeDoc.vue';
+import BasicDoc from '@/doc/button/BasicDoc.vue';
+import ButtonGroupDoc from '@/doc/button/ButtonGroupDoc.vue';
+import DisabledDoc from '@/doc/button/DisabledDoc.vue';
+import HeadlessDoc from '@/doc/button/HeadlessDoc.vue';
+import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
+import IconsDoc from '@/doc/button/IconsDoc.vue';
+import ImportDoc from '@/doc/button/ImportDoc.vue';
+import LinkDoc from '@/doc/button/LinkDoc.vue';
+import LoadingDoc from '@/doc/button/LoadingDoc.vue';
+import OutlinedDoc from '@/doc/button/OutlinedDoc.vue';
+import RaisedDoc from '@/doc/button/RaisedDoc.vue';
+import RaisedTextDoc from '@/doc/button/RaisedTextDoc.vue';
+import RoundedDoc from '@/doc/button/RoundedDoc.vue';
+import SeverityDoc from '@/doc/button/SeverityDoc.vue';
+import SizesDoc from '@/doc/button/SizesDoc.vue';
+import TemplateDoc from '@/doc/button/TemplateDoc.vue';
+import TextDoc from '@/doc/button/TextDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'icons',
+                    label: 'Icons',
+                    component: IconsDoc
+                },
+                {
+                    id: 'loading',
+                    label: 'Loading',
+                    component: LoadingDoc
+                },
+                {
+                    id: 'link',
+                    label: 'Link',
+                    component: LinkDoc
+                },
+                {
+                    id: 'severity',
+                    label: 'Severity',
+                    component: SeverityDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'raised',
+                    label: 'Raised',
+                    component: RaisedDoc
+                },
+                {
+                    id: 'rounded',
+                    label: 'Rounded',
+                    component: RoundedDoc
+                },
+                {
+                    id: 'text',
+                    label: 'Text',
+                    component: TextDoc
+                },
+                {
+                    id: 'raisedtext',
+                    label: 'Raised Text',
+                    component: RaisedTextDoc
+                },
+                {
+                    id: 'outlined',
+                    label: 'Outlined',
+                    component: OutlinedDoc
+                },
+                {
+                    id: 'icononly',
+                    label: 'Icon Only',
+                    component: IconOnlyDoc
+                },
+                {
+                    id: 'badge',
+                    label: 'Badge',
+                    component: BadgeDoc
+                },
+                {
+                    id: 'buttongroup',
+                    label: 'Button Group',
+                    component: ButtonGroupDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'button'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/card/index.vue b/apps/labs/pages/card/index.vue
new file mode 100755
index 000000000..ac424c508
--- /dev/null
+++ b/apps/labs/pages/card/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/card/#api" ptLink="/card/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/card/AccessibilityDoc.vue';
+import AdvancedDoc from '@/doc/card/AdvancedDoc.vue';
+import BasicDoc from '@/doc/card/BasicDoc.vue';
+import ImportDoc from '@/doc/card/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'advanced',
+                    label: 'Advanced',
+                    component: AdvancedDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'card'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/carousel/index.vue b/apps/labs/pages/carousel/index.vue
new file mode 100755
index 000000000..289a85e0c
--- /dev/null
+++ b/apps/labs/pages/carousel/index.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocComponent title="Vue Carousel Component" header="Carousel" description="Carousel is a content slider featuring various customization options." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/carousel/#api" ptLink="/carousel/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/carousel/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/carousel/BasicDoc.vue';
+import CircularDoc from '@/doc/carousel/CircularDoc.vue';
+import ImportDoc from '@/doc/carousel/ImportDoc.vue';
+import ResponsiveDoc from '@/doc/carousel/ResponsiveDoc.vue';
+import VerticalDoc from '@/doc/carousel/VerticalDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'circular',
+                    label: 'Circular',
+                    component: CircularDoc
+                },
+                {
+                    id: 'responsive',
+                    label: 'Responsive',
+                    component: ResponsiveDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'carousel'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/cascadeselect/index.vue b/apps/labs/pages/cascadeselect/index.vue
new file mode 100755
index 000000000..186af8e39
--- /dev/null
+++ b/apps/labs/pages/cascadeselect/index.vue
@@ -0,0 +1,104 @@
+<template>
+    <DocComponent
+        title="Vue CascadeSelect Component"
+        header="CascadeSelect"
+        description="CascadeSelect is a form component to select a value from a nested structure of options."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/cascadeselect/#api"
+        ptLink="/cascadeselect/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue';
+import ClearIconDoc from '@/doc/cascadeselect/ClearIconDoc.vue';
+import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue';
+import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/cascadeselect/FormsDoc.vue';
+import IftaLabelDoc from '@/doc/cascadeselect/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue';
+import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue';
+import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue';
+import SizesDoc from '@/doc/cascadeselect/SizesDoc.vue';
+import TemplateDoc from '@/doc/cascadeselect/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'loadingstate',
+                    label: 'Loading State',
+                    component: LoadingStateDoc
+                },
+                {
+                    id: 'clearicon',
+                    label: 'Clear Icon',
+                    component: ClearIconDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'cascadeselect'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/checkbox/index.vue b/apps/labs/pages/checkbox/index.vue
new file mode 100755
index 000000000..3be41342f
--- /dev/null
+++ b/apps/labs/pages/checkbox/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/checkbox/#api" ptLink="/checkbox/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/checkbox/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/checkbox/BasicDoc.vue';
+import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue';
+import DynamicDoc from '@/doc/checkbox/DynamicDoc.vue';
+import FilledDoc from '@/doc/checkbox/FilledDoc.vue';
+import FormsDoc from '@/doc/checkbox/FormsDoc.vue';
+import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
+import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
+import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
+import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
+import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'indeterminate',
+                    label: 'Indeterminate',
+                    component: IndeterminateDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'checkbox'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/chip/index.vue b/apps/labs/pages/chip/index.vue
new file mode 100755
index 000000000..34bcec043
--- /dev/null
+++ b/apps/labs/pages/chip/index.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/chip/#api" ptLink="/chip/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/chip/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/chip/BasicDoc.vue';
+import IconDoc from '@/doc/chip/IconDoc.vue';
+import ImageDoc from '@/doc/chip/ImageDoc.vue';
+import ImportDoc from '@/doc/chip/ImportDoc.vue';
+import TemplateDoc from '@/doc/chip/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                },
+                {
+                    id: 'templatedoc',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'chip'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/colorpicker/index.vue b/apps/labs/pages/colorpicker/index.vue
new file mode 100755
index 000000000..baa3c3487
--- /dev/null
+++ b/apps/labs/pages/colorpicker/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocComponent title="Vue ColorPicker Component" header="ColorPicker" description="ColorPicker is an input component to select a color." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/colorpicker/#api" ptLink="/colorpicker/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/colorpicker/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/colorpicker/BasicDoc.vue';
+import DisabledDoc from '@/doc/colorpicker/DisabledDoc.vue';
+import FormatDoc from '@/doc/colorpicker/FormatDoc.vue';
+import FormsDoc from '@/doc/colorpicker/FormsDoc.vue';
+import ImportDoc from '@/doc/colorpicker/ImportDoc.vue';
+import InlineDoc from '@/doc/colorpicker/InlineDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'inline',
+                    label: 'Inline',
+                    component: InlineDoc
+                },
+                {
+                    id: 'format',
+                    label: 'Format',
+                    component: FormatDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'colorpicker'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/confirmdialog/index.vue b/apps/labs/pages/confirmdialog/index.vue
new file mode 100755
index 000000000..6c00523cc
--- /dev/null
+++ b/apps/labs/pages/confirmdialog/index.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocComponent
+        title="Vue Confirmation Dialog Component"
+        header="ConfirmDialog"
+        description="ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/confirmdialog/#api"
+        ptLink="/confirmdialog/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/confirmdialog/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue';
+import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue';
+import HeadlessDoc from '@/doc/confirmdialog/HeadlessDoc.vue';
+import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
+import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
+import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'confirmation-service',
+                    label: 'Service',
+                    component: ConfirmationServiceDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'position',
+                    label: 'Position',
+                    component: PositionDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'dialog'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/confirmpopup/index.vue b/apps/labs/pages/confirmpopup/index.vue
new file mode 100755
index 000000000..89cd06c56
--- /dev/null
+++ b/apps/labs/pages/confirmpopup/index.vue
@@ -0,0 +1,62 @@
+<template>
+    <DocComponent
+        title="Vue Confirmation Popup Component"
+        header="ConfirmPopup"
+        description="ConfirmPopup displays a confirmation overlay displayed relatively to its target."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/confirmpopup/#api"
+        ptLink="/confirmpopup/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/confirmpopup/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/confirmpopup/BasicDoc.vue';
+import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vue';
+import HeadlessDoc from '@/doc/confirmpopup/HeadlessDoc.vue';
+import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
+import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'confirmation-service',
+                    label: 'Service',
+                    component: ConfirmationServiceDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'confirmpopup'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/contextmenu/index.vue b/apps/labs/pages/contextmenu/index.vue
new file mode 100755
index 000000000..92419bd59
--- /dev/null
+++ b/apps/labs/pages/contextmenu/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <DocComponent
+        title="Vue ContextMenu Component"
+        header="ContextMenu"
+        description="ContextMenu displays an overlay menu to display actions related to an element."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/contextmenu/#api"
+        ptLink="/contextmenu/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/contextmenu/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/contextmenu/BasicDoc.vue';
+import CommandDoc from '@/doc/contextmenu/CommandDoc.vue';
+import DataTableDoc from '@/doc/contextmenu/DataTableDoc.vue';
+import DocumentDoc from '@/doc/contextmenu/DocumentDoc.vue';
+import ImportDoc from '@/doc/contextmenu/ImportDoc.vue';
+import RouterDoc from '@/doc/contextmenu/RouterDoc.vue';
+import TemplateDoc from '@/doc/contextmenu/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'document',
+                    label: 'Document',
+                    component: DocumentDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'datatable',
+                    label: 'DataTable',
+                    component: DataTableDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'contextmenu'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/customicons/index.vue b/apps/labs/pages/customicons/index.vue
new file mode 100644
index 000000000..e66e77ec8
--- /dev/null
+++ b/apps/labs/pages/customicons/index.vue
@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <Head>
+            <Title>Tailwind CSS | Vue Icon Library</Title>
+            <Meta name="description" content="Tailwind CSS based PrimeVue components can be used with any icon library using the templating features." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Custom Icons</h1>
+                    <p>PrimeVue components can be used with any icon library using the templating features.</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import FontAwesomeDoc from '@/doc/customicons/FontAwesomeDoc.vue';
+import ImageDoc from '@/doc/customicons/ImageDoc.vue';
+import MaterialDoc from '@/doc/customicons/MaterialDoc.vue';
+import SVGDoc from '@/doc/customicons/SVGDoc.vue';
+import VideoDoc from '@/doc/customicons/VideoDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'material',
+                    label: 'Material',
+                    component: MaterialDoc
+                },
+                {
+                    id: 'fontawesome',
+                    label: 'FontAwesome',
+                    component: FontAwesomeDoc
+                },
+                {
+                    id: 'svg',
+                    label: 'SVG',
+                    component: SVGDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                },
+                {
+                    id: 'video',
+                    label: 'Video Tutorial',
+                    component: VideoDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/datatable/index.vue b/apps/labs/pages/datatable/index.vue
new file mode 100755
index 000000000..b5302edd4
--- /dev/null
+++ b/apps/labs/pages/datatable/index.vue
@@ -0,0 +1,366 @@
+<template>
+    <DocComponent title="Vue DataTable Component" header="DataTable" description="DataTable displays data in tabular format." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/datatable/#api" ptLink="/datatable/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/datatable/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/datatable/BasicDoc.vue';
+import ColumnGroupDoc from '@/doc/datatable/ColumnGroupDoc.vue';
+import ColumnToggleDoc from '@/doc/datatable/ColumnToggleDoc.vue';
+import ConditionalStyleDoc from '@/doc/datatable/ConditionalStyleDoc.vue';
+import ContextMenuDoc from '@/doc/datatable/ContextMenuDoc.vue';
+import DynamicColumnsDoc from '@/doc/datatable/DynamicColumnsDoc.vue';
+import ExportDoc from '@/doc/datatable/ExportDoc.vue';
+import GridLinesDoc from '@/doc/datatable/GridLinesDoc.vue';
+import ImportDoc from '@/doc/datatable/ImportDoc.vue';
+// import LazyLoadDoc from '@/doc/datatable/LazyLoadDoc.vue';
+import ReorderDoc from '@/doc/datatable/ReorderDoc.vue';
+import RowExpansionDoc from '@/doc/datatable/RowExpansionDoc.vue';
+import SizeDoc from '@/doc/datatable/SizeDoc.vue';
+import StatefulDoc from '@/doc/datatable/StatefulDoc.vue';
+import StripedRowsDoc from '@/doc/datatable/StripedRowsDoc.vue';
+import TemplateDoc from '@/doc/datatable/TemplateDoc.vue';
+import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc.vue';
+import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc.vue';
+import CellEditDoc from '@/doc/datatable/edit/CellEditDoc.vue';
+import RowEditDoc from '@/doc/datatable/edit/RowEditDoc.vue';
+import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc.vue';
+import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc.vue';
+import PaginationBasicDoc from '@/doc/datatable/pagination/PaginationBasicDoc.vue';
+import PaginationHeadlessDoc from '@/doc/datatable/pagination/PaginationHeadlessDoc.vue';
+import PaginationTemplateDoc from '@/doc/datatable/pagination/PaginationTemplateDoc.vue';
+import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue';
+import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue';
+import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue';
+import CheckboxRowSelectionDoc from '@/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue';
+import ColumnRowSelectionDoc from '@/doc/datatable/rowselection/ColumnRowSelectionDoc.vue';
+import MultipleRowsSelectionDoc from '@/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue';
+import RadioButtonRowSelectionDoc from '@/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue';
+import RowSelectEventsDoc from '@/doc/datatable/rowselection/RowSelectEventsDoc.vue';
+import SingleRowSelectionDoc from '@/doc/datatable/rowselection/SingleRowSelectionDoc.vue';
+import CustomersDoc from '@/doc/datatable/samples/CustomersDoc.vue';
+import ProductsDoc from '@/doc/datatable/samples/ProductsDoc.vue';
+import FlexibleScrollDoc from '@/doc/datatable/scroll/FlexibleScrollDoc.vue';
+import FrozenColumnsDoc from '@/doc/datatable/scroll/FrozenColumnsDoc.vue';
+import FrozenRowsDoc from '@/doc/datatable/scroll/FrozenRowsDoc.vue';
+import HorizontalScrollDoc from '@/doc/datatable/scroll/HorizontalScrollDoc.vue';
+import VerticalScrollDoc from '@/doc/datatable/scroll/VerticalScrollDoc.vue';
+import MultipleColumnsDoc from '@/doc/datatable/sort/MultipleColumnsDoc.vue';
+import PresortDoc from '@/doc/datatable/sort/PresortDoc.vue';
+import RemovableSortDoc from '@/doc/datatable/sort/RemovableSortDoc.vue';
+import SingleColumnDoc from '@/doc/datatable/sort/SingleColumnDoc.vue';
+import LazyVirtualScrollDoc from '@/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue';
+import PreloadVirtualScrollDoc from '@/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dynamic_columns',
+                    label: 'Dynamic Columns',
+                    component: DynamicColumnsDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'size',
+                    label: 'Size',
+                    component: SizeDoc
+                },
+                {
+                    id: 'gridlines',
+                    label: 'Grid Lines',
+                    component: GridLinesDoc
+                },
+                {
+                    id: 'striped',
+                    label: 'Striped Rows',
+                    component: StripedRowsDoc
+                },
+                {
+                    id: 'pagination',
+                    label: 'Pagination',
+                    children: [
+                        {
+                            id: 'paginator_basic',
+                            label: 'Basic',
+                            component: PaginationBasicDoc
+                        },
+                        {
+                            id: 'paginator_template',
+                            label: 'Template',
+                            component: PaginationTemplateDoc
+                        },
+                        {
+                            id: 'paginator_headless',
+                            label: 'Headless',
+                            component: PaginationHeadlessDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'sort',
+                    label: 'Sort',
+                    children: [
+                        {
+                            id: 'single_sort',
+                            label: 'Single Column',
+                            component: SingleColumnDoc
+                        },
+                        {
+                            id: 'multiple_sort',
+                            label: 'Multiple Columns',
+                            component: MultipleColumnsDoc
+                        },
+                        {
+                            id: 'pre_sort',
+                            label: 'Presort',
+                            component: PresortDoc
+                        },
+                        {
+                            id: 'removable_sort',
+                            label: 'Removable',
+                            component: RemovableSortDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    children: [
+                        {
+                            id: 'basic_filter',
+                            label: 'Basic',
+                            component: BasicFilterDoc
+                        },
+                        {
+                            id: 'advanced_filter',
+                            label: 'Advanced',
+                            component: AdvancedFilterDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'row_selection',
+                    label: 'Row Selection',
+                    children: [
+                        {
+                            id: 'single_row_selection',
+                            label: 'Single',
+                            component: SingleRowSelectionDoc
+                        },
+                        {
+                            id: 'multiple_rows_selection',
+                            label: 'Multiple',
+                            component: MultipleRowsSelectionDoc
+                        },
+                        {
+                            id: 'radiobutton_row_selection',
+                            label: 'RadioButton',
+                            component: RadioButtonRowSelectionDoc
+                        },
+                        {
+                            id: 'checkbox_row_selection',
+                            label: 'Checkbox',
+                            component: CheckboxRowSelectionDoc
+                        },
+                        {
+                            id: 'column_row_selection',
+                            label: 'Column',
+                            component: ColumnRowSelectionDoc
+                        },
+                        {
+                            id: 'row_selection_events',
+                            label: 'Events',
+                            component: RowSelectEventsDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'row_expansion',
+                    label: 'Row Expansion',
+                    component: RowExpansionDoc
+                },
+                {
+                    id: 'edit',
+                    label: 'Edit',
+                    children: [
+                        {
+                            id: 'cell_edit',
+                            label: 'Cell',
+                            component: CellEditDoc
+                        },
+                        {
+                            id: 'row_edit',
+                            label: 'Row',
+                            component: RowEditDoc
+                        }
+                    ]
+                },
+                // {
+                //     id: 'lazy_load',
+                //     label: 'Lazy Load',
+                //     component: LazyLoadDoc
+                // },
+                {
+                    id: 'scroll',
+                    label: 'Scroll',
+                    children: [
+                        {
+                            id: 'vertical_scroll',
+                            label: 'Vertical',
+                            component: VerticalScrollDoc
+                        },
+                        {
+                            id: 'flex_scroll',
+                            label: 'Flexible',
+                            component: FlexibleScrollDoc
+                        },
+                        {
+                            id: 'horizontal_scroll',
+                            label: 'Horizontal',
+                            component: HorizontalScrollDoc
+                        },
+                        {
+                            id: 'frozen_rows',
+                            label: 'Frozen Rows',
+                            component: FrozenRowsDoc
+                        },
+                        {
+                            id: 'frozen_columns',
+                            label: 'Frozen Columns',
+                            component: FrozenColumnsDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'virtualscroll',
+                    label: 'Virtual Scroll',
+                    children: [
+                        {
+                            id: 'preload_virtualscroll',
+                            label: 'Preload',
+                            component: PreloadVirtualScrollDoc
+                        },
+                        {
+                            id: 'lazy_virtualscroll',
+                            label: 'Lazy',
+                            component: LazyVirtualScrollDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'column_group',
+                    label: 'Column Group',
+                    component: ColumnGroupDoc
+                },
+                {
+                    id: 'row_group',
+                    label: 'Row Group',
+                    children: [
+                        {
+                            id: 'rowgroup_subheader',
+                            label: 'Subheader',
+                            component: SubHeaderRowGroupDoc
+                        },
+                        {
+                            id: 'rowgroup_expandable',
+                            label: 'Expandable',
+                            component: ExpandableRowGroupDoc
+                        },
+                        {
+                            id: 'rowgroup_rowspan',
+                            label: 'RowSpan',
+                            component: RowSpanRowGroupDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'conditional_style',
+                    label: 'Conditional Style',
+                    component: ConditionalStyleDoc
+                },
+                {
+                    id: 'column_resize',
+                    label: 'Column Resize',
+                    children: [
+                        {
+                            id: 'resize_fitmode',
+                            label: 'Fit Mode',
+                            component: FitModeDoc
+                        },
+                        {
+                            id: 'resize_expandmode',
+                            label: 'Expand Mode',
+                            component: ExpandModeDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'reorder',
+                    label: 'Reorder',
+                    component: ReorderDoc
+                },
+                {
+                    id: 'column_toggle',
+                    label: 'Column Toggle',
+                    component: ColumnToggleDoc
+                },
+                {
+                    id: 'export',
+                    label: 'Export',
+                    component: ExportDoc
+                },
+                {
+                    id: 'contextmenu',
+                    label: 'Context Menu',
+                    component: ContextMenuDoc
+                },
+                {
+                    id: 'stateful',
+                    label: 'Stateful',
+                    component: StatefulDoc
+                },
+                {
+                    id: 'samples',
+                    label: 'Samples',
+                    children: [
+                        {
+                            id: 'customers',
+                            label: 'Customers',
+                            component: CustomersDoc
+                        },
+                        {
+                            id: 'dtproducts',
+                            label: 'Products',
+                            component: ProductsDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'datatable'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/dataview/index.vue b/apps/labs/pages/dataview/index.vue
new file mode 100755
index 000000000..b8c8f757e
--- /dev/null
+++ b/apps/labs/pages/dataview/index.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocComponent
+        title="Vue DataView Component"
+        header="DataView"
+        description="DataView displays data in grid or list layout with pagination and sorting features."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/dataview/#api"
+        ptLink="/dataview/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/dataview/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/dataview/BasicDoc.vue';
+import ImportDoc from '@/doc/dataview/ImportDoc.vue';
+import LayoutDoc from '@/doc/dataview/LayoutDoc.vue';
+import LoadingDoc from '@/doc/dataview/LoadingDoc.vue';
+import PaginationDoc from '@/doc/dataview/PaginationDoc.vue';
+import SortingDoc from '@/doc/dataview/SortingDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'pagination',
+                    label: 'Pagination',
+                    component: PaginationDoc
+                },
+                {
+                    id: 'sorting',
+                    label: 'Sorting',
+                    component: SortingDoc
+                },
+                {
+                    id: 'layout',
+                    label: 'Layout',
+                    component: LayoutDoc
+                },
+                {
+                    id: 'loading',
+                    label: 'Loading',
+                    component: LoadingDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: ['dataview']
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/datepicker/index.vue b/apps/labs/pages/datepicker/index.vue
new file mode 100755
index 000000000..55f1455d0
--- /dev/null
+++ b/apps/labs/pages/datepicker/index.vue
@@ -0,0 +1,156 @@
+<template>
+    <DocComponent title="Vue DatePicker Component" header="DatePicker" description="DatePicker is a form component to work with dates." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/datepicker/#api" ptLink="/datepicker/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/datepicker/AccessibilityDoc';
+import BasicDoc from '@/doc/datepicker/BasicDoc.vue';
+import ButtonBarDoc from '@/doc/datepicker/ButtonBarDoc.vue';
+import DateTemplateDoc from '@/doc/datepicker/DateTemplateDoc.vue';
+import DisabledDoc from '@/doc/datepicker/DisabledDoc.vue';
+import FilledDoc from '@/doc/datepicker/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/datepicker/FloatLabelDoc.vue';
+import FormatDoc from '@/doc/datepicker/FormatDoc.vue';
+import FormsDoc from '@/doc/datepicker/FormsDoc.vue';
+import IconDoc from '@/doc/datepicker/IconDoc.vue';
+import IftaLabelDoc from '@/doc/datepicker/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/datepicker/ImportDoc.vue';
+import InlineDoc from '@/doc/datepicker/InlineDoc.vue';
+import InvalidDoc from '@/doc/datepicker/InvalidDoc.vue';
+import LocaleDoc from '@/doc/datepicker/LocaleDoc.vue';
+import MinMaxDoc from '@/doc/datepicker/MinMaxDoc.vue';
+import MonthPickerDoc from '@/doc/datepicker/MonthPickerDoc.vue';
+import MultipleDoc from '@/doc/datepicker/MultipleDoc.vue';
+import MultipleMonthsDoc from '@/doc/datepicker/MultipleMonthsDoc.vue';
+import RangeDoc from '@/doc/datepicker/RangeDoc.vue';
+import SizesDoc from '@/doc/datepicker/SizesDoc.vue';
+import TimeDoc from '@/doc/datepicker/TimeDoc.vue';
+import YearPickerDoc from '@/doc/datepicker/YearPickerDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'format',
+                    label: 'Format',
+                    component: FormatDoc
+                },
+                {
+                    id: 'locale',
+                    label: 'Locale',
+                    component: LocaleDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'minmax',
+                    label: 'Min / Max',
+                    component: MinMaxDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'range',
+                    label: 'Range',
+                    component: RangeDoc
+                },
+                {
+                    id: 'button',
+                    label: 'Button Bar',
+                    component: ButtonBarDoc
+                },
+                {
+                    id: 'time',
+                    label: 'Time',
+                    component: TimeDoc
+                },
+                {
+                    id: 'monthpicker',
+                    label: 'Month Picker',
+                    component: MonthPickerDoc
+                },
+                {
+                    id: 'yearpicker',
+                    label: 'Year Picker',
+                    component: YearPickerDoc
+                },
+                {
+                    id: 'multiplemonths',
+                    label: 'Multiple Months',
+                    component: MultipleMonthsDoc
+                },
+                {
+                    id: 'datetemplate',
+                    label: 'Date Template',
+                    component: DateTemplateDoc
+                },
+                {
+                    id: 'inline',
+                    label: 'Inline',
+                    component: InlineDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'datepicker'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/deferredcontent/index.vue b/apps/labs/pages/deferredcontent/index.vue
new file mode 100644
index 000000000..33738c036
--- /dev/null
+++ b/apps/labs/pages/deferredcontent/index.vue
@@ -0,0 +1,50 @@
+<template>
+    <DocComponent
+        title="Vue Deferred Content Component"
+        header="DeferredContent"
+        description="DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/deferredcontent/#api"
+        ptLink="/deferredcontent/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/deferredcontent/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/deferredcontent/BasicDoc.vue';
+import DataTableDoc from '@/doc/deferredcontent/DataTableDoc.vue';
+import ImportDoc from '@/doc/deferredcontent/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'datatable',
+                    label: 'DataTable',
+                    component: DataTableDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'deferred'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/dialog/index.vue b/apps/labs/pages/dialog/index.vue
new file mode 100755
index 000000000..96c3e46a5
--- /dev/null
+++ b/apps/labs/pages/dialog/index.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/dialog/#api" ptLink="/dialog/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/dialog/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/dialog/BasicDoc.vue';
+import HeadlessDoc from '@/doc/dialog/HeadlessDoc.vue';
+import ImportDoc from '@/doc/dialog/ImportDoc.vue';
+import LongContentDoc from '@/doc/dialog/LongContentDoc.vue';
+import MaximizableDoc from '@/doc/dialog/MaximizableDoc.vue';
+import PositionDoc from '@/doc/dialog/PositionDoc.vue';
+import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc.vue';
+import TemplateDoc from '@/doc/dialog/TemplateDoc.vue';
+import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'position',
+                    label: 'Position',
+                    component: PositionDoc
+                },
+                {
+                    id: 'maximizable',
+                    label: 'Maximizable',
+                    component: MaximizableDoc
+                },
+                {
+                    id: 'longcontent',
+                    label: 'Long Content',
+                    component: LongContentDoc
+                },
+                {
+                    id: 'modal',
+                    label: 'Without Modal',
+                    component: WithoutModalDoc
+                },
+                {
+                    id: 'responsive',
+                    label: 'Responsive',
+                    component: ResponsiveDoc
+                },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'dialog'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/divider/index.vue b/apps/labs/pages/divider/index.vue
new file mode 100755
index 000000000..703439596
--- /dev/null
+++ b/apps/labs/pages/divider/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/divider/#api" ptLink="/divider/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/divider/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/divider/BasicDoc.vue';
+import ContentDoc from '@/doc/divider/ContentDoc.vue';
+import ImportDoc from '@/doc/divider/ImportDoc.vue';
+import LoginDoc from '@/doc/divider/LoginDoc.vue';
+import TypeDoc from '@/doc/divider/TypeDoc.vue';
+import VerticalDoc from '@/doc/divider/VerticalDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'type',
+                    label: 'Type',
+                    component: TypeDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'content',
+                    label: 'Content',
+                    component: ContentDoc
+                },
+                {
+                    id: 'login',
+                    label: 'Login',
+                    component: LoginDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'divider'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/dock/index.vue b/apps/labs/pages/dock/index.vue
new file mode 100755
index 000000000..3d8afbcd5
--- /dev/null
+++ b/apps/labs/pages/dock/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocComponent title="Vue Dock Component" header="Dock" description="Dock is a navigation component consisting of menuitems." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/dock/#api" ptLink="/dock/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/dock/AccessibilityDoc.vue';
+import AdvancedDoc from '@/doc/dock/AdvancedDoc.vue';
+import BasicDoc from '@/doc/dock/BasicDoc.vue';
+import ImportDoc from '@/doc/dock/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'advance',
+                    label: 'Advanced',
+                    component: AdvancedDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'dock'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/drawer/index.vue b/apps/labs/pages/drawer/index.vue
new file mode 100755
index 000000000..c99cb2701
--- /dev/null
+++ b/apps/labs/pages/drawer/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocComponent title="Vue Drawer Component" header="Drawer" description="Drawer is a container component displayed as an overlay." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/drawer/#api" ptLink="/drawer/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/drawer/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/drawer/BasicDoc.vue';
+import FullScreenDoc from '@/doc/drawer/FullScreenDoc.vue';
+import HeadlessDoc from '@/doc/drawer/HeadlessDoc.vue';
+import ImportDoc from '@/doc/drawer/ImportDoc.vue';
+import PositionDoc from '@/doc/drawer/PositionDoc.vue';
+import SizeDoc from '@/doc/drawer/SizeDoc.vue';
+import TemplateDoc from '@/doc/drawer/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'position',
+                    label: 'Position',
+                    component: PositionDoc
+                },
+                {
+                    id: 'size',
+                    label: 'Size',
+                    component: SizeDoc
+                },
+                {
+                    id: 'fullscreen',
+                    label: 'Full Screen',
+                    component: FullScreenDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'drawer'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/dynamicdialog/index.vue b/apps/labs/pages/dynamicdialog/index.vue
new file mode 100755
index 000000000..65ac8f206
--- /dev/null
+++ b/apps/labs/pages/dynamicdialog/index.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocComponent
+        title="Vue Dynamic Dialog Component"
+        header="Dynamic Dialog"
+        description="Dialogs can be created dynamically with any component as the content using a DialogService."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/dynamicdialog/#api"
+        ptLink="/dynamicdialog/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/dynamicdialog/AccessibilityDoc.vue';
+import CloseDialogDoc from '@/doc/dynamicdialog/CloseDialogDoc.vue';
+import CustomizationDoc from '@/doc/dynamicdialog/CustomizationDoc.vue';
+import DialogServiceDoc from '@/doc/dynamicdialog/DialogServiceDoc.vue';
+import EventsDoc from '@/doc/dynamicdialog/EventsDoc.vue';
+import ExampleDoc from '@/doc/dynamicdialog/ExampleDoc.vue';
+import ImportDoc from '@/doc/dynamicdialog/ImportDoc.vue';
+import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc.vue';
+import PassingDataDoc from '@/doc/dynamicdialog/PassingDataDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'dialogservice',
+                    label: 'Dialog Service',
+                    component: DialogServiceDoc
+                },
+                {
+                    id: 'open',
+                    label: 'Open',
+                    component: OpenDialogDoc
+                },
+                {
+                    id: 'customization',
+                    label: 'Customization',
+                    component: CustomizationDoc
+                },
+                {
+                    id: 'close',
+                    label: 'Close',
+                    component: CloseDialogDoc
+                },
+                {
+                    id: 'passingdata',
+                    label: 'Passing Data',
+                    component: PassingDataDoc
+                },
+                {
+                    id: 'events',
+                    label: 'Events',
+                    component: EventsDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'dialog'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/fieldset/index.vue b/apps/labs/pages/fieldset/index.vue
new file mode 100755
index 000000000..174cc4811
--- /dev/null
+++ b/apps/labs/pages/fieldset/index.vue
@@ -0,0 +1,48 @@
+<template>
+    <DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/fieldset/#api" ptLink="/fieldset/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/fieldset/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/fieldset/BasicDoc.vue';
+import ImportDoc from '@/doc/fieldset/ImportDoc.vue';
+import TemplateDoc from '@/doc/fieldset/TemplateDoc.vue';
+import ToggleableDoc from '@/doc/fieldset/ToggleableDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'toggleable',
+                    label: 'Toggleable',
+                    component: ToggleableDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'fieldset'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/fileupload/index.vue b/apps/labs/pages/fileupload/index.vue
new file mode 100644
index 000000000..2bc261bd0
--- /dev/null
+++ b/apps/labs/pages/fileupload/index.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocComponent
+        title="Vue File Upload Component"
+        header="File Upload"
+        description="FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/fileupload/#api"
+        ptLink="/fileupload/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/fileupload/AccessibilityDoc.vue';
+import AdvancedDoc from '@/doc/fileupload/AdvancedDoc.vue';
+import AutoDoc from '@/doc/fileupload/AutoDoc.vue';
+import BasicDoc from '@/doc/fileupload/BasicDoc.vue';
+import CustomUploadDoc from '@/doc/fileupload/CustomUploadDoc.vue';
+import ImportDoc from '@/doc/fileupload/ImportDoc.vue';
+import TemplateDoc from '@/doc/fileupload/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'auto',
+                    label: 'Auto',
+                    component: AutoDoc
+                },
+                {
+                    id: 'advanced',
+                    label: 'Advanced',
+                    component: AdvancedDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'custom-upload',
+                    label: 'Custom Upload',
+                    component: CustomUploadDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'fileupload'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/floatlabel/index.vue b/apps/labs/pages/floatlabel/index.vue
new file mode 100644
index 000000000..77a0fd27b
--- /dev/null
+++ b/apps/labs/pages/floatlabel/index.vue
@@ -0,0 +1,48 @@
+<template>
+    <DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/floatlabel/#api" ptLink="/floatlabel/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/floatlabel/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/floatlabel/BasicDoc.vue';
+import ImportDoc from '@/doc/floatlabel/ImportDoc.vue';
+import InvalidDoc from '@/doc/floatlabel/InvalidDoc.vue';
+import VariantsDoc from '@/doc/floatlabel/VariantsDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'variants',
+                    label: 'Variants',
+                    component: VariantsDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'floatlabel'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/fluid/index.vue b/apps/labs/pages/fluid/index.vue
new file mode 100644
index 000000000..0db53435d
--- /dev/null
+++ b/apps/labs/pages/fluid/index.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocComponent
+        title="Vue Fluid Component"
+        header="Fluid"
+        description="Fluid is a layout component to make descendant components span full width of their container."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/fluid/#api"
+        ptLink="/fluid/#pt"
+    />
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/fluid/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/fluid/BasicDoc.vue';
+import ImportDoc from '@/doc/fluid/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'fluid'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/galleria/index.vue b/apps/labs/pages/galleria/index.vue
new file mode 100755
index 000000000..292bc280d
--- /dev/null
+++ b/apps/labs/pages/galleria/index.vue
@@ -0,0 +1,159 @@
+<template>
+    <DocComponent title="Vue Gallery Component" header="Gallery" description="Galleria is a content gallery component." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/galleria/#api" ptLink="/galleria/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/galleria/AccessibilityDoc.vue';
+import AdvancedDoc from '@/doc/galleria/AdvancedDoc.vue';
+import AutoPlayDoc from '@/doc/galleria/AutoPlayDoc.vue';
+import BasicDoc from '@/doc/galleria/BasicDoc.vue';
+import CaptionDoc from '@/doc/galleria/CaptionDoc.vue';
+import ControlledDoc from '@/doc/galleria/ControlledDoc.vue';
+import ImportDoc from '@/doc/galleria/ImportDoc.vue';
+import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc.vue';
+import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc.vue';
+import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc.vue';
+import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc.vue';
+import WithoutThumbnailsDoc from '@/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue';
+import ClickEventDoc from '@/doc/galleria/indicator/ClickEventDoc.vue';
+import HoverEventDoc from '@/doc/galleria/indicator/HoverEventDoc.vue';
+import PositionDoc from '@/doc/galleria/indicator/PositionDoc.vue';
+import TemplateDoc from '@/doc/galleria/indicator/TemplateDoc.vue';
+import HoverDoc from '@/doc/galleria/navigator/HoverDoc.vue';
+import IndicatorsDoc from '@/doc/galleria/navigator/IndicatorsDoc.vue';
+import ItemThumbnailsDoc from '@/doc/galleria/navigator/ItemThumbnailsDoc.vue';
+import ItemWithoutThumbnailsDoc from '@/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'indicator',
+                    label: 'Indicator',
+                    description: 'Indicators allow quick navigation between the items.',
+                    children: [
+                        {
+                            id: 'indicatorbasic',
+                            label: 'Click Event',
+                            component: ClickEventDoc
+                        },
+                        {
+                            id: 'indicatorhoverevent',
+                            label: 'Hover Event',
+                            component: HoverEventDoc
+                        },
+                        {
+                            id: 'indicatorposition',
+                            label: 'Position',
+                            component: PositionDoc
+                        },
+                        {
+                            id: 'indicatortemplate',
+                            label: 'Template',
+                            component: TemplateDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'thumbnail',
+                    label: 'Thumbnail',
+                    component: ThumbnailDoc
+                },
+                {
+                    id: 'responsive',
+                    label: 'Responsive',
+                    component: ResponsiveDoc
+                },
+                {
+                    id: 'fullscreen',
+                    label: 'Full Screen',
+                    description: 'In fullscreen mode content covers the whole page over a modal layer.',
+                    children: [
+                        {
+                            id: 'fullscreenwiththumbnail',
+                            label: 'With Thumbnails',
+                            component: WithThumbnailsDoc
+                        },
+                        {
+                            id: 'fullscreenwithoutthumnails',
+                            label: 'Without Thumbnails',
+                            component: WithoutThumbnailsDoc
+                        },
+                        {
+                            id: 'fullscreencustom',
+                            label: 'Custom Content',
+                            component: CustomContentDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'navigator',
+                    label: 'Navigator',
+                    description: 'Navigators are used to move back and forth between the images.',
+                    children: [
+                        {
+                            id: 'itemthumbnails',
+                            label: 'With Thumbnails',
+                            component: ItemThumbnailsDoc
+                        },
+                        {
+                            id: 'itemwithouthumbnails',
+                            label: 'Without Thumbnails',
+                            component: ItemWithoutThumbnailsDoc
+                        },
+                        {
+                            id: 'itemhover',
+                            label: 'Display on Hover',
+                            component: HoverDoc
+                        },
+                        {
+                            id: 'indicators',
+                            label: 'With Indicators',
+                            component: IndicatorsDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'autoplay',
+                    label: 'AutoPlay',
+                    component: AutoPlayDoc
+                },
+                {
+                    id: 'caption',
+                    label: 'Caption',
+                    component: CaptionDoc
+                },
+                {
+                    id: 'advanced',
+                    label: 'Advanced',
+                    component: AdvancedDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'galleria'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/iconfield/index.vue b/apps/labs/pages/iconfield/index.vue
new file mode 100644
index 000000000..1e1ea5723
--- /dev/null
+++ b/apps/labs/pages/iconfield/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocComponent title="Vue IconField" header="IconField" description="IconField wraps an input and an icon." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/iconfield/#api" ptLink="/iconfield/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/iconfield/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/iconfield/BasicDoc.vue';
+import FloatLabelDoc from '@/doc/iconfield/FloatLabelDoc.vue';
+import IftaLabelDoc from '@/doc/iconfield/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/iconfield/ImportDoc.vue';
+import SizesDoc from '@/doc/iconfield/SizesDoc.vue';
+import TemplateDoc from '@/doc/iconfield/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'iconfield'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/icons/index.vue b/apps/labs/pages/icons/index.vue
new file mode 100755
index 000000000..e9750a0f2
--- /dev/null
+++ b/apps/labs/pages/icons/index.vue
@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <Head>
+            <Title>Vue Icon Library - PrimeVue</Title>
+            <Meta name="description" content="PrimeIcons is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Icons</h1>
+                    <p>
+                        <a href="https://github.com/primefaces/primeicons"> PrimeIcons </a>
+                        is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating.
+                    </p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import BasicDoc from '@/doc/icons/BasicDoc.vue';
+import ColorDoc from '@/doc/icons/ColorDoc.vue';
+import ConstantsDoc from '@/doc/icons/ConstantsDoc.vue';
+import DownloadDoc from '@/doc/icons/DownloadDoc.vue';
+import FigmaDoc from '@/doc/icons/FigmaDoc.vue';
+import ImportDoc from '@/doc/icons/ImportDoc.vue';
+import ListDoc from '@/doc/icons/ListDoc.vue';
+import SizeDoc from '@/doc/icons/SizeDoc.vue';
+import SpinDoc from '@/doc/icons/SpinDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'download',
+                    label: 'Download',
+                    component: DownloadDoc
+                },
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'figma',
+                    label: 'Figma',
+                    component: FigmaDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'size',
+                    label: 'Size',
+                    component: SizeDoc
+                },
+                {
+                    id: 'color',
+                    label: 'Color',
+                    component: ColorDoc
+                },
+                {
+                    id: 'spin',
+                    label: 'Spin',
+                    component: SpinDoc
+                },
+                {
+                    id: 'constants',
+                    label: 'Constants',
+                    component: ConstantsDoc
+                },
+                {
+                    id: 'list',
+                    label: 'List',
+                    component: ListDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/iftalabel/index.vue b/apps/labs/pages/iftalabel/index.vue
new file mode 100644
index 000000000..d1998c157
--- /dev/null
+++ b/apps/labs/pages/iftalabel/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocComponent title="Vue Ifta Label" header="IftaLabel" description="IftaLabel is used to create infield top aligned labels" :componentDocs="docs" :presetDoc="presetDoc" apiLink="/iftalabel/#api" ptLink="/iftalabel/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/iftalabel/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/iftalabel/BasicDoc.vue';
+import ImportDoc from '@/doc/iftalabel/ImportDoc.vue';
+import InvalidDoc from '@/doc/iftalabel/InvalidDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'iftalabel'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/image/index.vue b/apps/labs/pages/image/index.vue
new file mode 100755
index 000000000..3f3218779
--- /dev/null
+++ b/apps/labs/pages/image/index.vue
@@ -0,0 +1,48 @@
+<template>
+    <DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/image/#api" ptLink="/image/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/image/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/image/BasicDoc.vue';
+import ImportDoc from '@/doc/image/ImportDoc.vue';
+import PreviewDoc from '@/doc/image/PreviewDoc.vue';
+import TemplateDoc from '@/doc/image/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'preview',
+                    label: 'Preview',
+                    component: PreviewDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'image'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/imagecompare/index.vue b/apps/labs/pages/imagecompare/index.vue
new file mode 100644
index 000000000..52070aa38
--- /dev/null
+++ b/apps/labs/pages/imagecompare/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocComponent title="Vue ImageCompare Component" header="ImageCompare" description="Compare two images side by side with a slider." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/imagecompare/#api" ptLink="/imagecompare/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/imagecompare/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/imagecompare/BasicDoc.vue';
+import ImportDoc from '@/doc/imagecompare/ImportDoc.vue';
+import ResponsiveDoc from '@/doc/imagecompare/ResponsiveDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'responsive',
+                    label: 'Responsive',
+                    component: ResponsiveDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'imagecompare'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/index.vue b/apps/labs/pages/index.vue
new file mode 100644
index 000000000..ce23326b0
--- /dev/null
+++ b/apps/labs/pages/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <div :class="landingClass">
+        <AppNews />
+        <AppTopBar :showMenuButton="false" />
+        <HeroSection />
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+    layout: 'custom'
+});
+</script>
+
+<script>
+import HeroSection from '/components/landing/HeroSection.vue';
+
+export default {
+    layout: 'custom',
+    props: {
+        theme: {
+            type: String,
+            default: null
+        }
+    },
+    mounted() {
+        let afId = this.$route.query['af_id'];
+
+        if (afId) {
+            let today = new Date();
+            let expire = new Date();
+
+            expire.setTime(today.getTime() + 3600000 * 24 * 7);
+            document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
+        }
+    },
+    computed: {
+        landingClass() {
+            return ['landing bg-surface-0 dark:bg-surface-900', { 'layout-news-active': this.$appState?.newsActive, 'layout-ripple-disabled': this.$primevue.config.ripple === false }];
+        }
+    },
+    components: {
+        HeroSection
+    }
+};
+</script>
diff --git a/apps/labs/pages/inplace/index.vue b/apps/labs/pages/inplace/index.vue
new file mode 100644
index 000000000..40b5ffe87
--- /dev/null
+++ b/apps/labs/pages/inplace/index.vue
@@ -0,0 +1,62 @@
+<template>
+    <DocComponent
+        title="Vue Inplace"
+        header="Inplace"
+        description="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/inplace/#api"
+        ptLink="/inplace/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inplace/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inplace/BasicDoc.vue';
+import ImageDoc from '@/doc/inplace/ImageDoc.vue';
+import ImportDoc from '@/doc/inplace/ImportDoc.vue';
+import InputDoc from '@/doc/inplace/InputDoc.vue';
+import LazyDoc from '@/doc/inplace/LazyDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'input',
+                    label: 'Input',
+                    component: InputDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                },
+                {
+                    id: 'lazy',
+                    label: 'Lazy',
+                    component: LazyDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'inplace'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/inputgroup/index.vue b/apps/labs/pages/inputgroup/index.vue
new file mode 100755
index 000000000..e33c5ca41
--- /dev/null
+++ b/apps/labs/pages/inputgroup/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <DocComponent
+        title="Vue InputGroup Component"
+        header="InputGroup"
+        description="Text, icon, buttons and other content can be grouped next to an input."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/inputgroup/#api"
+        ptLink="/inputgroup/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inputgroup/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inputgroup/BasicDoc.vue';
+import ButtonDoc from '@/doc/inputgroup/ButtonDoc.vue';
+import CheckboxDoc from '@/doc/inputgroup/CheckboxDoc.vue';
+import FloatLabelDoc from '@/doc/inputgroup/FloatLabelDoc.vue';
+import IftaLabelDoc from '@/doc/inputgroup/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/inputgroup/ImportDoc.vue';
+import MultipleDoc from '@/doc/inputgroup/MultipleDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'button',
+                    label: 'Button',
+                    component: ButtonDoc
+                },
+                {
+                    id: 'checkbox',
+                    label: 'Checkbox & Radio',
+                    component: CheckboxDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'inputgroup'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/inputmask/index.vue b/apps/labs/pages/inputmask/index.vue
new file mode 100755
index 000000000..008dea9a3
--- /dev/null
+++ b/apps/labs/pages/inputmask/index.vue
@@ -0,0 +1,104 @@
+<template>
+    <DocComponent
+        title="Vue Mask Component"
+        header="InputMask"
+        description="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/inputmask/#api"
+        ptLink="/inputmask/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
+import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
+import FilledDoc from '@/doc/inputmask/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/inputmask/FormsDoc.vue';
+import IftaLabelDoc from '@/doc/inputmask/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
+import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
+import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
+import OptionalDoc from '@/doc/inputmask/OptionalDoc.vue';
+import SizesDoc from '@/doc/inputmask/SizesDoc.vue';
+import SlotCharDoc from '@/doc/inputmask/SlotCharDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'mask',
+                    label: 'Mask',
+                    component: MaskDoc
+                },
+                {
+                    id: 'optional',
+                    label: 'Optional',
+                    component: OptionalDoc
+                },
+                {
+                    id: 'slotchar',
+                    label: 'SlotChar',
+                    component: SlotCharDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'inputmask'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/inputnumber/index.vue b/apps/labs/pages/inputnumber/index.vue
new file mode 100755
index 000000000..ef615a918
--- /dev/null
+++ b/apps/labs/pages/inputnumber/index.vue
@@ -0,0 +1,108 @@
+<template>
+    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an extension to standard input element." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/inputnumber/#api" ptLink="/inputnumber/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inputnumber/AccessibilityDoc.vue';
+import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
+import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
+import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
+import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/inputnumber/FormsDoc.vue';
+import IftaLabelDoc from '@/doc/inputnumber/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
+import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
+import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
+import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
+import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
+import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
+import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'numerals',
+                    label: 'Numerals',
+                    component: NumeralsDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'locale',
+                    label: 'Locale',
+                    component: LocaleDoc
+                },
+                {
+                    id: 'currency',
+                    label: 'Currency',
+                    component: CurrencyDoc
+                },
+                {
+                    id: 'prefixsuffix',
+                    label: 'Prefix & Suffix',
+                    component: PrefixSuffixDoc
+                },
+                {
+                    id: 'buttons',
+                    label: 'Buttons',
+                    component: ButtonsDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'inputnumber'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/inputotp/index.vue b/apps/labs/pages/inputotp/index.vue
new file mode 100644
index 000000000..c6547efc3
--- /dev/null
+++ b/apps/labs/pages/inputotp/index.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocComponent title="Vue Otp Input Component" header="InputOtp" description="Input Otp is used to enter one time passwords." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/inputotp/#api" ptLink="/inputotp/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
+import FilledDoc from '@/doc/inputotp/FilledDoc.vue';
+import FormsDoc from '@/doc/inputotp/FormsDoc.vue';
+import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
+import IntegerOnlyDoc from '@/doc/inputotp/IntegerOnlyDoc.vue';
+import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
+import SampleDoc from '@/doc/inputotp/SampleDoc.vue';
+import SizesDoc from '@/doc/inputotp/SizesDoc.vue';
+import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'mask',
+                    label: 'Mask',
+                    component: MaskDoc
+                },
+                {
+                    id: 'integeronly',
+                    label: 'Integer Only',
+                    component: IntegerOnlyDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'sample',
+                    label: 'Sample',
+                    component: SampleDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'inputotp'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/inputtext/index.vue b/apps/labs/pages/inputtext/index.vue
new file mode 100755
index 000000000..ceaeec684
--- /dev/null
+++ b/apps/labs/pages/inputtext/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/inputtext/#api" ptLink="/inputtext/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inputtext/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
+import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
+import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/inputtext/FormsDoc.vue';
+import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
+import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
+import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
+import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'helptext',
+                    label: 'Help Text',
+                    component: HelpTextDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'inputtext'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/knob/index.vue b/apps/labs/pages/knob/index.vue
new file mode 100755
index 000000000..febff1cf4
--- /dev/null
+++ b/apps/labs/pages/knob/index.vue
@@ -0,0 +1,96 @@
+<template>
+    <DocComponent title="Vue Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/knob/#api" ptLink="/knob/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/knob/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/knob/BasicDoc.vue';
+import ColorDoc from '@/doc/knob/ColorDoc.vue';
+import DisabledDoc from '@/doc/knob/DisabledDoc.vue';
+import FormsDoc from '@/doc/knob/FormsDoc.vue';
+import ImportDoc from '@/doc/knob/ImportDoc.vue';
+import MinMaxDoc from '@/doc/knob/MinMaxDoc.vue';
+import ReactiveDoc from '@/doc/knob/ReactiveDoc.vue';
+import ReadOnlyDoc from '@/doc/knob/ReadOnlyDoc.vue';
+import SizeDoc from '@/doc/knob/SizeDoc.vue';
+import StepDoc from '@/doc/knob/StepDoc.vue';
+import StrokeDoc from '@/doc/knob/StrokeDoc.vue';
+import TemplateDoc from '@/doc/knob/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'minmax',
+                    label: 'Min/Max',
+                    component: MinMaxDoc
+                },
+                {
+                    id: 'step',
+                    label: 'Step',
+                    component: StepDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'stroke',
+                    label: 'Stroke',
+                    component: StrokeDoc
+                },
+                {
+                    id: 'size',
+                    label: 'Size',
+                    component: SizeDoc
+                },
+                {
+                    id: 'color',
+                    label: 'Color',
+                    component: ColorDoc
+                },
+                {
+                    id: 'reactive',
+                    label: 'Reactive',
+                    component: ReactiveDoc
+                },
+                {
+                    id: 'readonly',
+                    label: 'ReadOnly',
+                    component: ReadOnlyDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'knob'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/listbox/index.vue b/apps/labs/pages/listbox/index.vue
new file mode 100755
index 000000000..e9c299416
--- /dev/null
+++ b/apps/labs/pages/listbox/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <DocComponent title="Vue Listbox Component" header="Listbox" description="Listbox is used to select one or more values from a list of items." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/listbox/#api" ptLink="/listbox/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/listbox/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/listbox/BasicDoc.vue';
+import CheckmarkDoc from '@/doc/listbox/CheckmarkDoc.vue';
+import DisabledDoc from '@/doc/listbox/DisabledDoc.vue';
+import FilterDoc from '@/doc/listbox/FilterDoc.vue';
+import FormsDoc from '@/doc/listbox/FormsDoc.vue';
+import GroupDoc from '@/doc/listbox/GroupDoc.vue';
+import ImportDoc from '@/doc/listbox/ImportDoc.vue';
+import InvalidDoc from '@/doc/listbox/InvalidDoc.vue';
+import MultipleDoc from '@/doc/listbox/MultipleDoc.vue';
+import TemplateDoc from '@/doc/listbox/TemplateDoc.vue';
+import VirtualScrollDoc from '@/doc/listbox/VirtualScrollDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'checkmark',
+                    label: 'Checkmark',
+                    component: CheckmarkDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    component: FilterDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'virtualscroll',
+                    label: 'Virtual Scroll',
+                    component: VirtualScrollDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'listbox'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/megamenu/index.vue b/apps/labs/pages/megamenu/index.vue
new file mode 100755
index 000000000..ceb876288
--- /dev/null
+++ b/apps/labs/pages/megamenu/index.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocComponent
+        title="Vue MegaMenu Component"
+        header="MegaMenu"
+        description="MegaMenu is a navigation component that displays submenus and content in columns."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/megamenu/#api"
+        ptLink="/megamenu/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/megamenu/BasicDoc.vue';
+import CommandDoc from '@/doc/megamenu/CommandDoc.vue';
+import ImportDoc from '@/doc/megamenu/ImportDoc.vue';
+import RouterDoc from '@/doc/megamenu/RouterDoc.vue';
+import TemplateDoc from '@/doc/megamenu/TemplateDoc.vue';
+import VerticalDoc from '@/doc/megamenu/VerticalDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'Vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'megamenu'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/menu/index.vue b/apps/labs/pages/menu/index.vue
new file mode 100755
index 000000000..7dd74c0e3
--- /dev/null
+++ b/apps/labs/pages/menu/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocComponent title="Vue Menu Component" header="Menu" description="Menu displays a list of items in vertical orientation." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/menu/#api" ptLink="/menu/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/menu/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/menu/BasicDoc.vue';
+import CommandDoc from '@/doc/menu/CommandDoc.vue';
+import GroupDoc from '@/doc/menu/GroupDoc.vue';
+import ImportDoc from '@/doc/menu/ImportDoc.vue';
+import PopupDoc from '@/doc/menu/PopupDoc.vue';
+import RouterDoc from '@/doc/menu/RouterDoc.vue';
+import TemplateDoc from '@/doc/menu/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'popup',
+                    label: 'Popup',
+                    component: PopupDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'menu'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/menubar/index.vue b/apps/labs/pages/menubar/index.vue
new file mode 100755
index 000000000..9a16fc854
--- /dev/null
+++ b/apps/labs/pages/menubar/index.vue
@@ -0,0 +1,59 @@
+<template>
+    <DocComponent title="Vue Navbar Component" header="Menubar" description="Menubar also known as Navbar, is a horizontal menu component." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/menubar/#api" ptLink="/menubar/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/menubar/BasicDoc.vue';
+import AdvancedDoc from '@/doc/menubar/AdvancedDoc.vue';
+import CommandDoc from '@/doc/menubar/CommandDoc.vue';
+import ImportDoc from '@/doc/menubar/ImportDoc.vue';
+import RouterDoc from '@/doc/menubar/RouterDoc.vue';
+import TemplateDoc from '@/doc/menubar/TemplateDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'advanced',
+                    label: 'Advanced',
+                    component: AdvancedDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'menubar'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/message/index.vue b/apps/labs/pages/message/index.vue
new file mode 100755
index 000000000..42ae9ce21
--- /dev/null
+++ b/apps/labs/pages/message/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <DocComponent title="Vue Message Component" header="Message" description="Message component is used to display inline messages." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/message/#api" ptLink="/message/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/message/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/message/BasicDoc.vue';
+import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
+import DynamicDoc from '@/doc/message/DynamicDoc.vue';
+import FormsDoc from '@/doc/message/FormsDoc.vue';
+import IconDoc from '@/doc/message/IconDoc.vue';
+import ImportDoc from '@/doc/message/ImportDoc.vue';
+import LifeDoc from '@/doc/message/LifeDoc.vue';
+import OutlinedDoc from '@/doc/message/OutlinedDoc.vue';
+import SeverityDoc from '@/doc/message/SeverityDoc.vue';
+import SimpleDoc from '@/doc/message/SimpleDoc.vue';
+import SizesDoc from '@/doc/message/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'severity',
+                    label: 'Severity',
+                    component: SeverityDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'outlined',
+                    label: 'Outlined',
+                    component: OutlinedDoc
+                },
+                {
+                    id: 'simple',
+                    label: 'Simple',
+                    component: SimpleDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'closable',
+                    label: 'Closable',
+                    component: ClosabledDoc
+                },
+                {
+                    id: 'life',
+                    label: 'Life',
+                    component: LifeDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'message'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/metergroup/index.vue b/apps/labs/pages/metergroup/index.vue
new file mode 100644
index 000000000..4e8f545cd
--- /dev/null
+++ b/apps/labs/pages/metergroup/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocComponent title="Vue MeterGroup Component" header="MeterGroup" description="MeterGroup displays scalar measurements within a known range." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/metergroup/#api" ptLink="/metergroup/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
+import IconDoc from '@/doc/metergroup/IconDoc.vue';
+import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
+import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
+import MinMaxDoc from '@/doc/metergroup/MinMaxDoc.vue';
+import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
+import TemplateDoc from '@/doc/metergroup/TemplateDoc.vue';
+import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'label',
+                    label: 'Label',
+                    component: LabelDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'minmax',
+                    label: 'Min-Max',
+                    component: MinMaxDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'metergroup'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/multiselect/index.vue b/apps/labs/pages/multiselect/index.vue
new file mode 100755
index 000000000..2a3ef8bf4
--- /dev/null
+++ b/apps/labs/pages/multiselect/index.vue
@@ -0,0 +1,128 @@
+<template>
+    <DocComponent
+        title="Vue MultiSelect Component"
+        header="MultiSelect"
+        description="MultiSelect is used to select multiple items from a collection."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/multiselect/#api"
+        ptLink="/multiselect/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/multiselect/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/multiselect/BasicDoc.vue';
+import ChipsDoc from '@/doc/multiselect/ChipsDoc.vue';
+import ClearIconDoc from '@/doc/multiselect/ClearIconDoc.vue';
+import DisabledDoc from '@/doc/multiselect/DisabledDoc.vue';
+import FilledDoc from '@/doc/multiselect/FilledDoc.vue';
+import FilterDoc from '@/doc/multiselect/FilterDoc.vue';
+import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/multiselect/FormsDoc.vue';
+import GroupDoc from '@/doc/multiselect/GroupDoc.vue';
+import IftaLabelDoc from '@/doc/multiselect/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/multiselect/ImportDoc.vue';
+import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue';
+import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue';
+import SizesDoc from '@/doc/multiselect/SizesDoc.vue';
+import TemplateDoc from '@/doc/multiselect/TemplateDoc.vue';
+import VirtualScrollDoc from '@/doc/multiselect/VirtualScrollDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'chips',
+                    label: 'Chips',
+                    component: ChipsDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    component: FilterDoc
+                },
+                {
+                    id: 'clearicon',
+                    label: 'Clear Icon',
+                    component: ClearIconDoc
+                },
+                {
+                    id: 'loadingstate',
+                    label: 'Loading State',
+                    component: LoadingStateDoc
+                },
+                {
+                    id: 'virtualscroll',
+                    label: 'VirtualScroll',
+                    component: VirtualScrollDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'multiselect'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/nuxt/index.vue b/apps/labs/pages/nuxt/index.vue
new file mode 100644
index 000000000..48098dcee
--- /dev/null
+++ b/apps/labs/pages/nuxt/index.vue
@@ -0,0 +1,88 @@
+<template>
+    <Head>
+        <Title>Theming PrimeVue with Tailwind CSS in a Nuxt project.</Title>
+        <Meta name="description" content="Theming PrimeVue with Tailwind CSS in a Nuxt project." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Installation with Nuxt</h1>
+                <p>Theming PrimeVue with Tailwind CSS in a Nuxt project.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import CSSVariablesDoc from '@/doc/nuxt/CSSVariablesDoc.vue';
+import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
+import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
+import NuxtConfigDoc from '@/doc/nuxt/NuxtConfigDoc.vue';
+import StylesDoc from '@/doc/nuxt/StylesDoc.vue';
+import TailwindDoc from '@/doc/nuxt/TailwindDoc.vue';
+import ImportStylesDoc from '@/doc/nuxt/tailwind/ImportStylesDoc.vue';
+import PostCSSImportDoc from '@/doc/nuxt/tailwind/PostCSSImportDoc.vue';
+import PrimeUIPluginDoc from '@/doc/nuxt/tailwind/PrimeUIPluginDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind CSS',
+                    component: TailwindDoc
+                },
+                {
+                    id: 'download',
+                    label: 'Download',
+                    component: DownloadDoc
+                },
+                {
+                    id: 'nuxtconfig',
+                    label: 'Nuxt Config',
+                    component: NuxtConfigDoc
+                },
+                {
+                    id: 'styles',
+                    label: 'Styles',
+                    component: StylesDoc
+                },
+                {
+                    id: 'tailwind-config',
+                    label: 'Tailwind Config',
+                    children: [
+                        {
+                            id: 'primeuiplugin',
+                            label: 'PrimeUI Plugin',
+                            component: PrimeUIPluginDoc
+                        },
+                        {
+                            id: 'postcssimport',
+                            label: 'PostCSS Import',
+                            component: PostCSSImportDoc
+                        },
+                        {
+                            id: 'importstyles',
+                            label: 'Import Styles',
+                            component: ImportStylesDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'css-variables',
+                    label: 'CSS Variables',
+                    component: CSSVariablesDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/orderlist/index.vue b/apps/labs/pages/orderlist/index.vue
new file mode 100755
index 000000000..e16b12d79
--- /dev/null
+++ b/apps/labs/pages/orderlist/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocComponent title="Vue OrderList Component" header="OrderList" description="OrderList is used to sort a collection." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/orderlist/#api" ptLink="/orderlist/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/orderlist/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/orderlist/BasicDoc.vue';
+import ImportDoc from '@/doc/orderlist/ImportDoc.vue';
+import TemplateDoc from '@/doc/orderlist/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'orderlist'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/organizationchart/index.vue b/apps/labs/pages/organizationchart/index.vue
new file mode 100755
index 000000000..9e825213a
--- /dev/null
+++ b/apps/labs/pages/organizationchart/index.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocComponent
+        title="Vue Organization Chart Component"
+        header="OrganizationChart"
+        description="OrganizationChart visualizes hierarchical organization data."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/organizationchart/#api"
+        ptLink="/organizationchart/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/organizationchart/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/organizationchart/BasicDoc.vue';
+import ColoredDoc from '@/doc/organizationchart/ColoredDoc.vue';
+import ImportDoc from '@/doc/organizationchart/ImportDoc.vue';
+import SelectionDoc from '@/doc/organizationchart/SelectionDoc.vue';
+import TemplateDoc from '@/doc/organizationchart/TemplateDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'selection',
+                    label: 'Selection',
+                    component: SelectionDoc
+                },
+                {
+                    id: 'colored',
+                    label: 'Colored',
+                    component: ColoredDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'organizationchart'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/paginator/index.vue b/apps/labs/pages/paginator/index.vue
new file mode 100755
index 000000000..6de5e36c2
--- /dev/null
+++ b/apps/labs/pages/paginator/index.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocComponent
+        title="Vue Paginator Component"
+        header="Paginator"
+        description="Paginator displays data in paged format and provides navigation between pages."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/paginator/#api"
+        ptLink="/paginator/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/paginator/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/paginator/BasicDoc.vue';
+import CurrentPageReportDoc from '@/doc/paginator/CurrentPageReportDoc.vue';
+import CustomContentDoc from '@/doc/paginator/CustomContentDoc.vue';
+import HeadlessDoc from '@/doc/paginator/HeadlessDoc.vue';
+import ImportDoc from '@/doc/paginator/ImportDoc.vue';
+import TemplateDoc from '@/doc/paginator/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'currentpagereport',
+                    label: 'Current Page Report',
+                    component: CurrentPageReportDoc
+                },
+                {
+                    id: 'customcontent',
+                    label: 'Custom Content',
+                    component: CustomContentDoc
+                },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'paginator'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/panel/index.vue b/apps/labs/pages/panel/index.vue
new file mode 100755
index 000000000..aeec3a831
--- /dev/null
+++ b/apps/labs/pages/panel/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/panel/#api" ptLink="/panel/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/panel/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/panel/BasicDoc.vue';
+import ImportDoc from '@/doc/panel/ImportDoc.vue';
+import TemplateDoc from '@/doc/panel/TemplateDoc.vue';
+import ToggleableDoc from '@/doc/panel/ToggleableDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'toggleable',
+                    label: 'Toggleable',
+                    component: ToggleableDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'panel'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/panelmenu/index.vue b/apps/labs/pages/panelmenu/index.vue
new file mode 100755
index 000000000..49c658b0b
--- /dev/null
+++ b/apps/labs/pages/panelmenu/index.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocComponent title="Vue PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/panelmenu/#api" ptLink="/panelmenu/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/panelmenu/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/panelmenu/BasicDoc.vue';
+import CommandDoc from '@/doc/panelmenu/CommandDoc.vue';
+import ControlledDoc from '@/doc/panelmenu/ControlledDoc.vue';
+import ImportDoc from '@/doc/panelmenu/ImportDoc.vue';
+import MultipleDoc from '@/doc/panelmenu/MultipleDoc.vue';
+import RouterDoc from '@/doc/panelmenu/RouterDoc.vue';
+import TemplateDoc from '@/doc/panelmenu/TemplateDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'panelmenu'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/password/index.vue b/apps/labs/pages/password/index.vue
new file mode 100755
index 000000000..96d4c4806
--- /dev/null
+++ b/apps/labs/pages/password/index.vue
@@ -0,0 +1,102 @@
+<template>
+    <DocComponent title="Vue Password Component" header="Password" description="Password displays strength indicator for password fields." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/password/#api" ptLink="/password/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/password/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/password/BasicDoc.vue';
+import DisabledDoc from '@/doc/password/DisabledDoc.vue';
+import FilledDoc from '@/doc/password/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/password/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/password/FormsDoc.vue';
+import IftaLabelDoc from '@/doc/password/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/password/ImportDoc.vue';
+import InvalidDoc from '@/doc/password/InvalidDoc.vue';
+import LocaleDoc from '@/doc/password/LocaleDoc.vue';
+import MeterDoc from '@/doc/password/MeterDoc.vue';
+import SizesDoc from '@/doc/password/SizesDoc.vue';
+import TemplateDoc from '@/doc/password/TemplateDoc.vue';
+import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'meter',
+                    label: 'Meter',
+                    component: MeterDoc
+                },
+                {
+                    id: 'locale',
+                    label: 'Locale',
+                    component: LocaleDoc
+                },
+                {
+                    id: 'togglemask',
+                    label: 'ToggleMask',
+                    component: ToggleMaskDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'password'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/picklist/index.vue b/apps/labs/pages/picklist/index.vue
new file mode 100755
index 000000000..482dca542
--- /dev/null
+++ b/apps/labs/pages/picklist/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocComponent title="Vue PickList Component" header="PickList" description="PickList is used to reorder items between different lists." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/picklist/#api" ptLink="/picklist/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/picklist/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/picklist/BasicDoc.vue';
+import ImportDoc from '@/doc/picklist/ImportDoc.vue';
+import TemplateDoc from '@/doc/picklist/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'picklist'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/popover/index.vue b/apps/labs/pages/popover/index.vue
new file mode 100755
index 000000000..d8fd81181
--- /dev/null
+++ b/apps/labs/pages/popover/index.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocComponent
+        title="Vue Popover Component"
+        header="Popover"
+        description="Popover, also known as Popover, is a container component that can overlay other components on page."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/popover/#api"
+        ptLink="/popover/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/popover/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/popover/BasicDoc.vue';
+import DataTableDoc from '@/doc/popover/DataTableDoc.vue';
+import ImportDoc from '@/doc/popover/ImportDoc.vue';
+import SelectDataDoc from '@/doc/popover/SelectDataDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'selectdata',
+                    label: 'Select Data',
+                    component: SelectDataDoc
+                },
+                {
+                    id: 'datatable',
+                    label: 'DataTable',
+                    component: DataTableDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'popover'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/progressbar/index.vue b/apps/labs/pages/progressbar/index.vue
new file mode 100755
index 000000000..615a7634a
--- /dev/null
+++ b/apps/labs/pages/progressbar/index.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/progressbar/#api" ptLink="/progressbar/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/progressbar/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/progressbar/BasicDoc.vue';
+import DynamicDoc from '@/doc/progressbar/DynamicDoc.vue';
+import ImportDoc from '@/doc/progressbar/ImportDoc.vue';
+import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc.vue';
+import TemplateDoc from '@/doc/progressbar/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'indeterminate',
+                    label: 'Indeterminate',
+                    component: IndeterminateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'progressbar'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/progressspinner/index.vue b/apps/labs/pages/progressspinner/index.vue
new file mode 100644
index 000000000..bd5c4e9ae
--- /dev/null
+++ b/apps/labs/pages/progressspinner/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocComponent title="Vue ProgressSpinner Component" header="ProgressSpinner" description="ProgressBar is a process status indicator." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/progressspinner/#api" ptLink="/progressspinner/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/progressspinner/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/progressspinner/BasicDoc.vue';
+import CustomDoc from '@/doc/progressspinner/CustomDoc.vue';
+import ImportDoc from '@/doc/progressspinner/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'custom',
+                    label: 'Custom',
+                    component: CustomDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'progressspinner'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/radiobutton/index.vue b/apps/labs/pages/radiobutton/index.vue
new file mode 100755
index 000000000..672786f72
--- /dev/null
+++ b/apps/labs/pages/radiobutton/index.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocComponent
+        title="Vue RadioButton Component"
+        header="RadioButton"
+        description="RadioButton is an extension to standard radio button element with theming."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/radiobutton/#api"
+        ptLink="/radiobutton/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue';
+import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
+import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
+import FilledDoc from '@/doc/radiobutton/FilledDoc.vue';
+import FormsDoc from '@/doc/radiobutton/FormsDoc.vue';
+import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
+import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
+import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
+import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'radiobutton'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/rating/index.vue b/apps/labs/pages/rating/index.vue
new file mode 100755
index 000000000..cacacff02
--- /dev/null
+++ b/apps/labs/pages/rating/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/rating/#api" ptLink="/rating/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/rating/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/rating/BasicDoc.vue';
+import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
+import FormsDoc from '@/doc/rating/FormsDoc.vue';
+import ImportDoc from '@/doc/rating/ImportDoc.vue';
+import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
+import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
+import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'numberofstars',
+                    label: 'Number of Stars',
+                    component: NumberOfStarsDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'readonly',
+                    label: 'ReadOnly',
+                    component: ReadOnlyDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'rating'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/ripple/index.vue b/apps/labs/pages/ripple/index.vue
new file mode 100755
index 000000000..1028bf0de
--- /dev/null
+++ b/apps/labs/pages/ripple/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocComponent title="Vue Ripple Component" header="Ripple" description="Ripple directive adds ripple effect to the host element." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/ripple/#api" ptLink="/ripple/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/ripple/AccessibilityDoc.vue';
+import ConfigurationDoc from '@/doc/ripple/ConfigurationDoc.vue';
+import DefaultDoc from '@/doc/ripple/DefaultDoc.vue';
+import ImportDoc from '@/doc/ripple/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'configuration',
+                    label: 'Configuration',
+                    component: ConfigurationDoc
+                },
+                {
+                    id: 'default',
+                    label: 'Default',
+                    component: DefaultDoc
+                },
+                /*-{
+                    id: 'custom',
+                    label: 'Custom',
+                    component: CustomDoc
+                },*/
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'directives.ripple'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/scrollpanel/index.vue b/apps/labs/pages/scrollpanel/index.vue
new file mode 100644
index 000000000..3759a7c10
--- /dev/null
+++ b/apps/labs/pages/scrollpanel/index.vue
@@ -0,0 +1,50 @@
+<template>
+    <DocComponent
+        title="Vue ScrollPanel Component"
+        header="ScrollPanel"
+        description="ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/scrollpanel/#api"
+        ptLink="/scrollpanel/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/scrollpanel/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/scrollpanel/BasicDoc.vue';
+import CustomDoc from '@/doc/scrollpanel/CustomDoc.vue';
+import ImportDoc from '@/doc/scrollpanel/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'custom',
+                    label: 'Custom',
+                    component: CustomDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'scrollpanel'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/scrolltop/index.vue b/apps/labs/pages/scrolltop/index.vue
new file mode 100644
index 000000000..c89618fef
--- /dev/null
+++ b/apps/labs/pages/scrolltop/index.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocComponent
+        title="Vue ScrollTop Component"
+        header="ScrollTop"
+        description="ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/scrolltop/#api"
+        ptLink="/scrolltop/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/scrolltop/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/scrolltop/BasicDoc.vue';
+import ElementDoc from '@/doc/scrolltop/ElementDoc.vue';
+import ImportDoc from '@/doc/scrolltop/ImportDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'element',
+                    label: 'Element',
+                    component: ElementDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'scrolltop'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/select/index.vue b/apps/labs/pages/select/index.vue
new file mode 100755
index 000000000..cbf45b4cf
--- /dev/null
+++ b/apps/labs/pages/select/index.vue
@@ -0,0 +1,132 @@
+<template>
+    <DocComponent title="Vue Select Component" header="Select" description="Select is used to choose an item from a collection of options." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/select/#api" ptLink="/select/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/select/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/select/BasicDoc.vue';
+import CheckmarkDoc from '@/doc/select/CheckmarkDoc.vue';
+import ClearIconDoc from '@/doc/select/ClearIconDoc.vue';
+import DisabledDoc from '@/doc/select/DisabledDoc.vue';
+import EditableDoc from '@/doc/select/EditableDoc.vue';
+import FilledDoc from '@/doc/select/FilledDoc.vue';
+import FilterDoc from '@/doc/select/FilterDoc.vue';
+import FloatLabelDoc from '@/doc/select/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/select/FormsDoc.vue';
+import GroupDoc from '@/doc/select/GroupDoc.vue';
+import IftaLabelDoc from '@/doc/select/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/select/ImportDoc.vue';
+import InvalidDoc from '@/doc/select/InvalidDoc.vue';
+import LazyVirtualScrollDoc from '@/doc/select/LazyVirtualScrollDoc.vue';
+import LoadingStateDoc from '@/doc/select/LoadingStateDoc.vue';
+import SizesDoc from '@/doc/select/SizesDoc.vue';
+import TemplateDoc from '@/doc/select/TemplateDoc.vue';
+import VirtualScrollDoc from '@/doc/select/VirtualScrollDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'checkmark',
+                    label: 'Checkmark',
+                    component: CheckmarkDoc
+                },
+                {
+                    id: 'editable',
+                    label: 'Editable',
+                    component: EditableDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    component: FilterDoc
+                },
+                {
+                    id: 'clearicon',
+                    label: 'Clear Icon',
+                    component: ClearIconDoc
+                },
+                {
+                    id: 'loadingstate',
+                    label: 'Loading State',
+                    component: LoadingStateDoc
+                },
+                {
+                    id: 'virtualscroll',
+                    label: 'Virtual Scroll',
+                    component: VirtualScrollDoc
+                },
+                {
+                    id: 'lazyvirtualscroll',
+                    label: 'Lazy Virtual Scroll',
+                    component: LazyVirtualScrollDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'select'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/selectbutton/index.vue b/apps/labs/pages/selectbutton/index.vue
new file mode 100755
index 000000000..0327a84d2
--- /dev/null
+++ b/apps/labs/pages/selectbutton/index.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocComponent
+        title="Vue SelectButton Component"
+        header="SelectButton"
+        description="SelectButton is used to choose single or multiple items from a list using buttons."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/selectbutton/#api"
+        ptLink="/selectbutton/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
+import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
+import FormsDoc from '@/doc/selectbutton/FormsDoc.vue';
+import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
+import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
+import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
+import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
+import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'selectbutton'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/skeleton/index.vue b/apps/labs/pages/skeleton/index.vue
new file mode 100644
index 000000000..65e01d651
--- /dev/null
+++ b/apps/labs/pages/skeleton/index.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/skeleton/#api" ptLink="/skeleton/#pt" />
+</template>
+
+<script>
+import Accessibility from '@/doc/skeleton/AccessibilityDoc.vue';
+import CardDoc from '@/doc/skeleton/CardDoc.vue';
+import DataTableDoc from '@/doc/skeleton/DataTableDoc.vue';
+import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
+import ListDoc from '@/doc/skeleton/ListDoc.vue';
+import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'shapes',
+                    label: 'Shapes',
+                    component: ShapesDoc
+                },
+                {
+                    id: 'card',
+                    label: 'Card',
+                    component: CardDoc
+                },
+                {
+                    id: 'list',
+                    label: 'List',
+                    component: ListDoc
+                },
+                {
+                    id: 'datatable',
+                    label: 'DataTable',
+                    component: DataTableDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: Accessibility
+                }
+            ],
+            presetDoc: {
+                key: 'skeleton'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/slider/index.vue b/apps/labs/pages/slider/index.vue
new file mode 100755
index 000000000..6d2e7c189
--- /dev/null
+++ b/apps/labs/pages/slider/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/slider/#api" ptLink="/slider/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/slider/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/slider/BasicDoc.vue';
+import FormsDoc from '@/doc/slider/FormsDoc.vue';
+import ImportDoc from '@/doc/slider/ImportDoc.vue';
+import InputDoc from '@/doc/slider/InputDoc.vue';
+import RangeDoc from '@/doc/slider/RangeDoc.vue';
+import StepDoc from '@/doc/slider/StepDoc.vue';
+import VerticalDoc from '@/doc/slider/VerticalDoc.vue';
+import FilterDoc from '../../doc/slider/FilterDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'input',
+                    label: 'Input',
+                    component: InputDoc
+                },
+                {
+                    id: 'step',
+                    label: 'Step',
+                    component: StepDoc
+                },
+                {
+                    id: 'range',
+                    label: 'Range',
+                    component: RangeDoc
+                },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    component: FilterDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'slider'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/speeddial/index.vue b/apps/labs/pages/speeddial/index.vue
new file mode 100644
index 000000000..e1ca0fe10
--- /dev/null
+++ b/apps/labs/pages/speeddial/index.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocComponent
+        title="Vue Speed Dial Component"
+        header="Speed Dial"
+        description="When pressed, a floating action button can display multiple primary actions that can be performed on a page."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/speeddial/#api"
+        ptLink="/speeddial/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/speeddial/AccessibilityDoc.vue';
+import CircleDoc from '@/doc/speeddial/CircleDoc.vue';
+import ImportDoc from '@/doc/speeddial/ImportDoc.vue';
+import LinearDoc from '@/doc/speeddial/LinearDoc.vue';
+import MaskDoc from '@/doc/speeddial/MaskDoc.vue';
+import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue';
+import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue';
+import TemplateDoc from '@/doc/speeddial/TemplateDoc.vue';
+import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                { id: 'import', label: 'Import', component: ImportDoc },
+                { id: 'linear', label: 'Linear', component: LinearDoc },
+                { id: 'circle', label: 'Circle', component: CircleDoc },
+                { id: 'semi-circle', label: 'Semi Circle', component: SemiCircleDoc },
+                { id: 'quarter-circle', label: 'Quarter Circle', component: QuarterCircleDoc },
+                { id: 'tooltip', label: 'Tooltip', component: TooltipDoc },
+                { id: 'mask', label: 'Mask', component: MaskDoc },
+                { id: 'template', label: 'Template', component: TemplateDoc },
+                { id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
+            ],
+            presetDoc: {
+                key: 'speeddial'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/splitbutton/index.vue b/apps/labs/pages/splitbutton/index.vue
new file mode 100755
index 000000000..9ae2652f1
--- /dev/null
+++ b/apps/labs/pages/splitbutton/index.vue
@@ -0,0 +1,110 @@
+<template>
+    <DocComponent
+        title="Vue SplitButton Component"
+        header="SplitButton"
+        description="SplitButton groups a set of commands in an overlay with a default command."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/splitbutton/#api"
+        ptLink="/splitbutton/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/splitbutton/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/splitbutton/BasicDoc.vue';
+import DisabledDoc from '@/doc/splitbutton/DisabledDoc.vue';
+import IconsDoc from '@/doc/splitbutton/IconsDoc.vue';
+import ImportDoc from '@/doc/splitbutton/ImportDoc.vue';
+import NestedDoc from '@/doc/splitbutton/NestedDoc.vue';
+import OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue';
+import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue';
+import RaisedTextDoc from '@/doc/splitbutton/RaisedTextDoc.vue';
+import RoundedDoc from '@/doc/splitbutton/RoundedDoc.vue';
+import SeverityDoc from '@/doc/splitbutton/SeverityDoc.vue';
+import SizesDoc from '@/doc/splitbutton/SizesDoc.vue';
+import TemplateDoc from '@/doc/splitbutton/TemplateDoc.vue';
+import TextDoc from '@/doc/splitbutton/TextDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'icons',
+                    label: 'Icons',
+                    component: IconsDoc
+                },
+                {
+                    id: 'nested',
+                    label: 'Nested',
+                    component: NestedDoc
+                },
+                {
+                    id: 'severity',
+                    label: 'Severity',
+                    component: SeverityDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'raised',
+                    label: 'Raised',
+                    component: RaisedDoc
+                },
+                {
+                    id: 'rounded',
+                    label: 'Rounded',
+                    component: RoundedDoc
+                },
+                {
+                    id: 'text',
+                    label: 'Text',
+                    component: TextDoc
+                },
+                {
+                    id: 'raisedtext',
+                    label: 'Raised Text',
+                    component: RaisedTextDoc
+                },
+                {
+                    id: 'outlined',
+                    label: 'Outlined',
+                    component: OutlinedDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'splitbutton'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/splitter/index.vue b/apps/labs/pages/splitter/index.vue
new file mode 100644
index 000000000..4a615979e
--- /dev/null
+++ b/apps/labs/pages/splitter/index.vue
@@ -0,0 +1,53 @@
+<template>
+    <DocComponent title="Vue Splitter Component" header="Splitter" description="Splitter is utilized to separate and resize panels." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/splitter/#api" ptLink="/splitter/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/splitter/AccessibilityDoc.vue';
+import HorizontalDoc from '@/doc/splitter/HorizontalDoc.vue';
+import ImportDoc from '@/doc/splitter/ImportDoc.vue';
+import NestedDoc from '@/doc/splitter/NestedDoc.vue';
+import SizeDoc from '@/doc/splitter/SizeDoc.vue';
+import VerticalDoc from '@/doc/splitter/VerticalDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'horizontal',
+                    label: 'Horizontal',
+                    component: HorizontalDoc
+                },
+                {
+                    id: 'size',
+                    label: 'Size',
+                    component: SizeDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'nested',
+                    label: 'Nested',
+                    component: NestedDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: ['splitter', 'splitterpanel']
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/stepper/index.vue b/apps/labs/pages/stepper/index.vue
new file mode 100644
index 000000000..a678e6352
--- /dev/null
+++ b/apps/labs/pages/stepper/index.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocComponent
+        title="Vue Stepper Component"
+        header="Stepper"
+        description="The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/stepper/#api"
+        ptLink="/stepper/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
+import HorizontalDoc from '@/doc/stepper/HorizontalDoc.vue';
+import ImportDoc from '@/doc/stepper/ImportDoc.vue';
+import LinearDoc from '@/doc/stepper/LinearDoc.vue';
+import StepsOnlyDoc from '@/doc/stepper/StepsOnlyDoc.vue';
+import TemplateDoc from '@/doc/stepper/TemplateDoc.vue';
+import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'horizontal',
+                    label: 'Horizontal',
+                    component: HorizontalDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'linear',
+                    label: 'Linear',
+                    component: LinearDoc
+                },
+                {
+                    id: 'stepsonly',
+                    label: 'Steps Only',
+                    component: StepsOnlyDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: ['stepper', 'steppanels', 'steplist', 'stepitem', 'step']
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/tabs/index.vue b/apps/labs/pages/tabs/index.vue
new file mode 100755
index 000000000..4de636005
--- /dev/null
+++ b/apps/labs/pages/tabs/index.vue
@@ -0,0 +1,72 @@
+<template>
+    <DocComponent title="Vue Tabs Component" header="Tabs" description="Tabs is a container component to group content with tabs." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tabs/#api" ptLink="/tabs/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/tabs/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/tabs/BasicDoc.vue';
+import ControlledDoc from '@/doc/tabs/ControlledDoc.vue';
+import DisabledDoc from '@/doc/tabs/DisabledDoc.vue';
+import DynamicDoc from '@/doc/tabs/DynamicDoc.vue';
+import ImportDoc from '@/doc/tabs/ImportDoc.vue';
+import ScrollableDoc from '@/doc/tabs/ScrollableDoc.vue';
+import TabMenuDoc from '@/doc/tabs/TabMenuDoc.vue';
+import TemplateDoc from '@/doc/tabs/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'scrollable',
+                    label: 'Scrollable',
+                    component: ScrollableDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'tabmenu',
+                    label: 'Tab Menu',
+                    component: TabMenuDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: ['tabs', 'tablist', 'tabpanels', 'tabpanel', 'tab']
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/tag/index.vue b/apps/labs/pages/tag/index.vue
new file mode 100755
index 000000000..bea757fef
--- /dev/null
+++ b/apps/labs/pages/tag/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tag/#api" ptLink="/tag/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/tag/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/tag/BasicDoc.vue';
+import IconDoc from '@/doc/tag/IconDoc.vue';
+import ImportDoc from '@/doc/tag/ImportDoc.vue';
+import PillDoc from '@/doc/tag/PillDoc.vue';
+import SeverityDoc from '@/doc/tag/SeverityDoc.vue';
+import TemplateDoc from '@/doc/tag/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'severity',
+                    label: 'Severity',
+                    component: SeverityDoc
+                },
+                {
+                    id: 'pill',
+                    label: 'Pill',
+                    component: PillDoc
+                },
+                {
+                    id: 'icons',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'tag'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/terminal/index.vue b/apps/labs/pages/terminal/index.vue
new file mode 100755
index 000000000..77254aaf4
--- /dev/null
+++ b/apps/labs/pages/terminal/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/terminal/#api" ptLink="/terminal/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/terminal/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/terminal/BasicDoc.vue';
+import ImportDoc from '@/doc/terminal/ImportDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'terminal'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/textarea/index.vue b/apps/labs/pages/textarea/index.vue
new file mode 100755
index 000000000..2ea0d2962
--- /dev/null
+++ b/apps/labs/pages/textarea/index.vue
@@ -0,0 +1,92 @@
+<template>
+    <DocComponent
+        title="Vue Textarea Component"
+        header="Textarea"
+        description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/textarea/#api"
+        ptLink="/textarea/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/textarea/AccessibilityDoc.vue';
+import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc.vue';
+import BasicDoc from '@/doc/textarea/BasicDoc.vue';
+import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
+import FilledDoc from '@/doc/textarea/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/textarea/FormsDoc.vue';
+import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/textarea/ImportDoc.vue';
+import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
+import SizesDoc from '@/doc/textarea/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'auto-resize',
+                    label: 'Auto Resize',
+                    component: AutoResizeDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'textarea'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/tieredmenu/index.vue b/apps/labs/pages/tieredmenu/index.vue
new file mode 100755
index 000000000..9c524d2a5
--- /dev/null
+++ b/apps/labs/pages/tieredmenu/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocComponent title="Vue TieredMenu Component" header="TieredMenu" description="TieredMenu displays submenus in nested overlays." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tieredmenu/#api" ptLink="/tieredmenu/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/tieredmenu/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/tieredmenu/BasicDoc.vue';
+import CommandDoc from '@/doc/tieredmenu/CommandDoc.vue';
+import ImportDoc from '@/doc/tieredmenu/ImportDoc.vue';
+import PopupDoc from '@/doc/tieredmenu/PopupDoc.vue';
+import RouterDoc from '@/doc/tieredmenu/RouterDoc.vue';
+import TemplateDoc from '@/doc/tieredmenu/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'popup',
+                    label: 'Popup',
+                    component: PopupDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'tieredmenu'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/timeline/index.vue b/apps/labs/pages/timeline/index.vue
new file mode 100644
index 000000000..b29518f64
--- /dev/null
+++ b/apps/labs/pages/timeline/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocComponent title="Vue Timeline Component" header="Timeline" description="Timeline visualizes a series of chained events." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/timeline/#api" ptLink="/timeline/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/timeline/AccessibilityDoc.vue';
+import AlignmentDoc from '@/doc/timeline/AlignmentDoc.vue';
+import BasicDoc from '@/doc/timeline/BasicDoc.vue';
+import HorizontalDoc from '@/doc/timeline/HorizontalDoc.vue';
+import ImportDoc from '@/doc/timeline/ImportDoc.vue';
+import OppositeDoc from '@/doc/timeline/OppositeDoc.vue';
+import TemplateDoc from '@/doc/timeline/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'alignment',
+                    label: 'Alignment',
+                    component: AlignmentDoc
+                },
+                {
+                    id: 'opposite',
+                    label: 'Opposite',
+                    component: OppositeDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'horizontal',
+                    label: 'Horizontal',
+                    component: HorizontalDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'timeline'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/toast/index.vue b/apps/labs/pages/toast/index.vue
new file mode 100755
index 000000000..8a96bda52
--- /dev/null
+++ b/apps/labs/pages/toast/index.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocComponent title="Vue Toast Component" header="Toast" description="Toast is used to display messages in an overlay." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/toast/#api" ptLink="/toast/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/toast/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/toast/BasicDoc.vue';
+import HeadlessDoc from '@/doc/toast/HeadlessDoc.vue';
+import ImportDoc from '@/doc/toast/ImportDoc.vue';
+import MultipleDoc from '@/doc/toast/MultipleDoc.vue';
+import PositionDoc from '@/doc/toast/PositionDoc.vue';
+import SeverityDoc from '@/doc/toast/SeverityDoc.vue';
+import StickyDoc from '@/doc/toast/StickyDoc.vue';
+import TemplateDoc from '@/doc/toast/TemplateDoc.vue';
+import ToastServiceDoc from '@/doc/toast/ToastServiceDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'toast-service',
+                    label: 'Toast Service',
+                    component: ToastServiceDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'severity',
+                    label: 'Severity',
+                    component: SeverityDoc
+                },
+                {
+                    id: 'position',
+                    label: 'Position',
+                    component: PositionDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'sticky',
+                    label: 'Sticky',
+                    component: StickyDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'toast'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/togglebutton/index.vue b/apps/labs/pages/togglebutton/index.vue
new file mode 100755
index 000000000..1f4c2d503
--- /dev/null
+++ b/apps/labs/pages/togglebutton/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <DocComponent
+        title="Vue ToggleButton Component"
+        header="ToggleButton"
+        description="ToggleButton is used to select a boolean value using a button."
+        :componentDocs="docs"
+        :presetDoc="presetDoc"
+        apiLink="/togglebutton/#api"
+        ptLink="/togglebutton/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/togglebutton/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
+import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
+import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
+import FormsDoc from '@/doc/togglebutton/FormsDoc.vue';
+import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
+import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
+import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'customized',
+                    label: 'Customized',
+                    component: CustomizedDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'togglebutton'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/toggleswitch/index.vue b/apps/labs/pages/toggleswitch/index.vue
new file mode 100755
index 000000000..079e4b646
--- /dev/null
+++ b/apps/labs/pages/toggleswitch/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocComponent title="Vue ToggleSwitch Component" header="ToggleSwitch" description="ToggleSwitch is used to select a boolean value." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/toggleswitch/#api" ptLink="/toggleswitch/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/toggleswitch/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/toggleswitch/BasicDoc.vue';
+import DisabledDoc from '@/doc/toggleswitch/DisabledDoc.vue';
+import FormsDoc from '@/doc/toggleswitch/FormsDoc.vue';
+import ImportDoc from '@/doc/toggleswitch/ImportDoc.vue';
+import InvalidDoc from '@/doc/toggleswitch/InvalidDoc.vue';
+import PreselectionDoc from '@/doc/toggleswitch/PreselectionDoc.vue';
+import TemplateDoc from '@/doc/toggleswitch/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'preselection',
+                    label: 'Preselection',
+                    component: PreselectionDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'toggleswitch'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/toolbar/index.vue b/apps/labs/pages/toolbar/index.vue
new file mode 100755
index 000000000..f5b5141da
--- /dev/null
+++ b/apps/labs/pages/toolbar/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/toolbar/#api" ptLink="/toolbar/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/toolbar/BasicDoc.vue';
+import CustomDoc from '@/doc/toolbar/CustomDoc.vue';
+import ImportDoc from '@/doc/toolbar/ImportDoc.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'custom',
+                    label: 'Custom',
+                    component: CustomDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'toolbar'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/tooltip/index.vue b/apps/labs/pages/tooltip/index.vue
new file mode 100755
index 000000000..81682c1c1
--- /dev/null
+++ b/apps/labs/pages/tooltip/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocComponent title="Vue Tooltip Component" header="Tooltip" description="Tooltip directive provides advisory information for a component." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tooltip/#api" ptLink="/tooltip/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/tooltip/AccessibilityDoc.vue';
+import AutoHideDoc from '@/doc/tooltip/AutoHideDoc.vue';
+import CustomDoc from '@/doc/tooltip/CustomDoc.vue';
+import DelayDoc from '@/doc/tooltip/DelayDoc.vue';
+import EventDoc from '@/doc/tooltip/EventDoc.vue';
+import ImportDoc from '@/doc/tooltip/ImportDoc.vue';
+import PositionDoc from '@/doc/tooltip/PositionDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'position',
+                    label: 'Position',
+                    component: PositionDoc
+                },
+                {
+                    id: 'event',
+                    label: 'Event',
+                    component: EventDoc
+                },
+                {
+                    id: 'autohide',
+                    label: 'Auto Hide',
+                    component: AutoHideDoc
+                },
+                {
+                    id: 'delay',
+                    label: 'Delay',
+                    component: DelayDoc
+                },
+                {
+                    id: 'custom',
+                    label: 'Custom',
+                    component: CustomDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'directives.tooltip'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/tree/index.vue b/apps/labs/pages/tree/index.vue
new file mode 100755
index 000000000..7a792ea3b
--- /dev/null
+++ b/apps/labs/pages/tree/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tree/#api" ptLink="/tree/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/tree/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/tree/BasicDoc.vue';
+import ControlledDoc from '@/doc/tree/ControlledDoc.vue';
+import EventsDoc from '@/doc/tree/EventsDoc.vue';
+import FilterDoc from '@/doc/tree/FilterDoc.vue';
+import ImportDoc from '@/doc/tree/ImportDoc.vue';
+import LazyDoc from '@/doc/tree/LazyDoc.vue';
+import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
+import CheckboxDoc from '@/doc/tree/selection/CheckboxDoc.vue';
+import MultipleDoc from '@/doc/tree/selection/MultipleDoc.vue';
+import SingleDoc from '@/doc/tree/selection/SingleDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'selection',
+                    label: 'Selection',
+                    children: [
+                        {
+                            id: 'single',
+                            label: 'Single',
+                            component: SingleDoc
+                        },
+                        {
+                            id: 'multiple',
+                            label: 'Multiple',
+                            component: MultipleDoc
+                        },
+                        {
+                            id: 'checkbox',
+                            label: 'Checkbox',
+                            component: CheckboxDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'events',
+                    label: 'Events',
+                    component: EventsDoc
+                },
+                {
+                    id: 'lazy',
+                    label: 'Lazy',
+                    component: LazyDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    component: FilterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'tree'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/treeselect/index.vue b/apps/labs/pages/treeselect/index.vue
new file mode 100755
index 000000000..88488ce67
--- /dev/null
+++ b/apps/labs/pages/treeselect/index.vue
@@ -0,0 +1,114 @@
+<template>
+    <DocComponent title="Vue TreeSelect Component" header="TreeSelect" description="TreeSelect is a form component to choose from hierarchical data." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/treeselect/#api" ptLink="/treeselect/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/treeselect/BasicDoc.vue';
+import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
+import ClearIconDoc from '@/doc/treeselect/ClearIconDoc.vue';
+import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
+import FilledDoc from '@/doc/treeselect/FilledDoc.vue';
+import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
+import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
+import FormsDoc from '@/doc/treeselect/FormsDoc.vue';
+import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue';
+import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
+import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
+import LazyDoc from '@/doc/treeselect/LazyDoc.vue';
+import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue';
+import SizesDoc from '@/doc/treeselect/SizesDoc.vue';
+import TemplateDoc from '@/doc/treeselect/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'checkbox',
+                    label: 'Checkbox',
+                    component: CheckboxDoc
+                },
+                {
+                    id: 'lazy',
+                    label: 'Lazy',
+                    component: LazyDoc
+                },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    component: FilterDoc
+                },
+                {
+                    id: 'clearicon',
+                    label: 'Clear Icon',
+                    component: ClearIconDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'treeselect'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/treetable/index.vue b/apps/labs/pages/treetable/index.vue
new file mode 100755
index 000000000..dd7cae52b
--- /dev/null
+++ b/apps/labs/pages/treetable/index.vue
@@ -0,0 +1,210 @@
+<template>
+    <DocComponent title="Vue TreeTable Component" header="TreeTable" description="TreeTable is used to display hierarchical data in tabular format." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/treetable/#api" ptLink="/treetable/#pt" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/treetable/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/treetable/BasicDoc.vue';
+import ColumnToggleDoc from '@/doc/treetable/ColumnToggleDoc.vue';
+import ContextMenuDoc from '@/doc/treetable/ContextMenuDoc.vue';
+import ControlledDoc from '@/doc/treetable/ControlledDoc.vue';
+import DynamicColumnsDoc from '@/doc/treetable/DynamicColumnsDoc.vue';
+import FilterDoc from '@/doc/treetable/FilterDoc.vue';
+import ImportDoc from '@/doc/treetable/ImportDoc.vue';
+import LazyLoadDoc from '@/doc/treetable/LazyLoadDoc.vue';
+import SizeDoc from '@/doc/treetable/SizeDoc.vue';
+import TemplateDoc from '@/doc/treetable/TemplateDoc.vue';
+import PaginationBasicDoc from '@/doc/treetable/pagination/PaginationBasicDoc.vue';
+import PaginationHeadlessDoc from '@/doc/treetable/pagination/PaginationHeadlessDoc.vue';
+import PaginationTemplateDoc from '@/doc/treetable/pagination/PaginationTemplateDoc.vue';
+import ExpandModeDoc from '@/doc/treetable/resize/ExpandModeDoc.vue';
+import FitModeDoc from '@/doc/treetable/resize/FitModeDoc.vue';
+import FlexibleScrollDoc from '@/doc/treetable/scroll/FlexibleScrollDoc.vue';
+import FrozenColumnsDoc from '@/doc/treetable/scroll/FrozenColumnsDoc.vue';
+import HorizontalScrollDoc from '@/doc/treetable/scroll/HorizontalScrollDoc.vue';
+import VerticalScrollDoc from '@/doc/treetable/scroll/VerticalScrollDoc.vue';
+import CheckboxRowSelectionDoc from '@/doc/treetable/selection/CheckboxRowSelectionDoc.vue';
+import MultipleRowsSelectionDoc from '@/doc/treetable/selection/MultipleRowsSelectionDoc.vue';
+import RowSelectionEventsDoc from '@/doc/treetable/selection/RowSelectionEventsDoc.vue';
+import SingleRowSelectionDoc from '@/doc/treetable/selection/SingleRowSelectionDoc.vue';
+import MultipleColumnsDoc from '@/doc/treetable/sort/MultipleColumnsDoc.vue';
+import RemovableSortDoc from '@/doc/treetable/sort/RemovableSortDoc.vue';
+import SingleColumnDoc from '@/doc/treetable/sort/SingleColumnDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dynamic_columns',
+                    label: 'Dynamic Columns',
+                    component: DynamicColumnsDoc
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'size',
+                    label: 'Size',
+                    component: SizeDoc
+                },
+                {
+                    id: 'pagination',
+                    label: 'Pagination',
+                    children: [
+                        {
+                            id: 'paginator_basic',
+                            label: 'Basic',
+                            component: PaginationBasicDoc
+                        },
+                        {
+                            id: 'paginator_template',
+                            label: 'Template',
+                            component: PaginationTemplateDoc
+                        },
+                        {
+                            id: 'paginator_headless',
+                            label: 'Headless',
+                            component: PaginationHeadlessDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'sort',
+                    label: 'Sort',
+                    children: [
+                        {
+                            id: 'single_sort',
+                            label: 'Single Column',
+                            component: SingleColumnDoc
+                        },
+                        {
+                            id: 'multiple_sort',
+                            label: 'Multiple Columns',
+                            component: MultipleColumnsDoc
+                        },
+                        {
+                            id: 'removable_sort',
+                            label: 'Removable Sort',
+                            component: RemovableSortDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    component: FilterDoc
+                },
+                {
+                    id: 'selection',
+                    label: 'Selection',
+                    children: [
+                        {
+                            id: 'single_row_selection',
+                            label: 'Single',
+                            component: SingleRowSelectionDoc
+                        },
+                        {
+                            id: 'multiple_rows_selection',
+                            label: 'Multiple',
+                            component: MultipleRowsSelectionDoc
+                        },
+                        {
+                            id: 'checkbox_row_selection',
+                            label: 'Checkbox',
+                            component: CheckboxRowSelectionDoc
+                        },
+                        {
+                            id: 'row_selection_events',
+                            label: 'Events',
+                            component: RowSelectionEventsDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'lazy_load',
+                    label: 'Lazy Load',
+                    component: LazyLoadDoc
+                },
+                {
+                    id: 'scroll',
+                    label: 'Scroll',
+                    children: [
+                        {
+                            id: 'vertical_scroll',
+                            label: 'Vertical',
+                            component: VerticalScrollDoc
+                        },
+                        {
+                            id: 'flex_scroll',
+                            label: 'Flexible',
+                            component: FlexibleScrollDoc
+                        },
+                        {
+                            id: 'horizontal_scroll',
+                            label: 'Horizontal',
+                            component: HorizontalScrollDoc
+                        },
+                        {
+                            id: 'frozen_columns',
+                            label: 'Frozen Columns',
+                            component: FrozenColumnsDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'column_resize',
+                    label: 'Column Resize',
+                    children: [
+                        {
+                            id: 'resize_fitmode',
+                            label: 'Fit Mode',
+                            component: FitModeDoc
+                        },
+                        {
+                            id: 'resize_expandmode',
+                            label: 'Expand Mode',
+                            component: ExpandModeDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'column_toggle',
+                    label: 'Column Toggle',
+                    component: ColumnToggleDoc
+                },
+                {
+                    id: 'contextmenu',
+                    label: 'ContextMenu',
+                    component: ContextMenuDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            presetDoc: {
+                key: 'treetable'
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/virtualscroller/index.vue b/apps/labs/pages/virtualscroller/index.vue
new file mode 100644
index 000000000..7c5bde4c3
--- /dev/null
+++ b/apps/labs/pages/virtualscroller/index.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocComponent
+        title="Vue Virtual Scroller Component"
+        header="VirtualScroller"
+        description="VirtualScroller is a performant approach to render large amounts of data efficiently."
+        :componentDocs="docs"
+        apiLink="/virtualscroller/#api"
+        ptLink="/virtualscroller/#pt"
+    />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/virtualscroller/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/virtualscroller/BasicDoc.vue';
+import DelayDoc from '@/doc/virtualscroller/DelayDoc.vue';
+import GridDoc from '@/doc/virtualscroller/GridDoc.vue';
+import HorizontalDoc from '@/doc/virtualscroller/HorizontalDoc.vue';
+import ImportDoc from '@/doc/virtualscroller/ImportDoc.vue';
+import LazyDoc from '@/doc/virtualscroller/LazyDoc.vue';
+import LoadingDoc from '@/doc/virtualscroller/LoadingDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'horizontal',
+                    label: 'Horizontal',
+                    component: HorizontalDoc
+                },
+                {
+                    id: 'grid',
+                    label: 'Grid',
+                    component: GridDoc
+                },
+                {
+                    id: 'delay',
+                    label: 'Delay',
+                    component: DelayDoc
+                },
+                {
+                    id: 'loading',
+                    label: 'Loading',
+                    component: LoadingDoc
+                },
+                {
+                    id: 'lazy',
+                    label: 'Lazy',
+                    component: LazyDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/pages/vite/index.vue b/apps/labs/pages/vite/index.vue
new file mode 100644
index 000000000..f0c96a402
--- /dev/null
+++ b/apps/labs/pages/vite/index.vue
@@ -0,0 +1,88 @@
+<template>
+    <Head>
+        <Title>Theming PrimeVue with Tailwind CSS in a Vite project.</Title>
+        <Meta name="description" content="Theming PrimeVue with Tailwind CSS in a Vite project." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Installation with Vite</h1>
+                <p>Theming PrimeVue with Tailwind CSS in a Vite project.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import CSSVariablesDoc from '@/doc/vite/CSSVariablesDoc.vue';
+import DownloadDoc from '@/doc/vite/DownloadDoc.vue';
+import ExampleDoc from '@/doc/vite/ExampleDoc.vue';
+import PluginDoc from '@/doc/vite/PluginDoc.vue';
+import StylesDoc from '@/doc/vite/StylesDoc.vue';
+import TailwindDoc from '@/doc/vite/TailwindDoc.vue';
+import ImportStylesDoc from '@/doc/vite/tailwind/ImportStylesDoc.vue';
+import PostCSSImportDoc from '@/doc/vite/tailwind/PostCSSImportDoc.vue';
+import PrimeUIPluginDoc from '@/doc/vite/tailwind/PrimeUIPluginDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind CSS',
+                    component: TailwindDoc
+                },
+                {
+                    id: 'download',
+                    label: 'Download',
+                    component: DownloadDoc
+                },
+                {
+                    id: 'plugin',
+                    label: 'Plugin',
+                    component: PluginDoc
+                },
+                {
+                    id: 'styles',
+                    label: 'Styles',
+                    component: StylesDoc
+                },
+                {
+                    id: 'tailwind-config',
+                    label: 'Tailwind Config',
+                    children: [
+                        {
+                            id: 'primeuiplugin',
+                            label: 'PrimeUI Plugin',
+                            component: PrimeUIPluginDoc
+                        },
+                        {
+                            id: 'postcssimport',
+                            label: 'PostCSS Import',
+                            component: PostCSSImportDoc
+                        },
+                        {
+                            id: 'importstyles',
+                            label: 'Import Styles',
+                            component: ImportStylesDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'css-variables',
+                    label: 'CSS Variables',
+                    component: CSSVariablesDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plugins/app.js b/apps/labs/plugins/app.js
new file mode 100644
index 000000000..0c7c42a2a
--- /dev/null
+++ b/apps/labs/plugins/app.js
@@ -0,0 +1,23 @@
+import DeferredDemo from '@/components/demo/DeferredDemo.vue';
+import CodeHighlight from '@/directives/CodeHighlight';
+
+const $appStatePlugin = {
+    install: (app) => {
+        app.config.globalProperties.$appState = reactive({
+            primary: 'emerald',
+            surface: 'zinc',
+            darkTheme: false,
+            codeSandbox: false,
+            sourceType: 'options-api',
+            newsActive: false,
+            announcement: null,
+            storageKey: 'primevue-tailwind'
+        });
+    }
+};
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.component('DeferredDemo', DeferredDemo);
+    nuxtApp.vueApp.directive('code', CodeHighlight);
+    nuxtApp.vueApp.use($appStatePlugin);
+});
diff --git a/apps/labs/public/demo/data/icons.json b/apps/labs/public/demo/data/icons.json
new file mode 100644
index 000000000..3b6817c55
--- /dev/null
+++ b/apps/labs/public/demo/data/icons.json
@@ -0,0 +1 @@
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M959.977 394.711c0-24.979-9.774-48.87-27.693-66.789l-236.207-236.207c-36.923-36.923-96.655-36.923-133.578 0l-470.781 470.781c-17.919 17.919-27.693 41.81-27.693 66.789s9.774 48.87 27.693 66.789l236.207 236.207c18.462 18.462 42.356 27.693 66.789 27.693 2.173 0 4.887 0 7.060-0.543 1.084 0 1.63 0 2.714 0h433.859c22.263 0 40.725-18.462 40.725-40.725s-18.462-40.725-40.725-40.725h-323.088l416.482-416.482c17.919-17.919 27.693-41.81 27.693-66.789zM149.275 638.521c-3.257-3.257-3.8-7.060-3.8-9.231s0-5.972 3.8-9.231l206.341-206.341 254.669 254.669-206.341 206.341c-4.887 4.887-13.032 4.887-18.462 0l-236.207-236.75zM874.725 404.486l-206.341 206.341-254.669-254.669 206.341-206.341c4.887-4.887 13.032-4.887 18.462 0l236.207 236.75c3.257 3.257 3.8 7.060 3.8 9.231s0 5.972-3.8 9.231z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["eraser"]},"attrs":[{}],"properties":{"order":333,"id":261,"name":"eraser","prevSize":80,"code":59908},"setIdx":0,"setId":1,"iconIdx":0},{"icon":{"paths":["M496 128.019c-247.028 0-447.979 200.95-447.979 447.979s200.95 447.979 447.979 447.979 447.979-200.95 447.979-447.979-200.95-447.979-447.979-447.979zM496 927.979c-193.911 0-351.983-158.073-351.983-351.983s158.073-351.983 351.983-351.983 351.983 158.073 351.983 351.983-158.073 351.983-351.983 351.983zM288.011 48.023c0-26.238 21.759-47.998 47.998-47.998h319.984c26.238 0 47.998 21.759 47.998 47.998s-21.759 47.998-47.998 47.998h-319.984c-26.238 0-47.998-21.759-47.998-47.998zM543.998 384.007v191.991c0 26.238-21.759 47.998-47.998 47.998s-47.998-21.759-47.998-47.998v-191.991c0-26.238 21.759-47.998 47.998-47.998s47.998 21.759 47.998 47.998zM962.538 273.291c-9.6 9.6-21.759 14.080-33.918 14.080s-24.318-4.48-33.918-14.080l-95.995-95.995c-18.559-18.559-18.559-49.277 0-67.837s49.277-18.559 67.837 0l95.995 95.995c18.559 18.559 18.559 49.277 0 67.837z"],"attrs":[{}],"grid":16,"tags":["stopwatch"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":332,"id":260,"name":"stopwatch","prevSize":80,"code":59905},"setIdx":0,"setId":1,"iconIdx":1},{"icon":{"paths":["M626.347 1024c-27.876 0-54.044-13.084-75.663-24.463-13.653-6.827-30.151-15.36-38.684-15.36s-25.6 8.533-38.684 15.36c-27.307 14.223-61.44 31.289-97.849 21.617-37.547-9.671-58.027-42.667-75.093-68.836-7.396-11.947-17.636-27.876-24.463-31.857s-25.031-4.551-40.391-5.689c-30.72-1.707-68.836-3.413-96.143-30.151-27.307-27.876-29.013-65.991-30.72-96.711-0.569-14.791-1.707-33.564-5.689-40.391-3.413-6.257-19.911-16.497-31.289-23.893-26.169-17.067-58.596-38.116-68.836-75.093-9.671-36.409 7.396-70.543 21.617-97.849 6.827-13.653 15.36-30.151 15.36-38.684s-8.533-25.6-15.36-38.684c-14.223-27.307-31.289-61.44-21.617-97.849 9.671-37.547 42.667-58.027 68.836-75.093 11.947-7.396 27.876-17.636 31.857-24.463s4.551-25.031 5.689-40.391c1.707-30.72 3.413-68.836 30.151-96.143 27.876-27.307 65.991-29.013 96.711-30.72 14.791-0.569 33.564-1.707 40.391-5.689 6.257-3.413 16.497-19.911 23.893-31.289 17.067-26.169 38.116-58.596 75.093-68.836 36.409-9.671 70.543 7.396 97.849 21.617 13.653 6.827 30.151 15.36 38.684 15.36s25.6-8.533 38.684-15.36c27.307-13.653 61.44-31.289 97.849-21.617 37.547 9.671 58.027 42.667 75.093 68.836 7.396 11.947 17.636 27.876 24.463 31.857s25.031 4.551 40.391 5.689c30.72 1.707 68.836 3.413 96.143 30.151 27.307 27.876 29.013 65.991 30.72 96.711 0.569 14.791 1.707 33.564 5.689 40.391 3.413 6.257 19.911 16.497 31.289 23.893 26.169 17.067 58.596 38.116 68.836 75.093 9.671 36.409-7.396 70.543-21.617 97.849-6.827 13.653-15.36 30.151-15.36 38.684s8.533 25.6 15.36 38.684c14.223 27.307 31.289 61.44 21.617 97.849-9.671 37.547-42.667 58.027-68.836 75.093-11.947 7.396-27.876 17.636-31.857 24.463s-4.551 25.031-5.689 40.391c-1.707 30.72-3.413 68.836-30.151 96.143-27.876 27.307-65.991 29.013-96.711 30.72-14.791 0.569-33.564 1.707-40.391 5.689-6.257 3.413-16.497 19.911-23.893 31.289-17.067 26.169-38.116 58.596-75.093 68.836-7.396 2.276-14.791 2.844-22.187 2.844zM398.223 85.333s0 0-0.569 0c-5.689 2.276-18.773 21.617-25.031 32.427-13.653 21.049-29.013 44.943-53.476 59.164-25.031 14.223-53.476 15.929-79.076 17.067-12.516 0.569-35.84 1.707-40.96 5.689-3.413 4.551-4.551 27.307-5.12 39.823-1.137 25.6-2.844 54.044-17.067 78.507s-38.116 39.823-59.164 53.476c-10.809 6.827-30.151 19.343-32.427 25.6-0.569 6.257 9.103 25.6 14.791 36.977 11.377 22.756 25.031 48.356 25.031 77.369s-13.084 54.613-25.031 77.369c-5.689 11.377-15.929 30.72-14.791 36.977 2.276 5.689 21.617 18.773 32.427 25.031 21.049 13.653 44.943 29.013 59.164 53.476 14.223 25.031 15.929 53.476 17.067 79.076 0.569 12.516 1.707 35.84 5.689 40.96 4.551 3.413 27.307 4.551 39.823 5.12 25.6 1.137 54.044 2.844 78.507 17.067s39.823 38.116 53.476 59.164c6.827 10.809 19.343 30.151 25.6 32.427 5.689 1.707 25.6-9.103 36.977-14.791 22.756-11.377 48.356-25.031 77.369-25.031s54.613 13.084 77.369 25.031c11.377 5.689 29.583 16.497 36.977 14.791 5.689-2.276 18.773-21.617 25.031-32.427 13.653-21.049 29.013-44.943 53.476-59.164 25.031-14.223 53.476-15.929 79.076-17.067 12.516-0.569 35.84-1.707 40.96-5.689 3.413-4.551 4.551-27.307 5.12-39.823 1.137-25.6 2.844-54.044 17.067-78.507s38.116-39.823 59.164-53.476c10.809-6.827 30.151-19.343 32.427-25.6 0.569-6.257-9.103-25.6-14.791-36.977-11.377-22.756-25.031-48.356-25.031-77.369s13.084-54.613 25.031-77.369c5.689-11.377 15.36-30.72 14.791-36.977-2.276-6.257-22.187-18.773-32.427-25.6-21.049-13.653-44.943-29.013-59.164-53.476-14.223-25.031-15.929-53.476-17.067-79.076-0.569-12.516-1.707-35.84-5.689-40.96-4.551-3.413-27.307-4.551-39.823-5.12-25.6-1.137-54.044-2.844-78.507-17.067s-39.823-38.116-53.476-59.164c-6.827-10.809-19.343-30.151-25.6-32.427-5.689-1.707-25.6 9.103-36.977 14.791-22.756 11.377-48.356 25.031-77.369 25.031s-54.613-13.084-77.369-25.031c-11.377-5.689-29.583-14.791-36.409-14.791zM938.667 397.084s0 0 0 0v0zM426.097 711.68v0c-11.377 0-22.187-4.551-30.151-12.516l-142.791-142.791c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l112.64 112.64 283.876-283.876c16.497-16.497 43.804-16.497 60.303 0s16.497 43.804 0 60.303l-314.027 314.027c-7.964 7.964-18.773 12.516-30.151 12.516z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["verified"]},"attrs":[{}],"properties":{"order":331,"id":259,"name":"verified","prevSize":80,"code":59906},"setIdx":0,"setId":1,"iconIdx":2},{"icon":{"paths":["M799.19 390.096l-121.904 121.904 121.904 121.904c15.924 15.924 15.924 42.282 0 58.207-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081l-121.904-121.904-121.904 121.904c-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081c-15.924-15.924-15.924-42.282 0-58.207l121.904-121.904-121.904-121.904c-15.924-15.924-15.924-42.282 0-58.207s42.282-15.924 58.207 0l121.904 121.904 121.904-121.904c15.924-15.924 42.282-15.924 58.207 0s15.924 42.282 0 58.207zM1023.778 237.441v549.119c0 52.715-42.831 96.096-96.096 96.096h-655.098c-33.497 0-63.697-17.023-81.27-45.028l-180.66-289.385c-13.728-21.965-13.728-50.518 0-73.033l180.66-288.837c17.571-28.005 48.323-45.028 81.27-45.028h655.648c52.715 0 96.096 43.381 96.096 96.096zM941.41 237.441c0-7.687-6.040-13.728-13.728-13.728h-655.098c-4.942 0-9.335 2.197-11.531 6.589l-176.267 281.698 176.267 281.698c2.745 3.844 7.139 6.589 11.531 6.589h655.648c7.687 0 13.728-6.040 13.728-13.728v-549.119z"],"attrs":[{}],"grid":16,"tags":["delete-left"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":330,"id":258,"name":"delete-left","prevSize":80,"code":59907},"setIdx":0,"setId":1,"iconIdx":3},{"icon":{"paths":["M877.707 936.219h-38.619c-22.234-79.578-90.695-277.351-257.457-424.219 166.762-146.867 235.222-344.642 257.457-424.219h38.619c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885h-731.412c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h38.619c22.234 79.578 90.695 277.351 257.457 424.219-166.762 146.867-235.222 344.642-257.457 424.219h-38.619c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h731.412c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885zM276.778 87.781h469.859c-26.331 83.089-93.621 248.679-235.222 367.462-141.601-119.366-208.891-284.373-235.222-367.462zM512 568.758c141.601 119.366 208.891 284.373 235.222 367.462h-470.444c26.331-83.089 93.621-248.681 235.222-367.462z"],"attrs":[{}],"grid":16,"tags":["hourglass"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":329,"id":257,"name":"hourglass","prevSize":80,"code":59902},"setIdx":0,"setId":1,"iconIdx":4},{"icon":{"paths":["M816.58 221.265h-110.756v-41.534c0-53.163-43.749-96.912-96.912-96.912h-512.247c-53.163 0-96.912 43.749-96.912 96.912v498.402c0 53.163 43.749 96.912 96.912 96.912h15.506c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h85.836c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h15.506c53.163 0 96.912-43.749 96.912-96.912v-249.201c0-114.633-93.035-207.668-207.668-207.668zM82.82 678.134v-498.402c0-7.752 6.091-13.845 13.845-13.845h512.247c7.752 0 13.845 6.091 13.845 13.845v439.701s-2.768 3.323-4.43 4.43c-8.307 7.2-16.059 14.952-23.259 23.259-2.216 2.768-4.43 4.984-6.091 7.752-8.307 11.629-16.059 23.259-21.043 36.55h-110.756s0 0 0-0.554c0 0 0 0 0 0-3.877-9.414-9.414-18.829-14.952-27.136-1.661-2.216-3.323-4.43-4.984-7.2-4.43-6.645-9.414-12.184-14.952-18.275-2.216-2.216-3.877-4.43-6.091-6.645-7.2-6.645-14.398-12.737-22.152-18.275-1.107-0.554-1.661-1.661-2.768-2.216-8.307-5.538-17.168-9.968-26.027-14.398-3.323-1.661-6.645-2.768-9.968-3.877-7.2-2.768-13.845-4.984-21.043-6.645-3.323-0.554-6.645-1.661-9.968-2.216-10.522-2.216-21.597-3.323-32.673-3.323s-21.597 1.107-32.673 3.323c-3.323 0.554-6.645 1.661-9.968 2.216-7.2 1.661-14.398 3.877-21.043 6.645-3.323 1.107-6.645 2.216-9.968 3.877-8.861 3.877-17.721 8.861-26.027 14.398-1.107 0.554-1.661 1.107-2.768 2.216-7.752 5.538-15.506 11.629-22.152 18.275-2.216 2.216-4.43 4.43-6.091 6.645-5.538 5.538-10.522 11.629-14.952 18.275-1.661 2.216-3.323 4.43-4.984 7.2-5.538 8.861-10.522 17.721-14.952 27.136 0 0 0 0 0 0s0 0 0 0.554h-27.689c-7.752 0-13.845-6.091-13.845-13.845zM290.487 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 2.216-9.968 6.091-19.382 11.075-27.689 0.554-1.661 1.661-2.768 2.216-4.43 4.984-7.752 11.075-14.952 18.275-21.043 1.661-1.107 2.768-2.216 4.43-3.323 7.2-5.538 15.506-10.522 24.366-13.845 1.107 0 2.768-1.107 4.43-1.107 9.414-3.323 19.936-5.538 30.458-5.538s20.49 2.216 30.458 5.538c1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM733.513 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 1.661-6.645 3.323-13.291 6.091-19.382 0 0 0-0.554 0-1.107 2.768-5.538 5.538-11.075 9.414-16.059 0.554-1.107 1.661-1.661 2.216-2.768 3.323-4.43 6.645-8.307 10.522-12.184 1.107-1.107 2.216-1.661 3.323-2.768 3.877-3.323 8.307-6.645 12.737-9.414 1.107-0.554 2.768-1.661 4.43-2.216 4.984-2.768 10.522-4.984 16.059-6.645 2.216-0.554 4.43-1.661 7.2-2.216 7.2-1.661 14.952-2.768 22.705-2.768 10.522 0 20.49 2.216 30.458 5.538 1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM705.823 470.466v-166.134h110.756c68.669 0 124.601 55.931 124.601 124.601v41.534h-235.356z"],"attrs":[{}],"grid":16,"tags":["truck"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":328,"id":256,"name":"truck","prevSize":80,"code":59904},"setIdx":0,"setId":1,"iconIdx":5},{"icon":{"paths":["M168.104 1023.75v0c-44.45 0-86.559-17.546-118.726-49.128-65.505-65.505-65.505-171.363 0-236.867l322.256-322.256c-29.242-113.462 2.34-235.698 85.389-318.747 83.634-83.634 206.454-116.387 320.502-85.389 15.206 4.094 26.904 15.791 30.997 30.997s0 30.997-11.113 42.11l-143.29 143.29 30.413 111.707 111.707 30.413 143.29-143.29c11.113-11.113 27.488-15.206 42.11-11.113 15.206 4.094 26.904 15.791 30.997 30.997 30.997 114.047-1.169 236.867-85.389 320.502-83.050 83.050-205.285 114.633-318.747 85.389l-322.256 322.256c-31.582 31.582-73.692 49.128-118.142 49.128zM668.742 89.148c-56.146 4.678-109.369 29.242-150.308 70.183-66.674 66.674-88.314 164.345-56.146 254.413 5.849 15.791 1.755 33.922-10.527 45.619l-340.973 340.973c-30.997 30.997-30.997 81.88 0 112.878 15.206 15.206 35.091 23.395 56.732 23.395v0c21.055 0 41.524-8.188 56.146-23.395l340.973-340.973c12.282-12.282 29.828-15.791 45.619-10.527 90.069 31.582 187.739 10.527 254.413-56.146 40.941-40.941 64.919-94.162 70.183-150.308l-95.332 95.332c-11.113 11.113-27.488 15.206-42.695 11.113l-160.252-43.864c-15.206-4.094-26.904-15.791-30.997-30.997l-43.864-160.252c-4.094-15.206 0-31.582 11.113-42.695l95.332-95.332z"],"attrs":[{}],"grid":16,"tags":["wrench"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":325,"id":255,"name":"wrench","prevSize":80,"code":59903},"setIdx":0,"setId":1,"iconIdx":6},{"icon":{"paths":["M495.693 730.292h32.612c77.849 0 140.443-64.699 140.443-144.651v-389.243c0-79.953-63.121-144.651-140.443-144.651h-32.612c-77.849 0-140.443 64.699-140.443 144.651v388.718c0 79.953 63.121 144.651 140.443 144.651zM434.151 196.397c0-36.294 27.877-65.751 61.542-65.751h32.612c34.19 0 61.542 29.456 61.542 65.751v388.718c0 36.294-27.877 65.751-61.542 65.751h-32.612c-34.19 0-61.542-29.456-61.542-65.751v-388.718zM814.452 374.712v222.5c0 147.807-116.773 267.736-263.003 275.101v99.941c0 21.566-17.885 39.45-39.45 39.45s-39.45-17.885-39.45-39.45v-99.941c-146.229-7.364-263.002-127.293-263.002-275.101v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45v222.5c0 108.883 88.896 197.779 198.304 197.779h51.023c109.409 0 198.304-88.896 198.304-197.779v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microphone"]},"attrs":[{}],"properties":{"order":323,"id":254,"name":"microphone","prevSize":80,"code":59898},"setIdx":0,"setId":1,"iconIdx":7},{"icon":{"paths":["M906.87 28.172h-85.757c-64.638 0-117.117 52.479-117.117 117.117v28.799l-607.985 130.557v-32.639c0-26.239-21.76-47.999-47.999-47.999s-47.999 21.76-47.999 47.999v447.99c0 26.239 21.76 47.999 47.999 47.999s47.999-21.76 47.999-47.999v-40.319l607.985 130.557v28.799c0 64.638 52.479 117.117 117.117 117.117h85.757c64.638 0 117.117-52.479 117.117-117.117v-693.744c0-64.638-52.479-117.117-117.117-117.117zM96.011 581.118v-178.556l607.985-130.557v439.669l-607.985-130.557zM927.989 839.033c0 11.52-9.6 21.119-21.119 21.119h-85.757c-11.52 0-21.119-9.6-21.119-21.119v-693.744c0-11.52 9.6-21.119 21.119-21.119h85.757c11.52 0 21.119 9.6 21.119 21.119v693.744zM574.079 872.311c-23.68 74.238-92.158 124.156-170.876 124.156-98.558 0-179.196-79.359-179.196-175.995 0-7.039 0-14.719 1.279-21.76 3.199-26.239 27.52-44.799 53.759-41.598s44.799 26.879 41.598 53.118c0 3.199 0 6.4 0 9.6 0 44.159 37.12 79.998 83.198 79.998 36.479 0 68.478-23.039 79.359-56.958 7.68-25.6 35.2-39.679 60.159-31.36 25.6 7.68 39.040 35.2 31.36 60.159z"],"attrs":[{}],"grid":16,"tags":["megaphone"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":322,"id":253,"name":"megaphone","prevSize":80,"code":59899},"setIdx":0,"setId":1,"iconIdx":8},{"icon":{"paths":["M1023.949 776.232c0 27.083-22.46 49.543-49.543 49.543h-805.246l80.59 80.59c19.156 19.156 19.156 50.864 0 70.022-9.909 9.909-22.46 14.533-35.010 14.533s-25.101-4.625-35.010-14.533l-165.145-165.145c-4.625-4.625-7.927-9.909-10.57-15.854-5.284-11.89-5.284-25.763 0-37.653 2.643-5.945 5.945-11.229 10.57-15.854l165.145-165.145c19.156-19.156 50.864-19.156 70.022 0s19.156 50.864 0 70.022l-80.59 80.59h805.246c27.083 0 49.543 22.46 49.543 49.543zM49.594 297.311h805.246l-80.59 80.59c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l165.145-165.145c4.625-4.625 7.927-9.909 10.57-15.854 5.284-11.89 5.284-25.763 0-37.653-2.643-5.945-5.945-11.229-10.57-15.854l-165.145-165.145c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l80.59 80.59h-805.246c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-right-arrow-left"]},"attrs":[{}],"properties":{"order":321,"id":252,"name":"arrow-right-arrow-left","prevSize":80,"code":59900},"setIdx":0,"setId":1,"iconIdx":9},{"icon":{"paths":["M609.223 618.817c-17.27 69.72-134.322 31.981-172.7 22.386l30.702-123.449c38.378 9.594 159.908 28.143 141.997 101.061zM509.441 348.895l-28.143 111.935c31.981 7.676 129.844 40.297 145.835-23.027 15.991-65.882-85.71-81.233-117.692-88.909zM1008.351 635.449c-68.44 273.76-346.039 440.703-620.44 372.904-273.76-68.44-441.343-346.039-372.904-619.8 68.44-274.4 346.039-440.703 620.44-372.904 273.76 68.44 441.343 346.039 372.904 619.8zM343.778 597.71c-2.559 7.035-9.594 17.27-25.586 13.432-2.559 0-40.937-10.235-40.937-10.235l-28.143 63.963 72.918 17.91c14.072 3.838 26.864 7.035 40.297 10.873l-23.027 92.747 55.648 14.072 23.027-92.106c15.351 4.478 30.062 7.676 44.774 11.513l-23.027 91.466 56.288 14.072 23.027-92.747c95.944 17.91 168.222 10.873 198.285-76.115 24.305-69.72-1.279-110.017-51.81-136.241 36.459-8.316 63.963-32.621 71.639-82.512 10.235-67.801-41.575-104.899-112.574-128.565l23.027-92.747-56.288-14.072-22.386 89.547c-14.711-3.838-30.062-7.035-45.413-10.873l22.386-90.188-55.648-14.072-23.027 92.106c-12.153-2.559-24.305-5.757-35.819-8.316l-77.395-19.829-14.711 60.126s40.937 9.594 40.937 10.235c22.386 5.757 26.224 20.468 26.224 32.621l-63.323 252.653z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bitcoin"]},"attrs":[{}],"properties":{"order":320,"id":251,"name":"bitcoin","prevSize":80,"code":59901},"setIdx":0,"setId":1,"iconIdx":10},{"icon":{"paths":["M290.603 885.606h-83.024c-38.191 0-69.186-30.995-69.186-69.186v-664.188c0-38.191 30.995-69.186 69.186-69.186h207.559v262.908c0 22.693 18.819 41.512 41.512 41.512h265.675c5.535 16.051 20.48 27.674 38.745 27.674 22.693 0 41.512-18.819 41.512-41.512v-27.674c0-5.535-1.107-11.069-3.321-16.051s-4.981-9.409-8.856-13.284l-304.42-304.42c-3.875-3.875-8.302-6.642-13.284-8.856s-10.517-3.321-16.051-3.321h-249.071c-84.13 0-152.209 68.079-152.209 152.209v664.188c0 84.13 68.079 152.209 152.209 152.209h83.024c22.693 0 41.512-18.819 41.512-41.512s-18.819-41.512-41.512-41.512zM498.162 141.715l162.726 162.726h-162.726v-162.726zM933.206 477.13c-21.032-21.032-52.029-33.763-84.13-34.316-33.209-1.66-64.758 11.069-85.791 32.655l-353.68 354.234c-7.196 7.196-11.069 16.051-12.177 26.014l-9.963 123.429c-1.107 12.177 3.321 24.353 12.177 32.655 7.748 7.748 18.265 12.177 29.335 12.177 1.107 0 2.214 0 3.875 0l124.535-11.623c9.409-1.107 18.819-4.981 25.461-12.177l353.68-354.234c44.279-43.726 42.618-122.875-3.321-168.814zM877.858 587.275l-343.164 343.717-60.331 5.535 4.427-58.67 343.164-343.717c5.535-5.535 15.498-7.748 25.461-8.302 11.069 0 21.032 3.875 27.121 9.963 13.284 12.73 14.944 39.851 3.321 51.475z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-edit"]},"attrs":[{}],"properties":{"order":319,"id":250,"name":"file-edit","prevSize":80,"code":59894},"setIdx":0,"setId":1,"iconIdx":11},{"icon":{"paths":["M1021.466 949.618l-177.541-496.402c-12.469-32.659-40.377-52.846-72.441-52.846s-59.379 20.189-73.035 54.035l-176.948 495.215c-8.313 23.158 3.563 48.691 26.72 57.003s48.691-3.563 57.003-26.72l36.814-102.724h258.296l36.814 102.724c6.531 18.408 23.752 29.689 42.158 29.689 4.75 0 10.094-0.594 14.845-2.376 23.158-8.313 35.033-33.846 26.72-57.003zM674.697 787.515l97.38-272.547 97.38 272.547h-194.761zM523.282 265.579c-134.195 211.981-255.327 340.238-402.585 425.743-7.125 4.157-14.845 5.938-21.97 5.938-15.438 0-30.283-7.72-38.595-21.97-12.469-21.376-5.344-48.691 16.032-60.566 124.694-72.441 226.826-176.354 341.425-348.55h-373.489c-24.345 0-44.534-20.189-44.534-44.534s20.189-44.534 44.534-44.534h222.669v-117.569c0-24.345 20.189-44.534 44.534-44.534s44.534 20.189 44.534 44.534v117.569h222.669c24.345 0 44.534 20.189 44.534 44.534s-20.189 44.534-44.534 44.534h-55.816zM525.657 697.26c-7.72 0-15.438-1.781-22.563-5.938-38.595-22.563-76.004-47.502-111.038-73.63-19.595-14.845-23.752-42.752-8.907-62.347s42.752-23.752 62.347-8.907c32.064 24.345 67.097 46.909 102.724 67.691 21.376 12.469 28.502 39.784 16.032 61.16-8.313 14.251-23.158 21.97-38.595 21.97z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["language"]},"attrs":[{}],"properties":{"order":318,"id":249,"name":"language","prevSize":80,"code":59895},"setIdx":0,"setId":1,"iconIdx":12},{"icon":{"paths":["M696.881 725.324c-23.323 0-42.665 19.342-42.665 42.665v85.33c0 39.252-31.856 71.108-71.108 71.108h-426.648c-39.252 0-71.108-31.856-71.108-71.108v-682.637c0-39.252 31.856-71.108 71.108-71.108h184.881v270.211c0 23.323 19.342 42.665 42.665 42.665h270.211v71.108c0 23.323 19.342 42.665 42.665 42.665s42.665-19.342 42.665-42.665v-113.772c0-11.377-4.55-22.186-12.515-30.149l-312.876-312.876c-7.964-7.964-18.773-12.515-30.149-12.515h-227.546c-86.467 0-156.437 69.97-156.437 156.437v682.637c0 86.467 69.97 156.437 156.437 156.437h426.648c86.467 0 156.437-69.97 156.437-156.437v-85.33c0-23.323-19.342-42.665-42.665-42.665zM426.67 159.872l167.246 167.246h-167.246v-167.246zM1020.565 642.27c-2.276 5.12-5.12 9.67-9.102 13.653l-170.659 170.659c-8.533 8.533-19.342 12.515-30.149 12.515s-21.616-3.982-30.149-12.515c-16.497-16.497-16.497-43.802 0-60.3l97.845-97.845h-494.343c-23.323 0-42.665-19.342-42.665-42.665s19.342-42.665 42.665-42.665h494.343l-97.845-97.845c-16.497-16.497-16.497-43.802 0-60.3s43.802-16.497 60.3 0l170.659 170.659c3.982 3.982 6.826 8.533 9.102 13.653 4.55 10.24 4.55 22.186 0 32.425z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-export"]},"attrs":[{}],"properties":{"order":317,"id":248,"name":"file-export","prevSize":80,"code":59896},"setIdx":0,"setId":1,"iconIdx":13},{"icon":{"paths":["M537.031 668.444h-494.364c-23.324 0-42.667-19.343-42.667-42.667s19.343-42.667 42.667-42.667h494.364l-97.849-97.849c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l170.667 170.667c3.983 3.983 6.827 8.533 9.103 13.653 4.551 10.24 4.551 22.187 0 32.427-2.276 5.12-5.12 9.671-9.103 13.653l-170.667 170.667c-8.533 8.533-19.343 12.516-30.151 12.516s-21.617-3.983-30.151-12.516c-16.497-16.497-16.497-43.804 0-60.303l97.849-97.849zM1024 369.777v483.556c0 86.471-69.973 156.444-156.444 156.444h-426.667c-86.471 0-156.444-69.973-156.444-156.444v-56.889c0-23.324 19.343-42.667 42.667-42.667s42.667 19.343 42.667 42.667v56.889c0 39.253 31.857 71.111 71.111 71.111h426.667c39.253 0 71.111-31.857 71.111-71.111v-440.889h-270.223c-23.324 0-42.667-19.343-42.667-42.667v-270.223h-184.889c-39.253 0-71.111 31.857-71.111 71.111v284.444c0 23.324-19.343 42.667-42.667 42.667s-42.667-19.343-42.667-42.667v-284.444c0-86.471 69.973-156.444 156.444-156.444h227.556c11.377 0 22.187 4.551 30.151 12.516l312.889 312.889c7.964 7.964 12.516 18.773 12.516 30.151zM711.111 327.111h167.253l-167.253-167.253v167.253z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-import"]},"attrs":[{}],"properties":{"order":316,"id":247,"name":"file-import","prevSize":80,"code":59897},"setIdx":0,"setId":1,"iconIdx":14},{"icon":{"paths":["M894.076 334.712l-321.811-321.811c-8.191-8.191-19.309-12.873-31.010-12.873h-263.299c-88.936 0-160.905 71.968-160.905 160.905v702.132c0 88.936 71.968 160.905 160.905 160.905h468.087c88.936 0 160.905-71.968 160.905-160.905v-497.344c0-11.702-4.68-22.819-12.873-31.010zM585.138 149.817l172.022 172.022h-172.022v-172.022zM746.044 936.204h-468.087c-40.373 0-73.138-32.766-73.138-73.138v-702.132c0-40.373 32.766-73.138 73.138-73.138h219.416v277.928c0 23.989 19.894 43.883 43.883 43.883h277.928v453.46c0 40.373-32.766 73.138-73.138 73.138zM758.916 554.128l-87.766 292.554c-5.266 17.553-21.65 30.426-40.373 31.010-0.586 0-1.17 0-1.755 0-18.139 0-33.937-11.118-40.958-27.5l-76.065-190.745-76.065 190.745c-7.021 17.553-23.989 28.671-42.713 27.5-18.723-0.586-34.521-13.457-40.373-31.010l-87.766-292.554c-7.021-23.405 6.436-47.979 29.255-54.415 23.405-7.021 47.394 6.436 54.415 29.255l51.49 172.022 70.213-176.118c13.457-33.351 68.458-33.351 81.331 0l70.213 176.118 51.49-172.022c7.021-23.405 31.596-36.276 54.415-29.255 23.405 7.021 36.276 31.596 29.255 54.415z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-word"]},"attrs":[{}],"properties":{"order":311,"id":246,"name":"file-word","prevSize":80,"code":59889},"setIdx":0,"setId":1,"iconIdx":15},{"icon":{"paths":["M950.832 263.329h-81.915c23.405-28.085 38.032-63.192 38.032-102.395 0-88.936-71.968-160.905-160.905-160.905-98.298 0-184.895 52.074-234.044 129.309-49.149-77.234-135.746-129.309-234.044-129.309-88.936 0-160.905 71.968-160.905 160.905 0 39.203 14.628 74.309 38.032 102.395h-81.915c-40.373 0-73.138 32.766-73.138 73.138v146.278c0 35.107 25.16 63.192 58.511 70.213v397.874c0 40.373 32.766 73.138 73.138 73.138h760.643c40.373 0 73.138-32.766 73.138-73.138v-397.874c33.351-7.021 58.511-35.107 58.511-70.213v-146.278c0-40.373-32.766-73.138-73.138-73.138zM936.204 468.117h-380.321v-117.021h380.321v117.021zM746.044 87.796c40.373 0 73.138 32.766 73.138 73.138s-32.766 73.138-73.138 73.138h-184.895c19.894-83.67 95.373-146.278 184.895-146.278zM277.956 87.796c89.522 0 165.001 62.606 184.895 146.278h-184.895c-40.373 0-73.138-32.766-73.138-73.138s32.766-73.138 73.138-73.138zM87.796 351.095h380.321v117.021h-380.321v-117.021zM146.306 555.883h321.811v380.321h-321.811v-380.321zM877.694 936.204h-321.811v-380.321h321.811v380.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["gift"]},"attrs":[{}],"properties":{"order":312,"id":245,"name":"gift","prevSize":80,"code":59890},"setIdx":0,"setId":1,"iconIdx":16},{"icon":{"paths":["M417.791 482.743c0-23.991 19.896-43.886 43.886-43.886h73.143v-73.143c0-23.991 19.896-43.886 43.886-43.886s43.886 19.896 43.886 43.886v73.143h73.143c23.991 0 43.886 19.896 43.886 43.886s-19.896 43.886-43.886 43.886h-73.143v73.143c0 23.991-19.896 43.886-43.886 43.886s-43.886-19.896-43.886-43.886v-73.143h-73.143c-23.991 0-43.886-19.896-43.886-43.886zM468.114 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM848.461 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM1022.836 259.215l-117.029 468.119c-4.681 19.31-22.235 33.354-42.716 33.354h-585.15c-21.065 0-39.205-15.213-43.301-36.279l-110.593-607.385h-80.165c-23.991 0-43.886-19.896-43.886-43.886s19.896-43.886 43.886-43.886h117.029c21.065 0 39.205 15.213 43.301 36.279l25.162 139.266h750.746c13.458 0 26.332 6.436 34.523 16.969s11.118 24.576 8.192 37.45zM923.945 292.569h-678.773l69.048 380.347h514.346l94.794-380.347z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-plus"]},"attrs":[{}],"properties":{"order":313,"id":244,"name":"cart-plus","prevSize":80,"code":59891},"setIdx":0,"setId":1,"iconIdx":17},{"icon":{"paths":["M1023.898 103.121v369.207c0 56.948-46.711 103.659-103.659 103.659h-103.019v-575.886h103.019c57.589 0 103.659 46.071 103.659 103.019zM85.844 79.445l-84.463 479.905c-10.238 58.868 34.553 112.617 94.702 112.617h305.86v223.955c0 70.386 57.589 127.974 127.335 127.974h5.759c25.595 0 48.631-15.357 58.868-39.033l174.685-408.879v-575.886s-588.683 0-588.683 0c-46.711 0-86.383 33.274-94.702 79.345z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-down-fill"]},"attrs":[{}],"properties":{"order":314,"id":243,"name":"thumbs-down-fill","prevSize":80,"code":59892},"setIdx":0,"setId":1,"iconIdx":18},{"icon":{"paths":["M207.428 448.014v575.872h-103.017c-57.587 0-103.657-46.070-103.657-103.017v-369.198c0-56.947 46.71-103.657 103.657-103.657h103.017zM927.907 352.035h-305.852v-223.95c0-70.384-57.587-127.971-127.332-127.971h-5.759c-25.595 0-48.63 15.357-58.866 39.032l-174.681 408.869v575.872s588.668 0 588.668 0c46.71 0 86.381-33.273 94.699-79.343l84.461-479.893c10.238-58.866-34.552-112.614-94.699-112.614z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-up-fill"]},"attrs":[{}],"properties":{"order":315,"id":242,"name":"thumbs-up-fill","prevSize":80,"code":59893},"setIdx":0,"setId":1,"iconIdx":19},{"icon":{"paths":["M1020.467 528.967c-2.341 5.266-5.266 9.946-9.362 14.042l-146.281 146.281c-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873c-16.967-16.967-16.967-45.053 0-62.024l71.384-71.384h-318.304v318.304l71.384-71.384c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-146.281 146.281c-4.096 4.096-8.774 7.021-14.042 9.362s-11.117 3.513-16.967 3.513-11.701-1.17-16.967-3.513c-5.266-2.341-9.946-5.266-14.042-9.362l-146.281-146.281c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l71.384 71.384v-318.304h-318.304l71.384 71.384c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-146.281-146.281c-4.096-4.096-7.021-8.774-9.362-14.042-4.681-10.532-4.681-22.82 0-33.35 2.341-5.266 5.266-9.946 9.362-14.042l146.281-146.281c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-71.384 71.384h318.304v-318.889l-71.384 71.384c-16.967 16.967-45.053 16.967-62.024 0s-16.967-45.053 0-62.024l146.281-146.281c4.096-4.096 8.774-7.021 14.042-9.362 10.532-4.681 22.82-4.681 33.35 0 5.266 2.341 9.946 5.266 14.042 9.362l146.281 146.281c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-71.384-71.384v318.304h318.304l-71.384-71.384c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l146.281 146.281c4.096 4.096 7.021 8.774 9.362 14.042 4.681 10.532 4.681 22.82 0 33.35z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-alt"]},"attrs":[{}],"properties":{"order":310,"id":241,"name":"arrows-alt","prevSize":80,"code":59888},"setIdx":0,"setId":1,"iconIdx":20},{"icon":{"paths":["M695.789 315.083h-367.579c-14.704 0-26.255-11.553-26.255-26.255v-78.767c0-14.704 11.553-26.255 26.255-26.255h367.579c14.704 0 26.255 11.553 26.255 26.255v78.767c0 14.704-11.553 26.255-26.255 26.255zM722.045 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-210.045c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h210.045c14.704 0 26.255-11.553 26.255-26.255zM892.706 905.834v-787.668c0-65.114-53.036-118.15-118.15-118.15h-525.113c-65.114 0-118.15 53.036-118.15 118.15v787.668c0 65.114 53.036 118.15 118.15 118.15h525.113c65.114 0 118.15-53.036 118.15-118.15zM774.556 78.782c21.529 0 39.383 17.854 39.383 39.383v787.668c0 21.529-17.854 39.383-39.383 39.383h-525.113c-21.529 0-39.383-17.854-39.383-39.383v-787.668c0-21.529 17.854-39.383 39.383-39.383h525.113z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["calculator"]},"attrs":[{}],"properties":{"order":308,"id":240,"name":"calculator","prevSize":80,"code":59887},"setIdx":0,"setId":1,"iconIdx":21},{"icon":{"paths":["M117.634 249.75l80.59-80.59v375.869c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-375.869l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0z","M906.366 774.25l-80.59 80.59v-375.869c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v375.869l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M976.388 117.634c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0l-80.59 80.59v-78.608c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v177.695l-679.075 679.075c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l80.59-80.59v78.608c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-177.695l679.075-679.075z"],"attrs":[{},{},{}],"grid":16,"tags":["sort-alt-slash"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":306,"id":239,"name":"sort-alt-slash","prevSize":80,"code":59886},"setIdx":0,"setId":1,"iconIdx":22},{"icon":{"paths":["M1020.451 495.033c-2.348-5.441-5.502-10.097-9.37-14.051l-234.032-234.032c-8.033-8.604-19.443-13.967-32.105-13.967-24.235 0-43.882 19.647-43.882 43.882 0 12.663 5.363 24.072 13.941 32.081l0.026 0.023 159.147 159.147h-724.353l159.147-159.147c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-234.040 234.040c-3.859 3.945-7.014 8.601-9.247 13.748l-0.114 0.295c-2.222 5-3.515 10.833-3.515 16.967s1.293 11.968 3.623 17.242l-0.108-0.273c2.348 5.441 5.502 10.097 9.37 14.051l234.032 234.032c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0c7.929-7.939 12.834-18.902 12.834-31.010s-4.904-23.071-12.834-31.011v0l-159.147-159.147h724.353l-159.147 159.147c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l234.040-234.040c3.859-3.945 7.014-8.601 9.247-13.748l0.114-0.295c2.222-5 3.515-10.833 3.515-16.967s-1.293-11.968-3.623-17.242l0.108 0.273z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-h"]},"attrs":[{}],"properties":{"order":305,"id":238,"name":"arrows-h","prevSize":80,"code":59884},"setIdx":0,"setId":1,"iconIdx":23},{"icon":{"paths":["M528.967 1020.451c5.441-2.348 10.097-5.502 14.051-9.37l234.032-234.032c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-159.147 159.147v-724.353l159.147 159.147c7.815 7.297 18.343 11.777 29.915 11.777 24.235 0 43.882-19.647 43.882-43.882 0-11.574-4.48-22.1-11.802-29.942l0.023 0.026-234.040-234.040c-3.945-3.859-8.601-7.014-13.748-9.247l-0.295-0.114c-5-2.222-10.833-3.515-16.967-3.515s-11.968 1.293-17.242 3.623l0.273-0.108c-5.441 2.348-10.097 5.502-14.051 9.37l-234.032 234.032c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l159.147-159.147v724.353l-159.147-159.147c-7.939-7.929-18.902-12.834-31.010-12.834s-23.071 4.904-31.011 12.834v0c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0l234.040 234.040c3.945 3.859 8.601 7.014 13.748 9.247l0.295 0.114c5 2.222 10.833 3.515 16.967 3.515s11.968-1.293 17.242-3.623l-0.273 0.108z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-v"]},"attrs":[{}],"properties":{"order":304,"id":237,"name":"arrows-v","prevSize":80,"code":59885},"setIdx":0,"setId":1,"iconIdx":24},{"icon":{"paths":["M836.060 936.086h-552.19l116.989-164.955c5.016-7 8.065-15.709 8.189-25.123v-190.138h190.108c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0h-191.863v-190.108c-0.156-2.816-0.245-6.11-0.245-9.427 0-99.824 80.924-180.749 180.749-180.749 1.732 0 3.459 0.025 5.178 0.073l-0.254-0.005c3.537-0.243 7.666-0.381 11.827-0.381 101.439 0 183.673 82.233 183.673 183.673 0 5.695-0.259 11.328-0.766 16.89l0.052-0.716v58.495c0 24.229 19.642 43.871 43.871 43.871s43.871-19.642 43.871-43.871v0-58.495c0.352-5.164 0.553-11.193 0.553-17.269 0-149.252-120.994-270.246-270.246-270.246-4.515 0-9.003 0.111-13.464 0.329l0.628-0.025c-1.804-0.044-3.929-0.069-6.060-0.069-147.637 0-267.321 119.684-267.321 267.321 0 3.728 0.077 7.436 0.228 11.127l-0.018-0.528v190.108h-131.613c-24.229 0-43.871 19.642-43.871 43.871s19.642 43.871 43.871 43.871v0h131.613v175.484l-155.595 223.45c-3.958 6.515-6.3 14.39-6.3 22.813s2.343 16.298 6.411 23.010l-0.111-0.197c7.358 14.007 21.805 23.398 38.447 23.398 0.056 0 0.112 0 0.169 0h633.489c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pound"]},"attrs":[{}],"properties":{"order":303,"id":236,"name":"pound","prevSize":80,"code":59883},"setIdx":0,"setId":1,"iconIdx":25},{"icon":{"paths":["M727.036 469.12l-70.398-16 55.038 78.078v242.556l187.516-156.157v-265.595l-86.398 30.719-85.758 86.398z","M289.285 469.12l-86.398-86.398-85.758-30.719v265.595l187.516 156.157v-242.556l55.038-78.078-70.398 16z","M586.238 476.8h-156.157l-39.040-23.68-62.718 94.078v351.993l46.72 69.759 55.038 55.038h156.157l55.038-55.038 46.72-69.759v-351.993l-62.718-94.078-39.040 23.68z","M711.676 922.231l101.117-101.758v-101.117l-101.117 85.758v117.118z","M202.886 820.473l101.758 101.758v-117.118l-101.758-85.758v101.117z","M453.122 445.442h39.679v-445.431h-86.398l-62.079 147.837-282.234-23.040 47.359 195.836 335.993 124.797h7.68z","M671.997 147.848l-62.079-147.837h-86.398v447.991h52.479l335.993-127.997 47.999-191.996z","M852.474 109.449l-110.078-109.438h-109.438l55.038 124.797 164.476-15.36z","M382.722 0.011h-109.438l-109.438 109.438 164.476 15.36 54.399-124.797z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["prime"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":307,"id":235,"name":"prime","prevSize":80,"code":59882},"setIdx":0,"setId":1,"iconIdx":26},{"icon":{"paths":["M589.605 64.373v-18.004c-0.345-25.576-20.987-46.218-46.53-46.563h-0.033c-300.373 1.794-543.179 245.708-543.179 546.331 0 98.823 26.237 191.517 72.126 271.496l-1.409-2.663c8.24 13.842 23.126 22.972 40.145 22.972 0.074 0 0.148 0 0.221 0h-0.012c8.464-0.017 16.386-2.321 23.186-6.325l-0.215 0.116 18.004-9.313c88.223 122.529 230.468 201.375 391.129 201.375 265.391 0 480.531-215.14 480.531-480.531 0-248.992-189.376-453.753-431.953-478.105l-2.014-0.163zM496.478 95.416v420.93l-365.676 209.844c-24.009-53.406-37.995-115.765-37.995-181.391 0-232.603 175.709-424.166 401.636-449.201l2.036-0.183zM543.042 931.068c-126.56-0.365-238.867-61.070-309.71-154.848l-0.712-0.982 333.392-191.84c14.165-7.849 23.596-22.711 23.596-39.775 0-0.204-0.001-0.407-0.004-0.611v0.031-384.921c192.214 25.131 339.099 187.876 339.099 384.928 0 213.47-172.379 386.677-385.534 388.018h-0.128z"],"attrs":[{}],"grid":16,"tags":["chart-pie"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":301,"id":234,"name":"chart-pie","prevSize":80,"code":59881},"setIdx":0,"setId":1,"iconIdx":27},{"icon":{"paths":["M399.361 614.401c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2c28.276 0 51.199 22.923 51.199 51.2v0c0 28.276-22.923 51.2-51.199 51.2v0zM1023.999 512c0 282.77-229.23 512-512 512s-512-229.23-512-512c0-282.77 229.23-512 512-512v0c282.769 0 512 229.23 512 512v0zM750.721 426.88c-18.359 1.113-34.69 8.976-46.715 21.114l-0.006 0.006c-49.923-33.418-111.167-53.62-177.080-54.397l-0.199-0.001 35.84-161.921 114.56 25.601c-0.003 0.191-0.005 0.416-0.005 0.641 0 27.924 22.636 50.56 50.56 50.56 0.002 0 0.003 0 0.005 0v0c28.355-0.361 51.2-23.43 51.2-51.836 0-0.001 0-0.003 0-0.004v0c0.016-0.492 0.027-1.071 0.027-1.653 0-27.924-22.637-50.56-50.561-50.56-20.408 0-37.99 12.090-45.978 29.498l-0.129 0.315-128-28.16c-0.688-0.138-1.481-0.217-2.292-0.217-5.656 0-10.412 3.862-11.77 9.093l-0.018 0.084-39.679 178.56c-66.101 0.974-127.301 21.143-178.501 55.164l1.221-0.764c-12.464-12.858-29.895-20.838-49.191-20.838-37.821 0-68.48 30.66-68.48 68.48 0 26.584 15.148 49.632 37.286 60.978l0.386 0.18c-0.468 4.795-0.733 10.366-0.733 16.001s0.267 11.205 0.787 16.701l-0.054-0.702c0 108.16 122.239 196.48 272.64 196.48s272.64-88.32 272.64-196.48c0-0.084 0-0.183 0-0.282 0-11.484-1.399-22.639-4.039-33.308l0.2 0.95c20.889-11.994 34.732-34.174 34.732-59.588 0-36.756-28.957-66.749-65.302-68.408l-0.15-0.006zM608.64 666.88c-27.226 17.349-60.409 27.649-96 27.649s-68.773-10.302-96.732-28.086l0.732 0.435c-2.268-2.080-5.305-3.355-8.64-3.355s-6.372 1.275-8.649 3.365l0.009-0.009c-2.426 2.23-3.939 5.418-3.939 8.959s1.514 6.729 3.93 8.952l0.009 0.008c31.918 21.918 71.391 35.004 113.921 35.004s82.002-13.086 114.611-35.451l-0.692 0.447c2.426-2.231 3.939-5.418 3.939-8.959s-1.514-6.729-3.93-8.952l-0.009-0.007c-2.337-2.457-5.63-3.984-9.28-3.984s-6.943 1.527-9.274 3.978l-0.005 0.006zM624.639 512c-28.277 0-51.2 22.923-51.2 51.2s22.923 51.2 51.2 51.2c28.276 0 51.199-22.923 51.199-51.2v0c0-28.277-22.923-51.2-51.199-51.2v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["reddit"]},"attrs":[{}],"properties":{"order":299,"id":233,"name":"reddit","prevSize":80,"code":59880},"setIdx":0,"setId":1,"iconIdx":28},{"icon":{"paths":["M367.461 188.397c-7.939-7.93-18.905-12.836-31.014-12.836s-23.074 4.905-31.015 12.836v0l-292.589 292.589c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0l292.589 292.589c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0l-261.574-261.574 261.574-261.574c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z","M1011.156 480.986l-292.589-292.589c-7.817-7.298-18.345-11.779-29.92-11.779-24.239 0-43.889 19.649-43.889 43.889 0 11.575 4.481 22.104 11.803 29.946l-0.023-0.027 261.574 261.574-261.574 261.574c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0l292.589-292.589c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["code"]},"attrs":[{},{}],"properties":{"order":298,"id":232,"name":"code","prevSize":80,"code":59879},"setIdx":0,"setId":1,"iconIdx":29},{"icon":{"paths":["M936.767 0.034c-27.214 0.367-49.178 22.331-49.545 49.509v160.562l-55.49-55.49c-86.69-87.405-206.835-141.515-339.617-141.515-209.345 0-387.277 134.501-452.092 321.801l-1.011 3.36c-2.53 5.71-4.002 12.369-4.002 19.374 0 21.825 14.301 40.308 34.044 46.591l0.347 0.094c2.483 0.454 5.34 0.712 8.257 0.712s5.775-0.259 8.55-0.756l-0.293 0.043c21.606-0.226 39.922-14.066 46.794-33.339l0.108-0.351c19.528-56.988 50.528-105.653 90.48-145.309l0.022-0.022c68.806-68.546 163.72-110.925 268.534-110.925s199.729 42.378 268.547 110.936l55.478 55.478h-159.205c-27.363 0-49.545 22.182-49.545 49.545s22.182 49.545 49.545 49.545v0h280.095c0.198 0.003 0.432 0.005 0.666 0.005 26.997 0 48.884-21.887 48.884-48.884 0-0.234-0.002-0.468-0.005-0.7v0.036-280.755c0-27.363-22.182-49.545-49.545-49.545v0z","M953.281 622.981c-5.442-2.202-11.755-3.479-18.366-3.479-22.122 0-40.903 14.308-47.591 34.174l-0.104 0.355c-19.528 56.988-50.528 105.653-90.48 145.309l-0.022 0.022c-68.806 68.546-163.72 110.925-268.534 110.925s-199.729-42.378-268.547-110.936l-55.478-55.478h163.169c27.363 0 49.545-22.182 49.545-49.545s-22.182-49.545-49.545-49.545v0h-280.095c-0.198-0.003-0.432-0.005-0.666-0.005-26.997 0-48.884 21.887-48.884 48.884 0 0.234 0.002 0.468 0.005 0.7v-0.036 280.095c0 27.363 22.182 49.545 49.545 49.545s49.545-22.182 49.545-49.545v0-160.526l55.49 55.49c86.69 87.405 206.835 141.515 339.617 141.515 209.345 0 387.277-134.501 452.092-321.801l1.011-3.36c1.72-4.786 2.714-10.307 2.714-16.060 0-21.835-14.317-40.328-34.076-46.602l-0.347-0.094z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sync"]},"attrs":[{},{}],"properties":{"order":297,"id":231,"name":"sync","prevSize":80,"code":59878},"setIdx":0,"setId":1,"iconIdx":30},{"icon":{"paths":["M950.857 292.571h-175.543v-29.257c0-145.425-117.889-263.314-263.314-263.314s-263.314 117.889-263.314 263.314v0 29.257h-175.543c-40.395 0-73.142 32.747-73.142 73.142v0 497.372c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-497.372c0-40.395-32.747-73.142-73.142-73.142v0zM336.457 263.315c0-96.949 78.594-175.543 175.543-175.543s175.543 78.594 175.543 175.543v0 29.257h-351.086zM936.228 863.086c0 40.395-32.747 73.142-73.142 73.142v0h-702.171c-40.395 0-73.142-32.747-73.142-73.142v0-482.743h160.914v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h351.086v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h160.914z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shopping-bag"]},"attrs":[{}],"properties":{"order":296,"id":230,"name":"shopping-bag","prevSize":80,"code":59877},"setIdx":0,"setId":1,"iconIdx":31},{"icon":{"paths":["M1023.969 301.19v-180.695c0-33.265-26.967-60.232-60.232-60.232v0h-903.474c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0h903.474c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0zM963.737 903.505h-903.474v-180.695h903.474zM963.737 602.347h-903.474v-180.695h903.474zM963.737 301.19h-903.474v-180.695h903.474z","M210.842 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["server"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":295,"id":229,"name":"server","prevSize":80,"code":59876},"setIdx":0,"setId":1,"iconIdx":32},{"icon":{"paths":["M926.005 99.103c-121.161-57.959-262.777-93.948-412.236-99.026l-1.769-0.048c-151.228 5.125-292.843 41.116-420.425 101.823l6.42-2.75c-32.977 15.76-55.351 48.848-55.351 87.164 0 0.296 0.001 0.59 0.004 0.885v-0.045 649.789c-0.003 0.249-0.004 0.545-0.004 0.839 0 38.315 22.376 71.404 54.773 86.914l0.58 0.25c121.161 57.959 262.777 93.948 412.236 99.026l1.769 0.048c151.228-5.125 292.843-41.116 420.425-101.823l-6.42 2.75c32.977-15.76 55.351-48.848 55.351-87.164 0-0.296-0.001-0.59-0.004-0.885v0.045-649.789c0.003-0.249 0.004-0.545 0.004-0.839 0-38.315-22.376-71.404-54.773-86.914l-0.58-0.25zM899.438 541.888c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-213.644c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618zM132.864 174.375c110.92-53.263 240.582-86.42 377.448-91.277l1.688-0.048c138.75 5.006 268.584 38.151 385.604 93.859l-5.915-2.535c4.63 2.445 7.734 7.224 7.748 12.728v48.156c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-49.813c0.619-4.997 3.823-9.121 8.213-11.035l0.090-0.035zM891.136 849.625c-110.92 53.263-240.582 86.42-377.448 91.277l-1.688 0.048c-138.75-5.006-268.584-38.151-385.604-93.859l5.915 2.535c-4.63-2.445-7.734-7.224-7.748-12.728v-204.238c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618v204.235c0 0.014 0 0.031 0 0.048 0 5.64-3.374 10.492-8.214 12.647l-0.088 0.035z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["database"]},"attrs":[{}],"properties":{"order":294,"id":228,"name":"database","prevSize":80,"code":59875},"setIdx":0,"setId":1,"iconIdx":33},{"icon":{"paths":["M984.598 262.573h-157.533l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-45.159 180.113h-338.696l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-47.26 180.113h-179.062c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-85.593 341.321h-176.962c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h338.696l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h181.163c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0h-157.533l85.593-341.321h176.962c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0zM722.044 341.339l-85.593 341.321h-334.495l85.593-341.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["hashtag"]},"attrs":[{}],"properties":{"order":293,"id":227,"name":"hashtag","prevSize":80,"code":59874},"setIdx":0,"setId":1,"iconIdx":34},{"icon":{"paths":["M731.351 0.181h-438.702c-88.839 0-160.857 72.018-160.857 160.857v0 818.91c-0.001 0.096-0.001 0.21-0.001 0.324 0 24.229 19.642 43.87 43.87 43.87 9.418 0 18.143-2.968 25.291-8.020l-0.137 0.092 311.186-217.011 311.186 217.011c6.914 4.763 15.47 7.606 24.689 7.606 0.163 0 0.325-0.001 0.488-0.003h-0.025c7.45-0.092 14.477-1.807 20.773-4.808l-0.3 0.129c13.96-7.76 23.279-22.374 23.398-39.173v-818.927c0-88.839-72.018-160.857-160.857-160.857v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bookmark-fill"]},"attrs":[{}],"properties":{"order":290,"id":226,"name":"bookmark-fill","prevSize":80,"code":59871},"setIdx":0,"setId":1,"iconIdx":35},{"icon":{"paths":["M1004.095 24.725c-7.747-14.706-22.885-24.586-40.34-24.695h-903.493c-17.471 0.11-32.608 9.989-40.236 24.445l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.173 0 10.136 3.43 19.471 9.191 26.908l-0.075-0.1 322.241 440.294v466.797c0.335 24.813 20.361 44.839 45.141 45.174h240.96c24.813-0.335 44.839-20.361 45.174-45.141v-466.83l322.241-440.294c5.688-7.337 9.117-16.671 9.117-26.808 0-7.369-1.813-14.314-5.016-20.414l0.116 0.241z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["filter-fill"]},"attrs":[{}],"properties":{"order":289,"id":225,"name":"filter-fill","prevSize":80,"code":59872},"setIdx":0,"setId":1,"iconIdx":36},{"icon":{"paths":["M940.27 142.985v0c-52.342-52.898-124.95-85.655-205.208-85.655-0.25 0-0.502 0-0.752 0.001h0.039c-0.212 0-0.462-0.001-0.714-0.001-80.258 0-152.867 32.757-205.183 85.63l-0.025 0.025-16.427 17.013-16.427-16.427c-52.551-52.546-125.148-85.046-205.334-85.046s-152.783 32.5-205.336 85.047v0c-51.85 52.868-83.852 125.364-83.852 205.334s32.002 152.468 83.898 205.382l-0.045-0.047 397.176 398.35c7.96 7.95 18.953 12.869 31.093 12.869s23.133-4.917 31.094-12.869v0l397.176-398.35c51.673-52.835 83.555-125.21 83.555-205.032 0-80.411-32.354-153.263-84.754-206.251l0.026 0.026z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["heart-fill"]},"attrs":[{}],"properties":{"order":288,"id":224,"name":"heart-fill","prevSize":80,"code":59873},"setIdx":0,"setId":1,"iconIdx":37},{"icon":{"paths":["M944.92 71.496c-6.851-4.781-15.351-7.639-24.52-7.639-5.664 0-11.074 1.091-16.029 3.074l0.291-0.103c-63.404 28.272-136.947 48.827-213.986 57.993l-3.642 0.353c-50.961-13.852-95.595-33.813-136.214-59.541l2.021 1.195c-50.241-31.546-108.991-55.111-171.832-67.168l-3.203-0.511c-75.265-7.001-254.385 51.927-291.724 64.179-17.436 6.017-29.741 22.283-29.756 41.423v874.010c0 24.167 19.592 43.759 43.759 43.759s43.759-19.592 43.759-43.759v0-341.902c65.742-24.141 142.134-41.68 221.425-49.3l3.786-0.294c53.070 13.251 99.74 33.289 142.139 59.564l-2.111-1.218c47.311 29.399 102.324 52.182 160.994 65.266l3.539 0.663h13.419c91.412-12.072 174.279-35.196 251.871-68.295l-6.238 2.366c16.429-6.638 27.841-22.387 28.006-40.821v-497.12c0.056-0.823 0.088-1.785 0.088-2.753 0-13.438-6.14-25.443-15.767-33.361l-0.075-0.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag-fill"]},"attrs":[{}],"properties":{"order":287,"id":223,"name":"flag-fill","prevSize":80,"code":59870},"setIdx":0,"setId":1,"iconIdx":38},{"icon":{"paths":["M512 1023.989c-282.763 0-511.989-229.226-511.989-511.989s229.226-511.989 511.989-511.989c282.763 0 511.989 229.226 511.989 511.989v0c0 282.763-229.226 511.989-511.989 511.989v0zM512 85.343c-235.636 0-426.657 191.021-426.657 426.657s191.021 426.657 426.657 426.657c235.636 0 426.657-191.021 426.657-426.657v0c0-235.636-191.021-426.657-426.657-426.657v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle"]},"attrs":[{}],"properties":{"order":286,"id":222,"name":"circle","prevSize":80,"code":59868},"setIdx":0,"setId":1,"iconIdx":39},{"icon":{"paths":["M1023.989 512c0 282.763-229.226 511.989-511.989 511.989s-511.989-229.226-511.989-511.989c0-282.763 229.226-511.989 511.989-511.989s511.989 229.226 511.989 511.989z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle-fill"]},"attrs":[{}],"properties":{"order":285,"id":221,"name":"circle-fill","prevSize":80,"code":59869},"setIdx":0,"setId":1,"iconIdx":40},{"icon":{"paths":["M462.875 1024.834c-1.947 0.372-4.188 0.585-6.478 0.585s-4.531-0.213-6.702-0.62l0.224 0.035c-18.586-5.739-31.857-22.766-31.857-42.893 0-0.292 0.003-0.585 0.009-0.876l-0.001 0.044v-5.938l48.584-342.789h-234.284c-0.011 0-0.024 0-0.038 0-16.55 0-30.926-9.309-38.177-22.979l-0.114-0.234c-3.963-6.646-6.305-14.655-6.305-23.213s2.342-16.567 6.421-23.424l-0.116 0.211 107.965-188.4 221.328-351.967c7.563-12.608 21.158-20.914 36.694-20.914 4.633 0 9.094 0.739 13.272 2.105l-0.301-0.085c18.586 5.739 31.857 22.766 31.857 42.893 0 0.292-0.003 0.585-0.009 0.876l0.001-0.044v5.938l-48.584 342.789h234.824c0.011 0 0.024 0 0.038 0 16.55 0 30.926 9.309 38.177 22.979l0.114 0.234c3.963 6.646 6.305 14.655 6.305 23.213s-2.342 16.567-6.421 23.424l0.116-0.211-107.965 188.4-221.328 351.967c-7.762 11.483-20.733 18.931-35.445 18.931-0.634 0-1.265-0.014-1.893-0.042l0.090 0.003zM434.265 959.516v0zM292.291 549.248h215.931c24.812 0.302 44.809 20.488 44.809 45.342 0 0.191-0.001 0.382-0.004 0.572v-0.029 5.938l-31.849 223.488 134.957-215.931 77.735-133.876h-215.931c-24.812-0.302-44.809-20.488-44.809-45.342 0-0.191 0.001-0.382 0.004-0.572v0.029-5.938l31.849-223.488-134.957 215.931zM589.735 63.945v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bolt"]},"attrs":[{}],"properties":{"order":284,"id":220,"name":"bolt","prevSize":80,"code":59867},"setIdx":0,"setId":1,"iconIdx":41},{"icon":{"paths":["M876.353 155.475c-91.36-90.984-217.374-147.233-356.525-147.233s-265.163 56.249-356.542 147.25l-72.854 72.854v-175.251c0-24.945-20.222-45.168-45.168-45.168s-45.168 20.222-45.168 45.168v0 285.461c0 0.001 0 0.003 0 0.004 0 25.067 20.15 45.426 45.135 45.766h286.096c24.945 0 45.168-20.222 45.168-45.168s-20.222-45.168-45.168-45.168v0h-180.671l76.485-74.678c74.952-74.805 178.417-121.062 292.688-121.062s217.736 46.257 292.695 121.070l-0.007-0.007c372.786 402.897-180.671 958.161-585.375 585.375-8.171-8.161-19.456-13.21-31.918-13.21s-23.747 5.048-31.92 13.21v0c-8.309 8.103-13.464 19.409-13.464 31.918s5.155 23.815 13.454 31.91l0.010 0.008c91.243 91.243 217.293 147.678 356.525 147.678 278.462 0 504.201-225.739 504.201-504.201 0-139.231-56.434-265.282-147.678-356.525v0z","M512 256.049c-24.81 0.335-44.833 20.358-45.168 45.135v210.815c0.011 12.468 5.073 23.753 13.248 31.918v0l152.367 148.753c8.084 8.182 19.304 13.25 31.708 13.25 0.073 0 0.148 0 0.222 0h-0.011c21.988-3.292 38.658-22.048 38.658-44.696 0-10.97-3.91-21.026-10.413-28.851l0.059 0.073-137.31-137.31v-193.921c-0.294-24.201-19.326-43.864-43.245-45.162l-0.116-0.006z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["history"]},"attrs":[{},{}],"properties":{"order":283,"id":219,"name":"history","prevSize":80,"code":59866},"setIdx":0,"setId":1,"iconIdx":42},{"icon":{"paths":["M1022.811 776.474s0-4.096 0-6.436v-516.077c-0.023-7.052-1.751-13.696-4.793-19.546l0.112 0.237c-4.397-9.329-11.736-16.668-20.801-20.952l-0.263-0.112-468.096-209.474c-5.326-2.478-11.563-3.924-18.139-3.924s-12.811 1.445-18.411 4.037l0.272-0.112-468.096 209.474c-14.982 7.661-25.187 22.762-25.744 40.299l-0.001 0.074v516.077c0.941 17.495 11.005 32.44 25.487 40.246l0.258 0.128 468.096 209.474c5.306 2.591 11.546 4.105 18.139 4.105s12.832-1.514 18.389-4.214l-0.251 0.11 468.096-209.474c13.538-6.306 23.285-18.763 25.711-33.677l0.034-0.259zM86.616 321.251l380.328 170.856v420.117l-380.328-170.27zM554.714 492.105l380.328-170.856v420.702l-380.328 170.27zM512 91.883l361.019 162.079-361.019 161.493-361.019-161.493z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["box"]},"attrs":[{}],"properties":{"order":282,"id":218,"name":"box","prevSize":80,"code":59865},"setIdx":0,"setId":1,"iconIdx":43},{"icon":{"paths":["M512 0.027c-282.755 0-511.973 229.218-511.973 511.973v0c-0.022 1.75-0.034 3.816-0.034 5.886 0 279.524 226.599 506.123 506.123 506.123 2.069 0 4.135-0.012 6.199-0.037l-0.313 0.003c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0c-1.399 0.016-3.053 0.026-4.708 0.026-231.698 0-419.526-187.828-419.526-419.526 0-1.655 0.010-3.308 0.029-4.959l-0.003 0.251c0.333-234.15 190.058-423.874 424.174-424.206h0.032c281.439 0 424.206 142.768 424.206 424.206v80.745c0.187 2.116 0.292 4.578 0.292 7.064 0 47.18-38.247 85.426-85.426 85.426s-85.426-38.247-85.426-85.426c0-2.486 0.106-4.948 0.314-7.381l-0.022 0.317v-292.556c0-24.236-19.647-43.883-43.883-43.883s-43.883 19.647-43.883 43.883v0 19.894c-44.051-38.526-102.099-62.022-165.637-62.022-0.188 0-0.377 0-0.565 0h0.029c-140.246 0-253.938 113.692-253.938 253.938s113.692 253.938 253.938 253.938v0c75.633-0.27 143.364-33.87 189.31-86.869l0.266-0.313c30.329 52.256 86.021 86.836 149.789 86.836 95.329 0 172.609-77.279 172.609-172.609 0-0.084 0-0.169 0-0.252v0.014-80.745c0-330.003-181.969-511.973-511.973-511.973zM512 678.171c-91.774 0-166.171-74.397-166.171-166.171s74.397-166.171 166.171-166.171c91.774 0 166.171 74.397 166.171 166.171v0c-0.332 91.641-74.532 165.841-166.14 166.171h-0.032z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["at"]},"attrs":[{}],"properties":{"order":281,"id":217,"name":"at","prevSize":80,"code":59864},"setIdx":0,"setId":1,"iconIdx":44},{"icon":{"paths":["M273.927 128.663c-27.857 0-50.44 22.582-50.44 50.44s22.582 50.44 50.44 50.44v0h449.244l-579.714 579.714c-9.89 9.234-16.053 22.349-16.053 36.904 0 27.857 22.582 50.44 50.44 50.44 14.555 0 27.668-6.164 36.874-16.025l0.028-0.030 579.714-579.714v449.244c0 27.857 22.582 50.44 50.44 50.44s50.44-22.582 50.44-50.44v0-570.97c-0.038-7.053-1.518-13.753-4.16-19.829l0.126 0.327c-7.47-17.225-23.668-29.376-42.86-30.924l-0.182-0.011z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-right"]},"attrs":[{}],"properties":{"order":309,"id":216,"name":"arrow-up-right","prevSize":80,"code":59860},"setIdx":0,"setId":1,"iconIdx":45},{"icon":{"paths":["M128.665 750.071c0 27.856 22.582 50.438 50.438 50.438s50.438-22.582 50.438-50.438v0-449.241l579.71 579.71c9.233 9.89 22.348 16.053 36.903 16.053 27.856 0 50.438-22.582 50.438-50.438 0-14.555-6.164-27.668-16.025-36.874l-0.030-0.028-579.71-579.71h449.241c27.856 0 50.438-22.582 50.438-50.438s-22.582-50.438-50.438-50.438v0h-570.968c-7.053 0.038-13.753 1.518-19.829 4.16l0.327-0.126c-18.183 7.953-30.702 25.689-30.935 46.373v0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-left"]},"attrs":[{}],"properties":{"order":278,"id":215,"name":"arrow-up-left","prevSize":80,"code":59861},"setIdx":0,"setId":1,"iconIdx":46},{"icon":{"paths":["M749.048 893.688c27.738 0 50.223-22.484 50.223-50.223s-22.484-50.223-50.223-50.223v0h-447.31l577.218-577.218c9.846-9.194 15.985-22.253 15.985-36.744 0-27.738-22.484-50.223-50.223-50.223-14.491 0-27.549 6.138-36.714 15.954l-0.028 0.030-577.218 577.218v-447.31c0-27.738-22.484-50.223-50.223-50.223s-50.223 22.484-50.223 50.223v0 571.861c0.038 7.024 1.513 13.694 4.144 19.745l-0.126-0.325c7.919 18.102 25.578 30.57 46.174 30.801h0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-left"]},"attrs":[{}],"properties":{"order":279,"id":214,"name":"arrow-down-left","prevSize":80,"code":59862},"setIdx":0,"setId":1,"iconIdx":47},{"icon":{"paths":["M896.598 273.145c0-27.949-22.657-50.606-50.606-50.606s-50.606 22.657-50.606 50.606v0 450.722l-581.62-581.62c-9.013-8.416-21.152-13.58-34.498-13.58-27.949 0-50.606 22.657-50.606 50.606 0 13.348 5.166 25.486 13.61 34.529l-0.028-0.030 581.62 581.62h-450.722c-27.949 0-50.606 22.657-50.606 50.606s22.657 50.606 50.606 50.606v0h576.221c7.076-0.039 13.797-1.525 19.894-4.175l-0.328 0.126c15.905-8.356 26.772-24.403 27.661-43.066l0.006-0.114z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-right"]},"attrs":[{}],"properties":{"order":280,"id":213,"name":"arrow-down-right","prevSize":80,"code":59863},"setIdx":0,"setId":1,"iconIdx":48},{"icon":{"paths":["M512 0.011c-282.764 0-511.989 229.225-511.989 511.989s229.225 511.989 511.989 511.989c282.764 0 511.989-229.225 511.989-511.989v0c0-282.764-229.225-511.989-511.989-511.989v0zM763.515 350.723l-83.838 396.152c-6.4 28.159-23.040 34.559-46.72 21.76l-127.997-94.719-63.999 59.519c-5.961 7.732-15.19 12.694-25.582 12.799h-0.016l8.959-127.997 236.796-214.395c10.879-8.959 0-14.080-15.36-5.119l-290.555 182.396-127.997-39.679c-27.52-8.32-28.159-27.52 5.76-40.319l493.43-191.996c24.319-7.039 44.8 7.039 37.12 41.599z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["telegram"]},"attrs":[{}],"properties":{"order":276,"id":212,"name":"telegram","prevSize":80,"code":59859},"setIdx":0,"setId":1,"iconIdx":49},{"icon":{"paths":["M512 1023.991c-282.764 0-511.991-229.227-511.991-511.991s229.227-511.991 511.991-511.991c282.764 0 511.991 229.227 511.991 511.991v0c0 282.764-229.227 511.991-511.991 511.991v0zM512 85.341c-235.637 0-426.659 191.022-426.659 426.659s191.022 426.659 426.659 426.659c235.637 0 426.659-191.022 426.659-426.659v0c0-235.637-191.022-426.659-426.659-426.659v0z","M369.78 284.448h284.439c47.127 0 85.332 38.205 85.332 85.332v284.439c0 47.127-38.205 85.332-85.332 85.332h-284.439c-47.127 0-85.332-38.205-85.332-85.332v-284.439c0-47.127 38.205-85.332 85.332-85.332z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["stop-circle"]},"attrs":[{},{}],"properties":{"order":275,"id":211,"name":"stop-circle","prevSize":80,"code":59858},"setIdx":0,"setId":1,"iconIdx":50},{"icon":{"paths":["M842.308 1023.979h-660.618c-100.333 0-181.669-81.336-181.669-181.669v0-660.618c0-100.333 81.336-181.669 181.669-181.669v0h660.618c100.333 0 181.669 81.336 181.669 181.669v0 660.618c0 100.333-81.336 181.669-181.669 181.669v0zM181.692 99.114c-45.606 0-82.577 36.971-82.577 82.577v0 660.618c0 45.606 36.971 82.577 82.577 82.577v0h660.618c45.606 0 82.577-36.971 82.577-82.577v0-660.618c0-45.606-36.971-82.577-82.577-82.577v0z"],"attrs":[{}],"grid":16,"tags":["stop"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":274,"id":210,"name":"stop","prevSize":80,"code":59857},"setIdx":0,"setId":1,"iconIdx":51},{"icon":{"paths":["M870.378 148.502c-91.041-91.707-217.17-148.474-356.557-148.474-0.64 0-1.281 0.001-1.92 0.003h0.099c-280.418 0.282-507.634 227.671-507.634 508.129 0 93.024 24.997 180.211 68.642 255.208l-1.302-2.422-71.676 263.024 268.784-70.395c69.896 39.602 153.381 63.238 242.321 63.995l0.223 0.001c0.006 0 0.012 0 0.019 0 281.177 0 509.412-226.669 511.947-507.248l0.001-0.241c-0.978-141.618-59.303-269.426-152.883-361.512l-0.067-0.066zM512 929.894c-0.081 0-0.178 0-0.274 0-79.234 0-153.358-21.884-216.656-59.938l1.903 1.060-15.359-9.599-159.35 42.237 42.237-155.511-10.24-16c-39.739-63.209-63.313-140.066-63.313-222.43 0-233.27 189.104-422.374 422.374-422.374 115.76 0 220.644 46.569 296.938 121.995l-0.040-0.039c77.623 75.954 126.276 181.243 127.989 297.901l0.003 0.321c-2.173 233.734-192.155 422.374-426.196 422.374-0.006 0-0.012 0-0.018 0h0.001zM743.026 613.754c-12.799-6.4-74.875-37.118-86.395-40.958s-20.478-6.4-28.798 6.4c-13.451 18.342-26.668 34.402-40.702 49.701l0.384-0.424c-7.039 8.959-14.719 9.599-27.519 0-73.887-29.731-133.426-82.24-171.269-148.708l-0.882-1.681c-13.439-22.398 12.799-21.119 37.118-69.116 1.722-3.252 2.733-7.107 2.733-11.2s-1.011-7.948-2.796-11.332l0.064 0.132c0-6.4-28.798-69.116-39.038-94.074s-20.478-21.119-28.798-21.759h-24.958c-13.577 0.214-25.68 6.352-33.865 15.937l-0.052 0.063c-26.196 25.492-42.447 61.088-42.447 100.48 0 2.698 0.076 5.38 0.226 8.041l-0.016-0.369c4.318 50.122 23.15 95.162 52.219 131.69l-0.382-0.498c54.892 81.39 128.004 146.508 213.743 190.496l3.204 1.492c35.584 21.122 78.444 33.605 124.218 33.605 9.899 0 19.661-0.583 29.254-1.719l-1.162 0.112c36.419-7.408 66.636-29.449 84.793-59.581l0.322-0.576c5.793-12.526 9.172-27.184 9.172-42.632 0-6.192-0.543-12.256-1.582-18.147l0.091 0.624c-5.76-6.4-14.080-9.599-26.878-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["whatsapp"]},"attrs":[{}],"properties":{"order":273,"id":209,"name":"whatsapp","prevSize":80,"code":59856},"setIdx":0,"setId":1,"iconIdx":52},{"icon":{"paths":["M365.722 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M877.694 936.204h-29.255v-892.294c-0.325-24.104-19.779-43.558-43.852-43.883h-585.142c-24.104 0.325-43.558 19.779-43.883 43.852v892.325h-29.255c-24.236 0-43.883 19.647-43.883 43.883s19.647 43.883 43.883 43.883v0h731.387c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0zM760.671 936.204h-307.183v-131.65c0-16.157-13.098-29.255-29.255-29.255v0h-58.511c-16.157 0-29.255 13.098-29.255 29.255v0 131.65h-73.138v-848.41h497.344z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["building"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":272,"id":208,"name":"building","prevSize":80,"code":59855},"setIdx":0,"setId":1,"iconIdx":53},{"icon":{"paths":["M561.547 0.023v462.433h462.433v-462.433zM924.887 363.362h-264.247v-264.247h264.247z","M0.023 462.454h462.433v-462.433h-462.433zM99.116 99.116h264.247v264.247h-264.247z","M0.023 1023.98h462.433v-462.433h-462.433zM99.116 660.64h264.247v264.247h-264.247z","M561.547 561.547h115.609v115.609h-115.609v-115.609z","M792.764 561.547h115.609v115.609h-115.609v-115.609z","M677.156 677.156h115.609v115.609h-115.609v-115.609z","M908.371 677.156h115.609v115.609h-115.609v-115.609z","M561.547 792.764h115.609v115.609h-115.609v-115.609z","M792.764 792.764h115.609v115.609h-115.609v-115.609z","M677.156 908.371h115.609v115.609h-115.609v-115.609z","M908.371 908.371h115.609v115.609h-115.609v-115.609z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["qrcode"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":271,"id":207,"name":"qrcode","prevSize":80,"code":59854},"setIdx":0,"setId":1,"iconIdx":54},{"icon":{"paths":["M966.767 407.505l-107.415-291.887c-13.941-40.405-51.44-68.998-95.682-69.469h-502.102c-43.76 0.101-81.048 27.7-95.509 66.429l-0.231 0.706-107.415 291.887c-34.342 16.711-57.732 51.084-58.377 90.984l-0.001 0.085v262.699c-0.012 0.59-0.019 1.285-0.019 1.983 0 35.143 17.95 66.093 45.181 84.184l0.372 0.233s0 3.503 0 3.503v116.754c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-102.161h583.775v102.161c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-116.754s0 0 0-3.503c26.927-18.415 44.367-48.984 44.367-83.626 0-0.155 0-0.308-0.001-0.462v0.023-262.699c-0.415-39.752-23.34-74.055-56.62-90.799l-0.59-0.27zM935.826 761.273c0 8.060-6.535 14.595-14.595 14.595v0h-817.284c-8.060 0-14.595-6.535-14.595-14.595v0-262.699c0-8.060 6.535-14.595 14.595-14.595v0h817.284c8.060 0 14.595 6.535 14.595 14.595v0zM248.14 143.055c2.145-5.454 7.332-9.259 13.417-9.341h502.055c6.095 0.082 11.281 3.887 13.392 9.241l0.034 0.099 81.728 224.169h-692.357z","M366.646 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z","M833.667 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["car"]},"attrs":[{},{},{}],"properties":{"order":270,"id":206,"name":"car","prevSize":80,"code":59853},"setIdx":0,"setId":1,"iconIdx":55},{"icon":{"paths":["M512 249.365c-145.049 0-262.635 117.585-262.635 262.635s117.585 262.635 262.635 262.635c145.049 0 262.635-117.585 262.635-262.635v0c0-0.191 0.002-0.416 0.002-0.641 0-144.695-117.299-261.995-261.995-261.995-0.225 0-0.45 0-0.676 0.002h0.035zM512 683.033c-94.459 0-171.033-76.575-171.033-171.033s76.575-171.033 171.033-171.033c94.459 0 171.033 76.575 171.033 171.033v0c0 94.459-76.575 171.033-171.033 171.033v0zM847.020 238.475c0 35.378-28.68 64.058-64.058 64.058s-64.058-28.68-64.058-64.058c0-35.378 28.68-64.058 64.058-64.058v0c35.378 0 64.058 28.68 64.058 64.058v0zM1020.615 302.532c0.053-2.1 0.083-4.576 0.083-7.056 0-80.466-31.5-153.574-82.841-207.667l0.125 0.132c-54.19-52.344-128.080-84.599-209.504-84.599-1.79 0-3.575 0.015-5.357 0.047l0.267-0.003c-83.275-3.843-339.503-3.843-422.778 0-1.952-0.045-4.253-0.071-6.559-0.071-80.622 0-153.889 31.489-208.175 82.838l0.141-0.134c-51.217 53.961-82.717 127.069-82.717 207.535 0 2.482 0.030 4.956 0.090 7.423l-0.008-0.366c-3.843 83.275-3.843 339.503 0 422.778-0.053 2.1-0.083 4.576-0.083 7.056 0 80.466 31.5 153.574 82.841 207.667l-0.125-0.132c54.143 51.217 127.412 82.705 208.032 82.705 2.306 0 4.608-0.026 6.902-0.077l-0.342 0.006c84.556 5.124 338.223 5.124 422.778 0 2.1 0.053 4.576 0.083 7.056 0.083 80.466 0 153.574-31.5 207.667-82.841l-0.132 0.125c51.217-53.961 82.717-127.069 82.717-207.535 0-2.482-0.030-4.956-0.090-7.423l0.008 0.366c3.843-83.275 3.843-339.503 0-422.778zM911.718 814.991c-17.965 44.669-52.697 79.402-96.206 96.954l-1.162 0.414c-68.692 14.541-147.62 22.867-228.491 22.867-25.987 0-51.772-0.86-77.33-2.552l3.471 0.185c-22.061 1.512-47.813 2.374-73.767 2.374-80.681 0-159.416-8.328-235.394-24.172l7.451 1.3c-44.669-17.965-79.402-52.697-96.954-96.206l-0.414-1.162c-26.904-67.901-21.139-228.044-21.139-302.351s-5.765-235.091 21.139-302.351c17.48-45.144 52.371-80.244 96.218-97.607l1.149-0.401c68.527-14.544 147.262-22.873 227.943-22.873 25.954 0 51.706 0.862 77.231 2.558l-3.464-0.185c22.086-1.509 47.872-2.368 73.859-2.368 80.871 0 159.799 8.326 235.971 24.167l-7.48-1.3c44.669 17.965 79.402 52.697 96.954 96.206l0.414 1.162c26.904 67.901 20.498 228.044 20.498 302.351s6.406 235.091-20.498 302.351z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["instagram"]},"attrs":[{}],"properties":{"order":268,"id":205,"name":"instagram","prevSize":80,"code":59852},"setIdx":0,"setId":1,"iconIdx":56},{"icon":{"paths":["M942.030 0.060h-854.301c-1.171-0.058-2.544-0.091-3.924-0.091-44.98 0-81.687 35.426-83.74 79.897l-0.007 0.184v856.22c1.381 47.853 39.817 86.288 87.54 87.666l0.129 0.003h854.301c45.688-2.098 81.934-39.649 81.934-85.666 0-0.705-0.009-1.408-0.025-2.109l0.001 0.103v-856.22c0.007-0.4 0.012-0.873 0.012-1.345 0-43.471-35.24-78.711-78.711-78.711-1.129 0-2.253 0.024-3.37 0.070l0.159-0.006zM320.022 853.72h-149.102v-456.266h149.102zM248.991 328.342v0c-0.784 0.028-1.705 0.046-2.629 0.046-41.704 0-75.512-33.808-75.512-75.512 0-1.141 0.025-2.277 0.075-3.406l-0.006 0.16c-0.046-0.985-0.072-2.14-0.072-3.301 0-41.704 33.808-75.512 75.512-75.512 1.375 0 2.743 0.037 4.101 0.109l-0.189-0.007c0.784-0.028 1.705-0.046 2.629-0.046 41.704 0 75.512 33.808 75.512 75.512 0 1.141-0.025 2.277-0.075 3.406l0.006-0.16c0.046 0.985 0.072 2.14 0.072 3.301 0 41.704-33.808 75.512-75.512 75.512-1.375 0-2.743-0.037-4.101-0.109l0.189 0.007zM853.72 853.72h-149.743v-249.571c0-59.513-21.118-100.469-74.231-100.469-34.5 0.309-63.758 22.412-74.697 53.194l-0.174 0.559c-3.36 9.138-5.302 19.69-5.302 30.697 0 2.034 0.066 4.051 0.196 6.052l-0.013-0.271v259.81h-147.182v-456.266h147.182v63.993c25.685-46.508 74.423-77.484 130.396-77.484 1.402 0 2.8 0.019 4.194 0.058l-0.205-0.004c96.629 0 169.581 63.993 169.581 200.297z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["linkedin"]},"attrs":[{}],"properties":{"order":266,"id":204,"name":"linkedin","prevSize":80,"code":59851},"setIdx":0,"setId":1,"iconIdx":57},{"icon":{"paths":["M998.721 25.279c-15.31-15.206-36.405-24.601-59.695-24.601-9.365 0-18.373 1.518-26.795 4.325l0.597-0.173-854.831 285.138c-34.333 11.124-58.722 42.818-58.722 80.21 0 32.269 18.165 60.295 44.829 74.41l0.459 0.221 354.67 175.29 175.29 355.84c14.186 27.601 42.466 46.16 75.080 46.16 0.106 0 0.207 0 0.309 0h5.827c34.71-2.632 63.306-26.111 73.46-57.839l0.162-0.591 289.228-852.494c2.939-8.121 4.642-17.492 4.642-27.261 0-22.937-9.373-43.685-24.499-58.622l-0.010-0.010zM94.226 370.599l746.151-248.912-414.27 414.27zM653.984 929.774l-165.94-331.884 414.27-414.27z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["send"]},"attrs":[{}],"properties":{"order":263,"id":203,"name":"send","prevSize":80,"code":59850},"setIdx":0,"setId":1,"iconIdx":58},{"icon":{"paths":["M215.050 647.037c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517c0-59.379 48.138-107.517 107.517-107.517v0h107.517zM269.445 647.037c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0zM376.963 215.050c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517c59.379 0 107.517 48.138 107.517 107.517v0 107.517zM376.963 269.445c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517h-269.434c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517v0zM808.95 376.963c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517c0 59.379-48.138 107.517-107.517 107.517v0h-107.517v-107.517zM754.555 376.963c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0-269.434c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434zM647.037 808.95c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517c-59.379 0-107.517-48.138-107.517-107.517v0-107.517zM647.037 754.555c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517h269.434c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["slack"]},"attrs":[{}],"properties":{"order":262,"id":202,"name":"slack","prevSize":80,"code":59849},"setIdx":0,"setId":1,"iconIdx":59},{"icon":{"paths":["M517.309 1022.789c-22.691-0.029-45.007-1.526-66.885-4.41l2.595 0.278c-233.58-31.279-416.401-214.099-447.387-445.014l-0.291-2.662c-2.859-20.354-4.49-43.869-4.49-67.761 0-246.048 172.971-451.698 403.948-501.981l3.392-0.62c4.828-1.146 10.369-1.803 16.065-1.803 24.13 0 45.508 11.78 58.7 29.904l0.144 0.209c8.716 12.084 13.937 27.19 13.937 43.519 0 14.447-4.091 27.937-11.173 39.378l0.187-0.321c-26.726 45.102-42.523 99.41-42.523 157.408 0 16.683 1.308 33.056 3.823 49.030l-0.228-1.77c21.13 133.311 125.031 237.216 256.587 258.114l1.758 0.228c14.358 2.386 30.902 3.749 47.766 3.749 57.921 0 112.086-16.086 158.27-44.036l-1.366 0.768c10.914-6.566 24.086-10.453 38.167-10.453 16.715 0 32.146 5.473 44.609 14.724l-0.202-0.143c18.334 13.090 30.142 34.293 30.142 58.257 0 5.696-0.669 11.235-1.926 16.546l0.097-0.484c-49.878 235.319-255.888 409.342-502.54 409.342-0.413 0-0.822 0-1.235-0.001h0.064zM394.034 99.12c-178.936 53.807-307.056 217.078-307.056 410.275 0 236.171 191.454 427.623 427.623 427.623 193.197 0 356.468-128.116 409.491-304.027l0.784-3.028c-50.869 25.361-110.807 40.205-174.212 40.205-197.518 0-361.392-144.047-392.301-332.818l-0.31-2.3c-2.962-18.244-4.655-39.278-4.655-60.703 0-63.794 15.005-124.084 41.678-177.535l-1.042 2.307z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["moon"]},"attrs":[{}],"properties":{"order":261,"id":201,"name":"moon","prevSize":80,"code":59847},"setIdx":0,"setId":1,"iconIdx":60},{"icon":{"paths":["M512 806.395c-162.589 0-294.395-131.804-294.395-294.395s131.804-294.395 294.395-294.395c162.589 0 294.395 131.804 294.395 294.395v0c-0.29 162.471-131.922 294.103-294.366 294.395h-0.028zM512 294.404c-120.176 0-217.596 97.422-217.596 217.596s97.422 217.596 217.596 217.596c120.176 0 217.596-97.422 217.596-217.596v0c-0.29-120.058-97.538-217.306-217.567-217.596h-0.028z","M512 153.605c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M512 1023.99c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M985.591 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M115.206 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M230.404 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043-55.808-51.2c-7.14-7.14-11.557-17.006-11.557-27.903 0-21.794 17.667-39.461 39.461-39.461 10.897 0 20.763 4.417 27.903 11.557v0l51.2 55.808c6.068 6.763 9.778 15.747 9.778 25.599s-3.711 18.837-9.81 25.635l0.031-0.035c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M847.867 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003-52.736-55.808c-2.366-4.842-3.748-10.533-3.748-16.548 0-21.206 17.191-38.399 38.399-38.399 6.016 0 11.709 1.383 16.778 3.85l-0.227-0.099 55.808 51.2c6.939 6.946 11.231 16.541 11.231 27.135s-4.291 20.189-11.231 27.136v0c-6.701 7.568-16.317 12.423-27.072 12.798l-0.065 0.001z","M793.596 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043c-6.068-6.763-9.778-15.747-9.778-25.599s3.711-18.837 9.81-25.635l-0.031 0.035 51.2-55.808c7.14-7.14 17.006-11.557 27.903-11.557 21.794 0 39.461 17.667 39.461 39.461 0 10.897-4.417 20.763-11.557 27.903v0l-55.808 51.2c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M176.133 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003c-6.939-6.946-11.231-16.541-11.231-27.135s4.291-20.189 11.231-27.136v0l55.808-52.736c4.842-2.366 10.533-3.748 16.548-3.748 21.206 0 38.399 17.191 38.399 38.399 0 6.016-1.383 11.709-3.85 16.778l0.099-0.227-51.2 55.808c-6.876 6.978-16.43 11.301-26.992 11.301-0.591 0-1.178-0.014-1.761-0.042l0.082 0.003z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sun"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":260,"id":200,"name":"sun","prevSize":80,"code":59848},"setIdx":0,"setId":1,"iconIdx":61},{"icon":{"paths":["M1002.843 264.979c-11.885-44.735-46.258-79.32-89.974-91.303l-0.899-0.211c-108.991-13.585-235.136-21.338-363.093-21.338-12.967 0-25.913 0.079-38.842 0.238l1.964-0.020c-10.965-0.138-23.912-0.217-36.878-0.217-127.957 0-254.101 7.753-377.993 22.812l14.9-1.475c-44.618 12.192-78.989 46.777-90.67 90.619l-0.202 0.895c-13.45 71.849-21.144 154.515-21.144 238.976 0 2.83 0.010 5.654 0.025 8.48l-0.001-0.435c-0.015 2.515-0.025 5.487-0.025 8.463 0 84.76 7.694 167.728 22.419 248.235l-1.273-8.397c12.473 43.944 46.687 77.735 89.978 89.387l0.896 0.205c108.991 13.585 235.136 21.338 363.093 21.338 12.967 0 25.913-0.079 38.842-0.238l-1.964 0.020c10.965 0.138 23.912 0.217 36.878 0.217 127.957 0 254.101-7.753 377.993-22.812l-14.9 1.475c44.184-11.858 78.4-45.649 90.654-88.691l0.222-0.902c13.451-72.109 21.145-155.075 21.145-239.836 0-2.976-0.010-5.952-0.030-8.921l0.002 0.458c0.014-2.39 0.024-5.216 0.024-8.045 0-84.461-7.694-167.123-22.415-247.326l1.272 8.351zM407.049 664.948v-304.617l268.139 151.669-268.139 152.31z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["youtube"]},"attrs":[{}],"properties":{"order":245,"id":199,"name":"youtube","prevSize":80,"code":59845},"setIdx":0,"setId":1,"iconIdx":62},{"icon":{"paths":["M921.584 0.020h-819.169c-56.554 0-102.397 45.843-102.397 102.397v0 819.169c0 56.554 45.843 102.397 102.397 102.397h819.169c56.554 0 102.397-45.843 102.397-102.397v0-819.169c0-56.554-45.843-102.397-102.397-102.397v0zM861.428 339.846q-5.119 108.157-150.396 296.31c-100.477 127.996-186.234 195.834-255.991 195.834-43.518 0-79.358-39.678-109.437-119.677-58.239-213.112-83.198-337.908-127.996-337.908-22.288 9.156-41.514 20.78-58.626 34.868l0.387-0.309-34.559-44.799c85.118-74.878 166.394-158.075 217.592-162.554s90.237 33.919 105.597 118.396c47.358 300.15 68.477 345.588 154.236 209.272 23.167-31.534 40.499-68.894 49.548-109.38l0.37-1.973c8.32-76.157-58.878-71.038-104.956-51.198q53.118-179.195 206.712-174.714 113.917 3.84 107.517 147.835z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["vimeo"]},"attrs":[{}],"properties":{"order":246,"id":198,"name":"vimeo","prevSize":80,"code":59846},"setIdx":0,"setId":1,"iconIdx":63},{"icon":{"paths":["M945.168 71.244c-6.854-4.784-15.36-7.644-24.533-7.644-5.667 0-11.082 1.091-16.037 3.075l0.291-0.101c-63.362 27.754-136.884 48.272-213.777 57.97l-3.973 0.411c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525c-107.474 9.724-206.538 32.466-299.99 66.82l8.098-2.606c-17.445 6.019-29.758 22.294-29.774 41.446v874.511c0 24.18 19.602 43.782 43.782 43.782s43.782-19.602 43.782-43.782v0-341.516c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662h13.426c91.375-11.776 174.319-34.938 251.841-68.29l-6.068 2.323c16.532-6.508 28.021-22.337 28.021-40.848 0-0.004 0-0.013 0-0.017v0.001-496.801c0.058-0.822 0.086-1.787 0.086-2.754 0-13.445-6.144-25.457-15.776-33.379l-0.076-0.061zM876.865 575.050c-55.28 23.59-119.414 40.863-186.43 48.723l-3.3 0.316c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525h-11.676c-81.373 7.491-156.277 24.016-227.356 48.724l6.685-2.021v-408.651c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662c72.593-2.928 140.796-18.315 203.651-44.065l-3.998 1.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag"]},"attrs":[{}],"properties":{"order":247,"id":197,"name":"flag","prevSize":80,"code":59844},"setIdx":0,"setId":1,"iconIdx":64},{"icon":{"paths":["M921.328 234.242h-14.62v-131.569c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032c-2.11-0.402-4.538-0.635-7.018-0.635s-4.909 0.229-7.26 0.672l0.242-0.037-695.856 233.902h-15.789l-9.939 3.508h-8.187l-9.357 5.263-7.018 9.939-8.187 7.018-6.432 5.85-7.018 8.771c-1.843 1.659-3.402 3.587-4.62 5.733l-0.060 0.112c-1.923 2.94-3.872 6.386-5.601 9.962l-0.245 0.564-3.508 6.432c-1.391 3.423-2.79 7.711-3.925 12.107l-0.165 0.758c0.126 0.965 0.196 2.083 0.196 3.216s-0.070 2.252-0.21 3.346l0.014-0.13c-0.288 2.979-0.451 6.443-0.451 9.939s0.164 6.961 0.485 10.379l-0.033-0.436v584.754c0.266 54.991 43.614 99.77 98.010 102.322l0.229 0.010h818.656c56.383-0.331 102.001-45.949 102.333-102.301v-584.786c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032zM809.056 88.637c5.781 2.176 9.84 7.618 9.939 14.021v131.582h-446.167zM935.946 921.328c0 8.075-6.545 14.62-14.62 14.62v0h-818.656c-8.075 0-14.62-6.545-14.62-14.62v0-584.754c0-8.075 6.545-14.62 14.62-14.62v0h818.656c8.075 0 14.62 6.545 14.62 14.62v0z","M848.233 628.95c0 40.368-32.724 73.092-73.092 73.092s-73.092-32.724-73.092-73.092c0-40.368 32.724-73.092 73.092-73.092s73.092 32.724 73.092 73.092z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["wallet"]},"attrs":[{},{}],"properties":{"order":248,"id":196,"name":"wallet","prevSize":80,"code":59843},"setIdx":0,"setId":1,"iconIdx":65},{"icon":{"paths":["M974.245 49.171c-15.932-10.721-35.555-17.111-56.669-17.111-14.627 0-28.534 3.067-41.12 8.59l0.658-0.257-208.887 89.524-277.931-117.023c-10.185-4.441-22.051-7.024-34.522-7.024s-24.338 2.583-35.094 7.244l0.571-0.221-255.112 107.663c-39.245 17.382-66.129 55.99-66.129 100.873 0 0.535 0.003 1.071 0.012 1.601l-0.001-0.081v658.259c-0.001 0.193-0.001 0.422-0.001 0.65 0 38.606 19.576 72.638 49.339 92.718l0.396 0.252c15.932 10.721 35.555 17.111 56.669 17.111 14.627 0 28.534-3.067 41.12-8.59l-0.658 0.257 208.887-89.524 277.931 117.023c9.959 4.44 21.578 7.024 33.803 7.024 0.254 0 0.506-0.001 0.759-0.002h-0.037c12.47-0.016 24.335-2.597 35.099-7.244l-0.579 0.222 255.112-109.419c39.245-17.382 66.129-55.99 66.129-100.873 0-0.535-0.003-1.071-0.012-1.601l0.001 0.081v-656.503c0.001-0.193 0.001-0.422 0.001-0.65 0-38.606-19.576-72.638-49.339-92.718l-0.396-0.252zM399.657 107.683l224.685 95.96v709.749l-224.685-95.96zM112.365 902.859c-2.099 1.232-4.621 1.96-7.312 1.96s-5.216-0.728-7.384-1.996l0.067 0.036c-6.069-4.287-9.983-11.275-9.983-19.174 0-0.459 0.014-0.915 0.041-1.366l-0.002 0.063v-659.428c-0.001-0.106-0.002-0.225-0.002-0.349 0-9.66 5.999-17.916 14.475-21.246l0.156-0.052 209.473-90.694v706.823zM936.211 801.048c0.016 0.329 0.027 0.713 0.027 1.097 0 8.996-5.204 16.772-12.765 20.489l-0.133 0.060-211.228 90.694v-706.823l199.525-85.427c2.099-1.232 4.621-1.96 7.312-1.96s5.216 0.728 7.384 1.996l-0.067-0.036c6.069 4.287 9.983 11.275 9.983 19.174 0 0.459-0.014 0.915-0.041 1.366l0.002-0.063z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["map"]},"attrs":[{}],"properties":{"order":249,"id":195,"name":"map","prevSize":80,"code":59842},"setIdx":0,"setId":1,"iconIdx":66},{"icon":{"paths":["M232.89 877.709c-0.229 0.001-0.5 0.001-0.772 0.001-64.296 0-122.536-25.926-164.839-67.892l0.014 0.014c-41.67-44.195-67.28-103.927-67.28-169.644 0-70.104 29.144-133.401 75.978-178.432l0.081-0.077 220.011-221.767c46.236-47.686 110.48-77.679 181.734-78.989l0.242-0.003c64.887 0.446 123.436 27.23 165.557 70.178l0.036 0.036c42.26 44.485 68.256 104.777 68.256 171.139 0 70.733-29.531 134.567-76.936 179.85l-0.095 0.091-73.728 73.728c-8.035 8.605-19.444 13.968-32.108 13.968-24.236 0-43.886-19.648-43.886-43.886 0-12.665 5.363-24.073 13.943-32.084l0.025-0.023 71.384-76.068c31.073-29.214 50.426-70.586 50.426-116.481 0-41.8-16.055-79.851-42.334-108.318l0.099 0.109c-28.323-24.799-65.659-39.923-106.527-39.923-45.364 0-86.377 18.637-115.797 48.671l-0.027 0.027-218.256 221.181c-30.617 29.25-49.65 70.402-49.65 115.998 0 41.161 15.51 78.698 41.005 107.085l-0.133-0.148c26.409 26.109 62.734 42.236 102.824 42.236 5.002 0 9.944-0.251 14.816-0.741l-0.615 0.049c1.28-0.135 2.767-0.212 4.272-0.212 22.546 0 41.068 17.231 43.113 39.245l0.012 0.171c0.136 1.297 0.214 2.802 0.214 4.324 0 22.665-17.181 41.315-39.226 43.641l-0.191 0.015z","M545.938 863.081c-64.887-0.446-123.436-27.23-165.557-70.178l-0.036-0.036c-42.26-44.485-68.256-104.777-68.256-171.139 0-70.733 29.531-134.567 76.936-179.85l0.095-0.091 73.728-73.728c8.035-8.605 19.444-13.968 32.108-13.968 24.236 0 43.886 19.648 43.886 43.886 0 12.665-5.363 24.073-13.943 32.084l-0.025 0.023-71.384 76.068c-31.073 29.214-50.426 70.586-50.426 116.481 0 41.8 16.055 79.851 42.334 108.318l-0.099-0.109c28.323 24.799 65.659 39.923 106.527 39.923 45.364 0 86.377-18.637 115.797-48.671l0.027-0.027 220.596-221.181c29.874-29.148 48.402-69.807 48.402-114.793 0-41.733-15.944-79.74-42.074-108.264l0.109 0.122c-26.409-26.109-62.734-42.236-102.824-42.236-5.002 0-9.944 0.251-14.816 0.741l0.615-0.049c-1.28 0.135-2.767 0.212-4.272 0.212-22.546 0-41.068-17.231-43.113-39.245l-0.012-0.171c-0.136-1.297-0.214-2.802-0.214-4.324 0-22.665 17.181-41.315 39.226-43.641l0.191-0.015c7.239-0.795 15.632-1.247 24.131-1.247 63.452 0 121.008 25.25 163.166 66.25l-0.054-0.053c41.67 44.195 67.28 103.927 67.28 169.644 0 70.104-29.144 133.401-75.978 178.432l-0.081 0.077-220.011 221.767c-46.236 47.686-110.48 77.679-181.734 78.989l-0.242 0.003z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["link"]},"attrs":[{},{}],"properties":{"order":250,"id":194,"name":"link","prevSize":80,"code":59841},"setIdx":0,"setId":1,"iconIdx":67},{"icon":{"paths":["M921.589 117.040h-819.178c-56.419 0.331-102.067 45.977-102.398 102.366v585.16c0.331 56.419 45.977 102.067 102.366 102.398h819.209c56.419-0.331 102.067-45.977 102.398-102.366v-585.16c-0.331-56.419-45.977-102.067-102.366-102.398h-0.033zM102.411 204.808h819.178c8.080 0 14.628 6.551 14.628 14.628v0 131.653h-848.434v-131.653c0-8.080 6.551-14.628 14.628-14.628v0zM921.589 819.192h-819.178c-8.080 0-14.628-6.551-14.628-14.628v0-365.705h848.434v365.705c0 8.080-6.551 14.628-14.628 14.628v0z","M336.461 570.514h-117.025c-32.315 0-58.514 26.197-58.514 58.514s26.197 58.514 58.514 58.514v0h117.025c32.315 0 58.514-26.197 58.514-58.514s-26.197-58.514-58.514-58.514v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["credit-card"]},"attrs":[{},{}],"properties":{"order":251,"id":193,"name":"credit-card","prevSize":80,"code":59839},"setIdx":0,"setId":1,"iconIdx":68},{"icon":{"paths":["M867.007 182.851c-66.261-30.706-136.831-53.332-211.172-66.261-9.158 16.161-19.933 38.248-26.935 56.025-78.651-11.852-156.763-11.852-233.798 0-7.541-17.777-18.316-39.864-27.474-56.025-74.341 12.929-144.911 35.555-211.172 66.261-133.599 201.475-169.692 398.104-151.915 591.499 88.886 66.261 174.541 106.125 259.118 132.522 21.010-28.551 39.326-59.257 55.487-91.042-30.706-11.313-59.796-25.858-87.27-42.558 7.541-5.387 14.545-11.313 21.549-16.7 168.615 78.651 351.236 78.651 517.696 0 7.004 5.925 14.006 11.313 21.549 16.7-27.474 16.7-57.103 30.706-87.27 42.558 16.161 31.783 34.478 62.489 55.487 91.042 84.577-26.397 170.769-66.261 259.118-132.522 21.010-224.64-36.094-419.113-151.915-591.499zM341.769 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508zM681.692 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508z"],"attrs":[{}],"grid":16,"tags":["discord"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":252,"id":192,"name":"discord","prevSize":80,"code":59840},"setIdx":0,"setId":1,"iconIdx":69},{"icon":{"paths":["M71.252 1019.529c-0.094 0-0.205 0-0.308 0-18.338 0-34.928-7.49-46.876-19.583l-0.004-0.004c-12.065-12.080-19.533-28.766-19.533-47.194s7.46-35.107 19.533-47.195v0l881.496-881.496c12.224-13.091 29.586-21.252 48.86-21.252 36.88 0 66.781 29.901 66.781 66.781 0 19.267-8.161 36.636-21.215 48.818l-0.036 0.034-881.496 881.496c-11.952 12.097-28.542 19.587-46.879 19.587-0.11 0-0.221 0-0.324 0h0.016z","M200.36 400.703c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM200.36 133.579c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z","M823.64 1023.979c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM823.64 756.859c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["percentage"]},"attrs":[{},{},{}],"properties":{"order":253,"id":191,"name":"percentage","prevSize":80,"code":59838},"setIdx":0,"setId":1,"iconIdx":70},{"icon":{"paths":["M634.635 1025.058h-8.795c-278.481-6.291-501.825-233.529-501.825-512.936 0-143.581 58.979-273.384 154.031-366.506l0.087-0.085c90.386-89.279 214.664-144.424 351.826-144.424 4.737 0 9.461 0.066 14.166 0.197l-0.694-0.015c137.202 2.016 261.047 57.579 351.895 146.67l-0.082-0.081c7.946 7.955 12.862 18.943 12.862 31.077s-4.914 23.121-12.862 31.078v0c-7.955 7.946-18.943 12.862-31.077 12.862s-23.121-4.914-31.078-12.862v0c-76.784-75.59-182.227-122.264-298.57-122.264-235.104 0-425.69 190.589-425.69 425.69s190.589 425.69 425.69 425.69c110.943 0 211.975-42.441 287.744-111.973l-0.312 0.283 12.901-12.313c8.295-7.915 19.557-12.787 31.955-12.787s23.661 4.872 31.975 12.806l-0.018-0.018c8.518 7.555 13.858 18.529 13.858 30.751 0 10.778-4.154 20.587-10.95 27.911l0.023-0.026-2.931 2.931-17.003 16.418c-90.306 81.848-210.707 131.947-342.808 131.947-1.515 0-3.029-0.007-4.542-0.019l0.232 0.001z","M869.176 468.024h-820.891c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h820.891c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z","M781.223 643.928h-732.939c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h732.939c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["euro"]},"attrs":[{},{},{}],"properties":{"order":233,"id":190,"name":"euro","prevSize":80,"code":59837},"setIdx":0,"setId":1,"iconIdx":71},{"icon":{"paths":["M921.533 0.085h-716.682c-1.243-0.037-2.704-0.062-4.171-0.062-76.892 0-139.525 61.042-142.084 137.312l-0.005 0.236v725.456c3.196 89.572 76.578 160.974 166.638 160.974 1.887 0 3.764-0.032 5.636-0.094l-0.273 0.005h690.939c24.1-0.324 43.553-19.777 43.877-43.845v-936.102c-0.324-24.1-19.777-43.553-43.845-43.877h-0.032zM877.652 936.158h-647.059c-1.635 0.122-3.546 0.19-5.469 0.19-41.629 0-75.733-32.206-78.764-73.058l-0.015-0.26c3.043-41.116 37.15-73.322 78.779-73.322 1.923 0 3.834 0.068 5.723 0.205l-0.254-0.015h647.059zM877.652 702.141h-647.059c-30.908 0.035-59.934 8.052-85.138 22.102l0.893-0.458v-586.214c2.714-28.081 26.19-49.857 54.753-49.857 1.322 0 2.628 0.047 3.925 0.14l-0.175-0.011h672.802z","M321.859 321.859h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z","M321.859 526.626h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["book"]},"attrs":[{},{},{}],"properties":{"order":232,"id":189,"name":"book","prevSize":80,"code":59834},"setIdx":0,"setId":1,"iconIdx":72},{"icon":{"paths":["M512 1023.233c-5.884-0.076-11.5-1.139-16.713-3.034l0.353 0.112c-294.424-132.986-495.622-424.049-495.622-762.108 0-25.218 1.12-50.181 3.311-74.828l-0.228 3.185c1.091-20.259 15.977-36.738 35.376-40.276l0.266-0.038c170.071-26.272 323.191-75.689 464.402-145.534l-9.257 4.14c5.319-2.475 11.548-3.917 18.114-3.917s12.794 1.442 18.385 4.030l-0.271-0.112c131.953 65.702 285.069 115.119 446.231 140.248l8.916 1.146c19.665 3.576 34.547 20.055 35.634 40.204l0.003 0.11c1.964 21.462 3.084 46.42 3.084 71.642 0 338.056-201.194 629.119-490.377 759.984l-5.245 2.124c-4.86 1.783-10.476 2.845-16.326 2.921h-0.034zM88.991 226.293c-0.817 12.916-1.282 28.011-1.282 43.216 0 292.016 171.793 543.905 419.826 660.115l4.464 1.881c252.498-118.092 424.293-369.981 424.293-661.997 0-15.204-0.465-30.297-1.384-45.268l0.1 2.056c-158.673-27.438-300.659-73.974-432.589-137.992l9.58 4.192c-122.352 59.822-264.337 106.359-413.369 132.403l-9.639 1.394z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shield"]},"attrs":[{}],"properties":{"order":231,"id":188,"name":"shield","prevSize":80,"code":59833},"setIdx":0,"setId":1,"iconIdx":73},{"icon":{"paths":["M330.174 602.273c-7.682 42.896-39.055 245.207-48.017 302.191 0 4.482 0 5.762-7.042 5.762h-167.743c-0.080 0.001-0.175 0.001-0.271 0.001-15.204 0-27.532-12.324-27.532-27.532 0-1.356 0.097-2.688 0.287-3.989l-0.017 0.147 131.888-839.984c3.692-21.668 21.877-38.101 44.080-39.052l0.096-0.002c342.523 0 371.334-8.323 459.046 26.251 135.089 52.499 147.892 179.266 99.235 316.915s-163.261 201.671-315.635 203.593c-97.314 0-156.215-15.364-169.663 55.059zM883.334 277.035c-3.841-3.2-5.121-3.841-6.402 0-5.355 29.455-12.228 55.051-20.948 79.774l1.103-3.586c-89.632 256.095-338.682 234.965-460.326 234.965-0.779-0.096-1.678-0.148-2.591-0.148-11.979 0-21.761 9.396-22.379 21.221l-0.002 0.053c-50.578 320.115-64.022 384.138-64.022 384.138-0.348 1.539-0.545 3.309-0.545 5.121 0 13.404 10.837 24.274 24.228 24.326h143.414c19.695-0.387 35.904-14.834 39.022-33.697l0.032-0.236c0-12.164 0 14.084 32.653-206.154 10.243-49.297 32.013-44.176 64.022-44.176 159.417 0 284.262-64.022 320.115-256.095 6.318-18.661 9.965-40.158 9.965-62.502 0-57.89-24.469-110.067-63.632-146.751l-0.111-0.101z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["paypal"]},"attrs":[{}],"properties":{"order":229,"id":186,"name":"paypal","prevSize":80,"code":59835},"setIdx":0,"setId":1,"iconIdx":74},{"icon":{"paths":["M590.061 298.931c-114.531 3.839-397.983 35.193-397.983 268.094 0 250.818 326.32 261.056 433.175 99.176 33.603 38.347 68.51 73.249 105.572 105.755l1.281 1.101 133.727-127.968s-76.142-58.226-76.142-120.93v-335.917c0-57.586-57.586-188.114-264.895-188.114s-319.921 127.968-319.921 238.663l174.038 17.277c14.203-60.869 64.928-106.62 127.331-113.199l0.637-0.053c95.977 0 83.181 67.824 83.181 158.042zM590.061 497.283c0 182.995-198.352 155.482-198.352 39.029s119.010-127.968 198.352-131.807zM909.983 870.953c-103.709 94.959-242.457 153.142-394.795 153.142-5.62 0-11.222-0.080-16.805-0.238l0.821 0.018c-195.949-7.842-370.074-95.152-492.135-230.369l-0.545-0.613c-15.997-17.277 0-25.596 12.797-18.556 172.759 101.736 443.413 268.735 876.588 69.103 19.837-8.319 33.91 4.48 15.357 27.515zM1004.041 876.072c-11.535 27.968-28.737 51.536-50.314 70.185l-0.235 0.197c-12.797 10.238-22.395 6.399-15.357-8.319s46.068-106.215 30.074-127.968-87.020-9.598-113.251-7.038-30.714 4.48-32.634 0 51.186-35.829 88.3-40.309 96.617 0 108.772 13.437c1.186 7.461 1.861 16.066 1.861 24.83 0 26.848-6.362 52.211-17.654 74.664l0.435-0.957z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["amazon"]},"attrs":[{}],"properties":{"order":240,"id":185,"name":"amazon","prevSize":80,"code":59836},"setIdx":0,"setId":1,"iconIdx":75},{"icon":{"paths":["M886.693 1024.275h-13.467c-160.026-17.856-304.577-71.747-429.374-153.346l3.746 2.3c-119.858-77.12-218.914-175.988-293.94-291.862l-2.302-3.793c-79.488-121.374-133.409-266.357-150.654-422.398l-0.396-4.402c-0.449-4.129-0.705-8.915-0.705-13.764 0-33.499 12.23-64.138 32.468-87.698l-0.148 0.178c22.748-27.565 55.792-45.921 93.167-49.141l0.507-0.035h152.22c68.811 0.070 125.838 50.433 136.308 116.306l0.101 0.786c6.186 45.698 17.046 86.978 32.301 126.063l-1.274-3.701c5.445 14.293 8.602 30.826 8.602 48.093 0 38.102-15.36 72.621-40.225 97.697l-35.702 35.702c57.148 89.292 131.053 162.822 217.85 217.845l2.869 1.699 35.713-35.126c25.068-24.854 59.584-40.214 97.686-40.214 17.267 0 33.797 3.154 49.045 8.917l-0.956-0.318c35.315 13.822 76.581 24.675 119.402 30.688l2.96 0.339c66.678 10.304 117.132 67.286 117.132 136.053 0 1.155-0.014 2.306-0.044 3.455l0.002-0.171v140.51c0 0 0 0.001 0 0.001 0 76.101-61.525 137.836-137.551 138.165h-0.032zM277.818 87.541h-139.923c-14.387 0.979-27.011 7.794-35.649 18.070l-0.063 0.079c-7.402 8.481-11.91 19.649-11.91 31.87 0 1.557 0.075 3.102 0.218 4.622l-0.015-0.194c15.36 145.534 63.692 277.249 137.347 391.045l-2.107-3.473c70.038 108.811 159.916 198.686 265.265 266.637l3.46 2.091c110.418 72.299 242.202 121.557 384.020 137.782l4.14 0.385c0.876 0.051 1.901 0.082 2.931 0.082 14.116 0 26.923-5.614 36.306-14.733l-0.013 0.013c8.993-9.216 14.563-21.807 14.638-35.698v-139.938c0.005-0.32 0.012-0.7 0.012-1.075 0-25.332-18.708-46.298-43.066-49.826l-0.272-0.033c-53.039-7.261-100.842-19.551-146.288-36.646l4.608 1.52c-5.299-2.044-11.429-3.227-17.839-3.227-13.78 0-26.284 5.472-35.452 14.364l0.014-0.013-58.546 58.546c-8.012 7.814-18.974 12.637-31.061 12.637-7.941 0-15.396-2.080-21.853-5.726l0.223 0.115c-125.62-71.885-227.060-173.136-297.132-294.748l-2.038-3.837c-3.709-6.254-5.9-13.781-5.9-21.824 0-12.079 4.944-23.005 12.918-30.863l58.55-58.55c8.886-8.986 14.38-21.346 14.38-34.991 0-6.364-1.195-12.447-3.371-18.038l0.116 0.338c-15.651-40.876-27.948-88.685-34.741-138.244l-0.385-3.437c-3.034-25.502-24.528-45.088-50.597-45.088-0.323 0-0.646 0.002-0.971 0.011l0.048-0.001z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["phone"]},"attrs":[{}],"properties":{"order":227,"id":184,"name":"phone","prevSize":80,"code":59832},"setIdx":0,"setId":1,"iconIdx":76},{"icon":{"paths":["M1004.108 24.712c-7.747-14.706-22.886-24.587-40.341-24.696h-421.65c-24.95 0-45.175 20.226-45.175 45.175s20.226 45.175 45.175 45.175v0h331.285l-111.431 154.198c-5.421 7.322-8.676 16.532-8.676 26.503 0 24.752 20.065 44.816 44.816 44.816 14.78 0 27.892-7.156 36.054-18.191l0.086-0.121 165.641-225.875c5.688-7.337 9.117-16.671 9.117-26.809 0-7.369-1.813-14.314-5.016-20.415l0.116 0.241z","M310.219 13.266s0 0-3.011 0c-3.291-2.852-7.063-5.273-11.155-7.112l-0.289-0.116c-3.885-1.54-8.385-2.612-13.079-3l-0.172-0.011h-222.261c-17.471 0.11-32.609 9.989-40.237 24.446l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.174 0 10.136 3.43 19.472 9.191 26.909l-0.075-0.1 322.25 437.295v466.81c0.335 24.814 20.362 44.84 45.142 45.175h240.967c24.814-0.335 44.84-20.362 45.175-45.142v-466.843l3.614-5.421 220.455 218.045c8.085 8.184 19.307 13.251 31.713 13.251 0.073 0 0.148 0 0.222 0h-0.011c0.137 0.001 0.299 0.003 0.462 0.003 12.327 0 23.47-5.072 31.455-13.244l0.008-0.008c8.162-8.172 13.212-19.46 13.212-31.923s-5.048-23.751-13.212-31.925v0zM596.326 470.439c-5.634 7.174-9.035 16.335-9.035 26.291 0 0.075 0 0.15 0 0.224v-0.011 436.692h-150.584v-436.692c0-0.064 0-0.138 0-0.212 0-9.955-3.401-19.117-9.105-26.384l0.071 0.093-277.075-380.073h109.624l355.98 352.366z"],"attrs":[{},{}],"grid":16,"tags":["filter-slash"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":226,"id":183,"name":"filter-slash","prevSize":80,"code":59831},"setIdx":0,"setId":1,"iconIdx":77},{"icon":{"paths":["M1023.989 515.199c-3.553-280.043-231.4-505.695-511.951-505.695-282.764 0-511.989 229.225-511.989 511.989 0 254.507 185.702 465.641 428.999 505.297l2.953 0.397v-362.872h-127.997v-149.116h127.997v-113.278c-0.721-6.073-1.134-13.108-1.134-20.239 0-100.028 81.088-181.117 181.117-181.117 4.227 0 8.421 0.145 12.576 0.43l-0.561-0.031c40.895 0.576 80.479 4.278 119.075 10.879l-4.516-0.639v127.997h-63.999c-2.79-0.372-6.015-0.583-9.289-0.583-41 0-74.238 33.238-74.238 74.238 0 2.458 0.12 4.89 0.352 7.287l-0.024-0.304v96.638h142.077l-23.040 149.116h-118.397v358.392c246.274-40.033 432-251.177 432-505.702 0-1.084-0.003-2.169-0.010-3.253l0.001 0.166z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["facebook"]},"attrs":[{}],"properties":{"order":223,"id":182,"name":"facebook","prevSize":80,"code":59828},"setIdx":0,"setId":1,"iconIdx":78},{"icon":{"paths":["M342.537 824.066c0 4.477-4.477 7.674-10.871 7.674s-11.511 0-11.511-7.674 5.115-7.674 10.871-7.674 11.511 3.197 11.511 7.674zM278.59 814.474c0 4.477 0 9.592 8.952 10.871 1.214 0.597 2.642 0.946 4.152 0.946 3.78 0 7.050-2.187 8.614-5.366l0.025-0.057c0-4.477 0-8.952-8.952-10.871s-11.511 0-12.789 4.477zM369.395 811.277c-5.755 0-9.592 5.115-8.952 10.232s5.755 7.034 12.151 5.755 9.592-5.755 8.952-10.232-5.755-6.395-12.151-5.755zM505.605 0.416c-1.401-0.013-3.056-0.022-4.712-0.022-276.536 0-500.713 224.177-500.713 500.713 0 5.405 0.085 10.79 0.256 16.152l-0.019-0.784c-0.043 2.548-0.069 5.556-0.069 8.569 0 228.113 144.076 422.574 346.195 497.35l3.671 1.189c26.218 4.477 35.81-12.151 35.81-25.58s0-85.69 0-127.896c0 0-144.523 31.974-175.218-63.949 0 0-23.021-63.949-56.913-77.378 0 0-47.321-33.253 3.197-32.614 34.33 4.756 63.049 25.238 79.017 53.815l0.277 0.541c18.278 35.272 54.506 58.959 96.268 58.959 20.145 0 39.003-5.513 55.146-15.109l-0.498 0.274c2.59-27.799 14.547-52.403 32.64-71.009l-0.027 0.027c-115.106-13.429-231.491-30.055-231.491-234.050-0.145-2.57-0.228-5.577-0.228-8.605 0-45.473 18.687-86.583 48.8-116.067l0.028-0.028c-6.646-19.325-10.482-41.593-10.482-64.756 0-28.316 5.734-55.295 16.103-79.836l-0.505 1.347c43.484-14.069 142.605 56.913 142.605 56.913 38.806-11.37 83.386-17.912 129.495-17.912s90.69 6.541 132.864 18.747l-3.369-0.835s99.119-70.982 142.605-56.913c10.054 23.11 15.902 50.029 15.902 78.316 0 23.246-3.951 45.569-11.215 66.335l0.429-1.407c32.709 30.551 53.097 73.938 53.097 122.086 0 0.919-0.007 1.836-0.022 2.75l0.001-0.138c0 204.633-121.502 220.621-236.608 234.050 20.129 22.501 32.432 52.369 32.432 85.111 0 3.805-0.166 7.572-0.492 11.293l0.034-0.483c0 71.622 0 159.871 0 177.137-0.001 0.076-0.001 0.166-0.001 0.258 0 14.833 12.025 26.858 26.858 26.858 3.209 0 6.287-0.564 9.141-1.596l-0.187 0.058c204.623-75.025 347.995-268.129 347.995-494.721 0-3.906-0.042-7.803-0.127-11.688l0.010 0.579c0.012-1.343 0.019-2.929 0.019-4.517 0-282.54-229.044-511.584-511.584-511.584-2.256 0-4.508 0.015-6.757 0.043l0.342-0.003zM201.213 730.062s0 7.034 0 10.871c1.389 1.394 3.312 2.257 5.436 2.257s4.047-0.863 5.436-2.257v0s0-7.034 0-11.511-8.314-1.918-10.871 0.64zM178.831 712.796s0 6.395 4.477 8.314c1.064 1.308 2.674 2.137 4.477 2.137s3.413-0.829 4.468-2.127l0.009-0.010s0-6.395-4.477-8.314-7.674-1.918-8.952 0zM242.778 788.256s0 8.952 0 13.429 10.871 5.115 13.429 0 0-8.952 0-13.429-8.314-3.197-10.871 0zM219.118 756.92s0 7.674 0 12.789 8.952 7.034 12.151 5.115c1.56-1.787 2.512-4.14 2.512-6.715s-0.952-4.928-2.522-6.727l0.010 0.012c-3.197-5.115-8.314-7.034-12.151-4.477z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["github"]},"attrs":[{}],"properties":{"order":222,"id":181,"name":"github","prevSize":80,"code":59829},"setIdx":0,"setId":1,"iconIdx":79},{"icon":{"paths":["M916.838 305.187c0 8.789 0 18.096 0 26.886 0.007 1.078 0.011 2.355 0.011 3.631 0 325.813-264.124 589.936-589.936 589.936-1.276 0-2.552-0.004-3.827-0.012l0.196 0.001c-0.51 0.001-1.114 0.002-1.717 0.002-118.435 0-228.719-34.901-321.128-94.979l2.284 1.392c17.062 0 33.091 0 51.704 0 0.002 0 0.005 0 0.007 0 97.98 0 188.092-33.688 259.382-90.114l-0.874 0.667c-91.316-0.843-168.422-60.74-195.032-143.307l-0.407-1.464c11.773 1.974 25.336 3.103 39.164 3.103 0.228 0 0.456 0 0.683-0.001h-0.035c19.516-0.144 38.393-2.587 56.462-7.070l-1.657 0.348c-95.075-19.916-165.451-103.058-165.451-202.636 0-0.015 0-0.030 0-0.046v0.002c27.158 15.264 59.356 24.854 93.652 26.353l0.448 0.016c-57.044-38.132-94.103-102.278-94.103-175.078 0-0.433 0.001-0.865 0.004-1.298v0.067c0.070-38.098 10.43-73.76 28.447-104.376l-0.527 0.968c103.206 126.555 255.913 209.348 428.158 218.642l1.498 0.064c-3.124-14.226-4.998-30.628-5.17-47.438l-0.001-0.128c-0.065-1.95-0.103-4.241-0.103-6.541 0-114.221 92.594-206.813 206.813-206.813 61.722 0 117.127 27.038 155.021 69.915l0.191 0.222c49.972-10.236 94.309-28.167 134.131-52.719l-1.769 1.015c-16.162 49.068-48.731 89.016-91.083 114.259l-0.949 0.523c44.586-4.928 85.337-16.248 123.076-33.095l-2.607 1.040c-28.94 41.915-63.161 77.617-102.256 107.223l-1.151 0.837z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["twitter"]},"attrs":[{}],"properties":{"order":221,"id":180,"name":"twitter","prevSize":80,"code":59830},"setIdx":0,"setId":1,"iconIdx":80},{"icon":{"paths":["M795.402 3.99c-18.498-7.266-39.637-3.303-54.171 10.57l-443.93 443.93v-408.918c0-27.085-22.461-49.546-49.546-49.546s-49.546 22.461-49.546 49.546v924.854c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-408.918l443.93 443.93c9.248 9.248 22.461 14.534 35.012 14.534 6.607 0 12.552-1.321 19.157-3.964 18.498-7.927 30.389-25.764 30.389-45.582v-924.854c0-19.818-11.891-38.316-30.389-45.582zM726.699 854.857l-342.857-342.857 342.857-342.857v685.713z"],"attrs":[{}],"tags":["step-backward-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":211,"id":0,"name":"step-backward-alt","prevSize":80,"code":59820},"setIdx":0,"setId":1,"iconIdx":81},{"icon":{"paths":["M776.245 0.027c-27.085 0-49.546 22.461-49.546 49.546v408.918l-443.93-443.93c-13.873-13.873-35.673-18.498-54.171-10.57s-30.389 25.764-30.389 45.582v924.854c0 19.818 11.891 38.316 30.389 45.582 5.945 2.643 12.552 3.964 19.157 3.964 13.212 0 25.764-5.284 35.012-14.534l443.93-443.93v408.918c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-924.854c0-27.085-22.461-49.546-49.546-49.546zM297.301 854.857v-685.713l342.857 342.857-342.857 342.857z"],"attrs":[{}],"tags":["step-forward-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":210,"id":1,"name":"step-forward-alt","prevSize":80,"code":59821},"setIdx":0,"setId":1,"iconIdx":82},{"icon":{"paths":["M1009.943 479.818l-437.090-409.59c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v366.875l-425.388-399.058c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v819.178c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l425.388-399.058v366.875c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l437.090-409.59c8.777-8.191 14.043-19.895 14.043-32.182s-5.266-23.99-14.043-32.182zM87.783 820.362v-616.725l328.842 308.362-328.842 308.362zM586.896 820.362v-616.725l328.842 308.362-328.842 308.362z"],"attrs":[{}],"tags":["forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":259,"id":2,"name":"forward","prevSize":80,"code":59822},"setIdx":0,"setId":1,"iconIdx":83},{"icon":{"paths":["M997.655 62.036c-15.798-7.022-34.522-3.511-47.395 8.191l-425.388 399.058v-366.875c0-17.554-10.532-33.352-26.331-40.374s-34.522-3.511-47.395 8.191l-437.090 409.59c-8.777 8.191-14.043 19.895-14.043 32.182s5.266 23.99 14.043 32.182l437.090 409.59c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-366.875l425.388 399.058c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-819.178c0-17.554-10.532-33.352-26.331-40.374zM437.104 820.362l-328.842-308.362 328.842-308.362v616.725zM936.217 820.362l-328.842-308.362 328.842-308.362v616.725z"],"attrs":[{}],"tags":["backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":254,"id":3,"name":"backward","prevSize":80,"code":59823},"setIdx":0,"setId":1,"iconIdx":84},{"icon":{"paths":["M997.071 62.036c-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-17.554-10.532-33.938-26.916-40.374-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-23.99-19.895-43.885-43.885-43.885s-43.885 19.895-43.885 43.885v819.178c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-819.178c0-17.554-10.532-33.938-26.916-40.374zM468.115 815.681l-303.681-303.681 303.681-303.681v607.362zM936.217 815.681l-303.681-303.681 303.681-303.681v607.362z"],"attrs":[{}],"tags":["fast-backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":207,"id":4,"name":"fast-backward","prevSize":80,"code":59824},"setIdx":0,"setId":1,"iconIdx":85},{"icon":{"paths":["M980.102 58.526c-23.99 0-43.885 19.895-43.885 43.885v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v819.178c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-819.178c0-23.99-19.895-43.885-43.885-43.885zM87.783 815.681v-607.362l303.681 303.681-303.681 303.681zM555.885 815.681v-607.362l303.681 303.681-303.681 303.681z"],"attrs":[{}],"tags":["fast-forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":206,"id":5,"name":"fast-forward","prevSize":80,"code":59825},"setIdx":0,"setId":1,"iconIdx":86},{"icon":{"paths":["M313.813 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z","M710.187 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["pause"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":205,"id":6,"name":"pause","prevSize":80,"code":59826},"setIdx":0,"setId":1,"iconIdx":87},{"icon":{"paths":["M280.358 1024.923c-6.942-0.037-13.534-1.495-19.514-4.095l0.321 0.124c-18.014-7.505-30.445-24.968-30.445-45.335 0-0.116 0-0.233 0.002-0.349v0.019-926.568c1.044-26.589 22.852-47.75 49.602-47.75 12.752 0 24.381 4.809 33.173 12.712l-0.045-0.040 463.285 463.285c8.969 8.98 14.517 21.381 14.517 35.077s-5.547 26.097-14.517 35.078v0l-463.285 463.285c-8.576 8.44-20.14 13.868-32.964 14.555l-0.127 0.006zM329.996 168.508v686.985l343.492-343.492z"],"attrs":[{}],"tags":["play"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":204,"id":7,"name":"play","prevSize":80,"code":59827},"setIdx":0,"setId":1,"iconIdx":88},{"icon":{"paths":["M736.143 262.827l-277.617 113.777c-38.623 15.541-68.655 45.573-83.837 83.191l-0.359 1.004-113.777 277.617c-0.848 2.097-1.341 4.529-1.341 7.076 0 8.091 4.968 15.023 12.020 17.908l0.129 0.047c2.113 0.807 4.557 1.275 7.111 1.275s4.997-0.467 7.252-1.321l-0.141 0.047 277.617-113.777c38.623-15.541 68.655-45.573 83.837-83.191l0.359-1.004 113.777-277.617c0.848-2.097 1.341-4.529 1.341-7.076 0-8.091-4.968-15.023-12.020-17.908l-0.129-0.047c-2.113-0.807-4.557-1.275-7.111-1.275s-4.997 0.467-7.252 1.321l0.141-0.047zM512 568.889c-31.419 0-56.889-25.471-56.889-56.889s25.471-56.889 56.889-56.889c31.419 0 56.889 25.471 56.889 56.889v0c0 31.419-25.471 56.889-56.889 56.889v0z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{}],"tags":["compass"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":203,"id":8,"name":"compass","prevSize":80,"code":59819},"setIdx":0,"setId":1,"iconIdx":89},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-585.157c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v585.157c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM102.412 204.809c-8.079 0-14.629 6.55-14.629 14.629v0 585.126c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-585.126c0-8.079-6.55-14.629-14.629-14.629v0z","M336.462 497.371c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0zM336.462 351.091c-16.158 0-29.256 13.098-29.256 29.256s13.098 29.256 29.256 29.256c16.158 0 29.256-13.098 29.256-29.256v0c0-16.158-13.098-29.256-29.256-29.256v0z","M512 731.422c-24.105-0.325-43.559-19.78-43.884-43.853v-0.032c0-39.788-9.947-73.14-131.653-73.14s-131.653 33.352-131.653 73.14c0 24.237-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0c0-160.909 165.005-160.909 219.422-160.909s219.422 0 219.422 160.909c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032z","M804.562 438.86h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M746.051 614.397h-117.025c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h117.025c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{},{}],"tags":["id-card"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":202,"id":9,"name":"id-card","prevSize":80,"code":59818},"setIdx":0,"setId":1,"iconIdx":90},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-146.313c0.325-24.105 19.78-43.559 43.853-43.884h0.032c56.552 0 102.397-45.844 102.397-102.397s-45.844-102.397-102.397-102.397v0c-24.105-0.325-43.559-19.78-43.884-43.853v-146.313c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v146.313c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032c-56.552 0-102.397 45.844-102.397 102.397s45.844 102.397 102.397 102.397v0c24.105 0.325 43.559 19.78 43.884 43.853v146.313c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM87.785 696.9v107.664c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-107.664c-84.233-20.753-145.724-95.646-145.724-184.9s61.489-164.147 144.417-184.627l1.306-0.273v-107.664c0-8.079-6.55-14.629-14.629-14.629v0h-819.175c-8.079 0-14.629 6.55-14.629 14.629v0 107.664c84.233 20.753 145.724 95.646 145.724 184.9s-61.489 164.147-144.417 184.627l-1.306 0.273z"],"attrs":[{}],"tags":["ticket"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":201,"id":10,"name":"ticket","prevSize":80,"code":59817},"setIdx":0,"setId":1,"iconIdx":91},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file-o","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":200,"id":11,"name":"file-o","prevSize":80,"code":59816},"setIdx":0,"setId":1,"iconIdx":92},{"icon":{"paths":["M680.456 749.159c-0.386 0.011-0.839 0.017-1.294 0.017-27.363 0-49.546-22.183-49.546-49.546 0-13.679 5.543-26.064 14.506-35.029v0l258.959-256.978-258.959-256.978c-8.952-8.963-14.491-21.342-14.491-35.012s5.537-26.049 14.491-35.013v0c8.963-8.952 21.342-14.491 35.012-14.491s26.049 5.537 35.013 14.491v0l294.632 291.991c8.952 8.963 14.491 21.342 14.491 35.012s-5.537 26.049-14.491 35.013v0l-294.632 291.991c-8.452 8.957-20.405 14.534-33.659 14.534-0.011 0-0.023 0-0.034 0h0.002z","M49.571 957.913c-27.215-0.367-49.179-22.331-49.546-49.51v-500.779c0.367-27.215 22.331-49.179 49.51-49.546h924.892c27.363 0 49.546 22.183 49.546 49.546s-22.183 49.546-49.546 49.546v0h-875.31v451.197c-0.367 27.215-22.331 49.179-49.51 49.546h-0.036z"],"attrs":[{},{}],"tags":["reply"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":199,"id":12,"name":"reply","prevSize":80,"code":59815},"setIdx":0,"setId":1,"iconIdx":93},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M441.707 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-121.77-121.77c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l121.767-122.873c7.51-7.501 17.881-12.141 29.334-12.141s21.825 4.639 29.335 12.141v0c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0l-94.092 92.985 94.092 92.985c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M705.718 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-110.726h-345.927c-22.926 0-41.511-18.585-41.511-41.511s18.585-41.511 41.511-41.511v0h387.438c22.801 0.307 41.204 18.71 41.511 41.481v154.451c-1.483 21.852-19.449 39.046-41.487 39.297h-0.025z"],"attrs":[{},{},{}],"tags":["directions-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":195,"id":13,"name":"directions-alt","prevSize":80,"code":59813},"setIdx":0,"setId":1,"iconIdx":94},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M582.293 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-0.004-0.004c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l94.092-92.985-94.092-92.985c-8.139-7.599-13.212-18.392-13.212-30.371 0-22.926 18.585-41.511 41.511-41.511 11.979 0 22.771 5.073 30.347 13.188l0.022 0.025 121.767 122.319c7.668 7.537 12.42 18.020 12.42 29.612s-4.752 22.075-12.413 29.605l-0.006 0.005-121.767 121.767c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M318.282 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-154.451c0.307-22.801 18.71-41.204 41.481-41.511h387.468c22.926 0 41.511 18.585 41.511 41.511s-18.585 41.511-41.511 41.511v0h-345.927v110.696c0.021 0.497 0.032 1.078 0.032 1.663 0 23.049-18.537 41.768-41.516 42.061h-0.027z"],"attrs":[{},{},{}],"tags":["directions"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":196,"id":14,"name":"directions","prevSize":80,"code":59814},"setIdx":0,"setId":1,"iconIdx":95},{"icon":{"paths":["M992.966 368.647c-25.16-29.841-61.437-46.809-100.641-46.809h-235.803v-160.907c0-88.937-71.969-160.907-165.589-160.907-40.959 0-77.821 24.575-94.203 62.607l-148.619 346.974h-109.417c-76.65 0-138.673 62.023-138.673 138.673v337.613c0 76.066 62.607 138.087 138.673 138.087h676.396c63.778 0 118.194-45.639 129.31-108.832l77.235-438.838c6.436-38.618-4.096-77.821-29.255-107.662zM138.696 936.209c-28.086 0-50.905-22.82-50.905-50.32v-337.613c0-28.086 22.82-50.905 50.905-50.905h94.203v438.838h-94.203zM858.39 899.933c-3.511 21.064-21.65 36.277-43.298 36.277h-493.839v-473.945l156.226-365.699c2.341-5.266 7.607-9.362 18.723-9.362 40.373 0 72.555 32.766 72.555 73.139v248.674h323.57c13.457 0 25.16 5.266 33.352 15.213s11.702 22.82 9.362 36.277l-77.235 438.838z"],"attrs":[{}],"tags":["thumbs-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":191,"id":15,"name":"thumbs-up","prevSize":80,"code":59811},"setIdx":0,"setId":1,"iconIdx":96},{"icon":{"paths":["M885.271 0.068h-676.92c-63.773 0-118.184 45.635-129.299 108.822l-76.643 438.799c-6.435 38.614 4.096 77.814 28.669 107.652 25.158 29.838 61.432 46.805 100.632 46.805h235.782v160.892c0 88.929 71.963 160.892 165.574 160.892 40.955 0 77.814-24.573 94.195-62.602l148.606-346.943h109.992c76.643 0 138.66-62.017 138.66-138.66v-337.583c0-76.059-62.017-138.075-138.66-138.075zM702.731 561.731l-156.212 365.666c-2.341 5.266-7.606 9.361-18.722 9.361-40.369 0-72.549-32.763-72.549-73.133v-248.652h-323.541c-13.456 0-25.158-5.266-33.349-15.211-8.776-9.946-11.701-22.818-9.361-36.274l76.643-438.799c3.51-21.062 21.648-36.274 43.294-36.274h493.795v473.317zM936.172 475.726c0 28.083-22.818 50.901-50.901 50.901h-94.195v-438.799h94.195c28.083 0 50.901 22.818 50.901 50.315v337.583z"],"attrs":[{}],"tags":["thumbs-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":258,"id":16,"name":"thumbs-down","prevSize":80,"code":59812},"setIdx":0,"setId":1,"iconIdx":97},{"icon":{"paths":["M272.871 1023.949c-0.183 0.003-0.398 0.003-0.613 0.003-13.694 0-26.089-5.555-35.058-14.536v0l-165.145-167.127c-8.952-8.963-14.49-21.341-14.49-35.010s5.536-26.047 14.49-35.012v0c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l132.101 132.101 132.115-132.115c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l-0.014-0.014c8.952 8.963 14.49 21.341 14.49 35.010s-5.536 26.047-14.49 35.012v0l-165.145 165.145c-9.003 10.201-22.109 16.602-36.709 16.602-1.030 0-2.051-0.033-3.065-0.094l0.139 0.006z","M272.871 1023.949c-0.002 0-0.003 0-0.005 0-27.495 0-49.827-22.103-50.2-49.508v-924.845c0.373-27.441 22.705-49.543 50.2-49.543 0.002 0 0.003 0 0.005 0v0c27.077 0.373 48.882 22.409 48.882 49.539 0 0.002 0 0.003 0 0.005v0 924.81c0 0.002 0 0.003 0 0.005 0 27.13-21.807 49.167-48.848 49.539h-0.036z","M850.216 990.919c-27.077-0.373-48.882-22.409-48.882-49.539 0-0.002 0-0.003 0-0.005v0-268.195l-25.763 14.533c-6.952 3.915-15.262 6.222-24.111 6.222-27.515 0-49.821-22.305-49.821-49.821 0-18.667 10.266-34.936 25.459-43.468l0.251-0.13 43.598-23.781c12.816-9.446 28.919-15.117 46.348-15.117 12.457 0 24.238 2.898 34.704 8.055l-0.461-0.206c29.13 13.962 48.887 43.216 48.887 77.083 0 0.303-0.002 0.608-0.005 0.91v-0.046 293.958c-0.373 27.441-22.705 49.543-50.2 49.543-0.002 0-0.003 0-0.005 0v0z","M817.187 330.341c-81.802-0.375-147.969-66.775-147.969-148.629 0-82.086 66.545-148.63 148.63-148.63s148.629 66.543 148.63 148.629v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.722-66.249 147.969-147.969 147.969-0.464 0-0.929-0.002-1.393-0.006h0.071zM817.187 132.168c-27.362 0-49.543 22.182-49.543 49.543s22.182 49.543 49.543 49.543v0c27.362 0 49.543-22.182 49.543-49.543s-22.182-49.543-49.543-49.543v0z","M783.498 462.457h-32.369c-27.362 0-49.543-22.182-49.543-49.543s22.182-49.543 49.543-49.543v0h32.369c43.854-0.949 79.426-35.145 82.556-78.334l0.015-0.274c0-19.156 0-42.278 0-70.022v-33.028c0-0.002 0-0.003 0-0.005 0-27.13 21.807-49.167 48.848-49.539h0.036c0.002 0 0.003 0 0.005 0 27.495 0 49.827 22.103 50.2 49.508v33.064c0 29.726 0 54.168 0 75.306-6.052 95.91-84.883 171.519-181.572 172.411h-0.088z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":255,"id":17,"name":"sort-numeric-down-alt","prevSize":80,"code":59798},"setIdx":0,"setId":1,"iconIdx":98},{"icon":{"paths":["M438.010 264.266c-14.187-0.375-26.837-6.658-35.632-16.47l-0.042-0.046-132.124-132.124-132.124 132.124c-8.829 7.573-20.392 12.184-33.031 12.184s-24.204-4.609-33.099-12.241l0.068 0.057c-7.83-8.725-12.617-20.319-12.617-33.031s4.787-24.306 12.658-33.077l-0.040 0.046 165.156-165.156c9.138-8.838 21.605-14.283 35.344-14.283s26.204 5.445 35.358 14.297l165.142 165.142c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.632 7.819-20.139 12.603-32.763 12.603-0.791 0-1.578-0.019-2.36-0.056l0.11 0.005z","M272.855 1023.983c-0.002 0-0.003 0-0.005 0-27.497 0-49.83-22.104-50.203-49.511v-924.907c0.373-27.443 22.706-49.547 50.203-49.547 0.002 0 0.003 0 0.005 0v0c27.079 0.373 48.886 22.411 48.886 49.542 0 0.002 0 0.003 0 0.005v0 924.872c0 0.002 0 0.003 0 0.005 0 27.131-21.808 49.17-48.852 49.542h-0.036z","M850.238 990.951c-27.079-0.373-48.886-22.411-48.886-49.542 0-0.002 0-0.003 0-0.005v0-268.213l-25.764 14.534c-6.952 3.916-15.263 6.223-24.112 6.223-27.517 0-49.824-22.307-49.824-49.824 0-18.668 10.267-34.938 25.461-43.471l0.251-0.13 43.601-23.782c12.817-9.446 28.921-15.118 46.351-15.118 12.458 0 24.239 2.898 34.706 8.056l-0.461-0.206c29.132 13.963 48.89 43.219 48.89 77.089 0 0.303-0.002 0.608-0.005 0.91v-0.046 293.978c-0.373 27.443-22.706 49.547-50.203 49.547-0.002 0-0.003 0-0.005 0v0z","M817.208 330.329c-81.808-0.375-147.979-66.78-147.979-148.639 0-82.091 66.549-148.64 148.64-148.64s148.639 66.547 148.64 148.639v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.727-66.253 147.979-147.979 147.979-0.465 0-0.929-0.002-1.394-0.006h0.071zM817.208 132.142c-27.364 0-49.547 22.183-49.547 49.547s22.183 49.547 49.547 49.547v0c27.364 0 49.547-22.183 49.547-49.547s-22.183-49.547-49.547-49.547v0z","M783.516 462.453h-32.371c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h32.371c43.857-0.949 79.431-35.147 82.562-78.34l0.015-0.274c0-19.158 0-42.28 0-70.027v-33.031c0-0.002 0-0.003 0-0.005 0-27.131 21.808-49.17 48.852-49.542h0.036c0.002 0 0.003 0 0.005 0 27.497 0 49.83 22.104 50.203 49.511v33.066c0 29.728 0 54.172 0 75.311-6.052 95.916-84.889 171.531-181.584 172.423h-0.088z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":182,"id":18,"name":"sort-numeric-up-alt","prevSize":80,"code":59799},"setIdx":0,"setId":1,"iconIdx":99},{"icon":{"paths":["M394.416 774.25l-80.59 80.59v-805.246c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v805.246l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 12.552-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M971.763 924.862l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416s54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416zM761.038 807.94l31.708-88.517 31.708 88.517h-63.416z","M632.886 415.556c12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517z"],"attrs":[{},{},{}],"tags":["sort-alpha-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":183,"id":19,"name":"sort-alpha-down-alt","prevSize":80,"code":59800},"setIdx":0,"setId":1,"iconIdx":100},{"icon":{"paths":["M299.293 14.584c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0l80.59-80.59v805.246c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-805.246l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145z","M971.763 924.862l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416s54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416zM761.038 807.94l31.708-88.517 31.708 88.517h-63.416z","M632.886 415.556c12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517z"],"attrs":[{},{},{}],"tags":["sort-alpha-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":184,"id":20,"name":"sort-alpha-up-alt","prevSize":80,"code":59801},"setIdx":0,"setId":1,"iconIdx":101},{"icon":{"paths":["M272.871 1023.949c-0.183 0.003-0.398 0.003-0.613 0.003-13.694 0-26.089-5.555-35.058-14.536v0l-165.145-167.127c-8.952-8.963-14.49-21.341-14.49-35.010s5.536-26.047 14.49-35.012v0c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l132.101 132.101 132.115-132.115c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l-0.014-0.014c8.952 8.963 14.49 21.341 14.49 35.010s-5.536 26.047-14.49 35.012v0l-165.145 165.145c-9.003 10.201-22.109 16.602-36.709 16.602-1.030 0-2.051-0.033-3.065-0.094l0.139 0.006z","M272.871 1023.949c-0.002 0-0.003 0-0.005 0-27.495 0-49.827-22.103-50.2-49.508v-924.845c0.373-27.441 22.705-49.543 50.2-49.543 0.002 0 0.003 0 0.005 0v0c27.077 0.373 48.882 22.409 48.882 49.539 0 0.002 0 0.003 0 0.005v0 924.81c0 0.002 0 0.003 0 0.005 0 27.13-21.807 49.167-48.848 49.539h-0.036z","M850.216 462.457c-27.077-0.373-48.882-22.409-48.882-49.539 0-0.002 0-0.003 0-0.005v0-268.195l-25.101 14.533c-6.952 3.915-15.262 6.222-24.111 6.222-27.515 0-49.821-22.305-49.821-49.821 0-18.667 10.266-34.936 25.459-43.468l0.251-0.13 42.937-22.46c12.816-9.446 28.919-15.117 46.348-15.117 12.457 0 24.238 2.898 34.704 8.055l-0.461-0.206c29.13 13.962 48.887 43.216 48.887 77.083 0 0.303-0.002 0.608-0.005 0.91v-0.046 292.636c-0.373 27.441-22.705 49.543-50.2 49.543-0.002 0-0.003 0-0.005 0v0z","M817.187 858.804c-81.802-0.375-147.969-66.775-147.969-148.629 0-82.086 66.545-148.63 148.63-148.63s148.629 66.543 148.63 148.629v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.722-66.249 147.969-147.969 147.969-0.464 0-0.929-0.002-1.393-0.006h0.071zM817.187 660.63c-27.362 0-49.543 22.182-49.543 49.543s22.182 49.543 49.543 49.543v0c27.362 0 49.543-22.182 49.543-49.543s-22.182-49.543-49.543-49.543v0z","M783.498 990.919h-32.369c-27.362 0-49.543-22.182-49.543-49.543s22.182-49.543 49.543-49.543v0h32.369c43.854-0.949 79.426-35.145 82.556-78.334l0.015-0.274c0-19.156 0-42.278 0-70.022v-33.028c0-0.002 0-0.003 0-0.005 0-27.13 21.807-49.167 48.848-49.539h0.036c0.002 0 0.003 0 0.005 0 27.495 0 49.827 22.103 50.2 49.508v33.064c0 29.726 0 54.168 0 75.306-6.373 95.766-85.015 171.188-181.539 172.409l-0.121 0.002z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":185,"id":21,"name":"sort-numeric-down","prevSize":80,"code":59802},"setIdx":0,"setId":1,"iconIdx":102},{"icon":{"paths":["M429.424 264.27c-12.552 0-25.103-4.625-35.012-14.534l-130.14-130.14-130.14 130.14c-19.157 19.157-50.867 19.157-70.025 0s-19.157-50.867 0-70.025l165.154-165.154c19.157-19.157 50.867-19.157 70.025 0l165.154 165.154c19.157 19.157 19.157 50.867 0 70.025-9.909 9.909-22.461 14.534-35.012 14.534z","M264.27 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z","M842.306 462.454c-27.085 0-49.546-22.461-49.546-49.546v-268.209l-25.764 13.873c-24.443 13.212-54.171 4.625-67.382-19.157s-4.625-54.171 19.157-67.382l42.939-23.782c23.782-17.175 54.171-19.818 80.594-7.927 29.728 13.873 48.885 44.262 48.885 78.612v293.973c0 27.085-22.461 49.546-49.546 49.546z","M809.275 858.821c-81.916 0-148.638-66.721-148.638-148.638s66.721-148.638 148.638-148.638 148.638 66.721 148.638 148.638-66.721 148.638-148.638 148.638zM809.275 660.638c-27.085 0-49.546 22.461-49.546 49.546s22.461 49.546 49.546 49.546 49.546-22.461 49.546-49.546-22.461-49.546-49.546-49.546z","M774.923 990.943h-31.709c-27.085 0-49.546-22.461-49.546-49.546s22.461-49.546 49.546-49.546h31.709c42.939 0 80.594-35.673 82.576-78.612 0.661-19.157 0.661-42.28 0.661-70.025v-33.030c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v33.030c0 29.728 0 54.171-1.321 75.31-4.625 95.128-86.54 172.42-181.668 172.42z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":186,"id":22,"name":"sort-numeric-up","prevSize":80,"code":59803},"setIdx":0,"setId":1,"iconIdx":103},{"icon":{"paths":["M394.416 774.25l-80.59 80.59v-805.246c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v805.246l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M644.115 459.814c25.763 9.248 54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416zM824.453 279.476h-63.416l31.708-88.517 31.708 88.517z","M952.607 608.444c-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517 12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178z"],"attrs":[{},{},{}],"tags":["sort-alpha-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":187,"id":23,"name":"sort-alpha-down","prevSize":80,"code":59804},"setIdx":0,"setId":1,"iconIdx":104},{"icon":{"paths":["M299.293 14.584c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0l80.59-80.59v805.246c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-805.246l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145z","M644.115 459.814c25.763 9.248 54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416zM824.453 279.476h-63.416l31.708-88.517 31.708 88.517z","M952.607 608.444c-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517 12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178z"],"attrs":[{},{},{}],"tags":["sort-alpha-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":188,"id":24,"name":"sort-alpha-up","prevSize":80,"code":59805},"setIdx":0,"setId":1,"iconIdx":105},{"icon":{"paths":["M412.908 264.27c-12.552 0-25.103-4.625-35.012-14.534l-130.14-130.14-130.14 130.14c-19.157 19.157-50.867 19.157-70.025 0s-19.157-50.867 0-70.025l165.154-165.154c19.157-19.157 50.867-19.157 70.025 0l165.154 165.154c19.157 19.157 19.157 50.867 0 70.025-9.909 9.909-22.461 14.534-35.012 14.534z","M247.755 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z","M776.245 1023.975c-12.552 0-25.103-4.625-35.012-14.534l-165.154-165.154c-19.157-19.157-19.157-50.867 0-70.025s50.867-19.157 70.025 0l130.14 130.14 130.14-130.14c19.157-19.157 50.867-19.157 70.025 0s19.157 50.867 0 70.025l-165.154 165.154c-9.909 9.909-22.461 14.534-35.012 14.534z","M776.245 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z"],"attrs":[{},{},{},{}],"tags":["sort-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":189,"id":25,"name":"sort-alt","prevSize":80,"code":59806},"setIdx":0,"setId":1,"iconIdx":106},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":190,"id":26,"name":"sort-amount-up","prevSize":80,"code":59807},"setIdx":0,"setId":1,"iconIdx":107},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":180,"id":27,"name":"sort-amount-down","prevSize":80,"code":59808},"setIdx":0,"setId":1,"iconIdx":108},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":179,"id":28,"name":"sort-amount-down-alt","prevSize":80,"code":59809},"setIdx":0,"setId":1,"iconIdx":109},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":178,"id":29,"name":"sort-amount-up-alt","prevSize":80,"code":59810},"setIdx":0,"setId":1,"iconIdx":110},{"icon":{"paths":["M516.624 0.063s-4.624 0-7.266 0c-250.354 0-468.339 184.297-507.973 432.008-5.284 33.028 3.963 67.377 26.423 93.139 21.799 25.762 52.844 40.295 85.874 40.295h3.963c114.938 0 201.471 28.405 256.958 83.892 56.148 56.148 83.892 144.002 83.231 260.922 0 33.028 14.533 64.075 39.634 85.874 21.137 18.496 48.222 28.405 75.304 27.744 5.945 0 11.89 0 17.835-1.321 250.354-40.295 435.971-261.583 432.669-515.239-3.963-275.455-231.196-503.349-507.312-507.312zM575.414 924.852c-3.963 0-9.247-0.661-13.211-3.963-1.982-1.982-5.284-5.284-5.284-9.908 0.661-144.663-36.991-256.299-112.295-331.603-74.643-74.643-184.958-112.956-326.978-112.956h-3.963c-5.284 0-8.588-3.302-10.57-5.284-1.321-1.982-5.284-6.606-3.963-13.211 32.368-199.489 208.077-348.777 410.209-348.777 1.982 0 3.963 0 5.945 0v0c218.647 3.302 406.246 190.242 409.548 409.548 2.643 204.775-147.306 383.786-348.777 416.154zM375.925 315.152c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM575.414 231.921c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM642.13 315.152c0-36.331 29.725-66.716 66.716-66.716s66.716 29.725 66.716 66.716-29.725 66.716-66.716 66.716-66.716-29.725-66.716-66.716zM858.134 514.643c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM774.903 714.132c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716z"],"attrs":[{}],"tags":["palette"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":257,"id":30,"name":"palette","prevSize":80,"code":59797},"setIdx":0,"setId":1,"iconIdx":111},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["undo"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":256,"id":31,"name":"undo","prevSize":80,"code":59796},"setIdx":0,"setId":1,"iconIdx":112},{"icon":{"paths":["M921.582 789.931h-819.163c-56.418-0.33-102.065-45.976-102.396-102.364v-585.149c0.33-56.418 45.976-102.065 102.364-102.396h819.194c56.418 0.33 102.065 45.976 102.396 102.364v585.149c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 87.791c-8.079 0-14.628 6.55-14.628 14.628v0 585.117c0 8.079 6.55 14.628 14.628 14.628v0h819.163c8.079 0 14.628-6.55 14.628-14.628v0-585.117c0-8.079-6.55-14.628-14.628-14.628v0z","M687.535 1023.977h-175.535c-24.105-0.325-43.559-19.779-43.884-43.852v-234.079c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 190.163h131.651c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M512 1023.977h-175.535c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.535c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["desktop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":175,"id":32,"name":"desktop","prevSize":80,"code":59795},"setIdx":0,"setId":1,"iconIdx":113},{"icon":{"paths":["M809.27 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M809.27 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M908.36 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M214.73 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M214.73 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M313.82 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M512 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M512 693.665c-27.214-0.367-49.178-22.331-49.545-49.509v-594.576c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 594.541c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M611.090 693.665h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-v"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":174,"id":33,"name":"sliders-v","prevSize":80,"code":59793},"setIdx":0,"setId":1,"iconIdx":114},{"icon":{"paths":["M974.421 264.275h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 264.275h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 363.365c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 858.815h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 858.815h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 957.906c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 561.545h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 561.545h-594.541c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h594.541c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 660.635c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-h"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":173,"id":34,"name":"sliders-h","prevSize":80,"code":59794},"setIdx":0,"setId":1,"iconIdx":115},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M438.902 628.957c-24.091-0.325-43.534-19.768-43.859-43.827v-292.424c0-24.222 19.636-43.859 43.859-43.859s43.859 19.636 43.859 43.859v0 292.393c-0.325 24.091-19.768 43.534-43.827 43.859h-0.032z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{},{}],"tags":["search-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":172,"id":35,"name":"search-plus","prevSize":80,"code":59791},"setIdx":0,"setId":1,"iconIdx":116},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c-0.332 243.061-197.282 440.011-440.311 440.344h-0.033zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{}],"tags":["search-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":171,"id":36,"name":"search-minus","prevSize":80,"code":59792},"setIdx":0,"setId":1,"iconIdx":117},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M656.524 506.734c-7.496-5.775-17.020-9.255-27.356-9.255-13.907 0-26.344 6.301-34.608 16.205l-0.059 0.071-82.501 103.566-82.501-105.321c-8.353-9.812-20.716-15.996-34.521-15.996-24.992 0-45.251 20.259-45.251 45.251 0 11.185 4.058 21.422 10.782 29.32l-0.053-0.064 93.034 117.023-93.034 117.023c-5.992 7.47-9.615 17.061-9.615 27.5 0 24.376 19.76 44.136 44.136 44.136 13.937 0 26.366-6.461 34.454-16.55l0.067-0.086 82.501-101.81 82.501 105.321c8.276 9.979 20.653 16.31 34.509 16.384h0.012c1.085 0.096 2.348 0.149 3.622 0.149 24.236 0 43.884-19.648 43.884-43.884 0-12.183-4.964-23.206-12.981-31.157l-0.003-0.003-93.034-117.023 95.374-117.023c5.757-7.489 9.225-16.998 9.225-27.316 0-14.937-7.268-28.175-18.461-36.373l-0.126-0.088z"],"attrs":[{},{}],"tags":["file-excel"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":170,"id":37,"name":"file-excel","prevSize":80,"code":59790},"setIdx":0,"setId":1,"iconIdx":118},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M599.182 678.758c-35.612-22.599-62.527-56.14-76.26-95.834l-0.389-1.295c8.513-24.598 13.428-52.947 13.428-82.444 0-12.194-0.841-24.192-2.466-35.938l0.154 1.359c-3.892-22.255-23.068-38.954-46.145-38.954-18.984 0-35.328 11.301-42.673 27.543l-0.119 0.295c-1.82 12.259-2.859 26.407-2.859 40.798 0 35.745 6.41 69.992 18.145 101.654l-0.657-2.026c-26.663 62.22-51.535 112.192-78.718 160.691l4.409-8.561c-41.543 23.405-98.3 58.512-107.076 98.885-7.021 32.766 54.416 117.023 159.151-65.534 38.752-15.060 86.483-29.549 135.472-40.728l7.296-1.4c33.675 19.598 73.544 32.44 116.101 35.636l0.922 0.056c0.37 0.010 0.806 0.016 1.244 0.016 26.499 0 47.98-21.481 47.98-47.98 0-12.689-4.926-24.228-12.97-32.809l0.025 0.026c-24.575-25.16-97.714-18.139-133.992-13.457zM319.497 854.293c16.89-28.581 38.169-52.658 63.208-72.128l0.569-0.426c-39.787 63.193-63.778 74.31-63.778 73.139zM490.35 455.829c15.213 0 14.043 67.289 3.511 85.427-4.439-14.87-6.994-31.954-6.994-49.637 0-12.459 1.269-24.62 3.683-36.365l-0.199 1.16zM439.445 741.365c17.504-31.081 34.829-68.095 49.5-106.424l1.99-5.919c15.998 29.397 37.215 53.976 62.634 73.317l0.558 0.407c-44.504 11.253-82.688 24.668-119.265 41.035l4.582-1.832zM714.451 730.833s-10.532 12.873-77.821-16.384c73.139-4.68 85.427 12.287 77.821 16.968z"],"attrs":[{},{}],"tags":["file-pdf"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":169,"id":38,"name":"file-pdf","prevSize":80,"code":59789},"setIdx":0,"setId":1,"iconIdx":119},{"icon":{"paths":["M863.086 1024h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h518.437c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-518.437c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-451.145c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 451.145c0 88.87-72.044 160.914-160.914 160.914v0z","M424.229 702.172c-11.709-0.922-21.992-6.372-29.216-14.581l-0.041-0.048-175.543-175.543c-2.703-5.532-4.284-12.038-4.284-18.913 0-24.237 19.648-43.886 43.886-43.886 6.875 0 13.381 1.581 19.174 4.4l-0.261-0.114 144.531 144.531 499.127-495.616c5.532-2.703 12.038-4.284 18.913-4.284 24.237 0 43.886 19.648 43.886 43.886 0 6.875-1.581 13.381-4.4 19.174l0.114-0.261-526.629 526.629c-7.264 8.256-17.547 13.707-29.107 14.619l-0.151 0.010z"],"attrs":[{},{}],"tags":["check-square"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":168,"id":39,"name":"check-square","prevSize":80,"code":59788},"setIdx":0,"setId":1,"iconIdx":120},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M636.121 682.666c-0.064 0-0.141 0-0.217 0-12.783 0-24.345-5.222-32.671-13.649l-153.295-153.295-153.29 153.29c-8.289 7.74-19.456 12.492-31.731 12.492-25.706 0-46.545-20.839-46.545-46.545 0-12.276 4.752-23.441 12.518-31.759l-0.025 0.028 186.182-186.182c8.42-8.41 20.049-13.613 32.892-13.613s24.471 5.201 32.893 13.613v0l153.29 153.29 215.35-215.35c8.289-7.74 19.456-12.492 31.731-12.492 25.706 0 46.545 20.839 46.545 46.545 0 12.276-4.752 23.441-12.518 31.759l0.025-0.028-248.243 248.243c-8.33 8.432-19.892 13.654-32.675 13.654-0.076 0-0.153 0-0.228 0h0.012z","M915.393 626.192c-25.567-0.345-46.201-20.979-46.545-46.512v-176.285h-170.666c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h217.212c25.567 0.345 46.201 20.979 46.545 46.512v222.831c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["chart-line"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":167,"id":40,"name":"chart-line","prevSize":80,"code":59787},"setIdx":0,"setId":1,"iconIdx":121},{"icon":{"paths":["M431.778 504.757c-115.379 0-208.912-93.532-208.912-208.912s93.532-208.912 208.912-208.912c115.379 0 208.912 93.532 208.912 208.912v0c-0.316 115.251-93.66 208.596-208.881 208.912h-0.030zM431.778 170.499c-69.227 0-125.347 56.12-125.347 125.347s56.12 125.347 125.347 125.347c69.227 0 125.347-56.12 125.347-125.347v0c0-69.227-56.12-125.347-125.347-125.347v0z","M41.809 894.726c-23.076 0-41.782-18.707-41.782-41.782v0c0-264.622 302.504-264.622 431.751-264.622 40.111 0 75.766 0 108.076 3.9 21.638 1.734 38.542 19.721 38.542 41.657 0 1.025-0.037 2.041-0.11 3.046l0.008-0.134c-2.011 21.692-20.122 38.543-42.169 38.543-1.041 0-2.072-0.038-3.093-0.111l0.137 0.008c-30.083 0-63.509-3.343-101.391-3.343-288.576 0-348.186 72.423-348.186 181.057 0.003 0.167 0.004 0.364 0.004 0.561 0 22.767-18.457 41.225-41.225 41.225-0.197 0-0.394-0.001-0.59-0.004h0.030z","M549.326 937.066c-11.533-0.010-21.972-4.693-29.526-12.255v0c-7.671-7.32-12.439-17.622-12.439-29.037 0-1.349 0.067-2.683 0.197-3.998l-0.013 0.166 8.914-106.963c0.738-10.242 5.062-19.352 11.708-26.194l-0.009 0.010 307.518-307.518c20.408-18.948 47.843-30.576 77.993-30.576s57.585 11.627 78.066 30.642l-0.072-0.067c19.978 20.131 32.325 47.862 32.325 78.475 0 0.614-0.005 1.227-0.014 1.838l0.001-0.093c0.008 0.488 0.013 1.065 0.013 1.643 0 28.208-11.272 53.784-29.557 72.47l-307.499 307.499c-6.609 6.771-15.516 11.272-25.457 12.242l-0.17 0.013-108.076 10.028zM657.402 885.256v0zM598.35 806.705l-3.343 42.34 43.454-3.9 296.932-296.932c3.138-3.741 5.043-8.607 5.043-13.917 0-0.396-0.010-0.789-0.031-1.178l0.003 0.055c-0.022-8.097-2.969-15.5-7.838-21.216l0.038 0.046c-5.22-3.914-11.806-6.267-18.942-6.267s-13.722 2.354-19.024 6.327l0.082-0.059z"],"attrs":[{},{},{}],"tags":["user-edit"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":166,"id":41,"name":"user-edit","prevSize":80,"code":59786},"setIdx":0,"setId":1,"iconIdx":122},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 568.889c-23.436-0.316-42.351-19.231-42.667-42.636v-199.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 199.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 739.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["exclamation-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":165,"id":42,"name":"exclamation-circle","prevSize":80,"code":59785},"setIdx":0,"setId":1,"iconIdx":123},{"icon":{"paths":["M897.818 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M126.182 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M229.321 342.011v407.465c0 37.624 30.5 68.122 68.122 68.122v0h43.293v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0 0-144.522h103.139v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-144.522h43.293c37.624 0 68.122-30.5 68.122-68.122v0-407.465z","M787.039 257.334c-19.494-64.041-60.923-116.427-115.35-149.595l-1.159-0.657-9.55-5.73-10.187-5.093 11.46-19.737 33.743-63.667c0.321-0.883 0.507-1.901 0.507-2.963 0-2.96-1.443-5.584-3.665-7.206l-0.025-0.018h-4.457c-3.404 0.157-6.379 1.864-8.255 4.426l-0.021 0.030-34.38 59.21-10.823 19.737-10.187-4.457-10.823-3.82c-30.354-10.882-65.375-17.173-101.867-17.173s-71.511 6.291-104.038 17.846l2.171-0.673-10.187 3.82-10.823 4.457-10.823-19.737-34.38-63.667c-1.592-2.804-4.559-4.665-7.958-4.665-5.038 0-9.122 4.084-9.122 9.122 0 1.637 0.431 3.174 1.186 4.502l-0.024-0.045 33.743 63.667 11.46 19.737-10.187 5.093-9.55 5.73c-55.806 33.938-97.174 86.897-115.417 149.695l-0.455 1.831c-4.717 15.122-7.703 32.57-8.27 50.627l-0.007 0.307h565.357c-0.686-18.4-3.432-35.851-8.017-52.541l0.378 1.609zM384.668 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0zM639.332 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0z"],"attrs":[{},{},{},{}],"tags":["android"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":164,"id":43,"name":"android","prevSize":80,"code":59781},"setIdx":0,"setId":1,"iconIdx":124},{"icon":{"paths":["M1008.591 433.288l-5.759-22.397h-476.114v202.221h284.773c-32.683 123.892-143.735 213.758-275.775 213.758-1.138 0-2.275-0.006-3.409-0.019l0.172 0.001c-86.669-0.738-165.327-34.432-224.185-89.141l0.207 0.19c-58.421-57.606-94.785-137.451-95.35-225.791v-0.106c1.039-88.017 36.49-167.558 93.495-225.963l-0.064 0.066c57.221-54.292 134.738-87.683 220.053-87.683 0.93 0 1.86 0.004 2.788 0.012l-0.142-0.001c73.95 0.586 141.235 28.652 192.25 74.471l-0.268-0.238 140.787-144.626c-88.734-79.432-206.552-127.99-335.711-127.99-0.54 0-1.080 0.001-1.62 0.003h0.084c-0.919-0.006-2.007-0.009-3.094-0.009-142.761 0-272.106 57.428-366.198 150.443l0.049-0.049c-90.236 93.627-145.825 221.183-145.825 361.724 0 137.597 53.284 262.749 140.344 355.947l-0.279-0.301c96.859 96.51 230.481 156.177 378.041 156.177 2.082 0 4.162-0.012 6.238-0.036l-0.316 0.003c1.053 0.009 2.296 0.013 3.543 0.013 134.433 0 255.872-55.642 342.541-145.151l0.123-0.127c82.61-90.584 133.206-211.608 133.206-344.45 0-3.543-0.036-7.076-0.108-10.602l0.009 0.526c0.105-4.284 0.163-9.328 0.163-14.387 0-26.957-1.687-53.521-4.962-79.591l0.318 3.106z"],"attrs":[{}],"tags":["google"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":163,"id":44,"name":"google","prevSize":80,"code":59782},"setIdx":0,"setId":1,"iconIdx":125},{"icon":{"paths":["M800.988 541.411c-0.025-1.227-0.040-2.673-0.040-4.124 0-81.14 45.665-151.616 112.697-187.127l1.149-0.554c-43.688-60.224-112.883-99.642-191.399-102.285l-0.408-0.010c-81.199-6.394-169.43 47.312-202.037 47.312s-113.166-44.755-174.544-44.755c-127.87 0-262.775 101.657-262.775 304.332 0.671 66.632 12.562 130.276 33.869 189.424l-1.262-4.011c28.131 81.837 133.625 287.070 243.594 283.874 57.542 0 98.461-40.919 173.266-40.919s109.97 40.919 174.544 40.919c110.608 0 206.511-188.61 234.004-272.365-83.223-34.69-140.659-115.384-140.659-209.49 0-0.076 0-0.154 0-0.231v0.012zM673.117 166.109c33.682-37.846 54.259-88 54.259-142.959 0-7.972-0.433-15.844-1.277-23.592l0.085 0.959c-61.9 6.974-115.875 36.341-154.514 79.679l-0.211 0.24c-37.077 39.007-59.884 91.883-59.884 150.086 0 4.782 0.154 9.526 0.457 14.231l-0.033-0.641c1.605 0.048 3.493 0.075 5.387 0.075 63.128 0 119.134-30.497 154.087-77.563l0.366-0.514z"],"attrs":[{}],"tags":["apple"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":162,"id":45,"name":"apple","prevSize":80,"code":59783},"setIdx":0,"setId":1,"iconIdx":126},{"icon":{"paths":["M0.001 0.001h480v480h-480zM543.999 0.001h480v480h-480zM0.001 543.999h480v480h-480zM543.999 543.999h480v480h-480z"],"attrs":[{}],"tags":["microsoft"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":161,"id":46,"name":"microsoft","prevSize":80,"code":59784},"setIdx":0,"setId":1,"iconIdx":127},{"icon":{"paths":["M512 966.541c-12.142-0.011-23.132-4.94-31.084-12.902v0l-397.063-398.237c-51.836-52.853-83.828-125.328-83.828-205.276s31.993-152.425 83.874-205.324l-0.045 0.047c52.537-52.531 125.112-85.022 205.276-85.022s152.739 32.491 205.277 85.023v0l17.595 15.249 16.423-16.423c52.328-52.883 124.914-85.631 205.15-85.631 0.25 0 0.502 0 0.752 0.001h-0.038c0.384-0.001 0.839-0.003 1.294-0.003 79.947 0 152.3 32.511 204.559 85.034l0.012 0.012c51.836 52.853 83.828 125.328 83.828 205.276s-31.993 152.425-83.874 205.324l0.045-0.047-397.063 398.237c-7.714 8.616-18.706 14.16-30.998 14.66l-0.087 0.003zM289.714 145.434c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l0.010-0.010c-36.735 36.902-59.445 87.793-59.445 143.987s22.71 107.086 59.452 143.994l-0.007-0.007 365.979 368.325 365.392-367.151c36.877-36.837 59.687-87.747 59.687-143.987s-22.81-107.15-59.686-143.985l-0.001-0.001c-36.111-36.238-86.066-58.659-141.257-58.659-0.65 0-1.3 0.003-1.949 0.010l0.099-0.001c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l-47.497 47.497c-8.080 7.677-19.030 12.4-31.084 12.4s-23.006-4.723-31.104-12.418l0.019 0.018-47.507-47.507c-36.581-36.947-87.314-59.823-143.391-59.823-0.107 0-0.213 0-0.32 0h0.016z"],"attrs":[{}],"tags":["heart"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":160,"id":47,"name":"heart","prevSize":80,"code":59780},"setIdx":0,"setId":1,"iconIdx":128},{"icon":{"paths":["M746.047 0.023h-468.093c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h468.125c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM760.674 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-468.093c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h468.093c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["mobile"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":159,"id":48,"name":"mobile","prevSize":80,"code":59778},"setIdx":0,"setId":1,"iconIdx":129},{"icon":{"paths":["M863.070 0.023h-702.14c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h702.172c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM877.699 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-702.14c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h702.14c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["tablet"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":220,"id":49,"name":"tablet","prevSize":80,"code":59779},"setIdx":0,"setId":1,"iconIdx":130},{"icon":{"paths":["M687.134 672.539c-0.215 0-0.469 0.001-0.724 0.001-92.498 0-176.242-37.479-236.875-98.078l0.001 0.001c-61.305-61.014-99.243-145.459-99.243-238.766 0-186.032 150.809-336.841 336.841-336.841s336.841 150.809 336.841 336.841c0 186.032-150.808 336.84-336.84 336.841v0zM687.134 88.761c-136.764 0.345-247.499 111.293-247.499 248.106 0 68.362 27.648 130.267 72.373 175.141l-0.007-0.007c44.929 45.079 107.076 72.972 175.74 72.972 137.026 0 248.106-111.081 248.106-248.106s-111.081-248.106-248.106-248.106c-0.213 0-0.427 0-0.639 0.001h0.033z","M74.166 993.618c-11.682-0.919-21.941-6.357-29.147-14.547l-0.041-0.048c-6.919-7.71-11.15-17.955-11.15-29.188s4.231-21.479 11.185-29.23l-0.036 0.041 377.122-377.705c7.941-7.869 18.873-12.731 30.94-12.731 24.281 0 43.963 19.683 43.963 43.963 0 12.213-4.98 23.263-13.020 31.229l-0.003 0.003-380.624 373.619c-7.248 8.237-17.507 13.675-29.039 14.585l-0.151 0.010z","M278.488 1022.806c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-7.28-7.798-11.75-18.301-11.75-29.848 0-24.181 19.603-43.783 43.783-43.783 11.548 0 22.050 4.47 29.874 11.775l-0.026-0.023 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z","M395.245 906.051c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-8.584-8.015-13.935-19.399-13.935-32.033 0-24.181 19.603-43.783 43.783-43.783 12.634 0 24.018 5.351 32.008 13.909l0.023 0.026 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{},{},{}],"tags":["key"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":219,"id":50,"name":"key","prevSize":80,"code":59777},"setIdx":0,"setId":1,"iconIdx":131},{"icon":{"paths":["M468.112 906.989c0 48.569-39.207 87.775-87.775 87.775s-87.775-39.207-87.775-87.775 39.207-87.775 87.775-87.775 87.775 39.207 87.775 87.775zM760.696 819.214c-48.569 0-87.775 39.207-87.775 87.775s39.207 87.775 87.775 87.775 87.775-39.207 87.775-87.775-39.207-87.775-87.775-87.775zM1022.852 259.207l-117.033 468.135c-4.681 19.311-22.236 33.355-42.718 33.355h-585.169c-21.066 0-39.207-15.214-43.302-36.28l-110.597-607.405h-80.168c-23.991 0-43.888-19.896-43.888-43.888s19.896-43.888 43.888-43.888h117.033c21.066 0 39.207 15.214 43.302 36.28l25.163 139.271h750.771c13.458 0 26.333 6.436 34.525 16.969s11.119 24.577 8.192 37.451zM923.958 292.562h-678.795l69.050 380.359h514.363l95.383-380.359z"],"attrs":[{}],"tags":["shopping-cart"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":156,"id":51,"name":"shopping-cart","prevSize":80,"code":59776},"setIdx":0,"setId":1,"iconIdx":132},{"icon":{"paths":["M46.723 830.79c-0.231 0.004-0.504 0.007-0.777 0.007-24.867 0-45.027-20.159-45.027-45.027 0-5.382 0.944-10.545 2.676-15.329l-0.098 0.314 75.044-247.348c-14.665-39.037-23.418-84.145-24.012-131.219l-0.003-0.259c0-0.259-0.001-0.566-0.001-0.874 0-54.129 11.264-105.629 31.575-152.281l-0.955 2.464c60.427-141.25 198.214-238.423 358.696-238.423 106.632 0 203.244 42.901 273.517 112.384l-0.037-0.035c34.184 34.714 62.103 75.715 81.849 121.093l1 2.581c19.107 44.313 30.22 95.904 30.22 150.090s-11.112 105.775-31.182 152.616l0.962-2.526c-20.746 47.959-48.666 88.96-82.9 123.725l0.051-0.051c-70.377 70.256-167.536 113.703-274.844 113.703-48.549 0-95.021-8.893-137.875-25.139l2.675 0.889-247.348 76.845c-3.958 1.137-8.504 1.794-13.204 1.801h-0.004zM442.359 91.749c-0.253-0.001-0.554-0.001-0.856-0.001-41.547 0-81.081 8.613-116.916 24.15l1.904-0.734c-71.28 30.615-127.108 85.859-157.736 154.781l-0.758 1.912c-14.788 34.299-23.39 74.229-23.39 116.169s8.602 81.87 24.134 118.125l-0.744-1.956c1.7 4.555 2.682 9.817 2.682 15.309s-0.984 10.754-2.783 15.621l0.101-0.312-55.232 180.107 180.107-55.232c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101c34.014 14.517 73.588 22.957 115.132 22.957 122.867 0 228.493-73.819 274.946-179.525l0.754-1.926c13.056-32.416 20.631-70.004 20.631-109.36 0-163.117-130.105-295.846-292.2-300.074l-0.391-0.008z","M977.277 1022.304c-1.984 0.28-4.275 0.439-6.603 0.439s-4.621-0.16-6.864-0.469l0.26 0.030-247.348-75.044c-40.428 15.733-87.225 24.849-136.153 24.849-158.064 0-293.904-95.147-353.373-231.291l-0.967-2.482c-2.862-5.665-4.539-12.349-4.539-19.423 0-18.267 11.175-33.923 27.063-40.506l0.291-0.107c5.517-2.599 11.984-4.116 18.806-4.116 18.319 0 34.084 10.94 41.115 26.643l0.114 0.286c15.121 35.516 35.349 65.946 60.152 91.977l-0.117-0.122c54.202 53.624 128.774 86.753 211.084 86.753 41.688 0 81.392-8.499 117.473-23.857l-1.963 0.743c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101 180.107 55.232-55.232-180.107c-1.7-4.555-2.682-9.817-2.682-15.309s0.984-10.754 2.783-15.621l-0.101 0.312c14.803-33.932 23.415-73.467 23.415-115.014 0-0.301 0-0.602-0.001-0.902v0.046c0.001-0.319 0.001-0.697 0.001-1.075 0-81.912-33.275-156.053-87.045-209.642l-0.008-0.008c-12.456-15.658-25.63-29.595-39.895-42.336l-0.328-0.288c-13.187-8.012-21.861-22.298-21.861-38.61 0-24.867 20.159-45.027 45.027-45.027 10.297 0 19.786 3.456 27.372 9.273l-0.107-0.079c22.529 14.653 42.156 30.276 60.175 47.561l-0.139-0.132c34.393 34.592 62.347 75.63 81.881 121.138l0.968 2.536c19.357 44.266 30.62 95.849 30.62 150.064 0 0.431-0.001 0.863-0.003 1.293v-0.066c-0.136 48.508-8.929 94.919-24.912 137.831l0.898-2.751 75.044 247.348c1.634 4.472 2.578 9.633 2.578 15.015 0 24.867-20.159 45.027-45.027 45.027-0.273 0-0.546-0.003-0.818-0.007h0.041z"],"attrs":[{},{}],"tags":["comments"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":155,"id":52,"name":"comments","prevSize":80,"code":59774},"setIdx":0,"setId":1,"iconIdx":133},{"icon":{"paths":["M89.22 977.058c-0.217 0.004-0.473 0.007-0.729 0.007-23.349 0-42.278-18.929-42.278-42.278 0-5.053 0.887-9.901 2.513-14.393l-0.093 0.294 90.193-295.946c-18.558-46.704-29.318-100.819-29.318-157.447 0-0.732 0.001-1.463 0.006-2.195v0.113c0-0.201 0-0.439 0-0.677 0-62.834 12.85-122.668 36.068-177.015l-1.118 2.942c23.991-55.124 56.28-102.224 95.856-142.080l-0.026 0.026c39.776-39.941 87.133-72.3 139.735-94.736l2.882-1.092c51.475-22.443 111.446-35.5 174.466-35.5s122.993 13.057 177.355 36.615l-2.889-1.115c161.557 70.486 272.594 228.494 273.398 412.529v0.103c-0.378 123.676-50.484 235.576-131.361 316.819l0.016-0.016c-39.83 39.549-86.93 71.841-139.11 94.681l-2.944 1.149c-51.439 22.133-111.317 35.003-174.201 35.003-57.536 0-112.557-10.776-163.152-30.417l3.076 1.050-295.946 90.193c-3.604 1.586-7.788 2.774-12.162 3.355l-0.239 0.026zM557.097 103.314c-149.484 0.668-277.735 90.884-333.925 219.741l-0.917 2.358c-17.678 41.648-27.953 90.087-27.953 140.927s10.274 99.278 28.861 143.354l-0.909-2.427c1.596 4.277 2.518 9.218 2.518 14.374s-0.923 10.098-2.613 14.668l0.095-0.293-69.336 235.065 233.938-71.027c4.277-1.596 9.218-2.518 14.374-2.518s10.098 0.923 14.668 2.613l-0.293-0.095c41.635 17.765 90.074 28.091 140.927 28.091s99.291-10.328 143.335-28.999l-2.408 0.907c131.638-56.462 222.168-184.951 222.168-334.586 0-51.2-10.598-99.924-29.723-144.098l0.907 2.35c-56.972-130.557-184.848-220.199-333.686-220.41h-0.028z"],"attrs":[{}],"tags":["comment"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":154,"id":53,"name":"comment","prevSize":80,"code":59775},"setIdx":0,"setId":1,"iconIdx":134},{"icon":{"paths":["M921.588 175.553h-219.422v-73.14c-4.292-57.542-52.035-102.602-110.299-102.602-2.366 0-4.715 0.074-7.043 0.221l0.318-0.016h-146.282c-2.010-0.13-4.36-0.204-6.725-0.204-58.266 0-106.007 45.060-110.277 102.234l-0.022 0.368v73.14h-219.422c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM409.603 102.412c0-4.681 11.118-14.629 29.256-14.629h146.282c18.139 0 29.256 9.947 29.256 14.629v73.14h-204.793zM102.412 263.322h819.175c8.079 0 14.629 6.55 14.629 14.629v0 190.166h-848.432v-190.166c0-8.079 6.55-14.629 14.629-14.629v0zM321.834 555.884h380.331v87.769h-380.331zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-307.191h146.282v131.653c0.325 24.105 19.78 43.559 43.853 43.884h468.131c24.105-0.325 43.559-19.78 43.884-43.853v-131.685h146.282v307.191c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["briefcase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":153,"id":54,"name":"briefcase","prevSize":80,"code":59773},"setIdx":0,"setId":1,"iconIdx":135},{"icon":{"paths":["M983.875 747.107c-4.979 0-116.724-19.915-116.724-345.747 0-230.128-133.873-373.406-355.151-373.406s-355.151 143.278-355.151 373.406c0 331.917-115.617 345.747-115.065 345.747-22.914 0-41.49 18.576-41.49 41.49s18.576 41.49 41.49 41.49v0h267.193c19.311 95.868 102.854 167.053 203.023 167.053s183.711-71.186 202.798-165.727l0.223-1.325h267.746c22.914 0 41.49-18.576 41.49-41.49s-18.576-41.49-41.49-41.49v0zM512 913.065c-53.673-0.105-99.33-34.318-116.453-82.114l-0.271-0.865h233.448c-17.395 48.661-63.050 82.874-116.711 82.979h-0.013zM166.807 747.107c39.83-60.299 73.022-165.958 73.022-345.747s99.575-290.427 272.172-290.427 272.172 105.66 272.172 290.427 33.192 285.448 73.022 345.747z"],"attrs":[{}],"tags":["bell"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":218,"id":55,"name":"bell","prevSize":80,"code":59772},"setIdx":0,"setId":1,"iconIdx":136},{"icon":{"paths":["M333.040 1023.149c-0.395 0.001-0.861 0.003-1.328 0.003-89.93 0-171.755-34.697-232.82-91.434l0.214 0.196c-60.481-56.047-98.213-135.906-98.213-224.578s37.732-168.531 98.016-224.397l0.197-0.181 442.138-417.574c43.713-40.007 102.187-64.52 166.387-64.52s122.673 24.512 166.573 64.688l-0.186-0.169c46.303 43.075 75.506 103.992 76.611 171.742l0.003 0.2c0.003 0.343 0.003 0.748 0.003 1.154 0 58.355-24.702 110.942-64.219 147.873l-0.117 0.107-442.723 418.16c-25.698 23.896-60.263 38.561-98.253 38.561s-72.555-14.665-98.342-38.643l0.089 0.082c-25.889-23.908-42.047-58.024-42.047-95.913s16.158-72.005 41.958-95.834l0.088-0.081 409.387-385.408c7.935-7.925 18.894-12.829 30.996-12.829s23.061 4.902 30.997 12.829v0c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-409.387 385.408c-8.981 7.868-14.621 19.359-14.621 32.167s5.64 24.299 14.572 32.124l0.049 0.042c10.156 8.727 23.465 14.040 38.014 14.040s27.858-5.313 38.092-14.105l-0.078 0.066 442.723-416.989c21.667-21.246 35.097-50.823 35.097-83.538 0-0.444-0.003-0.888-0.007-1.331v0.067c-1.049-42.681-19.73-80.802-49.009-107.504l-0.118-0.107c-27.771-25.797-65.112-41.627-106.148-41.627s-78.377 15.83-106.245 41.716l0.097-0.090-440.383 416.989c-43.561 40.015-70.766 97.247-70.766 160.83s27.203 120.815 70.608 160.688l0.158 0.143c45.833 42.805 107.572 69.087 175.451 69.087s129.619-26.282 175.601-69.225l-0.149 0.137 438.043-414.651c7.869-8.069 18.849-13.075 30.996-13.075s23.127 5.006 30.988 13.066l0.008 0.010c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-441.552 416.405c-60.773 56.558-142.541 91.272-232.414 91.272-1.768 0-3.534-0.014-5.296-0.040l0.267 0.003z"],"attrs":[{}],"tags":["paperclip"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":151,"id":56,"name":"paperclip","prevSize":80,"code":59771},"setIdx":0,"setId":1,"iconIdx":137},{"icon":{"paths":["M833.7 643.604c-62.907 0.233-118.56 31.082-152.865 78.411l-0.38 0.551-309.417-152.076c5.76-17.446 9.17-37.537 9.358-58.398v-0.093c-0.189-20.954-3.597-41.044-9.755-59.892l0.396 1.402 309.417-152.076c34.79 46.82 89.928 76.825 152.074 76.825 104.34 0 188.925-84.585 188.925-188.925s-84.585-188.925-188.925-188.925c-104.34 0-188.925 84.585-188.925 188.925 0 0.34 0.001 0.68 0.003 1.020v-0.052c0.152 10.439 1.209 20.53 3.098 30.325l-0.173-1.080-319.945 160.849c-34.095-36.053-82.261-58.491-135.669-58.491-0.217 0-0.432 0-0.647 0.001h0.033c-104.986 0-190.096 85.108-190.096 190.096s85.108 190.096 190.096 190.096v0c0.182 0 0.399 0.001 0.614 0.001 53.408 0 101.575-22.439 135.587-58.404l0.082-0.088 319.945 160.849c-1.751 8.911-2.81 19.209-2.924 29.734l-0.001 0.096c0 104.986 85.108 190.096 190.096 190.096s190.096-85.108 190.096-190.096c0-104.986-85.108-190.096-190.096-190.096v0zM833.7 87.942c56.531 0 102.359 45.827 102.359 102.359s-45.827 102.359-102.359 102.359c-56.531 0-102.359-45.827-102.359-102.359v0c0.33-56.398 45.96-102.029 102.328-102.359h0.032zM190.3 614.359c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032zM833.7 936.058c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032z"],"attrs":[{}],"tags":["share-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":150,"id":57,"name":"share-alt","prevSize":80,"code":59770},"setIdx":0,"setId":1,"iconIdx":138},{"icon":{"paths":["M921.588 58.527h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v702.182c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-702.182c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM102.412 146.296h819.175c8.079 0 14.629 6.55 14.629 14.629v0 90.11l-424.215 211.815-424.215-211.815v-90.11c0-8.079 6.55-14.629 14.629-14.629v0zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-514.325l404.322 202.454c5.795 2.962 12.643 4.698 19.895 4.698s14.098-1.736 20.147-4.815l-0.252 0.117 404.322-202.454v514.325c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["envelope"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":217,"id":58,"name":"envelope","prevSize":80,"code":59769},"setIdx":0,"setId":1,"iconIdx":139},{"icon":{"paths":["M710.11 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.124 19.673-11.546 36.649-28.101 44.774l-0.296 0.132c-5.939 2.921-12.928 4.629-20.316 4.629-0.288 0-0.574-0.003-0.859-0.008h0.043zM99.27 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z","M915.484 735.204c-11.19-0.147-21.49-3.841-29.859-10.006l0.142 0.101c-12.083-9.132-19.811-23.475-19.811-39.622 0-11.206 3.721-21.543 9.995-29.84l-0.090 0.124c30.292-39.484 48.545-89.591 48.545-143.96s-18.251-104.477-48.961-144.528l0.418 0.566c-6.185-8.174-9.906-18.511-9.906-29.717 0-27.353 22.174-49.528 49.528-49.528 16.148 0 30.49 7.728 39.532 19.687l0.090 0.124c42.965 55.728 68.862 126.535 68.862 203.393s-25.897 147.666-69.442 204.176l0.58-0.783c-9.257 11.932-23.523 19.596-39.586 19.811h-0.036z"],"attrs":[{},{}],"tags":["volume-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":148,"id":59,"name":"volume-down","prevSize":80,"code":59766},"setIdx":0,"setId":1,"iconIdx":140},{"icon":{"paths":["M565.883 929.593c-9.559-0.164-18.337-3.376-25.438-8.703l0.112 0.081-258.099-206.91h-255.405c-22.198-0.299-40.113-18.215-40.412-40.383v-323.327c0.299-22.198 18.215-40.113 40.383-40.412h255.434l258.099-206.91c6.865-5.557 15.703-8.921 25.326-8.921 22.319 0 40.412 18.093 40.412 40.412 0 0.105 0 0.21-0.001 0.316v-0.016 754.361c-0.101 16.052-9.421 29.904-22.929 36.534l-0.241 0.107c-4.846 2.383-10.549 3.777-16.577 3.777-0.235 0-0.469-0.003-0.701-0.006h0.035zM67.466 633.237h229.002c9.573 0.042 18.381 3.277 25.424 8.695l-0.099-0.073 203.677 161.649v-584.629l-203.677 161.649c-6.785 5.918-15.568 9.703-25.217 10.233l-0.107 0.005h-229.002z","M860.084 839.070c-10.094-0.015-19.331-3.681-26.461-9.747l0.058 0.048c-8.624-7.36-14.057-18.239-14.057-30.387 0-10.3 3.905-19.687 10.315-26.762l-0.030 0.034c61.742-68.722 99.501-160.079 99.501-260.255s-37.758-191.532-99.818-260.614l0.318 0.36c-6.378-7.12-10.277-16.575-10.277-26.941 0-22.34 18.111-40.451 40.451-40.451 11.975 0 22.734 5.203 30.141 13.472l0.034 0.038c74.659 82.7 120.339 192.814 120.339 313.599s-45.68 230.898-120.705 314.010l0.366-0.412c-7.167 8.586-17.874 14.010-29.847 14.010-0.115 0-0.23 0-0.345-0.001h0.018z","M733.459 694.124c-9.131-0.12-17.535-3.134-24.364-8.165l0.116 0.082c-9.859-7.451-16.165-19.154-16.165-32.33 0-9.143 3.036-17.578 8.156-24.348l-0.073 0.101c24.717-32.217 39.61-73.102 39.61-117.464s-14.892-85.248-39.95-117.928l0.341 0.462c-5.046-6.669-8.082-15.104-8.082-24.247 0-22.319 18.093-40.412 40.412-40.412 13.176 0 24.879 6.306 32.257 16.064l0.073 0.101c35.058 45.471 56.188 103.247 56.188 165.959s-21.131 120.489-56.662 166.598l0.474-0.639c-7.553 9.736-19.193 15.989-32.301 16.165h-0.029z"],"attrs":[{},{},{}],"tags":["volume-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":147,"id":60,"name":"volume-up","prevSize":80,"code":59767},"setIdx":0,"setId":1,"iconIdx":141},{"icon":{"paths":["M842.183 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.153 19.495-11.255 36.364-27.452 44.771l-0.283 0.133c-6.264 2.921-13.598 4.625-21.331 4.625-0.163 0-0.323 0-0.486-0.002h0.025zM231.344 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z"],"attrs":[{}],"tags":["volume-off"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":146,"id":61,"name":"volume-off","prevSize":80,"code":59768},"setIdx":0,"setId":1,"iconIdx":142},{"icon":{"paths":["M974.421 561.545h-924.841c-27.344-0.025-49.502-22.198-49.502-49.545 0-13.671 5.537-26.048 14.49-35.013v0l462.421-462.421c8.963-8.952 21.342-14.49 35.011-14.49s26.048 5.537 35.013 14.49v0l462.421 462.421c8.952 8.963 14.49 21.342 14.49 35.011 0 27.347-22.157 49.52-49.499 49.545h-0.003zM169.148 462.455h685.704l-342.852-342.852z","M908.36 1023.966h-792.721c-63.696-0.373-115.233-51.908-115.606-115.57v-132.155c0.373-63.696 51.908-115.233 115.57-115.606h792.757c63.696 0.373 115.233 51.908 115.606 115.57v132.155c-0.373 63.696-51.908 115.233-115.57 115.606h-0.036zM115.64 759.725c-9.121 0-16.516 7.395-16.516 16.516v0 132.12c0 9.121 7.395 16.516 16.516 16.516v0h792.721c9.121 0 16.516-7.395 16.516-16.516v0-132.12c0-9.121-7.395-16.516-16.516-16.516v0z"],"attrs":[{},{}],"tags":["eject"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":145,"id":62,"name":"eject","prevSize":80,"code":59765},"setIdx":0,"setId":1,"iconIdx":143},{"icon":{"paths":["M921.588 117.040h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM936.215 219.438v97.715h-12.288c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-7.607c-7.377-1.502-13.839-3.52-20.003-6.11l0.694 0.259h-7.022c-8.645-4.243-16.008-9.735-22.196-16.341l-0.038-0.041c-16.923-16.712-27.426-39.89-27.5-65.521v-0.014c0.016-8.559 1.299-16.812 3.668-24.592l-0.158 0.601h98.887c0.004 0 0.008 0 0.012 0 7.873 0 14.294 6.219 14.615 14.014l0.001 0.029zM102.412 204.809h98.887c2.212 7.178 3.494 15.431 3.511 23.981v0.010c-0.074 25.645-10.578 48.823-27.491 65.525l-0.010 0.010c-6.348 6.456-13.68 11.92-21.756 16.155l-0.479 0.229h-7.607c-5.25 2.652-11.34 4.689-17.749 5.795l-0.389 0.056h-8.191c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-12.288v-97.131c0-8.079 6.55-14.629 14.629-14.629v0zM87.785 804.562v-97.715h12.288c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h7.607c7.229 1.166 13.718 3.206 19.76 6.041l-0.451-0.191h7.022c8.556 4.464 15.886 9.927 22.223 16.372l0.012 0.012c16.923 16.712 27.426 39.89 27.5 65.521v0.014c-0.016 8.559-1.299 16.812-3.668 24.592l0.158-0.601h-98.887c-0.004 0-0.008 0-0.012 0-7.873 0-14.294-6.219-14.615-14.014l-0.001-0.029zM290.823 819.191c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549c0.004-0.481 0.007-1.050 0.007-1.62 0-49.382-20.391-94-53.213-125.896l-0.041-0.040c-8.427-8.529-17.825-16.067-28.024-22.443l-0.647-0.377-9.947-6.436c-5.625-3.003-12.567-6.153-19.707-8.903l-1.358-0.459-11.702-4.681c-8.77-2.704-19.269-4.96-30.044-6.336l-0.968-0.101c-2.719-0.288-5.875-0.451-9.069-0.451s-6.35 0.165-9.458 0.484l0.389-0.033h-29.256v-210.060h49.736c9.036-1.557 16.909-3.588 24.522-6.182l-1.116 0.331 12.873-4.096c9.915-3.42 18.418-7.374 26.429-12.074l-0.683 0.37 9.362-5.266c11.406-7.555 21.355-15.646 30.453-24.6l-0.026 0.025c32.863-31.937 53.254-76.555 53.254-125.937 0-0.569-0.003-1.138-0.008-1.707v0.086c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549h442.355c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549c-0.004 0.481-0.007 1.050-0.007 1.62 0 49.382 20.391 94 53.213 125.896l0.041 0.040c8.973 9.14 18.943 17.251 29.747 24.168l0.679 0.407 9.362 5.266c7.327 4.329 15.83 8.282 24.727 11.392l1.018 0.31 12.873 4.096c6.721 2.133 14.826 3.972 23.141 5.166l0.85 0.1h49.151v208.304h-29.256c-2.719-0.277-5.876-0.435-9.069-0.435s-6.351 0.158-9.463 0.466l0.394-0.032c-11.742 1.477-22.241 3.733-32.391 6.794l1.38-0.358-11.702 4.681c-9.096 3.533-16.61 7.072-23.848 11.051l1.029-0.518-9.947 6.436c-10.846 6.753-20.244 14.291-28.657 22.805l-0.015 0.015c-32.863 31.937-53.254 76.555-53.254 125.937 0 0.569 0.003 1.138 0.008 1.707v-0.086c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549zM921.588 819.191h-98.887c-2.212-7.178-3.494-15.431-3.511-23.981v-0.010c0.074-25.645 10.578-48.823 27.491-65.525l0.010-0.010c6.226-6.647 13.589-12.14 21.793-16.186l0.443-0.197h7.022c5.388-2.223 11.845-4.236 18.507-5.704l0.802-0.148h7.607c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h12.288v97.131c0 8.079-6.55 14.629-14.629 14.629v0z","M512 307.207c-113.105 0-204.793 91.69-204.793 204.793s91.69 204.793 204.793 204.793c113.105 0 204.793-91.69 204.793-204.793v0c0-113.105-91.69-204.793-204.793-204.793v0zM512 629.025c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0z"],"attrs":[{},{}],"tags":["money-bill"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":144,"id":63,"name":"money-bill","prevSize":80,"code":59764},"setIdx":0,"setId":1,"iconIdx":144},{"icon":{"paths":["M871.768 55.371h-553.491c-84.063 0-152.209 68.147-152.209 152.209v0 13.838h-13.838c-84.063 0-152.209 68.147-152.209 152.209v0 442.792c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-13.838h13.838c84.063 0 152.209-68.147 152.209-152.209v0-442.792c0-84.063-68.147-152.209-152.209-152.209v0zM249.092 207.58c0-38.21 30.976-69.186 69.186-69.186v0h553.491c38.21 0 69.186 30.976 69.186 69.186v0 343.163l-125.642-105.716c-7.15-6.241-16.567-10.047-26.872-10.047-12.495 0-23.684 5.595-31.196 14.418l-0.048 0.058-59.223 69.74-221.396-214.755c-6.965-8.265-17.229-13.559-28.735-13.836l-0.047-0.001c-11.963 0.464-22.566 5.925-29.844 14.338l-0.044 0.052-168.814 200.917zM318.279 719.559c-38.21 0-69.186-30.976-69.186-69.186v0-16.605l203.131-239.108 191.508 187.633-116.233 137.265zM774.908 816.42c0 38.21-30.976 69.186-69.186 69.186v0h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-442.792c0-38.21 30.976-69.186 69.186-69.186v0h13.838v345.932c0 84.063 68.147 152.209 152.209 152.209v0h456.629zM871.768 719.559h-235.233l157.191-184.866 145.567 123.429c-3.487 34.553-32.362 61.315-67.514 61.437h-0.013z"],"attrs":[{}],"tags":["images"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":143,"id":64,"name":"images","prevSize":80,"code":59763},"setIdx":0,"setId":1,"iconIdx":145},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM160.914 146.285h702.171c40.395 0 73.142 32.747 73.142 73.142v0 479.232l-159.158-159.158c-7.493-7.993-18.119-12.974-29.908-12.974-1.007 0-2.005 0.036-2.992 0.108l0.133-0.008c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-75.483 90.697-269.166-269.166c-7.488-7.945-18.081-12.89-29.83-12.89-0.416 0-0.831 0.007-1.244 0.018l0.060-0.001c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-216.503 258.048v-405.504c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-42.716l251.612-301.934 241.079 241.079-147.456 175.543h-272.091c-0.003 0-0.005 0-0.010 0-39.984 0-72.475-32.083-73.133-71.911l-0.001-0.062zM863.086 877.715h-315.977l201.874-242.249 184.32 184.32c-6.765 33.136-35.591 57.744-70.197 57.929h-0.021z"],"attrs":[{}],"tags":["image"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":142,"id":65,"name":"image","prevSize":80,"code":59762},"setIdx":0,"setId":1,"iconIdx":146},{"icon":{"paths":["M863.075 1023.984h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.762 0.162 3.81 0.255 5.881 0.255 34.275 0 62.615-25.405 67.22-58.41l0.041-0.357v-729.651c-4.645-33.363-32.986-58.768-67.261-58.768-2.069 0-4.118 0.093-6.141 0.274l0.261-0.019h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.958-0.089 4.255-0.14 6.565-0.14 83.099 0 150.872 65.615 154.335 147.863l0.011 0.313v726.14c-3.472 82.56-71.246 148.176-154.344 148.176-2.309 0-4.606-0.051-6.89-0.151l0.325 0.011z","M453.487 789.935c-0.060 0-0.133 0-0.204 0-12.052 0-22.953-4.923-30.803-12.869l-0.004-0.004c-7.929-7.939-12.835-18.903-12.835-31.011s4.904-23.072 12.835-31.013v0l203.038-203.038-203.038-203.038c-7.297-7.816-11.777-18.344-11.777-29.917 0-24.237 19.648-43.884 43.884-43.884 11.575 0 22.101 4.48 29.943 11.802l-0.026-0.023 234.051 234.051c7.929 7.939 12.835 18.903 12.835 31.011s-4.904 23.072-12.835 31.013v0l-234.051 234.051c-7.854 7.95-18.755 12.873-30.807 12.873-0.071 0-0.144 0-0.215 0h0.011z","M687.538 555.884h-643.638c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h643.638c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["sign-in"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":141,"id":66,"name":"sign-in","prevSize":80,"code":59760},"setIdx":0,"setId":1,"iconIdx":147},{"icon":{"paths":["M336.515 1023.832h-175.485c-1.958 0.089-4.254 0.14-6.563 0.14-83.075 0-150.827-65.596-154.289-147.819l-0.011-0.313v-727.679c3.471-82.536 71.225-148.132 154.298-148.132 2.309 0 4.605 0.051 6.888 0.151l-0.325-0.011h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0h-175.485c-1.762-0.162-3.809-0.255-5.879-0.255-34.265 0-62.596 25.397-67.2 58.393l-0.041 0.356v729.434c4.644 33.353 32.976 58.751 67.241 58.751 2.069 0 4.117-0.093 6.139-0.274l-0.26 0.019h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z","M745.981 789.852c-0.060 0-0.133 0-0.204 0-12.048 0-22.946-4.922-30.794-12.865l-0.004-0.004c-7.927-7.937-12.831-18.898-12.831-31.002s4.903-23.065 12.831-31.003v0l202.978-202.978-202.978-202.978c-8.602-8.031-13.963-19.438-13.963-32.097 0-24.229 19.642-43.871 43.871-43.871 12.66 0 24.066 5.362 32.073 13.937l0.023 0.026 233.981 233.981c7.927 7.937 12.831 18.898 12.831 31.002s-4.903 23.065-12.831 31.003v0l-233.981 233.981c-7.852 7.948-18.75 12.869-30.798 12.869-0.071 0-0.144 0-0.215 0h0.011z","M979.961 555.871h-643.446c-24.229 0-43.871-19.642-43.871-43.871s19.642-43.871 43.871-43.871v0h643.446c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z"],"attrs":[{},{},{}],"tags":["sign-out"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":140,"id":67,"name":"sign-out","prevSize":80,"code":59761},"setIdx":0,"setId":1,"iconIdx":148},{"icon":{"paths":["M823.892 558.055c-0.046 0-0.1 0-0.154 0-10.973 0-20.961-4.21-28.44-11.103l0.029 0.026c-74.352-66.801-173.194-107.653-281.576-107.653s-207.224 40.851-281.966 107.996l0.389-0.344c-7.699 6.911-17.932 11.137-29.152 11.137-12.958 0-24.6-5.638-32.606-14.593l-0.037-0.042c-6.617-7.695-10.645-17.782-10.645-28.809 0-13.081 5.67-24.84 14.685-32.949l0.041-0.036c89.475-80.776 208.611-130.198 339.291-130.198s249.814 49.422 339.736 130.594l-0.445-0.396c9.056 8.146 14.726 19.904 14.726 32.986 0 11.028-4.029 21.114-10.694 28.868l0.049-0.059c-8.339 8.889-20.122 14.46-33.209 14.575h-0.020z","M978.379 395.406c-11.486-0.060-21.927-4.48-29.763-11.688l0.031 0.029c-113.494-108.335-267.577-175.003-437.231-175.003s-323.736 66.669-437.478 175.238l0.247-0.234c-8.074 9.555-20.065 15.58-33.462 15.58-24.147 0-43.723-19.576-43.723-43.723 0-14.862 7.414-27.991 18.746-35.891l0.142-0.094c128.857-122.252 303.412-197.437 495.528-197.437s366.671 75.186 495.847 197.738l-0.318-0.301c8.63 8.010 14.013 19.416 14.013 32.079 0 23.746-18.928 43.070-42.521 43.707l-0.059 0.001z","M359.26 724.203c-14.255 0-26.917-6.822-34.899-17.38l-0.079-0.109c-5.603-7.207-8.984-16.384-8.984-26.351 0-14.271 6.93-26.924 17.608-34.778l0.12-0.083c49.111-37.883 111.521-60.719 179.265-60.719s130.154 22.836 179.953 61.23l-0.689-0.51c10.667 8.061 17.489 20.723 17.489 34.978 0 9.892-3.285 19.018-8.824 26.343l0.079-0.109c-8.18 10.541-20.853 17.261-35.095 17.261-9.821 0-18.895-3.195-26.241-8.603l0.123 0.086c-34.771-26.697-78.905-42.783-126.797-42.783s-92.026 16.086-127.294 43.149l0.497-0.366c-7.262 5.353-16.355 8.615-26.202 8.745h-0.031z","M512 905.508c-24.147 0-43.723-19.576-43.723-43.723s19.576-43.723 43.723-43.723v0 0c24.147 0 43.723 19.576 43.723 43.723s-19.576 43.723-43.723 43.723v0z"],"attrs":[{},{},{},{}],"tags":["wifi"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":139,"id":68,"name":"wifi","prevSize":80,"code":59759},"setIdx":0,"setId":1,"iconIdx":149},{"icon":{"paths":["M590.766 393.851h-157.532c-50.632-0.297-91.598-41.261-91.894-91.866v-157.56c0.297-50.632 41.261-91.598 91.866-91.894h157.56c50.632 0.297 91.598 41.261 91.894 91.866v157.56c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM433.234 131.298c-7.25 0-13.128 5.878-13.128 13.128v0 157.532c0 7.25 5.878 13.128 13.128 13.128v0h157.532c7.25 0 13.128-5.878 13.128-13.128v0-157.532c0-7.25-5.878-13.128-13.128-13.128v0z","M196.936 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM91.915 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M564.511 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM459.489 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M932.085 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM827.064 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M879.575 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-105.049c0-7.25-5.878-13.128-13.128-13.128v0h-630.129c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 21.751-17.633 39.383-39.383 39.383s-39.383-17.633-39.383-39.383v0-105.021c0.297-50.632 41.261-91.598 91.866-91.894h630.157c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z","M512 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-315.093c0-21.751 17.633-39.383 39.383-39.383s39.383 17.633 39.383 39.383v0 315.064c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z"],"attrs":[{},{},{},{},{},{}],"tags":["sitemap"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":138,"id":69,"name":"sitemap","prevSize":80,"code":59758},"setIdx":0,"setId":1,"iconIdx":150},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M263.757 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M480.97 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M698.182 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M915.393 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{},{},{}],"tags":["chart-bar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":137,"id":70,"name":"chart-bar","prevSize":80,"code":59757},"setIdx":0,"setId":1,"iconIdx":151},{"icon":{"paths":["M863.086 936.228h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-351.086c0-88.87 72.044-160.914 160.914-160.914v0h35.109l69.047-102.4c29.412-43.303 78.425-71.379 133.997-71.387h225.866c55.573 0.008 104.587 28.085 133.636 70.825l0.361 0.562 69.047 102.4h35.109c88.87 0 160.914 72.044 160.914 160.914v0 351.086c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 351.086c-40.395 0-73.142 32.747-73.142 73.142v0 351.086c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-351.086c0-40.395-32.747-73.142-73.142-73.142v0h-58.515c-15.035-0.029-28.294-7.614-36.181-19.159l-0.097-0.151-80.75-123.466c-12.764-19.278-34.075-32.011-58.402-32.765l-0.111-0.003h-229.961c-24.44 0.758-45.751 13.489-58.346 32.499l-0.167 0.269-84.846 123.466c-7.986 11.696-21.243 19.281-36.274 19.31h-0.004z","M512 760.685c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 468.114c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["camera"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":136,"id":71,"name":"camera","prevSize":80,"code":59756},"setIdx":0,"setId":1,"iconIdx":152},{"icon":{"paths":["M512 1023.977c-24.105-0.325-43.559-19.779-43.884-43.852v-936.219c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 936.187c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M599.768 906.954h-380.325c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h380.325c3.954 0.373 8.548 0.587 13.193 0.587 76.308 0 139.186-57.511 147.651-131.554l0.063-0.684c-8.529-74.727-71.406-132.238-147.714-132.238-4.645 0-9.24 0.213-13.775 0.629l0.583-0.044h-175.535c-4.502 0.309-9.759 0.484-15.056 0.484-124.284 0-225.944-96.875-233.585-219.234l-0.033-0.671c7.676-123.029 109.334-219.903 233.619-219.903 5.298 0 10.553 0.176 15.762 0.522l-0.706-0.037h321.815c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0h-321.815c-3.954-0.373-8.548-0.587-13.193-0.587-76.308 0-139.186 57.511-147.651 131.554l-0.063 0.684c8.529 74.727 71.406 132.238 147.714 132.238 4.645 0 9.24-0.213 13.775-0.629l-0.583 0.044h175.535c4.502-0.309 9.759-0.484 15.056-0.484 124.284 0 225.944 96.875 233.585 219.234l0.033 0.671c-7.676 123.029-109.334 219.903-233.619 219.903-5.298 0-10.553-0.176-15.762-0.522l0.706 0.037z"],"attrs":[{},{}],"tags":["dollar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":135,"id":72,"name":"dollar","prevSize":80,"code":59755},"setIdx":0,"setId":1,"iconIdx":153},{"icon":{"paths":["M746.049 0.019c-153.498 0-277.933 124.435-277.933 277.933v0 131.652h-307.189c-88.867 0-160.908 72.041-160.908 160.908v0 292.56c0 88.867 72.041 160.908 160.908 160.908v0h409.585c88.867 0 160.908-72.041 160.908-160.908v0-292.56c0-88.867-72.041-160.908-160.908-160.908v0h-14.628v-131.652c0-105.024 85.139-190.165 190.165-190.165s190.165 85.139 190.165 190.165v0c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0c0-153.498-124.435-277.933-277.933-277.933v0zM643.652 570.513v292.56c0 40.394-32.746 73.14-73.14 73.14v0h-409.585c-40.394 0-73.14-32.746-73.14-73.14v0-292.56c0-40.394 32.746-73.14 73.14-73.14v0h409.585c40.394 0 73.14 32.746 73.14 73.14v0z"],"attrs":[{}],"tags":["lock-open"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":134,"id":73,"name":"lock-open","prevSize":80,"code":59754},"setIdx":0,"setId":1,"iconIdx":154},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM936.228 219.429v248.685h-380.342v-321.829h307.2c40.395 0 73.142 32.747 73.142 73.142v0zM160.914 146.285h307.2v321.829h-380.342v-248.685c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-248.685h380.342v321.829h-307.2c-40.395 0-73.142-32.747-73.142-73.142v0zM863.086 877.715h-307.2v-321.829h380.342v248.685c0 40.395-32.747 73.142-73.142 73.142v0z"],"attrs":[{}],"tags":["table"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":133,"id":74,"name":"table","prevSize":80,"code":59753},"setIdx":0,"setId":1,"iconIdx":155},{"icon":{"paths":["M512 1022.599c-0.113 0.001-0.245 0.001-0.378 0.001-8.356 0-16.084-2.691-22.364-7.254l0.11 0.076c-16.56-10.488-405.166-271.583-405.166-588.982 0-236.266 191.533-427.799 427.799-427.799s427.799 191.533 427.799 427.799v0c0 317.399-386.399 578.495-405.166 588.982-6.17 4.487-13.897 7.178-22.254 7.178-0.133 0-0.265-0.001-0.397-0.003h0.021zM512 84.201c-0.329-0.001-0.718-0.001-1.107-0.001-189.346 0-342.951 153.026-343.891 342.151v0.089c0 232.392 264.407 444.91 344.999 503.975 80.591-59.063 344.999-271.583 344.999-503.975-0.939-189.216-154.544-342.241-343.891-342.241-0.389 0-0.779 0.001-1.168 0.003h0.061z","M512 553.4c-83.836 0-151.799-67.963-151.799-151.799s67.963-151.799 151.799-151.799c83.836 0 151.799 67.963 151.799 151.799v0c0 83.836-67.963 151.799-151.799 151.799v0zM512 332.6c-38.107 0-68.999 30.892-68.999 68.999s30.892 68.999 68.999 68.999c38.107 0 68.999-30.892 68.999-68.999v0c0-38.107-30.892-68.999-68.999-68.999v0z"],"attrs":[{},{}],"tags":["map-marker"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":132,"id":75,"name":"map-marker","prevSize":80,"code":59752},"setIdx":0,"setId":1,"iconIdx":156},{"icon":{"paths":["M967.082 560.759h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 268.207h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 853.311h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M56.918 284.46c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c5.935-5.857 13.086-10.5 21.038-13.514l0.416-0.139c7.303-3.084 15.795-4.877 24.704-4.877s17.401 1.792 25.134 5.036l-0.428-0.16c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c11.461 12.002 18.595 28.224 18.853 46.107v0.050c0 0.111 0.002 0.244 0.002 0.376 0 17.859-7.201 34.037-18.859 45.786l0.005-0.005c-6.208 5.511-13.262 10.282-20.899 14.055l-0.555 0.248c-7.082 2.883-15.3 4.556-23.909 4.556-0.28 0-0.559-0.002-0.84-0.005h0.043z","M56.918 577.012c-8.949-0.111-17.424-2.014-25.124-5.363l0.419 0.163c-8.262-3.501-15.357-8.097-21.513-13.706l0.059 0.053c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c6.096-5.555 13.192-10.151 20.966-13.467l0.488-0.186c8.019-3.808 17.424-6.032 27.348-6.032 3.658 0 7.245 0.302 10.739 0.882l-0.379-0.052 11.702 3.901 11.702 5.851c3.642 2.58 6.822 5.141 9.837 7.878l-0.085-0.076c11.672 12.226 18.854 28.826 18.854 47.102 0 0.125 0 0.251-0.002 0.376v-0.020c0 35.905-29.107 65.012-65.012 65.012v0z","M56.918 869.564c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-5.555-6.096-10.151-13.192-13.467-20.966l-0.186-0.488c-3.296-7.27-5.216-15.763-5.216-24.704s1.92-17.436 5.371-25.089l-0.155 0.385c3.501-8.262 8.097-15.357 13.706-21.513l-0.053 0.059c11.733-11.582 27.863-18.736 45.663-18.736 9.098 0 17.76 1.87 25.624 5.245l-0.424-0.162c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c5.555 6.096 10.151 13.192 13.467 20.966l0.186 0.488c3.296 7.27 5.216 15.763 5.216 24.704s-1.92 17.436-5.371 25.089l0.155-0.385c-3.501 8.262-8.097 15.357-13.706 21.513l0.053-0.059c-11.746 11.653-27.923 18.854-45.783 18.854-0.133 0-0.264 0-0.396-0.002h0.020z"],"attrs":[{},{},{},{},{},{}],"tags":["list"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":131,"id":76,"name":"list","prevSize":80,"code":59751},"setIdx":0,"setId":1,"iconIdx":157},{"icon":{"paths":["M1020.3 494.452c-7.019-15.208-167.289-377.277-508.3-377.277-0.14 0-0.306 0-0.472 0-34.241 0-67.586 3.836-99.63 11.102l3.004-0.573c-18.045 5.713-30.896 22.309-30.896 41.908 0 24.228 19.641 43.869 43.869 43.869 2.026 0 4.020-0.137 5.972-0.403l-0.228 0.025c23.536-5.148 50.592-8.127 78.334-8.188h0.045c244.499 0 384.881 239.819 419.391 307.086-23.064 44.686-47.534 82.99-75.058 118.824l1.357-1.84c-5.75 7.348-9.221 16.722-9.221 26.907 0 24.18 19.562 43.79 43.724 43.869h0.007c13.993-0.045 26.437-6.635 34.437-16.866l0.073-0.096c34.924-43.997 66.128-93.737 91.55-146.775l2.039-4.721c2.455-5.422 3.887-11.757 3.887-18.425s-1.431-13.003-4.002-18.713l0.117 0.288z","M192.045 130.044c-7.813-7.295-18.337-11.773-29.907-11.773-24.228 0-43.869 19.641-43.869 43.869 0 11.571 4.479 22.094 11.798 29.933l-0.023-0.026 53.813 53.813c-74.699 68.875-135.393 151.659-178.181 244.402l-1.975 4.776c-2.203 5.093-3.485 11.025-3.485 17.256s1.282 12.161 3.596 17.545l-0.111-0.289c7.019 15.208 167.289 377.277 508.3 377.277 0.681 0.004 1.487 0.005 2.294 0.005 94.711 0 182.793-28.386 256.201-77.116l-1.714 1.069 63.172 63.172c7.936 7.927 18.897 12.83 31.001 12.83s23.064-4.902 31.002-12.83v0c7.927-7.936 12.83-18.897 12.83-31.001s-4.902-23.064-12.83-31.002v0zM416.073 480.999l129.268 129.853c-9.942 3.409-21.397 5.378-33.312 5.378-28.107 0-53.656-10.952-72.612-28.824l0.052 0.049c-18.724-18.468-30.323-44.118-30.323-72.478 0-13.277 2.543-25.962 7.167-37.592l-0.241 0.688zM512 819.086c-245.083 0-384.881-240.404-419.391-307.086 39.962-79.399 91.284-146.975 152.768-203.701l0.481-0.439 104.701 104.701c-17.797 28.341-28.353 62.795-28.353 99.714 0 104.667 84.849 189.516 189.516 189.516 36.919 0 71.373-10.557 100.508-28.817l-0.792 0.463 94.173 94.173c-54.756 32.362-120.666 51.482-191.042 51.482-0.903 0-1.805-0.003-2.708-0.010l0.138 0.001z"],"attrs":[{},{}],"tags":["eye-slash"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":130,"id":77,"name":"eye-slash","prevSize":80,"code":59749},"setIdx":0,"setId":1,"iconIdx":158},{"icon":{"paths":["M512 906.971c-341.139 0-501.467-362.204-508.489-377.417-2.22-5.185-3.511-11.22-3.511-17.554s1.291-12.369 3.623-17.853l-0.112 0.299c7.022-15.213 167.351-377.417 508.489-377.417s501.467 362.204 508.489 377.417c2.22 5.185 3.511 11.22 3.511 17.554s-1.291 12.369-3.623 17.853l0.112-0.299c-7.022 15.213-167.351 377.417-508.489 377.417zM92.453 512c34.523 67.292 175.543 307.2 419.547 307.2s385.024-239.908 419.547-307.2c-34.523-67.292-175.543-307.2-419.547-307.2s-385.024 239.908-419.547 307.2z","M512 702.172c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 409.6c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["eye"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":129,"id":78,"name":"eye","prevSize":80,"code":59750},"setIdx":0,"setId":1,"iconIdx":159},{"icon":{"paths":["M82.761 872.006h-83.078v-609.242c-0.010-0.662-0.017-1.442-0.017-2.225 0-82.317 66.265-149.157 148.363-150.085l0.088-0.001h133.48c0.27-0.006 0.588-0.010 0.906-0.010 12.364 0 23.485 5.331 31.186 13.821l0.031 0.035 147.88 178.895h271.943c0.175-0.001 0.383-0.001 0.591-0.001 82.895 0 150.096 67.2 150.096 150.096 0 1.168-0.013 2.335-0.040 3.497l0.003-0.173v27.692h-83.078v-27.692c0.013-0.495 0.021-1.077 0.021-1.662 0-37.318-30.252-67.57-67.57-67.57-0.008 0-0.014 0-0.022 0h-291.881c-12.686-0.029-24.015-5.815-31.514-14.885l-0.056-0.069-147.88-178.895h-114.094c-36.362 1.219-65.376 30.988-65.376 67.535 0 0.597 0.008 1.192 0.023 1.785l-0.001-0.088z","M795.574 913.546h-754.353c-14.913-0.126-27.961-7.987-35.343-19.762l-0.103-0.177c-3.401-5.891-5.407-12.958-5.407-20.493s2.007-14.601 5.513-20.694l-0.106 0.201 187.203-360.006c7.347-13.219 21.185-22.042 37.092-22.155h752.707c14.913 0.126 27.961 7.987 35.343 19.762l0.103 0.177c3.401 5.891 5.407 12.958 5.407 20.493s-2.007 14.601-5.513 20.694l0.106-0.201-187.203 360.006c-7.071 12.759-20.17 21.423-35.35 22.151l-0.097 0.004zM109.346 830.467h661.305l144.002-276.928h-661.305z"],"attrs":[{},{}],"tags":["folder-open"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":128,"id":79,"name":"folder-open","prevSize":80,"code":59748},"setIdx":0,"setId":1,"iconIdx":160},{"icon":{"paths":["M853.323 961.925h-682.645c-94.253 0-170.661-76.408-170.661-170.661v0-558.528c0-94.253 76.408-170.661 170.661-170.661v0h155.147c0.039 0 0.084 0 0.131 0 13.934 0 26.476 5.965 35.211 15.48l0.032 0.035 171.903 201.070h320.223c0 0 0 0 0.001 0 94.253 0 170.661 76.408 170.661 170.661 0 0.218 0 0.436-0.001 0.655v-0.033 341.323c0 94.253-76.408 170.661-170.661 170.661v0zM170.677 155.163c-42.842 0-77.573 34.731-77.573 77.573v0 558.528c0 42.842 34.731 77.573 77.573 77.573v0h682.645c42.842 0 77.573-34.731 77.573-77.573v0-341.323c0-42.842-34.731-77.573-77.573-77.573v0h-341.323c-14.071-0.131-26.67-6.321-35.33-16.085l-0.044-0.049-171.903-201.070z"],"attrs":[{}],"tags":["folder"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":126,"id":80,"name":"folder","prevSize":80,"code":59747},"setIdx":0,"setId":1,"iconIdx":161},{"icon":{"paths":["M570.515 906.971h-409.6c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h409.6c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 204.8c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h409.6c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M980.114 789.943c-8.437-0.136-16.291-2.51-23.030-6.553l0.21 0.117-292.571-175.543c-12.706-7.831-21.051-21.663-21.065-37.447v-117.029c0.014-15.785 8.359-29.619 20.876-37.34l0.189-0.108 292.571-175.543c6.348-3.861 14.026-6.145 22.235-6.145s15.887 2.285 22.428 6.254l-0.192-0.108c13.334 7.666 22.183 21.811 22.235 38.027v468.122c-0.053 16.223-8.901 30.368-22.022 37.921l-0.213 0.112c-5.841 3.327-12.834 5.288-20.285 5.288-0.48 0-0.959-0.008-1.435-0.025l0.069 0.001zM731.429 545.939l204.8 122.88v-313.636l-204.8 122.88z"],"attrs":[{},{}],"tags":["video"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":125,"id":81,"name":"video","prevSize":80,"code":59746},"setIdx":0,"setId":1,"iconIdx":162},{"icon":{"paths":["M862.966 979.954h-701.931c-88.84 0-160.859-72.019-160.859-160.859v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.014 0.522-0.021 1.138-0.021 1.755 0 40.382 32.736 73.117 73.117 73.117 0.007 0 0.015 0 0.022 0h701.93c40.382 0 73.117-32.736 73.117-73.117v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.991 88.083-72.627 159.104-160.849 159.104-0.004 0-0.007 0-0.011 0h0.001z","M512 702.107c-0.038 0-0.085 0-0.13 0-110.716 0-202.222-82.245-216.757-188.973l-0.126-1.134h-250.94c-0.097 0.001-0.211 0.001-0.326 0.001-24.229 0-43.871-19.642-43.871-43.871 0-8.677 2.52-16.767 6.867-23.575l-0.106 0.177 218.184-350.966c17.362-29.96 49.275-49.789 85.818-49.789 1.293 0 2.582 0.025 3.862 0.074l-0.185-0.005h395.422c40.382 0.115 75.22 23.729 91.572 57.882l0.265 0.613 215.844 347.456c2.498 5.344 3.955 11.604 3.955 18.204 0 23.357-18.253 42.45-41.273 43.795l-0.119 0.005h-250.94c-14.66 107.862-106.167 190.107-216.883 190.107-0.047 0-0.092 0-0.138 0h0.007zM123.014 426.013h213.504c24.229 0 43.871 19.642 43.871 43.871v0 12.869c0 72.687 58.925 131.612 131.612 131.612s131.612-58.925 131.612-131.612v0-12.869c0-24.229 19.642-43.871 43.871-43.871v0h213.504l-175.483-284.282c-4.679-8.189-9.36-11.698-15.208-11.698h-396.006c-5.783 0.148-10.777 3.381-13.412 8.109l-0.041 0.081z"],"attrs":[{},{}],"tags":["inbox"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":124,"id":82,"name":"inbox","prevSize":80,"code":59745},"setIdx":0,"setId":1,"iconIdx":163},{"icon":{"paths":["M804.555 409.605h-14.628v-131.65c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM321.839 277.955c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0 131.65h-380.321zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["lock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":123,"id":83,"name":"lock","prevSize":80,"code":59743},"setIdx":0,"setId":1,"iconIdx":164},{"icon":{"paths":["M804.555 409.605h-482.716v-131.65c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0c0 24.236 19.647 43.883 43.883 43.883s43.883-19.647 43.883-43.883v0c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["unlock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":122,"id":84,"name":"unlock","prevSize":80,"code":59744},"setIdx":0,"setId":1,"iconIdx":165},{"icon":{"paths":["M988.652 422.661l-315.315-315.315c-7.357-7.357-17.342-11.562-27.852-11.562h-606.456c-21.546 0-39.414 17.868-39.414 39.414v414.113c0 10.51 4.204 20.495 11.562 27.852l315.315 314.789c23.123 23.123 53.604 35.735 86.186 35.735v0c32.582 0 63.589-12.613 86.186-35.735l11.562-11.562c2.103 4.204 4.204 8.409 7.883 11.562 23.649 23.649 55.18 35.735 86.186 35.735s62.537-12.087 86.712-35.735l296.922-296.922c47.297-47.297 47.297-124.549 0-172.373zM443.681 836.249c-8.409 8.409-18.919 12.613-30.481 12.613s-22.598-4.73-30.481-12.613l-304.279-303.228v-358.409h358.409l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961l-296.922 296.922zM932.946 539.328l-296.922 296.922c-16.816 16.816-44.67 16.816-61.486 0-3.679-3.679-7.357-5.78-12.087-7.883l233.333-233.333c47.297-47.823 47.297-125.075 0-172.373l-248.048-248.048h80.931l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961zM314.928 328.067c0 36.261-29.429 65.69-65.69 65.69s-65.69-29.429-65.69-65.69 29.429-65.69 65.69-65.69 65.69 29.429 65.69 65.69z"],"attrs":[{}],"tags":["tags"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":121,"id":85,"name":"tags","prevSize":80,"code":59741},"setIdx":0,"setId":1,"iconIdx":166},{"icon":{"paths":["M532.53 1023.985c-37.212 0-74.423-14.115-102.654-42.345l-415.747-415.105c-8.982-8.982-14.115-21.172-14.115-34.004v-484.396c0-26.304 21.814-48.119 48.119-48.119h483.756c12.831 0 25.022 5.132 34.004 14.115l415.747 415.747c55.818 56.46 55.818 148.206 0 204.666 0 0 0 0 0 0l-347.098 347.098c-28.229 28.229-65.442 42.345-102.654 42.345zM96.253 512.642l401.632 400.991c19.248 18.605 50.044 18.605 68.649 0l347.098-347.098c18.605-18.605 18.605-49.402 0-68.649l-401.632-401.632h-415.747v415.747zM947.637 600.539v0zM287.446 367.643c-44.269 0-80.198-35.928-80.198-80.198s35.928-80.198 80.198-80.198 80.198 35.928 80.198 80.198-35.928 80.198-80.198 80.198z"],"attrs":[{}],"tags":["tag"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":120,"id":86,"name":"tag","prevSize":80,"code":59742},"setIdx":0,"setId":1,"iconIdx":167},{"icon":{"paths":["M512 1024.445c-282.822-0.256-511.994-229.587-511.994-512.445 0-141.396 57.267-269.417 149.871-362.133l-0.005 0.005c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c7.716 7.725 12.49 18.395 12.49 30.177s-4.772 22.451-12.49 30.178v0c-83.727 78.173-135.917 189.204-135.917 312.426 0 235.846 191.191 427.037 427.037 427.037 123.22 0 234.253-52.189 312.196-135.668l0.23-0.248c77.442-77.134 125.361-183.857 125.361-301.773s-47.919-224.639-125.347-301.759l-0.015-0.015c-7.716-7.725-12.49-18.395-12.49-30.177s4.772-22.451 12.49-30.178v0c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c92.6 92.711 149.866 220.732 149.866 362.128 0 282.858-229.172 512.187-511.97 512.445h-0.024z","M512 554.704c-23.456-0.316-42.387-19.247-42.704-42.673v-455.537c0-23.584 19.119-42.704 42.704-42.704s42.704 19.119 42.704 42.704v0 455.506c-0.316 23.456-19.247 42.387-42.673 42.704h-0.031z"],"attrs":[{},{}],"tags":["power-off"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":119,"id":87,"name":"power-off","prevSize":80,"code":59740},"setIdx":0,"setId":1,"iconIdx":168},{"icon":{"paths":["M804.571 1024h-585.143c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h438.857c12.114 0.011 23.078 4.929 31.012 12.872v0l263.314 265.070c7.945 7.935 12.863 18.898 12.874 31.011v554.133c0 88.87-72.044 160.914-160.914 160.914v0zM219.429 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h585.143c40.395 0 73.142-32.747 73.142-73.142v0-537.747l-237.568-237.568z","M789.943 980.114h-87.771v-365.715h-380.342v365.715h-87.771v-380.342c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0z","M539.501 321.828h-230.547c-41.436-0.331-74.901-33.998-74.901-75.481 0-0.207 0.001-0.413 0.003-0.619v0.032-201.874h87.771v190.172h204.8v-190.172h87.771v201.874c0.001 0.174 0.003 0.381 0.003 0.587 0 41.483-33.464 75.152-74.869 75.481h-0.032z"],"attrs":[{},{},{}],"tags":["save"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":118,"id":88,"name":"save","prevSize":80,"code":59739},"setIdx":0,"setId":1,"iconIdx":169},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM512 938.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0z","M381.156 267.377c-33.393 33.448-54.044 79.627-54.044 130.628 0 0.076 0 0.152 0 0.228v-0.012c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0c-0.001-0.156-0.001-0.341-0.001-0.525 0-27.345 11.088-52.101 29.015-70.016v0c18.327-17.443 43.181-28.173 70.543-28.173s52.216 10.731 70.585 28.213l-0.043-0.040c18.449 18.085 29.885 43.264 29.885 71.115 0 54.983-44.572 99.556-99.556 99.556-0.307 0-0.613-0.001-0.919-0.004h0.047c-23.436 0.316-42.351 19.231-42.667 42.636v56.92c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-19.343c34.751-8.129 64.687-25.311 88.169-48.916l0.008-0.008c33.387-33.532 54.025-79.777 54.025-130.844s-20.64-97.313-54.032-130.851l0.007 0.007c-34.036-32.508-80.253-52.515-131.144-52.515-50.6 0-96.58 19.779-130.632 52.028l0.087-0.081z","M583.111 753.777c0 39.273-31.837 71.111-71.111 71.111s-71.111-31.837-71.111-71.111c0-39.273 31.837-71.111 71.111-71.111s71.111 31.837 71.111 71.111z"],"attrs":[{},{},{}],"tags":["question-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":117,"id":89,"name":"question-circle","prevSize":80,"code":59737},"setIdx":0,"setId":1,"iconIdx":170},{"icon":{"paths":["M750.032 98.514c-60.88-61-145.050-98.738-238.034-98.738-185.726 0-336.287 150.56-336.287 336.287 0 0.17 0 0.34 0 0.511v-0.026c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0c0-0.174 0-0.378 0-0.584 0-137.598 111.546-249.145 249.145-249.145s249.145 111.546 249.145 249.145c0 137.598-111.546 249.145-249.145 249.145-0.206 0-0.411 0-0.617-0.001h0.032c-24.093 0.325-43.539 19.77-43.864 43.832v117c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0-76.031c165.808-22.845 292.141-163.614 292.141-333.889 0-92.678-37.425-176.615-97.988-237.522l0.016 0.016z","M585.105 950.635c0 40.375-32.73 73.105-73.105 73.105s-73.105-32.73-73.105-73.105c0-40.375 32.73-73.105 73.105-73.105s73.105 32.73 73.105 73.105z"],"attrs":[{},{}],"tags":["question"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":116,"id":90,"name":"question","prevSize":80,"code":59738},"setIdx":0,"setId":1,"iconIdx":171},{"icon":{"paths":["M907.406 301.957l-290.385-290.385c-7.121-7.13-16.959-11.543-27.829-11.553h-129.703c-79.752 0-144.404 64.652-144.404 144.404v0 65.638h-65.638c-79.752 0-144.404 64.652-144.404 144.404v0 525.108c0 79.752 64.652 144.404 144.404 144.404v0h367.575c79.752 0 144.404-64.652 144.404-144.404v0-65.638h13.128c79.752 0 144.404-64.652 144.404-144.404v0-341.319c-0.443-10.296-4.774-19.502-11.552-26.254l-0.001-0.001zM630.149 134.448l154.382 154.382h-154.382zM682.66 879.575c0 36.251-29.387 65.638-65.638 65.638v0h-367.575c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h65.638v380.702c0 79.752 64.652 144.404 144.404 144.404v0h223.17zM774.553 735.17h-315.064c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h91.894v249.426c0.292 21.632 17.751 39.091 39.355 39.383h249.455v301.936c0 36.251-29.387 65.638-65.638 65.638v0z"],"attrs":[{}],"tags":["copy"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":115,"id":91,"name":"copy","prevSize":80,"code":59735},"setIdx":0,"setId":1,"iconIdx":172},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":114,"id":92,"name":"file","prevSize":80,"code":59736},"setIdx":0,"setId":1,"iconIdx":173},{"icon":{"paths":["M629.028 789.943h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h468.114c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M863.086 1024h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-117.028h87.771v117.028c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0h-117.028v-87.771h117.028c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0z"],"attrs":[{},{}],"tags":["clone"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":111,"id":93,"name":"clone","prevSize":80,"code":59733},"setIdx":0,"setId":1,"iconIdx":174},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M619.381 626.023c-7.448-7.637-17.839-12.375-29.336-12.375s-21.888 4.738-29.328 12.366l-0.008 0.009-48.71 48.71-48.71-48.71c-7.393-6.903-17.353-11.141-28.301-11.141-22.927 0-41.514 18.586-41.514 41.514 0 10.949 4.238 20.907 11.165 28.325l-0.022-0.025 48.71 48.71-48.71 48.71c-7.637 7.448-12.375 17.839-12.375 29.336s4.738 21.888 12.366 29.328l0.009 0.008c7.171 7.515 17.264 12.187 28.45 12.187 0.311 0 0.623-0.004 0.933-0.010l-0.047 0.001c0.057 0 0.126 0 0.193 0 11.401 0 21.713-4.657 29.139-12.174l48.714-48.714 48.71 48.71c7.43 7.52 17.742 12.178 29.142 12.178 0.067 0 0.136 0 0.204 0h-0.010c0.263 0.006 0.575 0.010 0.886 0.010 11.185 0 21.278-4.673 28.435-12.173l0.014-0.016c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008-48.71-48.71 48.71-48.71c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008z"],"attrs":[{},{}],"tags":["calendar-times"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":110,"id":94,"name":"calendar-times","prevSize":80,"code":59730},"setIdx":0,"setId":1,"iconIdx":175},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 694.659h-221.406c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h221.406c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":109,"id":95,"name":"calendar-minus","prevSize":80,"code":59731},"setIdx":0,"setId":1,"iconIdx":176},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 691.892h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":108,"id":96,"name":"calendar-plus","prevSize":80,"code":59732},"setIdx":0,"setId":1,"iconIdx":177},{"icon":{"paths":["M614.393 512c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 102.431c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 921.569c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z"],"attrs":[{},{},{}],"tags":["ellipsis-v"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":107,"id":97,"name":"ellipsis-v","prevSize":80,"code":59728},"setIdx":0,"setId":1,"iconIdx":178},{"icon":{"paths":["M614.379 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M1023.886 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M204.868 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z"],"attrs":[{},{},{}],"tags":["ellipsis-h"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":106,"id":98,"name":"ellipsis-h","prevSize":80,"code":59729},"setIdx":0,"setId":1,"iconIdx":179},{"icon":{"paths":["M848.457 1024c-9.363-0.189-18.033-2.998-25.352-7.723l0.191 0.115-311.296-217.088-311.296 217.088c-6.501 4.018-14.382 6.4-22.821 6.4s-16.32-2.381-23.010-6.509l0.189 0.108c-13.4-7.013-22.574-20.486-23.401-36.171l-0.004-0.107v-819.2c0-88.87 72.044-160.914 160.914-160.914v0h438.857c88.87 0 160.914 72.044 160.914 160.914v0 819.2c0 0.048 0 0.104 0 0.159 0 16.646-9.393 31.099-23.169 38.347l-0.237 0.114c-5.911 3.304-12.965 5.254-20.477 5.266h-0.004zM512 702.172c0.137-0.001 0.3-0.003 0.464-0.003 9.223 0 17.782 2.846 24.846 7.706l-0.148-0.096 267.411 186.075v-734.939c0-40.395-32.747-73.142-73.142-73.142v0h-438.857c-40.395 0-73.142 32.747-73.142 73.142v0 734.939l267.411-186.075c6.916-4.764 15.475-7.609 24.698-7.609 0.163 0 0.325 0.001 0.488 0.003h-0.025z"],"attrs":[{}],"tags":["bookmark"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":105,"id":99,"name":"bookmark","prevSize":80,"code":59726},"setIdx":0,"setId":1,"iconIdx":180},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM936.391 469.333h-157.013c-21.309-143.377-80.98-269.999-168.128-372.54l0.875 1.056c174.421 43.539 304.877 189.937 324.104 369.605l0.163 1.879zM330.524 554.667h362.951c-28.064 140.685-92.065 263.297-182.001 361.829l0.527-0.585c-89.411-97.947-153.411-220.56-180.673-356.452l-0.803-4.792zM330.524 469.333c28.064-140.685 92.065-263.297 182.001-361.829l-0.527 0.585c89.411 97.947 153.411 220.56 180.673 356.452l0.803 4.792zM411.876 97.849c-86.273 101.485-145.944 228.107-166.755 367.427l-0.499 4.057h-157.013c19.389-181.548 149.845-327.945 321.319-370.86l2.948-0.625zM87.609 552.96h157.013c21.309 143.377 80.98 269.999 168.128 372.54l-0.875-1.056c-173.937-43.335-304.18-188.936-324.092-367.845l-0.175-1.933zM612.124 924.444c86.273-101.485 145.944-228.107 166.755-367.427l0.499-4.057h157.013c-18.688 182.253-149.359 329.449-321.317 372.565l-2.949 0.627z"],"attrs":[{}],"tags":["globe"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":104,"id":100,"name":"globe","prevSize":80,"code":59727},"setIdx":0,"setId":1,"iconIdx":181},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["replay"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":102,"id":101,"name":"replay","prevSize":80,"code":59725},"setIdx":0,"setId":1,"iconIdx":182},{"icon":{"paths":["M632.463 1023.971h-240.928c-24.813-0.335-44.839-20.361-45.174-45.141v-466.83l-322.241-440.294c-5.688-7.337-9.117-16.671-9.117-26.808 0-7.369 1.813-14.314 5.016-20.414l-0.116 0.241c7.747-14.706 22.885-24.586 40.34-24.695h903.493c17.471 0.11 32.608 9.989 40.236 24.445l0.12 0.25c3.089 5.86 4.901 12.805 4.901 20.173 0 10.136-3.43 19.471-9.191 26.908l0.075-0.1-322.241 440.294v466.797c-0.335 24.813-20.361 44.839-45.141 45.174h-0.032zM436.711 933.623h150.58v-436.68c0-0.064 0-0.138 0-0.212 0-9.955 3.401-19.116 9.105-26.383l-0.071 0.093 277.067-380.063h-722.782l278.271 380.063c5.634 7.174 9.035 16.335 9.035 26.29 0 0.075 0 0.15 0 0.224v-0.011z"],"attrs":[{}],"tags":["filter"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":101,"id":102,"name":"filter","prevSize":80,"code":59724},"setIdx":0,"setId":1,"iconIdx":183},{"icon":{"paths":["M863.086 789.943h-117.028c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886v0h117.028c40.395 0 73.142-32.747 73.142-73.142v0-234.058c0-40.395-32.747-73.142-73.142-73.142v0h-702.171c-40.395 0-73.142 32.747-73.142 73.142v0 234.058c0 40.395 32.747 73.142 73.142 73.142v0h117.028c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-117.028c-88.87 0-160.914-72.044-160.914-160.914v0-234.058c0-88.87 72.044-160.914 160.914-160.914v0h702.171c88.87 0 160.914 72.044 160.914 160.914v0 234.058c0 88.87-72.044 160.914-160.914 160.914v0z","M746.058 321.828c-24.106-0.325-43.561-19.78-43.886-43.854v-190.203h-380.342v190.172c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v0-204.8c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 204.8c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z","M716.8 1024h-409.6c-40.395 0-73.142-32.747-73.142-73.142v0-409.6c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 409.6c0 40.395-32.747 73.142-73.142 73.142v0zM321.828 936.228h380.342v-380.342h-380.342z"],"attrs":[{},{},{}],"tags":["print"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":99,"id":103,"name":"print","prevSize":80,"code":59723},"setIdx":0,"setId":1,"iconIdx":184},{"icon":{"paths":["M980.093 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":98,"id":104,"name":"align-right","prevSize":80,"code":59718},"setIdx":0,"setId":1,"iconIdx":185},{"icon":{"paths":["M624.033 453.952h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 221.761h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 686.143h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M624.033 918.335h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z"],"attrs":[{},{},{},{}],"tags":["align-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":97,"id":105,"name":"align-left","prevSize":80,"code":59719},"setIdx":0,"setId":1,"iconIdx":186},{"icon":{"paths":["M804.558 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M804.558 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["items-center"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":96,"id":106,"name":"items-center","prevSize":80,"code":59720},"setIdx":0,"setId":1,"iconIdx":187},{"icon":{"paths":["M980.093 438.861h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-justify"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":95,"id":107,"name":"align-justify","prevSize":80,"code":59721},"setIdx":0,"setId":1,"iconIdx":188},{"icon":{"paths":["M512 683.439c-94.683 0-171.439-76.755-171.439-171.439s76.755-171.439 171.439-171.439c94.683 0 171.439 76.755 171.439 171.439v0c0 94.683-76.755 171.439-171.439 171.439v0zM512 428.329c-46.211 0-83.671 37.462-83.671 83.671s37.462 83.671 83.671 83.671c46.211 0 83.671-37.462 83.671-83.671v0c0-46.211-37.462-83.671-83.671-83.671v0z","M515.511 1023.977c-71.489-0.329-129.316-58.359-129.316-129.895 0-0.411 0.001-0.823 0.005-1.234v0.063c-0.496-11.009-7.26-20.325-16.788-24.505l-0.181-0.070c-3.653-1.718-7.933-2.721-12.448-2.721-7.858 0-15.007 3.038-20.337 8.003l0.018-0.016c-23.441 23.268-55.642 37.739-91.222 38.032h-0.056c-0.252 0.001-0.55 0.003-0.848 0.003-35.579 0-67.876-14.051-91.644-36.906l0.043 0.041c-23.515-23.508-38.058-55.987-38.058-91.864s14.545-68.356 38.058-91.864v0c5.876-5.37 9.547-13.066 9.547-21.622 0-3.145-0.496-6.173-1.414-9.011l0.058 0.207c-5.723-9.782-16.134-16.274-28.071-16.384h-0.015c-71.692-0.291-129.966-57.335-132.231-128.518l-0.005-0.208c0.332-71.488 58.36-129.312 129.895-129.312 0.206 0 0.413 0 0.618 0.001h-0.032c11.009-0.496 20.325-7.26 24.505-16.788l0.070-0.181c1.718-3.653 2.721-7.933 2.721-12.448 0-7.858-3.038-15.007-8.003-20.337l0.016 0.018c-23.268-23.441-37.739-55.642-38.032-91.222v-0.056c-0.012-0.671-0.019-1.462-0.019-2.255 0-35.137 14.077-66.986 36.901-90.213l-0.018 0.019c23.508-23.515 55.987-38.058 91.864-38.058s68.356 14.545 91.864 38.058v0c6.075 5.789 14.317 9.35 23.391 9.35 3.125 0 6.153-0.422 9.028-1.214l-0.239 0.056c10.177-5.653 17.174-15.957 18.131-27.962l0.008-0.123c0-0.019 0-0.041 0-0.063 0-71.915 57.154-130.481 128.518-132.752l0.208-0.005c71.237 0.66 128.732 58.56 128.732 129.89 0 0.413-0.001 0.826-0.005 1.238v-0.063c0.477 11.185 6.924 20.76 16.218 25.665l0.166 0.080c2.998 1.135 6.465 1.792 10.084 1.792 7.909 0 15.084-3.138 20.35-8.236l-0.008 0.007c23.441-23.268 55.642-37.739 91.222-38.032h0.056c1.163-0.038 2.53-0.062 3.903-0.062 34.624 0 65.95 14.12 88.535 36.914l0.010 0.010c23.515 23.508 38.058 55.987 38.058 91.864s-14.545 68.356-38.058 91.864v0c-4.99 5.871-8.027 13.54-8.027 21.916 0 3.667 0.581 7.197 1.657 10.505l-0.067-0.24c5.653 10.177 15.957 17.174 27.962 18.131l0.123 0.008c71.192 0.937 128.814 57.74 131.062 128.518l0.005 0.208c-0.66 71.237-58.56 128.732-129.89 128.732-0.413 0-0.826-0.001-1.238-0.005h0.063c-11.185 0.477-20.76 6.924-25.665 16.218l-0.080 0.166c-1.135 2.998-1.792 6.465-1.792 10.084 0 7.909 3.138 15.084 8.236 20.35l-0.007-0.008c23.268 23.441 37.739 55.642 38.032 91.222v0.056c0.012 0.671 0.019 1.462 0.019 2.255 0 35.137-14.077 66.986-36.901 90.213l0.018-0.019c-23.508 23.515-55.987 38.058-91.864 38.058s-68.356-14.545-91.864-38.058v0c-5.258-5.092-12.433-8.23-20.341-8.23-3.62 0-7.086 0.657-10.287 1.86l0.202-0.066c-9.782 5.723-16.274 16.134-16.384 28.071v0.015c-0.937 71.192-57.74 128.814-128.518 131.062l-0.208 0.005zM356.944 777.643c0.372-0.004 0.812-0.007 1.252-0.007 15.867 0 30.927 3.45 44.471 9.643l-0.669-0.274c41.82 17.762 70.846 58.017 71.967 105.181l0.003 0.14c-0.003 0.185-0.004 0.402-0.004 0.62 0 23.297 18.4 42.297 41.461 43.26l0.088 0.003c23.005-1.873 40.964-21.005 40.964-44.331 0-0.254-0.003-0.509-0.007-0.761v0.038c0.3-47.575 28.116-88.582 68.322-107.933l0.723-0.313c13.278-5.676 28.727-8.976 44.947-8.976 32.246 0 61.445 13.042 82.611 34.139l-0.003-0.003c7.488 7.488 17.831 12.119 29.255 12.119 22.85 0 41.374-18.524 41.374-41.374 0-11.425-4.631-21.769-12.119-29.255v0c-20.848-21.12-33.725-50.154-33.725-82.193 0-16.378 3.364-31.971 9.44-46.123l-0.291 0.761c18.745-40.97 59.339-68.943 106.478-69.044h0.014c0.185 0.003 0.403 0.004 0.621 0.004 22.975 0 41.712-18.138 42.674-40.875l0.003-0.088c-1.57-22.953-20.575-40.976-43.788-40.976-0.446 0-0.889 0.007-1.332 0.019l0.064-0.001c-47.872-1.343-88.773-29.867-107.929-70.632l-0.317-0.752c-5.566-13.342-8.8-28.841-8.8-45.097 0-32.536 12.954-62.046 33.987-83.655l-0.026 0.027c7.488-7.488 12.119-17.831 12.119-29.255 0-22.85-18.524-41.374-41.374-41.374-11.425 0-21.769 4.631-29.255 12.119v0c-20.824 19.383-48.841 31.278-79.638 31.278-63.284 0-114.836-50.233-116.956-113.001l-0.005-0.195c0.003-0.185 0.004-0.403 0.004-0.621 0-22.975-18.138-41.712-40.875-42.674l-0.088-0.003c-22.953 1.57-40.976 20.575-40.976 43.788 0 0.446 0.007 0.889 0.019 1.332l-0.001-0.064c-1.343 47.872-29.867 88.773-70.632 107.929l-0.752 0.317c-13.342 5.566-28.841 8.8-45.097 8.8-32.536 0-62.046-12.954-83.655-33.987l0.027 0.026c-7.488-7.488-17.831-12.119-29.255-12.119-22.85 0-41.374 18.524-41.374 41.374 0 11.425 4.631 21.769 12.119 29.255v0c20.603 21.075 33.316 49.942 33.316 81.777 0 16.537-3.43 32.274-9.617 46.535l0.292-0.757c-17.762 41.82-58.017 70.846-105.181 71.967l-0.14 0.003c-0.185-0.003-0.402-0.004-0.62-0.004-23.297 0-42.297 18.4-43.26 41.461l-0.003 0.088c1.873 23.005 21.005 40.964 44.331 40.964 0.254 0 0.509-0.003 0.761-0.007h-0.038c47.575 0.3 88.582 28.116 107.933 68.322l0.313 0.723c5.676 13.278 8.976 28.727 8.976 44.947 0 32.246-13.042 61.445-34.139 82.611l0.003-0.003c-7.488 7.488-12.119 17.831-12.119 29.255 0 22.85 18.524 41.374 41.374 41.374 11.425 0 21.769-4.631 29.255-12.119v0c21.423-20.481 50.464-33.15 82.462-33.352h0.040zM825.038 639.555v0z"],"attrs":[{},{}],"tags":["cog"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":94,"id":108,"name":"cog","prevSize":80,"code":59722},"setIdx":0,"setId":1,"iconIdx":189},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 177.736 8.28 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-206.991 0-206.991-213.062-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M512 908.319c-0.057 0-0.125 0-0.193 0-11.369 0-21.653-4.644-29.058-12.14l-156.213-156.213c-6.884-7.373-11.11-17.304-11.11-28.222 0-22.863 18.535-41.398 41.398-41.398 10.919 0 20.849 4.226 28.246 11.134l-0.025-0.022 126.954 126.954 126.954-126.954c7.373-6.884 17.304-11.11 28.222-11.11 22.863 0 41.398 18.535 41.398 41.398 0 10.919-4.226 20.849-11.134 28.246l0.022-0.025-156.209 158.416c-7.128 6.219-16.515 10.011-26.787 10.011-0.868 0-1.73-0.027-2.585-0.080l0.116 0.006z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-download"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":93,"id":109,"name":"cloud-download","prevSize":80,"code":59715},"setIdx":0,"setId":1,"iconIdx":190},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 189.879 41.951 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-137.994 0-206.991-124.194-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M668.209 713.47c-11.406-0.137-21.709-4.745-29.262-12.15l-126.947-126.947-126.954 126.954c-7.373 6.884-17.304 11.11-28.222 11.11-22.863 0-41.398-18.535-41.398-41.398 0-10.919 4.226-20.849 11.134-28.246l-0.022 0.025 156.209-156.209c7.427-7.616 17.79-12.341 29.254-12.341s21.827 4.725 29.246 12.331l0.008 0.009 156.209 156.209c7.48 7.489 12.108 17.832 12.108 29.254s-4.626 21.765-12.108 29.256v0c-7.6 7.307-17.868 11.888-29.205 12.143l-0.049 0.001z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-upload"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":92,"id":110,"name":"cloud-upload","prevSize":80,"code":59716},"setIdx":0,"setId":1,"iconIdx":191},{"icon":{"paths":["M761.085 885.627h-387.465c-206.337-0.017-373.598-167.289-373.598-373.627 0-206.348 167.278-373.627 373.627-373.627 152.926 0 284.392 91.876 342.215 223.439l0.939 2.397c13.246-2.68 28.531-4.285 44.166-4.428l0.115-0.001c141.466 8.944 253.978 121.457 262.882 262.11l0.042 0.813c0 145.209-117.715 262.923-262.923 262.923v0zM373.619 221.401c-160.494 0-290.599 130.105-290.599 290.599s130.105 290.599 290.599 290.599v0h387.465c99.226-0.314 179.581-80.668 179.895-179.864v-0.030c-8.504-95.738-84.157-171.391-179.139-179.84l-0.755-0.054c-19.989 0.459-38.949 4.276-56.529 10.907l1.178-0.389c-4.752 1.958-10.27 3.095-16.052 3.095s-11.3-1.136-16.34-3.199l0.288 0.104c-9.801-5.017-17.16-13.636-20.404-24.069l-0.077-0.287c-36.721-121.012-147.288-207.574-278.073-207.574-0.511 0-1.022 0.001-1.533 0.004h0.079z"],"attrs":[{}],"tags":["cloud"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":91,"id":111,"name":"cloud","prevSize":80,"code":59717},"setIdx":0,"setId":1,"iconIdx":192},{"icon":{"paths":["M45.313 1022.421c-0.136 0.001-0.296 0.003-0.456 0.003-11.964 0-22.806-4.803-30.702-12.588l0.006 0.006c-8.248-8.149-13.356-19.461-13.356-31.966 0-1.401 0.065-2.787 0.19-4.155l-0.013 0.176 18.572-230.049c0.852-11.108 5.734-20.935 13.169-28.147l662.6-662.6c34.079-31.973 80.059-51.615 130.628-51.615 2.096 0 4.186 0.034 6.267 0.101l-0.303-0.008c52.335 0.418 99.758 21.108 134.873 54.592l-0.079-0.074c34.783 35.688 56.235 84.513 56.235 138.348 0 50.427-18.822 96.457-49.825 131.448l0.181-0.208-663.188 665.585c-7.185 7.16-16.72 11.966-27.348 13.161l-0.211 0.020-233.044 20.968zM105.22 767.211l-12.581 164.15 164.15-14.978 653.004-654.202c15.132-17.82 24.333-41.087 24.333-66.503 0-56.908-46.133-103.043-103.043-103.043-0.341 0-0.681 0.001-1.021 0.006h0.052c-1.828-0.124-3.962-0.194-6.112-0.194-25.163 0-48.075 9.635-65.249 25.419l0.069-0.063zM727.071 84.852v0z"],"attrs":[{}],"tags":["pencil"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":90,"id":112,"name":"pencil","prevSize":80,"code":59714},"setIdx":0,"setId":1,"iconIdx":193},{"icon":{"paths":["M617.025 525.129c-108.758 0-196.923-88.165-196.923-196.923s88.165-196.923 196.923-196.923c108.758 0 196.923 88.165 196.923 196.923v0c0 108.758-88.165 196.923-196.923 196.923v0zM617.025 210.052c-65.254 0-118.154 52.9-118.154 118.154s52.9 118.154 118.154 118.154c65.254 0 118.154-52.9 118.154-118.154v0c0-65.254-52.9-118.154-118.154-118.154v0z","M984.615 892.718c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-102.4-55.664-170.667-328.206-170.667s-328.206 68.267-328.206 170.667c0 21.751-17.633 39.385-39.385 39.385s-39.385-17.633-39.385-39.385v0c0-249.436 285.145-249.436 406.975-249.436s406.975 0 406.975 249.436c-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z","M318.753 567.664h-16.804c-80.61-8.022-143.044-75.489-143.044-157.538 0-87.412 70.862-158.273 158.273-158.273 5.362 0 10.663 0.267 15.888 0.788l-0.66-0.053c21.012 0.932 37.694 18.192 37.694 39.348 0 21.751-17.633 39.385-39.385 39.385-2.183 0-4.326-0.177-6.414-0.519l0.228 0.031c-2.281-0.241-4.928-0.378-7.607-0.378-18.98 0-36.35 6.897-49.738 18.321l0.107-0.089c-15.663 12.706-26.198 31.205-28.33 52.186l-0.027 0.326c-0.273 2.455-0.43 5.301-0.43 8.183 0 40.775 31.191 74.267 71.015 77.915l0.306 0.022c2.052 0.186 4.437 0.293 6.848 0.293 15.535 0 30.039-4.409 42.331-12.043l-0.342 0.198c5.898-3.695 13.065-5.886 20.742-5.886 21.812 0 39.494 17.682 39.494 39.494 0 14.133-7.424 26.533-18.586 33.511l-0.166 0.097c-23.058 14.912-51.098 24.022-81.222 24.678l-0.174 0.002z","M39.385 853.333c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-141.785 37.809-236.308 223.179-236.308 21.751 0 39.385 17.633 39.385 39.385s-17.633 39.385-39.385 39.385v0c-123.406 0-144.41 39.385-144.41 157.538-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z"],"attrs":[{},{},{},{}],"tags":["users"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":88,"id":113,"name":"users","prevSize":80,"code":59713},"setIdx":0,"setId":1,"iconIdx":194},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M682.667 554.667h-170.667c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 241.777h128c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["clock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":87,"id":114,"name":"clock","prevSize":80,"code":59712},"setIdx":0,"setId":1,"iconIdx":195},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{}],"tags":["user-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":83,"id":115,"name":"user-minus","prevSize":80,"code":59710},"setIdx":0,"setId":1,"iconIdx":196},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M927.518 660.4c-24.454-0.33-44.19-20.066-44.52-44.488v-207.79c0-24.587 19.932-44.52 44.52-44.52s44.52 19.932 44.52 44.52v0 207.758c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{},{}],"tags":["user-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":86,"id":116,"name":"user-plus","prevSize":80,"code":59711},"setIdx":0,"setId":1,"iconIdx":197},{"icon":{"paths":["M979.856 319.009h-935.714c-24.224 0-43.862-19.638-43.862-43.862s19.638-43.862 43.862-43.862h935.714c24.224 0 43.862 19.638 43.862 43.862s-19.638 43.862-43.862 43.862v0z","M771.66 1023.718h-519.321c-2.865 0.208-6.208 0.328-9.577 0.328-74.752 0-135.856-58.437-140.12-132.119l-0.018-0.377v-613.477c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 613.477c0 23.977 27.486 44.447 58.483 44.447h519.321c32.75 0 58.483-20.468 58.483-44.447v-613.477c0-26.162 21.208-47.37 47.37-47.37s47.37 21.208 47.37 47.37v0 613.477c-4.282 74.060-65.385 132.496-140.136 132.496-3.37 0-6.712-0.119-10.022-0.352l0.445 0.025zM778.678 263.452c-0.175 0.003-0.382 0.004-0.589 0.004-23.9 0-43.276-19.376-43.276-43.276 0-0.207 0.001-0.414 0.004-0.62v0.032-87.138c0-23.977-28.071-44.447-58.483-44.447h-326.915c-32.166 0-58.483 20.468-58.483 44.447v87.138c0 24.224-19.638 43.862-43.862 43.862s-43.862-19.638-43.862-43.862v0-87.138c4.697-74.022 65.883-132.278 140.675-132.278 1.945 0 3.88 0.040 5.806 0.118l-0.276-0.008h325.161c2.174-0.119 4.719-0.188 7.28-0.188 74.82 0 136.023 58.3 140.66 131.951l0.021 0.407v87.138c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M407.901 804.41c-24.092-0.325-43.537-19.769-43.862-43.83v-264.955c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M616.099 804.41c-24.224 0-43.862-19.638-43.862-43.862v0-264.924c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0 0.001 0 0.003 0 0.004 0 24.342-19.568 44.112-43.83 44.443h-0.032z"],"attrs":[{},{},{},{}],"tags":["trash"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":81,"id":117,"name":"trash","prevSize":80,"code":59709},"setIdx":0,"setId":1,"iconIdx":198},{"icon":{"paths":["M863.070 0.023h-702.14c-88.866 0-160.907 72.041-160.907 160.907v0 351.070c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0-351.070c0-40.394 32.746-73.139 73.139-73.139v0h702.14c40.394 0 73.139 32.746 73.139 73.139v0 702.14c0 40.394-32.746 73.139-73.139 73.139v0h-351.070c-24.236 0-43.884 19.648-43.884 43.884s19.648 43.884 43.884 43.884v0h351.070c88.866 0 160.907-72.041 160.907-160.907v0-702.14c0-88.866-72.041-160.907-160.907-160.907v0z","M465.775 581.628c5.003 2.189 10.831 3.478 16.956 3.511h234.059c24.236 0 43.884-19.648 43.884-43.884s-19.648-43.884-43.884-43.884v0h-128.141l188.408-188.408c7.297-7.815 11.777-18.343 11.777-29.916 0-24.236-19.648-43.884-43.884-43.884-11.574 0-22.101 4.48-29.942 11.802l0.026-0.023-188.408 188.408v-128.141c0-24.236-19.648-43.884-43.884-43.884s-43.884 19.648-43.884 43.884v0 234.047c0.033 6.137 1.322 11.965 3.62 17.252l-0.11-0.284c4.316 10.739 12.665 19.089 23.125 23.305l0.28 0.099z","M277.953 643.651h-175.535c-56.418 0.33-102.065 45.976-102.396 102.364v175.567c0.33 56.418 45.976 102.065 102.364 102.396h175.567c56.418-0.33 102.065-45.976 102.396-102.364v-175.567c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM292.581 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-175.535c-8.079 0-14.628-6.55-14.628-14.628v0-175.535c0-8.079 6.55-14.628 14.628-14.628v0h175.535c8.079 0 14.628 6.55 14.628 14.628v0z"],"attrs":[{},{},{}],"tags":["window-minimize"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":80,"id":118,"name":"window-minimize","prevSize":80,"code":59706},"setIdx":0,"setId":1,"iconIdx":199},{"icon":{"paths":["M863.070 1023.977h-351.070c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h351.070c40.394 0 73.139-32.746 73.139-73.139v0-702.14c0-40.394-32.746-73.139-73.139-73.139v0h-702.14c-40.394 0-73.139 32.746-73.139 73.139v0 351.070c0 24.236-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0-351.070c0-88.866 72.041-160.907 160.907-160.907v0h702.14c88.866 0 160.907 72.041 160.907 160.907v0 702.14c0 88.866-72.041 160.907-160.907 160.907v0z","M746.047 555.884c-24.105-0.325-43.559-19.779-43.884-43.852v-190.195h-190.163c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h234.047c24.105 0.325 43.559 19.779 43.884 43.852v234.079c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M482.745 585.139c-11.709-0.922-21.991-6.371-29.214-14.58l-0.041-0.048c-6.935-7.728-11.175-17.996-11.175-29.255s4.24-21.528 11.211-29.297l-0.036 0.041 263.303-263.303c7.815-7.297 18.343-11.777 29.916-11.777 24.236 0 43.884 19.648 43.884 43.884 0 11.574-4.48 22.101-11.802 29.942l0.023-0.026-266.813 259.792c-7.264 8.256-17.547 13.707-29.106 14.619l-0.151 0.010z","M277.953 1023.977h-175.535c-56.418-0.33-102.065-45.976-102.396-102.364v-175.567c0.33-56.418 45.976-102.065 102.364-102.396h175.567c56.418 0.33 102.065 45.976 102.396 102.364v175.567c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 731.419c-8.079 0-14.628 6.55-14.628 14.628v0 175.535c0 8.079 6.55 14.628 14.628 14.628v0h175.535c8.079 0 14.628-6.55 14.628-14.628v0-175.535c0-8.079-6.55-14.628-14.628-14.628v0z"],"attrs":[{},{},{},{}],"tags":["window-maximize"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":79,"id":119,"name":"window-maximize","prevSize":80,"code":59707},"setIdx":0,"setId":1,"iconIdx":200},{"icon":{"paths":["M862.106 1022.571h-700.213c-88.622 0-160.465-71.843-160.465-160.465v0-700.213c0-88.622 71.843-160.465 160.465-160.465v0h350.106c24.17 0 43.763 19.594 43.763 43.763s-19.594 43.763-43.763 43.763v0h-350.106c-40.283 0-72.938 32.656-72.938 72.938v0 700.213c0 40.283 32.656 72.938 72.938 72.938v0h700.213c40.283 0 72.938-32.656 72.938-72.938v0-350.106c0-24.17 19.594-43.763 43.763-43.763s43.763 19.594 43.763 43.763v0 350.106c0 88.622-71.843 160.465-160.465 160.465v0z","M978.808 322.359c-24.038-0.324-43.439-19.725-43.763-43.732v-189.673h-189.641c-24.17 0-43.763-19.594-43.763-43.763s19.594-43.763 43.763-43.763v0h233.405c24.038 0.324 43.439 19.725 43.763 43.732v233.436c-0.324 24.038-19.725 43.439-43.732 43.763h-0.031z","M599.527 468.237c-11.677-0.919-21.931-6.354-29.134-14.54l-0.041-0.048c-6.916-7.706-11.145-17.947-11.145-29.175s4.229-21.469 11.18-29.216l-0.036 0.041 379.281-379.281c8.011-8.58 19.39-13.929 32.018-13.929 24.17 0 43.763 19.594 43.763 43.763 0 12.628-5.349 24.007-13.903 31.994l-0.026 0.023-382.782 375.78c-7.244 8.233-17.498 13.669-29.026 14.579l-0.15 0.010z"],"attrs":[{},{},{}],"tags":["external-link"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":78,"id":120,"name":"external-link","prevSize":80,"code":59708},"setIdx":0,"setId":1,"iconIdx":201},{"icon":{"paths":["M512 1023.452c-234.044 0-423.774-189.73-423.774-423.774s189.73-423.774 423.774-423.774v0h146.13c24.211 0 43.839 19.627 43.839 43.839s-19.627 43.839-43.839 43.839v0h-146.13c-185.621 0-336.097 150.475-336.097 336.097s150.475 336.097 336.097 336.097c185.621 0 336.097-150.475 336.097-336.097v0c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c-0.333 233.911-189.864 423.443-423.743 423.774h-0.032z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-0.004-0.004c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l144.376-144.376-144.376-144.376c-8.595-8.025-13.953-19.423-13.953-32.074 0-24.211 19.627-43.839 43.839-43.839 12.65 0 24.048 5.358 32.049 13.927l0.023 0.026 175.355 175.355c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0l-175.355 175.355c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["refresh"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":77,"id":121,"name":"refresh","prevSize":80,"code":59704},"setIdx":0,"setId":1,"iconIdx":202},{"icon":{"paths":["M512 528.516c-136.816 0-247.725-110.91-247.725-247.725s110.91-247.725 247.725-247.725c136.816 0 247.725 110.91 247.725 247.725v0c0 136.816-110.91 247.725-247.725 247.725v0zM512 132.155c-82.088 0-148.635 66.547-148.635 148.635s66.547 148.635 148.635 148.635c82.088 0 148.635-66.547 148.635-148.635v0c0-82.088-66.547-148.635-148.635-148.635v0z","M974.421 990.935c-27.214-0.367-49.178-22.331-49.545-49.509v-0.036c0-128.817-70.024-214.696-412.876-214.696s-412.876 85.879-412.876 214.696c0 27.363-22.182 49.545-49.545 49.545s-49.545-22.182-49.545-49.545v0c0-313.786 358.706-313.786 511.966-313.786s511.966 0 511.966 313.786c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{}],"tags":["user"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":76,"id":122,"name":"user","prevSize":80,"code":59705},"setIdx":0,"setId":1,"iconIdx":203},{"icon":{"paths":["M980.247 964.701h-936.496c-16.088-0.051-30.159-8.633-37.933-21.458l-0.111-0.198c-3.59-6.323-5.705-13.888-5.705-21.949s2.115-15.627 5.823-22.173l-0.117 0.224 468.247-819.433c8.296-12.379 22.232-20.419 38.044-20.419s29.748 8.039 37.942 20.254l0.104 0.165 468.247 819.433c3.59 6.323 5.705 13.888 5.705 21.949s-2.115 15.627-5.823 22.173l0.117-0.224c-7.885 13.022-21.958 21.606-38.038 21.657h-0.007zM119.257 876.905h785.486l-392.743-687.154z","M512 642.78c-24.113-0.325-43.573-19.786-43.898-43.866v-204.89c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 204.858c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z","M512 818.373c-24.113-0.325-43.573-19.786-43.898-43.866v-29.297c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 29.265c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z"],"attrs":[{},{},{}],"tags":["exclamation-triangle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":75,"id":123,"name":"exclamation-triangle","prevSize":80,"code":59682},"setIdx":0,"setId":1,"iconIdx":204},{"icon":{"paths":["M788.745 110.712h-69.186v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-249.071v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-69.186c-84.063 0-152.209 68.147-152.209 152.209v0 608.839c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-608.839c0-84.063-68.147-152.209-152.209-152.209v0zM235.255 193.735h69.186v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h249.071v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h69.186c38.21 0 69.186 30.976 69.186 69.186v0 152.209h-691.862v-152.209c0-38.21 30.976-69.186 69.186-69.186v0zM788.745 940.947h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-373.606h691.862v373.606c0 38.21-30.976 69.186-69.186 69.186v0z"],"attrs":[{}],"tags":["calendar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":74,"id":124,"name":"calendar","prevSize":80,"code":59687},"setIdx":0,"setId":1,"iconIdx":205},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M625.777 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":73,"id":125,"name":"chevron-circle-left","prevSize":80,"code":59688},"setIdx":0,"setId":1,"iconIdx":206},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":70,"id":126,"name":"chevron-circle-down","prevSize":80,"code":59689},"setIdx":0,"setId":1,"iconIdx":207},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M398.223 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":69,"id":127,"name":"chevron-circle-right","prevSize":80,"code":59690},"setIdx":0,"setId":1,"iconIdx":208},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":68,"id":128,"name":"chevron-circle-up","prevSize":80,"code":59691},"setIdx":0,"setId":1,"iconIdx":209},{"icon":{"paths":["M512 902.549c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-260.364c-5.628-8.568-8.981-19.073-8.981-30.354 0-30.81 24.977-55.792 55.792-55.792 10.145 0 19.649 2.705 27.846 7.433l-0.269-0.143 223.173 223.173 223.173-223.173c7.925-4.589 17.434-7.289 27.577-7.289 30.81 0 55.792 24.977 55.792 55.792 0 11.285-3.353 21.785-9.108 30.566l0.128-0.209-258.132 258.132c-9.737 10.997-23.705 18.053-39.331 18.593l-0.092 0.004z","M512 493.405c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-262.596c-3.437-7.037-5.446-15.305-5.446-24.041 0-30.81 24.977-55.792 55.792-55.792 8.741 0 17.009 2.009 24.377 5.597l-0.329-0.145 223.173 223.173 223.173-223.173c7.037-3.437 15.305-5.446 24.041-5.446 30.81 0 55.792 24.977 55.792 55.792 0 8.741-2.009 17.009-5.597 24.377l0.145-0.329-260.364 260.364c-9.233 10.493-22.31 17.429-37.002 18.583l-0.192 0.012z"],"attrs":[{},{}],"tags":["angle-double-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":67,"id":129,"name":"angle-double-down","prevSize":80,"code":59692},"setIdx":0,"setId":1,"iconIdx":210},{"icon":{"paths":["M436.578 832.544c-0.073 0-0.172 0-0.262 0-15.535 0-29.584-6.348-39.707-16.591l-0.004-0.004-261.716-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l261.716-261.716c8.688-5.708 19.333-9.102 30.778-9.102 31.242 0 56.568 25.327 56.568 56.568 0 10.286-2.746 19.925-7.538 28.233l0.144-0.272-226.267 226.267 226.267 226.267c10.22 10.237 16.542 24.365 16.542 39.973s-6.32 29.742-16.542 39.973v0c-9.854 8.923-22.994 14.389-37.408 14.389-0.902 0-1.8-0.024-2.694-0.065l0.124 0.004z","M851.399 832.544c-15.091-1.188-28.351-8.214-37.656-18.795l-0.055-0.065-263.977-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l263.977-259.453c7.129-3.487 15.515-5.521 24.379-5.521 31.242 0 56.568 25.327 56.568 56.568 0 8.864-2.038 17.25-5.669 24.715l0.144-0.336-226.267 226.267 226.267 226.267c8.942 9.959 14.408 23.201 14.408 37.714s-5.466 27.749-14.45 37.763l0.045-0.055c-9.366 10.641-22.619 17.666-37.517 18.843l-0.193 0.014z"],"attrs":[{},{}],"tags":["angle-double-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":66,"id":130,"name":"angle-double-left","prevSize":80,"code":59693},"setIdx":0,"setId":1,"iconIdx":211},{"icon":{"paths":["M587.102 831.182c-0.073 0-0.171 0-0.259 0-15.47 0-29.463-6.321-39.534-16.519l-0.004-0.004c-10.173-10.194-16.472-24.266-16.472-39.803s6.29-29.611 16.472-39.809v0l225.304-225.304-225.304-225.304c-3.536-7.161-5.605-15.588-5.605-24.492 0-31.111 25.217-56.325 56.325-56.325 10.665 0 20.638 2.967 29.14 8.115l-0.251-0.143 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.83 11.106-23.933 18.225-39.711 18.775l-0.094 0.004z","M174.042 831.182c-15.029-1.181-28.228-8.178-37.495-18.716l-0.053-0.063c-8.9-9.92-14.342-23.099-14.342-37.554s5.442-27.63 14.391-37.603l-0.045 0.053 225.304-225.304-225.304-225.304c-3.467-7.105-5.497-15.45-5.497-24.276 0-31.111 25.217-56.325 56.325-56.325 8.82 0 17.176 2.028 24.609 5.644l-0.339-0.145 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.32 10.596-22.521 17.598-37.357 18.765l-0.192 0.014z"],"attrs":[{},{}],"tags":["angle-double-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":65,"id":131,"name":"angle-double-right","prevSize":80,"code":59694},"setIdx":0,"setId":1,"iconIdx":212},{"icon":{"paths":["M768.744 493.657c-0.079 0-0.163 0-0.259 0-15.11 0-28.77-6.175-38.616-16.135l-220.071-220.071-220.067 220.067c-6.991 3.451-15.223 5.479-23.923 5.479-30.385 0-55.016-24.631-55.016-55.016 0-10.412 2.899-20.155 7.927-28.458l-0.139 0.247 254.542-254.542c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l256.744 256.744c9.943 9.955 16.087 23.695 16.087 38.874s-6.151 28.926-16.087 38.877v0c-9.583 8.683-22.363 13.999-36.378 13.999-0.883 0-1.752-0.019-2.623-0.067l0.127 0.007z","M768.744 897.118c-14.683-1.159-27.57-7.987-36.629-18.283l-0.055-0.060-220.067-220.067-220.067 220.067c-6.935 3.391-15.091 5.371-23.707 5.371-30.385 0-55.016-24.631-55.016-55.016 0-8.623 1.987-16.772 5.515-24.038l-0.139 0.331 256.744-256.744c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l252.342 256.744c8.695 9.691 14.011 22.565 14.011 36.678s-5.316 26.99-14.059 36.726l0.043-0.055c-9.104 10.351-22.001 17.184-36.486 18.331l-0.187 0.012z"],"attrs":[{},{}],"tags":["angle-double-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":64,"id":132,"name":"angle-double-up","prevSize":80,"code":59695},"setIdx":0,"setId":1,"iconIdx":213},{"icon":{"paths":["M512 724.21c-0.086 0-0.192 0-0.293 0-17.487 0-33.3-7.139-44.687-18.671l-0.006-0.006-294.549-297.097c-6.421-9.779-10.246-21.757-10.246-34.639 0-35.163 28.506-63.662 63.662-63.662 11.573 0 22.424 3.091 31.773 8.485l-0.306-0.164 254.656 254.656 254.656-254.656c9.044-5.23 19.894-8.318 31.469-8.318 35.163 0 63.662 28.506 63.662 63.662 0 12.88-3.82 24.863-10.395 34.879l0.149-0.244-297.097 297.097c-10.874 11.029-25.782 18.050-42.325 18.671l-0.112 0.002z"],"attrs":[{}],"tags":["angle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":224,"id":133,"name":"angle-down","prevSize":80,"code":59696},"setIdx":0,"setId":1,"iconIdx":214},{"icon":{"paths":["M645.785 836.904c-0.077 0-0.174 0-0.264 0-15.744 0-29.987-6.434-40.247-16.814l-267.57-267.57c-10.36-10.374-16.768-24.697-16.768-40.517s6.404-30.147 16.768-40.517v0l267.566-265.27c8.804-5.784 19.594-9.224 31.197-9.224 31.667 0 57.335 25.671 57.335 57.335 0 10.424-2.782 20.194-7.64 28.617l0.144-0.274-229.343 229.343 229.343 229.343c10.36 10.374 16.768 24.697 16.768 40.517s-6.404 30.147-16.768 40.517v0c-9.987 9.044-23.307 14.584-37.917 14.584-0.914 0-1.824-0.023-2.732-0.064l0.124 0.004z"],"attrs":[{}],"tags":["angle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":62,"id":134,"name":"angle-left","prevSize":80,"code":59697},"setIdx":0,"setId":1,"iconIdx":215},{"icon":{"paths":["M377.809 837.894c-16.204-0.566-30.605-7.836-40.589-19.11l-0.054-0.059c-10.396-10.404-16.822-24.776-16.822-40.643s6.424-30.235 16.822-40.645v0l230.044-230.044-230.044-230.044c-2.746-6.474-4.334-14.004-4.334-21.905 0-31.765 25.748-57.513 57.513-57.513 10.324 0 20.016 2.723 28.392 7.484l-0.286-0.149 268.384 268.384c10.396 10.406 16.822 24.773 16.822 40.643s-6.424 30.236-16.822 40.645v0l-268.384 263.783c-10.036 11.334-24.433 18.607-40.543 19.164l-0.096 0.006z"],"attrs":[{}],"tags":["angle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":61,"id":135,"name":"angle-right","prevSize":80,"code":59698},"setIdx":0,"setId":1,"iconIdx":216},{"icon":{"paths":["M804.999 721.286c-0.087 0-0.194 0-0.29 0-17.244 0-32.838-7.040-44.069-18.415l-251.149-251.149-251.143 251.143c-7.978 3.94-17.369 6.249-27.304 6.249-34.676 0-62.787-28.109-62.787-62.787 0-11.887 3.305-23 9.042-32.478l-0.157 0.277 292.999-292.999c11.357-11.344 27.043-18.363 44.37-18.363s33.008 7.014 44.37 18.363v0l292.999 292.999c11.344 11.357 18.363 27.043 18.363 44.37s-7.014 33.008-18.363 44.37v0c-11.24 11.41-26.866 18.481-44.134 18.481-0.966 0-1.925-0.024-2.88-0.070l0.133 0.002z"],"attrs":[{}],"tags":["angle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":60,"id":136,"name":"angle-up","prevSize":80,"code":59699},"setIdx":0,"setId":1,"iconIdx":217},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M746.058 321.828c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-203.048-203.048-203.044 203.044c-7.816 7.297-18.344 11.778-29.918 11.778-24.237 0-43.886-19.648-43.886-43.886 0-11.575 4.48-22.102 11.803-29.944l-0.023 0.026 234.058-234.058c7.939-7.93 18.904-12.835 31.012-12.835s23.073 4.904 31.013 12.835v0l234.058 234.058c7.93 7.939 12.835 18.904 12.835 31.012s-4.904 23.073-12.835 31.013v0c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["upload"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":59,"id":137,"name":"upload","prevSize":80,"code":59700},"setIdx":0,"setId":1,"iconIdx":218},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M512 731.429c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-234.062-234.062c-7.297-7.816-11.778-18.344-11.778-29.918 0-24.237 19.648-43.886 43.886-43.886 11.575 0 22.102 4.48 29.944 11.803l-0.026-0.023 203.044 203.044 203.044-203.044c7.816-7.297 18.344-11.778 29.918-11.778 24.237 0 43.886 19.648 43.886 43.886 0 11.575-4.48 22.102-11.803 29.944l0.023-0.026-234.058 234.058c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["download"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":113,"id":138,"name":"download","prevSize":80,"code":59734},"setIdx":0,"setId":1,"iconIdx":219},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM85.333 512c0-0.111 0-0.24 0-0.369 0-102.621 36.521-196.712 97.276-269.985l-0.565 0.701 599.609 599.609c-72.916 60.16-167.308 96.645-270.223 96.645-235.327 0-426.097-190.771-426.097-426.097 0-0.177 0-0.353 0-0.531v0.028zM841.956 781.653l-599.609-599.609c72.855-59.977 167.108-96.344 269.855-96.344 235.327 0 426.097 190.771 426.097 426.097 0 102.747-36.367 197-96.931 270.591l0.587-0.735z"],"attrs":[{}],"tags":["ban"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":58,"id":139,"name":"ban","prevSize":80,"code":59701},"setIdx":0,"setId":1,"iconIdx":220},{"icon":{"paths":["M1021.85 393.483c-4.841-15.030-17.644-26.152-33.316-28.484l-0.227-0.028-303.002-44.165-135.848-274.491c-7.746-12.831-21.614-21.279-37.457-21.279s-29.71 8.447-37.346 21.083l-0.11 0.195-135.848 274.491-303.002 44.165c-15.899 2.36-28.701 13.481-33.462 28.219l-0.081 0.292c-1.397 4-2.204 8.612-2.204 13.413 0 11.571 4.687 22.048 12.267 29.634v0l220.265 213.556-51.991 301.885c-0.38 2.136-0.597 4.594-0.597 7.102 0 14.016 6.787 26.448 17.254 34.186l0.115 0.081c6.76 4.866 15.204 7.783 24.332 7.783 7.263 0 14.096-1.847 20.052-5.097l-0.219 0.11 270.579-142.557 271.137 142.557c5.647 3.156 12.387 5.020 19.564 5.031h0.004c9.211-0.109 17.721-3.021 24.742-7.922l-0.143 0.094c10.582-7.821 17.369-20.251 17.369-34.267 0-2.509-0.218-4.967-0.634-7.356l0.037 0.254-52.551-301.885 219.705-213.556c7.83-7.626 12.687-18.27 12.687-30.050 0-4.646-0.756-9.117-2.151-13.294l0.085 0.296z"],"attrs":[{}],"tags":["star-fill"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":57,"id":140,"name":"star-fill","prevSize":80,"code":59702},"setIdx":0,"setId":1,"iconIdx":221},{"icon":{"paths":["M802.661 1001.092c-7.178-0.012-13.918-1.875-19.772-5.137l0.207 0.106-271.096-142.535-271.096 142.535c-5.737 3.14-12.567 4.986-19.829 4.986-9.126 0-17.571-2.916-24.452-7.867l0.124 0.085c-10.58-7.82-17.366-20.248-17.366-34.262 0-2.509 0.217-4.966 0.634-7.355l-0.037 0.254 52.543-301.84-220.232-213.524c-7.577-7.585-12.265-18.059-12.265-29.629 0-4.8 0.807-9.412 2.291-13.706l-0.089 0.295c4.841-15.028 17.641-26.148 33.311-28.48l0.227-0.028 302.957-44.158 135.828-274.45c7.745-12.829 21.611-21.276 37.451-21.276s29.706 8.446 37.341 21.080l0.11 0.195 135.828 274.45 302.957 44.158c15.896 2.359 28.697 13.479 33.457 28.215l0.081 0.292c1.397 4 2.204 8.611 2.204 13.411 0 11.569-4.686 22.045-12.265 29.63v0l-220.232 213.524 51.984 301.84c0.38 2.135 0.597 4.593 0.597 7.101 0 14.014-6.786 26.444-17.251 34.181l-0.115 0.081c-6.725 4.703-15.021 7.598-23.979 7.824l-0.056 0.001zM512 764.651c7.119 0.088 13.834 1.727 19.85 4.594l-0.287-0.123 215.201 111.792-40.805-239.795c-0.368-2.129-0.579-4.58-0.579-7.081 0-11.813 4.698-22.528 12.328-30.38l-0.010 0.010 174.396-167.689-240.912-35.774c-13.783-2.252-25.168-10.868-31.19-22.677l-0.111-0.241-107.88-217.995-107.88 218.555c-6.135 12.049-17.52 20.666-31.056 22.884l-0.246 0.033-240.912 35.215 174.396 167.689c7.619 7.842 12.317 18.557 12.317 30.37 0 2.501-0.211 4.952-0.614 7.338l0.035-0.257-40.805 241.472 215.201-111.792c5.628-3.296 12.279-5.497 19.381-6.135l0.183-0.013z"],"attrs":[{}],"tags":["star"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":56,"id":141,"name":"star","prevSize":80,"code":59703},"setIdx":0,"setId":1,"iconIdx":222},{"icon":{"paths":["M679.213 992.738c-0.086 0-0.19 0-0.292 0-17.22 0-32.796-7.035-44.013-18.388l-418.039-418.039c-11.33-11.344-18.339-27.010-18.339-44.311s7.007-32.967 18.339-44.313v0l418.033-418.033c11.167-10.427 26.211-16.828 42.747-16.828 34.631 0 62.705 28.074 62.705 62.705 0 16.538-6.402 31.58-16.864 42.785l0.034-0.037-373.722 373.722 373.722 373.722c11.33 11.344 18.339 27.010 18.339 44.311s-7.007 32.967-18.339 44.313v0c-11.222 11.36-26.798 18.394-44.019 18.394-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":16,"id":142,"name":"chevron-left","prevSize":80,"code":59648},"setIdx":0,"setId":1,"iconIdx":223},{"icon":{"paths":["M344.779 992.761c-0.086 0-0.19 0-0.292 0-17.221 0-32.798-7.035-44.016-18.389l-0.006-0.006c-11.331-11.345-18.34-27.011-18.34-44.313s7.008-32.969 18.34-44.315v0l373.739-373.739-373.739-373.739c-10.427-11.167-16.829-26.212-16.829-42.749 0-34.632 28.075-62.708 62.708-62.708 16.539 0 31.582 6.402 42.787 16.865l-0.037-0.034 418.053 418.053c11.331 11.345 18.34 27.011 18.34 44.313s-7.008 32.969-18.34 44.315v0l-418.053 418.053c-11.223 11.36-26.8 18.395-44.021 18.395-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":17,"id":143,"name":"chevron-right","prevSize":80,"code":59649},"setIdx":0,"setId":1,"iconIdx":224},{"icon":{"paths":["M512 774.266c-0.084 0-0.183 0-0.282 0-16.621 0-31.655-6.79-42.481-17.748l-403.49-403.49c-6.608-9.557-10.557-21.395-10.557-34.153 0-33.426 27.098-60.522 60.522-60.522 13.37 0 25.728 4.335 35.742 11.677l-0.17-0.119 360.715 358.295 360.715-358.295c9.294-6.106 20.686-9.741 32.927-9.741 33.426 0 60.522 27.098 60.522 60.522 0 11.002-2.935 21.318-8.065 30.207l0.155-0.294-403.485 403.485c-10.561 11.928-25.717 19.583-42.668 20.171l-0.102 0.002z"],"attrs":[{}],"tags":["chevron-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":18,"id":144,"name":"chevron-down","prevSize":80,"code":59650},"setIdx":0,"setId":1,"iconIdx":225},{"icon":{"paths":["M912.529 772.345c-0.083 0-0.182 0-0.279 0-16.5 0-31.424-6.74-42.17-17.619l-358.079-358.079-358.074 355.671c-9.226 6.061-20.534 9.669-32.685 9.669-33.181 0-60.080-26.899-60.080-60.080 0-10.921 2.914-21.161 8.005-29.985l-0.154 0.291 400.529-400.529c10.869-10.856 25.879-17.571 42.456-17.571s31.587 6.714 42.457 17.571v0l400.529 400.529c10.856 10.869 17.571 25.879 17.571 42.456s-6.714 31.587-17.571 42.457v0c-10.467 9.481-24.421 15.283-39.728 15.283-0.96 0-1.913-0.022-2.862-0.068l0.134 0.005z"],"attrs":[{}],"tags":["chevron-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":19,"id":145,"name":"chevron-up","prevSize":80,"code":59651},"setIdx":0,"setId":1,"iconIdx":226},{"icon":{"paths":["M777.445 959.937c-0.065 0-0.144 0-0.22 0-11.19 0-21.502-3.743-29.759-10.044l0.119 0.088-530.888-398.166c-12.143-9.177-19.908-23.59-19.908-39.817s7.765-30.639 19.784-39.726l0.124-0.091 530.888-398.166c8.229-6.251 18.645-10.014 29.941-10.014 8.203 0 15.94 1.984 22.762 5.498l-0.278-0.131c16.203 8.535 27.088 25.214 27.208 44.445v796.35c-0.121 19.249-11.006 35.927-26.932 44.329l-0.275 0.133c-6.602 3.186-14.334 5.125-22.5 5.309l-0.063 0.002zM329.508 512l398.166 298.625v-597.249z"],"attrs":[{}],"tags":["caret-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":20,"id":146,"name":"caret-left","prevSize":80,"code":59652},"setIdx":0,"setId":1,"iconIdx":227},{"icon":{"paths":["M246.514 960.008c-8.001-0.105-15.52-2.052-22.189-5.441l0.287 0.133c-16.574-8.253-27.783-25.040-27.876-44.458v-796.469c0.092-19.426 11.302-36.213 27.587-44.339l0.287-0.132c6.449-3.33 14.077-5.284 22.158-5.284 11.175 0 21.478 3.731 29.729 10.017l-0.119-0.089 530.972 398.228c12.145 9.177 19.912 23.594 19.912 39.823s-7.766 30.645-19.789 39.733l-0.124 0.091-530.972 398.228c-8.14 6.214-18.456 9.957-29.645 9.957-0.077 0-0.156 0-0.232 0h0.012zM296.292 213.328v597.343l398.228-298.672z"],"attrs":[{}],"tags":["caret-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":21,"id":147,"name":"caret-right","prevSize":80,"code":59653},"setIdx":0,"setId":1,"iconIdx":228},{"icon":{"paths":["M512 808.242c-0.092 0-0.203 0.002-0.311 0.002-15.157 0-28.607-7.307-37.020-18.589l-0.088-0.122-374.2-498.935c-5.874-7.735-9.411-17.522-9.411-28.14 0-7.708 1.865-14.982 5.168-21.391l-0.124 0.263c8.022-15.226 23.696-25.457 41.77-25.57h748.419c18.091 0.116 33.765 10.344 41.662 25.311l0.125 0.259c3.18 6.151 5.044 13.42 5.044 21.131 0 10.614-3.536 20.406-9.494 28.255l0.085-0.116-374.2 498.935c-8.503 11.404-21.951 18.712-37.108 18.712-0.109 0-0.218 0-0.329-0.002h0.017zM231.349 309.307l280.651 374.2 280.651-374.2z"],"attrs":[{}],"tags":["caret-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":22,"id":148,"name":"caret-down","prevSize":80,"code":59654},"setIdx":0,"setId":1,"iconIdx":229},{"icon":{"paths":["M886.087 808.153h-748.175c-18.084-0.115-33.754-10.339-41.649-25.303l-0.125-0.259c-3.18-6.148-5.042-13.416-5.042-21.125 0-10.612 3.535-20.4 9.492-28.247l-0.085 0.116 374.087-498.782c8.871-10.966 22.328-17.919 37.409-17.919s28.537 6.953 37.338 17.828l0.069 0.090 374.087 498.782c5.874 7.732 9.407 17.518 9.407 28.131 0 7.706-1.864 14.977-5.165 21.386l0.123-0.262c-8.019 15.222-23.689 25.45-41.757 25.562h-0.016zM231.436 714.631h561.131l-280.564-374.087z"],"attrs":[{}],"tags":["caret-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":23,"id":149,"name":"caret-up","prevSize":80,"code":59655},"setIdx":0,"setId":1,"iconIdx":230},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["search"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":24,"id":150,"name":"search","prevSize":80,"code":59656},"setIdx":0,"setId":1,"iconIdx":231},{"icon":{"paths":["M367.973 877.709c-12.364-0.429-23.354-5.979-30.973-14.583l-0.039-0.045-292.569-292.569c-12.118-7.943-20.011-21.462-20.011-36.822 0-24.237 19.649-43.886 43.886-43.886 16.258 0 30.454 8.843 38.038 21.983l0.112 0.213 261.556 259.802 612.637-610.884c6.739-4.429 14.999-7.063 23.874-7.063 24.237 0 43.886 19.649 43.886 43.886 0 7.977-2.129 15.457-5.848 21.903l0.112-0.213-643.651 643.651c-7.658 8.649-18.646 14.2-30.94 14.626l-0.073 0.001z"],"attrs":[{}],"tags":["check"],"grid":16,"isMulticolor":false,"isMulticolor2":false,"width":1088},"attrs":[{}],"properties":{"order":25,"id":151,"name":"check","prevSize":80,"code":59657},"setIdx":0,"setId":1,"iconIdx":232},{"icon":{"paths":["M426.842 696.51c-11.361-0.894-21.337-6.182-28.346-14.147l-0.040-0.047-170.317-170.317c-2.623-5.368-4.157-11.68-4.157-18.35 0-23.516 19.064-42.579 42.579-42.579 6.67 0 12.983 1.534 18.603 4.269l-0.253-0.11 140.228 140.228 484.268-480.861c5.368-2.623 11.68-4.157 18.35-4.157 23.516 0 42.579 19.064 42.579 42.579 0 6.67-1.534 12.983-4.269 18.603l0.11-0.253-510.95 510.95c-7.048 8.010-17.025 13.299-28.241 14.184l-0.146 0.009z","M512 1022.95c-191.476-0.317-358.217-105.908-445.47-261.972l-1.328-2.587c-31.938-55.832-53.595-121.525-60.581-191.54l-0.166-2.053c-1.75-15.87-2.746-34.274-2.746-52.91 0-191.528 105.381-358.444 261.324-445.927l2.575-1.327c55.832-31.938 121.525-53.595 191.54-60.581l2.053-0.166c16.139-1.838 34.846-2.885 53.796-2.885 52.724 0 103.554 8.111 151.308 23.156l-3.563-0.969c19.66 4.032 34.236 21.19 34.236 41.754 0 23.516-19.064 42.579-42.579 42.579-5.793 0-11.317-1.158-16.352-3.253l0.282 0.104c-37.278-11.625-80.141-18.322-124.567-18.322-16.116 0-32.026 0.881-47.685 2.599l1.933-0.172c-60.018 6.3-114.675 24.271-163.354 51.622l2.121-1.095c-49.065 27.393-90.495 62.305-124.293 103.695l-0.607 0.765c-59.499 72.093-95.584 165.431-95.584 267.195 0 16.071 0.899 31.933 2.652 47.536l-0.174-1.916c6.3 60.018 24.271 114.675 51.622 163.354l-1.095-2.121c27.393 49.065 62.305 90.495 103.695 124.293l0.765 0.607c72.093 59.499 165.431 95.584 267.195 95.584 16.071 0 31.933-0.899 47.536-2.652l-1.916 0.174c60.018-6.3 114.675-24.271 163.354-51.622l-2.121 1.095c49.065-27.393 90.495-62.305 124.293-103.695l0.607-0.765c59.499-72.093 95.584-165.431 95.584-267.195 0-16.071-0.899-31.933-2.652-47.536l0.174 1.916c-0.129-1.276-0.204-2.758-0.204-4.258 0-24.725 20.044-44.769 44.769-44.769 23.226 0 42.321 17.686 44.551 40.326l0.015 0.185c1.73 15.781 2.716 34.082 2.716 52.613 0 191.743-105.619 358.82-261.851 446.222l-2.584 1.328c-56.511 33.262-123.144 55.912-194.296 63.403l-2.137 0.182c-17.6 0-35.767 0-52.798 0z"],"attrs":[{},{}],"tags":["check-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":26,"id":152,"name":"check-circle","prevSize":80,"code":59658},"setIdx":0,"setId":1,"iconIdx":233},{"icon":{"paths":["M586.932 512l312.455-312.455c10.394-9.708 16.875-23.488 16.875-38.79 0-29.283-23.737-53.020-53.020-53.020-15.299 0-29.084 6.481-38.759 16.841l-0.027 0.029-312.455 312.455-312.455-312.455c-9.444-8.816-22.161-14.228-36.145-14.228-29.283 0-53.020 23.737-53.020 53.020 0 13.985 5.412 26.701 14.261 36.174l-0.027-0.029 312.455 312.455-312.455 312.455c-9.582 9.589-15.504 22.839-15.504 37.468s5.926 27.874 15.504 37.469v0c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0l312.455-312.455 312.455 312.455c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0c9.582-9.589 15.504-22.839 15.504-37.468s-5.926-27.874-15.504-37.469v0z"],"attrs":[{}],"tags":["times"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":265,"id":153,"name":"times","prevSize":80,"code":59659},"setIdx":0,"setId":1,"iconIdx":234},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M341.333 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l341.333-341.333c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-341.333 341.333c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M682.667 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-341.337-341.337c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 341.333 341.333c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{},{}],"tags":["times-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":28,"id":154,"name":"times-circle","prevSize":80,"code":59660},"setIdx":0,"setId":1,"iconIdx":235},{"icon":{"paths":["M559.485 464.515v-395.695c0-26.223-21.257-47.485-47.485-47.485s-47.485 21.257-47.485 47.485v0 395.695h-395.695c-26.223 0-47.485 21.257-47.485 47.485s21.257 47.485 47.485 47.485v0h395.695v395.695c0.352 26.082 21.403 47.133 47.447 47.485h0.033c26.223 0 47.485-21.257 47.485-47.485v0-395.695h395.695c26.223 0 47.485-21.257 47.485-47.485v0c-0.352-26.082-21.403-47.133-47.447-47.485h-0.033z"],"attrs":[{}],"tags":["plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":35,"id":155,"name":"plus","prevSize":80,"code":59661},"setIdx":0,"setId":1,"iconIdx":236},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["plus-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":36,"id":156,"name":"plus-circle","prevSize":80,"code":59662},"setIdx":0,"setId":1,"iconIdx":237},{"icon":{"paths":["M967.085 568.886h-910.171c-31.417 0-56.886-25.469-56.886-56.886s25.469-56.886 56.886-56.886v0h910.171c31.417 0 56.886 25.469 56.886 56.886s-25.469 56.886-56.886 56.886v0z"],"attrs":[{}],"tags":["minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":41,"id":157,"name":"minus","prevSize":80,"code":59663},"setIdx":0,"setId":1,"iconIdx":238},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["minus-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":42,"id":158,"name":"minus-circle","prevSize":80,"code":59664},"setIdx":0,"setId":1,"iconIdx":239},{"icon":{"paths":["M1024 512c0 282.769-229.231 512-512 512s-512-229.231-512-512c0-282.769 229.231-512 512-512s512 229.231 512 512z"],"attrs":[{}],"tags":["circle-on","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":47,"id":159,"name":"circle-on","prevSize":80,"code":59665},"setIdx":0,"setId":1,"iconIdx":240},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{}],"tags":["circle-off","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":48,"id":160,"name":"circle-off","prevSize":80,"code":59666},"setIdx":0,"setId":1,"iconIdx":241},{"icon":{"paths":["M512 761.297c-0.059 0-0.133 0-0.206 0-12.080 0-23.010-4.935-30.879-12.901l-410.613-410.613c-7.95-7.958-12.867-18.951-12.867-31.089 0-24.283 19.676-43.971 43.952-43.993h821.216c23.565 0.924 42.321 20.252 42.321 43.961 0 11.301-4.262 21.608-11.268 29.401l0.035-0.040-410.607 410.607c-7.678 8.671-18.694 14.235-31.015 14.662l-0.074 0.003zM207.563 350.691l304.437 304.437 304.437-304.437z"],"attrs":[{}],"tags":["sort-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":51,"id":161,"name":"sort-down","prevSize":80,"code":59667},"setIdx":0,"setId":1,"iconIdx":242},{"icon":{"paths":["M921.888 760.859h-819.773c-0.088 0-0.19 0.002-0.294 0.002-18.019 0-33.47-11-40.004-26.651l-0.105-0.287c-1.856-4.68-2.932-10.103-2.932-15.777 0-11.845 4.689-22.595 12.313-30.495l409.875-409.875c7.945-7.935 18.917-12.844 31.034-12.844s23.089 4.908 31.035 12.844v0l409.888 409.888c7.91 7.94 12.801 18.896 12.801 30.993 0 6.145-1.262 11.997-3.542 17.308l0.108-0.285c-7.032 14.993-22.001 25.192-39.352 25.192-0.369 0-0.739-0.004-1.106-0.013l0.055 0.002zM208.099 673.027h607.804l-303.901-303.901z"],"attrs":[{}],"tags":["sort-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":52,"id":162,"name":"sort-up","prevSize":80,"code":59668},"setIdx":0,"setId":1,"iconIdx":243},{"icon":{"paths":["M841.149 443.428h-658.298c-0.083 0-0.179 0.001-0.275 0.001-16.883 0-31.357-10.305-37.478-24.968l-0.099-0.269c-2.034-4.708-3.217-10.189-3.217-15.949 0-11.333 4.583-21.597 11.994-29.037l329.147-329.147c7.443-7.433 17.723-12.033 29.075-12.033s21.632 4.598 29.076 12.033v0l329.149 329.149c7.411 7.439 11.993 17.704 11.993 29.036 0 5.757-1.183 11.24-3.319 16.216l0.101-0.267c-6.22 14.932-20.695 25.236-37.577 25.236-0.097 0-0.193 0-0.29-0.001h0.015zM282.145 361.141h459.712l-229.855-229.855z","M512 992.009c-0.056 0-0.125 0-0.191 0-11.299 0-21.519-4.615-28.879-12.065l-329.153-329.153c-7.411-7.439-11.993-17.704-11.993-29.036 0-5.757 1.183-11.24 3.319-16.216l-0.101 0.267c6.22-14.932 20.695-25.236 37.577-25.236 0.097 0 0.193 0 0.29 0.001h658.283c0.083 0 0.179-0.001 0.275-0.001 16.883 0 31.357 10.305 37.478 24.968l0.099 0.269c2.034 4.708 3.217 10.189 3.217 15.949 0 11.333-4.583 21.597-11.994 29.037l-329.147 329.147c-7.363 7.453-17.584 12.068-28.883 12.068-0.067 0-0.135 0-0.202 0h0.010zM282.145 662.859l229.855 229.855 229.855-229.855z"],"attrs":[{},{}],"tags":["sort"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":54,"id":163,"name":"sort","prevSize":80,"code":59669},"setIdx":0,"setId":1,"iconIdx":244},{"icon":{"paths":["M776.253 1023.989c-13.652-0.164-25.983-5.679-35.022-14.542l-462.434-462.434c-8.953-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l462.442-462.442c8.959-8.925 21.319-14.443 34.966-14.443 6.933 0 13.536 1.424 19.529 3.996l-0.322-0.122c17.981 7.491 30.389 24.922 30.389 45.252 0 0.116 0 0.233-0.002 0.348v-0.019 924.882c0 0.099 0.002 0.215 0.002 0.331 0 20.33-12.41 37.761-30.067 45.132l-0.324 0.119c-5.648 2.471-12.229 3.927-19.143 3.964h-0.014zM383.839 512l342.867 342.867v-685.734z","M247.747 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.511 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":29,"id":164,"name":"step-backward","prevSize":80,"code":59670},"setIdx":0,"setId":1,"iconIdx":245},{"icon":{"paths":["M247.747 1023.989c-6.929-0.037-13.509-1.493-19.478-4.087l0.321 0.124c-17.981-7.491-30.389-24.922-30.389-45.252 0-0.116 0-0.231 0.002-0.348v0.019-924.882c0-0.099-0.002-0.215-0.002-0.331 0-20.33 12.41-37.761 30.067-45.132l0.324-0.119c5.67-2.449 12.271-3.874 19.206-3.874 13.649 0 26.007 5.518 34.967 14.444l462.441 462.441c8.953 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-462.442 462.442c-9.030 8.855-21.362 14.37-34.982 14.533h-0.031zM297.295 169.133v685.734l342.867-342.867z","M776.253 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.513 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":30,"id":165,"name":"step-forward","prevSize":80,"code":59671},"setIdx":0,"setId":1,"iconIdx":246},{"icon":{"paths":["M325.818 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M325.818 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["th-large"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":34,"id":166,"name":"th-large","prevSize":80,"code":59672},"setIdx":0,"setId":1,"iconIdx":247},{"icon":{"paths":["M512 1023.983c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 361.361 361.361 361.361-361.361c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":37,"id":167,"name":"arrow-down","prevSize":80,"code":59673},"setIdx":0,"setId":1,"iconIdx":248},{"icon":{"paths":["M445.937 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l396.374-396.374c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-361.361 361.361 361.361 361.361c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":40,"id":168,"name":"arrow-left","prevSize":80,"code":59674},"setIdx":0,"setId":1,"iconIdx":249},{"icon":{"paths":["M578.063 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-0.005-0.005c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l361.361-361.361-361.361-361.361c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":43,"id":169,"name":"arrow-right","prevSize":80,"code":59675},"setIdx":0,"setId":1,"iconIdx":250},{"icon":{"paths":["M908.374 495.484c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-361.366-361.366-361.361 361.361c-8.824 8.239-20.711 13.297-33.777 13.297-27.364 0-49.547-22.183-49.547-49.547 0-13.068 5.058-24.953 13.325-33.806l-0.026 0.029 396.374-396.374c8.963-8.952 21.342-14.491 35.013-14.491s26.049 5.537 35.014 14.491v0l396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":216,"id":170,"name":"arrow-up","prevSize":80,"code":59676},"setIdx":0,"setId":1,"iconIdx":251},{"icon":{"paths":["M974.438 561.547h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 264.265h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 858.829h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{},{}],"tags":["bars"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":215,"id":171,"name":"bars","prevSize":80,"code":59677},"setIdx":0,"setId":1,"iconIdx":252},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":50,"id":172,"name":"arrow-circle-down","prevSize":80,"code":59678},"setIdx":0,"setId":1,"iconIdx":253},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":53,"id":173,"name":"arrow-circle-left","prevSize":80,"code":59679},"setIdx":0,"setId":1,"iconIdx":254},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":55,"id":174,"name":"arrow-circle-right","prevSize":80,"code":59680},"setIdx":0,"setId":1,"iconIdx":255},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":31,"id":175,"name":"arrow-circle-up","prevSize":80,"code":59681},"setIdx":0,"setId":1,"iconIdx":256},{"icon":{"paths":["M512 1023.999c-36.682-0.495-66.288-30.1-66.783-66.735v-623.353c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 623.305c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z","M512 178.087c-36.682-0.495-66.288-30.1-66.783-66.735v-44.569c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 44.521c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z"],"attrs":[{},{}],"tags":["info"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":33,"id":176,"name":"info","prevSize":80,"code":59683},"setIdx":0,"setId":1,"iconIdx":257},{"icon":{"paths":["M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 284.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 355.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{},{}],"tags":["info-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":38,"id":177,"name":"info-circle","prevSize":80,"code":59684},"setIdx":0,"setId":1,"iconIdx":258},{"icon":{"paths":["M980.714 497.352c-0.058 0-0.126 0-0.195 0-9.879 0-18.984-3.304-26.275-8.867l0.106 0.077-442.349-331.615-442.349 331.615c-7.252 5.487-16.423 8.788-26.365 8.788-24.268 0-43.942-19.674-43.942-43.942 0-14.326 6.856-27.052 17.467-35.074l0.11-0.080 468.714-351.536c7.252-5.487 16.423-8.788 26.365-8.788s19.113 3.301 26.475 8.868l-0.11-0.080 468.714 351.536c9.942 8.121 16.239 20.379 16.239 34.109 0 9.129-2.783 17.608-7.548 24.634l0.099-0.154c-7.474 11.934-20.322 19.902-35.068 20.503l-0.085 0.003z","M863.536 966.067h-703.071c-24.136-0.325-43.617-19.805-43.942-43.91v-556.629c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 512.656h615.187v-512.656c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 556.598c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z","M629.178 966.067c-24.136-0.325-43.617-19.805-43.942-43.91v-366.215h-146.474v366.183c0 24.268-19.674 43.942-43.942 43.942s-43.942-19.674-43.942-43.942v0-410.125c0.325-24.136 19.805-43.617 43.91-43.942h234.389c24.136 0.325 43.617 19.805 43.942 43.91v410.157c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z"],"attrs":[{},{},{}],"tags":["home"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":214,"id":178,"name":"home","prevSize":80,"code":59685},"setIdx":0,"setId":1,"iconIdx":259},{"icon":{"paths":["M512 1023.985c-282.573-0.249-511.548-229.377-511.548-511.985 0-282.761 229.224-511.985 511.985-511.985 136.039 0 259.684 53.057 351.374 139.607l-0.248-0.232c7.709 7.718 12.478 18.378 12.478 30.15s-4.768 22.431-12.478 30.151v0c-7.654 7.849-18.334 12.718-30.15 12.718s-22.495-4.869-30.142-12.709l-0.008-0.009c-76.159-71.371-178.876-115.207-291.832-115.207-235.949 0-427.224 191.274-427.224 427.224s191.274 427.224 427.224 427.224c235.845 0 427.056-191.106 427.224-426.913v-0.016c0-23.563 19.102-42.665 42.665-42.665s42.665 19.102 42.665 42.665v0c0 282.761-229.224 511.985-511.985 511.985v0z"],"attrs":[{}],"tags":["spinner"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":44,"id":179,"name":"spinner","prevSize":80,"code":59686},"setIdx":0,"setId":1,"iconIdx":260}],"height":1024,"metadata":{"name":"primeicons","url":"https://github.com/primefaces/primeicons","designer":"","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"pi-","metadata":{"fontFamily":"primeicons","majorVersion":1,"minorVersion":0,"copyright":"PrimeTek Informatics","designer":"","description":"Icon Library for Prime UI Libraries","fontURL":"https://github.com/primefaces/primeicons","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true,"showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true,"includeMetadata":true},"imagePref":{"prefix":"pi-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","height":32,"columns":16,"margin":16,"name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"PrimeIcons":"NTQ3YTNmNDcyNzcwZTk0M2UzYzcxODljOTAyZTYyODEjMSMxNjYyOTc4NjMyIyMjNTU3N2Y2ZGJiZTc3"},"showGrid":true}}
\ No newline at end of file
diff --git a/apps/labs/public/favicon.ico b/apps/labs/public/favicon.ico
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..96283e6b4efe0cfff38bae1e700687bac73fd54e 100644
GIT binary patch
literal 15406
zcmeHO3v^V)8D45tdRkk0j<vqQ>Zu4SD9R%wJNHG4r!7`(4A~7&OHd%$-Mqstxw{(_
z@JY0VA_{^E8jv7Kb~gy36|4`GiikbRLwSe-QeJ|BVf+2}?j(2b-rYP{OV6=;&YZdT
z&dmRR^Upss|NQf>&DO<smaSVi8}c5uyMJi2^|#q<J$mTxJ%4Vq&BM38ePiXnw%K0)
zh0WFzb<hMY^zX<z^6L@|3lAWzqZA0U?DjU!pVRN`V3?IwN5m*kpm8GDkl9aN!+<pT
zZ|W-Pl3;}WH5d_g@wPk%&8I-8HWdw&zlOF8gAs8LZ`YEC*#eY(j^s^-0R5bf@^Y*8
zL^lw!&kcs`W3AeIo3gF||M!tr^7d5=#Ax6}L6ZZuCoI7x_6+*a)ks5a8gv25_iE*_
z_Q8-CEuNr6D}r)dd#z4HXo_neVLf?2!GCoiBK&Le!&20fHzevAp+wci;2XBjst&h|
z$@Zk}Bf@rn9h>4At$g5iDq%_`CDKOpJqX%g#`svar@o_a-8`eD;Vy>~Mw;ewDr-Sw
zv8O;D>T9rHgF3rGBfdTQABeD-fw1r-WOl%lr)b!V#whoBobub$kD@;-(ZC8}C;Bmu
z#>t4kIwXwJ<bwW{xMi&^cs5r(E!LEj$TKxLfJViAk}k`za4OJ{Ie^murg_xfHzy`D
z)O9=LRe=!O6sQyCf!0Bd#z-aVU!u#9bllMXW6(HUbdS8v?NHuA{avM1VvUZ89dwVC
ziN^bGr@W!eC+)ykA46Kf+pBB3cbzyq<6`0od2Mw&r27N)y1oz%?>ymQw0#_DGs@>=
zXWPy)>k!d$<to1gpJPR%m6w6%5Yj11fd;n8<5d2Q_8%2E*`=IsI&xZPdLRi%v_7Tl
zN9#y+6Z2Jv*@MOuY!dsWi$^j##2a(y1(LlvVcZU=jqIjmZPW2RKy%fCH~)q)-9I&)
zbx}Ha8EL31*!h8wAd}8;UdeOeMOC%^prRoYJJ9L>{9(aGa|-f(Jvq<#@qnDN&}RL#
z)5M_j#$0I<!C&0aUjEfhS-+vWkl8z(#en@JpUb<m{5b}zHKDDMfxK&}J?&X)6YJZd
z{x@bxXupWdOI?|9aa;V%<-{N9y+ETdIM8Ijr6c?U5&IB-DC;il2Y!-aXZZU=!d+^Z
zDZubqXXLMq9oDE|h~?cI%7o?Bv0pG^cYyaXZ48p=pZ^8Yd)<!UvexpL{%LI^tYOC5
zjPu&fJ!<O$xlQG|myEw=hfI>AQ|86bJu`o;J?tOMi7VQ|P~3F=kFmEVtglw`_txlp
zGTB0eMdQoYMnnJkcgS)ttqZ9zz{dO|uW!uF`~%CysAsHhi_rd0HkGkHpZ{^+bZoDr
zgMYbSw`I8f0-G!vs58jGqW>{0o#P*70qDbHL_=MKzQ^pa7XFYyc@^wY*jcEzKN!xq
z+F(-}Wz$Li!ogs8aBr-q+qfNP<gGs|QP_1+%v&cgXm(pV<PTcAu$L^wd|XtbvZ1h}
zw!qf%BDswT_T7`k6Xd!;IO}(4vkvQ3<aGHHZ#BZM;yOe7YGIBbyYl3@z!7o}7keYG
zp=a1}RRuZXm8jb#R=*2$ezpliyX9}>?QIy;y?CPR2aoMWxfhL4GCj^AnjKExfukAe
zRo~;{NSe!p#e|_v{;>78VVrTM5U+*|M*_#{s^`RJI<FXcYtIhlI`DhV{JqR4W8V@E
zgU)>H1){c=hJ_Ghu_`7T%ZxCqO<5AwKb$GWBV2Z6Wv2P2_w{``mwIxQNoM{uKS&pO
zdtliPdI2?*dA%j$*vD#|b9ft`Pnj=5t~jrOr!kT4p?;ljw%7+UIAScL=MooW(0Z=Z
zut1ila9;aEG7P}^3Fk{WwJ)AzA$O<pb@@Z~>p<@$(lngs=9u}@yLXmpUDRj_k67`q
zhK?C|)3f(4t>-QyeVkWnu}@TJ^~1s!p7BzD$l#Q*4m}r*!`{%)Iu3e$alI9P+NX{D
zsU5X9)70PPq0rNhczx)p1N_%n)vcUil0jHJsfPOh)QkaZ%p6XS^2+;@^<DWiu-q;h
z>!R)2LZ_5x#osduXH(5iXq5xjl%Zz+up>5;en1Bf;XJ*?Jz9PPeX7UUJ_UI{i1lq2
z(Z^Xdfcdc?o<D4?+AJD_y-4pu|AWY9c^vZd?mT%_SwQ+HXzvE?uc;mO*?Z0WC)W?W
zq#$(Fx%A!TkZz&%%;l74gH9cI{=?&xZo~5yPr29!w7xR(*J%o<D^Ew;Y}9)hX(ie(
z#5|b+TJEvKbQ_3dPv;pkf8%?xL+p<JZa2yk@9S_z9*8+N-ppI$9~O=jRkEIwhKspz
z?Vy)5SB>=B^K6Bo&?(;x8NOx3U;7poCZexvIe*BYQ@lC87=~>`hZ5G5H_`uQO;1Qy
zOv%4Y_#E|U51{(Zo#{8{{e8*FPXZUMZ8TCk{Ujil^hbV0_)Y{Q#VW;Y4sJ&zrE?|<
zDqkG%OYG~5pnE5h%>$HeP$O9xX98a;p0xG=+pDmRPbR~ze;1nJ_uQm5X2NU#zws+w
zo^c-b$cEIoTlW~MhqdY*wT{ts!x{Z$*V@j44LBCEZ?Wmx+Yj_%wmQFi*E7)p^`*g=
zlia<Ln=T861o9=f!~bR)1Nfi)4QxdI`hI7B*ZxVPjL4qT&P`#lH_qLUwpZR(_0aE?
zWFLUu?m#G$(K*P-E8WjNoL|8+44ddHwVquIOiQeAwfkFGe8bz+pYDN9!EW66U9L^E
zc0*3<i5JqbbmFJ}YJGrD41J*M#<c#(cMaRHfq2Atr5!&XGx+g8i}{1nw$IUh6UVOe
z5%%E>bv2$(TYqRR0PX!8zcvmyr>1jlg1>vBf&Ni7Y%kRAThf8Qfn7*?kF&#;79Q{s
zKlJ**AEir)2tUaMX(#NOT%2`pCjWc7<PUk=j`<{j{sxUtn(<dh*gc>N8+)+ej|fia
z=)2IL-s!*}TYnBgCRNb;LF8w}-nKBE@((l!1L!Un<M0UjaTF=7^EW2*ud%*8H#ywz
zB3gsg+Fs|ROMkTc_7KDUtndx#XnXME?2o&A+H)=Z@F>%CJ+}U9&#`Y<=hng>)XN5c
zdphv@>Ie71crL^Fti`r$4}S7xmrar2Bj^}@?HovFQJf=A7eDRkp!X4tZ=8(U&>!+o
zc^`wH1o!V{lgZzeqz@MIkBu+Z3WnGPHm);$Al)N>8u;!s;^xn7$=|;WaS4Sn-y(eY
zzPY4x@%EcWD+&G<KDZ}>pR<Z=#g6m?>&qR$c#zXE=c(}vQSxoI-UTSp(sCKG7#+t?
ze8KA|bYNl!@dwSAjqj=OlYiE2_9^2XzH5EX^0`ZS8}e`A85ZaKH}D7Q#b{|!qEDLq
zK8Q6*9D_5AA2#pfTt=kd@L5Oc&Wih~j5+zbE2c_ucY0XY*3cP<(@2`9U;ZcQF4>2>
zC-Br_$7roD@sRAT@oQs%yFu+<6n%vb9>-qmru(ZTcVeyjmS+4UC-DC;c6O?yeQok1
z*7pg<F`&McO~x2N&(MCgH<EQ3*2&dL<<95IcYvRG!e)Gy<TvGM;Z3@CjrkT2Lst%3
zCWms|Ge(=sh^ZRf2lh@O`jOx>PUue>@q^zH=&efYGM;gkWaHeEm;#^ZF8FaLxN=wz
zin+2%6P?nH@MTBb<E20O8U|2oTo~zr>XmE+=F;W_+-a6Sa36ro?>4PvWT$kQkj*YE
z94=j7;1Ek(x$+FemfeGIKXJkDP46DW_7ynfTiuS#UyT~Yx~kFmvpQlb$bQ~x*@ra9
zAGG)QBW#QjJH^Gh9IP+-qv6M22L0JXK5AX(m9@orLoPtsGkgv}r%s~$J>0X-EX<Yf
z$iFQvrm73wpMcND34J(C{GfS+;z-F~MfeM9t~wWIj$!3KDFQtEkWO%nt$8ATUPgVy
z-O15nm%K$?BHZr{WzhYw_VYE`uS?LSPT+^Gz#bQNVDE0E_z8;h)bHw91<^-bWHZ@k
z9FsZ6c&sVPW#>cR=bOt~-edbR)*#sBtZ^!AF7hu0R@et&O<N59TQ%85*xz{n+LIGr
ze~5Y15F1FoF^p#c=q&-QeKfXo2UzB{-e(D$J5Tu*GOo$b?{_xlL>``-TQH;C_>BAW
z*f{}oBf__k%|`Hf3~{Ts<31{r#+}Zr?ZM6KP<*In!$nvGv=Aq(pIf+I(jHV~h*L4*
z(Vh|eNq23)FpTCk@NZ10)6x$mT3&6s%Zv!k*wc=H_a|6mXZcnRxQ1hEE2o$!w0oOl
zHRojG&^<oc1IaK!XWsM8)nbP~P;1#$6jz*T3~28lyU)_brt!wOkUq49oyy6V0sNnv
zar1YQeKH$|_opyda^akxLo%c|XUtUv`1kYj#2jOQI2+oRIUjS5KK#8s{!zrqi~`@|
z=Jxa+Y=qvxj!Y$ck7LOGf_rHU*%Och`CN8XKEbX9{x=hG8^#cJpD{MV%pY`i)7(xq
z2HJlKnuKZQwi<TWT$K-6-<@+@z<3J#*25In0)C(B?GS5+^9Su`RL<*K<)x(<1IWml
zzi<$1$?sF)FMp}u&oI{;t=g-#h`G2s`Fcrsux1`Aa4G|_&yl}~`$}<lFD@@vSr3%&
zw8Gu`O~JX@8o$1Vu!>ap)#Vu%gKy%0F%XBR$1SABkG*y^?YW>4X9wW@0On?Icdl5`
ziq)VyEo%|ZIr)fdfUL|iBza&CEKC*iIz@{Qj`uYX9g5*E8lM_FbmL?pVj$Fd`!F+a
zdWYRKwJ>||<*2tOWgoDo(f<w-Vi#%tA%2YRIg^b6?t-e#ywN6F?w2g*EU?f%rR`0~
z_qoQ3cGO>Hra|wR&%4TM*rk{UPoS=L?~k19p@cb61U*%sw;Y2n)R&UqU4qAYotG9%
z@Fm#^Rg1(`u93>K_>aRw_-{uk*7i}J;cO_`Z4(gZ2Ax?!^28dsD!AN!1Mu&##*aIe
z5Gx_O4d<9cz`Yl7a*`G+huoDT=eQhlA?Qq{IJ(N|Vm);JEztWE^FOv8;{G*NoK(nu
zgSRg0G9Iszo!#pkioMhAVoB6uanJ|wnTfOnHt{&v$K!zIcwwG!2l$MKj%u+mN&4`i
z%V)m^u^gK)mzPe;k+RU1WHZa1D^Eep*%*uu{?j4d2-~SA+1Z+|z?Z15>C=twjaB&D
zlj)E7yX#ig4SVOK;PDMo!Z>3*HoF|6oz5hcHQJiL)CxEM23a14O>rk^RqO2}icyTS
zjffA@3F;r@mQ>fxSd+ce8N{8dJc)S31bYE|zH&LG@dY^<R|c2kZV$169II6h{HHKR
z3yM^Be!e!B<=y7FtmBtor5KrHm^%7h?}I#_<dVS8q0~_f6V{jMR+!D-(1)#b7YG|;
zasn+HV~6ri;hpT-j$&-9z9(C{1iG}?JPsJ=FN%vriSFIZSS{ZXXH>OV@S68BUGB=u
z1x~3~TUa_<9@8aS|0tG;r*E-dZ-HLG=51f{FJ(s!?PGN0SJJ67o$cfQ+kL+z@E>Dh
BEtUWP

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/apps/labs/public/robots.txt b/apps/labs/public/robots.txt
deleted file mode 100644
index 8b1378917..000000000
--- a/apps/labs/public/robots.txt
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/apps/labs/public/scripts/prism.js b/apps/labs/public/scripts/prism.js
new file mode 100644
index 000000000..add4d9afd
--- /dev/null
+++ b/apps/labs/public/scripts/prism.js
@@ -0,0 +1,11 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+scss+typescript&plugins=toolbar+copy-to-clipboard */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
+!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
+Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss;
+!function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var s=e.languages.extend("typescript",{});delete s["class-name"],e.languages.typescript["class-name"].inside=s,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:s}}}}),e.languages.ts=e.languages.typescript}(Prism);
+!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var e=[],t={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var r;r="function"==typeof a?a:function(e){var t;return"function"==typeof a.onClick?((t=document.createElement("button")).type="button",t.addEventListener("click",(function(){a.onClick.call(this,e)}))):"string"==typeof a.url?(t=document.createElement("a")).href=a.url:t=document.createElement("span"),a.className&&t.classList.add(a.className),t.textContent=a.text,t},n in t?console.warn('There is a button with the key "'+n+'" registered already.'):e.push(t[n]=r)},r=Prism.plugins.toolbar.hook=function(a){var r=a.element.parentNode;if(r&&/pre/i.test(r.nodeName)&&!r.parentNode.classList.contains("code-toolbar")){var o=document.createElement("div");o.classList.add("code-toolbar"),r.parentNode.insertBefore(o,r),o.appendChild(r);var i=document.createElement("div");i.classList.add("toolbar");var l=e,d=function(e){for(;e;){var t=e.getAttribute("data-toolbar-order");if(null!=t)return(t=t.trim()).length?t.split(/\s*,\s*/g):[];e=e.parentElement}}(a.element);d&&(l=d.map((function(e){return t[e]||n}))),l.forEach((function(e){var t=e(a);if(t){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(t),i.appendChild(n)}})),o.appendChild(i)}};a("label",(function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-label")){var n,a,r=t.getAttribute("data-label");try{a=document.querySelector("template#"+r)}catch(e){}return a?n=a.content:(t.hasAttribute("data-url")?(n=document.createElement("a")).href=t.getAttribute("data-url"):n=document.createElement("span"),n.textContent=r),n}})),Prism.hooks.add("complete",r)}}();
+!function(){function t(t){var e=document.createElement("textarea");e.value=t.getText(),e.style.top="0",e.style.left="0",e.style.position="fixed",document.body.appendChild(e),e.focus(),e.select();try{var o=document.execCommand("copy");setTimeout((function(){o?t.success():t.error()}),1)}catch(e){setTimeout((function(){t.error(e)}),1)}document.body.removeChild(e)}"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",(function(e){var o=e.element,n=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,c=t;c&&!c.hasAttribute(n);)c=c.parentElement;c&&(e[o]=c.getAttribute(n))}return e}(o),c=document.createElement("button");c.className="copy-to-clipboard-button",c.setAttribute("type","button");var r=document.createElement("span");return c.appendChild(r),u("copy"),function(e,o){e.addEventListener("click",(function(){!function(e){navigator.clipboard?navigator.clipboard.writeText(e.getText()).then(e.success,(function(){t(e)})):t(e)}(o)}))}(c,{getText:function(){return o.textContent},success:function(){u("copy-success"),i()},error:function(){u("copy-error"),setTimeout((function(){!function(t){window.getSelection().selectAllChildren(t)}(o)}),1),i()}}),c;function i(){setTimeout((function(){u("copy")}),n["copy-timeout"])}function u(t){r.textContent=n[t],c.setAttribute("data-copy-state",t)}})):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();
diff --git a/apps/labs/scripts/build-presetdoc.js b/apps/labs/scripts/build-presetdoc.js
new file mode 100644
index 000000000..443bcdba5
--- /dev/null
+++ b/apps/labs/scripts/build-presetdoc.js
@@ -0,0 +1,36 @@
+const fs = require('fs');
+const path = require('path');
+
+const folderPath = path.join(__dirname, '../assets/styles/primevue');
+const jsonFilePath = path.join(__dirname, '../doc/common/presetdoc/index.json');
+
+fs.readdir(folderPath, (err, files) => {
+    if (err) {
+        return console.error(err);
+    }
+
+    const jsonObject = {};
+
+    files.forEach((file) => {
+        const filePath = path.join(folderPath, file);
+
+        if (path.extname(file) === '.css' && !file.startsWith('components')) {
+            const fileContent = fs.readFileSync(filePath, 'utf-8');
+            const fileName = path.parse(file).name;
+
+            jsonObject[fileName] = fileContent;
+        }
+    });
+
+    const dirPath = path.dirname(jsonFilePath);
+
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+    }
+
+    fs.writeFile(jsonFilePath, JSON.stringify(jsonObject, null, 2), (err) => {
+        if (err) {
+            return console.error(err);
+        }
+    });
+});
diff --git a/apps/labs/scripts/prebuild.js b/apps/labs/scripts/prebuild.js
new file mode 100644
index 000000000..340594999
--- /dev/null
+++ b/apps/labs/scripts/prebuild.js
@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+
+const rootDir = path.resolve(__dirname, '../');
+const workspaceDir = path.resolve(__dirname, '../../../');
+
+const pkg = path.resolve(rootDir, 'package.json');
+
+const pkgJson = require(pkg);
+const packageJson = require(path.resolve(workspaceDir, 'package.json'));
+
+pkgJson.version = packageJson.version;
+pkgJson.author = packageJson.author;
+pkgJson.homepage = packageJson.homepage;
+pkgJson.license = packageJson.license;
+pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
+pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
+pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
+
+fs.writeFileSync(pkg, JSON.stringify(pkgJson, null, 4));
diff --git a/apps/labs/server/tsconfig.json b/apps/labs/server/tsconfig.json
deleted file mode 100644
index b9ed69c19..000000000
--- a/apps/labs/server/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../.nuxt/tsconfig.server.json"
-}
diff --git a/apps/labs/service/CarService.js b/apps/labs/service/CarService.js
new file mode 100644
index 000000000..fb49a705c
--- /dev/null
+++ b/apps/labs/service/CarService.js
@@ -0,0 +1,38 @@
+export const CarService = {
+    brands: ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'],
+
+    colors: ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'],
+
+    generateCar(id) {
+        return {
+            id,
+            vin: this.generateVin(),
+            brand: this.generateBrand(),
+            color: this.generateColor(),
+            year: this.generateYear()
+        };
+    },
+
+    generateVin() {
+        let text = '';
+        let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (let i = 0; i < 5; i++) {
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+
+        return text;
+    },
+
+    generateBrand() {
+        return this.brands[Math.floor(Math.random() * Math.floor(10))];
+    },
+
+    generateColor() {
+        return this.colors[Math.floor(Math.random() * Math.floor(7))];
+    },
+
+    generateYear() {
+        return 2000 + Math.floor(Math.random() * Math.floor(19));
+    }
+};
diff --git a/apps/labs/service/CountryService.js b/apps/labs/service/CountryService.js
new file mode 100755
index 000000000..92c7fa42f
--- /dev/null
+++ b/apps/labs/service/CountryService.js
@@ -0,0 +1,252 @@
+export const CountryService = {
+    getData() {
+        return [
+            { name: 'Afghanistan', code: 'AF' },
+            { name: 'Albania', code: 'AL' },
+            { name: 'Algeria', code: 'DZ' },
+            { name: 'American Samoa', code: 'AS' },
+            { name: 'Andorra', code: 'AD' },
+            { name: 'Angola', code: 'AO' },
+            { name: 'Anguilla', code: 'AI' },
+            { name: 'Antarctica', code: 'AQ' },
+            { name: 'Antigua and Barbuda', code: 'AG' },
+            { name: 'Argentina', code: 'AR' },
+            { name: 'Armenia', code: 'AM' },
+            { name: 'Aruba', code: 'AW' },
+            { name: 'Australia', code: 'AU' },
+            { name: 'Austria', code: 'AT' },
+            { name: 'Azerbaijan', code: 'AZ' },
+            { name: 'Bahamas', code: 'BS' },
+            { name: 'Bahrain', code: 'BH' },
+            { name: 'Bangladesh', code: 'BD' },
+            { name: 'Barbados', code: 'BB' },
+            { name: 'Belarus', code: 'BY' },
+            { name: 'Belgium', code: 'BE' },
+            { name: 'Belize', code: 'BZ' },
+            { name: 'Benin', code: 'BJ' },
+            { name: 'Bermuda', code: 'BM' },
+            { name: 'Bhutan', code: 'BT' },
+            { name: 'Bolivia', code: 'BO' },
+            { name: 'Bosnia and Herzegovina', code: 'BA' },
+            { name: 'Botswana', code: 'BW' },
+            { name: 'Bouvet Island', code: 'BV' },
+            { name: 'Brazil', code: 'BR' },
+            { name: 'British Indian Ocean Territory', code: 'IO' },
+            { name: 'Brunei Darussalam', code: 'BN' },
+            { name: 'Bulgaria', code: 'BG' },
+            { name: 'Burkina Faso', code: 'BF' },
+            { name: 'Burundi', code: 'BI' },
+            { name: 'Cambodia', code: 'KH' },
+            { name: 'Cameroon', code: 'CM' },
+            { name: 'Canada', code: 'CA' },
+            { name: 'Cape Verde', code: 'CV' },
+            { name: 'Cayman Islands', code: 'KY' },
+            { name: 'Central African Republic', code: 'CF' },
+            { name: 'Chad', code: 'TD' },
+            { name: 'Chile', code: 'CL' },
+            { name: 'China', code: 'CN' },
+            { name: 'Christmas Island', code: 'CX' },
+            { name: 'Cocos (Keeling) Islands', code: 'CC' },
+            { name: 'Colombia', code: 'CO' },
+            { name: 'Comoros', code: 'KM' },
+            { name: 'Congo', code: 'CG' },
+            { name: 'Congo, The Democratic Republic of the', code: 'CD' },
+            { name: 'Cook Islands', code: 'CK' },
+            { name: 'Costa Rica', code: 'CR' },
+            { name: 'Cote D"Ivoire', code: 'CI' },
+            { name: 'Croatia', code: 'HR' },
+            { name: 'Cuba', code: 'CU' },
+            { name: 'Cyprus', code: 'CY' },
+            { name: 'Czech Republic', code: 'CZ' },
+            { name: 'Denmark', code: 'DK' },
+            { name: 'Djibouti', code: 'DJ' },
+            { name: 'Dominica', code: 'DM' },
+            { name: 'Dominican Republic', code: 'DO' },
+            { name: 'Ecuador', code: 'EC' },
+            { name: 'Egypt', code: 'EG' },
+            { name: 'El Salvador', code: 'SV' },
+            { name: 'Equatorial Guinea', code: 'GQ' },
+            { name: 'Eritrea', code: 'ER' },
+            { name: 'Estonia', code: 'EE' },
+            { name: 'Ethiopia', code: 'ET' },
+            { name: 'Falkland Islands (Malvinas)', code: 'FK' },
+            { name: 'Faroe Islands', code: 'FO' },
+            { name: 'Fiji', code: 'FJ' },
+            { name: 'Finland', code: 'FI' },
+            { name: 'France', code: 'FR' },
+            { name: 'French Guiana', code: 'GF' },
+            { name: 'French Polynesia', code: 'PF' },
+            { name: 'French Southern Territories', code: 'TF' },
+            { name: 'Gabon', code: 'GA' },
+            { name: 'Gambia', code: 'GM' },
+            { name: 'Georgia', code: 'GE' },
+            { name: 'Germany', code: 'DE' },
+            { name: 'Ghana', code: 'GH' },
+            { name: 'Gibraltar', code: 'GI' },
+            { name: 'Greece', code: 'GR' },
+            { name: 'Greenland', code: 'GL' },
+            { name: 'Grenada', code: 'GD' },
+            { name: 'Guadeloupe', code: 'GP' },
+            { name: 'Guam', code: 'GU' },
+            { name: 'Guatemala', code: 'GT' },
+            { name: 'Guernsey', code: 'GG' },
+            { name: 'Guinea', code: 'GN' },
+            { name: 'Guinea-Bissau', code: 'GW' },
+            { name: 'Guyana', code: 'GY' },
+            { name: 'Haiti', code: 'HT' },
+            { name: 'Heard Island and Mcdonald Islands', code: 'HM' },
+            { name: 'Holy See (Vatican City State)', code: 'VA' },
+            { name: 'Honduras', code: 'HN' },
+            { name: 'Hong Kong', code: 'HK' },
+            { name: 'Hungary', code: 'HU' },
+            { name: 'Iceland', code: 'IS' },
+            { name: 'India', code: 'IN' },
+            { name: 'Indonesia', code: 'ID' },
+            { name: 'Iran, Islamic Republic Of', code: 'IR' },
+            { name: 'Iraq', code: 'IQ' },
+            { name: 'Ireland', code: 'IE' },
+            { name: 'Isle of Man', code: 'IM' },
+            { name: 'Israel', code: 'IL' },
+            { name: 'Italy', code: 'IT' },
+            { name: 'Jamaica', code: 'JM' },
+            { name: 'Japan', code: 'JP' },
+            { name: 'Jersey', code: 'JE' },
+            { name: 'Jordan', code: 'JO' },
+            { name: 'Kazakhstan', code: 'KZ' },
+            { name: 'Kenya', code: 'KE' },
+            { name: 'Kiribati', code: 'KI' },
+            { name: 'Korea, Democratic People"S Republic of', code: 'KP' },
+            { name: 'Korea, Republic of', code: 'KR' },
+            { name: 'Kuwait', code: 'KW' },
+            { name: 'Kyrgyzstan', code: 'KG' },
+            { name: 'Lao People"S Democratic Republic', code: 'LA' },
+            { name: 'Latvia', code: 'LV' },
+            { name: 'Lebanon', code: 'LB' },
+            { name: 'Lesotho', code: 'LS' },
+            { name: 'Liberia', code: 'LR' },
+            { name: 'Libyan Arab Jamahiriya', code: 'LY' },
+            { name: 'Liechtenstein', code: 'LI' },
+            { name: 'Lithuania', code: 'LT' },
+            { name: 'Luxembourg', code: 'LU' },
+            { name: 'Macao', code: 'MO' },
+            { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
+            { name: 'Madagascar', code: 'MG' },
+            { name: 'Malawi', code: 'MW' },
+            { name: 'Malaysia', code: 'MY' },
+            { name: 'Maldives', code: 'MV' },
+            { name: 'Mali', code: 'ML' },
+            { name: 'Malta', code: 'MT' },
+            { name: 'Marshall Islands', code: 'MH' },
+            { name: 'Martinique', code: 'MQ' },
+            { name: 'Mauritania', code: 'MR' },
+            { name: 'Mauritius', code: 'MU' },
+            { name: 'Mayotte', code: 'YT' },
+            { name: 'Mexico', code: 'MX' },
+            { name: 'Micronesia, Federated States of', code: 'FM' },
+            { name: 'Moldova, Republic of', code: 'MD' },
+            { name: 'Monaco', code: 'MC' },
+            { name: 'Mongolia', code: 'MN' },
+            { name: 'Montserrat', code: 'MS' },
+            { name: 'Morocco', code: 'MA' },
+            { name: 'Mozambique', code: 'MZ' },
+            { name: 'Myanmar', code: 'MM' },
+            { name: 'Namibia', code: 'NA' },
+            { name: 'Nauru', code: 'NR' },
+            { name: 'Nepal', code: 'NP' },
+            { name: 'Netherlands', code: 'NL' },
+            { name: 'Netherlands Antilles', code: 'AN' },
+            { name: 'New Caledonia', code: 'NC' },
+            { name: 'New Zealand', code: 'NZ' },
+            { name: 'Nicaragua', code: 'NI' },
+            { name: 'Niger', code: 'NE' },
+            { name: 'Nigeria', code: 'NG' },
+            { name: 'Niue', code: 'NU' },
+            { name: 'Norfolk Island', code: 'NF' },
+            { name: 'Northern Mariana Islands', code: 'MP' },
+            { name: 'Norway', code: 'NO' },
+            { name: 'Oman', code: 'OM' },
+            { name: 'Pakistan', code: 'PK' },
+            { name: 'Palau', code: 'PW' },
+            { name: 'Palestinian Territory, Occupied', code: 'PS' },
+            { name: 'Panama', code: 'PA' },
+            { name: 'Papua New Guinea', code: 'PG' },
+            { name: 'Paraguay', code: 'PY' },
+            { name: 'Peru', code: 'PE' },
+            { name: 'Philippines', code: 'PH' },
+            { name: 'Pitcairn', code: 'PN' },
+            { name: 'Poland', code: 'PL' },
+            { name: 'Portugal', code: 'PT' },
+            { name: 'Puerto Rico', code: 'PR' },
+            { name: 'Qatar', code: 'QA' },
+            { name: 'Reunion', code: 'RE' },
+            { name: 'Romania', code: 'RO' },
+            { name: 'Russian Federation', code: 'RU' },
+            { name: 'RWANDA', code: 'RW' },
+            { name: 'Saint Helena', code: 'SH' },
+            { name: 'Saint Kitts and Nevis', code: 'KN' },
+            { name: 'Saint Lucia', code: 'LC' },
+            { name: 'Saint Pierre and Miquelon', code: 'PM' },
+            { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+            { name: 'Samoa', code: 'WS' },
+            { name: 'San Marino', code: 'SM' },
+            { name: 'Sao Tome and Principe', code: 'ST' },
+            { name: 'Saudi Arabia', code: 'SA' },
+            { name: 'Senegal', code: 'SN' },
+            { name: 'Serbia and Montenegro', code: 'CS' },
+            { name: 'Seychelles', code: 'SC' },
+            { name: 'Sierra Leone', code: 'SL' },
+            { name: 'Singapore', code: 'SG' },
+            { name: 'Slovakia', code: 'SK' },
+            { name: 'Slovenia', code: 'SI' },
+            { name: 'Solomon Islands', code: 'SB' },
+            { name: 'Somalia', code: 'SO' },
+            { name: 'South Africa', code: 'ZA' },
+            { name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
+            { name: 'Spain', code: 'ES' },
+            { name: 'Sri Lanka', code: 'LK' },
+            { name: 'Sudan', code: 'SD' },
+            { name: 'Suriname', code: 'SR' },
+            { name: 'Svalbard and Jan Mayen', code: 'SJ' },
+            { name: 'Swaziland', code: 'SZ' },
+            { name: 'Sweden', code: 'SE' },
+            { name: 'Switzerland', code: 'CH' },
+            { name: 'Syrian Arab Republic', code: 'SY' },
+            { name: 'Taiwan, Province of China', code: 'TW' },
+            { name: 'Tajikistan', code: 'TJ' },
+            { name: 'Tanzania, United Republic of', code: 'TZ' },
+            { name: 'Thailand', code: 'TH' },
+            { name: 'Timor-Leste', code: 'TL' },
+            { name: 'Togo', code: 'TG' },
+            { name: 'Tokelau', code: 'TK' },
+            { name: 'Tonga', code: 'TO' },
+            { name: 'Trinidad and Tobago', code: 'TT' },
+            { name: 'Tunisia', code: 'TN' },
+            { name: 'Turkey', code: 'TR' },
+            { name: 'Turkmenistan', code: 'TM' },
+            { name: 'Turks and Caicos Islands', code: 'TC' },
+            { name: 'Tuvalu', code: 'TV' },
+            { name: 'Uganda', code: 'UG' },
+            { name: 'Ukraine', code: 'UA' },
+            { name: 'United Arab Emirates', code: 'AE' },
+            { name: 'United Kingdom', code: 'GB' },
+            { name: 'United States', code: 'US' },
+            { name: 'United States Minor Outlying Islands', code: 'UM' },
+            { name: 'Uruguay', code: 'UY' },
+            { name: 'Uzbekistan', code: 'UZ' },
+            { name: 'Vanuatu', code: 'VU' },
+            { name: 'Venezuela', code: 'VE' },
+            { name: 'Viet Nam', code: 'VN' },
+            { name: 'Virgin Islands, British', code: 'VG' },
+            { name: 'Virgin Islands, U.S.', code: 'VI' },
+            { name: 'Wallis and Futuna', code: 'WF' },
+            { name: 'Western Sahara', code: 'EH' },
+            { name: 'Yemen', code: 'YE' },
+            { name: 'Zambia', code: 'ZM' },
+            { name: 'Zimbabwe', code: 'ZW' }
+        ];
+    },
+
+    getCountries() {
+        return Promise.resolve(this.getData());
+    }
+};
diff --git a/apps/labs/service/CustomerService.js b/apps/labs/service/CustomerService.js
new file mode 100755
index 000000000..22e7fe1ee
--- /dev/null
+++ b/apps/labs/service/CustomerService.js
@@ -0,0 +1,9032 @@
+export const CustomerService = {
+    getData() {
+        return [
+            {
+                id: 1000,
+                name: 'James Butt',
+                country: {
+                    name: 'Algeria',
+                    code: 'dz'
+                },
+                company: 'Benton, John B Jr',
+                date: '2015-09-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 17,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 70663
+            },
+            {
+                id: 1001,
+                name: 'Josephine Darakjy',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Chanay, Jeffrey A Esq',
+                date: '2019-02-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 82429
+            },
+            {
+                id: 1002,
+                name: 'Art Venere',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Chemel, James L Cpa',
+                date: '2017-05-13',
+                status: 'qualified',
+                verified: false,
+                activity: 63,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 28334
+            },
+            {
+                id: 1003,
+                name: 'Lenna Paprocki',
+                country: {
+                    name: 'Slovenia',
+                    code: 'si'
+                },
+                company: 'Feltz Printing Service',
+                date: '2020-09-15',
+                status: 'new',
+                verified: false,
+                activity: 37,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 88521
+            },
+            {
+                id: 1004,
+                name: 'Donette Foller',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Printing Dimensions',
+                date: '2016-05-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 33,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 93905
+            },
+            {
+                id: 1005,
+                name: 'Simona Morasca',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Chapman, Ross E Esq',
+                date: '2018-02-16',
+                status: 'qualified',
+                verified: false,
+                activity: 68,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 50041
+            },
+            {
+                id: 1006,
+                name: 'Mitsue Tollner',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Morlong Associates',
+                date: '2018-02-19',
+                status: 'renewal',
+                verified: true,
+                activity: 54,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 58706
+            },
+            {
+                id: 1007,
+                name: 'Leota Dilliard',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Commercial Press',
+                date: '2019-08-13',
+                status: 'renewal',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 26640
+            },
+            {
+                id: 1008,
+                name: 'Sage Wieser',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Truhlar And Truhlar Attys',
+                date: '2018-11-21',
+                status: 'unqualified',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 65369
+            },
+            {
+                id: 1009,
+                name: 'Kris Marrier',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'King, Christopher A Esq',
+                date: '2015-07-07',
+                status: 'negotiation',
+                verified: false,
+                activity: 3,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 63451
+            },
+            {
+                id: 1010,
+                name: 'Minna Amigon',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Dorl, James J Esq',
+                date: '2018-11-07',
+                status: 'qualified',
+                verified: false,
+                activity: 38,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 71169
+            },
+            {
+                id: 1011,
+                name: 'Abel Maclead',
+                country: {
+                    name: 'Singapore',
+                    code: 'sg'
+                },
+                company: 'Rangoni Of Florence',
+                date: '2017-03-11',
+                status: 'qualified',
+                verified: true,
+                activity: 87,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 96842
+            },
+            {
+                id: 1012,
+                name: 'Kiley Caldarera',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Feiner Bros',
+                date: '2015-10-20',
+                status: 'unqualified',
+                verified: false,
+                activity: 80,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 92734
+            },
+            {
+                id: 1013,
+                name: 'Graciela Ruta',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'Buckley Miller & Wright',
+                date: '2016-07-25',
+                status: 'negotiation',
+                verified: false,
+                activity: 59,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 45250
+            },
+            {
+                id: 1014,
+                name: 'Cammy Albares',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Rousseaux, Michael Esq',
+                date: '2019-06-25',
+                status: 'new',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 30236
+            },
+            {
+                id: 1015,
+                name: 'Mattie Poquette',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Century Communications',
+                date: '2017-12-12',
+                status: 'negotiation',
+                verified: false,
+                activity: 52,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 64533
+            },
+            {
+                id: 1016,
+                name: 'Meaghan Garufi',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Bolton, Wilbur Esq',
+                date: '2018-07-04',
+                status: 'unqualified',
+                verified: false,
+                activity: 31,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 37279
+            },
+            {
+                id: 1017,
+                name: 'Gladys Rim',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'T M Byxbee Company Pc',
+                date: '2020-02-27',
+                status: 'renewal',
+                verified: true,
+                activity: 48,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 27381
+            },
+            {
+                id: 1018,
+                name: 'Yuki Whobrey',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Farmers Insurance Group',
+                date: '2017-12-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 9257
+            },
+            {
+                id: 1019,
+                name: 'Fletcher Flosi',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Post Box Services Plus',
+                date: '2016-01-04',
+                status: 'renewal',
+                verified: true,
+                activity: 19,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 67783
+            },
+            {
+                id: 1020,
+                name: 'Bette Nicka',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Sport En Art',
+                date: '2016-10-21',
+                status: 'renewal',
+                verified: false,
+                activity: 100,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 4609
+            },
+            {
+                id: 1021,
+                name: 'Veronika Inouye',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'C 4 Network Inc',
+                date: '2017-03-24',
+                status: 'renewal',
+                verified: false,
+                activity: 72,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 26565
+            },
+            {
+                id: 1022,
+                name: 'Willard Kolmetz',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Ingalls, Donald R Esq',
+                date: '2017-04-15',
+                status: 'renewal',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 75876
+            },
+            {
+                id: 1023,
+                name: 'Maryann Royster',
+                country: {
+                    name: 'Belarus',
+                    code: 'by'
+                },
+                company: 'Franklin, Peter L Esq',
+                date: '2017-03-11',
+                status: 'qualified',
+                verified: false,
+                activity: 56,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 41121
+            },
+            {
+                id: 1024,
+                name: 'Alisha Slusarski',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Wtlz Power 107 Fm',
+                date: '2018-03-27',
+                status: 'qualified',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 91691
+            },
+            {
+                id: 1025,
+                name: 'Allene Iturbide',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Ledecky, David Esq',
+                date: '2016-02-20',
+                status: 'qualified',
+                verified: true,
+                activity: 1,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 40137
+            },
+            {
+                id: 1026,
+                name: 'Chanel Caudy',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Professional Image Inc',
+                date: '2018-06-24',
+                status: 'new',
+                verified: true,
+                activity: 26,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 21304
+            },
+            {
+                id: 1027,
+                name: 'Ezekiel Chui',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Sider, Donald C Esq',
+                date: '2016-09-24',
+                status: 'new',
+                verified: false,
+                activity: 76,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 60454
+            },
+            {
+                id: 1028,
+                name: 'Willow Kusko',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'U Pull It',
+                date: '2020-04-11',
+                status: 'qualified',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 17565
+            },
+            {
+                id: 1029,
+                name: 'Bernardo Figeroa',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Clark, Richard Cpa',
+                date: '2018-04-11',
+                status: 'renewal',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 17774
+            },
+            {
+                id: 1030,
+                name: 'Ammie Corrio',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Moskowitz, Barry S',
+                date: '2016-06-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 56,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 49201
+            },
+            {
+                id: 1031,
+                name: 'Francine Vocelka',
+                country: {
+                    name: 'Honduras',
+                    code: 'hn'
+                },
+                company: 'Cascade Realty Advisors Inc',
+                date: '2017-08-02',
+                status: 'qualified',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 67126
+            },
+            {
+                id: 1032,
+                name: 'Ernie Stenseth',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Knwz Newsradio',
+                date: '2018-06-06',
+                status: 'renewal',
+                verified: true,
+                activity: 68,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 76017
+            },
+            {
+                id: 1033,
+                name: 'Albina Glick',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Giampetro, Anthony D',
+                date: '2019-08-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 91201
+            },
+            {
+                id: 1034,
+                name: 'Alishia Sergi',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Milford Enterprises Inc',
+                date: '2018-05-19',
+                status: 'negotiation',
+                verified: false,
+                activity: 46,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 12237
+            },
+            {
+                id: 1035,
+                name: 'Solange Shinko',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Mosocco, Ronald A',
+                date: '2015-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 32,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 34072
+            },
+            {
+                id: 1036,
+                name: 'Jose Stockham',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Tri State Refueler Co',
+                date: '2018-04-25',
+                status: 'qualified',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 94909
+            },
+            {
+                id: 1037,
+                name: 'Rozella Ostrosky',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Parkway Company',
+                date: '2016-02-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 66,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 57245
+            },
+            {
+                id: 1038,
+                name: 'Valentine Gillian',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Fbs Business Finance',
+                date: '2019-09-17',
+                status: 'qualified',
+                verified: true,
+                activity: 25,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 75502
+            },
+            {
+                id: 1039,
+                name: 'Kati Rulapaugh',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'Eder Assocs Consltng Engrs Pc',
+                date: '2016-12-03',
+                status: 'renewal',
+                verified: false,
+                activity: 51,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 82075
+            },
+            {
+                id: 1040,
+                name: 'Youlanda Schemmer',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Tri M Tool Inc',
+                date: '2017-12-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 19208
+            },
+            {
+                id: 1041,
+                name: 'Dyan Oldroyd',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'International Eyelets Inc',
+                date: '2017-02-02',
+                status: 'qualified',
+                verified: false,
+                activity: 5,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 50194
+            },
+            {
+                id: 1042,
+                name: 'Roxane Campain',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Rapid Trading Intl',
+                date: '2018-12-25',
+                status: 'unqualified',
+                verified: false,
+                activity: 100,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 77714
+            },
+            {
+                id: 1043,
+                name: 'Lavera Perin',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Abc Enterprises Inc',
+                date: '2018-04-10',
+                status: 'qualified',
+                verified: false,
+                activity: 71,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 35740
+            },
+            {
+                id: 1044,
+                name: 'Erick Ferencz',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Cindy Turner Associates',
+                date: '2018-05-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 54,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 30790
+            },
+            {
+                id: 1045,
+                name: 'Fatima Saylors',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Stanton, James D Esq',
+                date: '2019-07-10',
+                status: 'renewal',
+                verified: true,
+                activity: 93,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 52343
+            },
+            {
+                id: 1046,
+                name: 'Jina Briddick',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Grace Pastries Inc',
+                date: '2018-02-19',
+                status: 'unqualified',
+                verified: false,
+                activity: 97,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 53966
+            },
+            {
+                id: 1047,
+                name: 'Kanisha Waycott',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Schroer, Gene E Esq',
+                date: '2019-11-27',
+                status: 'new',
+                verified: false,
+                activity: 80,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 9920
+            },
+            {
+                id: 1048,
+                name: 'Emerson Bowley',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'Knights Inn',
+                date: '2018-11-24',
+                status: 'new',
+                verified: false,
+                activity: 63,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 78069
+            },
+            {
+                id: 1049,
+                name: 'Blair Malet',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'Bollinger Mach Shp & Shipyard',
+                date: '2018-04-19',
+                status: 'new',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 65005
+            },
+            {
+                id: 1050,
+                name: 'Brock Bolognia',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Orinda News',
+                date: '2019-09-06',
+                status: 'renewal',
+                verified: true,
+                activity: 72,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 51038
+            },
+            {
+                id: 1051,
+                name: 'Lorrie Nestle',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Ballard Spahr Andrews',
+                date: '2018-04-26',
+                status: 'renewal',
+                verified: false,
+                activity: 36,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 28218
+            },
+            {
+                id: 1052,
+                name: 'Sabra Uyetake',
+                country: {
+                    name: 'Peru',
+                    code: 'pe'
+                },
+                company: 'Lowy Limousine Service',
+                date: '2018-04-12',
+                status: 'new',
+                verified: false,
+                activity: 31,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 78527
+            },
+            {
+                id: 1053,
+                name: 'Marjory Mastella',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Vicon Corporation',
+                date: '2018-01-24',
+                status: 'negotiation',
+                verified: false,
+                activity: 89,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 23381
+            },
+            {
+                id: 1054,
+                name: 'Karl Klonowski',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Rossi, Michael M',
+                date: '2017-04-17',
+                status: 'unqualified',
+                verified: true,
+                activity: 27,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 64821
+            },
+            {
+                id: 1055,
+                name: 'Tonette Wenner',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Northwest Publishing',
+                date: '2019-04-14',
+                status: 'qualified',
+                verified: false,
+                activity: 27,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 55334
+            },
+            {
+                id: 1056,
+                name: 'Amber Monarrez',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Branford Wire & Mfg Co',
+                date: '2019-09-09',
+                status: 'new',
+                verified: false,
+                activity: 79,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 83391
+            },
+            {
+                id: 1057,
+                name: 'Shenika Seewald',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'East Coast Marketing',
+                date: '2017-02-18',
+                status: 'renewal',
+                verified: true,
+                activity: 39,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 31580
+            },
+            {
+                id: 1058,
+                name: 'Delmy Ahle',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Wye Technologies Inc',
+                date: '2020-10-05',
+                status: 'unqualified',
+                verified: false,
+                activity: 55,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 11723
+            },
+            {
+                id: 1059,
+                name: 'Deeanna Juhas',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Healy, George W Iv',
+                date: '2018-09-28',
+                status: 'negotiation',
+                verified: false,
+                activity: 79,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 8454
+            },
+            {
+                id: 1060,
+                name: 'Blondell Pugh',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Alpenlite Inc',
+                date: '2016-06-16',
+                status: 'renewal',
+                verified: false,
+                activity: 49,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 99235
+            },
+            {
+                id: 1061,
+                name: 'Jamal Vanausdal',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Hubbard, Bruce Esq',
+                date: '2017-05-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 87,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 15656
+            },
+            {
+                id: 1062,
+                name: 'Cecily Hollack',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Arthur A Oliver & Son Inc',
+                date: '2020-05-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 5,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 60586
+            },
+            {
+                id: 1063,
+                name: 'Carmelina Lindall',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'George Jessop Carter Jewelers',
+                date: '2019-09-07',
+                status: 'qualified',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 86239
+            },
+            {
+                id: 1064,
+                name: 'Maurine Yglesias',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Schultz, Thomas C Md',
+                date: '2015-08-10',
+                status: 'renewal',
+                verified: false,
+                activity: 94,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 15621
+            },
+            {
+                id: 1065,
+                name: 'Tawna Buvens',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'H H H Enterprises Inc',
+                date: '2018-03-20',
+                status: 'new',
+                verified: false,
+                activity: 25,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 77248
+            },
+            {
+                id: 1066,
+                name: 'Penney Weight',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Hawaiian King Hotel',
+                date: '2020-03-03',
+                status: 'qualified',
+                verified: false,
+                activity: 96,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 478
+            },
+            {
+                id: 1067,
+                name: 'Elly Morocco',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Killion Industries',
+                date: '2018-09-18',
+                status: 'qualified',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 62505
+            },
+            {
+                id: 1068,
+                name: 'Ilene Eroman',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Robinson, William J Esq',
+                date: '2019-06-08',
+                status: 'new',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 91480
+            },
+            {
+                id: 1069,
+                name: 'Vallie Mondella',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Private Properties',
+                date: '2018-12-06',
+                status: 'new',
+                verified: false,
+                activity: 16,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 21671
+            },
+            {
+                id: 1070,
+                name: 'Kallie Blackwood',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Rowley Schlimgen Inc',
+                date: '2017-04-05',
+                status: 'unqualified',
+                verified: false,
+                activity: 25,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 13775
+            },
+            {
+                id: 1071,
+                name: 'Johnetta Abdallah',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Forging Specialties',
+                date: '2015-02-02',
+                status: 'new',
+                verified: false,
+                activity: 16,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 60253
+            },
+            {
+                id: 1072,
+                name: 'Bobbye Rhym',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Smits, Patricia Garity',
+                date: '2018-08-17',
+                status: 'qualified',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 75225
+            },
+            {
+                id: 1073,
+                name: 'Micaela Rhymes',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'H Lee Leonard Attorney At Law',
+                date: '2018-09-08',
+                status: 'renewal',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 3308
+            },
+            {
+                id: 1074,
+                name: 'Tamar Hoogland',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'A K Construction Co',
+                date: '2018-11-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 22,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 19711
+            },
+            {
+                id: 1075,
+                name: 'Moon Parlato',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Ambelang, Jessica M Md',
+                date: '2019-08-18',
+                status: 'renewal',
+                verified: false,
+                activity: 64,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 55110
+            },
+            {
+                id: 1076,
+                name: 'Laurel Reitler',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Q A Service',
+                date: '2015-04-02',
+                status: 'negotiation',
+                verified: false,
+                activity: 80,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 62392
+            },
+            {
+                id: 1077,
+                name: 'Delisa Crupi',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Wood & Whitacre Contractors',
+                date: '2017-09-15',
+                status: 'unqualified',
+                verified: false,
+                activity: 70,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 76530
+            },
+            {
+                id: 1078,
+                name: 'Viva Toelkes',
+                country: {
+                    name: 'United States',
+                    code: 'us'
+                },
+                company: 'Mark Iv Press Ltd',
+                date: '2017-03-27',
+                status: 'qualified',
+                verified: false,
+                activity: 16,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 7460
+            },
+            {
+                id: 1079,
+                name: 'Elza Lipke',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Museum Of Science & Industry',
+                date: '2017-06-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 42251
+            },
+            {
+                id: 1080,
+                name: 'Devorah Chickering',
+                country: {
+                    name: 'Spain',
+                    code: 'es'
+                },
+                company: 'Garrison Ind',
+                date: '2017-03-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 36435
+            },
+            {
+                id: 1081,
+                name: 'Timothy Mulqueen',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Saronix Nymph Products',
+                date: '2018-07-09',
+                status: 'renewal',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 39197
+            },
+            {
+                id: 1082,
+                name: 'Arlette Honeywell',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Smc Inc',
+                date: '2018-09-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 72707
+            },
+            {
+                id: 1083,
+                name: 'Dominque Dickerson',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'E A I Electronic Assocs Inc',
+                date: '2017-11-12',
+                status: 'qualified',
+                verified: true,
+                activity: 83,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 97965
+            },
+            {
+                id: 1084,
+                name: 'Lettie Isenhower',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Conte, Christopher A Esq',
+                date: '2016-03-01',
+                status: 'qualified',
+                verified: true,
+                activity: 83,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 5823
+            },
+            {
+                id: 1085,
+                name: 'Myra Munns',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Anker Law Office',
+                date: '2016-05-21',
+                status: 'unqualified',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 96471
+            },
+            {
+                id: 1086,
+                name: 'Stephaine Barfield',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Beutelschies & Company',
+                date: '2016-01-22',
+                status: 'new',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 33710
+            },
+            {
+                id: 1087,
+                name: 'Lai Gato',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Fligg, Kenneth I Jr',
+                date: '2016-07-26',
+                status: 'unqualified',
+                verified: false,
+                activity: 64,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 30611
+            },
+            {
+                id: 1088,
+                name: 'Stephen Emigh',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Sharp, J Daniel Esq',
+                date: '2020-07-24',
+                status: 'renewal',
+                verified: false,
+                activity: 51,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 32960
+            },
+            {
+                id: 1089,
+                name: 'Tyra Shields',
+                country: {
+                    name: 'Honduras',
+                    code: 'hn'
+                },
+                company: 'Assink, Anne H Esq',
+                date: '2019-11-10',
+                status: 'negotiation',
+                verified: false,
+                activity: 11,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 57423
+            },
+            {
+                id: 1090,
+                name: 'Tammara Wardrip',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Jewel My Shop Inc',
+                date: '2016-06-05',
+                status: 'renewal',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 23027
+            },
+            {
+                id: 1091,
+                name: 'Cory Gibes',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Chinese Translation Resources',
+                date: '2016-02-28',
+                status: 'new',
+                verified: false,
+                activity: 44,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 84182
+            },
+            {
+                id: 1092,
+                name: 'Danica Bruschke',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Stevens, Charles T',
+                date: '2018-12-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 25237
+            },
+            {
+                id: 1093,
+                name: 'Wilda Giguere',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Mclaughlin, Luther W Cpa',
+                date: '2017-06-16',
+                status: 'new',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 87736
+            },
+            {
+                id: 1094,
+                name: 'Elvera Benimadho',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Tree Musketeers',
+                date: '2019-02-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 50,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 38674
+            },
+            {
+                id: 1095,
+                name: 'Carma Vanheusen',
+                country: {
+                    name: 'Turkey',
+                    code: 'tr'
+                },
+                company: 'Springfield Div Oh Edison Co',
+                date: '2019-11-26',
+                status: 'renewal',
+                verified: false,
+                activity: 84,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 67762
+            },
+            {
+                id: 1096,
+                name: 'Malinda Hochard',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Logan Memorial Hospital',
+                date: '2016-07-06',
+                status: 'new',
+                verified: false,
+                activity: 88,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 81299
+            },
+            {
+                id: 1097,
+                name: 'Natalie Fern',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Kelly, Charles G Esq',
+                date: '2019-10-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 44,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 64794
+            },
+            {
+                id: 1098,
+                name: 'Lisha Centini',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Industrial Paper Shredders Inc',
+                date: '2018-07-05',
+                status: 'new',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 7815
+            },
+            {
+                id: 1099,
+                name: 'Arlene Klusman',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Beck Horizon Builders',
+                date: '2018-05-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 37976
+            },
+            {
+                id: 1100,
+                name: 'Alease Buemi',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Porto Cayo At Hawks Cay',
+                date: '2018-03-14',
+                status: 'unqualified',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 59594
+            },
+            {
+                id: 1101,
+                name: 'Louisa Cronauer',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Pacific Grove Museum Ntrl Hist',
+                date: '2018-09-23',
+                status: 'qualified',
+                verified: false,
+                activity: 3,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 92528
+            },
+            {
+                id: 1102,
+                name: 'Angella Cetta',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Bender & Hatley Pc',
+                date: '2018-04-10',
+                status: 'qualified',
+                verified: false,
+                activity: 88,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 58964
+            },
+            {
+                id: 1103,
+                name: 'Cyndy Goldammer',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Di Cristina J & Son',
+                date: '2017-09-18',
+                status: 'unqualified',
+                verified: false,
+                activity: 92,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 65860
+            },
+            {
+                id: 1104,
+                name: 'Rosio Cork',
+                country: {
+                    name: 'Singapore',
+                    code: 'sg'
+                },
+                company: 'Green Goddess',
+                date: '2017-08-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 19,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 63863
+            },
+            {
+                id: 1105,
+                name: 'Celeste Korando',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'American Arts & Graphics',
+                date: '2020-06-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 21,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 37510
+            },
+            {
+                id: 1106,
+                name: 'Twana Felger',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Opryland Hotel',
+                date: '2016-11-18',
+                status: 'negotiation',
+                verified: false,
+                activity: 97,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 63876
+            },
+            {
+                id: 1107,
+                name: 'Estrella Samu',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Marking Devices Pubg Co',
+                date: '2017-06-25',
+                status: 'unqualified',
+                verified: false,
+                activity: 27,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 93263
+            },
+            {
+                id: 1108,
+                name: 'Donte Kines',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'W Tc Industries Inc',
+                date: '2019-02-16',
+                status: 'new',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 57198
+            },
+            {
+                id: 1109,
+                name: 'Tiffiny Steffensmeier',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Whitehall Robbins Labs Divsn',
+                date: '2018-03-11',
+                status: 'new',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 89147
+            },
+            {
+                id: 1110,
+                name: 'Edna Miceli',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Sampler',
+                date: '2017-10-15',
+                status: 'renewal',
+                verified: true,
+                activity: 54,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 41466
+            },
+            {
+                id: 1111,
+                name: 'Sue Kownacki',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Juno Chefs Incorporated',
+                date: '2017-03-17',
+                status: 'negotiation',
+                verified: false,
+                activity: 31,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 38918
+            },
+            {
+                id: 1112,
+                name: 'Jesusa Shin',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Carroccio, A Thomas Esq',
+                date: '2017-04-06',
+                status: 'renewal',
+                verified: false,
+                activity: 28,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 11397
+            },
+            {
+                id: 1113,
+                name: 'Rolland Francescon',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Stanley, Richard L Esq',
+                date: '2019-02-03',
+                status: 'qualified',
+                verified: false,
+                activity: 45,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 40930
+            },
+            {
+                id: 1114,
+                name: 'Pamella Schmierer',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'K Cs Cstm Mouldings Windows',
+                date: '2016-09-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 40847
+            },
+            {
+                id: 1115,
+                name: 'Glory Kulzer',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Comfort Inn',
+                date: '2017-09-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 36,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 27832
+            },
+            {
+                id: 1116,
+                name: 'Shawna Palaspas',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'Windsor, James L Esq',
+                date: '2017-06-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 89060
+            },
+            {
+                id: 1117,
+                name: 'Brandon Callaro',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Jackson Shields Yeiser',
+                date: '2016-07-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 52474
+            },
+            {
+                id: 1118,
+                name: 'Scarlet Cartan',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Box, J Calvin Esq',
+                date: '2018-09-13',
+                status: 'renewal',
+                verified: false,
+                activity: 1,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 19094
+            },
+            {
+                id: 1119,
+                name: 'Oretha Menter',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Custom Engineering Inc',
+                date: '2017-09-11',
+                status: 'renewal',
+                verified: false,
+                activity: 8,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 93756
+            },
+            {
+                id: 1120,
+                name: 'Ty Smith',
+                country: {
+                    name: 'United States',
+                    code: 'us'
+                },
+                company: 'Bresler Eitel Framg Gllry Ltd',
+                date: '2019-07-06',
+                status: 'unqualified',
+                verified: false,
+                activity: 50,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 77388
+            },
+            {
+                id: 1121,
+                name: 'Xuan Rochin',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'Carol, Drake Sparks Esq',
+                date: '2018-05-22',
+                status: 'negotiation',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 48759
+            },
+            {
+                id: 1122,
+                name: 'Lindsey Dilello',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'Biltmore Investors Bank',
+                date: '2017-07-18',
+                status: 'renewal',
+                verified: true,
+                activity: 65,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 37568
+            },
+            {
+                id: 1123,
+                name: 'Devora Perez',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Desco Equipment Corp',
+                date: '2017-10-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 4477
+            },
+            {
+                id: 1124,
+                name: 'Herman Demesa',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Merlin Electric Co',
+                date: '2019-05-23',
+                status: 'negotiation',
+                verified: true,
+                activity: 10,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 13764
+            },
+            {
+                id: 1125,
+                name: 'Rory Papasergi',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Bailey Cntl Co Div Babcock',
+                date: '2019-03-02',
+                status: 'qualified',
+                verified: false,
+                activity: 22,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 68222
+            },
+            {
+                id: 1126,
+                name: 'Talia Riopelle',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'Ford Brothers Wholesale Inc',
+                date: '2017-02-18',
+                status: 'new',
+                verified: false,
+                activity: 69,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 29164
+            },
+            {
+                id: 1127,
+                name: 'Van Shire',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Cambridge Inn',
+                date: '2020-05-12',
+                status: 'new',
+                verified: false,
+                activity: 4,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 61651
+            },
+            {
+                id: 1128,
+                name: 'Lucina Lary',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Matricciani, Albert J Jr',
+                date: '2019-11-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 11,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 79938
+            },
+            {
+                id: 1129,
+                name: 'Bok Isaacs',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'Nelson Hawaiian Ltd',
+                date: '2016-11-10',
+                status: 'negotiation',
+                verified: true,
+                activity: 41,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 44037
+            },
+            {
+                id: 1130,
+                name: 'Rolande Spickerman',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Neland Travel Agency',
+                date: '2016-07-11',
+                status: 'renewal',
+                verified: true,
+                activity: 84,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 89918
+            },
+            {
+                id: 1131,
+                name: 'Howard Paulas',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Asendorf, J Alan Esq',
+                date: '2017-07-17',
+                status: 'negotiation',
+                verified: false,
+                activity: 22,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 32372
+            },
+            {
+                id: 1132,
+                name: 'Kimbery Madarang',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Silberman, Arthur L Esq',
+                date: '2018-08-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 63,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 46478
+            },
+            {
+                id: 1133,
+                name: 'Thurman Manno',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'Honey Bee Breeding Genetics &',
+                date: '2016-05-02',
+                status: 'qualified',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 30674
+            },
+            {
+                id: 1134,
+                name: 'Becky Mirafuentes',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Wells Kravitz Schnitzer',
+                date: '2018-04-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 47714
+            },
+            {
+                id: 1135,
+                name: 'Beatriz Corrington',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Prohab Rehabilitation Servs',
+                date: '2020-01-04',
+                status: 'renewal',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 14307
+            },
+            {
+                id: 1136,
+                name: 'Marti Maybury',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Eldridge, Kristin K Esq',
+                date: '2016-02-05',
+                status: 'unqualified',
+                verified: false,
+                activity: 3,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 82069
+            },
+            {
+                id: 1137,
+                name: 'Nieves Gotter',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Vlahos, John J Esq',
+                date: '2017-03-12',
+                status: 'negotiation',
+                verified: false,
+                activity: 3,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 11182
+            },
+            {
+                id: 1138,
+                name: 'Leatha Hagele',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Ninas Indian Grs & Videos',
+                date: '2019-03-27',
+                status: 'unqualified',
+                verified: false,
+                activity: 67,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 17126
+            },
+            {
+                id: 1139,
+                name: 'Valentin Klimek',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Schmid, Gayanne K Esq',
+                date: '2019-08-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 19724
+            },
+            {
+                id: 1140,
+                name: 'Melissa Wiklund',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Moapa Valley Federal Credit Un',
+                date: '2018-03-20',
+                status: 'qualified',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 91888
+            },
+            {
+                id: 1141,
+                name: 'Sheridan Zane',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Kentucky Tennessee Clay Co',
+                date: '2016-02-15',
+                status: 'qualified',
+                verified: true,
+                activity: 17,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 15016
+            },
+            {
+                id: 1142,
+                name: 'Bulah Padilla',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Admiral Party Rentals & Sales',
+                date: '2016-02-10',
+                status: 'negotiation',
+                verified: false,
+                activity: 58,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 23118
+            },
+            {
+                id: 1143,
+                name: 'Audra Kohnert',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Nelson, Karolyn King Esq',
+                date: '2019-07-16',
+                status: 'unqualified',
+                verified: false,
+                activity: 82,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 90560
+            },
+            {
+                id: 1144,
+                name: 'Daren Weirather',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Panasystems',
+                date: '2015-07-23',
+                status: 'negotiation',
+                verified: false,
+                activity: 96,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 34155
+            },
+            {
+                id: 1145,
+                name: 'Fernanda Jillson',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Shank, Edward L Esq',
+                date: '2017-07-02',
+                status: 'unqualified',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 6350
+            },
+            {
+                id: 1146,
+                name: 'Gearldine Gellinger',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Megibow & Edwards',
+                date: '2019-08-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 18,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 77641
+            },
+            {
+                id: 1147,
+                name: 'Chau Kitzman',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Benoff, Edward Esq',
+                date: '2019-07-04',
+                status: 'new',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 43289
+            },
+            {
+                id: 1148,
+                name: 'Theola Frey',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Woodbridge Free Public Library',
+                date: '2020-03-14',
+                status: 'unqualified',
+                verified: true,
+                activity: 44,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 85657
+            },
+            {
+                id: 1149,
+                name: 'Cheryl Haroldson',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'New York Life John Thune',
+                date: '2018-04-03',
+                status: 'new',
+                verified: false,
+                activity: 55,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 82733
+            },
+            {
+                id: 1150,
+                name: 'Laticia Merced',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Alinabal Inc',
+                date: '2017-03-04',
+                status: 'unqualified',
+                verified: false,
+                activity: 21,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 38004
+            },
+            {
+                id: 1151,
+                name: 'Carissa Batman',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Poletto, Kim David Esq',
+                date: '2016-05-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 29038
+            },
+            {
+                id: 1152,
+                name: 'Lezlie Craghead',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Chang, Carolyn Esq',
+                date: '2019-05-28',
+                status: 'renewal',
+                verified: false,
+                activity: 30,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 75123
+            },
+            {
+                id: 1153,
+                name: 'Ozell Shealy',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Silver Bros Inc',
+                date: '2016-08-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 33214
+            },
+            {
+                id: 1154,
+                name: 'Arminda Parvis',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Newtec Inc',
+                date: '2020-02-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 80651
+            },
+            {
+                id: 1155,
+                name: 'Reita Leto',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Creative Business Systems',
+                date: '2020-04-03',
+                status: 'unqualified',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 5085
+            },
+            {
+                id: 1156,
+                name: 'Yolando Luczki',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Dal Tile Corporation',
+                date: '2015-01-27',
+                status: 'renewal',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 93021
+            },
+            {
+                id: 1157,
+                name: 'Lizette Stem',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'Edward S Katz',
+                date: '2018-08-06',
+                status: 'new',
+                verified: false,
+                activity: 67,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 37287
+            },
+            {
+                id: 1158,
+                name: 'Gregoria Pawlowicz',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Oh My Goodknits Inc',
+                date: '2020-02-20',
+                status: 'renewal',
+                verified: false,
+                activity: 29,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 73070
+            },
+            {
+                id: 1159,
+                name: 'Carin Deleo',
+                country: {
+                    name: 'China',
+                    code: 'cn'
+                },
+                company: 'Redeker, Debbie',
+                date: '2015-05-28',
+                status: 'qualified',
+                verified: true,
+                activity: 13,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 64422
+            },
+            {
+                id: 1160,
+                name: 'Chantell Maynerich',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'Desert Sands Motel',
+                date: '2016-09-05',
+                status: 'unqualified',
+                verified: true,
+                activity: 75,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 36826
+            },
+            {
+                id: 1161,
+                name: 'Dierdre Yum',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Cummins Southern Plains Inc',
+                date: '2016-12-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 1,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 93101
+            },
+            {
+                id: 1162,
+                name: 'Larae Gudroe',
+                country: {
+                    name: 'Slovenia',
+                    code: 'si'
+                },
+                company: 'Lehigh Furn Divsn Lehigh',
+                date: '2015-11-28',
+                status: 'unqualified',
+                verified: false,
+                activity: 13,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 60177
+            },
+            {
+                id: 1163,
+                name: 'Latrice Tolfree',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'United Van Lines Agent',
+                date: '2018-11-11',
+                status: 'renewal',
+                verified: false,
+                activity: 73,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 47198
+            },
+            {
+                id: 1164,
+                name: 'Kerry Theodorov',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Capitol Reporters',
+                date: '2016-11-05',
+                status: 'unqualified',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 71305
+            },
+            {
+                id: 1165,
+                name: 'Dorthy Hidvegi',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Kwik Kopy Printing',
+                date: '2020-08-13',
+                status: 'qualified',
+                verified: true,
+                activity: 60,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 17526
+            },
+            {
+                id: 1166,
+                name: 'Fannie Lungren',
+                country: {
+                    name: 'Belarus',
+                    code: 'by'
+                },
+                company: 'Centro Inc',
+                date: '2015-07-06',
+                status: 'negotiation',
+                verified: true,
+                activity: 24,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 16596
+            },
+            {
+                id: 1167,
+                name: 'Evangelina Radde',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Campbell, Jan Esq',
+                date: '2020-02-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 93,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 56870
+            },
+            {
+                id: 1168,
+                name: 'Novella Degroot',
+                country: {
+                    name: 'Slovenia',
+                    code: 'si'
+                },
+                company: 'Evans, C Kelly Esq',
+                date: '2017-12-19',
+                status: 'unqualified',
+                verified: false,
+                activity: 30,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 82928
+            },
+            {
+                id: 1169,
+                name: 'Clay Hoa',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Scat Enterprises',
+                date: '2016-02-22',
+                status: 'negotiation',
+                verified: false,
+                activity: 93,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 64181
+            },
+            {
+                id: 1170,
+                name: 'Jennifer Fallick',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Nagle, Daniel J Esq',
+                date: '2016-12-24',
+                status: 'unqualified',
+                verified: true,
+                activity: 88,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 30561
+            },
+            {
+                id: 1171,
+                name: 'Irma Wolfgramm',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Serendiquity Bed & Breakfast',
+                date: '2020-10-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 24617
+            },
+            {
+                id: 1172,
+                name: 'Eun Coody',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Ray Carolyne Realty',
+                date: '2018-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 77860
+            },
+            {
+                id: 1173,
+                name: 'Sylvia Cousey',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Berg, Charles E',
+                date: '2018-06-10',
+                status: 'unqualified',
+                verified: false,
+                activity: 91,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 25664
+            },
+            {
+                id: 1174,
+                name: 'Nana Wrinkles',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'Ray, Milbern D',
+                date: '2017-04-11',
+                status: 'renewal',
+                verified: true,
+                activity: 98,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 98113
+            },
+            {
+                id: 1175,
+                name: 'Layla Springe',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Chadds Ford Winery',
+                date: '2019-07-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 97,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 14763
+            },
+            {
+                id: 1176,
+                name: 'Joesph Degonia',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'A R Packaging',
+                date: '2020-04-23',
+                status: 'renewal',
+                verified: true,
+                activity: 56,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 31317
+            },
+            {
+                id: 1177,
+                name: 'Annabelle Boord',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'Corn Popper',
+                date: '2020-09-16',
+                status: 'negotiation',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 30883
+            },
+            {
+                id: 1178,
+                name: 'Stephaine Vinning',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Birite Foodservice Distr',
+                date: '2016-05-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 43,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 93785
+            },
+            {
+                id: 1179,
+                name: 'Nelida Sawchuk',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Anchorage Museum Of Hist & Art',
+                date: '2018-06-22',
+                status: 'qualified',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 68380
+            },
+            {
+                id: 1180,
+                name: 'Marguerita Hiatt',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Haber, George D Md',
+                date: '2018-10-25',
+                status: 'qualified',
+                verified: false,
+                activity: 72,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 93454
+            },
+            {
+                id: 1181,
+                name: 'Carmela Cookey',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Royal Pontiac Olds Inc',
+                date: '2018-07-19',
+                status: 'negotiation',
+                verified: false,
+                activity: 24,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 30570
+            },
+            {
+                id: 1182,
+                name: 'Junita Brideau',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Leonards Antiques Inc',
+                date: '2015-03-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 79506
+            },
+            {
+                id: 1183,
+                name: 'Claribel Varriano',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Meca',
+                date: '2017-04-14',
+                status: 'unqualified',
+                verified: true,
+                activity: 15,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 8654
+            },
+            {
+                id: 1184,
+                name: 'Benton Skursky',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Nercon Engineering & Mfg Inc',
+                date: '2015-02-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 13368
+            },
+            {
+                id: 1185,
+                name: 'Hillary Skulski',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Replica I',
+                date: '2016-03-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 82,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 92631
+            },
+            {
+                id: 1186,
+                name: 'Merilyn Bayless',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: '20 20 Printing Inc',
+                date: '2020-10-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 13,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 4989
+            },
+            {
+                id: 1187,
+                name: 'Teri Ennaco',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Publishers Group West',
+                date: '2019-12-21',
+                status: 'unqualified',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 77668
+            },
+            {
+                id: 1188,
+                name: 'Merlyn Lawler',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Nischwitz, Jeffrey L Esq',
+                date: '2016-02-26',
+                status: 'renewal',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 3525
+            },
+            {
+                id: 1189,
+                name: 'Georgene Montezuma',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Payne Blades & Wellborn Pa',
+                date: '2018-10-11',
+                status: 'new',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 45838
+            },
+            {
+                id: 1190,
+                name: 'Jettie Mconnell',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Coldwell Bnkr Wright Real Est',
+                date: '2015-10-18',
+                status: 'negotiation',
+                verified: false,
+                activity: 74,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 49148
+            },
+            {
+                id: 1191,
+                name: 'Lemuel Latzke',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'Computer Repair Service',
+                date: '2016-02-13',
+                status: 'negotiation',
+                verified: false,
+                activity: 79,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 96709
+            },
+            {
+                id: 1192,
+                name: 'Melodie Knipp',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'Fleetwood Building Block Inc',
+                date: '2018-03-08',
+                status: 'negotiation',
+                verified: false,
+                activity: 19,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 23253
+            },
+            {
+                id: 1193,
+                name: 'Candida Corbley',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Colts Neck Medical Assocs Inc',
+                date: '2017-12-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 11,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 40836
+            },
+            {
+                id: 1194,
+                name: 'Karan Karpin',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'New England Taxidermy',
+                date: '2019-01-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 4,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 60719
+            },
+            {
+                id: 1195,
+                name: 'Andra Scheyer',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Ludcke, George O Esq',
+                date: '2016-08-14',
+                status: 'qualified',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 17419
+            },
+            {
+                id: 1196,
+                name: 'Felicidad Poullion',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Mccorkle, Tom S Esq',
+                date: '2016-03-05',
+                status: 'renewal',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 94052
+            },
+            {
+                id: 1197,
+                name: 'Belen Strassner',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Eagle Software Inc',
+                date: '2015-12-14',
+                status: 'qualified',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 54241
+            },
+            {
+                id: 1198,
+                name: 'Gracia Melnyk',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Juvenile & Adult Super',
+                date: '2019-06-01',
+                status: 'unqualified',
+                verified: true,
+                activity: 40,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 87668
+            },
+            {
+                id: 1199,
+                name: 'Jolanda Hanafan',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Perez, Joseph J Esq',
+                date: '2015-12-09',
+                status: 'qualified',
+                verified: true,
+                activity: 27,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 99417
+            },
+            {
+                id: 1200,
+                name: 'Barrett Toyama',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Case Foundation Co',
+                date: '2019-08-16',
+                status: 'new',
+                verified: true,
+                activity: 82,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 89792
+            },
+            {
+                id: 1201,
+                name: 'Helga Fredicks',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'Eis Environmental Engrs Inc',
+                date: '2018-06-20',
+                status: 'new',
+                verified: true,
+                activity: 33,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 42356
+            },
+            {
+                id: 1202,
+                name: 'Ashlyn Pinilla',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Art Crafters',
+                date: '2018-04-11',
+                status: 'unqualified',
+                verified: true,
+                activity: 5,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 90979
+            },
+            {
+                id: 1203,
+                name: 'Fausto Agramonte',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Marriott Hotels Resorts Suites',
+                date: '2019-06-25',
+                status: 'new',
+                verified: false,
+                activity: 22,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 45082
+            },
+            {
+                id: 1204,
+                name: 'Ronny Caiafa',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Remaco Inc',
+                date: '2020-07-21',
+                status: 'new',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 9871
+            },
+            {
+                id: 1205,
+                name: 'Marge Limmel',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Bjork, Robert D Jr',
+                date: '2015-03-12',
+                status: 'unqualified',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 47043
+            },
+            {
+                id: 1206,
+                name: 'Norah Waymire',
+                country: {
+                    name: 'United States',
+                    code: 'us'
+                },
+                company: 'Carmichael, Jeffery L Esq',
+                date: '2019-06-11',
+                status: 'renewal',
+                verified: true,
+                activity: 48,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 92763
+            },
+            {
+                id: 1207,
+                name: 'Aliza Baltimore',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Andrews, J Robert Esq',
+                date: '2020-11-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 18075
+            },
+            {
+                id: 1208,
+                name: 'Mozell Pelkowski',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Winship \u0026 Byrne',
+                date: '2018-04-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 34393
+            },
+            {
+                id: 1209,
+                name: 'Viola Bitsuie',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Burton \u0026 Davis',
+                date: '2018-07-07',
+                status: 'new',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 16410
+            },
+            {
+                id: 1210,
+                name: 'Franklyn Emard',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Olympic Graphic Arts',
+                date: '2018-02-25',
+                status: 'qualified',
+                verified: true,
+                activity: 95,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 1017
+            },
+            {
+                id: 1211,
+                name: 'Willodean Konopacki',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Magnuson',
+                date: '2017-10-03',
+                status: 'renewal',
+                verified: false,
+                activity: 20,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 77843
+            },
+            {
+                id: 1212,
+                name: 'Beckie Silvestrini',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'A All American Travel Inc',
+                date: '2016-11-26',
+                status: 'renewal',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 30549
+            },
+            {
+                id: 1213,
+                name: 'Rebecka Gesick',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Polykote Inc',
+                date: '2019-06-22',
+                status: 'renewal',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 51738
+            },
+            {
+                id: 1214,
+                name: 'Frederica Blunk',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Jets Cybernetics',
+                date: '2019-06-07',
+                status: 'renewal',
+                verified: true,
+                activity: 56,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 13111
+            },
+            {
+                id: 1215,
+                name: 'Glen Bartolet',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Metlab Testing Services',
+                date: '2015-02-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 85802
+            },
+            {
+                id: 1216,
+                name: 'Freeman Gochal',
+                country: {
+                    name: 'Slovenia',
+                    code: 'si'
+                },
+                company: 'Kellermann, William T Esq',
+                date: '2019-08-27',
+                status: 'negotiation',
+                verified: false,
+                activity: 2,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 89221
+            },
+            {
+                id: 1217,
+                name: 'Vincent Meinerding',
+                country: {
+                    name: 'United States',
+                    code: 'us'
+                },
+                company: 'Arturi, Peter D Esq',
+                date: '2018-06-18',
+                status: 'new',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 32661
+            },
+            {
+                id: 1218,
+                name: 'Rima Bevelacqua',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Mcauley Mfg Co',
+                date: '2019-05-18',
+                status: 'new',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 18809
+            },
+            {
+                id: 1219,
+                name: 'Glendora Sarbacher',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Defur Voran Hanley Radcliff',
+                date: '2018-04-21',
+                status: 'new',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 94374
+            },
+            {
+                id: 1220,
+                name: 'Avery Steier',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Dill Dill Carr \u0026 Stonbraker Pc',
+                date: '2017-07-27',
+                status: 'negotiation',
+                verified: true,
+                activity: 63,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 45436
+            },
+            {
+                id: 1221,
+                name: 'Cristy Lother',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Kleensteel',
+                date: '2018-05-19',
+                status: 'renewal',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 72645
+            },
+            {
+                id: 1222,
+                name: 'Nicolette Brossart',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Goulds Pumps Inc Slurry Pump',
+                date: '2015-05-26',
+                status: 'new',
+                verified: false,
+                activity: 25,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 61023
+            },
+            {
+                id: 1223,
+                name: 'Tracey Modzelewski',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Kansas City Insurance Report',
+                date: '2019-07-02',
+                status: 'renewal',
+                verified: true,
+                activity: 4,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 13685
+            },
+            {
+                id: 1224,
+                name: 'Virgina Tegarden',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Berhanu International Foods',
+                date: '2017-10-09',
+                status: 'qualified',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 84436
+            },
+            {
+                id: 1225,
+                name: 'Tiera Frankel',
+                country: {
+                    name: 'India',
+                    code: 'in'
+                },
+                company: 'Roland Ashcroft',
+                date: '2018-03-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 61860
+            },
+            {
+                id: 1226,
+                name: 'Alaine Bergesen',
+                country: {
+                    name: 'Peru',
+                    code: 'pe'
+                },
+                company: 'Hispanic Magazine',
+                date: '2017-08-10',
+                status: 'qualified',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 76679
+            },
+            {
+                id: 1227,
+                name: 'Earleen Mai',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Little Sheet Metal Co',
+                date: '2016-06-22',
+                status: 'negotiation',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 14959
+            },
+            {
+                id: 1228,
+                name: 'Leonida Gobern',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Holmes, Armstead J Esq',
+                date: '2020-02-24',
+                status: 'renewal',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 14174
+            },
+            {
+                id: 1229,
+                name: 'Ressie Auffrey',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Faw, James C Cpa',
+                date: '2016-10-21',
+                status: 'negotiation',
+                verified: false,
+                activity: 28,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 80328
+            },
+            {
+                id: 1230,
+                name: 'Justine Mugnolo',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Evans Rule Company',
+                date: '2016-02-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 83,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 56392
+            },
+            {
+                id: 1231,
+                name: 'Eladia Saulter',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Tyee Productions Inc',
+                date: '2016-03-10',
+                status: 'new',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 17176
+            },
+            {
+                id: 1232,
+                name: 'Chaya Malvin',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Dunnells \u0026 Duvall',
+                date: '2016-07-22',
+                status: 'renewal',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 90141
+            },
+            {
+                id: 1233,
+                name: 'Gwenn Suffield',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'Deltam Systems Inc',
+                date: '2019-06-23',
+                status: 'qualified',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 38187
+            },
+            {
+                id: 1234,
+                name: 'Salena Karpel',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'Hammill Mfg Co',
+                date: '2016-08-02',
+                status: 'renewal',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 35596
+            },
+            {
+                id: 1235,
+                name: 'Yoko Fishburne',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Sams Corner Store',
+                date: '2017-08-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 73,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 73926
+            },
+            {
+                id: 1236,
+                name: 'Taryn Moyd',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Siskin, Mark J Esq',
+                date: '2016-12-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 38375
+            },
+            {
+                id: 1237,
+                name: 'Katina Polidori',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Cape \u0026 Associates Real Estate',
+                date: '2016-08-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 37,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 35932
+            },
+            {
+                id: 1238,
+                name: 'Rickie Plumer',
+                country: {
+                    name: 'Turkey',
+                    code: 'tr'
+                },
+                company: 'Merrill Lynch',
+                date: '2018-11-04',
+                status: 'unqualified',
+                verified: true,
+                activity: 71,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 28331
+            },
+            {
+                id: 1239,
+                name: 'Alex Loader',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Sublett, Scott Esq',
+                date: '2016-01-07',
+                status: 'unqualified',
+                verified: false,
+                activity: 22,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 33549
+            },
+            {
+                id: 1240,
+                name: 'Lashon Vizarro',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Sentry Signs',
+                date: '2019-08-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 63860
+            },
+            {
+                id: 1241,
+                name: 'Lauran Burnard',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Professionals Unlimited',
+                date: '2016-04-27',
+                status: 'renewal',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 34992
+            },
+            {
+                id: 1242,
+                name: 'Ceola Setter',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Southern Steel Shelving Co',
+                date: '2017-05-13',
+                status: 'qualified',
+                verified: true,
+                activity: 43,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 97068
+            },
+            {
+                id: 1243,
+                name: 'My Rantanen',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Bosco, Paul J',
+                date: '2017-09-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 60,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 2316
+            },
+            {
+                id: 1244,
+                name: 'Lorrine Worlds',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Longo, Nicholas J Esq',
+                date: '2018-05-10',
+                status: 'renewal',
+                verified: true,
+                activity: 51,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 89374
+            },
+            {
+                id: 1245,
+                name: 'Peggie Sturiale',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Henry County Middle School',
+                date: '2019-11-03',
+                status: 'renewal',
+                verified: true,
+                activity: 41,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 51152
+            },
+            {
+                id: 1246,
+                name: 'Marvel Raymo',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Edison Supply \u0026 Equipment Co',
+                date: '2016-03-08',
+                status: 'renewal',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 39848
+            },
+            {
+                id: 1247,
+                name: 'Daron Dinos',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Wolf, Warren R Esq',
+                date: '2016-03-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 35060
+            },
+            {
+                id: 1248,
+                name: 'An Fritz',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Linguistic Systems Inc',
+                date: '2017-08-04',
+                status: 'negotiation',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 23037
+            },
+            {
+                id: 1249,
+                name: 'Portia Stimmel',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Peace Christian Center',
+                date: '2020-01-13',
+                status: 'qualified',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 35637
+            },
+            {
+                id: 1250,
+                name: 'Rhea Aredondo',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Double B Foods Inc',
+                date: '2016-06-19',
+                status: 'qualified',
+                verified: true,
+                activity: 68,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 70379
+            },
+            {
+                id: 1251,
+                name: 'Benedict Sama',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Alexander \u0026 Alexander Inc',
+                date: '2018-08-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 99271
+            },
+            {
+                id: 1252,
+                name: 'Alyce Arias',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Fairbanks Scales',
+                date: '2018-09-14',
+                status: 'new',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 69658
+            },
+            {
+                id: 1253,
+                name: 'Heike Berganza',
+                country: {
+                    name: 'Bulgaria',
+                    code: 'bg'
+                },
+                company: 'Cali Sportswear Cutting Dept',
+                date: '2019-01-21',
+                status: 'unqualified',
+                verified: true,
+                activity: 95,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 78159
+            },
+            {
+                id: 1254,
+                name: 'Carey Dopico',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Garofani, John Esq',
+                date: '2020-05-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 84097
+            },
+            {
+                id: 1255,
+                name: 'Dottie Hellickson',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'Thompson Fabricating Co',
+                date: '2016-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 54606
+            },
+            {
+                id: 1256,
+                name: 'Deandrea Hughey',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Century 21 Krall Real Estate',
+                date: '2018-09-26',
+                status: 'unqualified',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 2730
+            },
+            {
+                id: 1257,
+                name: 'Kimberlie Duenas',
+                country: {
+                    name: 'Bulgaria',
+                    code: 'bg'
+                },
+                company: 'Mid Contntl Rlty \u0026 Prop Mgmt',
+                date: '2015-07-27',
+                status: 'qualified',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 71836
+            },
+            {
+                id: 1258,
+                name: 'Martina Staback',
+                country: {
+                    name: 'Luxembourg',
+                    code: 'lu'
+                },
+                company: 'Ace Signs Inc',
+                date: '2017-02-14',
+                status: 'new',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 37044
+            },
+            {
+                id: 1259,
+                name: 'Skye Fillingim',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Rodeway Inn',
+                date: '2017-02-12',
+                status: 'new',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 5990
+            },
+            {
+                id: 1260,
+                name: 'Jade Farrar',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Bonnet \u0026 Daughter',
+                date: '2017-02-23',
+                status: 'new',
+                verified: true,
+                activity: 73,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 7878
+            },
+            {
+                id: 1261,
+                name: 'Charlene Hamilton',
+                country: {
+                    name: 'India',
+                    code: 'in'
+                },
+                company: 'Oshins \u0026 Gibbons',
+                date: '2017-09-23',
+                status: 'unqualified',
+                verified: true,
+                activity: 32,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 38077
+            },
+            {
+                id: 1262,
+                name: 'Geoffrey Acey',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Price Business Services',
+                date: '2019-10-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 98,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 24537
+            },
+            {
+                id: 1263,
+                name: 'Stevie Westerbeck',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Wise, Dennis W Md',
+                date: '2017-08-01',
+                status: 'renewal',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 19164
+            },
+            {
+                id: 1264,
+                name: 'Pamella Fortino',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Super 8 Motel',
+                date: '2018-09-03',
+                status: 'new',
+                verified: true,
+                activity: 100,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 21880
+            },
+            {
+                id: 1265,
+                name: 'Harrison Haufler',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'John Wagner Associates',
+                date: '2016-08-25',
+                status: 'qualified',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 14975
+            },
+            {
+                id: 1266,
+                name: 'Johnna Engelberg',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Thrifty Oil Co',
+                date: '2019-06-02',
+                status: 'renewal',
+                verified: true,
+                activity: 1,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 28001
+            },
+            {
+                id: 1267,
+                name: 'Buddy Cloney',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Larkfield Photo',
+                date: '2020-05-14',
+                status: 'qualified',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 44811
+            },
+            {
+                id: 1268,
+                name: 'Dalene Riden',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Silverman Planetarium',
+                date: '2019-08-23',
+                status: 'renewal',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 70963
+            },
+            {
+                id: 1269,
+                name: 'Jerry Zurcher',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'J \u0026 F Lumber',
+                date: '2015-05-11',
+                status: 'renewal',
+                verified: true,
+                activity: 52,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 27808
+            },
+            {
+                id: 1270,
+                name: 'Haydee Denooyer',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Cleaning Station Inc',
+                date: '2016-04-17',
+                status: 'qualified',
+                verified: true,
+                activity: 80,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 41216
+            },
+            {
+                id: 1271,
+                name: 'Joseph Cryer',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Ames Stationers',
+                date: '2019-11-26',
+                status: 'qualified',
+                verified: true,
+                activity: 53,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 8819
+            },
+            {
+                id: 1272,
+                name: 'Deonna Kippley',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Midas Muffler Shops',
+                date: '2017-08-26',
+                status: 'qualified',
+                verified: true,
+                activity: 52,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 77610
+            },
+            {
+                id: 1273,
+                name: 'Raymon Calvaresi',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Seaboard Securities Inc',
+                date: '2017-07-09',
+                status: 'qualified',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 80612
+            },
+            {
+                id: 1274,
+                name: 'Alecia Bubash',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Petersen, James E Esq',
+                date: '2016-05-19',
+                status: 'new',
+                verified: false,
+                activity: 28,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 45311
+            },
+            {
+                id: 1275,
+                name: 'Ma Layous',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Development Authority',
+                date: '2016-02-11',
+                status: 'qualified',
+                verified: false,
+                activity: 2,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 88737
+            },
+            {
+                id: 1276,
+                name: 'Detra Coyier',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Schott Fiber Optics Inc',
+                date: '2019-06-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 95,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 13224
+            },
+            {
+                id: 1277,
+                name: 'Terrilyn Rodeigues',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Stuart J Agins',
+                date: '2016-08-04',
+                status: 'renewal',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 64656
+            },
+            {
+                id: 1278,
+                name: 'Salome Lacovara',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Mitsumi Electronics Corp',
+                date: '2015-06-05',
+                status: 'unqualified',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 61947
+            },
+            {
+                id: 1279,
+                name: 'Garry Keetch',
+                country: {
+                    name: 'Luxembourg',
+                    code: 'lu'
+                },
+                company: 'Italian Express Franchise Corp',
+                date: '2015-06-20',
+                status: 'unqualified',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 6380
+            },
+            {
+                id: 1280,
+                name: 'Matthew Neither',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'American Council On Sci \u0026 Hlth',
+                date: '2018-06-24',
+                status: 'qualified',
+                verified: true,
+                activity: 4,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 80112
+            },
+            {
+                id: 1281,
+                name: 'Theodora Restrepo',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Kleri, Patricia S Esq',
+                date: '2017-08-15',
+                status: 'renewal',
+                verified: true,
+                activity: 66,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 42038
+            },
+            {
+                id: 1282,
+                name: 'Noah Kalafatis',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Twiggs Abrams Blanchard',
+                date: '2020-06-24',
+                status: 'negotiation',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 36052
+            },
+            {
+                id: 1283,
+                name: 'Carmen Sweigard',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Maui Research \u0026 Technology Pk',
+                date: '2019-08-08',
+                status: 'new',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 51660
+            },
+            {
+                id: 1284,
+                name: 'Lavonda Hengel',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Bradley Nameplate Corp',
+                date: '2019-10-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 48,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 56142
+            },
+            {
+                id: 1285,
+                name: 'Junita Stoltzman',
+                country: {
+                    name: 'Turkey',
+                    code: 'tr'
+                },
+                company: 'Geonex Martel Inc',
+                date: '2015-03-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 21631
+            },
+            {
+                id: 1286,
+                name: 'Herminia Nicolozakes',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Sea Island Div Of Fstr Ind Inc',
+                date: '2019-09-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 59171
+            },
+            {
+                id: 1287,
+                name: 'Casie Good',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Papay, Debbie J Esq',
+                date: '2016-11-27',
+                status: 'new',
+                verified: true,
+                activity: 87,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 97858
+            },
+            {
+                id: 1288,
+                name: 'Reena Maisto',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Lane Promotions',
+                date: '2016-08-22',
+                status: 'new',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 90388
+            },
+            {
+                id: 1289,
+                name: 'Mirta Mallett',
+                country: {
+                    name: 'Singapore',
+                    code: 'sg'
+                },
+                company: 'Stephen Kennerly Archts Inc Pc',
+                date: '2017-11-27',
+                status: 'renewal',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 68632
+            },
+            {
+                id: 1290,
+                name: 'Cathrine Pontoriero',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'Business Systems Of Wis Inc',
+                date: '2020-02-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 95552
+            },
+            {
+                id: 1291,
+                name: 'Filiberto Tawil',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Flash, Elena Salerno Esq',
+                date: '2018-01-28',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 39725
+            },
+            {
+                id: 1292,
+                name: 'Raul Upthegrove',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Neeley, Gregory W Esq',
+                date: '2019-11-16',
+                status: 'renewal',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 62251
+            },
+            {
+                id: 1293,
+                name: 'Sarah Candlish',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Alabama Educational Tv Comm',
+                date: '2019-06-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 73523
+            },
+            {
+                id: 1294,
+                name: 'Lucy Treston',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Franz Inc',
+                date: '2017-02-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 41331
+            },
+            {
+                id: 1295,
+                name: 'Judy Aquas',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Plantation Restaurant',
+                date: '2020-09-14',
+                status: 'renewal',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 24208
+            },
+            {
+                id: 1296,
+                name: 'Yvonne Tjepkema',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Radio Communications Co',
+                date: '2017-01-06',
+                status: 'renewal',
+                verified: true,
+                activity: 33,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 56409
+            },
+            {
+                id: 1297,
+                name: 'Kayleigh Lace',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Dentalaw Divsn Hlth Care',
+                date: '2019-11-04',
+                status: 'negotiation',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 70025
+            },
+            {
+                id: 1298,
+                name: 'Felix Hirpara',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'American Speedy Printing Ctrs',
+                date: '2015-03-13',
+                status: 'new',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 88115
+            },
+            {
+                id: 1299,
+                name: 'Tresa Sweely',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Grayson, Grant S Esq',
+                date: '2019-12-22',
+                status: 'negotiation',
+                verified: true,
+                activity: 22,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 69703
+            },
+            {
+                id: 1300,
+                name: 'Kristeen Turinetti',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Jeanerette Middle School',
+                date: '2017-09-28',
+                status: 'new',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 10718
+            },
+            {
+                id: 1301,
+                name: 'Jenelle Regusters',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Haavisto, Brian F Esq',
+                date: '2019-07-27',
+                status: 'qualified',
+                verified: true,
+                activity: 13,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 29825
+            },
+            {
+                id: 1302,
+                name: 'Renea Monterrubio',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Wmmt Radio Station',
+                date: '2016-03-28',
+                status: 'negotiation',
+                verified: true,
+                activity: 73,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 90351
+            },
+            {
+                id: 1303,
+                name: 'Olive Matuszak',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Colony Paints Sales Ofc \u0026 Plnt',
+                date: '2018-04-15',
+                status: 'unqualified',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 75682
+            },
+            {
+                id: 1304,
+                name: 'Ligia Reiber',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Floral Expressions',
+                date: '2017-02-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 51,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 74935
+            },
+            {
+                id: 1305,
+                name: 'Christiane Eschberger',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Casco Services Inc',
+                date: '2018-03-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 5254
+            },
+            {
+                id: 1306,
+                name: 'Goldie Schirpke',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Reuter, Arthur C Jr',
+                date: '2015-04-21',
+                status: 'renewal',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 37306
+            },
+            {
+                id: 1307,
+                name: 'Loreta Timenez',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Kaminski, Katherine Andritsaki',
+                date: '2015-07-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 29,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 70520
+            },
+            {
+                id: 1308,
+                name: 'Fabiola Hauenstein',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Sidewinder Products Corp',
+                date: '2015-12-12',
+                status: 'renewal',
+                verified: true,
+                activity: 42,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 74510
+            },
+            {
+                id: 1309,
+                name: 'Amie Perigo',
+                country: {
+                    name: 'Russia',
+                    code: 'ru'
+                },
+                company: 'General Foam Corporation',
+                date: '2016-06-13',
+                status: 'new',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 74410
+            },
+            {
+                id: 1310,
+                name: 'Raina Brachle',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Ikg Borden Divsn Harsco Corp',
+                date: '2016-11-28',
+                status: 'negotiation',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 56116
+            },
+            {
+                id: 1311,
+                name: 'Erinn Canlas',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Anchor Computer Inc',
+                date: '2018-12-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 89,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 46518
+            },
+            {
+                id: 1312,
+                name: 'Cherry Lietz',
+                country: {
+                    name: 'Bulgaria',
+                    code: 'bg'
+                },
+                company: 'Sebring \u0026 Co',
+                date: '2017-11-04',
+                status: 'qualified',
+                verified: true,
+                activity: 22,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 92213
+            },
+            {
+                id: 1313,
+                name: 'Kattie Vonasek',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'H A C Farm Lines Co Optv Assoc',
+                date: '2017-02-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 6405
+            },
+            {
+                id: 1314,
+                name: 'Lilli Scriven',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Hunter, John J Esq',
+                date: '2017-04-15',
+                status: 'qualified',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 92900
+            },
+            {
+                id: 1315,
+                name: 'Whitley Tomasulo',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Freehold Fence Co',
+                date: '2017-11-16',
+                status: 'qualified',
+                verified: true,
+                activity: 6,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 86727
+            },
+            {
+                id: 1316,
+                name: 'Barbra Adkin',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Binswanger',
+                date: '2019-07-24',
+                status: 'qualified',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 48040
+            },
+            {
+                id: 1317,
+                name: 'Hermila Thyberg',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Chilton Malting Co',
+                date: '2016-11-05',
+                status: 'qualified',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 24026
+            },
+            {
+                id: 1318,
+                name: 'Jesusita Flister',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Schoen, Edward J Jr',
+                date: '2017-03-03',
+                status: 'negotiation',
+                verified: true,
+                activity: 29,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 76388
+            },
+            {
+                id: 1319,
+                name: 'Caitlin Julia',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Helderman, Seymour Cpa',
+                date: '2018-03-13',
+                status: 'renewal',
+                verified: true,
+                activity: 19,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 89068
+            },
+            {
+                id: 1320,
+                name: 'Roosevelt Hoffis',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'Denbrook, Myron',
+                date: '2019-04-14',
+                status: 'new',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 12727
+            },
+            {
+                id: 1321,
+                name: 'Helaine Halter',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'Lippitt, Mike',
+                date: '2019-09-28',
+                status: 'renewal',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 83411
+            },
+            {
+                id: 1322,
+                name: 'Lorean Martabano',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'Hiram, Hogg P Esq',
+                date: '2017-03-23',
+                status: 'negotiation',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 44242
+            },
+            {
+                id: 1323,
+                name: 'France Buzick',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'In Travel Agency',
+                date: '2016-12-14',
+                status: 'renewal',
+                verified: true,
+                activity: 22,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 5644
+            },
+            {
+                id: 1324,
+                name: 'Justine Ferrario',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Newhart Foods Inc',
+                date: '2015-09-07',
+                status: 'unqualified',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 29321
+            },
+            {
+                id: 1325,
+                name: 'Adelina Nabours',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Courtyard By Marriott',
+                date: '2018-05-26',
+                status: 'renewal',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 13353
+            },
+            {
+                id: 1326,
+                name: 'Derick Dhamer',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Studer, Eugene A Esq',
+                date: '2020-07-04',
+                status: 'new',
+                verified: true,
+                activity: 72,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 53454
+            },
+            {
+                id: 1327,
+                name: 'Jerry Dallen',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Seashore Supply Co Waretown',
+                date: '2015-10-23',
+                status: 'renewal',
+                verified: false,
+                activity: 21,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 30074
+            },
+            {
+                id: 1328,
+                name: 'Leota Ragel',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Mayar Silk Inc',
+                date: '2019-06-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 74,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 36310
+            },
+            {
+                id: 1329,
+                name: 'Jutta Amyot',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'National Medical Excess Corp',
+                date: '2019-09-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 27563
+            },
+            {
+                id: 1330,
+                name: 'Aja Gehrett',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Stero Company',
+                date: '2018-01-28',
+                status: 'qualified',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 45163
+            },
+            {
+                id: 1331,
+                name: 'Kirk Herritt',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Hasting, H Duane Esq',
+                date: '2018-10-24',
+                status: 'renewal',
+                verified: false,
+                activity: 2,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 52970
+            },
+            {
+                id: 1332,
+                name: 'Leonora Mauson',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Insty Prints',
+                date: '2019-02-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 18922
+            },
+            {
+                id: 1333,
+                name: 'Winfred Brucato',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'Glenridge Manor Mobile Home Pk',
+                date: '2019-08-16',
+                status: 'renewal',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 59632
+            },
+            {
+                id: 1334,
+                name: 'Tarra Nachor',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Circuit Solution Inc',
+                date: '2019-07-10',
+                status: 'negotiation',
+                verified: true,
+                activity: 88,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 6733
+            },
+            {
+                id: 1335,
+                name: 'Corinne Loder',
+                country: {
+                    name: 'Brazil',
+                    code: 'br'
+                },
+                company: 'Local Office',
+                date: '2016-05-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 22704
+            },
+            {
+                id: 1336,
+                name: 'Dulce Labreche',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Lee Kilkelly Paulson \u0026 Kabaker',
+                date: '2019-11-10',
+                status: 'qualified',
+                verified: true,
+                activity: 24,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 82613
+            },
+            {
+                id: 1337,
+                name: 'Kate Keneipp',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Davis, Maxon R Esq',
+                date: '2019-06-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 44,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 97960
+            },
+            {
+                id: 1338,
+                name: 'Kaitlyn Ogg',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Garrison, Paul E Esq',
+                date: '2019-08-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 63123
+            },
+            {
+                id: 1339,
+                name: 'Sherita Saras',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Black History Resource Center',
+                date: '2017-06-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 38090
+            },
+            {
+                id: 1340,
+                name: 'Lashawnda Stuer',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Rodriguez, J Christopher Esq',
+                date: '2018-01-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 6,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 58826
+            },
+            {
+                id: 1341,
+                name: 'Ernest Syrop',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Grant Family Health Center',
+                date: '2016-10-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 22419
+            },
+            {
+                id: 1342,
+                name: 'Nobuko Halsey',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Goeman Wood Products Inc',
+                date: '2019-01-02',
+                status: 'unqualified',
+                verified: true,
+                activity: 72,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 86006
+            },
+            {
+                id: 1343,
+                name: 'Lavonna Wolny',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Linhares, Kenneth A Esq',
+                date: '2019-03-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 40641
+            },
+            {
+                id: 1344,
+                name: 'Lashaunda Lizama',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Earnhardt Printing',
+                date: '2016-02-16',
+                status: 'negotiation',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 73493
+            },
+            {
+                id: 1345,
+                name: 'Mariann Bilden',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'H P G Industrys Inc',
+                date: '2019-12-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 20,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 87704
+            },
+            {
+                id: 1346,
+                name: 'Helene Rodenberger',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Bailey Transportation Prod Inc',
+                date: '2016-09-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 26,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 19662
+            },
+            {
+                id: 1347,
+                name: 'Roselle Estell',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Mcglynn Bliss Pc',
+                date: '2016-11-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 80,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 80534
+            },
+            {
+                id: 1348,
+                name: 'Samira Heintzman',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Mutual Fish Co',
+                date: '2019-11-26',
+                status: 'qualified',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 19473
+            },
+            {
+                id: 1349,
+                name: 'Margart Meisel',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Yeates, Arthur L Aia',
+                date: '2019-10-27',
+                status: 'negotiation',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 89796
+            },
+            {
+                id: 1350,
+                name: 'Kristofer Bennick',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Logan, Ronald J Esq',
+                date: '2016-02-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 5,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 54429
+            },
+            {
+                id: 1351,
+                name: 'Weldon Acuff',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'Advantage Martgage Company',
+                date: '2019-10-22',
+                status: 'qualified',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 16134
+            },
+            {
+                id: 1352,
+                name: 'Shalon Shadrick',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Germer And Gertz Llp',
+                date: '2015-01-03',
+                status: 'negotiation',
+                verified: true,
+                activity: 66,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 9173
+            },
+            {
+                id: 1353,
+                name: 'Denise Patak',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Spence Law Offices',
+                date: '2016-11-03',
+                status: 'qualified',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 42857
+            },
+            {
+                id: 1354,
+                name: 'Louvenia Beech',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'John Ortiz Nts Therapy Center',
+                date: '2016-04-11',
+                status: 'renewal',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 54300
+            },
+            {
+                id: 1355,
+                name: 'Audry Yaw',
+                country: {
+                    name: 'Portugal',
+                    code: 'pt'
+                },
+                company: 'Mike Uchrin Htg \u0026 Air Cond Inc',
+                date: '2017-11-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 94652
+            },
+            {
+                id: 1356,
+                name: 'Kristel Ehmann',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Mccoy, Joy Reynolds Esq',
+                date: '2016-06-23',
+                status: 'new',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 88295
+            },
+            {
+                id: 1357,
+                name: 'Vincenza Zepp',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Kbor 1600 Am',
+                date: '2016-01-04',
+                status: 'qualified',
+                verified: true,
+                activity: 25,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 92710
+            },
+            {
+                id: 1358,
+                name: 'Elouise Gwalthney',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Quality Inn Northwest',
+                date: '2016-04-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 25145
+            },
+            {
+                id: 1359,
+                name: 'Venita Maillard',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Wallace Church Assoc Inc',
+                date: '2016-03-23',
+                status: 'negotiation',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 61630
+            },
+            {
+                id: 1360,
+                name: 'Kasandra Semidey',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Can Tron',
+                date: '2015-09-03',
+                status: 'new',
+                verified: true,
+                activity: 25,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 66134
+            },
+            {
+                id: 1361,
+                name: 'Xochitl Discipio',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'Ravaal Enterprises Inc',
+                date: '2016-11-14',
+                status: 'qualified',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 14822
+            },
+            {
+                id: 1362,
+                name: 'Maile Linahan',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Thompson Steel Company Inc',
+                date: '2016-07-24',
+                status: 'new',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 17759
+            },
+            {
+                id: 1363,
+                name: 'Krissy Rauser',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Anderson, Mark A Esq',
+                date: '2020-03-06',
+                status: 'renewal',
+                verified: true,
+                activity: 33,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 14922
+            },
+            {
+                id: 1364,
+                name: 'Pete Dubaldi',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Womack \u0026 Galich',
+                date: '2015-11-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 96575
+            },
+            {
+                id: 1365,
+                name: 'Linn Paa',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Valerie \u0026 Company',
+                date: '2015-08-12',
+                status: 'unqualified',
+                verified: true,
+                activity: 26,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 5847
+            },
+            {
+                id: 1366,
+                name: 'Paris Wide',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Gehring Pumps Inc',
+                date: '2018-10-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 22929
+            },
+            {
+                id: 1367,
+                name: 'Wynell Dorshorst',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Haehnel, Craig W Esq',
+                date: '2018-05-10',
+                status: 'new',
+                verified: true,
+                activity: 60,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 31837
+            },
+            {
+                id: 1368,
+                name: 'Quentin Birkner',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Spoor Behrins Campbell \u0026 Young',
+                date: '2019-02-03',
+                status: 'unqualified',
+                verified: true,
+                activity: 68,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 27095
+            },
+            {
+                id: 1369,
+                name: 'Regenia Kannady',
+                country: {
+                    name: 'Portugal',
+                    code: 'pt'
+                },
+                company: 'Ken Jeter Store Equipment Inc',
+                date: '2018-07-13',
+                status: 'new',
+                verified: true,
+                activity: 74,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 43696
+            },
+            {
+                id: 1370,
+                name: 'Sheron Louissant',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Potter, Brenda J Cpa',
+                date: '2017-01-04',
+                status: 'qualified',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 79897
+            },
+            {
+                id: 1371,
+                name: 'Izetta Funnell',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Baird Kurtz \u0026 Dobson',
+                date: '2019-11-05',
+                status: 'new',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 27264
+            },
+            {
+                id: 1372,
+                name: 'Rodolfo Butzen',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Minor, Cynthia A Esq',
+                date: '2020-09-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 17,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 16490
+            },
+            {
+                id: 1373,
+                name: 'Zona Colla',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Solove, Robert A Esq',
+                date: '2020-10-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 21990
+            },
+            {
+                id: 1374,
+                name: 'Serina Zagen',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Mark Ii Imports Inc',
+                date: '2018-07-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 11918
+            },
+            {
+                id: 1375,
+                name: 'Paz Sahagun',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'White Sign Div Ctrl Equip Co',
+                date: '2018-03-23',
+                status: 'negotiation',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 13268
+            },
+            {
+                id: 1376,
+                name: 'Markus Lukasik',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'M \u0026 M Store Fixtures Co Inc',
+                date: '2018-03-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 23,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 15941
+            },
+            {
+                id: 1377,
+                name: 'Jaclyn Bachman',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'Judah Caster \u0026 Wheel Co',
+                date: '2020-10-20',
+                status: 'new',
+                verified: true,
+                activity: 10,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 53132
+            },
+            {
+                id: 1378,
+                name: 'Cyril Daufeldt',
+                country: {
+                    name: 'India',
+                    code: 'in'
+                },
+                company: 'Galaxy International Inc',
+                date: '2019-02-11',
+                status: 'qualified',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 47531
+            },
+            {
+                id: 1379,
+                name: 'Gayla Schnitzler',
+                country: {
+                    name: 'Brazil',
+                    code: 'br'
+                },
+                company: 'Sigma Corp Of America',
+                date: '2017-09-15',
+                status: 'new',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 88950
+            },
+            {
+                id: 1380,
+                name: 'Erick Nievas',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Soward, Anne Esq',
+                date: '2018-10-07',
+                status: 'negotiation',
+                verified: false,
+                activity: 28,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 88497
+            },
+            {
+                id: 1381,
+                name: 'Jennie Drymon',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Osborne, Michelle M Esq',
+                date: '2016-09-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 80,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 60634
+            },
+            {
+                id: 1382,
+                name: 'Mitsue Scipione',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Students In Free Entrprs Natl',
+                date: '2019-07-28',
+                status: 'qualified',
+                verified: true,
+                activity: 24,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 21164
+            },
+            {
+                id: 1383,
+                name: 'Ciara Ventura',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Johnson, Robert M Esq',
+                date: '2018-04-02',
+                status: 'renewal',
+                verified: false,
+                activity: 24,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 83645
+            },
+            {
+                id: 1384,
+                name: 'Galen Cantres',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Del Charro Apartments',
+                date: '2020-02-16',
+                status: 'unqualified',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 32433
+            },
+            {
+                id: 1385,
+                name: 'Truman Feichtner',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Legal Search Inc',
+                date: '2019-10-16',
+                status: 'renewal',
+                verified: true,
+                activity: 98,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 96983
+            },
+            {
+                id: 1386,
+                name: 'Gail Kitty',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Service Supply Co Inc',
+                date: '2020-01-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 72211
+            },
+            {
+                id: 1387,
+                name: 'Dalene Schoeneck',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Sameshima, Douglas J Esq',
+                date: '2019-11-27',
+                status: 'negotiation',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 40262
+            },
+            {
+                id: 1388,
+                name: 'Gertude Witten',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Thompson, John Randolph Jr',
+                date: '2017-08-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 40,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 91139
+            },
+            {
+                id: 1389,
+                name: 'Lizbeth Kohl',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'E T Balancing Co Inc',
+                date: '2019-04-20',
+                status: 'qualified',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 79659
+            },
+            {
+                id: 1390,
+                name: 'Glenn Berray',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Griswold, John E Esq',
+                date: '2017-08-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 68,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 93576
+            },
+            {
+                id: 1391,
+                name: 'Lashandra Klang',
+                country: {
+                    name: 'Bulgaria',
+                    code: 'bg'
+                },
+                company: 'Acqua Group',
+                date: '2016-06-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 32,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 93576
+            },
+            {
+                id: 1392,
+                name: 'Lenna Newville',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Brooks, Morris J Jr',
+                date: '2020-09-12',
+                status: 'qualified',
+                verified: true,
+                activity: 82,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 93576
+            },
+            {
+                id: 1393,
+                name: 'Laurel Pagliuca',
+                country: {
+                    name: 'Russia',
+                    code: 'ru'
+                },
+                company: 'Printing Images Corp',
+                date: '2017-05-26',
+                status: 'unqualified',
+                verified: true,
+                activity: 21,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 2009
+            },
+            {
+                id: 1394,
+                name: 'Mireya Frerking',
+                country: {
+                    name: 'Belarus',
+                    code: 'by'
+                },
+                company: 'Roberts Supply Co Inc',
+                date: '2017-04-21',
+                status: 'renewal',
+                verified: true,
+                activity: 54,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 35341
+            },
+            {
+                id: 1395,
+                name: 'Annelle Tagala',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'Vico Products Mfg Co',
+                date: '2017-10-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 53,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 13077
+            },
+            {
+                id: 1396,
+                name: 'Dean Ketelsen',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'J M Custom Design Millwork',
+                date: '2019-07-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 98,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 83423
+            },
+            {
+                id: 1397,
+                name: 'Levi Munis',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Farrell \u0026 Johnson Office Equip',
+                date: '2017-06-24',
+                status: 'negotiation',
+                verified: true,
+                activity: 39,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 14350
+            },
+            {
+                id: 1398,
+                name: 'Sylvie Ryser',
+                country: {
+                    name: 'India',
+                    code: 'in'
+                },
+                company: 'Millers Market \u0026 Deli',
+                date: '2016-02-23',
+                status: 'unqualified',
+                verified: true,
+                activity: 89,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 98864
+            },
+            {
+                id: 1399,
+                name: 'Sharee Maile',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Holiday Inn Naperville',
+                date: '2020-07-17',
+                status: 'renewal',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 29326
+            },
+            {
+                id: 1400,
+                name: 'Cordelia Storment',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'Burrows, Jon H Esq',
+                date: '2020-02-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 81198
+            },
+            {
+                id: 1401,
+                name: 'Mollie Mcdoniel',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Dock Seal Specialty',
+                date: '2017-08-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 82391
+            },
+            {
+                id: 1402,
+                name: 'Brett Mccullan',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Five Star Limousines Of Tx Inc',
+                date: '2015-05-21',
+                status: 'qualified',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 48071
+            },
+            {
+                id: 1403,
+                name: 'Teddy Pedrozo',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Barkan, Neal J Esq',
+                date: '2019-02-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 14593
+            },
+            {
+                id: 1404,
+                name: 'Tasia Andreason',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Campbell, Robert A',
+                date: '2016-03-06',
+                status: 'renewal',
+                verified: true,
+                activity: 25,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 8750
+            },
+            {
+                id: 1405,
+                name: 'Hubert Walthall',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Dee, Deanna',
+                date: '2020-12-19',
+                status: 'renewal',
+                verified: true,
+                activity: 32,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 39655
+            },
+            {
+                id: 1406,
+                name: 'Arthur Farrow',
+                country: {
+                    name: 'Brazil',
+                    code: 'br'
+                },
+                company: 'Young, Timothy L Esq',
+                date: '2019-02-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 71713
+            },
+            {
+                id: 1407,
+                name: 'Vilma Berlanga',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Wells, D Fred Esq',
+                date: '2016-02-09',
+                status: 'unqualified',
+                verified: false,
+                activity: 26,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 81056
+            },
+            {
+                id: 1408,
+                name: 'Billye Miro',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Gray, Francine H Esq',
+                date: '2015-09-05',
+                status: 'new',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 34220
+            },
+            {
+                id: 1409,
+                name: 'Glenna Slayton',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Toledo Iv Care',
+                date: '2016-03-10',
+                status: 'unqualified',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 21459
+            },
+            {
+                id: 1410,
+                name: 'Mitzie Hudnall',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Cangro Transmission Co',
+                date: '2020-05-04',
+                status: 'new',
+                verified: true,
+                activity: 19,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 51281
+            },
+            {
+                id: 1411,
+                name: 'Bernardine Rodefer',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Sat Poly Inc',
+                date: '2020-10-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 53841
+            },
+            {
+                id: 1412,
+                name: 'Staci Schmaltz',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Midwest Contracting \u0026 Mfg Inc',
+                date: '2018-03-14',
+                status: 'unqualified',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 34878
+            },
+            {
+                id: 1413,
+                name: 'Nichelle Meteer',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Print Doctor',
+                date: '2016-09-23',
+                status: 'renewal',
+                verified: true,
+                activity: 39,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 85399
+            },
+            {
+                id: 1414,
+                name: 'Janine Rhoden',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Nordic Group Inc',
+                date: '2018-08-13',
+                status: 'qualified',
+                verified: true,
+                activity: 95,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 29237
+            },
+            {
+                id: 1415,
+                name: 'Ettie Hoopengardner',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Jackson Millwork Co',
+                date: '2017-07-24',
+                status: 'renewal',
+                verified: false,
+                activity: 23,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 12179
+            },
+            {
+                id: 1416,
+                name: 'Eden Jayson',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Harris Corporation',
+                date: '2018-03-15',
+                status: 'renewal',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 27840
+            },
+            {
+                id: 1417,
+                name: 'Lynelle Auber',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'United Cerebral Palsy Of Ne Pa',
+                date: '2020-12-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 51958
+            },
+            {
+                id: 1418,
+                name: 'Merissa Tomblin',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'One Day Surgery Center Inc',
+                date: '2018-03-05',
+                status: 'new',
+                verified: true,
+                activity: 50,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 33138
+            },
+            {
+                id: 1419,
+                name: 'Golda Kaniecki',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Calaveras Prospect',
+                date: '2019-04-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 82539
+            },
+            {
+                id: 1420,
+                name: 'Catarina Gleich',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Terk, Robert E Esq',
+                date: '2017-01-26',
+                status: 'unqualified',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 5619
+            },
+            {
+                id: 1421,
+                name: 'Virgie Kiel',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Cullen, Terrence P Esq',
+                date: '2016-06-28',
+                status: 'renewal',
+                verified: true,
+                activity: 89,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 44763
+            },
+            {
+                id: 1422,
+                name: 'Jolene Ostolaza',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'Central Die Casting Mfg Co Inc',
+                date: '2016-08-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 97208
+            },
+            {
+                id: 1423,
+                name: 'Keneth Borgman',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Centerline Engineering',
+                date: '2019-02-04',
+                status: 'unqualified',
+                verified: true,
+                activity: 41,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 93316
+            },
+            {
+                id: 1424,
+                name: 'Rikki Nayar',
+                country: {
+                    name: 'Norway',
+                    code: 'no'
+                },
+                company: 'Targan \u0026 Kievit Pa',
+                date: '2017-03-06',
+                status: 'negotiation',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 23786
+            },
+            {
+                id: 1425,
+                name: 'Elke Sengbusch',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Riley Riper Hollin \u0026 Colagreco',
+                date: '2019-05-28',
+                status: 'renewal',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 98367
+            },
+            {
+                id: 1426,
+                name: 'Hoa Sarao',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Kaplan, Joel S Esq',
+                date: '2020-08-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 68683
+            },
+            {
+                id: 1427,
+                name: 'Trinidad Mcrae',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Water Office',
+                date: '2020-12-26',
+                status: 'renewal',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 85602
+            },
+            {
+                id: 1428,
+                name: 'Mari Lueckenbach',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Westbrooks, Nelson E Jr',
+                date: '2017-10-27',
+                status: 'new',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 14402
+            },
+            {
+                id: 1429,
+                name: 'Selma Husser',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Armon Communications',
+                date: '2018-02-16',
+                status: 'negotiation',
+                verified: true,
+                activity: 84,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 81608
+            },
+            {
+                id: 1430,
+                name: 'Antione Onofrio',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Jacobs \u0026 Gerber Inc',
+                date: '2017-11-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 37,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 15573
+            },
+            {
+                id: 1431,
+                name: 'Luisa Jurney',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Forest Fire Laboratory',
+                date: '2018-06-12',
+                status: 'unqualified',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 50121
+            },
+            {
+                id: 1432,
+                name: 'Clorinda Heimann',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Haughey, Charles Jr',
+                date: '2016-11-03',
+                status: 'negotiation',
+                verified: true,
+                activity: 63,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 93911
+            },
+            {
+                id: 1433,
+                name: 'Dick Wenzinger',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Wheaton Plastic Products',
+                date: '2017-04-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 66383
+            },
+            {
+                id: 1434,
+                name: 'Ahmed Angalich',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Reese Plastics',
+                date: '2018-11-20',
+                status: 'unqualified',
+                verified: true,
+                activity: 83,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 89183
+            },
+            {
+                id: 1435,
+                name: 'Iluminada Ohms',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Nazette Marner Good Wendt',
+                date: '2015-08-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 66,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 9752
+            },
+            {
+                id: 1436,
+                name: 'Joanna Leinenbach',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Levinson Axelrod Wheaton',
+                date: '2016-02-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 2623
+            },
+            {
+                id: 1437,
+                name: 'Caprice Suell',
+                country: {
+                    name: 'Algeria',
+                    code: 'dz'
+                },
+                company: 'Egnor, W Dan Esq',
+                date: '2018-07-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 87620
+            },
+            {
+                id: 1438,
+                name: 'Stephane Myricks',
+                country: {
+                    name: 'Honduras',
+                    code: 'hn'
+                },
+                company: 'Portland Central Thriftlodge',
+                date: '2018-05-28',
+                status: 'renewal',
+                verified: true,
+                activity: 51,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 14625
+            },
+            {
+                id: 1439,
+                name: 'Quentin Swayze',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Ulbrich Trucking',
+                date: '2019-02-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 37,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 39339
+            },
+            {
+                id: 1440,
+                name: 'Annmarie Castros',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Tipiak Inc',
+                date: '2015-08-24',
+                status: 'qualified',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 77704
+            },
+            {
+                id: 1441,
+                name: 'Shonda Greenbush',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Saint George Well Drilling',
+                date: '2018-06-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 75326
+            },
+            {
+                id: 1442,
+                name: 'Cecil Lapage',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Hawkes, Douglas D',
+                date: '2018-11-09',
+                status: 'qualified',
+                verified: true,
+                activity: 43,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 71364
+            },
+            {
+                id: 1443,
+                name: 'Jeanice Claucherty',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Accurel Systems Intrntl Corp',
+                date: '2016-06-02',
+                status: 'qualified',
+                verified: true,
+                activity: 48,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 73360
+            },
+            {
+                id: 1444,
+                name: 'Josphine Villanueva',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Santa Cruz Community Internet',
+                date: '2019-11-08',
+                status: 'unqualified',
+                verified: true,
+                activity: 39,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 59442
+            },
+            {
+                id: 1445,
+                name: 'Daniel Perruzza',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Gersh \u0026 Danielson',
+                date: '2017-09-24',
+                status: 'renewal',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 84338
+            },
+            {
+                id: 1446,
+                name: 'Cassi Wildfong',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Cobb, James O Esq',
+                date: '2015-09-08',
+                status: 'qualified',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 72545
+            },
+            {
+                id: 1447,
+                name: 'Britt Galam',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Wheatley Trucking Company',
+                date: '2020-10-26',
+                status: 'new',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 53307
+            },
+            {
+                id: 1448,
+                name: 'Adell Lipkin',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Systems Graph Inc Ab Dick Dlr',
+                date: '2017-05-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 12178
+            },
+            {
+                id: 1449,
+                name: 'Jacqueline Rowling',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'John Hancock Mutl Life Ins Co',
+                date: '2019-06-28',
+                status: 'negotiation',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 35576
+            },
+            {
+                id: 1450,
+                name: 'Lonny Weglarz',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'History Division Of State',
+                date: '2016-08-12',
+                status: 'new',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 20507
+            },
+            {
+                id: 1451,
+                name: 'Lonna Diestel',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Dimmock, Thomas J Esq',
+                date: '2017-02-10',
+                status: 'negotiation',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 56415
+            },
+            {
+                id: 1452,
+                name: 'Cristal Samara',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Intermed Inc',
+                date: '2016-08-17',
+                status: 'qualified',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 33427
+            },
+            {
+                id: 1453,
+                name: 'Kenneth Grenet',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Bank Of New York',
+                date: '2020-07-24',
+                status: 'negotiation',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 44004
+            },
+            {
+                id: 1454,
+                name: 'Elli Mclaird',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Sportmaster Intrnatl',
+                date: '2017-06-10',
+                status: 'qualified',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 37227
+            },
+            {
+                id: 1455,
+                name: 'Alline Jeanty',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'W W John Holden Inc',
+                date: '2015-12-08',
+                status: 'renewal',
+                verified: true,
+                activity: 74,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 44560
+            },
+            {
+                id: 1456,
+                name: 'Sharika Eanes',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'Maccani \u0026 Delp',
+                date: '2018-08-16',
+                status: 'qualified',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 50922
+            },
+            {
+                id: 1457,
+                name: 'Nu Mcnease',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Amazonia Film Project',
+                date: '2018-07-03',
+                status: 'negotiation',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 61262
+            },
+            {
+                id: 1458,
+                name: 'Daniela Comnick',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Water \u0026 Sewer Department',
+                date: '2017-07-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 13459
+            },
+            {
+                id: 1459,
+                name: 'Cecilia Colaizzo',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Switchcraft Inc',
+                date: '2019-06-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 21,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 52299
+            },
+            {
+                id: 1460,
+                name: 'Leslie Threets',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'C W D C Metal Fabricators',
+                date: '2016-11-26',
+                status: 'unqualified',
+                verified: true,
+                activity: 50,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 61040
+            },
+            {
+                id: 1461,
+                name: 'Nan Koppinger',
+                country: {
+                    name: 'Norway',
+                    code: 'no'
+                },
+                company: 'Shimotani, Grace T',
+                date: '2020-11-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 91297
+            },
+            {
+                id: 1462,
+                name: 'Izetta Dewar',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Lisatoni, Jean Esq',
+                date: '2019-11-22',
+                status: 'renewal',
+                verified: true,
+                activity: 41,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 39947
+            },
+            {
+                id: 1463,
+                name: 'Tegan Arceo',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Ceramic Tile Sales Inc',
+                date: '2016-08-07',
+                status: 'new',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 78224
+            },
+            {
+                id: 1464,
+                name: 'Ruthann Keener',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Maiden Craft Inc',
+                date: '2019-04-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 43,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 22727
+            },
+            {
+                id: 1465,
+                name: 'Joni Breland',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Carriage House Cllsn Rpr Inc',
+                date: '2018-07-20',
+                status: 'new',
+                verified: true,
+                activity: 18,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 70650
+            },
+            {
+                id: 1466,
+                name: 'Vi Rentfro',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Video Workshop',
+                date: '2018-10-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 45956
+            },
+            {
+                id: 1467,
+                name: 'Colette Kardas',
+                country: {
+                    name: 'Honduras',
+                    code: 'hn'
+                },
+                company: 'Fresno Tile Center Inc',
+                date: '2017-08-22',
+                status: 'new',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 72627
+            },
+            {
+                id: 1468,
+                name: 'Malcolm Tromblay',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Versatile Sash \u0026 Woodwork',
+                date: '2019-11-25',
+                status: 'renewal',
+                verified: true,
+                activity: 23,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 80176
+            },
+            {
+                id: 1469,
+                name: 'Ryan Harnos',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Warner Electric Brk \u0026 Cltch Co',
+                date: '2019-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 71,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 97227
+            },
+            {
+                id: 1470,
+                name: 'Jess Chaffins',
+                country: {
+                    name: 'Belarus',
+                    code: 'by'
+                },
+                company: 'New York Public Library',
+                date: '2017-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 63121
+            },
+            {
+                id: 1471,
+                name: 'Sharen Bourbon',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Mccaleb, John A Esq',
+                date: '2017-06-13',
+                status: 'renewal',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 44726
+            },
+            {
+                id: 1472,
+                name: 'Nickolas Juvera',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'United Oil Co Inc',
+                date: '2019-01-06',
+                status: 'negotiation',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 70748
+            },
+            {
+                id: 1473,
+                name: 'Gary Nunlee',
+                country: {
+                    name: 'Turkey',
+                    code: 'tr'
+                },
+                company: 'Irving Foot Center',
+                date: '2015-07-22',
+                status: 'renewal',
+                verified: true,
+                activity: 72,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 71061
+            },
+            {
+                id: 1474,
+                name: 'Diane Devreese',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Acme Supply Co',
+                date: '2018-05-13',
+                status: 'renewal',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 7486
+            },
+            {
+                id: 1475,
+                name: 'Roslyn Chavous',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Mcrae, James L',
+                date: '2018-03-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 58495
+            },
+            {
+                id: 1476,
+                name: 'Glory Schieler',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Mcgraths Seafood',
+                date: '2017-05-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 96252
+            },
+            {
+                id: 1477,
+                name: 'Rasheeda Sayaphon',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Kummerer, J Michael Esq',
+                date: '2017-02-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 71454
+            },
+            {
+                id: 1478,
+                name: 'Alpha Palaia',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Stoffer, James M Jr',
+                date: '2017-07-21',
+                status: 'renewal',
+                verified: true,
+                activity: 4,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 81894
+            },
+            {
+                id: 1479,
+                name: 'Refugia Jacobos',
+                country: {
+                    name: 'China',
+                    code: 'cn'
+                },
+                company: 'North Central Fl Sfty Cncl',
+                date: '2020-11-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 18,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 31601
+            },
+            {
+                id: 1480,
+                name: 'Shawnda Yori',
+                country: {
+                    name: 'Luxembourg',
+                    code: 'lu'
+                },
+                company: 'Fiorucci Foods Usa Inc',
+                date: '2018-05-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 11,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 12090
+            },
+            {
+                id: 1481,
+                name: 'Mona Delasancha',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Sign All',
+                date: '2017-10-06',
+                status: 'renewal',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 24073
+            },
+            {
+                id: 1482,
+                name: 'Gilma Liukko',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Sammys Steak Den',
+                date: '2018-10-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 35129
+            },
+            {
+                id: 1483,
+                name: 'Janey Gabisi',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Dobscha, Stephen F Esq',
+                date: '2019-05-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 25518
+            },
+            {
+                id: 1484,
+                name: 'Lili Paskin',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Morgan Custom Homes',
+                date: '2018-06-11',
+                status: 'unqualified',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 7300
+            },
+            {
+                id: 1485,
+                name: 'Loren Asar',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Olsen Payne \u0026 Company',
+                date: '2017-12-11',
+                status: 'unqualified',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 82949
+            },
+            {
+                id: 1486,
+                name: 'Dorothy Chesterfield',
+                country: {
+                    name: 'Spain',
+                    code: 'es'
+                },
+                company: 'Cowan \u0026 Kelly',
+                date: '2015-08-11',
+                status: 'renewal',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 25044
+            },
+            {
+                id: 1487,
+                name: 'Gail Similton',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Johnson, Wes Esq',
+                date: '2016-08-10',
+                status: 'qualified',
+                verified: true,
+                activity: 63,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 97553
+            },
+            {
+                id: 1488,
+                name: 'Catalina Tillotson',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Icn Pharmaceuticals Inc',
+                date: '2018-08-04',
+                status: 'negotiation',
+                verified: true,
+                activity: 13,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 38294
+            },
+            {
+                id: 1489,
+                name: 'Lawrence Lorens',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'New England Sec Equip Co Inc',
+                date: '2020-04-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 82,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 56617
+            },
+            {
+                id: 1490,
+                name: 'Carlee Boulter',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Tippett, Troy M Ii',
+                date: '2016-09-22',
+                status: 'renewal',
+                verified: true,
+                activity: 71,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 76817
+            },
+            {
+                id: 1491,
+                name: 'Thaddeus Ankeny',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Atc Contracting',
+                date: '2015-03-08',
+                status: 'unqualified',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 80787
+            },
+            {
+                id: 1492,
+                name: 'Jovita Oles',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Pagano, Philip G Esq',
+                date: '2019-07-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 42,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 4158
+            },
+            {
+                id: 1493,
+                name: 'Alesia Hixenbaugh',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Kwikprint',
+                date: '2017-07-24',
+                status: 'negotiation',
+                verified: false,
+                activity: 23,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 66993
+            },
+            {
+                id: 1494,
+                name: 'Lai Harabedian',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Buergi \u0026 Madden Scale',
+                date: '2018-11-11',
+                status: 'new',
+                verified: true,
+                activity: 28,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 53330
+            },
+            {
+                id: 1495,
+                name: 'Brittni Gillaspie',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Inner Label',
+                date: '2019-11-23',
+                status: 'renewal',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 72342
+            },
+            {
+                id: 1496,
+                name: 'Raylene Kampa',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Hermar Inc',
+                date: '2020-04-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 65,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 53660
+            },
+            {
+                id: 1497,
+                name: 'Flo Bookamer',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Simonton Howe \u0026 Schneider Pc',
+                date: '2020-08-10',
+                status: 'unqualified',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 44528
+            },
+            {
+                id: 1498,
+                name: 'Jani Biddy',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Warehouse Office \u0026 Paper Prod',
+                date: '2019-11-07',
+                status: 'negotiation',
+                verified: false,
+                activity: 20,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 69613
+            },
+            {
+                id: 1499,
+                name: 'Chauncey Motley',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Affiliated With Travelodge',
+                date: '2019-04-23',
+                status: 'renewal',
+                verified: true,
+                activity: 42,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 88090
+            }
+        ];
+    },
+
+    getCustomersSmall() {
+        return Promise.resolve(this.getData().slice(0, 10));
+    },
+
+    getCustomersMedium() {
+        return Promise.resolve(this.getData().slice(0, 50));
+    },
+
+    getCustomersLarge() {
+        return Promise.resolve(this.getData().slice(0, 200));
+    },
+
+    getCustomersXLarge() {
+        return Promise.resolve(this.getData());
+    },
+
+    getCustomers(params) {
+        const queryParams = params
+            ? Object.keys(params)
+                  .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+                  .join('&')
+            : '';
+
+        return fetch('https://www.primefaces.org/data/customers?' + queryParams).then((res) => res.json());
+    }
+};
diff --git a/apps/labs/service/EventService.js b/apps/labs/service/EventService.js
new file mode 100755
index 000000000..bc2de9b6c
--- /dev/null
+++ b/apps/labs/service/EventService.js
@@ -0,0 +1,22 @@
+export const EventService = {
+    getData() {
+        return [
+            { id: 1, title: 'All Day Event', start: '2023-02-01' },
+            { id: 2, title: 'Long Event', start: '2023-02-07', end: '2023-02-10' },
+            { id: 3, title: 'Repeating Event', start: '2023-02-09T16:00:00' },
+            { id: 4, title: 'Repeating Event', start: '2023-02-16T16:00:00' },
+            { id: 5, title: 'Conference', start: '2023-02-11', end: '2023-02-13' },
+            { id: 6, title: 'Meeting', start: '2023-02-12T10:30:00', end: '2023-02-12T12:30:00' },
+            { id: 7, title: 'Lunch', start: '2023-02-12T12:00:00' },
+            { id: 8, title: 'Meeting', start: '2023-02-12T14:30:00' },
+            { id: 9, title: 'Happy Hour', start: '2023-02-12T17:30:00' },
+            { id: 10, title: 'Dinner', start: '2023-02-12T20:00:00' },
+            { id: 11, title: 'Birthday Party', start: '2023-02-13T07:00:00' },
+            { id: 12, title: 'Click for Google', url: 'https://www.google.com/', start: '2023-02-28' }
+        ];
+    },
+
+    getEvents() {
+        return Promise.resolve(this.getData());
+    }
+};
diff --git a/apps/labs/service/IconService.js b/apps/labs/service/IconService.js
new file mode 100644
index 000000000..c1199a92a
--- /dev/null
+++ b/apps/labs/service/IconService.js
@@ -0,0 +1,18 @@
+let icons = [];
+let selectedIcon = null;
+
+export const IconService = {
+    getIcons() {
+        return fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.icons);
+    },
+
+    getIcon(id) {
+        if (icons) {
+            selectedIcon = icons.find((x) => x.properties.id === id);
+
+            return selectedIcon;
+        }
+    }
+};
diff --git a/apps/labs/service/NodeService.js b/apps/labs/service/NodeService.js
new file mode 100755
index 000000000..d6877ccad
--- /dev/null
+++ b/apps/labs/service/NodeService.js
@@ -0,0 +1,431 @@
+export const NodeService = {
+    getTreeNodesData() {
+        return [
+            {
+                key: '0',
+                label: 'Documents',
+                data: 'Documents Folder',
+                icon: 'pi pi-fw pi-inbox',
+                children: [
+                    {
+                        key: '0-0',
+                        label: 'Work',
+                        data: 'Work Folder',
+                        icon: 'pi pi-fw pi-cog',
+                        children: [
+                            { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                            { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+                        ]
+                    },
+                    {
+                        key: '0-1',
+                        label: 'Home',
+                        data: 'Home Folder',
+                        icon: 'pi pi-fw pi-home',
+                        children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+                    }
+                ]
+            },
+            {
+                key: '1',
+                label: 'Events',
+                data: 'Events Folder',
+                icon: 'pi pi-fw pi-calendar',
+                children: [
+                    { key: '1-0', label: 'Meeting', icon: 'pi pi-fw pi-calendar-plus', data: 'Meeting' },
+                    { key: '1-1', label: 'Product Launch', icon: 'pi pi-fw pi-calendar-plus', data: 'Product Launch' },
+                    { key: '1-2', label: 'Report Review', icon: 'pi pi-fw pi-calendar-plus', data: 'Report Review' }
+                ]
+            },
+            {
+                key: '2',
+                label: 'Movies',
+                data: 'Movies Folder',
+                icon: 'pi pi-fw pi-star-fill',
+                children: [
+                    {
+                        key: '2-0',
+                        icon: 'pi pi-fw pi-star-fill',
+                        label: 'Al Pacino',
+                        data: 'Pacino Movies',
+                        children: [
+                            { key: '2-0-0', label: 'Scarface', icon: 'pi pi-fw pi-video', data: 'Scarface Movie' },
+                            { key: '2-0-1', label: 'Serpico', icon: 'pi pi-fw pi-video', data: 'Serpico Movie' }
+                        ]
+                    },
+                    {
+                        key: '2-1',
+                        label: 'Robert De Niro',
+                        icon: 'pi pi-fw pi-star-fill',
+                        data: 'De Niro Movies',
+                        children: [
+                            { key: '2-1-0', label: 'Goodfellas', icon: 'pi pi-fw pi-video', data: 'Goodfellas Movie' },
+                            { key: '2-1-1', label: 'Untouchables', icon: 'pi pi-fw pi-video', data: 'Untouchables Movie' }
+                        ]
+                    }
+                ]
+            }
+        ];
+    },
+
+    getTreeTableNodesData() {
+        return [
+            {
+                key: '0',
+                data: {
+                    name: 'Applications',
+                    size: '100kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '0-0',
+                        data: {
+                            name: 'Vue',
+                            size: '25kb',
+                            type: 'Folder'
+                        },
+                        children: [
+                            {
+                                key: '0-0-0',
+                                data: {
+                                    name: 'vue.app',
+                                    size: '10kb',
+                                    type: 'Application'
+                                }
+                            },
+                            {
+                                key: '0-0-1',
+                                data: {
+                                    name: 'native.app',
+                                    size: '10kb',
+                                    type: 'Application'
+                                }
+                            },
+                            {
+                                key: '0-0-2',
+                                data: {
+                                    name: 'mobile.app',
+                                    size: '5kb',
+                                    type: 'Application'
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        key: '0-1',
+                        data: {
+                            name: 'editor.app',
+                            size: '25kb',
+                            type: 'Application'
+                        }
+                    },
+                    {
+                        key: '0-2',
+                        data: {
+                            name: 'settings.app',
+                            size: '50kb',
+                            type: 'Application'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '1',
+                data: {
+                    name: 'Cloud',
+                    size: '20kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '1-0',
+                        data: {
+                            name: 'backup-1.zip',
+                            size: '10kb',
+                            type: 'Zip'
+                        }
+                    },
+                    {
+                        key: '1-1',
+                        data: {
+                            name: 'backup-2.zip',
+                            size: '10kb',
+                            type: 'Zip'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '2',
+                data: {
+                    name: 'Desktop',
+                    size: '150kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '2-0',
+                        data: {
+                            name: 'note-meeting.txt',
+                            size: '50kb',
+                            type: 'Text'
+                        }
+                    },
+                    {
+                        key: '2-1',
+                        data: {
+                            name: 'note-todo.txt',
+                            size: '100kb',
+                            type: 'Text'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '3',
+                data: {
+                    name: 'Documents',
+                    size: '75kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '3-0',
+                        data: {
+                            name: 'Work',
+                            size: '55kb',
+                            type: 'Folder'
+                        },
+                        children: [
+                            {
+                                key: '3-0-0',
+                                data: {
+                                    name: 'Expenses.doc',
+                                    size: '30kb',
+                                    type: 'Document'
+                                }
+                            },
+                            {
+                                key: '3-0-1',
+                                data: {
+                                    name: 'Resume.doc',
+                                    size: '25kb',
+                                    type: 'Resume'
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        key: '3-1',
+                        data: {
+                            name: 'Home',
+                            size: '20kb',
+                            type: 'Folder'
+                        },
+                        children: [
+                            {
+                                key: '3-1-0',
+                                data: {
+                                    name: 'Invoices',
+                                    size: '20kb',
+                                    type: 'Text'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                key: '4',
+                data: {
+                    name: 'Downloads',
+                    size: '25kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '4-0',
+                        data: {
+                            name: 'Spanish',
+                            size: '10kb',
+                            type: 'Folder'
+                        },
+                        children: [
+                            {
+                                key: '4-0-0',
+                                data: {
+                                    name: 'tutorial-a1.txt',
+                                    size: '5kb',
+                                    type: 'Text'
+                                }
+                            },
+                            {
+                                key: '4-0-1',
+                                data: {
+                                    name: 'tutorial-a2.txt',
+                                    size: '5kb',
+                                    type: 'Text'
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        key: '4-1',
+                        data: {
+                            name: 'Travel',
+                            size: '15kb',
+                            type: 'Text'
+                        },
+                        children: [
+                            {
+                                key: '4-1-0',
+                                data: {
+                                    name: 'Hotel.pdf',
+                                    size: '10kb',
+                                    type: 'PDF'
+                                }
+                            },
+                            {
+                                key: '4-1-1',
+                                data: {
+                                    name: 'Flight.pdf',
+                                    size: '5kb',
+                                    type: 'PDF'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                key: '5',
+                data: {
+                    name: 'Main',
+                    size: '50kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '5-0',
+                        data: {
+                            name: 'bin',
+                            size: '50kb',
+                            type: 'Link'
+                        }
+                    },
+                    {
+                        key: '5-1',
+                        data: {
+                            name: 'etc',
+                            size: '100kb',
+                            type: 'Link'
+                        }
+                    },
+                    {
+                        key: '5-2',
+                        data: {
+                            name: 'var',
+                            size: '100kb',
+                            type: 'Link'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '6',
+                data: {
+                    name: 'Other',
+                    size: '5kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '6-0',
+                        data: {
+                            name: 'todo.txt',
+                            size: '3kb',
+                            type: 'Text'
+                        }
+                    },
+                    {
+                        key: '6-1',
+                        data: {
+                            name: 'logo.png',
+                            size: '2kb',
+                            type: 'Picture'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '7',
+                data: {
+                    name: 'Pictures',
+                    size: '150kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '7-0',
+                        data: {
+                            name: 'barcelona.jpg',
+                            size: '90kb',
+                            type: 'Picture'
+                        }
+                    },
+                    {
+                        key: '7-1',
+                        data: {
+                            name: 'primeng.png',
+                            size: '30kb',
+                            type: 'Picture'
+                        }
+                    },
+                    {
+                        key: '7-2',
+                        data: {
+                            name: 'prime.jpg',
+                            size: '30kb',
+                            type: 'Picture'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '8',
+                data: {
+                    name: 'Videos',
+                    size: '1500kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '8-0',
+                        data: {
+                            name: 'primefaces.mkv',
+                            size: '1000kb',
+                            type: 'Video'
+                        }
+                    },
+                    {
+                        key: '8-1',
+                        data: {
+                            name: 'intro.avi',
+                            size: '500kb',
+                            type: 'Video'
+                        }
+                    }
+                ]
+            }
+        ];
+    },
+
+    getTreeTableNodes() {
+        return Promise.resolve(this.getTreeTableNodesData());
+    },
+
+    getTreeNodes() {
+        return Promise.resolve(this.getTreeNodesData());
+    }
+};
diff --git a/apps/labs/service/PhotoService.js b/apps/labs/service/PhotoService.js
new file mode 100755
index 000000000..61bb79f5d
--- /dev/null
+++ b/apps/labs/service/PhotoService.js
@@ -0,0 +1,100 @@
+export const PhotoService = {
+    getData() {
+        return [
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+                alt: 'Description for Image 1',
+                title: 'Title 1'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria2.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria2s.jpg',
+                alt: 'Description for Image 2',
+                title: 'Title 2'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria3.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria3s.jpg',
+                alt: 'Description for Image 3',
+                title: 'Title 3'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria4.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria4s.jpg',
+                alt: 'Description for Image 4',
+                title: 'Title 4'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria5.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria5s.jpg',
+                alt: 'Description for Image 5',
+                title: 'Title 5'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria6.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria6s.jpg',
+                alt: 'Description for Image 6',
+                title: 'Title 6'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria7s.jpg',
+                alt: 'Description for Image 7',
+                title: 'Title 7'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria8.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria8s.jpg',
+                alt: 'Description for Image 8',
+                title: 'Title 8'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria9.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria9s.jpg',
+                alt: 'Description for Image 9',
+                title: 'Title 9'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10s.jpg',
+                alt: 'Description for Image 10',
+                title: 'Title 10'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11s.jpg',
+                alt: 'Description for Image 11',
+                title: 'Title 11'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg',
+                alt: 'Description for Image 12',
+                title: 'Title 12'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13s.jpg',
+                alt: 'Description for Image 13',
+                title: 'Title 13'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria14.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria14s.jpg',
+                alt: 'Description for Image 14',
+                title: 'Title 14'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria15.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria15s.jpg',
+                alt: 'Description for Image 15',
+                title: 'Title 15'
+            }
+        ];
+    },
+
+    getImages() {
+        return Promise.resolve(this.getData());
+    }
+};
diff --git a/apps/labs/service/ProductService.js b/apps/labs/service/ProductService.js
new file mode 100644
index 000000000..5119585f8
--- /dev/null
+++ b/apps/labs/service/ProductService.js
@@ -0,0 +1,1220 @@
+export const ProductService = {
+    getProductsData() {
+        return [
+            {
+                id: '1000',
+                code: 'f230fh0g3',
+                name: 'Bamboo Watch',
+                description: 'Product Description',
+                image: 'bamboo-watch.jpg',
+                price: 65,
+                category: 'Accessories',
+                quantity: 24,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1001',
+                code: 'nvklal433',
+                name: 'Black Watch',
+                description: 'Product Description',
+                image: 'black-watch.jpg',
+                price: 72,
+                category: 'Accessories',
+                quantity: 61,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1002',
+                code: 'zz21cz3c1',
+                name: 'Blue Band',
+                description: 'Product Description',
+                image: 'blue-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3
+            },
+            {
+                id: '1003',
+                code: '244wgerg2',
+                name: 'Blue T-Shirt',
+                description: 'Product Description',
+                image: 'blue-t-shirt.jpg',
+                price: 29,
+                category: 'Clothing',
+                quantity: 25,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1004',
+                code: 'h456wer53',
+                name: 'Bracelet',
+                description: 'Product Description',
+                image: 'bracelet.jpg',
+                price: 15,
+                category: 'Accessories',
+                quantity: 73,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1005',
+                code: 'av2231fwg',
+                name: 'Brown Purse',
+                description: 'Product Description',
+                image: 'brown-purse.jpg',
+                price: 120,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4
+            },
+            {
+                id: '1006',
+                code: 'bib36pfvm',
+                name: 'Chakra Bracelet',
+                description: 'Product Description',
+                image: 'chakra-bracelet.jpg',
+                price: 32,
+                category: 'Accessories',
+                quantity: 5,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3
+            },
+            {
+                id: '1007',
+                code: 'mbvjkgip5',
+                name: 'Galaxy Earrings',
+                description: 'Product Description',
+                image: 'galaxy-earrings.jpg',
+                price: 34,
+                category: 'Accessories',
+                quantity: 23,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1008',
+                code: 'vbb124btr',
+                name: 'Game Controller',
+                description: 'Product Description',
+                image: 'game-controller.jpg',
+                price: 99,
+                category: 'Electronics',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 4
+            },
+            {
+                id: '1009',
+                code: 'cm230f032',
+                name: 'Gaming Set',
+                description: 'Product Description',
+                image: 'gaming-set.jpg',
+                price: 299,
+                category: 'Electronics',
+                quantity: 63,
+                inventoryStatus: 'INSTOCK',
+                rating: 3
+            },
+            {
+                id: '1010',
+                code: 'plb34234v',
+                name: 'Gold Phone Case',
+                description: 'Product Description',
+                image: 'gold-phone-case.jpg',
+                price: 24,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4
+            },
+            {
+                id: '1011',
+                code: '4920nnc2d',
+                name: 'Green Earbuds',
+                description: 'Product Description',
+                image: 'green-earbuds.jpg',
+                price: 89,
+                category: 'Electronics',
+                quantity: 23,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1012',
+                code: '250vm23cc',
+                name: 'Green T-Shirt',
+                description: 'Product Description',
+                image: 'green-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 74,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1013',
+                code: 'fldsmn31b',
+                name: 'Grey T-Shirt',
+                description: 'Product Description',
+                image: 'grey-t-shirt.jpg',
+                price: 48,
+                category: 'Clothing',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 3
+            },
+            {
+                id: '1014',
+                code: 'waas1x2as',
+                name: 'Headphones',
+                description: 'Product Description',
+                image: 'headphones.jpg',
+                price: 175,
+                category: 'Electronics',
+                quantity: 8,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 5
+            },
+            {
+                id: '1015',
+                code: 'vb34btbg5',
+                name: 'Light Green T-Shirt',
+                description: 'Product Description',
+                image: 'light-green-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 34,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1016',
+                code: 'k8l6j58jl',
+                name: 'Lime Band',
+                description: 'Product Description',
+                image: 'lime-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 12,
+                inventoryStatus: 'INSTOCK',
+                rating: 3
+            },
+            {
+                id: '1017',
+                code: 'v435nn85n',
+                name: 'Mini Speakers',
+                description: 'Product Description',
+                image: 'mini-speakers.jpg',
+                price: 85,
+                category: 'Clothing',
+                quantity: 42,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1018',
+                code: '09zx9c0zc',
+                name: 'Painted Phone Case',
+                description: 'Product Description',
+                image: 'painted-phone-case.jpg',
+                price: 56,
+                category: 'Accessories',
+                quantity: 41,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1019',
+                code: 'mnb5mb2m5',
+                name: 'Pink Band',
+                description: 'Product Description',
+                image: 'pink-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 63,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1020',
+                code: 'r23fwf2w3',
+                name: 'Pink Purse',
+                description: 'Product Description',
+                image: 'pink-purse.jpg',
+                price: 110,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4
+            },
+            {
+                id: '1021',
+                code: 'pxpzczo23',
+                name: 'Purple Band',
+                description: 'Product Description',
+                image: 'purple-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 6,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3
+            },
+            {
+                id: '1022',
+                code: '2c42cb5cb',
+                name: 'Purple Gemstone Necklace',
+                description: 'Product Description',
+                image: 'purple-gemstone-necklace.jpg',
+                price: 45,
+                category: 'Accessories',
+                quantity: 62,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1023',
+                code: '5k43kkk23',
+                name: 'Purple T-Shirt',
+                description: 'Product Description',
+                image: 'purple-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 5
+            },
+            {
+                id: '1024',
+                code: 'lm2tny2k4',
+                name: 'Shoes',
+                description: 'Product Description',
+                image: 'shoes.jpg',
+                price: 64,
+                category: 'Clothing',
+                quantity: 0,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1025',
+                code: 'nbm5mv45n',
+                name: 'Sneakers',
+                description: 'Product Description',
+                image: 'sneakers.jpg',
+                price: 78,
+                category: 'Clothing',
+                quantity: 52,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1026',
+                code: 'zx23zc42c',
+                name: 'Teal T-Shirt',
+                description: 'Product Description',
+                image: 'teal-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 3,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3
+            },
+            {
+                id: '1027',
+                code: 'acvx872gc',
+                name: 'Yellow Earbuds',
+                description: 'Product Description',
+                image: 'yellow-earbuds.jpg',
+                price: 89,
+                category: 'Electronics',
+                quantity: 35,
+                inventoryStatus: 'INSTOCK',
+                rating: 3
+            },
+            {
+                id: '1028',
+                code: 'tx125ck42',
+                name: 'Yoga Mat',
+                description: 'Product Description',
+                image: 'yoga-mat.jpg',
+                price: 20,
+                category: 'Fitness',
+                quantity: 15,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1029',
+                code: 'gwuby345v',
+                name: 'Yoga Set',
+                description: 'Product Description',
+                image: 'yoga-set.jpg',
+                price: 20,
+                category: 'Fitness',
+                quantity: 25,
+                inventoryStatus: 'INSTOCK',
+                rating: 8
+            }
+        ];
+    },
+
+    getProductsWithOrdersData() {
+        return [
+            {
+                id: '1000',
+                code: 'f230fh0g3',
+                name: 'Bamboo Watch',
+                description: 'Product Description',
+                image: 'bamboo-watch.jpg',
+                price: 65,
+                category: 'Accessories',
+                quantity: 24,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1000-0',
+                        productCode: 'f230fh0g3',
+                        date: '2020-09-13',
+                        amount: 65,
+                        quantity: 1,
+                        customer: 'David James',
+                        status: 'PENDING'
+                    },
+                    {
+                        id: '1000-1',
+                        productCode: 'f230fh0g3',
+                        date: '2020-05-14',
+                        amount: 130,
+                        quantity: 2,
+                        customer: 'Leon Rodrigues',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1000-2',
+                        productCode: 'f230fh0g3',
+                        date: '2019-01-04',
+                        amount: 65,
+                        quantity: 1,
+                        customer: 'Juan Alejandro',
+                        status: 'RETURNED'
+                    },
+                    {
+                        id: '1000-3',
+                        productCode: 'f230fh0g3',
+                        date: '2020-09-13',
+                        amount: 195,
+                        quantity: 3,
+                        customer: 'Claire Morrow',
+                        status: 'CANCELLED'
+                    }
+                ]
+            },
+            {
+                id: '1001',
+                code: 'nvklal433',
+                name: 'Black Watch',
+                description: 'Product Description',
+                image: 'black-watch.jpg',
+                price: 72,
+                category: 'Accessories',
+                quantity: 61,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1001-0',
+                        productCode: 'nvklal433',
+                        date: '2020-05-14',
+                        amount: 72,
+                        quantity: 1,
+                        customer: 'Maisha Jefferson',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1001-1',
+                        productCode: 'nvklal433',
+                        date: '2020-02-28',
+                        amount: 144,
+                        quantity: 2,
+                        customer: 'Octavia Murillo',
+                        status: 'PENDING'
+                    }
+                ]
+            },
+            {
+                id: '1002',
+                code: 'zz21cz3c1',
+                name: 'Blue Band',
+                description: 'Product Description',
+                image: 'blue-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1002-0',
+                        productCode: 'zz21cz3c1',
+                        date: '2020-07-05',
+                        amount: 79,
+                        quantity: 1,
+                        customer: 'Stacey Leja',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1002-1',
+                        productCode: 'zz21cz3c1',
+                        date: '2020-02-06',
+                        amount: 79,
+                        quantity: 1,
+                        customer: 'Ashley Wickens',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1003',
+                code: '244wgerg2',
+                name: 'Blue T-Shirt',
+                description: 'Product Description',
+                image: 'blue-t-shirt.jpg',
+                price: 29,
+                category: 'Clothing',
+                quantity: 25,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: []
+            },
+            {
+                id: '1004',
+                code: 'h456wer53',
+                name: 'Bracelet',
+                description: 'Product Description',
+                image: 'bracelet.jpg',
+                price: 15,
+                category: 'Accessories',
+                quantity: 73,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1004-0',
+                        productCode: 'h456wer53',
+                        date: '2020-09-05',
+                        amount: 60,
+                        quantity: 4,
+                        customer: 'Mayumi Misaki',
+                        status: 'PENDING'
+                    },
+                    {
+                        id: '1004-1',
+                        productCode: 'h456wer53',
+                        date: '2019-04-16',
+                        amount: 2,
+                        quantity: 30,
+                        customer: 'Francesco Salvatore',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1005',
+                code: 'av2231fwg',
+                name: 'Brown Purse',
+                description: 'Product Description',
+                image: 'brown-purse.jpg',
+                price: 120,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1005-0',
+                        productCode: 'av2231fwg',
+                        date: '2020-01-25',
+                        amount: 120,
+                        quantity: 1,
+                        customer: 'Isabel Sinclair',
+                        status: 'RETURNED'
+                    },
+                    {
+                        id: '1005-1',
+                        productCode: 'av2231fwg',
+                        date: '2019-03-12',
+                        amount: 240,
+                        quantity: 2,
+                        customer: 'Lionel Clifford',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1005-2',
+                        productCode: 'av2231fwg',
+                        date: '2019-05-05',
+                        amount: 120,
+                        quantity: 1,
+                        customer: 'Cody Chavez',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1006',
+                code: 'bib36pfvm',
+                name: 'Chakra Bracelet',
+                description: 'Product Description',
+                image: 'chakra-bracelet.jpg',
+                price: 32,
+                category: 'Accessories',
+                quantity: 5,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1006-0',
+                        productCode: 'bib36pfvm',
+                        date: '2020-02-24',
+                        amount: 32,
+                        quantity: 1,
+                        customer: 'Arvin Darci',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1006-1',
+                        productCode: 'bib36pfvm',
+                        date: '2020-01-14',
+                        amount: 64,
+                        quantity: 2,
+                        customer: 'Izzy Jones',
+                        status: 'PENDING'
+                    }
+                ]
+            },
+            {
+                id: '1007',
+                code: 'mbvjkgip5',
+                name: 'Galaxy Earrings',
+                description: 'Product Description',
+                image: 'galaxy-earrings.jpg',
+                price: 34,
+                category: 'Accessories',
+                quantity: 23,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1007-0',
+                        productCode: 'mbvjkgip5',
+                        date: '2020-06-19',
+                        amount: 34,
+                        quantity: 1,
+                        customer: 'Jennifer Smith',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1008',
+                code: 'vbb124btr',
+                name: 'Game Controller',
+                description: 'Product Description',
+                image: 'game-controller.jpg',
+                price: 99,
+                category: 'Electronics',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1008-0',
+                        productCode: 'vbb124btr',
+                        date: '2020-01-05',
+                        amount: 99,
+                        quantity: 1,
+                        customer: 'Jeanfrancois David',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1008-1',
+                        productCode: 'vbb124btr',
+                        date: '2020-01-19',
+                        amount: 198,
+                        quantity: 2,
+                        customer: 'Ivar Greenwood',
+                        status: 'RETURNED'
+                    }
+                ]
+            },
+            {
+                id: '1009',
+                code: 'cm230f032',
+                name: 'Gaming Set',
+                description: 'Product Description',
+                image: 'gaming-set.jpg',
+                price: 299,
+                category: 'Electronics',
+                quantity: 63,
+                inventoryStatus: 'INSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1009-0',
+                        productCode: 'cm230f032',
+                        date: '2020-06-24',
+                        amount: 299,
+                        quantity: 1,
+                        customer: 'Kadeem Mujtaba',
+                        status: 'PENDING'
+                    },
+                    {
+                        id: '1009-1',
+                        productCode: 'cm230f032',
+                        date: '2020-05-11',
+                        amount: 299,
+                        quantity: 1,
+                        customer: 'Ashley Wickens',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1009-2',
+                        productCode: 'cm230f032',
+                        date: '2019-02-07',
+                        amount: 299,
+                        quantity: 1,
+                        customer: 'Julie Johnson',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1009-3',
+                        productCode: 'cm230f032',
+                        date: '2020-04-26',
+                        amount: 299,
+                        quantity: 1,
+                        customer: 'Tony Costa',
+                        status: 'CANCELLED'
+                    }
+                ]
+            },
+            {
+                id: '1010',
+                code: 'plb34234v',
+                name: 'Gold Phone Case',
+                description: 'Product Description',
+                image: 'gold-phone-case.jpg',
+                price: 24,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1010-0',
+                        productCode: 'plb34234v',
+                        date: '2020-02-04',
+                        amount: 24,
+                        quantity: 1,
+                        customer: 'James Butt',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1010-1',
+                        productCode: 'plb34234v',
+                        date: '2020-05-05',
+                        amount: 48,
+                        quantity: 2,
+                        customer: 'Josephine Darakjy',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1011',
+                code: '4920nnc2d',
+                name: 'Green Earbuds',
+                description: 'Product Description',
+                image: 'green-earbuds.jpg',
+                price: 89,
+                category: 'Electronics',
+                quantity: 23,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1011-0',
+                        productCode: '4920nnc2d',
+                        date: '2020-06-01',
+                        amount: 89,
+                        quantity: 1,
+                        customer: 'Art Venere',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1012',
+                code: '250vm23cc',
+                name: 'Green T-Shirt',
+                description: 'Product Description',
+                image: 'green-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 74,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1012-0',
+                        productCode: '250vm23cc',
+                        date: '2020-02-05',
+                        amount: 49,
+                        quantity: 1,
+                        customer: 'Lenna Paprocki',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1012-1',
+                        productCode: '250vm23cc',
+                        date: '2020-02-15',
+                        amount: 49,
+                        quantity: 1,
+                        customer: 'Donette Foller',
+                        status: 'PENDING'
+                    }
+                ]
+            },
+            {
+                id: '1013',
+                code: 'fldsmn31b',
+                name: 'Grey T-Shirt',
+                description: 'Product Description',
+                image: 'grey-t-shirt.jpg',
+                price: 48,
+                category: 'Clothing',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1013-0',
+                        productCode: 'fldsmn31b',
+                        date: '2020-04-01',
+                        amount: 48,
+                        quantity: 1,
+                        customer: 'Simona Morasca',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1014',
+                code: 'waas1x2as',
+                name: 'Headphones',
+                description: 'Product Description',
+                image: 'headphones.jpg',
+                price: 175,
+                category: 'Electronics',
+                quantity: 8,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1014-0',
+                        productCode: 'waas1x2as',
+                        date: '2020-05-15',
+                        amount: 175,
+                        quantity: 1,
+                        customer: 'Lenna Paprocki',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1014-1',
+                        productCode: 'waas1x2as',
+                        date: '2020-01-02',
+                        amount: 175,
+                        quantity: 1,
+                        customer: 'Donette Foller',
+                        status: 'CANCELLED'
+                    }
+                ]
+            },
+            {
+                id: '1015',
+                code: 'vb34btbg5',
+                name: 'Light Green T-Shirt',
+                description: 'Product Description',
+                image: 'light-green-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 34,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1015-0',
+                        productCode: 'vb34btbg5',
+                        date: '2020-07-02',
+                        amount: 98,
+                        quantity: 2,
+                        customer: 'Mitsue Tollner',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1016',
+                code: 'k8l6j58jl',
+                name: 'Lime Band',
+                description: 'Product Description',
+                image: 'lime-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 12,
+                inventoryStatus: 'INSTOCK',
+                rating: 3,
+                orders: []
+            },
+            {
+                id: '1017',
+                code: 'v435nn85n',
+                name: 'Mini Speakers',
+                description: 'Product Description',
+                image: 'mini-speakers.jpg',
+                price: 85,
+                category: 'Clothing',
+                quantity: 42,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1017-0',
+                        productCode: 'v435nn85n',
+                        date: '2020-07-12',
+                        amount: 85,
+                        quantity: 1,
+                        customer: 'Minna Amigon',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1018',
+                code: '09zx9c0zc',
+                name: 'Painted Phone Case',
+                description: 'Product Description',
+                image: 'painted-phone-case.jpg',
+                price: 56,
+                category: 'Accessories',
+                quantity: 41,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1018-0',
+                        productCode: '09zx9c0zc',
+                        date: '2020-07-01',
+                        amount: 56,
+                        quantity: 1,
+                        customer: 'Abel Maclead',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1018-1',
+                        productCode: '09zx9c0zc',
+                        date: '2020-05-02',
+                        amount: 56,
+                        quantity: 1,
+                        customer: 'Minna Amigon',
+                        status: 'RETURNED'
+                    }
+                ]
+            },
+            {
+                id: '1019',
+                code: 'mnb5mb2m5',
+                name: 'Pink Band',
+                description: 'Product Description',
+                image: 'pink-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 63,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: []
+            },
+            {
+                id: '1020',
+                code: 'r23fwf2w3',
+                name: 'Pink Purse',
+                description: 'Product Description',
+                image: 'pink-purse.jpg',
+                price: 110,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1020-0',
+                        productCode: 'r23fwf2w3',
+                        date: '2020-05-29',
+                        amount: 110,
+                        quantity: 1,
+                        customer: 'Kiley Caldarera',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1020-1',
+                        productCode: 'r23fwf2w3',
+                        date: '2020-02-11',
+                        amount: 220,
+                        quantity: 2,
+                        customer: 'Graciela Ruta',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1021',
+                code: 'pxpzczo23',
+                name: 'Purple Band',
+                description: 'Product Description',
+                image: 'purple-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 6,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1021-0',
+                        productCode: 'pxpzczo23',
+                        date: '2020-02-02',
+                        amount: 79,
+                        quantity: 1,
+                        customer: 'Cammy Albares',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1022',
+                code: '2c42cb5cb',
+                name: 'Purple Gemstone Necklace',
+                description: 'Product Description',
+                image: 'purple-gemstone-necklace.jpg',
+                price: 45,
+                category: 'Accessories',
+                quantity: 62,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1022-0',
+                        productCode: '2c42cb5cb',
+                        date: '2020-06-29',
+                        amount: 45,
+                        quantity: 1,
+                        customer: 'Mattie Poquette',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1022-1',
+                        productCode: '2c42cb5cb',
+                        date: '2020-02-11',
+                        amount: 135,
+                        quantity: 3,
+                        customer: 'Meaghan Garufi',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1023',
+                code: '5k43kkk23',
+                name: 'Purple T-Shirt',
+                description: 'Product Description',
+                image: 'purple-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1023-0',
+                        productCode: '5k43kkk23',
+                        date: '2020-04-15',
+                        amount: 49,
+                        quantity: 1,
+                        customer: 'Gladys Rim',
+                        status: 'RETURNED'
+                    }
+                ]
+            },
+            {
+                id: '1024',
+                code: 'lm2tny2k4',
+                name: 'Shoes',
+                description: 'Product Description',
+                image: 'shoes.jpg',
+                price: 64,
+                category: 'Clothing',
+                quantity: 0,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: []
+            },
+            {
+                id: '1025',
+                code: 'nbm5mv45n',
+                name: 'Sneakers',
+                description: 'Product Description',
+                image: 'sneakers.jpg',
+                price: 78,
+                category: 'Clothing',
+                quantity: 52,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1025-0',
+                        productCode: 'nbm5mv45n',
+                        date: '2020-02-19',
+                        amount: 78,
+                        quantity: 1,
+                        customer: 'Yuki Whobrey',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1025-1',
+                        productCode: 'nbm5mv45n',
+                        date: '2020-05-21',
+                        amount: 78,
+                        quantity: 1,
+                        customer: 'Fletcher Flosi',
+                        status: 'PENDING'
+                    }
+                ]
+            },
+            {
+                id: '1026',
+                code: 'zx23zc42c',
+                name: 'Teal T-Shirt',
+                description: 'Product Description',
+                image: 'teal-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 3,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1026-0',
+                        productCode: 'zx23zc42c',
+                        date: '2020-04-24',
+                        amount: 98,
+                        quantity: 2,
+                        customer: 'Bette Nicka',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1027',
+                code: 'acvx872gc',
+                name: 'Yellow Earbuds',
+                description: 'Product Description',
+                image: 'yellow-earbuds.jpg',
+                price: 89,
+                category: 'Electronics',
+                quantity: 35,
+                inventoryStatus: 'INSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1027-0',
+                        productCode: 'acvx872gc',
+                        date: '2020-01-29',
+                        amount: 89,
+                        quantity: 1,
+                        customer: 'Veronika Inouye',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1027-1',
+                        productCode: 'acvx872gc',
+                        date: '2020-06-11',
+                        amount: 89,
+                        quantity: 1,
+                        customer: 'Willard Kolmetz',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1028',
+                code: 'tx125ck42',
+                name: 'Yoga Mat',
+                description: 'Product Description',
+                image: 'yoga-mat.jpg',
+                price: 20,
+                category: 'Fitness',
+                quantity: 15,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: []
+            },
+            {
+                id: '1029',
+                code: 'gwuby345v',
+                name: 'Yoga Set',
+                description: 'Product Description',
+                image: 'yoga-set.jpg',
+                price: 20,
+                category: 'Fitness',
+                quantity: 25,
+                inventoryStatus: 'INSTOCK',
+                rating: 8,
+                orders: [
+                    {
+                        id: '1029-0',
+                        productCode: 'gwuby345v',
+                        date: '2020-02-14',
+                        amount: 4,
+                        quantity: 80,
+                        customer: 'Maryann Royster',
+                        status: 'DELIVERED'
+                    }
+                ]
+            }
+        ];
+    },
+
+    getProductsMini() {
+        return Promise.resolve(this.getProductsData().slice(0, 5));
+    },
+
+    getProductsSmall() {
+        return Promise.resolve(this.getProductsData().slice(0, 10));
+    },
+
+    getProducts() {
+        return Promise.resolve(this.getProductsData());
+    },
+
+    getProductsWithOrdersSmall() {
+        return Promise.resolve(this.getProductsWithOrdersData().slice(0, 10));
+    },
+
+    getProductsWithOrders() {
+        return Promise.resolve(this.getProductsWithOrdersData());
+    }
+};
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
new file mode 100644
index 000000000..a872edbaf
--- /dev/null
+++ b/apps/labs/tailwind.config.js
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+import PrimeUI from 'tailwindcss-primeui';
+
+export default {
+    darkMode: ['selector', '[class~="p-dark"]'],
+    content: ['./components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
+    plugins: [PrimeUI],
+    theme: {
+        screens: {
+            sm: '576px',
+            md: '768px',
+            lg: '992px',
+            xl: '1200px',
+            '2xl': '1920px'
+        }
+    }
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be72217ed..ee0c43890 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,10 +101,77 @@ importers:
         version: 5.7.3
 
   apps/labs:
+    dependencies:
+      '@docsearch/js':
+        specifier: catalog:app
+        version: 3.9.0(@algolia/client-search@5.20.3)(search-insights@2.17.3)
+      '@primeuix/themes':
+        specifier: 'catalog:'
+        version: 1.0.0
+      '@primevue/core':
+        specifier: workspace:*
+        version: link:../../packages/core
+      '@primevue/forms':
+        specifier: workspace:*
+        version: link:../../packages/forms
+      '@primevue/nuxt-module':
+        specifier: workspace:*
+        version: link:../../packages/nuxt-module
+      chart.js:
+        specifier: catalog:app
+        version: 3.3.2
+      primeicons:
+        specifier: 'catalog:'
+        version: 7.0.0
+      primevue:
+        specifier: workspace:*
+        version: link:../../packages/primevue
+      quill:
+        specifier: catalog:app
+        version: 2.0.0
+      superstruct:
+        specifier: ^2.0.2
+        version: 2.0.2
+      valibot:
+        specifier: ^0.42.1
+        version: 0.42.1(typescript@5.7.3)
+      yup:
+        specifier: 1.4.0
+        version: 1.4.0
+      zod:
+        specifier: 3.23.8
+        version: 3.23.8
     devDependencies:
+      '@stackblitz/sdk':
+        specifier: ^1.8.2
+        version: 1.11.0
+      autoprefixer:
+        specifier: ^10
+        version: 10.4.20(postcss@8.5.3)
+      jsdom:
+        specifier: ^19.0.0
+        version: 19.0.0
       nuxt:
         specifier: catalog:app
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+      postcss:
+        specifier: ^8.4.31
+        version: 8.5.3
+      sass:
+        specifier: catalog:app
+        version: 1.45.0
+      sass-loader:
+        specifier: catalog:app
+        version: 8.0.2(sass@1.45.0)(webpack@5.98.0)
+      tailwindcss:
+        specifier: ^3
+        version: 3.4.17
+      tailwindcss-primeui:
+        specifier: 'catalog:'
+        version: 0.5.1(tailwindcss@3.4.17)
+      typedoc:
+        specifier: 0.27.9
+        version: 0.27.9(typescript@5.7.3)
       vite:
         specifier: catalog:app
         version: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)

From bf6b02b59ff4f91307cbf07b57e188ec5bdf5497 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 28 Feb 2025 12:08:44 +0000
Subject: [PATCH 17/77] refactor: update components configuration and optimize
 Vite dependencies

---
 apps/showcase/nuxt.config.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js
index fd5fd11dd..f86931f54 100644
--- a/apps/showcase/nuxt.config.js
+++ b/apps/showcase/nuxt.config.js
@@ -21,18 +21,19 @@ export default defineNuxtConfig({
     compatibilityDate: '2024-11-01',
     devtools: { enabled: false },
     modules: ['@primevue/nuxt-module'],
-    components: {
-        path: '~/components',
-        pathPrefix: false
-    },
+    components: [
+        {
+            path: '~/components',
+            pathPrefix: false
+        }
+    ],
     vite: {
+        optimizeDeps: {
+            noDiscovery: true,
+            include: []
+        },
         resolve: {
             dedupe: ['vue', '@primeuix/styles', '@primeuix/themes', '@primeuix/utils'],
-            optimizeDeps: {
-                disabled: true,
-                noDiscovery: true,
-                include: []
-            },
             alias
         }
     },

From f2a9b28e1a730d80fd6812cdeb3bec15e27b6fda Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 28 Feb 2025 15:13:05 +0300
Subject: [PATCH 18/77] Optimize dependency updates for quill

---
 apps/showcase/nuxt.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js
index f86931f54..d9b7aca78 100644
--- a/apps/showcase/nuxt.config.js
+++ b/apps/showcase/nuxt.config.js
@@ -30,7 +30,7 @@ export default defineNuxtConfig({
     vite: {
         optimizeDeps: {
             noDiscovery: true,
-            include: []
+            include: ['quill']
         },
         resolve: {
             dedupe: ['vue', '@primeuix/styles', '@primeuix/themes', '@primeuix/utils'],

From 3584b7c45675d2932fa73a46fe6339b7ba634037 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 28 Feb 2025 15:14:58 +0300
Subject: [PATCH 19/77] Type definition path correction

---
 packages/nuxt-module/src/runtime/plugin.server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt-module/src/runtime/plugin.server.ts b/packages/nuxt-module/src/runtime/plugin.server.ts
index 5fb07d560..6aadc453d 100644
--- a/packages/nuxt-module/src/runtime/plugin.server.ts
+++ b/packages/nuxt-module/src/runtime/plugin.server.ts
@@ -1,4 +1,4 @@
-import type { NitroApp } from 'nitropack';
+import type { NitroApp } from 'nitropack/types';
 // @ts-expect-error
 import { styles, stylesToTop, themes } from '#primevue-style';
 //import { useRuntimeConfig } from '#imports';

From 5f64ab9fb272bddacc22d5743815979c3df44fd8 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 28 Feb 2025 15:28:53 +0300
Subject: [PATCH 20/77] Remove type module from showcase

---
 apps/showcase/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index 77a656563..0e69952e5 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -28,7 +28,6 @@
         "unstyled",
         "passthrough"
     ],
-    "type": "module",
     "scripts": {
         "build": "pnpm run build:prebuild && nuxt build",
         "dev": "nuxt dev",

From b7c4b443b068bd094adad4613143ae72403d5812 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 01:59:25 +0300
Subject: [PATCH 21/77] Initiate Plex

---
 apps/labs/assets/data/menu.json               | 416 +-------
 apps/labs/components/doc/DocComponent.vue     |   7 -
 apps/labs/components/doc/DocPreset.vue        |  45 -
 apps/labs/components/doc/DocPresetSection.vue |  25 -
 apps/labs/components/doc/DocSectionCode.vue   | 124 +--
 apps/labs/components/landing/HeroSection.vue  | 850 ----------------
 .../components/landing/samples/CardsApp.vue   | 589 -----------
 .../components/landing/samples/ChatApp.vue    | 433 --------
 .../landing/samples/CustomersApp.vue          | 265 -----
 .../components/landing/samples/InboxApp.vue   | 364 -------
 .../components/landing/samples/MoviesApp.vue  | 160 ---
 .../landing/samples/OverviewApp.vue           | 437 --------
 .../components/tutorial/ToggleInputSwitch.vue |  97 --
 apps/labs/doc/accordion/AccessibilityDoc.vue  |  70 --
 apps/labs/doc/accordion/BasicDoc.vue          | 155 ---
 apps/labs/doc/accordion/ControlledDoc.vue     | 190 ----
 apps/labs/doc/accordion/DisabledDoc.vue       | 167 ---
 apps/labs/doc/accordion/DynamicDoc.vue        |  94 --
 apps/labs/doc/accordion/ImportDoc.vue         |  21 -
 apps/labs/doc/accordion/MultipleDoc.vue       | 155 ---
 apps/labs/doc/accordion/TemplateDoc.vue       | 230 -----
 .../doc/autocomplete/AccessibilityDoc.vue     | 177 ----
 apps/labs/doc/autocomplete/BasicDoc.vue       |  71 --
 apps/labs/doc/autocomplete/DisabledDoc.vue    |  50 -
 apps/labs/doc/autocomplete/DropdownDoc.vue    |  80 --
 apps/labs/doc/autocomplete/FilledDoc.vue      |  71 --
 apps/labs/doc/autocomplete/FloatLabelDoc.vue  | 129 ---
 .../doc/autocomplete/ForceSelectionDoc.vue    | 117 ---
 apps/labs/doc/autocomplete/FormsDoc.vue       | 201 ----
 apps/labs/doc/autocomplete/GroupDoc.vue       | 236 -----
 apps/labs/doc/autocomplete/IftaLabelDoc.vue   |  83 --
 apps/labs/doc/autocomplete/ImportDoc.vue      |  18 -
 apps/labs/doc/autocomplete/InvalidDoc.vue     |  78 --
 apps/labs/doc/autocomplete/MultipleDoc.vue    |  90 --
 apps/labs/doc/autocomplete/ObjectsDoc.vue     | 117 ---
 apps/labs/doc/autocomplete/SizesDoc.vue       |  85 --
 apps/labs/doc/autocomplete/TemplateDoc.vue    | 173 ----
 .../doc/autocomplete/VirtualScrollDoc.vue     | 113 ---
 apps/labs/doc/avatar/AccessibilityDoc.vue     |  12 -
 apps/labs/doc/avatar/AvatarGroupDoc.vue       |  73 --
 apps/labs/doc/avatar/IconDoc.vue              | 118 ---
 apps/labs/doc/avatar/ImageDoc.vue             | 110 --
 apps/labs/doc/avatar/ImportDoc.vue            |  19 -
 apps/labs/doc/avatar/LabelDoc.vue             | 114 ---
 apps/labs/doc/badge/AccessibilityDoc.vue      |  12 -
 apps/labs/doc/badge/BasicDoc.vue              |  45 -
 apps/labs/doc/badge/ButtonDoc.vue             |  47 -
 apps/labs/doc/badge/ImportDoc.vue             |  20 -
 apps/labs/doc/badge/OverlayDoc.vue            |  77 --
 apps/labs/doc/badge/SeverityDoc.vue           |  67 --
 apps/labs/doc/badge/SizeDoc.vue               |  57 --
 apps/labs/doc/blockui/AccessibilityDoc.vue    |  11 -
 apps/labs/doc/blockui/BasicDoc.vue            |  98 --
 apps/labs/doc/blockui/DocumentDoc.vue         |  83 --
 apps/labs/doc/blockui/ImportDoc.vue           |  18 -
 apps/labs/doc/breadcrumb/AccessibilityDoc.vue |  12 -
 apps/labs/doc/breadcrumb/BasicDoc.vue         |  75 --
 apps/labs/doc/breadcrumb/ImportDoc.vue        |  18 -
 apps/labs/doc/breadcrumb/RouterDoc.vue        | 122 ---
 apps/labs/doc/breadcrumb/TemplateDoc.vue      |  85 --
 apps/labs/doc/button/AccessibilityDoc.vue     |  57 --
 apps/labs/doc/button/BadgeDoc.vue             |  47 -
 apps/labs/doc/button/BasicDoc.vue             |  43 -
 apps/labs/doc/button/ButtonGroupDoc.vue       |  59 --
 apps/labs/doc/button/DisabledDoc.vue          |  43 -
 apps/labs/doc/button/HeadlessDoc.vue          |  71 --
 apps/labs/doc/button/IconOnlyDoc.vue          | 245 -----
 apps/labs/doc/button/IconsDoc.vue             |  71 --
 apps/labs/doc/button/ImportDoc.vue            |  18 -
 apps/labs/doc/button/LinkDoc.vue              |  51 -
 apps/labs/doc/button/LoadingDoc.vue           |  77 --
 apps/labs/doc/button/OutlinedDoc.vue          |  71 --
 apps/labs/doc/button/RaisedDoc.vue            |  71 --
 apps/labs/doc/button/RaisedTextDoc.vue        |  71 --
 apps/labs/doc/button/RoundedDoc.vue           |  71 --
 apps/labs/doc/button/SeverityDoc.vue          |  71 --
 apps/labs/doc/button/SizesDoc.vue             |  51 -
 apps/labs/doc/button/TemplateDoc.vue          |  81 --
 apps/labs/doc/button/TextDoc.vue              |  71 --
 apps/labs/doc/card/AccessibilityDoc.vue       |  30 -
 apps/labs/doc/card/AdvancedDoc.vue            | 111 --
 apps/labs/doc/card/BasicDoc.vue               |  71 --
 apps/labs/doc/card/ImportDoc.vue              |  18 -
 apps/labs/doc/carousel/AccessibilityDoc.vue   | 113 ---
 apps/labs/doc/carousel/BasicDoc.vue           | 278 -----
 apps/labs/doc/carousel/CircularDoc.vue        | 278 -----
 apps/labs/doc/carousel/ImportDoc.vue          |  18 -
 apps/labs/doc/carousel/ResponsiveDoc.vue      | 280 -----
 apps/labs/doc/carousel/VerticalDoc.vue        | 212 ----
 .../doc/cascadeselect/AccessibilityDoc.vue    | 136 ---
 apps/labs/doc/cascadeselect/BasicDoc.vue      | 282 ------
 apps/labs/doc/cascadeselect/ClearIconDoc.vue  | 279 -----
 apps/labs/doc/cascadeselect/DisabledDoc.vue   |  45 -
 apps/labs/doc/cascadeselect/FilledDoc.vue     | 279 -----
 apps/labs/doc/cascadeselect/FloatLabelDoc.vue | 334 ------
 apps/labs/doc/cascadeselect/FormsDoc.vue      | 367 -------
 apps/labs/doc/cascadeselect/IftaLabelDoc.vue  | 288 ------
 apps/labs/doc/cascadeselect/ImportDoc.vue     |  18 -
 apps/labs/doc/cascadeselect/InvalidDoc.vue    | 301 ------
 .../doc/cascadeselect/LoadingStateDoc.vue     |  45 -
 apps/labs/doc/cascadeselect/SizesDoc.vue      | 299 ------
 apps/labs/doc/cascadeselect/TemplateDoc.vue   | 359 -------
 apps/labs/doc/checkbox/AccessibilityDoc.vue   |  53 -
 apps/labs/doc/checkbox/BasicDoc.vue           |  54 -
 apps/labs/doc/checkbox/DisabledDoc.vue        |  61 --
 apps/labs/doc/checkbox/DynamicDoc.vue         |  90 --
 apps/labs/doc/checkbox/FilledDoc.vue          |  54 -
 apps/labs/doc/checkbox/FormsDoc.vue           | 200 ----
 apps/labs/doc/checkbox/GroupDoc.vue           | 116 ---
 apps/labs/doc/checkbox/ImportDoc.vue          |  18 -
 apps/labs/doc/checkbox/IndeterminateDoc.vue   |  54 -
 apps/labs/doc/checkbox/InvalidDoc.vue         |  54 -
 apps/labs/doc/checkbox/SizesDoc.vue           | 100 --
 apps/labs/doc/chip/AccessibilityDoc.vue       |  35 -
 apps/labs/doc/chip/BasicDoc.vue               |  57 --
 apps/labs/doc/chip/IconDoc.vue                |  55 -
 apps/labs/doc/chip/ImageDoc.vue               |  57 --
 apps/labs/doc/chip/ImportDoc.vue              |  18 -
 apps/labs/doc/chip/StyleDoc.vue               |  33 -
 apps/labs/doc/chip/TemplateDoc.vue            |  57 --
 .../labs/doc/colorpicker/AccessibilityDoc.vue |  98 --
 apps/labs/doc/colorpicker/BasicDoc.vue        |  54 -
 apps/labs/doc/colorpicker/DisabledDoc.vue     |  54 -
 apps/labs/doc/colorpicker/FormatDoc.vue       | 104 --
 apps/labs/doc/colorpicker/FormsDoc.vue        | 130 ---
 apps/labs/doc/colorpicker/ImportDoc.vue       |  18 -
 apps/labs/doc/colorpicker/InlineDoc.vue       |  54 -
 apps/labs/doc/common/presetdoc/index.json     |  87 --
 .../doc/confirmdialog/AccessibilityDoc.vue    | 108 --
 apps/labs/doc/confirmdialog/BasicDoc.vue      | 196 ----
 .../confirmdialog/ConfirmationServiceDoc.vue  |  35 -
 apps/labs/doc/confirmdialog/HeadlessDoc.vue   | 156 ---
 apps/labs/doc/confirmdialog/ImportDoc.vue     |  18 -
 apps/labs/doc/confirmdialog/PositionDoc.vue   | 186 ----
 apps/labs/doc/confirmdialog/TemplateDoc.vue   | 164 ---
 .../doc/confirmpopup/AccessibilityDoc.vue     | 107 --
 apps/labs/doc/confirmpopup/BasicDoc.vue       | 195 ----
 .../confirmpopup/ConfirmationServiceDoc.vue   |  35 -
 apps/labs/doc/confirmpopup/HeadlessDoc.vue    | 140 ---
 apps/labs/doc/confirmpopup/ImportDoc.vue      |  18 -
 apps/labs/doc/confirmpopup/TemplateDoc.vue    | 158 ---
 .../labs/doc/contextmenu/AccessibilityDoc.vue |  88 --
 apps/labs/doc/contextmenu/BasicDoc.vue        |  83 --
 apps/labs/doc/contextmenu/CommandDoc.vue      | 269 -----
 apps/labs/doc/contextmenu/DataTableDoc.vue    |   5 -
 apps/labs/doc/contextmenu/DocumentDoc.vue     | 135 ---
 apps/labs/doc/contextmenu/ImportDoc.vue       |  18 -
 apps/labs/doc/contextmenu/RouterDoc.vue       | 220 ----
 apps/labs/doc/contextmenu/TemplateDoc.vue     | 320 ------
 apps/labs/doc/datatable/AccessibilityDoc.vue  | 176 ----
 apps/labs/doc/datatable/BasicDoc.vue          | 109 --
 apps/labs/doc/datatable/ColumnGroupDoc.vue    | 339 -------
 apps/labs/doc/datatable/ColumnToggleDoc.vue   | 161 ---
 .../doc/datatable/ConditionalStyleDoc.vue     | 166 ---
 apps/labs/doc/datatable/ContextMenuDoc.vue    | 199 ----
 apps/labs/doc/datatable/DynamicColumnsDoc.vue | 121 ---
 apps/labs/doc/datatable/ExportDoc.vue         | 141 ---
 apps/labs/doc/datatable/GridLinesDoc.vue      | 109 --
 apps/labs/doc/datatable/ImportDoc.vue         |  21 -
 apps/labs/doc/datatable/LazyLoadDoc.vue       | 489 ---------
 apps/labs/doc/datatable/ReorderDoc.vue        | 157 ---
 apps/labs/doc/datatable/RowExpansionDoc.vue   | 485 ---------
 apps/labs/doc/datatable/SizeDoc.vue           | 137 ---
 apps/labs/doc/datatable/StatefulDoc.vue       | 479 ---------
 apps/labs/doc/datatable/StripedRowsDoc.vue    | 109 --
 apps/labs/doc/datatable/TemplateDoc.vue       | 265 -----
 .../doc/datatable/colresize/ExpandModeDoc.vue | 107 --
 .../doc/datatable/colresize/FitModeDoc.vue    | 110 --
 apps/labs/doc/datatable/edit/CellEditDoc.vue  | 304 ------
 apps/labs/doc/datatable/edit/RowEditDoc.vue   | 351 -------
 .../datatable/filter/AdvancedFilterDoc.vue    | 755 --------------
 .../doc/datatable/filter/BasicFilterDoc.vue   | 537 ----------
 .../pagination/PaginationBasicDoc.vue         | 115 ---
 .../pagination/PaginationHeadlessDoc.vue      | 155 ---
 .../pagination/PaginationTemplateDoc.vue      | 156 ---
 .../rowgroup/ExpandableRowGroupDoc.vue        | 334 ------
 .../datatable/rowgroup/RowSpanRowGroupDoc.vue | 290 ------
 .../rowgroup/SubHeaderRowGroupDoc.vue         | 302 ------
 .../rowselection/CheckboxRowSelectionDoc.vue  | 120 ---
 .../rowselection/ColumnRowSelectionDoc.vue    | 143 ---
 .../rowselection/MultipleRowsSelectionDoc.vue | 132 ---
 .../RadioButtonRowSelectionDoc.vue            | 122 ---
 .../rowselection/RowSelectEventsDoc.vue       | 141 ---
 .../rowselection/SingleRowSelectionDoc.vue    | 136 ---
 .../doc/datatable/samples/CustomersDoc.vue    | 709 -------------
 .../doc/datatable/samples/ProductsDoc.vue     | 958 ------------------
 .../datatable/scroll/FlexibleScrollDoc.vue    | 151 ---
 .../doc/datatable/scroll/FrozenColumnsDoc.vue | 181 ----
 .../doc/datatable/scroll/FrozenRowsDoc.vue    | 281 -----
 .../datatable/scroll/HorizontalScrollDoc.vue  | 168 ---
 .../datatable/scroll/VerticalScrollDoc.vue    | 120 ---
 .../doc/datatable/sort/MultipleColumnsDoc.vue | 109 --
 apps/labs/doc/datatable/sort/PresortDoc.vue   | 143 ---
 .../doc/datatable/sort/RemovableSortDoc.vue   | 109 --
 .../doc/datatable/sort/SingleColumnDoc.vue    | 109 --
 .../virtualscroll/LazyVirtualScrollDoc.vue    | 313 ------
 .../virtualscroll/PreloadVirtualScrollDoc.vue | 109 --
 apps/labs/doc/dataview/AccessibilityDoc.vue   |  37 -
 apps/labs/doc/dataview/BasicDoc.vue           | 278 -----
 apps/labs/doc/dataview/ImportDoc.vue          |  18 -
 apps/labs/doc/dataview/LayoutDoc.vue          | 478 ---------
 apps/labs/doc/dataview/LoadingDoc.vue         | 370 -------
 apps/labs/doc/dataview/PaginationDoc.vue      | 278 -----
 apps/labs/doc/dataview/SortingDoc.vue         | 354 -------
 apps/labs/doc/datepicker/AccessibilityDoc.vue | 211 ----
 apps/labs/doc/datepicker/BasicDoc.vue         |  54 -
 apps/labs/doc/datepicker/ButtonBarDoc.vue     |  54 -
 apps/labs/doc/datepicker/DateTemplateDoc.vue  |  74 --
 apps/labs/doc/datepicker/DisabledDoc.vue      |  54 -
 apps/labs/doc/datepicker/FilledDoc.vue        |  54 -
 apps/labs/doc/datepicker/FloatLabelDoc.vue    | 112 --
 apps/labs/doc/datepicker/FormatDoc.vue        |  73 --
 apps/labs/doc/datepicker/FormsDoc.vue         | 148 ---
 apps/labs/doc/datepicker/IconDoc.vue          | 111 --
 apps/labs/doc/datepicker/IftaLabelDoc.vue     |  66 --
 apps/labs/doc/datepicker/ImportDoc.vue        |  18 -
 apps/labs/doc/datepicker/InlineDoc.vue        |  54 -
 apps/labs/doc/datepicker/InvalidDoc.vue       |  61 --
 apps/labs/doc/datepicker/LocaleDoc.vue        |   5 -
 apps/labs/doc/datepicker/MinMaxDoc.vue        | 105 --
 apps/labs/doc/datepicker/MonthPickerDoc.vue   |  54 -
 apps/labs/doc/datepicker/MultipleDoc.vue      |  54 -
 .../labs/doc/datepicker/MultipleMonthsDoc.vue |  54 -
 apps/labs/doc/datepicker/RangeDoc.vue         |  54 -
 apps/labs/doc/datepicker/SizesDoc.vue         |  68 --
 apps/labs/doc/datepicker/TimeDoc.vue          |  95 --
 apps/labs/doc/datepicker/YearPickerDoc.vue    |  54 -
 .../doc/deferredcontent/AccessibilityDoc.vue  |  29 -
 apps/labs/doc/deferredcontent/BasicDoc.vue    |  76 --
 .../labs/doc/deferredcontent/DataTableDoc.vue | 111 --
 apps/labs/doc/deferredcontent/ImportDoc.vue   |  18 -
 apps/labs/doc/dialog/AccessibilityDoc.vue     |  90 --
 apps/labs/doc/dialog/BasicDoc.vue             | 116 ---
 apps/labs/doc/dialog/HeadlessDoc.vue          | 170 ----
 apps/labs/doc/dialog/ImportDoc.vue            |  18 -
 apps/labs/doc/dialog/LongContentDoc.vue       | 193 ----
 apps/labs/doc/dialog/MaximizableDoc.vue       |  80 --
 apps/labs/doc/dialog/PositionDoc.vue          | 190 ----
 apps/labs/doc/dialog/ResponsiveDoc.vue        |  84 --
 apps/labs/doc/dialog/TemplateDoc.vue          | 140 ---
 apps/labs/doc/dialog/WithoutModalDoc.vue      | 116 ---
 apps/labs/doc/divider/AccessibilityDoc.vue    |   9 -
 apps/labs/doc/divider/BasicDoc.vue            | 139 ---
 apps/labs/doc/divider/ContentDoc.vue          | 166 ---
 apps/labs/doc/divider/ImportDoc.vue           |  18 -
 apps/labs/doc/divider/LoginDoc.vue            | 127 ---
 apps/labs/doc/divider/TypeDoc.vue             | 139 ---
 apps/labs/doc/divider/VerticalDoc.vue         | 111 --
 apps/labs/doc/dock/AccessibilityDoc.vue       |  77 --
 apps/labs/doc/dock/AdvancedDoc.vue            | 928 -----------------
 apps/labs/doc/dock/BasicDoc.vue               | 256 -----
 apps/labs/doc/dock/ImportDoc.vue              |  18 -
 apps/labs/doc/drawer/AccessibilityDoc.vue     |  87 --
 apps/labs/doc/drawer/BasicDoc.vue             |  68 --
 apps/labs/doc/drawer/FullScreenDoc.vue        |  68 --
 apps/labs/doc/drawer/HeadlessDoc.vue          | 784 --------------
 apps/labs/doc/drawer/ImportDoc.vue            |  18 -
 apps/labs/doc/drawer/PositionDoc.vue          | 147 ---
 apps/labs/doc/drawer/SizeDoc.vue              |  68 --
 apps/labs/doc/drawer/TemplateDoc.vue          | 114 ---
 .../doc/dynamicdialog/AccessibilityDoc.vue    |   5 -
 .../labs/doc/dynamicdialog/CloseDialogDoc.vue |  26 -
 .../doc/dynamicdialog/CustomizationDoc.vue    |  39 -
 .../doc/dynamicdialog/DialogServiceDoc.vue    |  44 -
 apps/labs/doc/dynamicdialog/EventsDoc.vue     |  45 -
 apps/labs/doc/dynamicdialog/ExampleDoc.vue    | 397 --------
 apps/labs/doc/dynamicdialog/ImportDoc.vue     |  18 -
 apps/labs/doc/dynamicdialog/OpenDialogDoc.vue |  42 -
 .../labs/doc/dynamicdialog/PassingDataDoc.vue |  71 --
 .../doc/dynamicdialog/demo/FooterDemo.vue     |  14 -
 apps/labs/doc/dynamicdialog/demo/InfoDemo.vue |  29 -
 .../dynamicdialog/demo/ProductListDemo.vue    |  57 --
 apps/labs/doc/fieldset/AccessibilityDoc.vue   |  41 -
 apps/labs/doc/fieldset/BasicDoc.vue           |  63 --
 apps/labs/doc/fieldset/ImportDoc.vue          |  18 -
 apps/labs/doc/fieldset/TemplateDoc.vue        |  87 --
 apps/labs/doc/fieldset/ToggleableDoc.vue      |  63 --
 apps/labs/doc/fileupload/AccessibilityDoc.vue |   9 -
 apps/labs/doc/fileupload/AdvancedDoc.vue      |  79 --
 apps/labs/doc/fileupload/AutoDoc.vue          |  63 --
 apps/labs/doc/fileupload/BasicDoc.vue         |  79 --
 apps/labs/doc/fileupload/CustomUploadDoc.vue  |  93 --
 apps/labs/doc/fileupload/ImportDoc.vue        |  18 -
 apps/labs/doc/fileupload/TemplateDoc.vue      | 408 --------
 apps/labs/doc/floatlabel/AccessibilityDoc.vue |   9 -
 apps/labs/doc/floatlabel/BasicDoc.vue         |  67 --
 apps/labs/doc/floatlabel/ImportDoc.vue        |  18 -
 apps/labs/doc/floatlabel/InvalidDoc.vue       | 113 ---
 apps/labs/doc/floatlabel/VariantsDoc.vue      |  89 --
 apps/labs/doc/fluid/AccessibilityDoc.vue      |   9 -
 apps/labs/doc/fluid/BasicDoc.vue              | 123 ---
 apps/labs/doc/fluid/ImportDoc.vue             |  18 -
 apps/labs/doc/galleria/AccessibilityDoc.vue   | 119 ---
 apps/labs/doc/galleria/AdvancedDoc.vue        | 512 ----------
 apps/labs/doc/galleria/AutoPlayDoc.vue        | 144 ---
 apps/labs/doc/galleria/BasicDoc.vue           | 141 ---
 apps/labs/doc/galleria/CaptionDoc.vue         | 157 ---
 apps/labs/doc/galleria/ControlledDoc.vue      | 185 ----
 apps/labs/doc/galleria/ImportDoc.vue          |  18 -
 apps/labs/doc/galleria/ResponsiveDoc.vue      | 141 ---
 apps/labs/doc/galleria/ThumbnailDoc.vue       | 224 ----
 .../galleria/fullscreen/CustomContentDoc.vue  | 206 ----
 .../galleria/fullscreen/WithThumbnailsDoc.vue | 176 ----
 .../fullscreen/WithoutThumbnailsDoc.vue       | 176 ----
 .../doc/galleria/indicator/ClickEventDoc.vue  | 102 --
 .../doc/galleria/indicator/HoverEventDoc.vue  | 102 --
 .../doc/galleria/indicator/PositionDoc.vue    | 192 ----
 .../doc/galleria/indicator/TemplateDoc.vue    | 114 ---
 apps/labs/doc/galleria/navigator/HoverDoc.vue | 141 ---
 .../doc/galleria/navigator/IndicatorsDoc.vue  | 166 ---
 .../galleria/navigator/ItemThumbnailsDoc.vue  | 144 ---
 .../navigator/ItemWithoutThumbnailsDoc.vue    | 156 ---
 apps/labs/doc/iconfield/AccessibilityDoc.vue  |   9 -
 apps/labs/doc/iconfield/BasicDoc.vue          |  89 --
 apps/labs/doc/iconfield/FloatLabelDoc.vue     | 148 ---
 apps/labs/doc/iconfield/IftaLabelDoc.vue      |  78 --
 apps/labs/doc/iconfield/ImportDoc.vue         |  19 -
 apps/labs/doc/iconfield/SizesDoc.vue          | 113 ---
 apps/labs/doc/iconfield/TemplateDoc.vue       |  92 --
 apps/labs/doc/icons/BasicDoc.vue              |  29 -
 apps/labs/doc/icons/ColorDoc.vue              |  29 -
 apps/labs/doc/icons/ConstantsDoc.vue          |  58 --
 apps/labs/doc/icons/DownloadDoc.vue           |  20 -
 apps/labs/doc/icons/FigmaDoc.vue              |   8 -
 .../{customicons => icons}/FontAwesomeDoc.vue |   0
 .../doc/{customicons => icons}/ImageDoc.vue   |   2 +-
 apps/labs/doc/icons/ImportDoc.vue             |  18 -
 apps/labs/doc/icons/ListDoc.vue               |  68 --
 .../{customicons => icons}/MaterialDoc.vue    |   0
 .../doc/{customicons => icons}/SVGDoc.vue     |   0
 apps/labs/doc/icons/SizeDoc.vue               |  29 -
 apps/labs/doc/icons/SpinDoc.vue               |  25 -
 .../doc/{customicons => icons}/VideoDoc.vue   |   0
 apps/labs/doc/iftalabel/AccessibilityDoc.vue  |   9 -
 apps/labs/doc/iftalabel/BasicDoc.vue          |  67 --
 apps/labs/doc/iftalabel/ImportDoc.vue         |  18 -
 apps/labs/doc/iftalabel/InvalidDoc.vue        |  67 --
 apps/labs/doc/image/AccessibilityDoc.vue      |  56 -
 apps/labs/doc/image/BasicDoc.vue              |  37 -
 apps/labs/doc/image/ImportDoc.vue             |  18 -
 apps/labs/doc/image/PreviewDoc.vue            |  38 -
 apps/labs/doc/image/TemplateDoc.vue           |  80 --
 .../doc/imagecompare/AccessibilityDoc.vue     |  81 --
 apps/labs/doc/imagecompare/BasicDoc.vue       |  65 --
 apps/labs/doc/imagecompare/ImportDoc.vue      |  18 -
 apps/labs/doc/imagecompare/ResponsiveDoc.vue  |  65 --
 apps/labs/doc/inplace/AccessibilityDoc.vue    |  26 -
 apps/labs/doc/inplace/BasicDoc.vue            |  77 --
 apps/labs/doc/inplace/ImageDoc.vue            |  84 --
 apps/labs/doc/inplace/ImportDoc.vue           |  18 -
 apps/labs/doc/inplace/InputDoc.vue            |  94 --
 apps/labs/doc/inplace/LazyDoc.vue             | 113 ---
 apps/labs/doc/inputgroup/AccessibilityDoc.vue |   9 -
 apps/labs/doc/inputgroup/BasicDoc.vue         | 176 ----
 apps/labs/doc/inputgroup/ButtonDoc.vue        | 153 ---
 apps/labs/doc/inputgroup/CheckboxDoc.vue      | 151 ---
 apps/labs/doc/inputgroup/FloatLabelDoc.vue    | 160 ---
 apps/labs/doc/inputgroup/IftaLabelDoc.vue     |  86 --
 apps/labs/doc/inputgroup/ImportDoc.vue        |  19 -
 apps/labs/doc/inputgroup/MultipleDoc.vue      |  77 --
 apps/labs/doc/inputmask/AccessibilityDoc.vue  |  48 -
 apps/labs/doc/inputmask/BasicDoc.vue          |  54 -
 apps/labs/doc/inputmask/DisabledDoc.vue       |  55 -
 apps/labs/doc/inputmask/FilledDoc.vue         |  55 -
 apps/labs/doc/inputmask/FloatLabelDoc.vue     | 113 ---
 apps/labs/doc/inputmask/FormsDoc.vue          | 131 ---
 apps/labs/doc/inputmask/IftaLabelDoc.vue      |  66 --
 apps/labs/doc/inputmask/ImportDoc.vue         |  18 -
 apps/labs/doc/inputmask/InvalidDoc.vue        |  62 --
 apps/labs/doc/inputmask/MaskDoc.vue           | 116 ---
 apps/labs/doc/inputmask/OptionalDoc.vue       |  55 -
 apps/labs/doc/inputmask/SizesDoc.vue          |  68 --
 apps/labs/doc/inputmask/SlotCharDoc.vue       |  54 -
 .../labs/doc/inputnumber/AccessibilityDoc.vue |  65 --
 apps/labs/doc/inputnumber/ButtonsDoc.vue      | 126 ---
 apps/labs/doc/inputnumber/CurrencyDoc.vue     | 111 --
 apps/labs/doc/inputnumber/DisabledDoc.vue     |  54 -
 apps/labs/doc/inputnumber/FilledDoc.vue       |  54 -
 apps/labs/doc/inputnumber/FloatLabelDoc.vue   | 112 --
 apps/labs/doc/inputnumber/FormsDoc.vue        | 130 ---
 apps/labs/doc/inputnumber/IftaLabelDoc.vue    |  66 --
 apps/labs/doc/inputnumber/ImportDoc.vue       |  18 -
 apps/labs/doc/inputnumber/InvalidDoc.vue      |  61 --
 apps/labs/doc/inputnumber/LocaleDoc.vue       | 111 --
 apps/labs/doc/inputnumber/NumeralsDoc.vue     | 111 --
 apps/labs/doc/inputnumber/PrefixSuffixDoc.vue | 111 --
 apps/labs/doc/inputnumber/SizesDoc.vue        |  68 --
 apps/labs/doc/inputnumber/VerticalDoc.vue     |  82 --
 apps/labs/doc/inputotp/AccessibilityDoc.vue   |  36 -
 apps/labs/doc/inputotp/BasicDoc.vue           |  54 -
 apps/labs/doc/inputotp/FilledDoc.vue          |  54 -
 apps/labs/doc/inputotp/FormsDoc.vue           | 130 ---
 apps/labs/doc/inputotp/ImportDoc.vue          |  18 -
 apps/labs/doc/inputotp/IntegerOnlyDoc.vue     |  54 -
 apps/labs/doc/inputotp/MaskDoc.vue            |  54 -
 apps/labs/doc/inputotp/SampleDoc.vue          | 228 -----
 apps/labs/doc/inputotp/SizesDoc.vue           |  68 --
 apps/labs/doc/inputotp/TemplateDoc.vue        | 124 ---
 apps/labs/doc/inputtext/AccessibilityDoc.vue  |  51 -
 apps/labs/doc/inputtext/BasicDoc.vue          |  46 +-
 apps/labs/doc/inputtext/DisabledDoc.vue       |  47 +-
 apps/labs/doc/inputtext/FilledDoc.vue         |  55 -
 apps/labs/doc/inputtext/FloatLabelDoc.vue     | 112 --
 apps/labs/doc/inputtext/FormsDoc.vue          | 153 ---
 apps/labs/doc/inputtext/HelpTextDoc.vue       |  63 +-
 apps/labs/doc/inputtext/IftaLabelDoc.vue      |  66 --
 apps/labs/doc/inputtext/ImportDoc.vue         |   8 +-
 apps/labs/doc/inputtext/InvalidDoc.vue        |  58 +-
 apps/labs/doc/inputtext/SizesDoc.vue          |  65 +-
 .../labs/doc/introduction/ArchitectureDoc.vue |   5 +
 apps/labs/doc/knob/AccessibilityDoc.vue       |  79 --
 apps/labs/doc/knob/BasicDoc.vue               |  54 -
 apps/labs/doc/knob/ColorDoc.vue               |  57 --
 apps/labs/doc/knob/DisabledDoc.vue            |  54 -
 apps/labs/doc/knob/FormsDoc.vue               | 133 ---
 apps/labs/doc/knob/ImportDoc.vue              |  18 -
 apps/labs/doc/knob/MinMaxDoc.vue              |  54 -
 apps/labs/doc/knob/ReactiveDoc.vue            |  70 --
 apps/labs/doc/knob/ReadOnlyDoc.vue            |  54 -
 apps/labs/doc/knob/SizeDoc.vue                |  54 -
 apps/labs/doc/knob/StepDoc.vue                |  54 -
 apps/labs/doc/knob/StrokeDoc.vue              |  54 -
 apps/labs/doc/knob/TemplateDoc.vue            |  54 -
 apps/labs/doc/listbox/AccessibilityDoc.vue    | 157 ---
 apps/labs/doc/listbox/BasicDoc.vue            |  78 --
 apps/labs/doc/listbox/CheckmarkDoc.vue        |  75 --
 apps/labs/doc/listbox/DisabledDoc.vue         |  75 --
 apps/labs/doc/listbox/FilterDoc.vue           |  75 --
 apps/labs/doc/listbox/FormsDoc.vue            | 159 ---
 apps/labs/doc/listbox/GroupDoc.vue            | 181 ----
 apps/labs/doc/listbox/ImportDoc.vue           |  18 -
 apps/labs/doc/listbox/InvalidDoc.vue          |  75 --
 apps/labs/doc/listbox/MultipleDoc.vue         |  78 --
 apps/labs/doc/listbox/TemplateDoc.vue         | 118 ---
 apps/labs/doc/listbox/VirtualScrollDoc.vue    |  63 --
 apps/labs/doc/megamenu/AccessibilityDoc.vue   |  96 --
 apps/labs/doc/megamenu/BasicDoc.vue           | 339 -------
 apps/labs/doc/megamenu/CommandDoc.vue         |  26 -
 apps/labs/doc/megamenu/ImportDoc.vue          |  18 -
 apps/labs/doc/megamenu/RouterDoc.vue          | 180 ----
 apps/labs/doc/megamenu/TemplateDoc.vue        | 331 ------
 apps/labs/doc/megamenu/VerticalDoc.vue        | 339 -------
 apps/labs/doc/menu/AccessibilityDoc.vue       |  81 --
 apps/labs/doc/menu/BasicDoc.vue               |  63 --
 apps/labs/doc/menu/CommandDoc.vue             | 105 --
 apps/labs/doc/menu/GroupDoc.vue               | 135 ---
 apps/labs/doc/menu/ImportDoc.vue              |  18 -
 apps/labs/doc/menu/PopupDoc.vue               | 113 ---
 apps/labs/doc/menu/RouterDoc.vue              | 168 ---
 apps/labs/doc/menu/TemplateDoc.vue            | 321 ------
 apps/labs/doc/menubar/AccessibilityDoc.vue    |  98 --
 apps/labs/doc/menubar/AdvancedDoc.vue         |   9 -
 apps/labs/doc/menubar/BasicDoc.vue            | 189 ----
 apps/labs/doc/menubar/CommandDoc.vue          | 213 ----
 apps/labs/doc/menubar/ImportDoc.vue           |  18 -
 apps/labs/doc/menubar/RouterDoc.vue           | 221 ----
 apps/labs/doc/menubar/TemplateDoc.vue         | 248 -----
 apps/labs/doc/message/AccessibilityDoc.vue    |  40 -
 apps/labs/doc/message/BasicDoc.vue            |  43 -
 apps/labs/doc/message/ClosableDoc.vue         |  43 -
 apps/labs/doc/message/DynamicDoc.vue          | 116 ---
 apps/labs/doc/message/FormsDoc.vue            |  83 --
 apps/labs/doc/message/IconDoc.vue             |  67 --
 apps/labs/doc/message/ImportDoc.vue           |  18 -
 apps/labs/doc/message/LifeDoc.vue             |  84 --
 apps/labs/doc/message/OutlinedDoc.vue         |  63 --
 apps/labs/doc/message/SeverityDoc.vue         |  63 --
 apps/labs/doc/message/SimpleDoc.vue           |  63 --
 apps/labs/doc/message/SizesDoc.vue            |  51 -
 apps/labs/doc/metergroup/AccessibilityDoc.vue |   9 -
 apps/labs/doc/metergroup/BasicDoc.vue         |  54 -
 apps/labs/doc/metergroup/IconDoc.vue          |  69 --
 apps/labs/doc/metergroup/ImportDoc.vue        |  18 -
 apps/labs/doc/metergroup/LabelDoc.vue         |  72 --
 apps/labs/doc/metergroup/MinMaxDoc.vue        |  69 --
 apps/labs/doc/metergroup/MultipleDoc.vue      |  69 --
 apps/labs/doc/metergroup/TemplateDoc.vue      | 213 ----
 apps/labs/doc/metergroup/VerticalDoc.vue      |  69 --
 .../labs/doc/multiselect/AccessibilityDoc.vue | 241 -----
 apps/labs/doc/multiselect/BasicDoc.vue        |  81 --
 apps/labs/doc/multiselect/ChipsDoc.vue        |  78 --
 apps/labs/doc/multiselect/ClearIconDoc.vue    |  78 --
 apps/labs/doc/multiselect/DisabledDoc.vue     |  45 -
 apps/labs/doc/multiselect/FilledDoc.vue       |  78 --
 apps/labs/doc/multiselect/FilterDoc.vue       |  81 --
 apps/labs/doc/multiselect/FloatLabelDoc.vue   | 133 ---
 apps/labs/doc/multiselect/FormsDoc.vue        | 167 ---
 apps/labs/doc/multiselect/GroupDoc.vue        | 181 ----
 apps/labs/doc/multiselect/IftaLabelDoc.vue    |  87 --
 apps/labs/doc/multiselect/ImportDoc.vue       |  18 -
 apps/labs/doc/multiselect/InvalidDoc.vue      |  88 --
 apps/labs/doc/multiselect/LoadingStateDoc.vue |  43 -
 apps/labs/doc/multiselect/SizesDoc.vue        |  89 --
 apps/labs/doc/multiselect/TemplateDoc.vue     | 178 ----
 .../labs/doc/multiselect/VirtualScrollDoc.vue | 107 --
 apps/labs/doc/orderlist/AccessibilityDoc.vue  | 138 ---
 apps/labs/doc/orderlist/BasicDoc.vue          |  99 --
 apps/labs/doc/orderlist/ImportDoc.vue         |  18 -
 apps/labs/doc/orderlist/TemplateDoc.vue       | 126 ---
 .../organizationchart/AccessibilityDoc.vue    |  41 -
 apps/labs/doc/organizationchart/BasicDoc.vue  | 148 ---
 .../labs/doc/organizationchart/ColoredDoc.vue | 259 -----
 apps/labs/doc/organizationchart/ImportDoc.vue |  18 -
 .../doc/organizationchart/SelectionDoc.vue    | 252 -----
 .../doc/organizationchart/TemplateDoc.vue     | 235 -----
 apps/labs/doc/overview/IdeaDoc.vue            |  23 -
 apps/labs/doc/overview/PresetDoc.vue          |  54 -
 .../doc/overview/passthrough/GlobalDoc.vue    |  43 -
 .../doc/overview/passthrough/LocalDoc.vue     |  61 --
 .../doc/overview/passthrough/OverrideDoc.vue  |  20 -
 .../doc/overview/passthrough/ReuseDoc.vue     |  85 --
 apps/labs/doc/paginator/AccessibilityDoc.vue  |  63 --
 apps/labs/doc/paginator/BasicDoc.vue          |  46 -
 .../doc/paginator/CurrentPageReportDoc.vue    |  65 --
 apps/labs/doc/paginator/CustomContentDoc.vue  |  75 --
 apps/labs/doc/paginator/HeadlessDoc.vue       | 102 --
 apps/labs/doc/paginator/ImportDoc.vue         |  18 -
 apps/labs/doc/paginator/ResponsiveDoc.vue     |  82 --
 apps/labs/doc/paginator/TemplateDoc.vue       |  84 --
 apps/labs/doc/panel/AccessibilityDoc.vue      |  40 -
 apps/labs/doc/panel/BasicDoc.vue              |  63 --
 apps/labs/doc/panel/ImportDoc.vue             |  18 -
 apps/labs/doc/panel/TemplateDoc.vue           | 231 -----
 apps/labs/doc/panel/ToggleableDoc.vue         |  63 --
 apps/labs/doc/panelmenu/AccessibilityDoc.vue  |  75 --
 apps/labs/doc/panelmenu/BasicDoc.vue          | 285 ------
 apps/labs/doc/panelmenu/CommandDoc.vue        | 225 ----
 apps/labs/doc/panelmenu/ControlledDoc.vue     | 337 ------
 apps/labs/doc/panelmenu/ImportDoc.vue         |  18 -
 apps/labs/doc/panelmenu/MultipleDoc.vue       | 285 ------
 apps/labs/doc/panelmenu/RouterDoc.vue         | 233 -----
 apps/labs/doc/panelmenu/TemplateDoc.vue       | 276 -----
 apps/labs/doc/password/AccessibilityDoc.vue   |  52 -
 apps/labs/doc/password/BasicDoc.vue           |  54 -
 apps/labs/doc/password/DisabledDoc.vue        |  54 -
 apps/labs/doc/password/FilledDoc.vue          |  54 -
 apps/labs/doc/password/FloatLabelDoc.vue      | 112 --
 apps/labs/doc/password/FormsDoc.vue           | 174 ----
 apps/labs/doc/password/IftaLabelDoc.vue       |  66 --
 apps/labs/doc/password/ImportDoc.vue          |  18 -
 apps/labs/doc/password/InvalidDoc.vue         |  61 --
 apps/labs/doc/password/LocaleDoc.vue          |  57 --
 apps/labs/doc/password/MeterDoc.vue           |  54 -
 apps/labs/doc/password/SizesDoc.vue           |  70 --
 apps/labs/doc/password/TemplateDoc.vue        | 106 --
 apps/labs/doc/password/ToggleMaskDoc.vue      |  54 -
 apps/labs/doc/picklist/AccessibilityDoc.vue   | 139 ---
 apps/labs/doc/picklist/BasicDoc.vue           | 100 --
 apps/labs/doc/picklist/ImportDoc.vue          |  18 -
 apps/labs/doc/picklist/TemplateDoc.vue        | 128 ---
 apps/labs/doc/popover/AccessibilityDoc.vue    |  42 -
 apps/labs/doc/popover/BasicDoc.vue            | 229 -----
 apps/labs/doc/popover/DataTableDoc.vue        | 374 -------
 apps/labs/doc/popover/ImportDoc.vue           |  18 -
 apps/labs/doc/popover/SelectDataDoc.vue       | 165 ---
 .../labs/doc/progressbar/AccessibilityDoc.vue |  31 -
 apps/labs/doc/progressbar/BasicDoc.vue        |  45 -
 apps/labs/doc/progressbar/DynamicDoc.vue      | 132 ---
 apps/labs/doc/progressbar/ImportDoc.vue       |  18 -
 .../labs/doc/progressbar/IndeterminateDoc.vue |  45 -
 apps/labs/doc/progressbar/TemplateDoc.vue     |  54 -
 .../doc/progressspinner/AccessibilityDoc.vue  |  24 -
 apps/labs/doc/progressspinner/BasicDoc.vue    |  43 -
 apps/labs/doc/progressspinner/CustomDoc.vue   |  46 -
 apps/labs/doc/progressspinner/ImportDoc.vue   |  18 -
 .../labs/doc/radiobutton/AccessibilityDoc.vue |  70 --
 apps/labs/doc/radiobutton/DisabledDoc.vue     |  58 --
 apps/labs/doc/radiobutton/DynamicDoc.vue      |  90 --
 apps/labs/doc/radiobutton/FilledDoc.vue       |  54 -
 apps/labs/doc/radiobutton/FormsDoc.vue        | 198 ----
 apps/labs/doc/radiobutton/GroupDoc.vue        | 122 ---
 apps/labs/doc/radiobutton/ImportDoc.vue       |  18 -
 apps/labs/doc/radiobutton/InvalidDoc.vue      |  54 -
 apps/labs/doc/radiobutton/SizesDoc.vue        | 106 --
 apps/labs/doc/rating/AccessibilityDoc.vue     |  50 -
 apps/labs/doc/rating/BasicDoc.vue             |  54 -
 apps/labs/doc/rating/DisabledDoc.vue          |  54 -
 apps/labs/doc/rating/FormsDoc.vue             | 130 ---
 apps/labs/doc/rating/ImportDoc.vue            |  18 -
 apps/labs/doc/rating/NumberOfStarsDoc.vue     |  54 -
 apps/labs/doc/rating/ReadOnlyDoc.vue          |  54 -
 apps/labs/doc/rating/TemplateDoc.vue          |  82 --
 apps/labs/doc/ripple/AccessibilityDoc.vue     |   9 -
 apps/labs/doc/ripple/ConfigurationDoc.vue     |  34 -
 apps/labs/doc/ripple/CustomDoc.vue            |  77 --
 apps/labs/doc/ripple/DefaultDoc.vue           |  88 --
 apps/labs/doc/ripple/ImportDoc.vue            |  36 -
 .../labs/doc/scrollpanel/AccessibilityDoc.vue |  40 -
 apps/labs/doc/scrollpanel/BasicDoc.vue        |  99 --
 apps/labs/doc/scrollpanel/CustomDoc.vue       | 102 --
 apps/labs/doc/scrollpanel/ImportDoc.vue       |  18 -
 apps/labs/doc/scrolltop/AccessibilityDoc.vue  |  35 -
 apps/labs/doc/scrolltop/BasicDoc.vue          |  49 -
 apps/labs/doc/scrolltop/ElementDoc.vue        |  73 --
 apps/labs/doc/scrolltop/ImportDoc.vue         |  18 -
 apps/labs/doc/select/AccessibilityDoc.vue     | 197 ----
 apps/labs/doc/select/BasicDoc.vue             |  78 --
 apps/labs/doc/select/CheckmarkDoc.vue         |  75 --
 apps/labs/doc/select/ClearIconDoc.vue         |  75 --
 apps/labs/doc/select/DisabledDoc.vue          |  45 -
 apps/labs/doc/select/EditableDoc.vue          |  75 --
 apps/labs/doc/select/FilledDoc.vue            |  75 --
 apps/labs/doc/select/FilterDoc.vue            | 154 ---
 apps/labs/doc/select/FloatLabelDoc.vue        | 133 ---
 apps/labs/doc/select/FormsDoc.vue             | 163 ---
 apps/labs/doc/select/GroupDoc.vue             | 181 ----
 apps/labs/doc/select/IftaLabelDoc.vue         |  87 --
 apps/labs/doc/select/ImportDoc.vue            |  18 -
 apps/labs/doc/select/InvalidDoc.vue           |  82 --
 apps/labs/doc/select/LazyVirtualScrollDoc.vue | 136 ---
 apps/labs/doc/select/LoadingStateDoc.vue      |  43 -
 apps/labs/doc/select/SizesDoc.vue             |  89 --
 apps/labs/doc/select/TemplateDoc.vue          | 198 ----
 apps/labs/doc/select/VirtualScrollDoc.vue     |  63 --
 .../doc/selectbutton/AccessibilityDoc.vue     |  50 -
 apps/labs/doc/selectbutton/BasicDoc.vue       |  60 --
 apps/labs/doc/selectbutton/DisabledDoc.vue    |  76 --
 apps/labs/doc/selectbutton/FormsDoc.vue       | 132 ---
 apps/labs/doc/selectbutton/ImportDoc.vue      |  18 -
 apps/labs/doc/selectbutton/InvalidDoc.vue     |  57 --
 apps/labs/doc/selectbutton/MultipleDoc.vue    |  69 --
 apps/labs/doc/selectbutton/SizesDoc.vue       |  71 --
 apps/labs/doc/selectbutton/TemplateDoc.vue    |  88 --
 apps/labs/doc/skeleton/AccessibilityDoc.vue   |  14 -
 apps/labs/doc/skeleton/CardDoc.vue            |  99 --
 apps/labs/doc/skeleton/DataTableDoc.vue       | 138 ---
 apps/labs/doc/skeleton/ImportDoc.vue          |  18 -
 apps/labs/doc/skeleton/ListDoc.vue            | 195 ----
 apps/labs/doc/skeleton/ShapesDoc.vue          | 172 ----
 apps/labs/doc/slider/AccessibilityDoc.vue     |  80 --
 apps/labs/doc/slider/BasicDoc.vue             |  54 -
 apps/labs/doc/slider/FilterDoc.vue            | 105 --
 apps/labs/doc/slider/FormsDoc.vue             | 130 ---
 apps/labs/doc/slider/ImportDoc.vue            |  18 -
 apps/labs/doc/slider/InputDoc.vue             |  64 --
 apps/labs/doc/slider/RangeDoc.vue             |  54 -
 apps/labs/doc/slider/StepDoc.vue              |  54 -
 apps/labs/doc/slider/VerticalDoc.vue          |  54 -
 apps/labs/doc/speeddial/AccessibilityDoc.vue  | 132 ---
 apps/labs/doc/speeddial/CircleDoc.vue         | 175 ----
 apps/labs/doc/speeddial/ImportDoc.vue         |  18 -
 apps/labs/doc/speeddial/LinearDoc.vue         | 187 ----
 apps/labs/doc/speeddial/MaskDoc.vue           | 173 ----
 apps/labs/doc/speeddial/QuarterCircleDoc.vue  | 187 ----
 apps/labs/doc/speeddial/SemiCircleDoc.vue     | 185 ----
 apps/labs/doc/speeddial/TemplateDoc.vue       | 252 -----
 apps/labs/doc/speeddial/TooltipDoc.vue        | 179 ----
 .../labs/doc/splitbutton/AccessibilityDoc.vue | 149 ---
 apps/labs/doc/splitbutton/BasicDoc.vue        | 138 ---
 apps/labs/doc/splitbutton/DisabledDoc.vue     | 136 ---
 apps/labs/doc/splitbutton/IconsDoc.vue        | 146 ---
 apps/labs/doc/splitbutton/ImportDoc.vue       |  18 -
 apps/labs/doc/splitbutton/NestedDoc.vue       | 270 -----
 apps/labs/doc/splitbutton/OutlinedDoc.vue     | 165 ---
 apps/labs/doc/splitbutton/RaisedDoc.vue       | 165 ---
 apps/labs/doc/splitbutton/RaisedTextDoc.vue   | 161 ---
 apps/labs/doc/splitbutton/RoundedDoc.vue      | 165 ---
 apps/labs/doc/splitbutton/SeverityDoc.vue     | 165 ---
 apps/labs/doc/splitbutton/SizesDoc.vue        | 145 ---
 apps/labs/doc/splitbutton/TemplateDoc.vue     | 157 ---
 apps/labs/doc/splitbutton/TextDoc.vue         | 161 ---
 apps/labs/doc/splitter/AccessibilityDoc.vue   |  40 -
 apps/labs/doc/splitter/HorizontalDoc.vue      |  55 -
 apps/labs/doc/splitter/ImportDoc.vue          |  19 -
 apps/labs/doc/splitter/NestedDoc.vue          |  95 --
 apps/labs/doc/splitter/SizeDoc.vue            |  55 -
 apps/labs/doc/splitter/VerticalDoc.vue        |  55 -
 apps/labs/doc/stepper/AccessibilityDoc.vue    |  42 -
 apps/labs/doc/stepper/HorizontalDoc.vue       | 169 ---
 apps/labs/doc/stepper/ImportDoc.vue           |  23 -
 apps/labs/doc/stepper/LinearDoc.vue           | 169 ---
 apps/labs/doc/stepper/StepsOnlyDoc.vue        |  61 --
 apps/labs/doc/stepper/TemplateDoc.vue         | 491 ---------
 apps/labs/doc/stepper/VerticalDoc.vue         | 177 ----
 apps/labs/doc/tabs/AccessibilityDoc.vue       |  74 --
 apps/labs/doc/tabs/BasicDoc.vue               | 147 ---
 apps/labs/doc/tabs/ControlledDoc.vue          | 182 ----
 apps/labs/doc/tabs/DisabledDoc.vue            | 151 ---
 apps/labs/doc/tabs/DynamicDoc.vue             | 102 --
 apps/labs/doc/tabs/ImportDoc.vue              |  22 -
 apps/labs/doc/tabs/ScrollableDoc.vue          |  98 --
 apps/labs/doc/tabs/TabMenuDoc.vue             | 112 --
 apps/labs/doc/tabs/TemplateDoc.vue            | 190 ----
 apps/labs/doc/tag/AccessibilityDoc.vue        |  12 -
 apps/labs/doc/tag/BasicDoc.vue                |  45 -
 apps/labs/doc/tag/IconDoc.vue                 |  69 --
 apps/labs/doc/tag/ImportDoc.vue               |  18 -
 apps/labs/doc/tag/PillDoc.vue                 |  69 --
 apps/labs/doc/tag/SeverityDoc.vue             |  69 --
 apps/labs/doc/tag/TemplateDoc.vue             |  63 --
 apps/labs/doc/terminal/AccessibilityDoc.vue   |  32 -
 apps/labs/doc/terminal/BasicDoc.vue           | 166 ---
 apps/labs/doc/terminal/ImportDoc.vue          |  19 -
 apps/labs/doc/textarea/AccessibilityDoc.vue   |  49 -
 apps/labs/doc/textarea/AutoResizeDoc.vue      |  54 -
 apps/labs/doc/textarea/BasicDoc.vue           |  54 -
 apps/labs/doc/textarea/DisabledDoc.vue        |  54 -
 apps/labs/doc/textarea/FilledDoc.vue          |  54 -
 apps/labs/doc/textarea/FloatLabelDoc.vue      | 112 --
 apps/labs/doc/textarea/FormsDoc.vue           | 130 ---
 apps/labs/doc/textarea/IftaLabelDoc.vue       |  66 --
 apps/labs/doc/textarea/ImportDoc.vue          |  18 -
 apps/labs/doc/textarea/InvalidDoc.vue         |  54 -
 apps/labs/doc/textarea/SizesDoc.vue           |  68 --
 apps/labs/doc/tieredmenu/AccessibilityDoc.vue |  94 --
 apps/labs/doc/tieredmenu/BasicDoc.vue         | 258 -----
 apps/labs/doc/tieredmenu/CommandDoc.vue       | 213 ----
 apps/labs/doc/tieredmenu/ImportDoc.vue        |  18 -
 apps/labs/doc/tieredmenu/PopupDoc.vue         | 277 -----
 apps/labs/doc/tieredmenu/RouterDoc.vue        | 221 ----
 apps/labs/doc/tieredmenu/TemplateDoc.vue      | 328 ------
 apps/labs/doc/timeline/AccessibilityDoc.vue   |   9 -
 apps/labs/doc/timeline/AlignmentDoc.vue       | 134 ---
 apps/labs/doc/timeline/BasicDoc.vue           |  86 --
 apps/labs/doc/timeline/HorizontalDoc.vue      | 122 ---
 apps/labs/doc/timeline/ImportDoc.vue          |  18 -
 apps/labs/doc/timeline/OppositeDoc.vue        |  98 --
 apps/labs/doc/timeline/TemplateDoc.vue        | 220 ----
 apps/labs/doc/toast/AccessibilityDoc.vue      |  75 --
 apps/labs/doc/toast/BasicDoc.vue              |  67 --
 apps/labs/doc/toast/HeadlessDoc.vue           | 220 ----
 apps/labs/doc/toast/ImportDoc.vue             |  18 -
 apps/labs/doc/toast/MultipleDoc.vue           |  73 --
 apps/labs/doc/toast/PositionDoc.vue           | 107 --
 apps/labs/doc/toast/SeverityDoc.vue           | 140 ---
 apps/labs/doc/toast/StickyDoc.vue             |  84 --
 apps/labs/doc/toast/TemplateDoc.vue           | 149 ---
 apps/labs/doc/toast/ToastServiceDoc.vue       |  35 -
 .../doc/togglebutton/AccessibilityDoc.vue     |  52 -
 apps/labs/doc/togglebutton/BasicDoc.vue       |  54 -
 apps/labs/doc/togglebutton/CustomizedDoc.vue  |  57 --
 apps/labs/doc/togglebutton/DisabledDoc.vue    |  57 --
 apps/labs/doc/togglebutton/FormsDoc.vue       | 131 ---
 apps/labs/doc/togglebutton/ImportDoc.vue      |  18 -
 apps/labs/doc/togglebutton/InvalidDoc.vue     |  54 -
 apps/labs/doc/togglebutton/SizesDoc.vue       |  68 --
 .../doc/toggleswitch/AccessibilityDoc.vue     |  52 -
 apps/labs/doc/toggleswitch/BasicDoc.vue       |  54 -
 apps/labs/doc/toggleswitch/DisabledDoc.vue    |  54 -
 apps/labs/doc/toggleswitch/FormsDoc.vue       | 124 ---
 apps/labs/doc/toggleswitch/ImportDoc.vue      |  18 -
 apps/labs/doc/toggleswitch/InvalidDoc.vue     |  54 -
 .../labs/doc/toggleswitch/PreselectionDoc.vue |  54 -
 apps/labs/doc/toggleswitch/TemplateDoc.vue    |  70 --
 apps/labs/doc/toolbar/AccessibilityDoc.vue    |  12 -
 apps/labs/doc/toolbar/BasicDoc.vue            | 149 ---
 apps/labs/doc/toolbar/CustomDoc.vue           | 137 ---
 apps/labs/doc/toolbar/ImportDoc.vue           |  18 -
 apps/labs/doc/tooltip/AccessibilityDoc.vue    |  26 -
 apps/labs/doc/tooltip/AutoHideDoc.vue         |  41 -
 apps/labs/doc/tooltip/CustomDoc.vue           |  92 --
 apps/labs/doc/tooltip/DelayDoc.vue            |  37 -
 apps/labs/doc/tooltip/EventDoc.vue            |  37 -
 apps/labs/doc/tooltip/ImportDoc.vue           |  20 -
 apps/labs/doc/tooltip/PositionDoc.vue         |  49 -
 apps/labs/doc/tree/AccessibilityDoc.vue       |  77 --
 apps/labs/doc/tree/BasicDoc.vue               |  96 --
 apps/labs/doc/tree/ControlledDoc.vue          | 182 ----
 apps/labs/doc/tree/EventsDoc.vue              | 158 ---
 apps/labs/doc/tree/FilterDoc.vue              | 149 ---
 apps/labs/doc/tree/ImportDoc.vue              |  18 -
 apps/labs/doc/tree/LazyDoc.vue                | 392 -------
 apps/labs/doc/tree/TemplateDoc.vue            | 167 ---
 apps/labs/doc/tree/selection/CheckboxDoc.vue  | 131 ---
 apps/labs/doc/tree/selection/MultipleDoc.vue  | 119 ---
 apps/labs/doc/tree/selection/SingleDoc.vue    | 126 ---
 apps/labs/doc/treeselect/AccessibilityDoc.vue | 109 --
 apps/labs/doc/treeselect/BasicDoc.vue         | 103 --
 apps/labs/doc/treeselect/CheckboxDoc.vue      | 114 ---
 apps/labs/doc/treeselect/ClearIconDoc.vue     |  99 --
 apps/labs/doc/treeselect/DisabledDoc.vue      |  98 --
 apps/labs/doc/treeselect/FilledDoc.vue        |  99 --
 apps/labs/doc/treeselect/FilterDoc.vue        | 107 --
 apps/labs/doc/treeselect/FloatLabelDoc.vue    | 157 ---
 apps/labs/doc/treeselect/FormsDoc.vue         | 138 ---
 apps/labs/doc/treeselect/IftaLabelDoc.vue     | 111 --
 apps/labs/doc/treeselect/ImportDoc.vue        |  18 -
 apps/labs/doc/treeselect/InvalidDoc.vue       | 106 --
 apps/labs/doc/treeselect/LazyDoc.vue          | 358 -------
 apps/labs/doc/treeselect/MultipleDoc.vue      | 111 --
 apps/labs/doc/treeselect/SizesDoc.vue         | 113 ---
 apps/labs/doc/treeselect/TemplateDoc.vue      | 151 ---
 apps/labs/doc/treetable/AccessibilityDoc.vue  | 128 ---
 apps/labs/doc/treetable/BasicDoc.vue          | 117 ---
 apps/labs/doc/treetable/ColumnToggleDoc.vue   | 169 ---
 apps/labs/doc/treetable/ContextMenuDoc.vue    | 235 -----
 apps/labs/doc/treetable/ControlledDoc.vue     | 150 ---
 apps/labs/doc/treetable/DynamicColumnsDoc.vue | 130 ---
 apps/labs/doc/treetable/FilterDoc.vue         | 229 -----
 apps/labs/doc/treetable/ImportDoc.vue         |  19 -
 apps/labs/doc/treetable/LazyLoadDoc.vue       | 320 ------
 apps/labs/doc/treetable/SizeDoc.vue           | 138 ---
 apps/labs/doc/treetable/TemplateDoc.vue       | 181 ----
 .../pagination/PaginationBasicDoc.vue         | 157 ---
 .../pagination/PaginationHeadlessDoc.vue      | 197 ----
 .../pagination/PaginationTemplateDoc.vue      | 216 ----
 .../doc/treetable/resize/ExpandModeDoc.vue    | 117 ---
 apps/labs/doc/treetable/resize/FitModeDoc.vue | 120 ---
 .../treetable/scroll/FlexibleScrollDoc.vue    | 121 ---
 .../doc/treetable/scroll/FrozenColumnsDoc.vue | 129 ---
 .../treetable/scroll/HorizontalScrollDoc.vue  | 129 ---
 .../treetable/scroll/VerticalScrollDoc.vue    | 117 ---
 .../selection/CheckboxRowSelectionDoc.vue     | 134 ---
 .../selection/MultipleRowsSelectionDoc.vue    | 141 ---
 .../selection/RowSelectionEventsDoc.vue       | 144 ---
 .../selection/SingleRowSelectionDoc.vue       | 141 ---
 .../doc/treetable/sort/MultipleColumnsDoc.vue | 117 ---
 .../doc/treetable/sort/RemovableSortDoc.vue   | 117 ---
 .../doc/treetable/sort/SingleColumnDoc.vue    | 117 ---
 .../doc/virtualscroller/AccessibilityDoc.vue  |   9 -
 apps/labs/doc/virtualscroller/BasicDoc.vue    |  79 --
 apps/labs/doc/virtualscroller/DelayDoc.vue    | 145 ---
 apps/labs/doc/virtualscroller/GridDoc.vue     |  92 --
 .../doc/virtualscroller/HorizontalDoc.vue     |  76 --
 apps/labs/doc/virtualscroller/ImportDoc.vue   |  18 -
 apps/labs/doc/virtualscroller/LazyDoc.vue     | 151 ---
 apps/labs/doc/virtualscroller/LoadingDoc.vue  | 138 ---
 apps/labs/pages/accordion/index.vue           |  66 --
 apps/labs/pages/autocomplete/index.vue        | 128 ---
 apps/labs/pages/avatar/index.vue              |  54 -
 apps/labs/pages/badge/index.vue               |  60 --
 apps/labs/pages/blockui/index.vue             |  41 -
 apps/labs/pages/breadcrumb/index.vue          |  47 -
 apps/labs/pages/button/index.vue              | 132 ---
 apps/labs/pages/card/index.vue                |  42 -
 apps/labs/pages/carousel/index.vue            |  54 -
 apps/labs/pages/cascadeselect/index.vue       | 104 --
 apps/labs/pages/checkbox/index.vue            |  84 --
 apps/labs/pages/chip/index.vue                |  54 -
 apps/labs/pages/colorpicker/index.vue         |  60 --
 apps/labs/pages/confirmdialog/index.vue       |  68 --
 apps/labs/pages/confirmpopup/index.vue        |  62 --
 apps/labs/pages/contextmenu/index.vue         |  74 --
 apps/labs/pages/datatable/index.vue           | 366 -------
 apps/labs/pages/dataview/index.vue            |  68 --
 apps/labs/pages/datepicker/index.vue          | 156 ---
 apps/labs/pages/deferredcontent/index.vue     |  50 -
 apps/labs/pages/dialog/index.vue              |  78 --
 apps/labs/pages/divider/index.vue             |  60 --
 apps/labs/pages/dock/index.vue                |  42 -
 apps/labs/pages/drawer/index.vue              |  66 --
 apps/labs/pages/dynamicdialog/index.vue       |  80 --
 apps/labs/pages/fieldset/index.vue            |  48 -
 apps/labs/pages/fileupload/index.vue          |  68 --
 apps/labs/pages/floatlabel/index.vue          |  48 -
 apps/labs/pages/fluid/index.vue               |  45 -
 apps/labs/pages/galleria/index.vue            | 159 ---
 apps/labs/pages/iconfield/index.vue           |  60 --
 apps/labs/pages/icons/index.vue               |  73 +-
 apps/labs/pages/iftalabel/index.vue           |  42 -
 apps/labs/pages/image/index.vue               |  48 -
 apps/labs/pages/imagecompare/index.vue        |  42 -
 apps/labs/pages/index.vue                     |  18 +-
 apps/labs/pages/inplace/index.vue             |  62 --
 apps/labs/pages/inputgroup/index.vue          |  74 --
 apps/labs/pages/inputmask/index.vue           | 104 --
 apps/labs/pages/inputnumber/index.vue         | 108 --
 apps/labs/pages/inputotp/index.vue            |  78 --
 apps/labs/pages/inputtext/index.vue           | 108 +-
 .../{customicons => introduction}/index.vue   |   4 +-
 apps/labs/pages/knob/index.vue                |  96 --
 apps/labs/pages/listbox/index.vue             |  90 --
 apps/labs/pages/megamenu/index.vue            |  68 --
 apps/labs/pages/menu/index.vue                |  66 --
 apps/labs/pages/menubar/index.vue             |  59 --
 apps/labs/pages/message/index.vue             |  90 --
 apps/labs/pages/metergroup/index.vue          |  71 --
 apps/labs/pages/multiselect/index.vue         | 128 ---
 apps/labs/pages/orderlist/index.vue           |  42 -
 apps/labs/pages/organizationchart/index.vue   |  61 --
 apps/labs/pages/paginator/index.vue           |  68 --
 apps/labs/pages/panel/index.vue               |  47 -
 apps/labs/pages/panelmenu/index.vue           |  65 --
 apps/labs/pages/password/index.vue            | 102 --
 apps/labs/pages/picklist/index.vue            |  42 -
 apps/labs/pages/popover/index.vue             |  56 -
 apps/labs/pages/progressbar/index.vue         |  54 -
 apps/labs/pages/progressspinner/index.vue     |  42 -
 apps/labs/pages/radiobutton/index.vue         |  80 --
 apps/labs/pages/rating/index.vue              |  66 --
 apps/labs/pages/ripple/index.vue              |  47 -
 apps/labs/pages/scrollpanel/index.vue         |  50 -
 apps/labs/pages/scrolltop/index.vue           |  49 -
 apps/labs/pages/select/index.vue              | 132 ---
 apps/labs/pages/selectbutton/index.vue        |  80 --
 apps/labs/pages/skeleton/index.vue            |  54 -
 apps/labs/pages/slider/index.vue              |  71 --
 apps/labs/pages/speeddial/index.vue           |  44 -
 apps/labs/pages/splitbutton/index.vue         | 110 --
 apps/labs/pages/splitter/index.vue            |  53 -
 apps/labs/pages/stepper/index.vue             |  68 --
 apps/labs/pages/tabs/index.vue                |  72 --
 apps/labs/pages/tag/index.vue                 |  60 --
 apps/labs/pages/terminal/index.vue            |  35 -
 apps/labs/pages/textarea/index.vue            |  92 --
 apps/labs/pages/tieredmenu/index.vue          |  60 --
 apps/labs/pages/timeline/index.vue            |  60 --
 apps/labs/pages/toast/index.vue               |  77 --
 apps/labs/pages/togglebutton/index.vue        |  74 --
 apps/labs/pages/toggleswitch/index.vue        |  66 --
 apps/labs/pages/toolbar/index.vue             |  41 -
 apps/labs/pages/tooltip/index.vue             |  60 --
 apps/labs/pages/tree/index.vue                |  90 --
 apps/labs/pages/treeselect/index.vue          | 114 ---
 apps/labs/pages/treetable/index.vue           | 210 ----
 apps/labs/pages/virtualscroller/index.vue     |  70 --
 apps/labs/plex/inputtext/index.vue            |  26 +
 apps/labs/plugins/app.js                      |   1 +
 apps/labs/public/demo/data/icons.json         |   1 -
 apps/labs/tailwind.config.js                  |  12 +-
 packages/primevue/src/inputtext/InputText.vue |  16 +-
 911 files changed, 202 insertions(+), 98033 deletions(-)
 delete mode 100644 apps/labs/components/doc/DocPreset.vue
 delete mode 100644 apps/labs/components/doc/DocPresetSection.vue
 delete mode 100644 apps/labs/components/landing/HeroSection.vue
 delete mode 100644 apps/labs/components/landing/samples/CardsApp.vue
 delete mode 100644 apps/labs/components/landing/samples/ChatApp.vue
 delete mode 100644 apps/labs/components/landing/samples/CustomersApp.vue
 delete mode 100644 apps/labs/components/landing/samples/InboxApp.vue
 delete mode 100644 apps/labs/components/landing/samples/MoviesApp.vue
 delete mode 100644 apps/labs/components/landing/samples/OverviewApp.vue
 delete mode 100644 apps/labs/components/tutorial/ToggleInputSwitch.vue
 delete mode 100644 apps/labs/doc/accordion/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/accordion/BasicDoc.vue
 delete mode 100644 apps/labs/doc/accordion/ControlledDoc.vue
 delete mode 100644 apps/labs/doc/accordion/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/accordion/DynamicDoc.vue
 delete mode 100644 apps/labs/doc/accordion/ImportDoc.vue
 delete mode 100644 apps/labs/doc/accordion/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/accordion/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/BasicDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/DropdownDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/FilledDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/ForceSelectionDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/FormsDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/GroupDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/ImportDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/ObjectsDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/SizesDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/autocomplete/VirtualScrollDoc.vue
 delete mode 100644 apps/labs/doc/avatar/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/avatar/AvatarGroupDoc.vue
 delete mode 100644 apps/labs/doc/avatar/IconDoc.vue
 delete mode 100644 apps/labs/doc/avatar/ImageDoc.vue
 delete mode 100644 apps/labs/doc/avatar/ImportDoc.vue
 delete mode 100644 apps/labs/doc/avatar/LabelDoc.vue
 delete mode 100644 apps/labs/doc/badge/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/badge/BasicDoc.vue
 delete mode 100644 apps/labs/doc/badge/ButtonDoc.vue
 delete mode 100644 apps/labs/doc/badge/ImportDoc.vue
 delete mode 100644 apps/labs/doc/badge/OverlayDoc.vue
 delete mode 100644 apps/labs/doc/badge/SeverityDoc.vue
 delete mode 100644 apps/labs/doc/badge/SizeDoc.vue
 delete mode 100644 apps/labs/doc/blockui/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/blockui/BasicDoc.vue
 delete mode 100644 apps/labs/doc/blockui/DocumentDoc.vue
 delete mode 100644 apps/labs/doc/blockui/ImportDoc.vue
 delete mode 100644 apps/labs/doc/breadcrumb/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/breadcrumb/BasicDoc.vue
 delete mode 100644 apps/labs/doc/breadcrumb/ImportDoc.vue
 delete mode 100644 apps/labs/doc/breadcrumb/RouterDoc.vue
 delete mode 100644 apps/labs/doc/breadcrumb/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/button/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/button/BadgeDoc.vue
 delete mode 100644 apps/labs/doc/button/BasicDoc.vue
 delete mode 100644 apps/labs/doc/button/ButtonGroupDoc.vue
 delete mode 100644 apps/labs/doc/button/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/button/HeadlessDoc.vue
 delete mode 100644 apps/labs/doc/button/IconOnlyDoc.vue
 delete mode 100644 apps/labs/doc/button/IconsDoc.vue
 delete mode 100644 apps/labs/doc/button/ImportDoc.vue
 delete mode 100644 apps/labs/doc/button/LinkDoc.vue
 delete mode 100644 apps/labs/doc/button/LoadingDoc.vue
 delete mode 100644 apps/labs/doc/button/OutlinedDoc.vue
 delete mode 100644 apps/labs/doc/button/RaisedDoc.vue
 delete mode 100644 apps/labs/doc/button/RaisedTextDoc.vue
 delete mode 100644 apps/labs/doc/button/RoundedDoc.vue
 delete mode 100644 apps/labs/doc/button/SeverityDoc.vue
 delete mode 100644 apps/labs/doc/button/SizesDoc.vue
 delete mode 100644 apps/labs/doc/button/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/button/TextDoc.vue
 delete mode 100644 apps/labs/doc/card/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/card/AdvancedDoc.vue
 delete mode 100644 apps/labs/doc/card/BasicDoc.vue
 delete mode 100644 apps/labs/doc/card/ImportDoc.vue
 delete mode 100644 apps/labs/doc/carousel/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/carousel/BasicDoc.vue
 delete mode 100644 apps/labs/doc/carousel/CircularDoc.vue
 delete mode 100644 apps/labs/doc/carousel/ImportDoc.vue
 delete mode 100644 apps/labs/doc/carousel/ResponsiveDoc.vue
 delete mode 100644 apps/labs/doc/carousel/VerticalDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/BasicDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/ClearIconDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/FilledDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/FormsDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/ImportDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/LoadingStateDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/SizesDoc.vue
 delete mode 100644 apps/labs/doc/cascadeselect/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/BasicDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/DynamicDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/FilledDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/FormsDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/GroupDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/ImportDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/IndeterminateDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/checkbox/SizesDoc.vue
 delete mode 100644 apps/labs/doc/chip/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/chip/BasicDoc.vue
 delete mode 100644 apps/labs/doc/chip/IconDoc.vue
 delete mode 100644 apps/labs/doc/chip/ImageDoc.vue
 delete mode 100644 apps/labs/doc/chip/ImportDoc.vue
 delete mode 100644 apps/labs/doc/chip/StyleDoc.vue
 delete mode 100644 apps/labs/doc/chip/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/colorpicker/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/colorpicker/BasicDoc.vue
 delete mode 100644 apps/labs/doc/colorpicker/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/colorpicker/FormatDoc.vue
 delete mode 100644 apps/labs/doc/colorpicker/FormsDoc.vue
 delete mode 100644 apps/labs/doc/colorpicker/ImportDoc.vue
 delete mode 100644 apps/labs/doc/colorpicker/InlineDoc.vue
 delete mode 100644 apps/labs/doc/common/presetdoc/index.json
 delete mode 100644 apps/labs/doc/confirmdialog/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/confirmdialog/BasicDoc.vue
 delete mode 100644 apps/labs/doc/confirmdialog/ConfirmationServiceDoc.vue
 delete mode 100644 apps/labs/doc/confirmdialog/HeadlessDoc.vue
 delete mode 100644 apps/labs/doc/confirmdialog/ImportDoc.vue
 delete mode 100644 apps/labs/doc/confirmdialog/PositionDoc.vue
 delete mode 100644 apps/labs/doc/confirmdialog/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/confirmpopup/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/confirmpopup/BasicDoc.vue
 delete mode 100644 apps/labs/doc/confirmpopup/ConfirmationServiceDoc.vue
 delete mode 100644 apps/labs/doc/confirmpopup/HeadlessDoc.vue
 delete mode 100644 apps/labs/doc/confirmpopup/ImportDoc.vue
 delete mode 100644 apps/labs/doc/confirmpopup/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/contextmenu/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/contextmenu/BasicDoc.vue
 delete mode 100644 apps/labs/doc/contextmenu/CommandDoc.vue
 delete mode 100644 apps/labs/doc/contextmenu/DataTableDoc.vue
 delete mode 100644 apps/labs/doc/contextmenu/DocumentDoc.vue
 delete mode 100644 apps/labs/doc/contextmenu/ImportDoc.vue
 delete mode 100644 apps/labs/doc/contextmenu/RouterDoc.vue
 delete mode 100644 apps/labs/doc/contextmenu/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/datatable/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/datatable/BasicDoc.vue
 delete mode 100644 apps/labs/doc/datatable/ColumnGroupDoc.vue
 delete mode 100644 apps/labs/doc/datatable/ColumnToggleDoc.vue
 delete mode 100644 apps/labs/doc/datatable/ConditionalStyleDoc.vue
 delete mode 100644 apps/labs/doc/datatable/ContextMenuDoc.vue
 delete mode 100644 apps/labs/doc/datatable/DynamicColumnsDoc.vue
 delete mode 100644 apps/labs/doc/datatable/ExportDoc.vue
 delete mode 100644 apps/labs/doc/datatable/GridLinesDoc.vue
 delete mode 100644 apps/labs/doc/datatable/ImportDoc.vue
 delete mode 100644 apps/labs/doc/datatable/LazyLoadDoc.vue
 delete mode 100644 apps/labs/doc/datatable/ReorderDoc.vue
 delete mode 100644 apps/labs/doc/datatable/RowExpansionDoc.vue
 delete mode 100644 apps/labs/doc/datatable/SizeDoc.vue
 delete mode 100644 apps/labs/doc/datatable/StatefulDoc.vue
 delete mode 100644 apps/labs/doc/datatable/StripedRowsDoc.vue
 delete mode 100644 apps/labs/doc/datatable/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/datatable/colresize/ExpandModeDoc.vue
 delete mode 100644 apps/labs/doc/datatable/colresize/FitModeDoc.vue
 delete mode 100644 apps/labs/doc/datatable/edit/CellEditDoc.vue
 delete mode 100644 apps/labs/doc/datatable/edit/RowEditDoc.vue
 delete mode 100644 apps/labs/doc/datatable/filter/AdvancedFilterDoc.vue
 delete mode 100644 apps/labs/doc/datatable/filter/BasicFilterDoc.vue
 delete mode 100644 apps/labs/doc/datatable/pagination/PaginationBasicDoc.vue
 delete mode 100644 apps/labs/doc/datatable/pagination/PaginationHeadlessDoc.vue
 delete mode 100644 apps/labs/doc/datatable/pagination/PaginationTemplateDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowselection/RowSelectEventsDoc.vue
 delete mode 100644 apps/labs/doc/datatable/rowselection/SingleRowSelectionDoc.vue
 delete mode 100644 apps/labs/doc/datatable/samples/CustomersDoc.vue
 delete mode 100644 apps/labs/doc/datatable/samples/ProductsDoc.vue
 delete mode 100644 apps/labs/doc/datatable/scroll/FlexibleScrollDoc.vue
 delete mode 100644 apps/labs/doc/datatable/scroll/FrozenColumnsDoc.vue
 delete mode 100644 apps/labs/doc/datatable/scroll/FrozenRowsDoc.vue
 delete mode 100644 apps/labs/doc/datatable/scroll/HorizontalScrollDoc.vue
 delete mode 100644 apps/labs/doc/datatable/scroll/VerticalScrollDoc.vue
 delete mode 100644 apps/labs/doc/datatable/sort/MultipleColumnsDoc.vue
 delete mode 100644 apps/labs/doc/datatable/sort/PresortDoc.vue
 delete mode 100644 apps/labs/doc/datatable/sort/RemovableSortDoc.vue
 delete mode 100644 apps/labs/doc/datatable/sort/SingleColumnDoc.vue
 delete mode 100644 apps/labs/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
 delete mode 100644 apps/labs/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
 delete mode 100644 apps/labs/doc/dataview/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/dataview/BasicDoc.vue
 delete mode 100644 apps/labs/doc/dataview/ImportDoc.vue
 delete mode 100644 apps/labs/doc/dataview/LayoutDoc.vue
 delete mode 100644 apps/labs/doc/dataview/LoadingDoc.vue
 delete mode 100644 apps/labs/doc/dataview/PaginationDoc.vue
 delete mode 100644 apps/labs/doc/dataview/SortingDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/BasicDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/ButtonBarDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/DateTemplateDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/FilledDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/FormatDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/FormsDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/IconDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/ImportDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/InlineDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/LocaleDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/MinMaxDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/MonthPickerDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/MultipleMonthsDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/RangeDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/SizesDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/TimeDoc.vue
 delete mode 100644 apps/labs/doc/datepicker/YearPickerDoc.vue
 delete mode 100644 apps/labs/doc/deferredcontent/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/deferredcontent/BasicDoc.vue
 delete mode 100644 apps/labs/doc/deferredcontent/DataTableDoc.vue
 delete mode 100644 apps/labs/doc/deferredcontent/ImportDoc.vue
 delete mode 100644 apps/labs/doc/dialog/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/dialog/BasicDoc.vue
 delete mode 100644 apps/labs/doc/dialog/HeadlessDoc.vue
 delete mode 100644 apps/labs/doc/dialog/ImportDoc.vue
 delete mode 100644 apps/labs/doc/dialog/LongContentDoc.vue
 delete mode 100644 apps/labs/doc/dialog/MaximizableDoc.vue
 delete mode 100644 apps/labs/doc/dialog/PositionDoc.vue
 delete mode 100644 apps/labs/doc/dialog/ResponsiveDoc.vue
 delete mode 100644 apps/labs/doc/dialog/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/dialog/WithoutModalDoc.vue
 delete mode 100644 apps/labs/doc/divider/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/divider/BasicDoc.vue
 delete mode 100644 apps/labs/doc/divider/ContentDoc.vue
 delete mode 100644 apps/labs/doc/divider/ImportDoc.vue
 delete mode 100644 apps/labs/doc/divider/LoginDoc.vue
 delete mode 100644 apps/labs/doc/divider/TypeDoc.vue
 delete mode 100644 apps/labs/doc/divider/VerticalDoc.vue
 delete mode 100644 apps/labs/doc/dock/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/dock/AdvancedDoc.vue
 delete mode 100644 apps/labs/doc/dock/BasicDoc.vue
 delete mode 100644 apps/labs/doc/dock/ImportDoc.vue
 delete mode 100644 apps/labs/doc/drawer/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/drawer/BasicDoc.vue
 delete mode 100644 apps/labs/doc/drawer/FullScreenDoc.vue
 delete mode 100644 apps/labs/doc/drawer/HeadlessDoc.vue
 delete mode 100644 apps/labs/doc/drawer/ImportDoc.vue
 delete mode 100644 apps/labs/doc/drawer/PositionDoc.vue
 delete mode 100644 apps/labs/doc/drawer/SizeDoc.vue
 delete mode 100644 apps/labs/doc/drawer/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/CloseDialogDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/CustomizationDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/DialogServiceDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/EventsDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/ExampleDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/ImportDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/OpenDialogDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/PassingDataDoc.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/demo/FooterDemo.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/demo/InfoDemo.vue
 delete mode 100644 apps/labs/doc/dynamicdialog/demo/ProductListDemo.vue
 delete mode 100644 apps/labs/doc/fieldset/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/fieldset/BasicDoc.vue
 delete mode 100644 apps/labs/doc/fieldset/ImportDoc.vue
 delete mode 100644 apps/labs/doc/fieldset/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/fieldset/ToggleableDoc.vue
 delete mode 100644 apps/labs/doc/fileupload/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/fileupload/AdvancedDoc.vue
 delete mode 100644 apps/labs/doc/fileupload/AutoDoc.vue
 delete mode 100644 apps/labs/doc/fileupload/BasicDoc.vue
 delete mode 100644 apps/labs/doc/fileupload/CustomUploadDoc.vue
 delete mode 100644 apps/labs/doc/fileupload/ImportDoc.vue
 delete mode 100644 apps/labs/doc/fileupload/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/floatlabel/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/floatlabel/BasicDoc.vue
 delete mode 100644 apps/labs/doc/floatlabel/ImportDoc.vue
 delete mode 100644 apps/labs/doc/floatlabel/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/floatlabel/VariantsDoc.vue
 delete mode 100644 apps/labs/doc/fluid/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/fluid/BasicDoc.vue
 delete mode 100644 apps/labs/doc/fluid/ImportDoc.vue
 delete mode 100644 apps/labs/doc/galleria/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/galleria/AdvancedDoc.vue
 delete mode 100644 apps/labs/doc/galleria/AutoPlayDoc.vue
 delete mode 100644 apps/labs/doc/galleria/BasicDoc.vue
 delete mode 100644 apps/labs/doc/galleria/CaptionDoc.vue
 delete mode 100644 apps/labs/doc/galleria/ControlledDoc.vue
 delete mode 100644 apps/labs/doc/galleria/ImportDoc.vue
 delete mode 100644 apps/labs/doc/galleria/ResponsiveDoc.vue
 delete mode 100644 apps/labs/doc/galleria/ThumbnailDoc.vue
 delete mode 100644 apps/labs/doc/galleria/fullscreen/CustomContentDoc.vue
 delete mode 100644 apps/labs/doc/galleria/fullscreen/WithThumbnailsDoc.vue
 delete mode 100644 apps/labs/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
 delete mode 100644 apps/labs/doc/galleria/indicator/ClickEventDoc.vue
 delete mode 100644 apps/labs/doc/galleria/indicator/HoverEventDoc.vue
 delete mode 100644 apps/labs/doc/galleria/indicator/PositionDoc.vue
 delete mode 100644 apps/labs/doc/galleria/indicator/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/galleria/navigator/HoverDoc.vue
 delete mode 100644 apps/labs/doc/galleria/navigator/IndicatorsDoc.vue
 delete mode 100644 apps/labs/doc/galleria/navigator/ItemThumbnailsDoc.vue
 delete mode 100644 apps/labs/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
 delete mode 100644 apps/labs/doc/iconfield/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/iconfield/BasicDoc.vue
 delete mode 100644 apps/labs/doc/iconfield/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/iconfield/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/iconfield/ImportDoc.vue
 delete mode 100644 apps/labs/doc/iconfield/SizesDoc.vue
 delete mode 100644 apps/labs/doc/iconfield/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/icons/BasicDoc.vue
 delete mode 100644 apps/labs/doc/icons/ColorDoc.vue
 delete mode 100644 apps/labs/doc/icons/ConstantsDoc.vue
 delete mode 100644 apps/labs/doc/icons/DownloadDoc.vue
 delete mode 100644 apps/labs/doc/icons/FigmaDoc.vue
 rename apps/labs/doc/{customicons => icons}/FontAwesomeDoc.vue (100%)
 rename apps/labs/doc/{customicons => icons}/ImageDoc.vue (88%)
 delete mode 100644 apps/labs/doc/icons/ImportDoc.vue
 delete mode 100644 apps/labs/doc/icons/ListDoc.vue
 rename apps/labs/doc/{customicons => icons}/MaterialDoc.vue (100%)
 rename apps/labs/doc/{customicons => icons}/SVGDoc.vue (100%)
 delete mode 100644 apps/labs/doc/icons/SizeDoc.vue
 delete mode 100644 apps/labs/doc/icons/SpinDoc.vue
 rename apps/labs/doc/{customicons => icons}/VideoDoc.vue (100%)
 delete mode 100644 apps/labs/doc/iftalabel/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/iftalabel/BasicDoc.vue
 delete mode 100644 apps/labs/doc/iftalabel/ImportDoc.vue
 delete mode 100644 apps/labs/doc/iftalabel/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/image/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/image/BasicDoc.vue
 delete mode 100644 apps/labs/doc/image/ImportDoc.vue
 delete mode 100644 apps/labs/doc/image/PreviewDoc.vue
 delete mode 100644 apps/labs/doc/image/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/imagecompare/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/imagecompare/BasicDoc.vue
 delete mode 100644 apps/labs/doc/imagecompare/ImportDoc.vue
 delete mode 100644 apps/labs/doc/imagecompare/ResponsiveDoc.vue
 delete mode 100644 apps/labs/doc/inplace/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/inplace/BasicDoc.vue
 delete mode 100644 apps/labs/doc/inplace/ImageDoc.vue
 delete mode 100644 apps/labs/doc/inplace/ImportDoc.vue
 delete mode 100644 apps/labs/doc/inplace/InputDoc.vue
 delete mode 100644 apps/labs/doc/inplace/LazyDoc.vue
 delete mode 100644 apps/labs/doc/inputgroup/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/inputgroup/BasicDoc.vue
 delete mode 100644 apps/labs/doc/inputgroup/ButtonDoc.vue
 delete mode 100644 apps/labs/doc/inputgroup/CheckboxDoc.vue
 delete mode 100644 apps/labs/doc/inputgroup/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/inputgroup/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/inputgroup/ImportDoc.vue
 delete mode 100644 apps/labs/doc/inputgroup/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/BasicDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/FilledDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/FormsDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/ImportDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/MaskDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/OptionalDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/SizesDoc.vue
 delete mode 100644 apps/labs/doc/inputmask/SlotCharDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/ButtonsDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/CurrencyDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/FilledDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/FormsDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/ImportDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/LocaleDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/NumeralsDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/SizesDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/VerticalDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/BasicDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/FilledDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/FormsDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/ImportDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/IntegerOnlyDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/MaskDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/SampleDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/SizesDoc.vue
 delete mode 100644 apps/labs/doc/inputotp/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/inputtext/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/inputtext/FilledDoc.vue
 delete mode 100644 apps/labs/doc/inputtext/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/inputtext/FormsDoc.vue
 delete mode 100644 apps/labs/doc/inputtext/IftaLabelDoc.vue
 create mode 100644 apps/labs/doc/introduction/ArchitectureDoc.vue
 delete mode 100644 apps/labs/doc/knob/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/knob/BasicDoc.vue
 delete mode 100644 apps/labs/doc/knob/ColorDoc.vue
 delete mode 100644 apps/labs/doc/knob/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/knob/FormsDoc.vue
 delete mode 100644 apps/labs/doc/knob/ImportDoc.vue
 delete mode 100644 apps/labs/doc/knob/MinMaxDoc.vue
 delete mode 100644 apps/labs/doc/knob/ReactiveDoc.vue
 delete mode 100644 apps/labs/doc/knob/ReadOnlyDoc.vue
 delete mode 100644 apps/labs/doc/knob/SizeDoc.vue
 delete mode 100644 apps/labs/doc/knob/StepDoc.vue
 delete mode 100644 apps/labs/doc/knob/StrokeDoc.vue
 delete mode 100644 apps/labs/doc/knob/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/listbox/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/listbox/BasicDoc.vue
 delete mode 100644 apps/labs/doc/listbox/CheckmarkDoc.vue
 delete mode 100644 apps/labs/doc/listbox/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/listbox/FilterDoc.vue
 delete mode 100644 apps/labs/doc/listbox/FormsDoc.vue
 delete mode 100644 apps/labs/doc/listbox/GroupDoc.vue
 delete mode 100644 apps/labs/doc/listbox/ImportDoc.vue
 delete mode 100644 apps/labs/doc/listbox/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/listbox/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/listbox/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/listbox/VirtualScrollDoc.vue
 delete mode 100644 apps/labs/doc/megamenu/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/megamenu/BasicDoc.vue
 delete mode 100644 apps/labs/doc/megamenu/CommandDoc.vue
 delete mode 100644 apps/labs/doc/megamenu/ImportDoc.vue
 delete mode 100644 apps/labs/doc/megamenu/RouterDoc.vue
 delete mode 100644 apps/labs/doc/megamenu/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/megamenu/VerticalDoc.vue
 delete mode 100644 apps/labs/doc/menu/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/menu/BasicDoc.vue
 delete mode 100644 apps/labs/doc/menu/CommandDoc.vue
 delete mode 100644 apps/labs/doc/menu/GroupDoc.vue
 delete mode 100644 apps/labs/doc/menu/ImportDoc.vue
 delete mode 100644 apps/labs/doc/menu/PopupDoc.vue
 delete mode 100644 apps/labs/doc/menu/RouterDoc.vue
 delete mode 100644 apps/labs/doc/menu/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/menubar/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/menubar/AdvancedDoc.vue
 delete mode 100644 apps/labs/doc/menubar/BasicDoc.vue
 delete mode 100644 apps/labs/doc/menubar/CommandDoc.vue
 delete mode 100644 apps/labs/doc/menubar/ImportDoc.vue
 delete mode 100644 apps/labs/doc/menubar/RouterDoc.vue
 delete mode 100644 apps/labs/doc/menubar/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/message/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/message/BasicDoc.vue
 delete mode 100644 apps/labs/doc/message/ClosableDoc.vue
 delete mode 100644 apps/labs/doc/message/DynamicDoc.vue
 delete mode 100644 apps/labs/doc/message/FormsDoc.vue
 delete mode 100644 apps/labs/doc/message/IconDoc.vue
 delete mode 100644 apps/labs/doc/message/ImportDoc.vue
 delete mode 100644 apps/labs/doc/message/LifeDoc.vue
 delete mode 100644 apps/labs/doc/message/OutlinedDoc.vue
 delete mode 100644 apps/labs/doc/message/SeverityDoc.vue
 delete mode 100644 apps/labs/doc/message/SimpleDoc.vue
 delete mode 100644 apps/labs/doc/message/SizesDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/BasicDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/IconDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/ImportDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/LabelDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/MinMaxDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/metergroup/VerticalDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/BasicDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/ChipsDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/ClearIconDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/FilledDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/FilterDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/FormsDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/GroupDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/ImportDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/LoadingStateDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/SizesDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/multiselect/VirtualScrollDoc.vue
 delete mode 100644 apps/labs/doc/orderlist/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/orderlist/BasicDoc.vue
 delete mode 100644 apps/labs/doc/orderlist/ImportDoc.vue
 delete mode 100644 apps/labs/doc/orderlist/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/organizationchart/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/organizationchart/BasicDoc.vue
 delete mode 100644 apps/labs/doc/organizationchart/ColoredDoc.vue
 delete mode 100644 apps/labs/doc/organizationchart/ImportDoc.vue
 delete mode 100644 apps/labs/doc/organizationchart/SelectionDoc.vue
 delete mode 100644 apps/labs/doc/organizationchart/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/overview/IdeaDoc.vue
 delete mode 100644 apps/labs/doc/overview/PresetDoc.vue
 delete mode 100644 apps/labs/doc/overview/passthrough/GlobalDoc.vue
 delete mode 100644 apps/labs/doc/overview/passthrough/LocalDoc.vue
 delete mode 100644 apps/labs/doc/overview/passthrough/OverrideDoc.vue
 delete mode 100644 apps/labs/doc/overview/passthrough/ReuseDoc.vue
 delete mode 100644 apps/labs/doc/paginator/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/paginator/BasicDoc.vue
 delete mode 100644 apps/labs/doc/paginator/CurrentPageReportDoc.vue
 delete mode 100644 apps/labs/doc/paginator/CustomContentDoc.vue
 delete mode 100644 apps/labs/doc/paginator/HeadlessDoc.vue
 delete mode 100644 apps/labs/doc/paginator/ImportDoc.vue
 delete mode 100644 apps/labs/doc/paginator/ResponsiveDoc.vue
 delete mode 100644 apps/labs/doc/paginator/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/panel/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/panel/BasicDoc.vue
 delete mode 100644 apps/labs/doc/panel/ImportDoc.vue
 delete mode 100644 apps/labs/doc/panel/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/panel/ToggleableDoc.vue
 delete mode 100644 apps/labs/doc/panelmenu/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/panelmenu/BasicDoc.vue
 delete mode 100644 apps/labs/doc/panelmenu/CommandDoc.vue
 delete mode 100644 apps/labs/doc/panelmenu/ControlledDoc.vue
 delete mode 100644 apps/labs/doc/panelmenu/ImportDoc.vue
 delete mode 100644 apps/labs/doc/panelmenu/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/panelmenu/RouterDoc.vue
 delete mode 100644 apps/labs/doc/panelmenu/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/password/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/password/BasicDoc.vue
 delete mode 100644 apps/labs/doc/password/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/password/FilledDoc.vue
 delete mode 100644 apps/labs/doc/password/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/password/FormsDoc.vue
 delete mode 100644 apps/labs/doc/password/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/password/ImportDoc.vue
 delete mode 100644 apps/labs/doc/password/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/password/LocaleDoc.vue
 delete mode 100644 apps/labs/doc/password/MeterDoc.vue
 delete mode 100644 apps/labs/doc/password/SizesDoc.vue
 delete mode 100644 apps/labs/doc/password/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/password/ToggleMaskDoc.vue
 delete mode 100644 apps/labs/doc/picklist/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/picklist/BasicDoc.vue
 delete mode 100644 apps/labs/doc/picklist/ImportDoc.vue
 delete mode 100644 apps/labs/doc/picklist/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/popover/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/popover/BasicDoc.vue
 delete mode 100644 apps/labs/doc/popover/DataTableDoc.vue
 delete mode 100644 apps/labs/doc/popover/ImportDoc.vue
 delete mode 100644 apps/labs/doc/popover/SelectDataDoc.vue
 delete mode 100644 apps/labs/doc/progressbar/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/progressbar/BasicDoc.vue
 delete mode 100644 apps/labs/doc/progressbar/DynamicDoc.vue
 delete mode 100644 apps/labs/doc/progressbar/ImportDoc.vue
 delete mode 100644 apps/labs/doc/progressbar/IndeterminateDoc.vue
 delete mode 100644 apps/labs/doc/progressbar/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/progressspinner/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/progressspinner/BasicDoc.vue
 delete mode 100644 apps/labs/doc/progressspinner/CustomDoc.vue
 delete mode 100644 apps/labs/doc/progressspinner/ImportDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/DynamicDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/FilledDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/FormsDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/GroupDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/ImportDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/radiobutton/SizesDoc.vue
 delete mode 100644 apps/labs/doc/rating/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/rating/BasicDoc.vue
 delete mode 100644 apps/labs/doc/rating/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/rating/FormsDoc.vue
 delete mode 100644 apps/labs/doc/rating/ImportDoc.vue
 delete mode 100644 apps/labs/doc/rating/NumberOfStarsDoc.vue
 delete mode 100644 apps/labs/doc/rating/ReadOnlyDoc.vue
 delete mode 100644 apps/labs/doc/rating/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/ripple/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/ripple/ConfigurationDoc.vue
 delete mode 100644 apps/labs/doc/ripple/CustomDoc.vue
 delete mode 100644 apps/labs/doc/ripple/DefaultDoc.vue
 delete mode 100644 apps/labs/doc/ripple/ImportDoc.vue
 delete mode 100644 apps/labs/doc/scrollpanel/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/scrollpanel/BasicDoc.vue
 delete mode 100644 apps/labs/doc/scrollpanel/CustomDoc.vue
 delete mode 100644 apps/labs/doc/scrollpanel/ImportDoc.vue
 delete mode 100644 apps/labs/doc/scrolltop/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/scrolltop/BasicDoc.vue
 delete mode 100644 apps/labs/doc/scrolltop/ElementDoc.vue
 delete mode 100644 apps/labs/doc/scrolltop/ImportDoc.vue
 delete mode 100644 apps/labs/doc/select/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/select/BasicDoc.vue
 delete mode 100644 apps/labs/doc/select/CheckmarkDoc.vue
 delete mode 100644 apps/labs/doc/select/ClearIconDoc.vue
 delete mode 100644 apps/labs/doc/select/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/select/EditableDoc.vue
 delete mode 100644 apps/labs/doc/select/FilledDoc.vue
 delete mode 100644 apps/labs/doc/select/FilterDoc.vue
 delete mode 100644 apps/labs/doc/select/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/select/FormsDoc.vue
 delete mode 100644 apps/labs/doc/select/GroupDoc.vue
 delete mode 100644 apps/labs/doc/select/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/select/ImportDoc.vue
 delete mode 100644 apps/labs/doc/select/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/select/LazyVirtualScrollDoc.vue
 delete mode 100644 apps/labs/doc/select/LoadingStateDoc.vue
 delete mode 100644 apps/labs/doc/select/SizesDoc.vue
 delete mode 100644 apps/labs/doc/select/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/select/VirtualScrollDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/BasicDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/FormsDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/ImportDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/SizesDoc.vue
 delete mode 100644 apps/labs/doc/selectbutton/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/skeleton/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/skeleton/CardDoc.vue
 delete mode 100644 apps/labs/doc/skeleton/DataTableDoc.vue
 delete mode 100644 apps/labs/doc/skeleton/ImportDoc.vue
 delete mode 100644 apps/labs/doc/skeleton/ListDoc.vue
 delete mode 100644 apps/labs/doc/skeleton/ShapesDoc.vue
 delete mode 100644 apps/labs/doc/slider/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/slider/BasicDoc.vue
 delete mode 100644 apps/labs/doc/slider/FilterDoc.vue
 delete mode 100644 apps/labs/doc/slider/FormsDoc.vue
 delete mode 100644 apps/labs/doc/slider/ImportDoc.vue
 delete mode 100644 apps/labs/doc/slider/InputDoc.vue
 delete mode 100644 apps/labs/doc/slider/RangeDoc.vue
 delete mode 100644 apps/labs/doc/slider/StepDoc.vue
 delete mode 100644 apps/labs/doc/slider/VerticalDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/CircleDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/ImportDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/LinearDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/MaskDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/QuarterCircleDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/SemiCircleDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/speeddial/TooltipDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/BasicDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/IconsDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/ImportDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/NestedDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/OutlinedDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/RaisedDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/RaisedTextDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/RoundedDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/SeverityDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/SizesDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/splitbutton/TextDoc.vue
 delete mode 100644 apps/labs/doc/splitter/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/splitter/HorizontalDoc.vue
 delete mode 100644 apps/labs/doc/splitter/ImportDoc.vue
 delete mode 100644 apps/labs/doc/splitter/NestedDoc.vue
 delete mode 100644 apps/labs/doc/splitter/SizeDoc.vue
 delete mode 100644 apps/labs/doc/splitter/VerticalDoc.vue
 delete mode 100644 apps/labs/doc/stepper/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/stepper/HorizontalDoc.vue
 delete mode 100644 apps/labs/doc/stepper/ImportDoc.vue
 delete mode 100644 apps/labs/doc/stepper/LinearDoc.vue
 delete mode 100644 apps/labs/doc/stepper/StepsOnlyDoc.vue
 delete mode 100644 apps/labs/doc/stepper/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/stepper/VerticalDoc.vue
 delete mode 100644 apps/labs/doc/tabs/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/tabs/BasicDoc.vue
 delete mode 100644 apps/labs/doc/tabs/ControlledDoc.vue
 delete mode 100644 apps/labs/doc/tabs/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/tabs/DynamicDoc.vue
 delete mode 100644 apps/labs/doc/tabs/ImportDoc.vue
 delete mode 100644 apps/labs/doc/tabs/ScrollableDoc.vue
 delete mode 100644 apps/labs/doc/tabs/TabMenuDoc.vue
 delete mode 100644 apps/labs/doc/tabs/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/tag/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/tag/BasicDoc.vue
 delete mode 100644 apps/labs/doc/tag/IconDoc.vue
 delete mode 100644 apps/labs/doc/tag/ImportDoc.vue
 delete mode 100644 apps/labs/doc/tag/PillDoc.vue
 delete mode 100644 apps/labs/doc/tag/SeverityDoc.vue
 delete mode 100644 apps/labs/doc/tag/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/terminal/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/terminal/BasicDoc.vue
 delete mode 100644 apps/labs/doc/terminal/ImportDoc.vue
 delete mode 100644 apps/labs/doc/textarea/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/textarea/AutoResizeDoc.vue
 delete mode 100644 apps/labs/doc/textarea/BasicDoc.vue
 delete mode 100644 apps/labs/doc/textarea/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/textarea/FilledDoc.vue
 delete mode 100644 apps/labs/doc/textarea/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/textarea/FormsDoc.vue
 delete mode 100644 apps/labs/doc/textarea/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/textarea/ImportDoc.vue
 delete mode 100644 apps/labs/doc/textarea/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/textarea/SizesDoc.vue
 delete mode 100644 apps/labs/doc/tieredmenu/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/tieredmenu/BasicDoc.vue
 delete mode 100644 apps/labs/doc/tieredmenu/CommandDoc.vue
 delete mode 100644 apps/labs/doc/tieredmenu/ImportDoc.vue
 delete mode 100644 apps/labs/doc/tieredmenu/PopupDoc.vue
 delete mode 100644 apps/labs/doc/tieredmenu/RouterDoc.vue
 delete mode 100644 apps/labs/doc/tieredmenu/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/timeline/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/timeline/AlignmentDoc.vue
 delete mode 100644 apps/labs/doc/timeline/BasicDoc.vue
 delete mode 100644 apps/labs/doc/timeline/HorizontalDoc.vue
 delete mode 100644 apps/labs/doc/timeline/ImportDoc.vue
 delete mode 100644 apps/labs/doc/timeline/OppositeDoc.vue
 delete mode 100644 apps/labs/doc/timeline/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/toast/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/toast/BasicDoc.vue
 delete mode 100644 apps/labs/doc/toast/HeadlessDoc.vue
 delete mode 100644 apps/labs/doc/toast/ImportDoc.vue
 delete mode 100644 apps/labs/doc/toast/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/toast/PositionDoc.vue
 delete mode 100644 apps/labs/doc/toast/SeverityDoc.vue
 delete mode 100644 apps/labs/doc/toast/StickyDoc.vue
 delete mode 100644 apps/labs/doc/toast/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/toast/ToastServiceDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/BasicDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/CustomizedDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/FormsDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/ImportDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/SizesDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/BasicDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/FormsDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/ImportDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/PreselectionDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/toolbar/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/toolbar/BasicDoc.vue
 delete mode 100644 apps/labs/doc/toolbar/CustomDoc.vue
 delete mode 100644 apps/labs/doc/toolbar/ImportDoc.vue
 delete mode 100644 apps/labs/doc/tooltip/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/tooltip/AutoHideDoc.vue
 delete mode 100644 apps/labs/doc/tooltip/CustomDoc.vue
 delete mode 100644 apps/labs/doc/tooltip/DelayDoc.vue
 delete mode 100644 apps/labs/doc/tooltip/EventDoc.vue
 delete mode 100644 apps/labs/doc/tooltip/ImportDoc.vue
 delete mode 100644 apps/labs/doc/tooltip/PositionDoc.vue
 delete mode 100644 apps/labs/doc/tree/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/tree/BasicDoc.vue
 delete mode 100644 apps/labs/doc/tree/ControlledDoc.vue
 delete mode 100644 apps/labs/doc/tree/EventsDoc.vue
 delete mode 100644 apps/labs/doc/tree/FilterDoc.vue
 delete mode 100644 apps/labs/doc/tree/ImportDoc.vue
 delete mode 100644 apps/labs/doc/tree/LazyDoc.vue
 delete mode 100644 apps/labs/doc/tree/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/tree/selection/CheckboxDoc.vue
 delete mode 100644 apps/labs/doc/tree/selection/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/tree/selection/SingleDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/BasicDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/CheckboxDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/ClearIconDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/FilledDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/FilterDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/FloatLabelDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/FormsDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/IftaLabelDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/ImportDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/LazyDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/MultipleDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/SizesDoc.vue
 delete mode 100644 apps/labs/doc/treeselect/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/treetable/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/treetable/BasicDoc.vue
 delete mode 100644 apps/labs/doc/treetable/ColumnToggleDoc.vue
 delete mode 100644 apps/labs/doc/treetable/ContextMenuDoc.vue
 delete mode 100644 apps/labs/doc/treetable/ControlledDoc.vue
 delete mode 100644 apps/labs/doc/treetable/DynamicColumnsDoc.vue
 delete mode 100644 apps/labs/doc/treetable/FilterDoc.vue
 delete mode 100644 apps/labs/doc/treetable/ImportDoc.vue
 delete mode 100644 apps/labs/doc/treetable/LazyLoadDoc.vue
 delete mode 100644 apps/labs/doc/treetable/SizeDoc.vue
 delete mode 100644 apps/labs/doc/treetable/TemplateDoc.vue
 delete mode 100644 apps/labs/doc/treetable/pagination/PaginationBasicDoc.vue
 delete mode 100644 apps/labs/doc/treetable/pagination/PaginationHeadlessDoc.vue
 delete mode 100644 apps/labs/doc/treetable/pagination/PaginationTemplateDoc.vue
 delete mode 100644 apps/labs/doc/treetable/resize/ExpandModeDoc.vue
 delete mode 100644 apps/labs/doc/treetable/resize/FitModeDoc.vue
 delete mode 100644 apps/labs/doc/treetable/scroll/FlexibleScrollDoc.vue
 delete mode 100644 apps/labs/doc/treetable/scroll/FrozenColumnsDoc.vue
 delete mode 100644 apps/labs/doc/treetable/scroll/HorizontalScrollDoc.vue
 delete mode 100644 apps/labs/doc/treetable/scroll/VerticalScrollDoc.vue
 delete mode 100644 apps/labs/doc/treetable/selection/CheckboxRowSelectionDoc.vue
 delete mode 100644 apps/labs/doc/treetable/selection/MultipleRowsSelectionDoc.vue
 delete mode 100644 apps/labs/doc/treetable/selection/RowSelectionEventsDoc.vue
 delete mode 100644 apps/labs/doc/treetable/selection/SingleRowSelectionDoc.vue
 delete mode 100644 apps/labs/doc/treetable/sort/MultipleColumnsDoc.vue
 delete mode 100644 apps/labs/doc/treetable/sort/RemovableSortDoc.vue
 delete mode 100644 apps/labs/doc/treetable/sort/SingleColumnDoc.vue
 delete mode 100644 apps/labs/doc/virtualscroller/AccessibilityDoc.vue
 delete mode 100644 apps/labs/doc/virtualscroller/BasicDoc.vue
 delete mode 100644 apps/labs/doc/virtualscroller/DelayDoc.vue
 delete mode 100644 apps/labs/doc/virtualscroller/GridDoc.vue
 delete mode 100644 apps/labs/doc/virtualscroller/HorizontalDoc.vue
 delete mode 100644 apps/labs/doc/virtualscroller/ImportDoc.vue
 delete mode 100644 apps/labs/doc/virtualscroller/LazyDoc.vue
 delete mode 100644 apps/labs/doc/virtualscroller/LoadingDoc.vue
 delete mode 100755 apps/labs/pages/accordion/index.vue
 delete mode 100755 apps/labs/pages/autocomplete/index.vue
 delete mode 100755 apps/labs/pages/avatar/index.vue
 delete mode 100755 apps/labs/pages/badge/index.vue
 delete mode 100644 apps/labs/pages/blockui/index.vue
 delete mode 100755 apps/labs/pages/breadcrumb/index.vue
 delete mode 100755 apps/labs/pages/button/index.vue
 delete mode 100755 apps/labs/pages/card/index.vue
 delete mode 100755 apps/labs/pages/carousel/index.vue
 delete mode 100755 apps/labs/pages/cascadeselect/index.vue
 delete mode 100755 apps/labs/pages/checkbox/index.vue
 delete mode 100755 apps/labs/pages/chip/index.vue
 delete mode 100755 apps/labs/pages/colorpicker/index.vue
 delete mode 100755 apps/labs/pages/confirmdialog/index.vue
 delete mode 100755 apps/labs/pages/confirmpopup/index.vue
 delete mode 100755 apps/labs/pages/contextmenu/index.vue
 delete mode 100755 apps/labs/pages/datatable/index.vue
 delete mode 100755 apps/labs/pages/dataview/index.vue
 delete mode 100755 apps/labs/pages/datepicker/index.vue
 delete mode 100644 apps/labs/pages/deferredcontent/index.vue
 delete mode 100755 apps/labs/pages/dialog/index.vue
 delete mode 100755 apps/labs/pages/divider/index.vue
 delete mode 100755 apps/labs/pages/dock/index.vue
 delete mode 100755 apps/labs/pages/drawer/index.vue
 delete mode 100755 apps/labs/pages/dynamicdialog/index.vue
 delete mode 100755 apps/labs/pages/fieldset/index.vue
 delete mode 100644 apps/labs/pages/fileupload/index.vue
 delete mode 100644 apps/labs/pages/floatlabel/index.vue
 delete mode 100644 apps/labs/pages/fluid/index.vue
 delete mode 100755 apps/labs/pages/galleria/index.vue
 delete mode 100644 apps/labs/pages/iconfield/index.vue
 mode change 100755 => 100644 apps/labs/pages/icons/index.vue
 delete mode 100644 apps/labs/pages/iftalabel/index.vue
 delete mode 100755 apps/labs/pages/image/index.vue
 delete mode 100644 apps/labs/pages/imagecompare/index.vue
 delete mode 100644 apps/labs/pages/inplace/index.vue
 delete mode 100755 apps/labs/pages/inputgroup/index.vue
 delete mode 100755 apps/labs/pages/inputmask/index.vue
 delete mode 100755 apps/labs/pages/inputnumber/index.vue
 delete mode 100644 apps/labs/pages/inputotp/index.vue
 mode change 100755 => 100644 apps/labs/pages/inputtext/index.vue
 rename apps/labs/pages/{customicons => introduction}/index.vue (88%)
 delete mode 100755 apps/labs/pages/knob/index.vue
 delete mode 100755 apps/labs/pages/listbox/index.vue
 delete mode 100755 apps/labs/pages/megamenu/index.vue
 delete mode 100755 apps/labs/pages/menu/index.vue
 delete mode 100755 apps/labs/pages/menubar/index.vue
 delete mode 100755 apps/labs/pages/message/index.vue
 delete mode 100644 apps/labs/pages/metergroup/index.vue
 delete mode 100755 apps/labs/pages/multiselect/index.vue
 delete mode 100755 apps/labs/pages/orderlist/index.vue
 delete mode 100755 apps/labs/pages/organizationchart/index.vue
 delete mode 100755 apps/labs/pages/paginator/index.vue
 delete mode 100755 apps/labs/pages/panel/index.vue
 delete mode 100755 apps/labs/pages/panelmenu/index.vue
 delete mode 100755 apps/labs/pages/password/index.vue
 delete mode 100755 apps/labs/pages/picklist/index.vue
 delete mode 100755 apps/labs/pages/popover/index.vue
 delete mode 100755 apps/labs/pages/progressbar/index.vue
 delete mode 100644 apps/labs/pages/progressspinner/index.vue
 delete mode 100755 apps/labs/pages/radiobutton/index.vue
 delete mode 100755 apps/labs/pages/rating/index.vue
 delete mode 100755 apps/labs/pages/ripple/index.vue
 delete mode 100644 apps/labs/pages/scrollpanel/index.vue
 delete mode 100644 apps/labs/pages/scrolltop/index.vue
 delete mode 100755 apps/labs/pages/select/index.vue
 delete mode 100755 apps/labs/pages/selectbutton/index.vue
 delete mode 100644 apps/labs/pages/skeleton/index.vue
 delete mode 100755 apps/labs/pages/slider/index.vue
 delete mode 100644 apps/labs/pages/speeddial/index.vue
 delete mode 100755 apps/labs/pages/splitbutton/index.vue
 delete mode 100644 apps/labs/pages/splitter/index.vue
 delete mode 100644 apps/labs/pages/stepper/index.vue
 delete mode 100755 apps/labs/pages/tabs/index.vue
 delete mode 100755 apps/labs/pages/tag/index.vue
 delete mode 100755 apps/labs/pages/terminal/index.vue
 delete mode 100755 apps/labs/pages/textarea/index.vue
 delete mode 100755 apps/labs/pages/tieredmenu/index.vue
 delete mode 100644 apps/labs/pages/timeline/index.vue
 delete mode 100755 apps/labs/pages/toast/index.vue
 delete mode 100755 apps/labs/pages/togglebutton/index.vue
 delete mode 100755 apps/labs/pages/toggleswitch/index.vue
 delete mode 100755 apps/labs/pages/toolbar/index.vue
 delete mode 100755 apps/labs/pages/tooltip/index.vue
 delete mode 100755 apps/labs/pages/tree/index.vue
 delete mode 100755 apps/labs/pages/treeselect/index.vue
 delete mode 100755 apps/labs/pages/treetable/index.vue
 delete mode 100644 apps/labs/pages/virtualscroller/index.vue
 create mode 100644 apps/labs/plex/inputtext/index.vue
 delete mode 100644 apps/labs/public/demo/data/icons.json

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index e593630f1..0a6588dfa 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -4,6 +4,10 @@
             "name": "Getting Started",
             "icon": "pi pi-home",
             "children": [
+                {
+                    "name": "Introduction",
+                    "to": "/introduction"
+                },
                 {
                     "name": "Vite",
                     "to": "/vite"
@@ -19,421 +23,15 @@
             "icon": "pi pi-compass",
             "children": [
                 {
-                    "name": "Form",
-                    "children": [
-                        {
-                            "name": "AutoComplete",
-                            "to": "/autocomplete"
-                        },
-                        {
-                            "name": "CascadeSelect",
-                            "to": "/cascadeselect"
-                        },
-                        {
-                            "name": "Checkbox",
-                            "to": "/checkbox"
-                        },
-                        {
-                            "name": "ColorPicker",
-                            "to": "/colorpicker"
-                        },
-                        {
-                            "name": "DatePicker",
-                            "to": "/datepicker"
-                        },
-                        {
-                            "name": "FloatLabel",
-                            "to": "/floatlabel"
-                        },
-                        {
-                            "name": "IconField",
-                            "to": "/iconfield"
-                        },
-                        {
-                            "name": "IftaLabel",
-                            "to": "/iftalabel"
-                        },
-                        {
-                            "name": "InputGroup",
-                            "to": "/inputgroup"
-                        },
-                        {
-                            "name": "InputMask",
-                            "to": "/inputmask"
-                        },
-                        {
-                            "name": "InputNumber",
-                            "to": "/inputnumber"
-                        },
-                        {
-                            "name": "InputOtp",
-                            "to": "/inputotp"
-                        },
-                        {
-                            "name": "InputText",
-                            "to": "/inputtext"
-                        },
-                        {
-                            "name": "Knob",
-                            "to": "/knob"
-                        },
-                        {
-                            "name": "Listbox",
-                            "to": "/listbox"
-                        },
-                        {
-                            "name": "MultiSelect",
-                            "to": "/multiselect"
-                        },
-                        {
-                            "name": "Password",
-                            "to": "/password"
-                        },
-                        {
-                            "name": "RadioButton",
-                            "to": "/radiobutton"
-                        },
-                        {
-                            "name": "Rating",
-                            "to": "/rating"
-                        },
-                        {
-                            "name": "Select",
-                            "to": "/select"
-                        },
-                        {
-                            "name": "SelectButton",
-                            "to": "/selectbutton"
-                        },
-                        {
-                            "name": "Slider",
-                            "to": "/slider"
-                        },
-                        {
-                            "name": "Textarea",
-                            "to": "/textarea"
-                        },
-                        {
-                            "name": "ToggleButton",
-                            "to": "/togglebutton"
-                        },
-                        {
-                            "name": "ToggleSwitch",
-                            "to": "/toggleswitch"
-                        },
-                        {
-                            "name": "TreeSelect",
-                            "to": "/treeselect"
-                        }
-                    ]
-                },
-                {
-                    "name": "Button",
-                    "children": [
-                        {
-                            "name": "Button",
-                            "to": "/button"
-                        },
-                        {
-                            "name": "Speed Dial",
-                            "to": "/speeddial"
-                        },
-                        {
-                            "name": "SplitButton",
-                            "to": "/splitbutton"
-                        }
-                    ]
-                },
-                {
-                    "name": "Data",
-                    "children": [
-                        {
-                            "name": "DataTable",
-                            "to": "/datatable"
-                        },
-                        {
-                            "name": "DataView",
-                            "to": "/dataview"
-                        },
-                        {
-                            "name": "OrderList",
-                            "to": "/orderlist"
-                        },
-                        {
-                            "name": "Org Chart",
-                            "to": "/organizationchart"
-                        },
-                        {
-                            "name": "Paginator",
-                            "to": "/paginator"
-                        },
-                        {
-                            "name": "PickList",
-                            "to": "/picklist"
-                        },
-                        {
-                            "name": "Timeline",
-                            "to": "/timeline"
-                        },
-                        {
-                            "name": "Tree",
-                            "to": "/tree"
-                        },
-                        {
-                            "name": "TreeTable",
-                            "to": "/treetable"
-                        },
-                        {
-                            "name": "VirtualScroller",
-                            "to": "/virtualscroller"
-                        }
-                    ]
-                },
-                {
-                    "name": "Panel",
-                    "children": [
-                        {
-                            "name": "Accordion",
-                            "to": "/accordion"
-                        },
-                        {
-                            "name": "Card",
-                            "to": "/card"
-                        },
-                        {
-                            "name": "Deferred",
-                            "to": "/deferredcontent"
-                        },
-                        {
-                            "name": "Divider",
-                            "to": "/divider"
-                        },
-                        {
-                            "name": "Fieldset",
-                            "to": "/fieldset"
-                        },
-                        {
-                            "name": "Panel",
-                            "to": "/panel"
-                        },
-                        {
-                            "name": "ScrollPanel",
-                            "to": "/scrollpanel"
-                        },
-                        {
-                            "name": "Splitter",
-                            "to": "/splitter"
-                        },
-                        {
-                            "name": "Stepper",
-                            "to": "/stepper"
-                        },
-                        {
-                            "name": "Tabs",
-                            "to": "/tabs"
-                        },
-                        {
-                            "name": "Toolbar",
-                            "to": "/toolbar"
-                        }
-                    ]
-                },
-                {
-                    "name": "File",
-                    "children": [
-                        {
-                            "name": "Upload",
-                            "to": "/fileupload"
-                        }
-                    ]
-                },
-                {
-                    "name": "Menu",
-                    "children": [
-                        {
-                            "name": "Breadcrumb",
-                            "to": "/breadcrumb"
-                        },
-                        {
-                            "name": "ContextMenu",
-                            "to": "/contextmenu"
-                        },
-                        {
-                            "name": "Dock",
-                            "to": "/dock"
-                        },
-                        {
-                            "name": "Menu",
-                            "to": "/menu"
-                        },
-                        {
-                            "name": "Menubar",
-                            "to": "/menubar"
-                        },
-                        {
-                            "name": "MegaMenu",
-                            "to": "/megamenu"
-                        },
-                        {
-                            "name": "PanelMenu",
-                            "to": "/panelmenu"
-                        },
-                        {
-                            "name": "TieredMenu",
-                            "to": "/tieredmenu"
-                        }
-                    ]
-                },
-                {
-                    "name": "Overlays",
-                    "children": [
-                        {
-                            "name": "ConfirmDialog",
-                            "to": "/confirmdialog"
-                        },
-                        {
-                            "name": "ConfirmPopup",
-                            "to": "/confirmpopup"
-                        },
-                        {
-                            "name": "Dialog",
-                            "to": "/dialog"
-                        },
-                        {
-                            "name": "DynamicDialog",
-                            "to": "/dynamicdialog"
-                        },
-                        {
-                            "name": "Drawer",
-                            "to": "/drawer"
-                        },
-                        {
-                            "name": "Popover",
-                            "to": "/popover"
-                        },
-                        {
-                            "name": "Tooltip",
-                            "to": "/tooltip"
-                        }
-                    ]
-                },
-                {
-                    "name": "Messages",
-                    "children": [
-                        {
-                            "name": "Message",
-                            "to": "/message"
-                        },
-                        {
-                            "name": "Toast",
-                            "to": "/toast"
-                        }
-                    ]
-                },
-                {
-                    "name": "Media",
-                    "children": [
-                        {
-                            "name": "Carousel",
-                            "to": "/carousel"
-                        },
-                        {
-                            "name": "Galleria",
-                            "to": "/galleria"
-                        },
-                        {
-                            "name": "Image",
-                            "to": "/image"
-                        },
-                        {
-                            "name": "ImageCompare",
-                            "to": "/imagecompare"
-                        }
-                    ]
-                },
-                {
-                    "name": "Misc",
-                    "children": [
-                        {
-                            "name": "Avatar",
-                            "to": "/avatar"
-                        },
-                        {
-                            "name": "Badge",
-                            "to": "/badge"
-                        },
-                        {
-                            "name": "BlockUI",
-                            "to": "/blockui"
-                        },
-                        {
-                            "name": "Chip",
-                            "to": "/chip"
-                        },
-                        {
-                            "name": "Inplace",
-                            "to": "/inplace"
-                        },
-                        {
-                            "name": "MeterGroup",
-                            "to": "/metergroup"
-                        },
-                        {
-                            "name": "ProgressBar",
-                            "to": "/progressbar"
-                        },
-                        {
-                            "name": "ProgressSpinner",
-                            "to": "/progressspinner"
-                        },
-                        {
-                            "name": "ScrollTop",
-                            "to": "/scrolltop"
-                        },
-                        {
-                            "name": "Skeleton",
-                            "to": "/skeleton"
-                        },
-                        {
-                            "name": "Tag",
-                            "to": "/tag"
-                        },
-                        {
-                            "name": "Terminal",
-                            "to": "/terminal"
-                        }
-                    ]
+                    "name": "InputText",
+                    "to": "/inputtext"
                 }
             ]
         },
-        {
-            "name": "Forms",
-            "icon": "pi pi-check-circle",
-            "href": "https://primevue.org/forms"
-        },
         {
             "name": "Icons",
             "icon": "pi pi-eye",
-            "children": [
-                {
-                    "name": "Prime Icons",
-                    "to": "/icons"
-                },
-                {
-                    "name": "Custom Icons",
-                    "to": "/customicons"
-                }
-            ]
-        },
-        {
-            "name": "Guides",
-            "icon": "pi pi-book",
-            "children": [
-                {
-                    "name": "RTL",
-                    "href": "https://primevue.org/guides/rtl"
-                }
-            ]
+            "to": "/icons"
         },
         {
             "name": "Support",
diff --git a/apps/labs/components/doc/DocComponent.vue b/apps/labs/components/doc/DocComponent.vue
index 4ee4085f8..c046927ec 100644
--- a/apps/labs/components/doc/DocComponent.vue
+++ b/apps/labs/components/doc/DocComponent.vue
@@ -9,9 +9,6 @@
             <li :class="{ 'doc-tabmenu-active': tab === 0 }">
                 <button type="button" @click="tab = 0">FEATURES</button>
             </li>
-            <li :class="{ 'doc-tabmenu-active': tab === 1 }">
-                <button type="button" @click="tab = 1">THEMING</button>
-            </li>
         </ul>
 
         <div class="doc-tabpanels">
@@ -43,10 +40,6 @@
                 </div>
                 <DocSectionNav :docs="componentDocs" />
             </div>
-
-            <div v-if="tab === 1" class="doc-tabpanel">
-                <DocPreset :presetKey="presetDoc?.key" :introText="`${header} Styles`" />
-            </div>
         </div>
     </div>
 </template>
diff --git a/apps/labs/components/doc/DocPreset.vue b/apps/labs/components/doc/DocPreset.vue
deleted file mode 100644
index 018277d3a..000000000
--- a/apps/labs/components/doc/DocPreset.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>{{ introText }}</h1>
-        </div>
-        <div class="xl:pe-72 -mt-4">
-            <DocSections :docs="docs" />
-        </div>
-    </div>
-</template>
-
-<script>
-import DocPresetSection from './DocPresetSection.vue';
-
-export default {
-    props: {
-        presetKey: {
-            type: [String, Array],
-            default: undefined
-        },
-        introText: {
-            type: String,
-            default: undefined
-        }
-    },
-    data() {
-        const common = {
-            component: DocPresetSection,
-            data: {
-                presetKey: this.presetKey
-            }
-        };
-
-        return {
-            docs: [
-                {
-                    id: 'presets.aura',
-                    label: 'Aura',
-                    ...common
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/labs/components/doc/DocPresetSection.vue b/apps/labs/components/doc/DocPresetSection.vue
deleted file mode 100644
index d135de370..000000000
--- a/apps/labs/components/doc/DocPresetSection.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <DocSectionText v-if="false" v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
-</template>
-
-<script>
-import Aura from '@/doc/common/presetdoc/index.json';
-import { isArray } from '@primeuix/utils/object';
-
-export default {
-    data() {
-        const preset = Aura;
-        const presetKey = this.$attrs?.data?.presetKey ?? '';
-        const keys = isArray(presetKey) ? presetKey : [presetKey];
-
-        const basicCode = `\n${preset[keys]}`;
-
-        return {
-            code: {
-                basic: `${basicCode}\n`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/components/doc/DocSectionCode.vue b/apps/labs/components/doc/DocSectionCode.vue
index d9c6ed75e..4604ec209 100644
--- a/apps/labs/components/doc/DocSectionCode.vue
+++ b/apps/labs/components/doc/DocSectionCode.vue
@@ -1,152 +1,40 @@
 <template>
-    <div v-if="!embedded" class="doc-section-code">
+    <div class="doc-section-code">
         <div class="doc-section-code-buttons">
-            <template v-if="codeMode !== 'basic' && !hideToggleCode">
-                <button :class="['py-0 px-2 rounded-md h-8', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
-                <button :class="['py-0 px-2 rounded-md h-8', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
-            </template>
-
-            <template v-if="!hideToggleCode">
-                <button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-8 w-8 p-0 inline-flex items-center justify-center">
-                    <i class="pi pi-code"></i>
-                </button>
-            </template>
-
-            <template v-if="!hideToggleCode && code.data">
-                <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-8 w-8 p-0 inline-flex items-center justify-center">
-                    <i class="pi pi-database"></i>
-                </button>
-            </template>
-
-            <template v-if="!hideCodeSandbox">
-                <button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="h-8 w-8 p-0 inline-flex items-center justify-center" @click="showCodesandbox">
-                    <svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
-                        <path
-                            d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
-                        />
-                    </svg>
-                </button>
-            </template>
-
-            <template v-if="!hideStackBlitz">
-                <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-8 w-8 p-0 inline-flex items-center justify-center" @click="showStackblitz">
-                    <svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
-                        <path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
-                    </svg>
-                </button>
-            </template>
-
             <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-8 w-8 p-0 inline-flex items-center justify-center">
                 <i class="pi pi-copy"></i>
             </button>
         </div>
 
         <div dir="ltr">
-            <template v-if="codeMode === 'basic' && importCode">
-                <pre v-code.script><code>{{ code.basic }}
+            <template v-if="!lang">
+                <pre v-code><code>{{ code }}
 </code></pre>
             </template>
 
-            <template v-if="codeMode === 'basic' && !importCode">
-                <pre v-code><code>{{ code.basic }}
-</code></pre>
-            </template>
-
-            <template v-if="codeMode !== 'basic' && codeLang === 'options'">
-                <pre v-code><code>{{ code.options }}
-</code></pre>
-            </template>
-
-            <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
-                <pre v-code><code>{{ code.composition }}
-</code></pre>
-            </template>
-
-            <template v-if="codeMode !== 'basic' && codeLang === 'data'">
-                <pre v-code.json><code>{{ code.data }}
+            <template v-else-if="lang === 'script'">
+                <pre v-code.script><code>{{ code }}
 </code></pre>
             </template>
         </div>
     </div>
-    <div v-else id="embed"></div>
 </template>
 
 <script>
-import { useCodeSandbox, useStackBlitz } from './codeeditor';
-
 export default {
-    inheritAttrs: false,
     props: {
         code: {
             type: null,
             default: null
         },
-        service: {
-            type: Array,
-            default: null
-        },
-        hideToggleCode: {
-            type: Boolean,
-            default: false
-        },
-        hideCodeSandbox: {
-            type: Boolean,
-            default: true
-        },
-        hideStackBlitz: {
-            type: Boolean,
-            default: true
-        },
-        dependencies: {
-            type: null,
-            default: null
-        },
-        component: {
+        lang: {
             type: String,
             default: null
-        },
-        extFiles: {
-            type: null,
-            default: null
-        },
-        importCode: {
-            type: Boolean,
-            default: false
-        },
-        embedded: {
-            type: Boolean,
-            default: false
-        },
-        scrollable: {
-            type: Boolean,
-            default: false
         }
     },
-    data() {
-        return {
-            codeMode: 'basic',
-            codeLang: this.code['options'] ? 'composition' : 'basic'
-        };
-    },
-    mounted() {
-        this.embedded && useStackBlitz(this.codeLang, this.code['composition'], this.service, this.code.pages, this.dependencies, this.component, this.extFiles, this.embedded);
-    },
     methods: {
-        toggleCodeMode(content) {
-            this.codeMode = this.codeMode === 'basic' ? content : 'basic';
-        },
-        onToggleData() {
-            this.toggleCodeMode('data');
-            this.codeLang = 'data';
-        },
         async copyCode() {
             await navigator.clipboard.writeText(this.code[this.codeLang]);
-        },
-        showCodesandbox() {
-            useCodeSandbox(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
-        },
-        showStackblitz() {
-            useStackBlitz(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
         }
     }
 };
diff --git a/apps/labs/components/landing/HeroSection.vue b/apps/labs/components/landing/HeroSection.vue
deleted file mode 100644
index d297cbbc2..000000000
--- a/apps/labs/components/landing/HeroSection.vue
+++ /dev/null
@@ -1,850 +0,0 @@
-<template>
-    <section class="landing-hero py-20 px-8 lg:px-20">
-        <div class="flex flex-col items-center">
-            <h1 class="text-5xl font-bold text-center xl:text-left leading-tight">UI Library for Vue.js with <span class="font-bold text-primary">Tailwind CSS</span></h1>
-            <p class="text-center mt-0 mb-8 text-surface-500 dark:text-surface-400 font-medium text-xl leading-relaxed lg:px-56">Create your own design with the flexibility of Tailwind CSS and the convenience of PrimeVue Unstyled components.</p>
-            <div class="flex items-center gap-4">
-                <NuxtLink to="/vite" class="linkbox linkbox-primary">
-                    <span>Get Started </span>
-                    <i class="pi pi-arrow-right ml-4"></i>
-                </NuxtLink>
-                <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox">
-                    <span>Give a Star</span>
-                    <i class="pi pi-star-fill ml-4 text-yellow-500"></i>
-                </a>
-            </div>
-        </div>
-        <div class="w-full flex lg:hidden items-center justify-center mt-16 mb-4">
-            <SelectButton v-model="selectedSampleOption" :options="sampleOptions" optionLabel="title" class="dark:border dark:border-white/20">
-                <template #option="slotProps">
-                    <i :class="slotProps.option.icon"></i>
-                    <div class="hidden sm:flex flex-1 text-sm font-medium leading-5">{{ slotProps.option.title }}</div>
-                </template>
-            </SelectButton>
-        </div>
-        <div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full rounded-3xl p-0 flex lg:hidden items-start gap-6 overflow-hidden">
-            <template v-for="sampleOption of sampleOptions" :key="sampleOption.title">
-                <img v-if="selectedSampleOption.title === sampleOption.title" :src="sampleOption.src + (isDark() ? '-dark.jpg' : '.jpg')" class="w-full" />
-            </template>
-        </div>
-        <div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full h-[85vh] max-h-[1040px] rounded-3xl p-6 hidden lg:flex lg:mt-20 items-start gap-6 overflow-hidden">
-            <div :class="isSlimMenu ? 'w-auto' : 'w-72'" class="rounded-2xl p-5 bg-surface-50 dark:bg-surface-900 h-full flex flex-col justify-between">
-                <div :class="isSlimMenu ? 'w-12 flex flex-col items-center' : 'w-auto'">
-                    <div class="flex items-center gap-3">
-                        <div class="w-11 h-11 border border-primary rounded-xl flex items-center justify-center">
-                            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M14.65 11.0645L13.1283 10.7253L14.3119 12.4216V17.6803L18.3698 14.2876V8.52002L16.5099 9.19856L14.65 11.0645Z" fill="var(--p-primary-color)" />
-                                <path d="M5.18078 11.0645L6.70251 10.7253L5.51894 12.4216V17.6803L1.46098 14.2876V8.52002L3.32088 9.19856L5.18078 11.0645Z" fill="var(--p-primary-color)" />
-                                <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M6.02649 12.7634L7.37914 10.7278L8.22455 11.2367H11.6062L12.4516 10.7278L13.8042 12.7634V20.397L12.7898 21.9237L11.6062 23.1111H8.22455L7.04098 21.9237L6.02649 20.397V12.7634Z"
-                                    fill="var(--p-primary-color)"
-                                />
-                                <path d="M14.311 20.9058L16.5091 18.7005V16.4952L14.311 18.3612V20.9058Z" fill="var(--p-primary-color)" />
-                                <path d="M5.51868 20.9058L3.32062 18.7005V16.4952L5.51868 18.3612V20.9058Z" fill="var(--p-primary-color)" />
-                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.578 0.888672H7.7177L6.36505 4.11174L8.56311 10.5579H11.4375L13.4665 4.11174L12.1138 0.888672H10.2543V10.5578H9.578V0.888672Z" fill="var(--p-primary-color)" />
-                                <path d="M8.56283 10.5575L1.29232 7.84329L0.277832 3.60242L6.53385 4.11132L8.73191 10.5575H8.56283Z" fill="var(--p-primary-color)" />
-                                <path d="M11.4372 10.5575L18.7077 7.84329L19.7222 3.60242L13.2971 4.11132L11.2681 10.5575H11.4372Z" fill="var(--p-primary-color)" />
-                                <path d="M13.8041 3.60283L17.3548 3.26356L14.9876 0.888672H12.6205L13.8041 3.60283Z" fill="var(--p-primary-color)" />
-                                <path d="M6.02676 3.60283L2.47604 3.26356L4.84318 0.888672H7.21033L6.02676 3.60283Z" fill="var(--p-primary-color)" />
-                            </svg>
-                        </div>
-                        <div :class="isSlimMenu ? 'hidden' : 'block'" class="text-surface-950 dark:text-surface-0 font-medium text-3xl">Prime</div>
-                    </div>
-                    <div class="mt-10 flex flex-col gap-2">
-                        <div
-                            v-for="(navItem, index) in sampleAppsSidebarNavs"
-                            :key="index"
-                            v-tooltip="isSlimMenu ? navItem.title : null"
-                            @click="setSelectedSampleAppsSidebarNav(navItem.title)"
-                            class="px-4 py-1 flex items-center gap-1 cursor-pointer text-base rounded-lg transition-all select-none"
-                            :class="[
-                                {
-                                    'w-12 justify-center py-4': isSlimMenu,
-                                    'w-full': !isSlimMenu
-                                },
-                                { 'text-muted-color hover:bg-emphasis bg-transparent': selectedSampleAppsSidebarNav !== navItem.title, 'text-primary-contrast bg-primary hover:bg-primary-emphasis': selectedSampleAppsSidebarNav === navItem.title }
-                            ]"
-                        >
-                            <i :class="navItem.icon"></i>
-                            <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
-                            <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'">{{ navItem.title }}</span>
-                        </div>
-                    </div>
-                </div>
-                <div :class="isSlimMenu ? 'w-12 flex flex-col items-center' : 'w-auto'">
-                    <div class="mt-10 flex flex-col gap-2">
-                        <div
-                            v-if="false"
-                            v-tooltip="isSlimMenu ? 'Expanded Mode' : null"
-                            class="px-4 py-1 flex items-center gap-1 cursor-pointer text-base rounded-lg transition-all select-none text-muted-color hover:bg-emphasis"
-                            :class="[
-                                {
-                                    'w-12 justify-center py-4': isSlimMenu,
-                                    'w-full': !isSlimMenu
-                                }
-                            ]"
-                        >
-                            <a @click="toggleSlimMenu" class="cursor-pointer block p-0 m-0 leading-none">
-                                <i :class="isSlimMenu ? 'pi pi-window-maximize' : 'pi pi-window-minimize'"></i>
-                                <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
-                                <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'"> Slim Mode</span>
-                            </a>
-                        </div>
-                        <div
-                            v-for="(navItem, index) in sampleAppsSidebarNavsMore"
-                            :key="index"
-                            v-tooltip="isSlimMenu ? navItem.title : null"
-                            class="px-4 py-1 flex items-center gap-1 cursor-pointer text-base rounded-lg transition-all select-none"
-                            :class="[
-                                {
-                                    'w-12 justify-center py-4': isSlimMenu,
-                                    'w-full': !isSlimMenu
-                                },
-                                { 'text-muted-color hover:bg-emphasis bg-transparent': selectedSampleAppsSidebarNav !== navItem.title, 'text-primary-contrast bg-primary hover:bg-primary-emphasis ': selectedSampleAppsSidebarNav === navItem.title }
-                            ]"
-                            @click="visibleRight = true"
-                        >
-                            <i :class="navItem.icon"></i>
-                            <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
-                            <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'">{{ navItem.title }}</span>
-                        </div>
-                    </div>
-                    <Divider />
-                    <div :class="isSlimMenu ? 'justify-center' : ' gap-3'" class="flex items-center">
-                        <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png" size="large" shape="circle" class="shrink-0" />
-                        <div>
-                            <div :class="isSlimMenu ? 'hidden' : 'text-base font-medium text-color leading-5'">Robin Jonas</div>
-                            <div :class="isSlimMenu ? 'hidden' : 'text-sm text-muted-color mt-1'">hi@robin.xyz</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <OverviewApp v-if="selectedSampleAppsSidebarNav === 'Overview'" />
-            <ChatApp v-if="selectedSampleAppsSidebarNav === 'Chat'" />
-            <MoviesApp v-if="selectedSampleAppsSidebarNav === 'Movies'" />
-            <CardsApp v-if="selectedSampleAppsSidebarNav === 'Cards'" />
-            <InboxApp v-if="selectedSampleAppsSidebarNav === 'Inbox'" />
-            <CustomersApp v-if="selectedSampleAppsSidebarNav === 'Customers'" />
-
-            <Drawer
-                v-model:visible="visibleRight"
-                :containerVisible="true"
-                header="Right Sidebar"
-                position="right"
-                closeIcon="pi pi-sign-out"
-                :pt="{
-                    root: {
-                        class: '!max-w-2xl !w-full !h-screen rounded-s-2xl'
-                    },
-                    footer: {
-                        class: 'hidden'
-                    },
-                    content: {
-                        class: 'flex-1 flex flex-col'
-                    }
-                }"
-            >
-                <template #container="">
-                    <div class="flex flex-col h-screen overflow-auto">
-                        <div class="">
-                            <div class="flex align-items-center gap-3 p-6">
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="large" class="rounded-xl overflow-hidden" />
-                                <div class="flex-1">
-                                    <div class="leading-6 text-color font-medium">Brook Simmons</div>
-                                    <div class="mt-1 leading-5 text-muted-color text-sm">Sales Executive</div>
-                                </div>
-                                <Button icon="pi pi-sign-out" text rounded severity="secondary" />
-                            </div>
-                            <SelectButton
-                                v-model="selectedSidebarOption"
-                                :options="sidebarOptions"
-                                :pt="{
-                                    root: {
-                                        class: 'px-6 py-3 w-full'
-                                    },
-                                    pcToggleButton: {
-                                        root: {
-                                            class: 'flex-1 py-2.5'
-                                        },
-                                        label: {
-                                            class: 'text-sm'
-                                        }
-                                    }
-                                }"
-                            />
-                        </div>
-                        <div v-if="selectedSidebarOption === 'Interaction Logs'" class="h-[calc(100%-172px)] flex flex-col gap-4 p-6">
-                            <div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
-                                <div class="flex items-start justify-between">
-                                    <div class="leading-6 font-medium text-color">Call Logs</div>
-                                    <Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all" severity="secondary" text />
-                                </div>
-                                <div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 flex flex-col rounded-lg overflow-hidden divide-y divide-surface-200 dark:divide-surface-800">
-                                    <div v-for="(data, index) of callLogs" :key="index" class="flex items-center gap-3 p-2">
-                                        <OverlayBadge severity="success" class="w-fit">
-                                            <Avatar :image="data.image" size="small" class="rounded-md w-10 h-10 overflow-hidden flex" />
-                                        </OverlayBadge>
-
-                                        <div class="flex-1">
-                                            <div class="text-sm leading-5 font-medium text-color">{{ data.name }}</div>
-                                            <div class="mt-1 text-sm leading-5 text-muted-color">{{ data.time }}</div>
-                                        </div>
-                                        <Button icon="pi pi-phone text-sm" text class="bg-primary/10 dark:bg-primary/20 w-8 h-8" />
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
-                                <div class="flex items-start justify-between">
-                                    <div class="leading-6 font-medium text-color">Email Records</div>
-                                    <Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all" severity="secondary" text />
-                                </div>
-                                <div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 flex flex-col rounded-lg overflow-hidden divide-y divide-surface-200 dark:divide-surface-800">
-                                    <div v-for="(data, index) of emailRecords" :key="index" class="flex items-center gap-3 p-2">
-                                        <OverlayBadge severity="danger" class="w-fit">
-                                            <Avatar :image="data.image" size="small" class="rounded-md overflow-hidden w-10 h-10 flex" />
-                                        </OverlayBadge>
-                                        <div class="w-1/5 text-sm leading-5 font-medium text-color">{{ data.name }}</div>
-                                        <div class="flex-1">
-                                            <div class="text-sm leading-5 font-medium text-color line-clamp-2">
-                                                {{ data.title }}
-                                                <span class="text-muted-color">
-                                                    {{ data.text }}
-                                                </span>
-                                            </div>
-                                        </div>
-                                        <div class="w-1/6 text-sm leading-5 text-muted-color text-right">{{ data.time }}</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
-                                <div class="flex items-start justify-between">
-                                    <div class="leading-6 font-medium text-color">Meeting Notes</div>
-                                    <Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all leading-none" severity="secondary" text />
-                                </div>
-                                <div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 p-4 flex flex-col rounded-lg overflow-hidden">
-                                    <div class="flex items-start justify-between gap-1">
-                                        <div class="text-sm text-color font-medium max-w-60">Subject: Meeting Wrap-up & Action Items: Jacob Jones</div>
-                                        <div class="text-sm text-muted-color">February 14, 2024 / 2:00 PM</div>
-                                    </div>
-                                    <div class="text-sm text-muted-color mt-6">
-                                        Here's a quick review of our meeting with Brook Simmons and next steps. Summary:
-                                        <br />
-                                        <ul class="list-disc pl-5">
-                                            <li>Reviewed our SaaS solution and its features.</li>
-                                            <li>Arlene McCoy intrigued by user experience potential.</li>
-                                            <li>Voiced concerns on integration with current system.Action Items:</li>
-                                        </ul>
-                                        Demo: Schedule product demo with Arlene McCoy. (Assigned to: Jerome Bell)<br /><br />
-                                        Integration Blueprint: Draft and deliver technical blueprint. (Assigned to: Cameron Williamson)<br /><br />
-                                        Follow-up Meeting: Arrange to discuss any queries post-demo. (Assigned to: Dianne Russell)
-                                        <br /><br />
-                                        Please act on these items promptly.
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div v-if="selectedSidebarOption === 'Preferences'" class="h-[calc(100%-72px)] flex flex-col gap-4 p-6">
-                            <div v-for="(data, i) of preferences" :key="i" class="h-1/4 flex flex-col p-3 rounded-xl bg-emphasis">
-                                <div class="leading-6 font-medium text-color p-2">{{ data.title }}</div>
-                                <div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 p-4 flex flex-col gap-3 rounded-lg">
-                                    <div v-for="(pref, j) of data.prefs" :key="j" class="flex items-center gap-2">
-                                        <i class="text-lg text-color" :class="pref.icon"></i>
-                                        <div class="font-medium text-color flex-1">{{ pref.title }}</div>
-                                        <ToggleSwitch v-model="pref.checked" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div v-if="selectedSidebarOption === 'Opportunities'" class="grid grid-cols-2 gap-6 p-6">
-                            <div v-for="(data, i) of opportunities" :key="i" class="flex flex-col p-3 rounded-xl bg-emphasis">
-                                <div class="flex items-start justify-between gap-2">
-                                    <div class="font-medium text-color mt-0.5">{{ data.title }}</div>
-                                    <NuxtLink :to="data.link" target="_blank" rel="noopener">
-                                        <Button icon="pi pi-arrow-up-right text-sm !leading-none" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900" severity="secondary" text />
-                                    </NuxtLink>
-                                </div>
-                                <img class="w-full rounded-lg mt-2 block" :src="data.image" alt="Opportunutiy Image" />
-                                <div class="flex-1 mt-2 p-2 rounded-lg bg-surface-0 dark:bg-surface-900 text-xs text-color">
-                                    {{ data.text }}
-                                </div>
-                            </div>
-                        </div>
-                        <div v-if="selectedSidebarOption === 'Statistics'" class="h-[calc(100%-160px)] p-6">
-                            <div class="grid grid-cols-2 gap-4">
-                                <div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
-                                    <div class="flex items-center justify-between gap-2">
-                                        <div class="font-medium text-color p-2">Customer Satisfaction Score</div>
-                                    </div>
-                                    <div class="flex-1 py-4 mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
-                                        <Knob v-model="customerSatisfaction" :size="150" :strokeWidth="8" valueTemplate="{value}%" class="pointer-events-none" />
-                                    </div>
-                                </div>
-                                <div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
-                                    <div class="flex items-center justify-between gap-2">
-                                        <div class="font-medium text-color p-2">Estimated Lifetime Value</div>
-                                    </div>
-                                    <div class="flex-1 flex items-center gap-2 justify-center mt-2 p-2 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
-                                        <div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">$</div>
-                                        <div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">272</div>
-                                        <div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">123</div>
-                                        <div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">000</div>
-                                    </div>
-                                </div>
-                                <div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
-                                    <div class="flex items-center justify-between gap-2">
-                                        <div class="font-medium text-color p-2">Product Usage</div>
-                                    </div>
-                                    <div class="flex-1 mt-2 py-4 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
-                                        <Chart type="line" :data="lineChartData" :options="lineChartOptions" class="min-h-44 w-full" />
-                                    </div>
-                                </div>
-                                <div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
-                                    <div class="font-medium text-color p-2">Churn Risk</div>
-                                    <div class="flex-1 py-4 mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
-                                        <Knob v-model="churnRisk" :size="150" :strokeWidth="8" valueTemplate="{value}%" class="pointer-events-none" />
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="mt-4 w-full flex flex-col p-3 rounded-xl bg-emphasis">
-                                <div class="font-medium text-color p-2">Total Purchases</div>
-                                <div class="flex-1 py-4 px-2 w-full mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
-                                    <Chart type="bar" :data="chartData" :options="chartOptions" class="h-60 w-full" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </Drawer>
-        </div>
-    </section>
-</template>
-
-<script>
-import EventBus from '@/layouts/AppEventBus';
-
-export default {
-    data() {
-        return {
-            lineChartData: {},
-            lineChartOptions: {},
-            chartData: {},
-            chartOptions: {},
-            sampleAppsSidebarNavs: [
-                { icon: 'pi pi-home', title: 'Overview' },
-                { icon: 'pi pi-comment', title: 'Chat' },
-                { icon: 'pi pi-inbox', title: 'Inbox' },
-                { icon: 'pi pi-th-large', title: 'Cards' },
-                { icon: 'pi pi-user', title: 'Customers' },
-                { icon: 'pi pi-video', title: 'Movies' }
-            ],
-            sampleAppsSidebarNavsMore: [{ icon: 'pi pi-cog', title: 'Settings' }],
-            selectedSampleAppsSidebarNav: 'Overview',
-            isSlimMenu: true,
-            isSlimMenuSelected: false,
-            sampleOptions: [
-                { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' },
-                { icon: 'pi pi-comment', title: 'Chat', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/chat' },
-                { icon: 'pi pi-inbox', title: 'Inbox', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/mail' },
-                { icon: 'pi pi-th-large', title: 'Cards', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/cards' },
-                { icon: 'pi pi-user', title: 'Customers', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/customers' },
-                { icon: 'pi pi-video', title: 'Movies', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/movies' }
-            ],
-            selectedSampleOption: { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' },
-            visibleRight: false,
-            selectedSidebarOption: 'Statistics',
-            sidebarOptions: ['Interaction Logs', 'Preferences', 'Statistics', 'Opportunities'],
-            callLogs: [
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png', name: 'Brook Simmons', time: '02.02.2024 | 45 min' },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg', name: 'Jacob Jones', time: '02.02.2024 | 45 min' },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg', name: 'Annette Black', time: '02.03.2024 | 13 min' },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg', name: 'Arlene McCoy', time: '02.03.2024 | 14 min' },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg', name: 'Arlene Simmons', time: '02.03.2024 | 14 min' },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg', name: 'Michael Brown', time: '02.04.2024 | 20 min' }
-            ],
-            emailRecords: [
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
-                    name: 'Brook Simmons',
-                    time: '3:24 PM',
-                    title: 'Unleash Business Potential',
-                    text: 'Automate, analyze, and accelerate with our SaaS platform. Unshackle from mundane tasks and focus on scaling your business. Contact us for a demo today!'
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
-                    name: 'Jacob Jones',
-                    time: '12.23.2023',
-                    title: 'Optimized Workflow Revolution  ',
-                    text: "Experience a workflow revolution with our intuitive SaaS tool. With enhanced features and optimized processes, it's efficiency like never before. Let's get in touch for a brief demo!"
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
-                    name: 'Annette Black',
-                    time: '12.17.2023',
-                    title: 'Innovation at Fingertips',
-                    text: 'With our SaaS solution, innovation is only a click away. Shape your future with pioneering features and minimalist design. Join us for your solution walk-through today!'
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
-                    name: 'Arlene McCoy',
-                    time: '06.17.2023',
-                    title: 'Seamless Integration',
-                    text: 'Integrate effortlessly with our user-friendly SaaS tools. Streamline your operations and boost productivity. Discover more in our demo session.'
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
-                    name: 'Arlene Simmons',
-                    time: '04.17.2023',
-                    title: 'Transform Your Business',
-                    text: 'Empower your team with our innovative SaaS solutions. Achieve unparalleled efficiency and drive growth. Book a demo to explore the possibilities.'
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
-                    name: 'Michael Brown',
-                    time: '01.05.2024',
-                    title: 'Next-Gen Collaboration',
-                    text: 'Experience the future of collaboration with our cutting-edge SaaS platform. Enhance teamwork and streamline communication. Contact us for a demo today!'
-                }
-            ],
-            preferences: [
-                {
-                    title: 'Email',
-                    prefs: [
-                        { icon: 'pi pi-bell', title: 'Notification', checked: true },
-                        { icon: 'pi pi-inbox', title: 'Newsletter', checked: false },
-                        { icon: 'pi pi-sync', title: 'Product Updates', checked: false }
-                    ]
-                },
-                {
-                    title: 'Telephone',
-                    prefs: [
-                        { icon: 'pi pi-mobile', title: 'Phone Call', checked: true },
-                        { icon: 'pi pi-volume-down', title: 'Voicemail', checked: false },
-                        { icon: 'pi pi-comments', title: 'SMS text', checked: false }
-                    ]
-                },
-                {
-                    title: 'Social Media',
-                    prefs: [
-                        { icon: 'pi pi-clock', title: 'Automated Post', checked: true },
-                        { icon: 'pi pi-user', title: 'Direct Message', checked: false }
-                    ]
-                },
-                {
-                    title: 'Data Privacy',
-                    prefs: [
-                        { icon: 'pi pi-box', title: 'Share Data with 3rd Parties', checked: true },
-                        { icon: 'pi pi-file', title: 'Cookies', checked: false }
-                    ]
-                }
-            ],
-            opportunities: [
-                {
-                    title: 'Apollo',
-                    link: 'https://primevue.org/templates/apollo/',
-                    image: 'https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg',
-                    text: 'Keep your application fresh with Apollo, the newest and most modern template available.'
-                },
-                {
-                    title: 'Ultima',
-                    link: 'https://primevue.org/templates/ultima/',
-                    image: 'https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg',
-                    text: "Elevate your application's intuitiveness with Ultima's premium Material Design interface."
-                },
-                {
-                    title: 'Diamond',
-                    link: 'https://primevue.org/templates/diamond/',
-                    image: 'https://primefaces.org/cdn/primevue/images/layouts/diamond-remastered-vue.jpg',
-                    text: "Handle complex operations with elegance with Diamond's robust and powerful premium design."
-                },
-                {
-                    title: 'Atlantis',
-                    link: 'https://primevue.org/templates/atlantis/',
-                    image: 'https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg',
-                    text: "Boost your application's capabilities, customization with the Atlantis template."
-                },
-                {
-                    title: 'Verona',
-                    link: 'https://primevue.org/templates/verona/',
-                    image: 'https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg',
-                    text: "Achieve sophistication and subtlety with Verona's minimalistic, content-focused design."
-                },
-                {
-                    title: 'Freya',
-                    link: 'https://primevue.org/templates/freya/',
-                    image: 'https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png',
-                    text: "Give your application a sleek, updated look with Freya's chic and modern premium template."
-                }
-            ],
-            customerSatisfaction: 56,
-            churnRisk: 24
-        };
-    },
-    beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
-        EventBus.off('theme-palette-change', this.redrawListener);
-    },
-    mounted() {
-        this.chartData = this.setChartData();
-        this.chartOptions = this.setChartOptions();
-        this.lineChartData = this.setLineChartData();
-        this.lineChartOptions = this.setLineChartOptions();
-
-        this.redrawListener = () => {
-            this.chartOptions = this.setChartOptions();
-            this.chartData = this.setChartData();
-            this.lineChartData = this.setLineChartData();
-            this.lineChartOptions = this.setLineChartOptions();
-        };
-
-        EventBus.on('theme-palette-change', this.redrawListener);
-        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
-    },
-    methods: {
-        setSelectedSampleAppsSidebarNav(title) {
-            this.selectedSampleAppsSidebarNav = title;
-        },
-        isDark() {
-            return this.$appState.darkTheme;
-        },
-        toggleSlimMenu() {
-            this.isSlimMenu = !this.isSlimMenu;
-            this.isSlimMenuSelected = this.isSlimMenu;
-        },
-        setChartData() {
-            const documentStyle = getComputedStyle(document.documentElement);
-            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
-            const hoverBackgroundColor = documentStyle.getPropertyValue('--p-primary-color');
-
-            return {
-                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-                datasets: [
-                    {
-                        type: 'bar',
-                        label: 'Investment Wallet',
-                        backgroundColor: borderColor,
-                        data: [100, 201, 404, 300, 140, 220, 314, 520, 145, 234, 325, 147],
-                        borderRadius: {
-                            topLeft: 4,
-                            topRight: 4
-                        },
-                        borderSkipped: true,
-                        barThickness: 20,
-                        hoverBackgroundColor: hoverBackgroundColor,
-                        hoverTransition: '1s ease all'
-                    }
-                ]
-            };
-        },
-        setChartOptions() {
-            const documentStyle = getComputedStyle(document.documentElement);
-            const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
-            const textColor = documentStyle.getPropertyValue('--p-text-color');
-            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
-            const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
-
-            const getOrCreateTooltip = (chart) => {
-                let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
-
-                if (!tooltipEl) {
-                    tooltipEl = document.createElement('div');
-                    tooltipEl.classList.add('chartjs-tooltip');
-                    tooltipEl.style.backgroundColor = backgroundColor;
-                    tooltipEl.style.boxShadow =
-                        ' 0px 33.12px 9.399px 0px rgba(0, 0, 0, 0.00), 0px 21.036px 8.504px 0px rgba(0, 0, 0, 0.01), 0px 12.084px 7.161px 0px rgba(0, 0, 0, 0.05), 0px 5.371px 5.371px 0px rgba(0, 0, 0, 0.09), 0px 1.343px 2.685px 0px rgba(0, 0, 0, 0.10)';
-                    tooltipEl.style.borderRadius = '7px';
-                    tooltipEl.style.color = textColor;
-                    tooltipEl.style.opacity = 1;
-                    tooltipEl.style.padding = '14.5px';
-                    tooltipEl.style.pointerEvents = 'none';
-                    tooltipEl.style.position = 'absolute';
-                    tooltipEl.style.transform = 'translate(-50%, 0)';
-                    tooltipEl.style.transition = 'all .2s ease';
-                    chart.canvas.parentNode.appendChild(tooltipEl);
-                }
-
-                return tooltipEl;
-            };
-
-            return {
-                maintainAspectRatio: false,
-                aspectRatio: 0.8,
-                plugins: {
-                    chartAreaBorder: {
-                        borderColor: 'red',
-                        borderWidth: 2,
-                        borderDash: [5, 5],
-                        borderDashOffset: 2
-                    },
-                    tooltip: {
-                        enabled: false,
-                        padding: 5,
-                        position: 'nearest',
-                        external: function (context) {
-                            // Tooltip Element
-                            const { chart, tooltip } = context;
-                            const tooltipEl = getOrCreateTooltip(chart);
-
-                            // Hide if no tooltip
-                            if (tooltip.opacity === 0) {
-                                tooltipEl.style.opacity = 0;
-
-                                return;
-                            }
-
-                            if (tooltip.body) {
-                                const bodyLines = tooltip.body.map((b) => {
-                                    const strArr = b.lines[0].split(':');
-                                    const data = {
-                                        text: strArr[0].trim(),
-                                        value: strArr[1].trim()
-                                    };
-
-                                    return data;
-                                });
-
-                                // Clear old content
-                                tooltipEl.innerHTML = '';
-                                bodyLines.forEach((body, i) => {
-                                    const text = document.createElement('div');
-
-                                    text.appendChild(document.createTextNode('$' + body.value + 'K'));
-                                    text.style.fontWeight = '500';
-                                    text.style.lineHeight = '21px';
-                                    text.style.fontSize = '14px';
-                                    tooltipEl.appendChild(text);
-                                });
-                            }
-
-                            const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
-
-                            // Display, position, and set styles for font
-                            tooltipEl.style.opacity = 1;
-                            tooltipEl.style.left = positionX + tooltip.caretX + 'px';
-                            tooltipEl.style.top = positionY + tooltip.caretY + 'px';
-                            tooltipEl.style.font = tooltip.options.bodyFont.string;
-                            tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
-                        }
-                    },
-                    legend: {
-                        display: false
-                    }
-                },
-                scales: {
-                    x: {
-                        stacked: true,
-                        ticks: {
-                            color: textMutedColor
-                        },
-                        grid: {
-                            color: 'transparent',
-                            borderColor: 'transparent'
-                        }
-                    },
-                    y: {
-                        border: {
-                            display: false
-                        },
-                        stacked: true,
-                        ticks: {
-                            color: textMutedColor
-                        },
-                        grid: {
-                            color: borderColor,
-                            borderColor: 'transparent'
-                        }
-                    }
-                }
-            };
-        },
-        setLineChartData() {
-            const darkMode = this.$appState.darkTheme;
-
-            return {
-                labels: ['31', '1', '2', '3', '4', '5', '6', '7', '8'],
-                datasets: [
-                    {
-                        label: 'My First Dataset',
-                        data: [60, 64, 57, 52, 58, 70, 75, 70, 60],
-                        fill: true,
-                        borderColor: '#16A34A',
-                        tension: 0.4,
-                        borderWidth: 1.5,
-                        pointBackgroundColor: '#16A34A',
-                        pointBorderColor: darkMode ? '#09090B' : '#FFF',
-                        pointBorderWidth: 3,
-
-                        hideInLegendAndTooltip: false,
-                        pointStyle: function (context) {
-                            let index = context.dataIndex;
-
-                            if (index == 6) {
-                                return 'circle';
-                            } else {
-                                return 'line';
-                            }
-                        },
-                        pointRadius: function (context) {
-                            let index = context.dataIndex;
-
-                            if (index == 6) {
-                                return 6;
-                            } else {
-                                return 0.1;
-                            }
-                        },
-                        backgroundColor: (context) => {
-                            const bgColor = ['rgba(22,163,74,0.16)', 'rgba(22,163,74,0)'];
-
-                            if (!context.chart.chartArea) {
-                                return;
-                            }
-
-                            const {
-                                ctx,
-                                data,
-                                chartArea: { top, bottom }
-                            } = context.chart;
-                            const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
-                            const colorTranches = 1 / (bgColor.length - 1);
-
-                            for (let i = 0; i < bgColor.length; i++) {
-                                gradientBg.addColorStop(0 + i * colorTranches, bgColor[i]);
-                            }
-
-                            return gradientBg;
-                        }
-                    }
-                ],
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            position: 'top'
-                        },
-                        title: {
-                            display: true,
-                            text: 'Chart.js Line Chart'
-                        }
-                    }
-                }
-            };
-        },
-        setLineChartOptions() {
-            const darkMode = this.$appState.darkTheme;
-            const documentStyle = getComputedStyle(document.documentElement);
-
-            const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
-            const textColor = documentStyle.getPropertyValue('--p-text-color');
-            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
-            const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
-
-            const getOrCreateTooltip = (chart) => {
-                let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
-
-                if (!tooltipEl) {
-                    tooltipEl = document.createElement('div');
-                    tooltipEl.classList.add('chartjs-tooltip');
-                    tooltipEl.style.backgroundColor = backgroundColor;
-                    tooltipEl.style.boxShadow =
-                        ' 0px 33.12px 9.399px 0px rgba(0, 0, 0, 0.00), 0px 21.036px 8.504px 0px rgba(0, 0, 0, 0.01), 0px 12.084px 7.161px 0px rgba(0, 0, 0, 0.05), 0px 5.371px 5.371px 0px rgba(0, 0, 0, 0.09), 0px 1.343px 2.685px 0px rgba(0, 0, 0, 0.10)';
-                    tooltipEl.style.borderRadius = '7px';
-                    tooltipEl.style.color = textColor;
-                    tooltipEl.style.opacity = 1;
-                    tooltipEl.style.padding = '2px';
-                    tooltipEl.style.pointerEvents = 'none';
-                    tooltipEl.style.position = 'absolute';
-                    tooltipEl.style.transform = 'translate(-50%, 0)';
-                    tooltipEl.style.transition = 'all .2s ease';
-                    chart.canvas.parentNode.appendChild(tooltipEl);
-                }
-
-                return tooltipEl;
-            };
-
-            return {
-                maintainAspectRatio: false,
-                aspectRatio: 0.8,
-                plugins: {
-                    chartAreaBorder: {
-                        borderColor: 'red',
-                        borderWidth: 2,
-                        borderDash: [5, 5],
-                        borderDashOffset: 2
-                    },
-                    tooltip: {
-                        enabled: false,
-                        padding: 8,
-                        position: 'nearest',
-                        external: function (context) {
-                            // Tooltip Element
-                            const { chart, tooltip } = context;
-                            const tooltipEl = getOrCreateTooltip(chart);
-
-                            // Hide if no tooltip
-                            if (tooltip.opacity === 0) {
-                                tooltipEl.style.opacity = 0;
-
-                                return;
-                            }
-
-                            if (tooltip.body) {
-                                const bodyLines = tooltip.body.map((b) => {
-                                    const strArr = b.lines[0].split(':');
-                                    const data = {
-                                        text: strArr[0].trim(),
-                                        value: strArr[1].trim()
-                                    };
-
-                                    return data;
-                                });
-
-                                // Clear old content
-                                tooltipEl.innerHTML = '';
-                                bodyLines.forEach((body, i) => {
-                                    const text = document.createElement('div');
-
-                                    text.appendChild(document.createTextNode(body.value + '.000'));
-                                    text.style.fontWeight = '500';
-                                    text.style.lineHeight = '21px';
-                                    text.style.fontSize = '14px';
-                                    tooltipEl.appendChild(text);
-                                });
-                            }
-
-                            const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
-
-                            // Display, position, and set styles for font
-                            tooltipEl.style.opacity = 1;
-                            tooltipEl.style.left = positionX + tooltip.caretX + 'px';
-                            tooltipEl.style.top = positionY + tooltip.caretY - 40 + 'px';
-                            tooltipEl.style.font = tooltip.options.bodyFont.string;
-                            tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
-                        }
-                    },
-                    legend: {
-                        display: false
-                    }
-                },
-                scales: {
-                    x: {
-                        stacked: true,
-                        ticks: {
-                            color: textMutedColor
-                        },
-                        grid: {
-                            color: 'transparent',
-                            borderColor: 'transparent'
-                        }
-                    },
-                    y: {
-                        display: false,
-                        grace: 14
-                    }
-                }
-            };
-        }
-    }
-};
-</script>
diff --git a/apps/labs/components/landing/samples/CardsApp.vue b/apps/labs/components/landing/samples/CardsApp.vue
deleted file mode 100644
index dd3588d9d..000000000
--- a/apps/labs/components/landing/samples/CardsApp.vue
+++ /dev/null
@@ -1,589 +0,0 @@
-<template>
-    <div class="flex-1 h-full overflow-y-auto overflow-x-clip overflow-hidden border border-surface rounded-2xl p-6">
-        <div class="text-color text-2xl font-medium leading-8">Cards</div>
-        <div class="mt-1 text-muted-color leading-6">You can make cards using Aura like below 👇</div>
-        <div class="mt-6 flex flex-wrap items-start gap-6">
-            <div class="flex-1 flex flex-col gap-6">
-                <div class="border border-surface rounded-3xl p-6 flex flex-col gap-6">
-                    <div class="flex items-center gap-3">
-                        <OverlayBadge severity="danger" class="w-fit">
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png" size="large" class="rounded-lg overflow-hidden flex" />
-                        </OverlayBadge>
-                        <div>
-                            <div class="font-medium text-color leading-6">Jacob Jones</div>
-                            <div class="mt-1 text-muted-color leading-5">hi@jacobjones.co</div>
-                        </div>
-                    </div>
-                    <div class="flex items-center gap-6">
-                        <div class="text-sm leading-5 text-color">14.k <span class="text-muted-color">Followers</span></div>
-                        <div class="text-sm leading-5 text-color">359 <span class="text-muted-color">Following</span></div>
-                    </div>
-                    <p class="text-sm text-muted-color leading-5 mb-0">Meet Jacob Jones, the whimsical adventurer on a quest for life's quirks. From sock mysteries to subway adventures, join him for a laughter-filled journey!</p>
-                    <div class="flex items-center justify-between gap-2">
-                        <div class="text-sm leading-5 text-color font-medium">Mutual Friends</div>
-                        <AvatarGroup>
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar1.png" size="small" class="rounded-lg overflow-hidden" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg" size="small" class="rounded-lg overflow-hidden" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="small" class="rounded-lg overflow-hidden" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg" size="small" class="rounded-lg overflow-hidden" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png" size="small" class="rounded-lg overflow-hidden" />
-                            <Avatar label="+99" size="small" class="rounded-lg overflow-hidden text-xs" />
-                        </AvatarGroup>
-                    </div>
-                    <SelectButton
-                        v-model="selectedUserSelectButtonOption"
-                        :options="userSelectButtonOptions"
-                        :pt="{
-                            root: {
-                                class: 'w-full'
-                            },
-                            pcbutton: {
-                                root: {
-                                    class: 'flex-1'
-                                }
-                            }
-                        }"
-                    />
-                    <div class="flex flex-col gap-4">
-                        <div class="p-2 rounded-2xl flex items-center gap-3 bg-emphasis">
-                            <OverlayBadge severity="danger" class="w-fit">
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png" class="rounded-lg overflow-hidden w-10 h-10 block" />
-                            </OverlayBadge>
-                            <div class="flex-1">
-                                <div class="text-color text-sm font-medium leading-5">Jacob Jones</div>
-                                <div class="mt-1 text-muted-color text-xs leading-4">hi@jacobjones.co</div>
-                            </div>
-                            <Button label="Join" />
-                        </div>
-                        <div class="p-2 rounded-2xl flex items-center gap-3 bg-emphasis">
-                            <OverlayBadge severity="danger" class="w-fit">
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg" class="rounded-lg overflow-hidden w-10 h-10 flex" />
-                            </OverlayBadge>
-                            <div class="flex-1">
-                                <div class="text-color text-sm font-medium leading-5">Courtney Henry</div>
-                                <div class="mt-1 text-muted-color text-xs leading-4">cou.henry41@courtney.co</div>
-                            </div>
-                            <Button label="Join" />
-                        </div>
-                    </div>
-                </div>
-                <div class="border border-surface rounded-3xl p-6">
-                    <div class="flex items-center gap-3 p-3 border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05)]">
-                        <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png" class="rounded-lg overflow-hidden w-14 h-14" />
-                        <div class="flex-1">
-                            <div class="text-color font-medium leading-7">Jacob Jones</div>
-                            <div class="text-muted-color text-sm mt-1">hi@jacobjones.co</div>
-                        </div>
-                        <Button icon="pi pi-bell" severity="contrast" text />
-                    </div>
-                    <div class="mt-4 flex flex-col gap-1">
-                        <button class="w-full flex items-center gap-2 text-color p-2 bg-transparent hover:bg-emphasis active:bg-surface-200 dark:active:bg-surface-700 cursor-pointer rounded-lg transition-all select-none">
-                            <i class="pi pi-envelope text-lg w-7 h-7 flex items-center justify-center"></i>
-                            <div class="font-medium leading-normal flex-1 text-left">Messages</div>
-                        </button>
-                        <button class="w-full flex items-center gap-2 text-color p-2 bg-transparent hover:bg-emphasis active:bg-surface-200 dark:active:bg-surface-700 cursor-pointer rounded-lg transition-all select-none">
-                            <i class="pi pi-cog text-lg w-7 h-7 flex items-center justify-center"></i>
-                            <div class="font-medium leading-normal flex-1 text-left">Settings</div>
-                        </button>
-                        <button class="w-full flex items-center gap-2 text-color p-2 bg-transparent hover:bg-emphasis active:bg-surface-200 dark:active:bg-surface-700 cursor-pointer rounded-lg transition-all select-none">
-                            <i class="pi pi-sync text-lg w-7 h-7 flex items-center justify-center"></i>
-                            <div class="font-medium leading-normal flex-1 text-left">Switch Accounts</div>
-                        </button>
-                        <button class="w-full flex items-center gap-2 text-color p-2 bg-transparent hover:bg-emphasis active:bg-surface-200 dark:active:bg-surface-700 cursor-pointer rounded-lg transition-all select-none">
-                            <i class="pi pi-sign-in text-lg w-7 h-7 flex items-center justify-center"></i>
-                            <div class="font-medium leading-normal flex-1 text-left">Log out</div>
-                        </button>
-                    </div>
-                    <Divider />
-                    <div class="w-full flex items-center gap-2 text-color p-2 bg-transparent cursor-pointer rounded-lg transition-all select-none">
-                        <i
-                            class="pi text-lg w-7 h-7 flex items-center justify-center"
-                            :class="{
-                                'pi-moon': !darkMode,
-                                'pi-sun': darkMode
-                            }"
-                        ></i>
-                        <div class="font-medium leading-normal flex-1 text-left">Switch to {{ darkMode ? 'Light' : 'Dark' }}</div>
-                        <ToggleSwitch v-model="darkMode" />
-                    </div>
-                </div>
-                <div class="border border-surface rounded-3xl">
-                    <div class="pt-6 px-6 flex flex-col gap-6">
-                        <div class="flex items-start gap-2 justify-between">
-                            <div>
-                                <div class="text-2xl text-color font-medium">Data Analyst</div>
-                                <div class="mt-2 text-color">Data Insights Ltd.</div>
-                            </div>
-                            <Button @click="jobApplication = !jobApplication" :icon="jobApplication ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'" severity="secondary" outlined rounded />
-                        </div>
-                        <div class="flex flex-wrap gap-1 items-center justify-between">
-                            <div class="flex items-center gap-2 whitespace-nowrap text-muted-color">
-                                <i class="pi pi-users text-xl"></i>
-                                <div class="font-medium leading-none">Senior</div>
-                            </div>
-                            <div class="flex items-center gap-2 whitespace-nowrap text-muted-color">
-                                <i class="pi pi-stopwatch text-xl"></i>
-                                <div class="font-medium leading-none">Full-Time</div>
-                            </div>
-                            <div class="flex items-center gap-2 whitespace-nowrap text-muted-color">
-                                <i class="pi pi-money-bill text-xl"></i>
-                                <div class="font-medium leading-none">$80,000</div>
-                            </div>
-                        </div>
-                        <p class="leading-6 text-muted-color mb-0">Expert in data analysis? Join Data Insights Ltd. as a senior data analyst. Lead in the world of data with us!</p>
-                        <div class="flex flex-wrap gap-2 items-center">
-                            <Tag value="Data Analysis" rounded class="font-normal"></Tag>
-                            <Tag value="Analytics" rounded class="font-normal"></Tag>
-                            <Tag value="Big Data" rounded class="font-normal"></Tag>
-                        </div>
-                    </div>
-                    <div class="p-1 mt-4">
-                        <button class="p-4 rounded-3xl w-full bg-emphasis transition-all text-color hover:text-color-emphasis flex items-center gap-2 justify-between cursor-pointer">
-                            <div class="flex items-center [&>*]:-mr-2">
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="small" shape="circle" />
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg" size="small" shape="circle" />
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg" size="small" shape="circle" />
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg" size="small" shape="circle" />
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png" size="small" shape="circle" />
-                            </div>
-                            <div class="flex items-center gap-2">
-                                <div class="font-medium leading-6">12 Applicants</div>
-                                <i class="pi pi-arrow-right"></i>
-                            </div>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="flex-1 flex flex-col gap-6">
-                <div class="border border-surface rounded-3xl p-6 flex flex-col gap-6">
-                    <div class="flex items-center gap-2 text-color">
-                        <i class="pi pi-cloud-upload text-xl"></i>
-                        <div class="flex-1 font-medium leading-6">Upload Files</div>
-                        <Button icon="pi pi-times" text rounded />
-                    </div>
-                    <div>
-                        <label for="document-name" class="text-color font-medium leading-6">Document Name </label>
-                        <InputText id="document-name" v-model="documentName" class="mt-2 w-full" />
-                    </div>
-                    <div>
-                        <label class="text-color font-medium leading-6">Upload Files</label>
-                        <FileUpload
-                            name="demo[]"
-                            url="/api/upload"
-                            @upload="onTemplatedUpload($event)"
-                            :pt="{
-                                root: {
-                                    class: 'bg-transparent border-dashed mt-2'
-                                },
-                                content: {
-                                    class: 'p-0'
-                                }
-                            }"
-                            accept="image/*"
-                            :maxFileSize="1000000"
-                            @select="onSelectedFiles"
-                        >
-                            <template #header="{ chooseCallback, uploadCallback, clearCallback, files, uploadedFiles }">
-                                <div v-if="files.length > 0 || uploadedFiles.length > 0" class="flex w-full flex-wrap justify-between items-center flex-1 gap-4 border-b border-surface pb-4">
-                                    <div class="flex gap-2">
-                                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
-                                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
-                                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
-                                    </div>
-                                </div>
-                                <div v-if="files.length <= 0 && uploadedFiles.length <= 0" class="flex flex-col items-center justify-center p-6 cursor-pointer" @click="chooseCallback()">
-                                    <i class="pi pi-cloud-upload text-4xl text-color" />
-                                    <div class="text-sm text-color font-medium mt-2">Click to upload <span class="text-muted-color">or and drop</span></div>
-                                    <p class="mt-2 mb-0 text-sm text-muted-color text-center">PDF, JPG, PNG, JPEG, DOC, CSV, XML, XMLX, XLS, XLSX (max 10MB)</p>
-                                </div>
-                            </template>
-                            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
-                                <div v-if="files.length > 0" class="px-4 py-0">
-                                    <h5 class="m-0 mb-2">Pending</h5>
-                                    <div class="flex flex-wrap gap-2 grow overflow-auto max-h-[210px]">
-                                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card max-w-[120px] !p-2 m-0 flex flex-col border-1 surface-border items-center gap-2 text-center">
-                                            <div>
-                                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                                            </div>
-                                            <span class="font-semibold max-w-[100px] text-ellipsis whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                                            <span class="text-sm text-muted-color">{{ formatSize(file.size) }}</span>
-                                            <div class="grow flex flex-col gap-2 justify-end">
-                                                <Badge value="Pending" severity="warning" />
-                                                <Button icon="pi pi-times text-sm leading-none" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="!text-sm !leading-none" label="Cancel" text severity="danger" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div v-if="uploadedFiles.length > 0" class="px-4 py-0">
-                                    <h5 class="m-0 mb-2">Completed</h5>
-                                    <div class="flex flex-wrap gap-2">
-                                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card max-w-[120px] !p-2 m-0 flex flex-col border-1 surface-border items-center gap-2 text-center">
-                                            <div>
-                                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                                            </div>
-                                            <span class="font-semibold max-w-[100px] text-ellipsis whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                                            <span class="text-sm text-muted-color">{{ formatSize(file.size) }}</span>
-                                            <div class="grow flex flex-col gap-2 justify-end">
-                                                <Badge value="Completed" class="mt-3" severity="success" />
-                                                <Button icon="pi pi-times text-sm leading-none" @click="removeUploadedFileCallback(index)" class="!text-sm !leading-none" label="Cancel" text severity="danger" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </template>
-                        </FileUpload>
-                    </div>
-                    <div>
-                        <label class="text-color font-medium leading-6">Tag (Optional)</label>
-                        <AutoComplete v-model="filesTag" class="w-full mt-2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <label v-for="permission in permissions" :key="permission.key" :for="permission.key" class="cursor-pointer flex-1 flex items-center gap-1 p-2 rounded-border border border-surface hover:bg-emphasis transition-all select-none">
-                            <i class="text-color" :class="permission.icon"></i>
-                            <div class="flex-1 text-sm leading-5 text-color">{{ permission.name }}</div>
-                            <RadioButton v-model="selectedPermission" :inputId="permission.key" variant="filled" name="dynamic" :value="permission.name" />
-                        </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Button label="Cancel" outlined class="flex-1" />
-                        <Button label="Upload" class="flex-1" />
-                    </div>
-                </div>
-                <div class="border border-surface rounded-3xl p-6">
-                    <div class="flex items-start justify-between gap-1">
-                        <div class="flex items-center gap-x-2 gap-y-1 flex-wrap flex-1">
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar1.png" size="small" shape="circle" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png" size="small" shape="circle" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg" size="small" shape="circle" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="small" shape="circle" />
-                            <div class="w-full"></div>
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png" size="small" shape="circle" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg" size="small" shape="circle" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png" size="small" shape="circle" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png" size="small" shape="circle" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg" size="small" shape="circle" />
-                            <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg" size="small" shape="circle" />
-                        </div>
-                        <Button icon="pi pi-arrow-up-right" rounded text />
-                    </div>
-                    <div class="text-2xl font-medium text-color mt-6 leading-8">That's your avatar</div>
-                    <div class="leading-6 text-muted-color mt-2">Easy to use! place it, watch it.</div>
-                </div>
-                <div class="border border-surface rounded-3xl p-6 flex flex-col gap-6">
-                    <div class="flex items-center justify-between gap-2">
-                        <div class="text-2xl font-medium leading-8 flex-1">Add Member</div>
-                        <Button icon="pi pi-times" rounded text severity="secondary" />
-                    </div>
-                    <div>
-                        <div class="text-muted-color leading-6">Email</div>
-                        <div class="flex items-start gap-3 mt-2">
-                            <AutoComplete v-model="emailChips" inputId="multiple-ac-2" class="flex-1" multiple @complete="search" :typeahead="false" />
-                            <Button label="Invite" />
-                        </div>
-                    </div>
-                    <div>
-                        <div class="font-medium leading-6 text-muted-color">Members</div>
-                        <div class="mt-4 flex flex-col gap-4">
-                            <div class="flex items-center gap-2 justify-between">
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png" class="w-9 h-9" shape="circle" />
-                                <div class="flex-1">
-                                    <div class="text-sm font-medium text-color leading-5">Brook Simmons</div>
-                                    <div class="text-sm text-muted-color leading-5 line-clamp-4">brook.sim42@primevue.org</div>
-                                </div>
-                                <Select
-                                    v-model="memberSelectedTypes[0]"
-                                    :options="memberTypes"
-                                    optionLabel="name"
-                                    placeholder="Select"
-                                    class="!w-16"
-                                    :pt="{
-                                        root: { class: '!border-0 !shadow-none' },
-                                        label: { class: '!p-0 !text-muted-color !text-sm' },
-                                        dropdown: { class: '!p-0 !w-auto' },
-                                        dropdownicon: { class: '!w-3 !h-3' },
-                                        option: { class: '!text-sm !px-2 !py-1' }
-                                    }"
-                                />
-                            </div>
-                            <div class="flex items-center gap-2 justify-between">
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg" class="w-9 h-9" shape="circle" />
-                                <div class="flex-1">
-                                    <div class="text-sm font-medium text-color leading-5">Dianne Russell</div>
-                                    <div class="text-sm text-muted-color leading-5 line-clamp-4">di.russ23@primevue.org</div>
-                                </div>
-                                <Select
-                                    v-model="memberSelectedTypes[1]"
-                                    :options="memberTypes"
-                                    optionLabel="name"
-                                    placeholder="Select"
-                                    class="!w-16"
-                                    :pt="{
-                                        root: { class: '!border-0 !shadow-none' },
-                                        label: { class: '!p-0 !text-muted-color !text-sm' },
-                                        dropdown: { class: '!p-0 !w-auto' },
-                                        dropdownicon: { class: '!w-3 !h-3' },
-                                        option: { class: '!text-sm !px-2 !py-1' }
-                                    }"
-                                />
-                            </div>
-                            <div class="flex items-center gap-2 justify-between">
-                                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg" class="w-9 h-9" shape="circle" />
-                                <div class="flex-1">
-                                    <div class="text-sm font-medium text-color leading-5">Jacob Jones</div>
-                                    <div class="text-sm text-muted-color leading-5 line-clamp-4">jac.jon87@primevue.org</div>
-                                </div>
-                                <Select
-                                    v-model="memberSelectedTypes[2]"
-                                    :options="memberTypes"
-                                    optionLabel="name"
-                                    placeholder="Select"
-                                    class="!w-16"
-                                    :pt="{
-                                        root: { class: '!border-0 !shadow-none' },
-                                        label: { class: '!p-0 !text-muted-color !text-sm' },
-                                        dropdown: { class: '!p-0 !w-auto' },
-                                        dropdownicon: { class: '!w-3 !h-3' },
-                                        option: { class: '!text-sm !px-2 !py-1' }
-                                    }"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div>
-                        <div class="font-medium leading-6 text-muted-color">Copy Link</div>
-                        <div class="flex items-center gap-3 mt-2">
-                            <InputText v-model="copiedText" type="text" class="flex-1" readOnly />
-                            <Button label="Copy" severity="secondary" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="flex-1 flex flex-wrap gap-6">
-                <div class="flex-1 border border-surface rounded-3xl p-6">
-                    <div class="text-color font-medium leading-6 mb-4">User Profiles</div>
-                    <SelectButton
-                        v-model="userProfiles"
-                        :options="userProfilesOptions"
-                        :pt="{
-                            root: {
-                                class: 'w-full'
-                            },
-                            pcbutton: {
-                                root: {
-                                    class: 'flex-1'
-                                }
-                            }
-                        }"
-                    />
-                    <div class="flex flex-col gap-4 mt-6">
-                        <div class="flex items-center gap-3">
-                            <i class="pi pi-volume-down text-color text-xl"></i>
-                            <div class="leading-6 text-color flex-1">Sound</div>
-                            <ToggleSwitch v-model="userProfilesValues[0]" />
-                        </div>
-                        <div class="flex items-center gap-3">
-                            <i class="pi pi-wifi text-color text-xl"></i>
-                            <div class="leading-6 text-color flex-1">Wi-Fi</div>
-                            <ToggleSwitch v-model="userProfilesValues[1]" />
-                        </div>
-                        <div class="flex items-center gap-3">
-                            <i class="pi pi-moon text-color text-xl"></i>
-                            <div class="leading-6 text-color flex-1">Dark Mode</div>
-                            <ToggleSwitch v-model="userProfilesValues[2]" />
-                        </div>
-                        <div class="flex items-center gap-3">
-                            <i class="pi pi-map-marker text-color text-xl"></i>
-                            <div class="leading-6 text-color flex-1">Location Services</div>
-                            <ToggleSwitch v-model="userProfilesValues[3]" />
-                        </div>
-                        <div class="flex items-center gap-3">
-                            <i class="pi pi-shield text-color text-xl"></i>
-                            <div class="leading-6 text-color flex-1">Privacy Settings</div>
-                            <ToggleSwitch v-model="userProfilesValues[4]" />
-                        </div>
-                        <div class="flex items-center gap-3">
-                            <i class="pi pi-sync text-color text-xl"></i>
-                            <div class="leading-6 text-color flex-1">Auto Update</div>
-                            <ToggleSwitch v-model="userProfilesValues[5]" />
-                        </div>
-                    </div>
-                </div>
-                <div class="flex-1 border border-surface rounded-3xl p-6 flex flex-col gap-6">
-                    <div class="font-medium text-color text-2xl text-center">Forgot Password</div>
-                    <div>
-                        <div class="text-muted-color text-lg text-center leading-snug">
-                            Verification code <br />
-                            has been sent to email
-                        </div>
-                        <div class="rounded-full px-4 py-1 bg-surface-200 dark:bg-surface-800 w-fit mx-auto mt-4 text-color text-lg leading-relaxed">u*******m@gmail.com</div>
-                    </div>
-                    <div class="flex items-center justify-center">
-                        <Button label="Resend" text />
-                    </div>
-                    <div class="flex items-center justify-center">
-                        <InputOtp
-                            v-model="forgotPasswordOTP"
-                            :length="6"
-                            integerOnly
-                            :pt="{
-                                root: {
-                                    class: 'w-full [&>*]:flex-1 [&>*]:min-h-14 [&>*]:text-2xl '
-                                }
-                            }"
-                        />
-                    </div>
-                    <Button label="Change password" />
-                </div>
-                <div class="border border-surface rounded-3xl p-6">
-                    <div class="text-color font-medium leading-6 mb-6">Price Range</div>
-                    <div>
-                        <Slider v-model="priceRange" :min="0" range :max="15000" />
-                    </div>
-                    <div class="mt-4 flex gap-2">
-                        <div class="flex-1">
-                            <label for="price-min-val" class="leading-6 text-color">Min Value</label>
-                            <InputNumber
-                                v-model="priceRange[0]"
-                                :min="0"
-                                inputId="price-min-val"
-                                mode="currency"
-                                currency="USD"
-                                locale="en-US"
-                                :pt="{
-                                    root: {
-                                        class: '[&>*]:w-full mt-2'
-                                    }
-                                }"
-                            />
-                        </div>
-                        <div class="flex-1">
-                            <label for="price-max-val" class="leading-6 text-color">Max Value</label>
-                            <InputNumber
-                                v-model="priceRange[1]"
-                                inputId="price-max-val"
-                                mode="currency"
-                                currency="USD"
-                                locale="en-US"
-                                :pt="{
-                                    root: {
-                                        class: '[&>*]:w-full mt-2'
-                                    }
-                                }"
-                            />
-                        </div>
-                    </div>
-                    <div class="mt-4">
-                        <div class="text-color font-medium leading-6 mb-6">Popular specs</div>
-                        <div class="flex items-center gap-4 flex-wrap">
-                            <div v-for="(data, index) of priceRangePopularSpecs" :key="index" class="flex align-items-center">
-                                <Checkbox v-model="priceRangePopularSpecsChecked" :inputId="data.value" :name="data.value" :value="data.value" />
-                                <label :for="data.value" class="ml-2">{{ data.value }}</label>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex items-center gap-3 flex-wrap [&>*]:flex-1 mt-6">
-                        <Button label="Undo" outlined />
-                        <Button label="Random" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'Cards',
-    redrawListener: null,
-    data() {
-        return {
-            files: [],
-            totalSize: 0,
-            totalSizePercent: 0,
-            jobApplication: false,
-            userProfiles: 'Chilling',
-            userProfilesOptions: ['Chilling', 'Do Not Disturb'],
-            userProfilesValues: [true, true, false, false, true, false],
-            forgotPasswordOTP: '023',
-            priceRange: [0, 10000],
-            priceMinVal: 0,
-            priceMaxVal: 100000,
-            priceRangePopularSpecs: [
-                { value: 'Furnished', checked: true },
-                { value: 'Unfurnished', checked: false },
-                { value: 'Detached', checked: true },
-                { value: 'Underfloor heating', checked: false },
-                { value: 'Balcony', checked: true },
-                { value: 'Duplex', checked: false },
-                { value: 'Triplex', checked: false },
-                { value: 'Garden', checked: false },
-                { value: 'Central location', checked: false },
-                { value: 'Sea view', checked: true }
-            ],
-            priceRangePopularSpecsChecked: ['Furnished', 'Detached', 'Balcony', 'Sea view'],
-            userSelectButtonOptions: ['Joined', 'Hosted'],
-            selectedUserSelectButtonOption: 'Joined',
-            darkMode: false,
-            emailChips: [],
-            memberSelectedTypes: ['O', 'E', 'V'],
-            memberTypes: [
-                { name: 'Owner', code: 'O' },
-                { name: 'Editor', code: 'E' },
-                { name: 'Viewer', code: 'V' }
-            ],
-            copiedText: 'https://www.example.com/shared-files/user123/document-collection/file12345',
-            documentName: 'Aura Theme',
-            filesTag: ['ui', 'redesign', 'dashboard'],
-            selectedPermission: 'Everyone',
-            permissions: [
-                { name: 'Everyone', icon: 'pi pi-globe', key: 'E' },
-                { name: 'Admins only', icon: 'pi pi-users', key: 'A' }
-            ]
-        };
-    },
-    methods: {
-        onRemoveTemplatingFile(file, removeFileCallback, index) {
-            removeFileCallback(index);
-            this.totalSize -= parseInt(this.formatSize(file.size));
-            this.totalSizePercent = this.totalSize / 10;
-        },
-        onClearTemplatingUpload(clear) {
-            clear();
-            this.totalSize = 0;
-            this.totalSizePercent = 0;
-        },
-        onSelectedFiles(event) {
-            this.files = event.files;
-            this.files.forEach((file) => {
-                this.totalSize += parseInt(this.formatSize(file.size));
-            });
-        },
-        uploadEvent(callback) {
-            this.totalSizePercent = this.totalSize / 10;
-            callback();
-        },
-        onTemplatedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        },
-        formatSize(bytes) {
-            const k = 1024;
-            const dm = 3;
-            const sizes = this.$primevue.config.locale.fileSizeTypes;
-
-            if (bytes === 0) {
-                return `0 ${sizes[0]}`;
-            }
-
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-
-            return `${formattedSize} ${sizes[i]}`;
-        },
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    },
-    components: {}
-};
-</script>
diff --git a/apps/labs/components/landing/samples/ChatApp.vue b/apps/labs/components/landing/samples/ChatApp.vue
deleted file mode 100644
index cf3b070ea..000000000
--- a/apps/labs/components/landing/samples/ChatApp.vue
+++ /dev/null
@@ -1,433 +0,0 @@
-<template>
-    <div class="flex-1 h-full overflow-y-auto overflow-x-clip overflow-hidden flex border border-surface rounded-2xl">
-        <div class="w-4/12 xl:w-3/12 min-w-40 overflow-auto flex flex-col gap-6">
-            <div class="flex flex-col gap-6 pt-3 pb-2 -mb-2 px-5 sticky top-0 bg-surface-0 dark:bg-surface-950 z-10">
-                <div class="flex items-center justify-between gap-6 text-color">
-                    <div class="text-2xl font-medium lead">Chats</div>
-                    <Button icon="pi pi-plus" text />
-                </div>
-            </div>
-            <div class="px-5">
-                <IconField iconPosition="left">
-                    <InputIcon class="pi pi-search"> </InputIcon>
-                    <InputText v-model="search" placeholder="Search" class="w-full" />
-                </IconField>
-            </div>
-            <div class="w-full px-5">
-                <SelectButton
-                    v-model="value"
-                    :options="options"
-                    aria-labelledby="basic"
-                    :pt="{
-                        root: {
-                            class: 'w-full'
-                        },
-                        pcbutton: {
-                            root: {
-                                class: 'flex-1'
-                            }
-                        }
-                    }"
-                />
-            </div>
-            <div class="flex-1 flex flex-col">
-                <div
-                    v-for="chat in chats"
-                    :key="chat.name"
-                    class="flex items-center gap-2 p-4 cursor-pointer hover:bg-emphasis transition-all"
-                    :class="{
-                        'bg-emphasis': chat.name === activeChat
-                    }"
-                >
-                    <div class="relative">
-                        <div v-if="chat.active !== undefined" class="absolute top-0 right-0 p-[1px] bg-surface-0 dark:bg-surface-950 rounded-full flex items-center justify-center">
-                            <Badge :severity="chat.active ? 'success' : 'danger'" class="p-1.5"></Badge>
-                        </div>
-                        <Avatar
-                            v-bind="chat.image ? { image: chat.image } : { label: chat.capName }"
-                            :class="{
-                                '!bg-primary-100 !text-primary-950': !chat.image
-                            }"
-                            class="text-base font-medium flex"
-                            size="large"
-                            shape="circle"
-                        />
-                    </div>
-                    <div class="flex-1">
-                        <div class="flex items-start gap-1 justify-between">
-                            <div class="text-color font-medium leading-6">{{ chat.name }}</div>
-                            <div class="text-sm text-muted-color leading-5">{{ chat.time }}</div>
-                        </div>
-                        <div class="flex items-center gap-5 justify-between mt-1">
-                            <div class="text-muted-color text-sm leading-5 line-clamp-1">{{ chat.lastMessage }}</div>
-                            <Badge v-if="chat.unreadMessageCount > 0" :value="chat.unreadMessageCount" severity="contrast"></Badge>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="w-8/12 xl:w-6/12 border-x border-surface flex flex-col">
-            <div class="flex items-center p-4 gap-7 border-b border-surface">
-                <div class="flex items-center">
-                    <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png" class="mr-2 av" size="large" shape="circle" />
-                    <div class="flex-1">
-                        <div class="text-color leading-6 cursor-pointer hover:text-muted-color-emphasis transition-colors">PrimeTek</div>
-                        <div class="text-muted-color leading-5 line-clamp-1 mt-1">Cody Fisher, Esther Howard, Jerome Bell, Kristin Watson, Ronald Richards, Darrell Steward</div>
-                    </div>
-                </div>
-                <div class="flex items-center gap-2">
-                    <Button icon="pi pi-phone" text />
-                    <Button icon="pi pi-search" text />
-                    <Button type="button" icon="pi pi-ellipsis-h" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-                    <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
-                </div>
-            </div>
-            <div class="flex-1 overflow-y-auto flex flex-col gap-8 py-8 px-6">
-                <div v-for="message in chatMessages" :key="message.id" class="flex items-start min-w-64 w-fit max-w-[60%]" :class="{ 'ml-auto mr-0 flex-row-reverse': message.type === 'sent' }">
-                    <div
-                        class="flex items-center gap-2 sticky top-0 transition-all"
-                        :class="{
-                            'flex-row-reverse': message.type === 'sent'
-                        }"
-                    >
-                        <Avatar
-                            v-bind="message.image ? { image: message.image } : { label: message.capName }"
-                            :class="{
-                                'bg-primary-100 text-primary-950': !message.image
-                            }"
-                            class="w-10 h-10 text-sm font-medium"
-                            shape="circle"
-                        />
-                        <div>
-                            <svg :class="message.type === 'received' ? 'fill-surface-100 dark:fill-surface-800' : 'fill-primary rotate-180'" class="" xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none">
-                                <path d="M1.79256 7.09551C0.516424 6.31565 0.516426 4.46224 1.79256 3.68238L7 0.500055L7 10.2778L1.79256 7.09551Z" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div :class="message.type === 'received' ? 'flex-1 bg-surface-100 dark:bg-surface-800 px-2 py-1 rounded-lg' : 'flex-1 bg-primary px-2 py-1 rounded-lg'">
-                        <p :class="message.type === 'received' ? 'text-color leading-6 mb-0' : 'text-primary-contrast leading-6 mb-0'">
-                            {{ message.message }}
-                        </p>
-                        <div v-if="message.attachment" :class="message.type === 'received' ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary-emphasis'" class="mt-2 w-full rounded-lg mb-0.5 hover:opacity-75 transition-all">
-                            <img class="w-full h-auto block cursor-pointer" :src="message.attachment" alt="Message Image" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="p-4 border-t border-surface flex items-end justify-between gap-2">
-                <div class="flex items-end gap-1 flex-1">
-                    <Button icon="pi pi-face-smile" text />
-                    <Button icon="pi pi-paperclip" text />
-                    <Textarea class="ml-1 flex-1 border-0 shadow-none max-h-32 min-h-9 bg-emphasis overflow-auto" autoResize rows="1" placeholder="Write your message..." />
-                </div>
-                <Button icon="pi pi-send" />
-            </div>
-        </div>
-        <div class="w-3/12 xl:block hidden min-w-40 py-6 px-3 overflow-auto">
-            <div class="flex flex-col items-center justify-center">
-                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png" class="w-32 h-32" size="xlarge" shape="circle" />
-                <div class="leading-6 font-medium text-color mt-4 w-full text-center">PrimeTek</div>
-                <div class="leading-5 text-sm text-muted-color mt-1 w-full text-center">@primetek</div>
-                <div class="flex items-center justify-center flex-wrap gap-1 mt-4">
-                    <Button icon="pi pi-phone text-muted-color" severity="secondary" text />
-                    <Button icon="pi pi-video text-muted-color" severity="secondary" text />
-                    <Button icon="pi pi-sign-in text-muted-color" severity="secondary" text />
-                    <Button icon="pi pi-info-circle text-muted-color" severity="secondary" text />
-                    <Button type="button" icon="pi pi-ellipsis-v text-muted-color" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-                    <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
-                </div>
-            </div>
-            <div class="flex flex-col gap-4 mt-4">
-                <div class="flex items-center gap-2">
-                    <i class="pi pi-bell text-color"></i>
-                    <div class="leading-6 font-medium text-color flex-1">Notification</div>
-                    <ToggleSwitch v-model="notification" />
-                </div>
-                <div class="flex items-center gap-2">
-                    <i class="pi pi-volume-down text-color"></i>
-                    <div class="leading-6 font-medium text-color flex-1">Sound</div>
-                    <ToggleSwitch v-model="sound" />
-                </div>
-                <div class="flex items-center gap-2">
-                    <i class="pi pi-download text-color"></i>
-                    <div class="leading-6 font-medium text-color flex-1">Save to downloads</div>
-                    <ToggleSwitch v-model="download" />
-                </div>
-            </div>
-            <div class="mt-6">
-                <div class="flex items-center gap-2">
-                    <div class="flex-1 text-color leading-6 font-medium">Members</div>
-                    <Button label="See All" class="text-sm py-0.5 px-2 text-muted-color" text />
-                </div>
-                <div class="mt-4 flex flex-col gap-4">
-                    <div v-for="member in members" :key="member.name" class="flex items-center gap-2 cursor-pointer">
-                        <Avatar
-                            v-bind="member.image ? { image: member.image } : { label: member.capName }"
-                            :class="{
-                                'bg-orange-100 text-orange-950': !member.image
-                            }"
-                            class="font-medium text-xs"
-                            shape="circle"
-                        />
-                        <div class="text-sm text-color hover:text-muted-color-emphasis transition-colors font-medium leading-5 flex-1">
-                            {{ member.name }}
-                        </div>
-                        <i class="pi pi-chevron-right text-xs text-muted-color"></i>
-                    </div>
-                </div>
-            </div>
-            <div class="mt-5">
-                <SelectButton
-                    v-model="media"
-                    :options="mediaOptions"
-                    :pt="{
-                        root: {
-                            class: 'w-full'
-                        },
-                        pcbutton: {
-                            root: {
-                                class: 'flex-1'
-                            }
-                        }
-                    }"
-                />
-                <div class="mt-3 mb-5 grid grid-cols-3 gap-2">
-                    <div v-for="(media, index) in chatMedia" :key="index" class="bg-emphasis hover:opacity-70 transition-all flex-1 aspect-square rounded-lg border border-surface cursor-pointer">
-                        <img class="w-full h-full object-cover block" :src="media" alt="Media Image" />
-                    </div>
-                    <div class="bg-emphasis hover:opacity-70 transition-all flex-1 aspect-square rounded-lg border border-surface cursor-pointer flex items-center justify-center">
-                        <span class="text-muted-color font-medium">99+</span>
-                    </div>
-                </div>
-                <Button
-                    label="Show more"
-                    icon="pi pi-arrow-right"
-                    iconPos="right"
-                    outlined
-                    class="w-full text-left"
-                    :pt="{
-                        root: {
-                            class: 'justify-between'
-                        }
-                    }"
-                />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'Chat',
-    redrawListener: null,
-    data() {
-        return {
-            search: '',
-            download: false,
-            notification: true,
-            sound: false,
-            value: 'Chat',
-            value2: '',
-            options: ['Chat', 'Call'],
-            media: 'Media',
-            mediaOptions: ['Media', 'Link', 'Docs'],
-            activeChat: 'PrimeTek Team',
-            menuItems: [
-                {
-                    label: 'Group Info',
-                    icon: 'pi pi-info-circle'
-                },
-                {
-                    label: 'Leave group',
-                    icon: 'pi pi-sign-out'
-                }
-            ],
-            chats: [
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
-                    name: 'Cody Fisher',
-                    capName: 'CF',
-                    active: true,
-                    unreadMessageCount: 8,
-                    time: '12.30',
-                    lastMessage: "Hey there! I've heard about PrimeVue. Any cool tips for getting started?"
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar-primetek.png',
-                    name: 'PrimeTek Team',
-                    capName: 'PT',
-                    active: undefined,
-                    unreadMessageCount: 0,
-                    time: '11.15',
-                    lastMessage: "Let's implement PrimeVue. Elevating our UI game! 🚀"
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
-                    name: 'Jerome Bell',
-                    capName: 'JB',
-                    active: true,
-                    unreadMessageCount: 4,
-                    time: '11.15',
-                    lastMessage: "Absolutely! PrimeVue's documentation is gold—simplifies our UI work."
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
-                    name: 'Robert Fox',
-                    capName: 'RF',
-                    active: false,
-                    unreadMessageCount: 0,
-                    time: '11.15',
-                    lastMessage: "Interesting! PrimeVue sounds amazing. What's your favorite feature?"
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
-                    name: 'Esther Howard',
-                    capName: 'EH',
-                    active: true,
-                    unreadMessageCount: 9,
-                    time: '11.15',
-                    lastMessage: 'Quick one, team! Anyone using PrimeVue for mobile app development?'
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg',
-                    name: 'Darlene Robertson',
-                    capName: 'DR',
-                    active: false,
-                    unreadMessageCount: 0,
-                    time: '11.15',
-                    lastMessage: "Just explored PrimeVue's themes. Can we talk about those stunning designs? 😍"
-                },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png',
-                    name: 'Ralph Edwards',
-                    capName: 'RE',
-                    active: false,
-                    unreadMessageCount: 0,
-                    time: '11.15',
-                    lastMessage: 'PrimeVue is a game-changer, right? What are your thoughts, folks?'
-                },
-                { image: '', name: 'Ronald Richards', capName: 'RR', active: false, unreadMessageCount: 0, time: '11.15', lastMessage: "Jumping in! PrimeVue's community forum is buzzing. Any engaging discussions?" },
-                { image: '', name: 'Kristin Watson', capName: 'KW', active: false, unreadMessageCount: 0, time: '11.15', lastMessage: 'Sharing a quick win-PrimeVue tutorials are leveling up my UI skills. 👩‍💻' },
-                {
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
-                    name: 'Darrell Steward',
-                    capName: 'DS',
-                    active: false,
-                    unreadMessageCount: 0,
-                    time: '11.15',
-                    lastMessage: "Reflecting on PrimeVue's impact on our workflow. What's your take?"
-                }
-            ],
-            chatMessages: [
-                { id: 1, attachment: '', name: '', image: '', capName: 'OS', type: 'received', message: "Awesome! What's the standout feature?" },
-                { id: 2, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png', capName: 'A', type: 'received', message: 'PrimeVue rocks! Simplifies UI dev with versatile components.' },
-                { id: 3, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg', capName: 'A', type: 'received', message: 'Intriguing! Tell us more about its impact.' },
-                {
-                    id: 4,
-                    attachment: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/message-image.png',
-                    name: '',
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
-                    capName: 'A',
-                    type: 'received',
-                    message: "It's design-neutral and compatible with Tailwind. Features accessible, high-grade components!"
-                },
-                { id: 5, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png', capName: 'A', type: 'sent', message: 'Customizable themes, responsive design – UI excellence!' },
-                { id: 6, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png', capName: 'A', type: 'received', message: 'Love it! Fast-tracking our development is key.' },
-                { id: 7, attachment: '', name: '', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png', capName: 'A', type: 'received', message: 'Documentation rocks too – smooth integration for all.' },
-                {
-                    id: 8,
-                    attachment: '',
-                    name: '',
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
-                    capName: 'B',
-                    type: 'sent',
-                    message: 'The flexibility and ease of use are truly impressive. Have you explored the new components?'
-                },
-                {
-                    id: 9,
-                    attachment: '',
-                    name: '',
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
-                    capName: 'C',
-                    type: 'received',
-                    message: 'Absolutely, the new calendar component has saved us a ton of development time!'
-                },
-                {
-                    id: 10,
-                    attachment: '',
-                    name: '',
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
-                    capName: 'D',
-                    type: 'received',
-                    message: "And the accessibility features are top-notch. It's great to see a library focusing on inclusivity."
-                },
-                {
-                    id: 11,
-                    attachment: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/message-image.png',
-                    name: '',
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
-                    capName: 'E',
-                    type: 'sent',
-                    message: "I couldn't agree more. Plus, the documentation is incredibly thorough, which makes onboarding new team members a breeze."
-                },
-                {
-                    id: 12,
-                    attachment: '',
-                    name: '',
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png',
-                    capName: 'F',
-                    type: 'received',
-                    message: 'Do you have any tips for optimizing performance when using multiple complex components?'
-                },
-                {
-                    id: 13,
-                    attachment: '',
-                    name: '',
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
-                    capName: 'G',
-                    type: 'received',
-                    message: 'Yes! Lazy loading and code splitting can make a huge difference, especially in larger applications.'
-                },
-                {
-                    id: 14,
-                    attachment: '',
-                    name: '',
-                    image: '',
-                    capName: 'HS',
-                    type: 'received',
-                    message: "I've also found that leveraging the component's internal state management capabilities can help streamline data flow and improve performance."
-                },
-                {
-                    id: 15,
-                    attachment: '',
-                    name: '',
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png',
-                    capName: 'H',
-                    type: 'sent',
-                    message: "That's great advice. It's amazing how much detail and thought has gone into making PrimeVue such a powerful tool for developers."
-                }
-            ],
-            chatMedia: [
-                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image1.png',
-                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image2.png',
-                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image3.png',
-                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image4.png',
-                'https://www.primefaces.org/cdn/primevue/images/landing/apps/chat-image5.png'
-            ],
-            members: [
-                { name: 'Robin Jonas', capName: 'RJ', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png' },
-                { name: 'Cameron Williamson', capName: 'CW', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg' },
-                { name: 'Eleanor Pena', capName: 'EP', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar5.png' },
-                { name: 'Arlene McCoy', capName: 'AM', image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png' },
-                { name: 'Dianne Russell', capName: 'DR', image: '' }
-            ]
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        }
-    },
-    components: {}
-};
-</script>
diff --git a/apps/labs/components/landing/samples/CustomersApp.vue b/apps/labs/components/landing/samples/CustomersApp.vue
deleted file mode 100644
index f704cc66a..000000000
--- a/apps/labs/components/landing/samples/CustomersApp.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<template>
-    <div class="h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl p-6">
-        <div class="flex items-start gap-2 justify-between">
-            <div>
-                <div class="text-2xl leading-8 text-color font-medium">Customers</div>
-                <div class="mt-1 leading-6 text-muted-color">The analysis list here shows all users</div>
-            </div>
-            <Button icon="pi pi-circle-fill text-green-500" label="950 Active User" outlined severity="secondary" />
-        </div>
-        <div class="mt-10 mb-4 flex items-center justify-between">
-            <IconField iconPosition="left">
-                <InputIcon class="pi pi-search"> </InputIcon>
-                <InputText v-model="search" placeholder="Search" />
-            </IconField>
-            <div class="flex items-center gap-3">
-                <Button icon="pi pi-filter" outlined severity="secondary" />
-                <Divider layout="vertical" class="m-0" />
-                <Button icon="pi pi-refresh" outlined severity="secondary" />
-                <Button label="1 of 15" outlined severity="secondary" />
-                <Button icon="pi pi-chevron-left" outlined severity="secondary" />
-                <Button icon="pi pi-chevron-right" outlined severity="secondary" />
-            </div>
-        </div>
-        <div class="flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto">
-            <DataTable
-                v-model:selection="selectedRows"
-                :value="tableData"
-                :rows="10"
-                :pt="{
-                    root: {
-                        class: 'w-full flex-1 overflow-auto '
-                    },
-                    thead: {
-                        class: 'sticky top-0 z-10'
-                    }
-                }"
-                :dt="{
-                    headerCell: {
-                        background: 'transparent'
-                    },
-                    row: {
-                        background: 'transparent'
-                    }
-                }"
-            >
-                <template #empty>There is no customer.</template>
-                <Column selectionMode="multiple" headerStyle="width: 1rem" style="width: 1rem"></Column>
-                <Column field="name" header="Name">
-                    <template #body="{ data }">
-                        <div class="flex items-center">
-                            <OverlayBadge :severity="data.active === undefined ? 'contrast' : data.active ? 'success' : 'danger'" class="w-fit">
-                                <Avatar
-                                    v-bind="data.image ? { image: data.image } : { label: data.capName }"
-                                    :class="{
-                                        'bg-violet-100 text-violet-950 text-xs font-medium': !data.image
-                                    }"
-                                    class="rounded-md overflow-hidden flex"
-                                />
-                            </OverlayBadge>
-                            <div class="ml-4 leading-6 text-color font-medium">{{ data.name }}</div>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="title" header="Title">
-                    <template #body="{ data }">
-                        <div class="leading-6 text-muted-color">{{ data.title }}</div>
-                    </template>
-                </Column>
-                <Column field="company" header="Company Name">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <div class="flex items-center justify-center" v-html="companyLogos[data.company.logo]"></div>
-                            <div class="leading-6 text-surface-600 dark:text-surface-400">{{ data.company.name }}</div>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="email" header="Email Address">
-                    <template #body="{ data }">
-                        <div class="leading-6 text-muted-color truncate">{{ data.email }}</div>
-                    </template>
-                </Column>
-                <Column field="lead" header="Lead Source">
-                    <template #body="{ data }">
-                        <div class="leading-6 text-muted-color">{{ data.lead }}</div>
-                    </template>
-                </Column>
-                <Column field="status" header="Status">
-                    <template #body="{ data }">
-                        <Tag :severity="data.status === 'Active' ? 'success' : data.status === 'Inactive' ? 'danger' : 'info'" :value="data.status" class="font-medium"></Tag>
-                    </template>
-                </Column>
-                <Column field="more" header="More">
-                    <template #body>
-                        <div class="flex justify-end w-full">
-                            <Button @click="displayPopover" icon="pi pi-search" rounded outlined severity="secondary" />
-                        </div>
-                    </template>
-                </Column>
-            </DataTable>
-
-            <Popover ref="op">
-                <div class="flex gap-2">
-                    <Button label="Details" size="small" outlined @click="hidePopover"></Button>
-                    <Button label="Delete" severity="danger" size="small" outlined @click="hidePopover"></Button>
-                </div>
-            </Popover>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'Inbox',
-    redrawListener: null,
-    data() {
-        return {
-            search: '',
-            tableData: [
-                {
-                    id: 1,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
-                    active: true,
-                    name: 'Brook Simmons',
-                    title: 'Sales Executive ',
-                    company: { name: 'Mistranet', logo: 'mistranet' },
-                    email: 'hi@brooksmmns.co',
-                    lead: 'Linkedin',
-                    status: 'Active'
-                },
-                {
-                    id: 2,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg',
-                    active: true,
-                    name: 'Dianne Russell',
-                    title: 'CEO',
-                    company: { name: 'BriteMank', logo: 'britemank' },
-                    email: 'hi@diannerussell.com',
-                    lead: 'Website',
-                    status: 'Inactive'
-                },
-                {
-                    id: 3,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
-                    active: undefined,
-                    name: 'Amy Elsner',
-                    title: 'Product Manager',
-                    company: { name: 'ZenTrailMs', logo: 'zentrailms' },
-                    email: 'hi@amyelsner.com',
-                    lead: 'Cold Call',
-                    status: 'Prospect'
-                },
-                {
-                    id: 4,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
-                    active: true,
-                    name: 'Jacob Jones',
-                    title: 'Manager',
-                    company: { name: 'Streamlinz', logo: 'streamlinz' },
-                    email: 'jacobjones@gmail.com',
-                    lead: 'Partner',
-                    status: 'Prospect'
-                },
-                { id: 5, image: '', active: false, name: 'Cameron Watson', capName: 'CW', title: 'Product Manager', company: { name: 'BriteMank', logo: 'britemank' }, email: 'hi@cameronwilliamson', lead: 'Social Media', status: 'Active' },
-                { id: 6, image: '', active: true, name: 'Wade Warren', capName: 'WW', title: 'Director', company: { name: 'Streamlinz', logo: 'streamlinz' }, email: 'hi@annetteblack.com', lead: 'Cold Call', status: 'Inactive' },
-                {
-                    id: 7,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
-                    active: true,
-                    name: 'Guy Hawkins',
-                    title: 'Director',
-                    company: { name: 'Wavelength', logo: 'wavelength' },
-                    email: 'hi@darrellsteward.com',
-                    lead: 'Linkedin',
-                    status: 'Active'
-                },
-                {
-                    id: 8,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
-                    active: true,
-                    name: 'Annette Black',
-                    title: 'Manager',
-                    company: { name: 'Wavelength', logo: 'wavelength' },
-                    email: 'jeromebell@gmail.com',
-                    lead: 'Website',
-                    status: 'Inactive'
-                },
-                {
-                    id: 9,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg',
-                    active: undefined,
-                    name: 'Darrell Steward',
-                    title: 'Product Manager',
-                    company: { name: 'ZenTrailMs', logo: 'zentrailms' },
-                    email: 'hi@onyamalimba.co',
-                    lead: 'Website',
-                    status: 'Active'
-                },
-                { id: 10, image: '', active: true, name: 'Jerome Bell', capName: 'JB', title: 'Marketing Manager', company: { name: 'Mistranet', logo: 'mistranet' }, email: 'hi@courtneyhenryo', lead: 'Social Media', status: 'Active' },
-                {
-                    id: 11,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
-                    active: undefined,
-                    name: 'Onyama Limba',
-                    title: 'Sales Executive ',
-                    company: { name: 'BriteMank', logo: 'britemank' },
-                    email: 'hi@arlenemccoy.com',
-                    lead: 'Social Media',
-                    status: 'Active'
-                }
-            ],
-            companyLogos: {
-                mistranet: `
-                <svg  xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
-                    <path class="fill-surface-600 dark:fill-surface-400" fill-rule="evenodd" clip-rule="evenodd" d="M6.82207 0.728516C5.83146 0.728516 4.88145 1.12203 4.18099 1.82249L1.89501 4.10846C1.19454 4.80892 0.801025 5.75895 0.801025 6.74956C0.801025 7.8426 1.27054 8.82597 2.01888 9.509C1.27054 10.192 0.801025 11.1754 0.801025 12.2684C0.801025 13.2591 1.19454 14.2091 1.89501 14.9095L4.18099 17.1955C4.88145 17.896 5.83146 18.2895 6.82207 18.2895C7.91511 18.2895 8.89848 17.82 9.58152 17.0716C10.2646 17.82 11.2479 18.2895 12.341 18.2895C13.3316 18.2895 14.2816 17.896 14.982 17.1955L17.268 14.9095C17.9685 14.2091 18.362 13.2591 18.362 12.2684C18.362 11.1754 17.8925 10.192 17.1442 9.509C17.8925 8.82597 18.362 7.8426 18.362 6.74956C18.362 5.75895 17.9685 4.80892 17.268 4.10846L14.982 1.82249C14.2816 1.12203 13.3316 0.728516 12.341 0.728516C11.2479 0.728516 10.2646 1.19802 9.58152 1.94637C8.89848 1.19802 7.91511 0.728516 6.82207 0.728516ZM11.9859 9.62736C12.0509 9.56231 12.0509 9.45569 11.9859 9.39064L11.4907 8.89547C10.4363 7.84105 8.72674 7.84105 7.67233 8.89547L7.17716 9.39064C7.11211 9.45569 7.11211 9.56231 7.17716 9.62736L7.67233 10.1225C8.72674 11.177 10.4363 11.177 11.4907 10.1225L11.9859 9.62736ZM11.0796 13.2931C10.7451 13.6276 10.5571 14.0814 10.5571 14.5544C10.5571 15.5396 11.3558 16.3383 12.341 16.3383C12.8141 16.3383 13.2678 16.1503 13.6023 15.8158L15.8883 13.5298C16.2229 13.1953 16.4108 12.7415 16.4108 12.2684C16.4108 11.2833 15.6121 10.4846 14.627 10.4846C14.1539 10.4846 13.7001 10.6725 13.3656 11.0071L11.0796 13.2931ZM8.60592 14.5544C8.60592 14.0814 8.41798 13.6276 8.08345 13.2931L5.79743 11.0071C5.4629 10.6725 5.00918 10.4846 4.53608 10.4846C3.5509 10.4846 2.75224 11.2833 2.75224 12.2684C2.75224 12.7415 2.94018 13.1953 3.27471 13.5298L5.56071 15.8158C5.89525 16.1503 6.34898 16.3383 6.82207 16.3383C7.80724 16.3383 8.60592 15.5396 8.60592 14.5544ZM8.60592 4.46357C8.60592 4.93666 8.41798 5.39037 8.08346 5.72489L5.79743 8.01092C5.4629 8.34545 5.00918 8.5334 4.53608 8.5334C3.5509 8.5334 2.75224 7.73473 2.75224 6.74956C2.75224 6.27646 2.94018 5.82274 3.27471 5.48821L5.56071 3.20221C5.89525 2.86767 6.34898 2.67974 6.82207 2.67974C7.80724 2.67974 8.60592 3.47838 8.60592 4.46357ZM13.3656 8.01092L11.0796 5.72489C10.7451 5.39037 10.5571 4.93666 10.5571 4.46357C10.5571 3.47838 11.3558 2.67974 12.341 2.67974C12.8141 2.67974 13.2678 2.86767 13.6023 3.20221L15.8883 5.48821C16.2229 5.82274 16.4108 6.27646 16.4108 6.74956C16.4108 7.73473 15.6121 8.5334 14.627 8.5334C14.1539 8.5334 13.7001 8.34545 13.3656 8.01092Z"/>
-                </svg>
-                `,
-                britemank: `
-                <svg class="fill-surface-600 dark:fill-surface-400" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
-<g clip-path="url(#clip0_536_12504)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3011 5.75643C12.1897 5.68201 12.0754 5.6128 11.9585 5.54894C10.8679 4.95318 9.80103 3.99069 9.80103 2.74805V0.498047C11.581 0.498047 13.3211 1.02589 14.8012 2.01482C16.2812 3.00375 17.4347 4.40936 18.1159 6.05388C18.7971 7.69841 18.9754 9.50804 18.6281 11.2539C18.2808 12.9997 17.4237 14.6033 16.165 15.862C14.9063 17.1207 13.3027 17.9778 11.5568 18.3251C9.81102 18.6724 8.00139 18.4941 6.35686 17.813C4.71234 17.1318 3.30673 15.9782 2.3178 14.4982C1.32887 13.0181 0.801025 11.2781 0.801025 9.49805H3.05103C4.29367 9.49805 5.25615 10.565 5.85191 11.6555C5.91578 11.7724 5.98498 11.8867 6.05941 11.9981C6.55387 12.7381 7.25668 13.3149 8.07897 13.6555C8.90121 13.9961 9.80602 14.0852 10.6789 13.9116C11.5518 13.7379 12.3537 13.3094 12.983 12.68C13.6123 12.0507 14.0409 11.2489 14.2145 10.376C14.3882 9.50304 14.2991 8.59823 13.9585 7.77599C13.6179 6.9537 13.0411 6.25089 12.3011 5.75643Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.75102 0.498049C5.50249 0.498049 5.30335 0.700016 5.27854 0.947303C5.23471 1.38414 5.12711 1.81303 4.95848 2.22012C4.73234 2.76609 4.40087 3.26216 3.983 3.68003C3.56514 4.0979 3.06907 4.42936 2.5231 4.65551C2.116 4.82413 1.68711 4.93174 1.25028 4.97557C1.00299 5.00038 0.801026 5.19952 0.801026 5.44805L0.801025 9.49805C1.98292 9.49805 3.15324 9.26526 4.24518 8.81297C5.33711 8.36067 6.32927 7.69773 7.16497 6.86199C8.00071 6.0263 8.66365 5.03414 9.11594 3.9422C9.56824 2.85027 9.80102 1.67994 9.80102 0.498047L5.75102 0.498049Z"/>
-</g>
-<defs>
-<clipPath id="clip0_536_12504">
-<rect width="18" height="18" fill="white" transform="translate(0.800049 0.5)"/>
-</clipPath>
-</defs>
-</svg>
-                `,
-                zentrailms: `
-<svg class="fill-surface-600 dark:fill-surface-400" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.79908 18.5C14.7696 18.5 18.7991 14.4705 18.7991 9.49998C18.7991 4.52944 14.7696 0.5 9.79908 0.5C4.8285 0.5 0.799072 4.52944 0.799072 9.49998C0.799072 14.4705 4.8285 18.5 9.79908 18.5ZM12.6068 4.69258C12.7434 4.20712 12.2723 3.92006 11.8421 4.22658L5.83597 8.5053C5.36937 8.83772 5.44276 9.49998 5.94622 9.49998H7.52779V9.48774H10.6102L8.09862 10.3739L6.99139 14.3074C6.85473 14.7929 7.32579 15.0799 7.75608 14.7734L13.7622 10.4947C14.2288 10.1623 14.1553 9.49998 13.6519 9.49998H11.2535L12.6068 4.69258Z" />
-</svg>
-                `,
-                streamlinz: `<svg class="fill-surface-600 dark:fill-surface-400" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
-<path d="M9.79907 0.498047C8.61719 0.498047 7.44683 0.730864 6.3549 1.18313C5.26297 1.63544 4.27086 2.29835 3.43509 3.13407C2.59938 3.96983 1.93647 4.96194 1.48415 6.05387C1.03189 7.1458 0.799072 8.31616 0.799072 9.49804C0.799072 10.6799 1.03189 11.8503 1.48415 12.9422C1.93647 14.0341 2.59938 15.0262 3.43509 15.862C4.27086 16.6977 5.26297 17.3606 6.3549 17.813C7.44683 18.2652 8.61719 18.498 9.79907 18.498V13.998C9.2081 13.998 8.62295 13.8817 8.07698 13.6555C7.53102 13.4293 7.03494 13.0979 6.61708 12.68C6.19922 12.2622 5.86777 11.7661 5.64164 11.2201C5.41545 10.6742 5.29907 10.089 5.29907 9.49804C5.29907 8.90708 5.41545 8.32192 5.64164 7.77596C5.86777 7.22999 6.19922 6.73391 6.61708 6.31606C7.03494 5.8982 7.53102 5.56674 8.07698 5.34061C8.62295 5.11443 9.2081 4.99804 9.79907 4.99804V0.498047Z" />
-<path d="M9.79905 12.5019C11.4559 12.5019 12.799 11.1588 12.799 9.50193C12.799 7.84506 11.4559 6.50195 9.79905 6.50195C8.14218 6.50195 6.79907 7.84506 6.79907 9.50193C6.79907 11.1588 8.14218 12.5019 9.79905 12.5019Z"/>
-<path d="M0.799072 9.49805C0.799072 10.6799 1.03189 11.8503 1.48415 12.9422C1.93647 14.0341 2.59938 15.0263 3.43509 15.862C4.27086 16.6977 5.26297 17.3606 6.3549 17.813C7.44683 18.2652 8.61719 18.498 9.79907 18.498C10.9809 18.498 12.1513 18.2652 13.2432 17.813C14.3352 17.3606 15.3273 16.6977 16.163 15.862C16.9988 15.0263 17.6617 14.0341 18.114 12.9422C18.5662 11.8503 18.7991 10.6799 18.7991 9.49805H14.2991C14.2991 10.089 14.1827 10.6742 13.9565 11.2201C13.7304 11.7661 13.3989 12.2622 12.9811 12.68C12.5632 13.0979 12.0671 13.4293 11.5212 13.6555C10.9752 13.8817 10.39 13.998 9.79907 13.998C9.2081 13.998 8.62295 13.8817 8.07698 13.6555C7.53102 13.4293 7.03494 13.0979 6.61708 12.68C6.19922 12.2622 5.86777 11.7661 5.64164 11.2201C5.41545 10.6742 5.29907 10.089 5.29907 9.49805H0.799072Z" />
-<path d="M12.7991 9.50199C12.7991 8.70634 12.483 7.94329 11.9204 7.38066C11.3578 6.81803 10.5948 6.50195 9.7991 6.50195C9.00345 6.50195 8.24041 6.81803 7.67778 7.38066C7.11515 7.94329 6.79907 8.70634 6.79907 9.50199H9.7991H12.7991Z" />
-</svg>`,
-                wavelength: `<svg class="fill-surface-600 dark:fill-surface-400" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
-<path d="M9.79907 0.5C4.82851 0.5 0.799072 4.52943 0.799072 9.5C5.76963 9.5 9.79907 5.47056 9.79907 0.5Z" />
-<path d="M9.79907 18.5C14.7696 18.5 18.7991 14.4706 18.7991 9.5C13.8285 9.5 9.79907 13.5294 9.79907 18.5Z" />
-<path d="M9.79907 0.5C14.7696 0.5 18.7991 4.52943 18.7991 9.5C13.8285 9.5 9.79907 5.47056 9.79907 0.5Z" />
-<path d="M9.79907 18.5C4.82851 18.5 0.799072 14.4706 0.799072 9.5C5.76963 9.5 9.79907 13.5294 9.79907 18.5Z" />
-</svg>`
-            },
-            selectedRows: []
-        };
-    },
-
-    methods: {
-        displayPopover(event) {
-            this.hidePopover();
-
-            this.$nextTick(() => {
-                this.$refs.op.show(event);
-            });
-        },
-        hidePopover() {
-            this.$refs.op.hide();
-        }
-    }
-};
-</script>
diff --git a/apps/labs/components/landing/samples/InboxApp.vue b/apps/labs/components/landing/samples/InboxApp.vue
deleted file mode 100644
index d032f7772..000000000
--- a/apps/labs/components/landing/samples/InboxApp.vue
+++ /dev/null
@@ -1,364 +0,0 @@
-<template>
-    <div class="flex gap-4 h-full flex-1 w-full overflow-auto">
-        <div class="w-64 h-full overflow-hidden border border-surface rounded-2xl flex flex-col">
-            <div class="flex items-center justify-between gap-2 p-4 border-b border-surface">
-                <div class="text-xl font-medium leading-7 text-color">Mails</div>
-                <Button icon="pi pi-plus" class="w-8 h-8" />
-            </div>
-            <div class="flex-1 flex flex-col overflow-auto justify-between gap-4 pt-4 pb-4 px-4">
-                <div class="flex-1 overflow-auto flex flex-col gap-2">
-                    <div v-for="(navData, i) of inboxNavs" :key="i" class="flex flex-col gap-2">
-                        <div class="text-sm font-medium leading-5 text-surface-400 dark:text-surface-500">{{ navData.title }}</div>
-                        <button
-                            v-for="(nav, j) of navData.navs"
-                            :key="j"
-                            @click="activeInboxNav = nav.name"
-                            :class="activeInboxNav === nav.name ? 'text-color bg-emphasis' : 'text-muted-color bg-transparent'"
-                            class="px-4 py-2 rounded-lg flex items-center gap-2 cursor-pointer hover:bg-emphasis transition-all"
-                        >
-                            <i :class="nav.icon"></i>
-                            <span class="font-medium">{{ nav.name }}</span>
-                        </button>
-                    </div>
-                </div>
-                <div>
-                    <div class="border border-surface rounded-border px-4 pb-4 pt-3 mb-4">
-                        <div class="font-medium text-color mb-4">Free Version</div>
-                        <ProgressBar
-                            :value="75"
-                            :pt="{
-                                value: {
-                                    class: 'bg-red-600'
-                                }
-                            }"
-                        >
-                            <span class="w-full text-center text-sm font-normal text-surface-0 leading-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">4 days left</span>
-                        </ProgressBar>
-                    </div>
-                    <Button label="Upgrade to PRO 🚀" outlined class="w-full" />
-                </div>
-            </div>
-        </div>
-        <div class="flex-1 h-full overflow-hidden flex border border-surface rounded-2xl">
-            <DataTable
-                v-model:selection="selectedRows"
-                scrollable
-                :value="tableData"
-                :rows="10"
-                :pt="{
-                    root: {
-                        class: 'w-full flex-1 overflow-x-auto'
-                    },
-                    thead: {
-                        class: 'hidden'
-                    },
-                    header: {
-                        class: 'sticky top-0 z-10'
-                    },
-                    column: {
-                        bodyCell: {
-                            class: '!border-transparent'
-                        }
-                    }
-                }"
-                :dt="{
-                    headerCell: {
-                        background: 'transparent'
-                    },
-                    row: {
-                        background: 'transparent'
-                    }
-                }"
-            >
-                <template #header>
-                    <div class="flex xl:items-center justify-between gap-2 flex-col xl:flex-row">
-                        <div class="flex items-center gap-2">
-                            <Checkbox v-model="checked" :binary="true" class="mr-1" @update:modelValue="onSelectionChange" />
-                            <Button icon="pi pi-envelope" outlined severity="secondary" />
-                            <Button icon="pi pi-exclamation-circle" outlined severity="secondary" />
-                            <Button icon="pi pi-tag" outlined severity="secondary" />
-                            <Button icon="pi pi-inbox" label="Archive" outlined severity="secondary" />
-                            <Button icon="pi pi-trash" label="Trash" outlined severity="secondary" />
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <IconField iconPosition="left" class="w-6/12 xl:max-w-36">
-                                <InputIcon class="pi pi-search"> </InputIcon>
-                                <InputText v-model="search" placeholder="Search" class="w-full" />
-                            </IconField>
-                            <Button icon="pi pi-filter" outlined severity="secondary" />
-                            <Divider layout="vertical" class="m-0" />
-                            <Button icon="pi pi-refresh" outlined severity="secondary" />
-                            <Button label="1 of 15" class="!whitespace-nowrap" outlined severity="secondary" />
-                            <Button icon="pi pi-chevron-left" outlined severity="secondary" />
-                            <Button icon="pi pi-chevron-right" outlined severity="secondary" />
-                        </div>
-                    </div>
-                </template>
-                <template #empty>Inbox is empty.</template>
-                <Column selectionMode="multiple" headerStyle="width: 1rem" style="width: 1rem"></Column>
-                <Column field="bookmarked" headerStyle="width: 1rem" style="width: 1rem; padding: 0.5rem">
-                    <template #body="{ data }">
-                        <div @click="data.bookmarked = !data.bookmarked" @click.stop>
-                            <i :class="data.bookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"></i>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="name">
-                    <template #body="{ data }">
-                        <div class="flex items-center">
-                            <OverlayBadge severity="danger" class="w-fit">
-                                <Avatar
-                                    v-bind="data.image ? { image: data.image } : { label: data.capName }"
-                                    :class="{
-                                        'bg-violet-100 text-violet-950 text-xs font-medium': !data.image
-                                    }"
-                                    class="rounded-md overflow-hidden flex"
-                                />
-                            </OverlayBadge>
-                            <div class="ml-4 leading-6 text-color font-medium">{{ data.name }}</div>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="title" style="min-width: 14rem; max-width: 20rem">
-                    <template #body="{ data }">
-                        <div class="truncate">
-                            <span class="text-color leading-6 mr-2">{{ data.title }}</span>
-                            <span class="text-muted-color leading-5 text-sm">{{ data.message }}</span>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="type" style="width: 4rem">
-                    <template #body="{ data }">
-                        <Tag v-if="data.type" severity="secondary" :value="data.type" class="font-medium"></Tag>
-                    </template>
-                </Column>
-                <Column field="time" style="width: 4rem">
-                    <template #body="{ data }">
-                        <div class="text-right text-sm leading-5 text-muted-color">{{ data.time }}</div>
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'Inbox',
-    redrawListener: null,
-    data() {
-        return {
-            checked: false,
-            search: '',
-            activeInboxNav: 'Inbox',
-            inboxNavs: [
-                {
-                    title: 'Navigation',
-                    navs: [
-                        { name: 'Inbox', icon: 'pi pi-inbox' },
-                        { name: 'Starry', icon: 'pi pi-star' },
-                        { name: 'Drafts', icon: 'pi pi-file-o' },
-                        { name: 'Important', icon: 'pi pi-file-import' },
-                        { name: 'Sent', icon: 'pi pi-send' },
-                        { name: 'Archive', icon: 'pi pi-inbox' },
-                        { name: 'Spam', icon: 'pi pi-info-circle' },
-                        { name: 'Trash', icon: 'pi pi-trash' }
-                    ]
-                },
-                {
-                    title: 'Other',
-                    navs: [
-                        { name: 'Security', icon: 'pi pi-tag' },
-                        { name: 'Update', icon: 'pi pi-tag' },
-                        { name: 'Marketing', icon: 'pi pi-tag' },
-                        { name: 'HR', icon: 'pi pi-tag' }
-                    ]
-                }
-            ],
-            tableData: [
-                {
-                    id: 1,
-                    bookmarked: false,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
-                    active: false,
-                    name: 'Brook Simmons',
-                    type: 'Security',
-                    time: '3:24 PM',
-                    title: 'Important Account Update',
-                    message: "Dear customer, we've made updates to enhance your account security. Please log in to review and complete the necessary steps. Thank you for choosing ABC Corporation."
-                },
-                {
-                    id: 2,
-                    bookmarked: false,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
-                    active: false,
-                    name: 'Dianne Russell',
-                    type: 'Update',
-                    time: '11:24 AM',
-                    title: 'Weekly Project Update',
-                    message: 'Hi team, attached is the weekly project update. Kindly review the progress and come prepared for our discussion in the upcoming meeting on [Date and Time].'
-                },
-                {
-                    id: 3,
-                    bookmarked: true,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
-                    active: false,
-                    name: 'Amy Elsner',
-                    type: 'Security',
-                    time: '9:24 AM',
-                    title: 'Urgent: Security Alert - Account Compromise',
-                    message: 'Dear user, we detected unauthorized access to your account. Take immediate action to secure your account. Follow the provided link to reset your password. Thank you.'
-                },
-                {
-                    id: 4,
-                    bookmarked: false,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png',
-                    active: false,
-                    name: 'Jacob Jones',
-                    type: 'Marketing',
-                    time: 'Jan 21',
-                    title: 'Exclusive Offer Inside - Limited Time Only',
-                    message: "Greetings, check out our exclusive offer! Don't miss this limited-time deal. Details enclosed in the attached flyer. Act fast; the offer expires on [Date]."
-                },
-                {
-                    id: 5,
-                    bookmarked: false,
-                    image: '',
-                    active: false,
-                    name: 'Cameron Watson',
-                    capName: 'CW',
-                    type: 'HR',
-                    time: 'Jan 15',
-                    title: 'Employee Appreciation Event - Save the Date',
-                    message: 'Hello team, mark your calendars for our upcoming Employee Appreciation Event on [Date]. Stay tuned for more details and get ready for a day of celebration!'
-                },
-                {
-                    id: 6,
-                    bookmarked: true,
-                    image: '',
-                    active: false,
-                    name: 'Wade Warren',
-                    capName: 'WW',
-                    type: 'Invoice',
-                    time: 'Jan 12',
-                    title: 'Your Recent Purchase - Order Confirmation',
-                    message: 'Hi Wade Warren, secure your spot at the XYZ Conference 2024 with early bird registration. Enjoy discounted rates until [Date].'
-                },
-                {
-                    id: 7,
-                    bookmarked: false,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
-                    active: false,
-                    name: 'Guy Hawkins',
-                    type: 'Events',
-                    time: 'Jan 11',
-                    title: 'Early Bird Registration Open - XYZ Conference 2024',
-                    message: ' Attention users, we have scheduled system maintenance on Jan 17. Expect minimal service disruption during this period. Thank you for your understanding.'
-                },
-                {
-                    id: 8,
-                    bookmarked: false,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
-                    active: false,
-                    name: 'Annette Black',
-                    type: '',
-                    time: 'Jan 8',
-                    title: 'Upcoming System Maintenance Notice',
-                    message: "Dear valued customer, as a token of appreciation, we're offering exclusive discounts for VIP customers. Explore the savings in the attached catalog. Expires [Date]."
-                },
-                {
-                    id: 9,
-                    bookmarked: true,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg',
-                    active: false,
-                    name: 'Darrell Steward',
-                    type: 'Discount',
-                    time: 'Jan 4',
-                    title: 'Special Discounts for VIP Customers',
-                    message: 'Hello Darrell Steward, stay updated with our latest news and highlights in the January edition of our newsletter. Enjoy the read!'
-                },
-                {
-                    id: 10,
-                    bookmarked: true,
-                    image: '',
-                    active: false,
-                    name: 'Jerome Bell',
-                    capName: 'JB',
-                    type: 'Newsletter',
-                    time: 'Jan 2',
-                    title: 'Monthly Newsletter - January Edition',
-                    message: "Dear user, we've updated our Terms of Service. Please review the changes to ensure compliance. Your continued use of our services implies acceptance. Thank you."
-                },
-                {
-                    id: 11,
-                    bookmarked: false,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
-                    active: false,
-                    name: 'Onyama Limba',
-                    type: '',
-                    time: 'Jan 2',
-                    title: 'Exclusive Travel Packages for You',
-                    message: 'Greetings traveler, explore our exclusive travel packages tailored just for you. Plan your next adventure with XYZ Travel. Offers valid until [Date].'
-                },
-                {
-                    id: 12,
-                    bookmarked: false,
-                    image: '',
-                    active: false,
-                    name: 'Robert Fox',
-                    capName: 'RF',
-                    type: 'Invitation',
-                    time: '12.12.2023',
-                    title: 'Invitation to Amsterdam',
-                    message: "Hello Robert Fox, you're invited to our upcoming webinar on Amsterdam. Join us on [Date and Time] for an insightful session. Reserve your spot now!"
-                },
-                {
-                    id: 13,
-                    bookmarked: true,
-                    image: '',
-                    active: false,
-                    name: 'Courtney Henry',
-                    capName: 'CH',
-                    type: '',
-                    time: '12.09.2023',
-                    title: 'New Arrivals - Check Out the Latest Books',
-                    message: 'Book enthusiasts, discover our latest arrivals! Explore the attached catalog and dive into the world of new releases. Available for purchase starting [Date].'
-                },
-                {
-                    id: 14,
-                    bookmarked: true,
-                    image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg',
-                    active: false,
-                    name: 'Arlene McCoy',
-                    type: '',
-                    time: '12.04.2023',
-                    title: 'New Product Demo',
-                    message: 'Exclusive demo of our latest product on Thursday.'
-                },
-                {
-                    id: 15,
-                    bookmarked: false,
-                    image: '',
-                    active: false,
-                    name: 'Jerome Bell',
-                    capName: 'JB',
-                    type: 'Newsletter',
-                    time: '10.01.2023',
-                    title: 'Monthly Newsletter - January Edition',
-                    message: "Dear user, we've updated our Terms of Service. Please review the changes to ensure compliance. Your continued use of our services implies acceptance. Thank you."
-                }
-            ],
-            selectedRows: []
-        };
-    },
-    methods: {
-        onSelectionChange(checked) {
-            if (checked) {
-                this.selectedRows = this.tableData;
-            } else {
-                this.selectedRows = [];
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/components/landing/samples/MoviesApp.vue b/apps/labs/components/landing/samples/MoviesApp.vue
deleted file mode 100644
index 13025530e..000000000
--- a/apps/labs/components/landing/samples/MoviesApp.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-    <div class="flex-1 flex flex-col gap-6 p-6 h-full overflow-y-auto overflow-x-clip overflow-hidden border border-surface rounded-2xl">
-        <div class="flex flex-wrap gap-4 items-center justify-between">
-            <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
-            <div class="flex gap-2.5 items-center">
-                <IconField iconPosition="left">
-                    <InputIcon class="pi pi-search"> </InputIcon>
-                    <InputText v-model="search" placeholder="Search" />
-                </IconField>
-                <Button severity="secondary" outlined>
-                    <OverlayBadge
-                        severity="danger"
-                        size="small"
-                        :pt="{
-                            pcbadge: {
-                                root: {
-                                    class: '!min-w-0 !w-2.5 !h-2.5'
-                                }
-                            }
-                        }"
-                    >
-                        <i class="pi pi-bell" />
-                    </OverlayBadge>
-                </Button>
-                <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" shape="circle" class="w-9 h-9 cursor-pointer" />
-            </div>
-        </div>
-        <div class="">
-            <div class="flex items-center justify-between gap-2 mb-6">
-                <div class="text-color text-xl font-medium leading-7">Keep watching</div>
-                <div class="xl:flex hidden items-center gap-2">
-                    <Button :disabled="page === 0" @click="page -= 1" icon="pi pi-chevron-left" severity="secondary" outlined />
-                    <Button :disabled="page === carouselData.length - page" @click="page += 1" icon="pi pi-chevron-right" severity="secondary" outlined />
-                </div>
-                <div class="xl:hidden flex items-center gap-2">
-                    <Button :disabled="page === 0" @click="page -= 1" icon="pi pi-chevron-left" severity="secondary" outlined />
-                    <Button :disabled="page === carouselData.length - 3" @click="page += 1" icon="pi pi-chevron-right" severity="secondary" outlined />
-                </div>
-            </div>
-            <Carousel :value="carouselData" :page="page" :numVisible="5" :numScroll="1" :responsiveOptions="responsiveOptions" :showIndicators="false" :showNavigators="false">
-                <template #item="slotProps">
-                    <div class="p-2 rounded-xl hover:bg-emphasis transition-colors cursor-pointer">
-                        <div class="relative w-full aspect-[195/118.5] rounded-lg overflow-hidden">
-                            <img :src="slotProps.data.image" class="w-full h-full object-cover" alt="Carousel Movie Image" />
-                            <div class="absolute z-10 top-2 right-2 px-2 py-1 text-sm font-medium leading-tight bg-surface-0 dark:bg-surface-950 border border-surface rounded-md">
-                                {{ slotProps.data.point }}
-                            </div>
-                            <div class="absolute z-10 bottom-2 inset-x-2">
-                                <ProgressBar
-                                    :value="slotProps.data.watchedPercent"
-                                    :showValue="false"
-                                    :pt="{
-                                        root: {
-                                            class: '!h-1.5 !bg-surface-950 dark:!bg-surface-50 !rounded-full'
-                                        },
-                                        value: {
-                                            class: '!bg-surface-0 dark:!bg-surface-950 !rounded-full'
-                                        }
-                                    }"
-                                ></ProgressBar>
-                            </div>
-                        </div>
-                        <div class="mt-2 flex items-start justify-between gap-1">
-                            <div class="px-2 flex-1">
-                                <div class="font-medium text-color leading-6 line-clamp-1">{{ slotProps.data.name }}</div>
-                                <div class="mt-1 text-muted-color text-sm leading-5">{{ slotProps.data.categories.join(', ') }}</div>
-                            </div>
-                            <Button v-if="slotProps.data.bookmarked" icon="pi pi-bookmark-fill" severity="contrast" text rounded />
-                        </div>
-                    </div>
-                </template>
-            </Carousel>
-        </div>
-        <div>
-            <div class="mb-6 flex items-center gap-4 justify-between">
-                <div class="flex items-center gap-2">
-                    <Button label="Popular" severity="secondary" />
-                    <Button label="New Releases" text severity="secondary" />
-                    <Button label="Recently Added" text severity="secondary" />
-                    <Button label="For you" text severity="secondary" />
-                </div>
-                <Button label="Show All" severity="secondary" outlined />
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-6">
-                <div v-for="(movie, index) of popularMovies" :key="index" class="cursor-pointer">
-                    <div class="relative aspect-[259/174.5] rounded-lg overflow-hidden">
-                        <img class="w-full h-full object-cover" :src="movie.image" alt="Popular Movie Cover" />
-                        <div class="absolute z-10 top-2 right-2 px-2 py-1 text-sm font-medium leading-tight bg-surface-0 dark:bg-surface-950 border border-surface rounded-md">
-                            {{ movie.point }}
-                        </div>
-                    </div>
-                    <div class="mt-2 flex items-start justify-between gap-1">
-                        <div class="px-2 flex-1">
-                            <div class="font-medium text-color leading-6 line-clamp-1">{{ movie.name }}</div>
-                            <div class="mt-1 text-muted-color text-sm leading-5">{{ movie.categories.join(', ') }}</div>
-                        </div>
-                        <Button v-if="movie.bookmarked" icon="pi pi-bookmark-fill" severity="contrast" text rounded />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'Movies',
-    redrawListener: null,
-    data() {
-        return {
-            search: '',
-            page: 0,
-            value: 'Home',
-            options: ['Home', 'Movies', 'TV Shows', 'Recently Added', 'My List'],
-            responsiveOptions: [
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ],
-            carouselData: [
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover1.png', name: 'Heat', bookmarked: true, point: '4.7', watchedPercent: 80, categories: ['Action', 'Crime', 'Drama'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover2.png', name: 'Batman Begins', bookmarked: false, point: '4.8', watchedPercent: 45, categories: ['Action', 'Crime', 'Drama'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover3.png', name: 'Leon: The Professional', bookmarked: false, point: '4.3', watchedPercent: 10, categories: ['Action', 'Crime', 'Drama'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover4.png', name: 'Matrix', bookmarked: false, point: '4.9', watchedPercent: 50, categories: ['Action', 'Sci-Fi'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover5.png', name: 'Fight Club', bookmarked: false, point: '4.4', watchedPercent: 30, categories: ['Drama'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover6.png', name: 'The Big Lebowski', bookmarked: false, point: '4.7', watchedPercent: 40, categories: ['Comedy', 'Drama'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover7.png', name: 'Twelve Angry Men', bookmarked: false, point: '4.7', watchedPercent: 50, categories: ['Crime', 'Drama'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover8.png', name: 'Saving Private Ryan', bookmarked: true, point: '4.7', watchedPercent: 80, categories: ['Drama', 'War'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover9.png', name: 'Seven', bookmarked: false, point: '4.7', watchedPercent: 20, categories: ['Crime', 'Drama', 'Mystery'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', watchedPercent: 70, categories: ['Mystery', 'Thriller'] }
-            ],
-            popularMovies: [
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover7.png', name: 'Twelve Angry Men', bookmarked: false, point: '4.6', categories: ['Crime', 'Drama'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover8.png', name: 'Saving Private Ryan', bookmarked: true, point: '4.4', categories: ['Drama', 'War'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover9.png', name: 'Seven', bookmarked: false, point: '4.3', categories: ['Crime', 'Drama', 'Mystery'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', categories: ['Mystery', 'Thriller'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover11.png', name: 'Basic Instinct', bookmarked: true, point: '4.3', categories: ['Drama', 'Mystery', 'Thriller'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover12.png', name: 'Big Hero 6', bookmarked: false, point: '4.7', categories: ['Animation', 'Action', 'Adventure'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover13.png', name: 'The Lord Of The Rings: Fellowship of the ring', bookmarked: true, point: '4.9', categories: ['Action', 'Adventure', 'Drama'] },
-                { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover14.png', name: 'Kill Bill', bookmarked: true, point: '4.5', categories: ['Action', 'Crime', 'Thriller'] }
-            ]
-        };
-    },
-    methods: {},
-    components: {}
-};
-</script>
diff --git a/apps/labs/components/landing/samples/OverviewApp.vue b/apps/labs/components/landing/samples/OverviewApp.vue
deleted file mode 100644
index 69e5c70a0..000000000
--- a/apps/labs/components/landing/samples/OverviewApp.vue
+++ /dev/null
@@ -1,437 +0,0 @@
-<template>
-    <div class="flex-1 h-full overflow-y-auto pb-0.5">
-        <div class="flex flex-wrap gap-4 items-start justify-between p-1">
-            <div class="flex-1">
-                <div class="text-muted-color font-medium leading-normal">Overview</div>
-                <div class="text-color text-3xl font-semibold leading-normal">Welcome to PrimeVue</div>
-            </div>
-            <div class="flex gap-2 whitespace-nowrap flex-nowrap">
-                <IconField iconPosition="left">
-                    <InputIcon class="pi pi-search"> </InputIcon>
-                    <InputText placeholder="Search" />
-                </IconField>
-                <Button severity="secondary" outlined>
-                    <OverlayBadge
-                        severity="danger"
-                        :pt="{
-                            pcbadge: {
-                                root: {
-                                    class: '!min-w-0 !w-2.5 !h-2.5'
-                                }
-                            }
-                        }"
-                    >
-                        <i class="pi pi-bell" />
-                    </OverlayBadge>
-                </Button>
-            </div>
-        </div>
-        <div class="mt-4 flex flex-wrap gap-6 items-center justify-between p-1">
-            <SelectButton v-model="selectedTime" :options="timeOptions" aria-labelledby="basic" :allowEmpty="false" @change="changeSelect" />
-            <div class="flex items-center gap-2">
-                <Button label="Download" icon="pi pi-download" iconPos="right" />
-                <DatePicker v-model="dates" selectionMode="range" :manualInput="false" showIcon iconDisplay="input" placeholder="06/11/2024 - 06/22/2024" />
-            </div>
-        </div>
-        <div class="flex flex-col gap-6 mt-6">
-            <div class="w-full border border-surface rounded-2xl py-5 px-7 flex flex-col justify-between">
-                <div class="flex items-center gap-6 mb-6">
-                    <div class="flex-1 text-color font-semibold leading-6">Crypto Analytics</div>
-                    <div class="flex items-center gap-5">
-                        <div v-for="(item, index) in chartData?.datasets" :key="index" class="flex items-center gap-2">
-                            <div class="w-3 h-3 rounded-full" :style="{ backgroundColor: item.backgroundColor }"></div>
-                            <span class="font-medium text-color leading-6">{{ item.label }}</span>
-                        </div>
-                    </div>
-                </div>
-                <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
-            </div>
-            <div class="flex gap-6 xl:flex-row flex-col">
-                <div class="flex-1 border border-surface rounded-2xl py-5 px-7">
-                    <div class="flex items-center gap-6 mb-4">
-                        <div class="flex-1 text-color font-semibold leading-6">Transactions</div>
-                        <Button type="button" icon="pi pi-ellipsis-h" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-                        <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
-                    </div>
-                    <DataTable
-                        :value="sampleAppsTableDatas"
-                        paginator
-                        :rows="5"
-                        dataKey="id"
-                        tableClass="overflow-x-auto dark:bg-surface-950"
-                        paginatorTemplate="PrevPageLink PageLinks NextPageLink  CurrentPageReport RowsPerPageDropdown"
-                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                        pt:pcpaginator:root="!bg-transparent"
-                        :dt="{
-                            header: {
-                                background: 'transparent'
-                            },
-                            headerCell: {
-                                background: 'transparent'
-                            },
-                            row: {
-                                background: 'transparent'
-                            }
-                        }"
-                    >
-                        <Column header="Id" class="w-1/12">
-                            <template #body="slotProps">
-                                <div class="text-muted-color">{{ slotProps.data.id }}</div>
-                            </template>
-                        </Column>
-                        <Column header="Name" class="w-1/4">
-                            <template #body="slotProps">
-                                <div class="flex items-center">
-                                    <Avatar :label="slotProps.data.name.label" class="mr-2 text-xs font-medium" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-                                    <div class="leading-6 text-muted-color flex-1">{{ slotProps.data.name.text }}</div>
-                                </div>
-                            </template>
-                        </Column>
-                        <Column header="Coin" class="w-1/6">
-                            <template #body="slotProps">
-                                <div class="flex items-center">
-                                    <i
-                                        :class="[
-                                            {
-                                                'pi pi-bitcoin text-yellow-500 !text-3xl': slotProps.data.coin !== 'btc',
-                                                'pi pi-ethereum bg-surface-950 text-surface-0 dark:bg-surface-0 dark:text-surface-950 w-7 h-7 rounded-full flex items-center justify-center': slotProps.data.coin !== 'eth'
-                                            }
-                                        ]"
-                                    ></i>
-                                </div>
-                            </template>
-                        </Column>
-                        <Column header="Date" class="w-1/6">
-                            <template #body="slotProps">
-                                <div class="text-muted-color">{{ slotProps.data.date }}</div>
-                            </template>
-                        </Column>
-                        <Column header="Process" class="w-1/6">
-                            <template #body="slotProps">
-                                <Tag :severity="slotProps.data.process.type" :value="slotProps.data.process.value" class="font-medium"></Tag>
-                            </template>
-                        </Column>
-                        <Column header="Amount" class="w-1/6">
-                            <template #body="slotProps">
-                                <div class="text-muted-color text-right">{{ slotProps.data.amount }}</div>
-                            </template>
-                        </Column>
-                    </DataTable>
-                </div>
-                <div class="xl:w-96 border border-surface rounded-2xl py-5 px-7 flex flex-col justify-between">
-                    <div>
-                        <div class="flex items-center gap-6 mb-6">
-                            <div class="flex-1 text-color font-semibold leading-6">My Wallet</div>
-                            <Button type="button" icon="pi pi-ellipsis-h" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-                            <Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
-                        </div>
-                        <MeterGroup :value="metersData" labelPosition="end">
-                            <template #label="{ value }">
-                                <div class="flex flex-col gap-6 mt-4">
-                                    <template v-for="val of value" :key="val.label">
-                                        <div class="flex items-center gap-2">
-                                            <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: val.color }"></div>
-                                            <div class="text-color uppercase font-medium leading-6 flex-1">
-                                                {{ val.label }}
-                                                <span class="text-muted-color">({{ val.value }}%)</span>
-                                            </div>
-                                            <div class="leading-6 font-medium text-color">{{ val.text }}</div>
-                                        </div>
-                                    </template>
-                                </div>
-                            </template>
-                        </MeterGroup>
-                    </div>
-                    <Button label="Show All" outlined />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import EventBus from '@/layouts/AppEventBus';
-export default {
-    name: 'Overview',
-    redrawListener: null,
-    data() {
-        return {
-            chartData: {},
-            chartOptions: {},
-            dates: [],
-            selectedTime: 'Monthly',
-            timeOptions: ['Weekly', 'Monthly', 'Yearly'],
-            menuItems: [
-                {
-                    label: 'Refresh',
-                    icon: 'pi pi-refresh'
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-upload'
-                }
-            ],
-            sampleAppsTableDatas: [
-                { id: '#1254', name: { text: 'Amy Yelsner', label: 'AY', color: 'blue' }, coin: 'btc', date: 'May 5th', process: { type: 'success', value: 'Buy' }, amount: '3.005 BTC' },
-                { id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'success', value: 'Buy' }, amount: '0.050 ETH' },
-                { id: '#1235', name: { text: 'Stepen Shaw', label: 'SS', color: '#ECFCCB' }, coin: 'btc', date: 'May 24th', process: { type: 'danger', value: 'Sell' }, amount: '3.050 BTC' },
-                { id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'danger', value: 'Sell' }, amount: '0.050 ETH' },
-                { id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'danger', value: 'Sell' }, amount: '0.050 ETH' },
-                { id: '#7896', name: { text: 'John Doe', label: 'JD', color: 'green' }, coin: 'btc', date: 'Jun 12th', process: { type: 'success', value: 'Buy' }, amount: '2.500 BTC' },
-                { id: '#5648', name: { text: 'Jane Smith', label: 'JS', color: '#FFDDC1' }, coin: 'eth', date: 'Feb 23rd', process: { type: 'success', value: 'Buy' }, amount: '1.200 ETH' },
-                { id: '#3265', name: { text: 'Michael Johnson', label: 'MJ', color: '#FFD700' }, coin: 'btc', date: 'Apr 30th', process: { type: 'danger', value: 'Sell' }, amount: '4.000 BTC' },
-                { id: '#1423', name: { text: 'Emily Davis', label: 'ED', color: '#FFCCCB' }, coin: 'btc', date: 'Jan 15th', process: { type: 'danger', value: 'Sell' }, amount: '5.050 LTC' },
-                { id: '#6854', name: { text: 'Robert Brown', label: 'RB', color: '#C0C0C0' }, coin: 'eth', date: 'Dec 2nd', process: { type: 'success', value: 'Buy' }, amount: '0.300 ETH' }
-            ],
-            metersData: [
-                { label: 'BTC', color: '#F59E0B', value: 15, text: '27.215' },
-                { label: 'ETH', color: '#717179', value: 5, text: '4.367' },
-                { label: 'GBP', color: '#22C55E', value: 25, text: '£ 147.562,32' },
-                { label: 'EUR', color: '#84CC16', value: 11, text: '€ 137.457,25' },
-                { label: 'USD', color: '#14B8A6', value: 29, text: '$ 133.364,12' },
-                { label: 'XAU', color: '#EAB308', value: 29, text: '200 g' }
-            ]
-        };
-    },
-    beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
-        EventBus.off('theme-palette-change', this.redrawListener);
-    },
-    mounted() {
-        this.chartData = this.setChartData(this.selectedTime);
-        this.chartOptions = this.setChartOptions();
-
-        this.redrawListener = () => {
-            this.chartData = this.setChartData(this.selectedTime);
-            this.chartOptions = this.setChartOptions();
-        };
-
-        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
-        EventBus.on('theme-palette-change', this.redrawListener);
-    },
-    methods: {
-        changeSelect(e) {
-            this.redrawListener();
-        },
-        createDatasets(val) {
-            let data, labels;
-
-            if (val === 'Weekly') {
-                labels = ['6 May', '13 May', '20 May', '27 May', '3 June', '10 June', '17 June', '24 June', '1 July', '8 July', '15 July', '22 July'];
-                data = [
-                    [9000, 3000, 13000, 3000, 5000, 17000, 11000, 4000, 15000, 4000, 11000, 5000],
-                    [1800, 7600, 11100, 6800, 3300, 5800, 3600, 7200, 4300, 8100, 6800, 3700],
-                    [3800, 4800, 2100, 6600, 1000, 3800, 6500, 4200, 4300, 7000, 6800, 3700]
-                ];
-            } else if (val === 'Monthly') {
-                labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-                data = [
-                    [4000, 10000, 15000, 4000, 16000, 8000, 12000, 14000, 17000, 5000, 12000, 6000],
-                    [2100, 8400, 2400, 7500, 3700, 6500, 7400, 8000, 4800, 9000, 7600, 4200],
-                    [4100, 5200, 2400, 7400, 2300, 4100, 7200, 8000, 4800, 9000, 7600, 4200]
-                ];
-            } else if (val === 'Yearly') {
-                labels = ['2019', '2020', '2021', '2022', '2023', '2024'];
-                data = [
-                    [4500, 10500, 15500, 4500, 16500, 8500, 12500, 14500, 17500, 5500, 12500, 6500],
-                    [2250, 8700, 2550, 7650, 3850, 6650, 7650, 8250, 4950, 9250, 7850, 4450],
-                    [4350, 5450, 2650, 7650, 2550, 4350, 7450, 8250, 4950, 9250, 7850, 4450]
-                ];
-            }
-
-            return {
-                data,
-                labels
-            };
-        },
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        },
-        setChartData(timeUnit) {
-            const datasets = this.createDatasets(timeUnit);
-            const documentStyle = getComputedStyle(document.documentElement);
-            const primary200 = documentStyle.getPropertyValue('--p-primary-200');
-            const primary300 = documentStyle.getPropertyValue('--p-primary-300');
-            const primary400 = documentStyle.getPropertyValue('--p-primary-400');
-            const primary500 = documentStyle.getPropertyValue('--p-primary-500');
-            const primary600 = documentStyle.getPropertyValue('--p-primary-600');
-
-            return {
-                labels: datasets.labels,
-                datasets: [
-                    {
-                        type: 'bar',
-                        label: 'Personal Wallet',
-                        backgroundColor: primary400,
-                        hoverBackgroundColor: primary600,
-                        data: datasets.data[0],
-                        barThickness: 32
-                    },
-                    {
-                        type: 'bar',
-                        label: 'Corporate Wallet',
-                        backgroundColor: primary300,
-                        hoverBackgroundColor: primary500,
-                        data: datasets.data[1],
-                        barThickness: 32
-                    },
-                    {
-                        type: 'bar',
-                        label: 'Investment Wallet',
-                        backgroundColor: primary200,
-                        hoverBackgroundColor: primary400,
-                        data: datasets.data[2],
-                        borderRadius: {
-                            topLeft: 8,
-                            topRight: 8
-                        },
-                        borderSkipped: true,
-                        barThickness: 32
-                    }
-                ]
-            };
-        },
-        setChartOptions() {
-            const darkMode = this.$appState.darkTheme;
-            const documentStyle = getComputedStyle(document.documentElement);
-            const surface100 = documentStyle.getPropertyValue('--p-surface-100');
-            const surface900 = documentStyle.getPropertyValue('--p-surface-900');
-            const surface400 = documentStyle.getPropertyValue('--p-surface-400');
-            const surface500 = documentStyle.getPropertyValue('--p-surface-500');
-
-            return {
-                maintainAspectRatio: false,
-                aspectRatio: 0.8,
-                plugins: {
-                    tooltip: {
-                        enabled: false,
-                        position: 'nearest',
-                        external: function (context) {
-                            const { chart, tooltip } = context;
-                            let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
-
-                            if (!tooltipEl) {
-                                tooltipEl = document.createElement('div');
-                                tooltipEl.classList.add(
-                                    'chartjs-tooltip',
-                                    'dark:bg-surface-950',
-                                    'bg-surface-0',
-                                    'p-3',
-                                    'rounded-[8px]',
-                                    'overflow-hidden',
-                                    'opacity-100',
-                                    'absolute',
-                                    'transition-all',
-                                    'duration-[0.1s]',
-                                    'pointer-events-none',
-                                    'shadow-[0px_25px_20px_-5px_rgba(0,0,0,0.10),0px_10px_8px_-6px_rgba(0,0,0,0.10)]'
-                                );
-                                chart.canvas.parentNode.appendChild(tooltipEl);
-                            }
-
-                            if (tooltip.opacity === 0) {
-                                tooltipEl.style.opacity = 0;
-
-                                return;
-                            }
-
-                            const datasetPointsX = tooltip.dataPoints.map((dp) => dp.element.x);
-                            const avgX = datasetPointsX.reduce((a, b) => a + b, 0) / datasetPointsX.length;
-                            const avgY = tooltip.dataPoints[2].element.y;
-
-                            if (tooltip.body) {
-                                tooltipEl.innerHTML = '';
-                                const tooltipBody = document.createElement('div');
-
-                                tooltipBody.classList.add('flex', 'flex-col', 'gap-4', 'px-3', 'py-3', 'min-w-[18rem]');
-                                tooltip.dataPoints.reverse().forEach((body, i) => {
-                                    const row = document.createElement('div');
-
-                                    row.classList.add('flex', 'items-center', 'gap-2', 'w-full');
-                                    const point = document.createElement('div');
-
-                                    point.classList.add('w-2.5', 'h-2.5', 'rounded-full');
-                                    point.style.backgroundColor = body.dataset.backgroundColor;
-                                    row.appendChild(point);
-                                    const label = document.createElement('span');
-
-                                    label.appendChild(document.createTextNode(body.dataset.label));
-                                    label.classList.add('text-base', 'font-medium', 'text-color', 'flex-1', 'text-left', 'capitalize');
-                                    row.appendChild(label);
-                                    const value = document.createElement('span');
-
-                                    value.appendChild(document.createTextNode(body.formattedValue));
-                                    value.classList.add('text-base', 'font-medium', 'text-color', 'text-right');
-                                    row.appendChild(value);
-                                    tooltipBody.appendChild(row);
-                                });
-                                tooltipEl.appendChild(tooltipBody);
-                            }
-
-                            const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
-
-                            tooltipEl.style.opacity = 1;
-                            tooltipEl.style.font = tooltip.options.bodyFont.string;
-                            tooltipEl.style.padding = 0;
-                            const chartWidth = chart.width;
-                            const tooltipWidth = tooltipEl.offsetWidth;
-                            const chartHeight = chart.height;
-                            const tooltipHeight = tooltipEl.offsetHeight;
-
-                            let tooltipX = positionX + avgX + 24;
-                            let tooltipY = avgY;
-
-                            if (tooltipX + tooltipWidth > chartWidth) {
-                                tooltipX = positionX + avgX - tooltipWidth - 20;
-                            }
-
-                            if (tooltipY < 0) {
-                                tooltipY = 0;
-                            } else if (tooltipY + tooltipHeight > chartHeight) {
-                                tooltipY = chartHeight - tooltipHeight;
-                            }
-
-                            tooltipEl.style.left = tooltipX + 'px';
-                            tooltipEl.style.top = tooltipY + 'px';
-                        }
-                    },
-                    legend: {
-                        display: false
-                    }
-                },
-                scales: {
-                    x: {
-                        stacked: true,
-                        ticks: {
-                            color: darkMode ? surface500 : surface400
-                        },
-                        grid: {
-                            display: false,
-                            borderColor: 'transparent'
-                        },
-                        border: {
-                            display: false
-                        }
-                    },
-                    y: {
-                        beginAtZero: true,
-                        stacked: true,
-                        ticks: {
-                            color: darkMode ? surface500 : surface400
-                        },
-                        grid: {
-                            display: true,
-                            color: darkMode ? surface900 : surface100,
-                            borderColor: 'transparent'
-                        },
-                        border: {
-                            display: false
-                        }
-                    }
-                }
-            };
-        }
-    },
-    components: {}
-};
-</script>
diff --git a/apps/labs/components/tutorial/ToggleInputSwitch.vue b/apps/labs/components/tutorial/ToggleInputSwitch.vue
deleted file mode 100644
index 7af7ab77b..000000000
--- a/apps/labs/components/tutorial/ToggleInputSwitch.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-    <div class="flex items-center gap-4">
-        <label :for="$attrs.inputId">{{ label }}</label>
-        <ToggleSwitch v-bind="$attrs" :pt="preset" :ptOptions="{ mergeSections: false, mergeProps: false }" />
-    </div>
-</template>
-
-<script setup>
-defineOptions({
-    inheritAttrs: false
-});
-
-defineProps(['label']);
-
-const preset = {
-    root: ({ props }) => ({
-        class: [
-            'inline-block relative',
-            'w-10 h-6',
-            'rounded-2xl',
-            {
-                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
-            }
-        ]
-    }),
-    slider: ({ props, attrs }) => ({
-        class: [
-            // Position
-            'absolute top-0 left-0 right-0 bottom-0 before:transform',
-            { 'before:transform before:translate-x-4': props.modelValue == props.trueValue },
-
-            // Shape
-            'rounded-2xl',
-
-            // Before:
-            'before:absolute before:top-1/2 before:left-1',
-            'before:-mt-2',
-            'before:h-4 before:w-4',
-            'before:rounded-full',
-            'before:duration-200',
-            {
-                'before:bg-surface-0 before:dark:bg-surface-500': !props.modelValue,
-                'before:bg-violet-500 before:ring-violet-300': !attrs.type & props.modelValue,
-                'before:bg-amber-500 before:ring-amber-300': attrs.type === 'accent' && props.modelValue
-            },
-
-            // Colors
-            'border border-transparent',
-            {
-                'bg-surface-300 dark:bg-surface-800': !props.modelValue,
-                'bg-violet-300': !attrs.type & props.modelValue,
-                'bg-amber-300': attrs.type === 'accent' && props.modelValue
-            },
-
-            // States
-            {
-                'peer-hover:before:bg-surface-400 peer-hover:dark:before:bg-surface-700': !props.modelValue,
-                'peer-hover:before:bg-violet-600': !attrs.type & props.modelValue,
-                'peer-hover:before:bg-amber-600': attrs.type === 'accent' && props.modelValue
-            },
-
-            // Transition
-            'transition-colors duration-200',
-
-            // Misc
-            'cursor-pointer'
-        ]
-    }),
-    input: {
-        class: [
-            'peer',
-
-            // Size
-            'w-full ',
-            'h-full',
-
-            // Position
-            'absolute',
-            'top-0 left-0',
-            'z-10',
-
-            // Spacing
-            'p-0',
-            'm-0',
-
-            // Shape
-            'opacity-0',
-            'rounded-2xl',
-            'outline-none',
-
-            // Misc
-            'appearance-none',
-            'cursor-pointer'
-        ]
-    }
-};
-</script>
diff --git a/apps/labs/doc/accordion/AccessibilityDoc.vue b/apps/labs/doc/accordion/AccessibilityDoc.vue
deleted file mode 100644
index b81696beb..000000000
--- a/apps/labs/doc/accordion/AccessibilityDoc.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Accordion header elements is a <i>button</i> element and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the value
-            of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>pt</i> property.
-        </p>
-        <p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
-
-        <h3>Header Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the next focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Toggles the visibility of the content.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Toggles the visibility of the content.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last header.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/accordion/BasicDoc.vue b/apps/labs/doc/accordion/BasicDoc.vue
deleted file mode 100644
index 5d089978d..000000000
--- a/apps/labs/doc/accordion/BasicDoc.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Accordion is defined using <i>AccordionPanel</i>, <i>AccordionHeader</i> and <i>AccordionContent</i> components. Each AccordionPanel must contain a unique <i>value</i> property to specify the active item.</p>
-    </DocSectionText>
-    <div class="card">
-        <Accordion value="0">
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Accordion value="0">
-    <AccordionPanel value="0">
-        <AccordionHeader>Header I</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="1">
-        <AccordionHeader>Header II</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="2">
-        <AccordionHeader>Header III</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Accordion value="0">
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Accordion value="0">
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/accordion/ControlledDoc.vue b/apps/labs/doc/accordion/ControlledDoc.vue
deleted file mode 100644
index b54eede69..000000000
--- a/apps/labs/doc/accordion/ControlledDoc.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Panels can be controlled programmatically using <i>value</i> property as a model.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex mb-4 gap-2 justify-end">
-            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
-            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
-            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
-        </div>
-
-        <Accordion v-model:value="active">
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: '0',
-            code: {
-                basic: `
-<div class="flex mb-4 gap-2 justify-end">
-    <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
-    <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
-    <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
-</div>
-
-<Accordion v-model:value="active">
-    <AccordionPanel value="0">
-        <AccordionHeader>Header I</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="1">
-        <AccordionHeader>Header II</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="2">
-        <AccordionHeader>Header III</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex mb-4 gap-2 justify-end">
-            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
-            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
-            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
-        </div>
-
-        <Accordion v-model:value="active">
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                active: '0'
-            }
-        }
-    }
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex mb-4 gap-2 justify-end">
-            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
-            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
-            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
-        </div>
-
-        <Accordion v-model:value="active">
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-    import { ref } from 'vue';
-
-    const active = ref('0');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/accordion/DisabledDoc.vue b/apps/labs/doc/accordion/DisabledDoc.vue
deleted file mode 100644
index 3eb98b7b0..000000000
--- a/apps/labs/doc/accordion/DisabledDoc.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enabling <i>disabled</i> property of an AccordionPanel prevents user interaction.</p>
-    </DocSectionText>
-    <div class="card">
-        <Accordion :value="['0']" multiple>
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="3" disabled>
-                <AccordionHeader>Header IV</AccordionHeader>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Accordion :value="['0']" multiple>
-    <AccordionPanel value="0">
-        <AccordionHeader>Header I</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="1">
-        <AccordionHeader>Header II</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="2">
-        <AccordionHeader>Header III</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="3" disabled>
-        <AccordionHeader>Header IV</AccordionHeader>
-    </AccordionPanel>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Accordion :value="['0']" multiple>
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="3" disabled>
-                <AccordionHeader>Header IV</AccordionHeader>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Accordion :value="['0']" multiple>
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="3" disabled>
-                <AccordionHeader>Header IV</AccordionHeader>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/accordion/DynamicDoc.vue b/apps/labs/doc/accordion/DynamicDoc.vue
deleted file mode 100644
index 20bf1eaea..000000000
--- a/apps/labs/doc/accordion/DynamicDoc.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>AccordionPanel can be generated dynamically using the standard <i>v-for</i> directive.</p>
-    </DocSectionText>
-    <div class="card">
-        <Accordion value="0">
-            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
-                <AccordionHeader>{{ tab.title }}</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">{{ tab.content }}</p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: [
-                { title: 'Title 1', content: 'Content 1', value: '0' },
-                { title: 'Title 2', content: 'Content 2', value: '1' },
-                { title: 'Title 3', content: 'Content 3', value: '2' }
-            ],
-            code: {
-                basic: `
-<Accordion value="0">
-    <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
-        <AccordionHeader>{{ tab.title }}</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">{{ tab.content }}</p>
-        </AccordionContent>
-    </AccordionPanel>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Accordion value="0">
-            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
-                <AccordionHeader>{{ tab.title }}</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">{{ tab.content }}</p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: [
-                { title: 'Title 1', content: 'Content 1', value: '0' },
-                { title: 'Title 2', content: 'Content 2', value: '1' },
-                { title: 'Title 3', content: 'Content 3', value: '2' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Accordion value="0">
-            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
-                <AccordionHeader>{{ tab.title }}</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">{{ tab.content }}</p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const tabs = ref([
-    { title: 'Title 1', content: 'Content 1', value: '0' },
-    { title: 'Title 2', content: 'Content 2', value: '1' },
-    { title: 'Title 3', content: 'Content 3', value: '2' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/accordion/ImportDoc.vue b/apps/labs/doc/accordion/ImportDoc.vue
deleted file mode 100644
index 3cd83fa49..000000000
--- a/apps/labs/doc/accordion/ImportDoc.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Accordion from 'primevue/accordion';
-import AccordionPanel from 'primevue/accordionpanel';
-import AccordionHeader from 'primevue/accordionheader';
-import AccordionContent from 'primevue/accordioncontent';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/accordion/MultipleDoc.vue b/apps/labs/doc/accordion/MultipleDoc.vue
deleted file mode 100644
index 4b5d9efe7..000000000
--- a/apps/labs/doc/accordion/MultipleDoc.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Only one tab at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple panels. In this case <i>value</i> needs to be an array.</p>
-    </DocSectionText>
-    <div class="card">
-        <Accordion :value="['0']" multiple>
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Accordion :value="['0']" multiple>
-    <AccordionPanel value="0">
-        <AccordionHeader>Header I</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="1">
-        <AccordionHeader>Header II</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="2">
-        <AccordionHeader>Header III</AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Accordion :value="['0']" multiple>
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Accordion :value="['0']" multiple>
-            <AccordionPanel value="0">
-                <AccordionHeader>Header I</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>Header II</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>Header III</AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/accordion/TemplateDoc.vue b/apps/labs/doc/accordion/TemplateDoc.vue
deleted file mode 100644
index a2db25b6a..000000000
--- a/apps/labs/doc/accordion/TemplateDoc.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Custom content for a header is defined with the default slot. The optional <i>as</i> property controls the default container element of a header, for example setting it to a <i>div</i> renders a div for the header instead of a button. The
-            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own header.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
-            <AccordionPanel value="0">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                        <Badge value="3" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
-                        <Badge value="4" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
-                        <Badge value="2" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
-    <AccordionPanel value="0">
-        <AccordionHeader>
-            <span class="flex items-center gap-2 w-full">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                <Badge value="3" class="ml-auto mr-2" />
-            </span>
-        </AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="1">
-        <AccordionHeader>
-            <span class="flex items-center gap-2 w-full">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                <span class="font-bold whitespace-nowrap">Onyama Limba</span>
-                <Badge value="4" class="ml-auto mr-2" />
-            </span>
-        </AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-    <AccordionPanel value="2">
-        <AccordionHeader>
-            <span class="flex items-center gap-2 w-full">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
-                <Badge value="2" class="ml-auto mr-2" />
-            </span>
-        </AccordionHeader>
-        <AccordionContent>
-            <p class="m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </AccordionContent>
-    </AccordionPanel>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
-            <AccordionPanel value="0">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                        <Badge value="3" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
-                        <Badge value="4" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
-                        <Badge value="2" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
-            <AccordionPanel value="0">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                        <Badge value="3" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="1">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
-                        <Badge value="4" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-            <AccordionPanel value="2">
-                <AccordionHeader>
-                    <span class="flex items-center gap-2 w-full">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
-                        <Badge value="2" class="ml-auto mr-2" />
-                    </span>
-                </AccordionHeader>
-                <AccordionContent>
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </AccordionContent>
-            </AccordionPanel>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/AccessibilityDoc.vue b/apps/labs/doc/autocomplete/AccessibilityDoc.vue
deleted file mode 100644
index 2171f52e5..000000000
--- a/apps/labs/doc/autocomplete/AccessibilityDoc.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
-            <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen
-            reader which option to read during keyboard navigation within the popup list.
-        </p>
-        <p>In multiple mode, chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
-        <p>
-            The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input
-            element.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Closed State Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the autocomplete element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Opens the popup and moves focus to the first option.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Popup Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup, then moves focus to the autocomplete element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageUp</i></td>
-                        <td>Jumps visual focus to first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageDown</i></td>
-                        <td>Jumps visual focus to last option.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Chips Input Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>backspace</i></td>
-                        <td>Deletes the previous chip if the input field is empty.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Moves focus to the previous chip if available and input field is empty.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Chip Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Moves focus to the previous chip if available.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>backspace</i></td>
-                        <td>Deletes the chips and adds focus to the input field.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="ac1">;Username</label>
-<AutoComplete inputId="ac1" />
-
-<span id="ac2">Email</span>
-<AutoComplete aria-labelledby="ac2" />
-
-<AutoComplete aria-label="City" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/BasicDoc.vue b/apps/labs/doc/autocomplete/BasicDoc.vue
deleted file mode 100644
index c46d0f33a..000000000
--- a/apps/labs/doc/autocomplete/BasicDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>AutoComplete is used with the <i>v-model</i> property for two-way value binding. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: [],
-            code: {
-                basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref("");
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/DisabledDoc.vue b/apps/labs/doc/autocomplete/DisabledDoc.vue
deleted file mode 100644
index 7569f53bc..000000000
--- a/apps/labs/doc/autocomplete/DisabledDoc.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete disabled placeholder="Disabled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<AutoComplete disabled placeholder="Disabled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete disabled placeholder="Disabled" />
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete disabled placeholder="Disabled" />
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/DropdownDoc.vue b/apps/labs/doc/autocomplete/DropdownDoc.vue
deleted file mode 100644
index 2f7296cb6..000000000
--- a/apps/labs/doc/autocomplete/DropdownDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using <i>dropdownMode</i> property that takes <strong>blank</strong> or <strong>current</strong> as possible values.
-            <i>blank</i> is the default mode to send a query with an empty string whereas <i>current</i> setting sends a query with the current value of the input.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: [],
-            code: {
-                basic: `
-<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            let _items = [...Array(10).keys()];
-
-            this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref("");
-const items = ref([]);
-
-const search = (event) => {
-    let _items = [...Array(10).keys()];
-
-    items.value = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            let _items = [...Array(10).keys()];
-
-            this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/FilledDoc.vue b/apps/labs/doc/autocomplete/FilledDoc.vue
deleted file mode 100644
index 5523184ff..000000000
--- a/apps/labs/doc/autocomplete/FilledDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: [],
-            code: {
-                basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref("");
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/FloatLabelDoc.vue b/apps/labs/doc/autocomplete/FloatLabelDoc.vue
deleted file mode 100644
index 9788b002d..000000000
--- a/apps/labs/doc/autocomplete/FloatLabelDoc.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: '',
-            items: [],
-            code: {
-                basic: `
-<FloatLabel>
-    <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: '',
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref('');
-const value2 = ref('');
-const value3 = ref('');
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/ForceSelectionDoc.vue b/apps/labs/doc/autocomplete/ForceSelectionDoc.vue
deleted file mode 100644
index 06f534d7c..000000000
--- a/apps/labs/doc/autocomplete/ForceSelectionDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. Simply enable
-            <i>forceSelection</i> to enforce that input is always from the suggestion list.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-    </div>
-    <DocSectionCode :code="code" :service="['CountryService']" />
-</template>
-
-<script>
-import { CountryService } from '@/service/CountryService';
-
-export default {
-    data() {
-        return {
-            countries: null,
-            selectedCountry: null,
-            filteredCountries: null,
-            code: {
-                basic: `
-<AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-    </div>
-</template>
-
-<script>
-import { CountryService } from '@/service/CountryService';
-
-export default {
-    data() {
-        return {
-            countries: null,
-            selectedCountry: null,
-            filteredCountries: null
-        };
-    },
-    mounted() {
-        CountryService.getCountries().then((data) => (this.countries = data));
-    },
-    methods: {
-        search(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                } else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { CountryService } from "@/service/CountryService";
-
-onMounted(() => {
-    CountryService.getCountries().then((data) => (countries.value = data));
-});
-
-const countries = ref();
-const selectedCountry = ref();
-const filteredCountries = ref();
-
-
-const search = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            filteredCountries.value = [...countries.value];
-        } else {
-            filteredCountries.value = countries.value.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-}
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        CountryService.getCountries().then((data) => (this.countries = data));
-    },
-    methods: {
-        search(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                } else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/FormsDoc.vue b/apps/labs/doc/autocomplete/FormsDoc.vue
deleted file mode 100644
index 9307eb5cf..000000000
--- a/apps/labs/doc/autocomplete/FormsDoc.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>AutoComplete integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
-            <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { CountryService } from '@/service/CountryService';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                country: { name: '' }
-            },
-            countries: null,
-            filteredCountries: null,
-            resolver: zodResolver(
-                z.object({
-                    country: z.union([
-                        z.object({
-                            name: z.string().min(1, 'Country is required.')
-                        }),
-                        z.any().refine((val) => false, { message: 'Country is required.' })
-                    ])
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
-    <div class="flex flex-col gap-1">
-        <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-        <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
-            <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-        <Toast />
-    </div>
-</template>
-
-<script>
-import { CountryService } from '@/service/CountryService';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                country: { name: '' }
-            },
-            countries: null,
-            filteredCountries: null,
-            resolver: zodResolver(
-                z.object({
-                    country: z.union([
-                        z.object({
-                            name: z.string().min(1, 'Country is required.')
-                        }),
-                        z.any().refine((val) => false, { message: 'Country is required.' })
-                    ])
-                })
-            )
-        }
-    },
-    mounted() {
-        CountryService.getCountries().then((data) => (this.countries = data));
-    },
-    methods: {
-        search(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                } else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        },
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
-            <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-import { CountryService } from "@/service/CountryService";
-
-onMounted(() => {
-    CountryService.getCountries().then((data) => (countries.value = data));
-});
-
-const initialValues = ref({
-    country: { name: '' }
-});
-const resolver = ref(zodResolver(
-    z.object({
-        country: z.union([
-            z.object({
-                name: z.string().min(1, 'Country is required.')
-            }),
-            z.any().refine((val) => false, { message: 'Country is required.' })
-        ])
-    })
-));
-const countries = ref();
-const selectedCountry = ref();
-const filteredCountries = ref();
-const toast = useToast();
-
-const search = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            filteredCountries.value = [...countries.value];
-        } else {
-            filteredCountries.value = countries.value.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-};
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    mounted() {
-        CountryService.getCountries().then((data) => (this.countries = data));
-    },
-    methods: {
-        search(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                } else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        },
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/GroupDoc.vue b/apps/labs/doc/autocomplete/GroupDoc.vue
deleted file mode 100644
index 287a72674..000000000
--- a/apps/labs/doc/autocomplete/GroupDoc.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Option groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center country-item">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </AutoComplete>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-import { FilterMatchMode, FilterService } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            cities: null,
-            selectedCity: null,
-            filteredCities: null,
-            groupedCities: [
-                {
-                    label: 'Germany',
-                    code: 'DE',
-                    items: [
-                        { label: 'Berlin', value: 'Berlin' },
-                        { label: 'Frankfurt', value: 'Frankfurt' },
-                        { label: 'Hamburg', value: 'Hamburg' },
-                        { label: 'Munich', value: 'Munich' }
-                    ]
-                },
-                {
-                    label: 'USA',
-                    code: 'US',
-                    items: [
-                        { label: 'Chicago', value: 'Chicago' },
-                        { label: 'Los Angeles', value: 'Los Angeles' },
-                        { label: 'New York', value: 'New York' },
-                        { label: 'San Francisco', value: 'San Francisco' }
-                    ]
-                },
-                {
-                    label: 'Japan',
-                    code: 'JP',
-                    items: [
-                        { label: 'Kyoto', value: 'Kyoto' },
-                        { label: 'Osaka', value: 'Osaka' },
-                        { label: 'Tokyo', value: 'Tokyo' },
-                        { label: 'Yokohama', value: 'Yokohama' }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
-    <template #optiongroup="slotProps">
-        <div class="flex items-center country-item">
-            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-            <div>{{ slotProps.option.label }}</div>
-        </div>
-    </template>
-</AutoComplete>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center country-item">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </AutoComplete>
-    </div>
-</template>
-
-<script>
-import { FilterMatchMode, FilterService } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            cities: null,
-            selectedCity: null,
-            filteredCities: null,
-            groupedCities: [
-                {
-                    label: 'Germany',
-                    code: 'DE',
-                    items: [
-                        { label: 'Berlin', value: 'Berlin' },
-                        { label: 'Frankfurt', value: 'Frankfurt' },
-                        { label: 'Hamburg', value: 'Hamburg' },
-                        { label: 'Munich', value: 'Munich' }
-                    ]
-                },
-                {
-                    label: 'USA',
-                    code: 'US',
-                    items: [
-                        { label: 'Chicago', value: 'Chicago' },
-                        { label: 'Los Angeles', value: 'Los Angeles' },
-                        { label: 'New York', value: 'New York' },
-                        { label: 'San Francisco', value: 'San Francisco' }
-                    ]
-                },
-                {
-                    label: 'Japan',
-                    code: 'JP',
-                    items: [
-                        { label: 'Kyoto', value: 'Kyoto' },
-                        { label: 'Osaka', value: 'Osaka' },
-                        { label: 'Tokyo', value: 'Tokyo' },
-                        { label: 'Yokohama', value: 'Yokohama' }
-                    ]
-                }
-            ]
-        };
-    },
-    methods: {
-        search(event) {
-            let query = event.query;
-            let filteredCities = [];
-
-            for (let country of this.groupedCities) {
-                let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
-
-                if (filteredItems && filteredItems.length) {
-                    filteredCities.push({ ...country, ...{ items: filteredItems } });
-                }
-            }
-
-            this.filteredCities = filteredCities;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center country-item">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </AutoComplete>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { FilterMatchMode, FilterService } from '@primevue/core/api';
-
-const cities = ref();
-const selectedCity = ref();
-const filteredCities = ref();
-const groupedCities = ref([
-    {
-        label: 'Germany',
-        code: 'DE',
-        items: [
-            { label: 'Berlin', value: 'Berlin' },
-            { label: 'Frankfurt', value: 'Frankfurt' },
-            { label: 'Hamburg', value: 'Hamburg' },
-            { label: 'Munich', value: 'Munich' }
-        ]
-    },
-    {
-        label: 'USA',
-        code: 'US',
-        items: [
-            { label: 'Chicago', value: 'Chicago' },
-            { label: 'Los Angeles', value: 'Los Angeles' },
-            { label: 'New York', value: 'New York' },
-            { label: 'San Francisco', value: 'San Francisco' }
-        ]
-    },
-    {
-        label: 'Japan',
-        code: 'JP',
-        items: [
-            { label: 'Kyoto', value: 'Kyoto' },
-            { label: 'Osaka', value: 'Osaka' },
-            { label: 'Tokyo', value: 'Tokyo' },
-            { label: 'Yokohama', value: 'Yokohama' }
-        ]
-    }
-]);
-
-const search = (event) => {
-    let query = event.query;
-    let newFilteredCities = [];
-
-    for (let country of groupedCities.value) {
-        let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
-        if (filteredItems && filteredItems.length) {
-            newFilteredCities.push({...country, ...{items: filteredItems}});
-        }
-    }
-
-    filteredCities.value = newFilteredCities;
-
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            let query = event.query;
-            let filteredCities = [];
-
-            for (let country of this.groupedCities) {
-                let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
-
-                if (filteredItems && filteredItems.length) {
-                    filteredCities.push({ ...country, ...{ items: filteredItems } });
-                }
-            }
-
-            this.filteredCities = filteredCities;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/IftaLabelDoc.vue b/apps/labs/doc/autocomplete/IftaLabelDoc.vue
deleted file mode 100644
index ad680907a..000000000
--- a/apps/labs/doc/autocomplete/IftaLabelDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
-            <label for="ac">Identifier</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: [],
-            code: {
-                basic: `
-<IftaLabel>
-    <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
-    <label for="ac">Identifier</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
-            <label for="ac">Identifier</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
-            <label for="ac">Identifier</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref("");
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/ImportDoc.vue b/apps/labs/doc/autocomplete/ImportDoc.vue
deleted file mode 100644
index 5b15f713b..000000000
--- a/apps/labs/doc/autocomplete/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import AutoComplete from 'primevue/autocomplete';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/InvalidDoc.vue b/apps/labs/doc/autocomplete/InvalidDoc.vue
deleted file mode 100644
index 2ecd4aa66..000000000
--- a/apps/labs/doc/autocomplete/InvalidDoc.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            items: [],
-            code: {
-                basic: `
-<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
-<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-                value2: '',
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref('');
-const value2 = ref('');
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/MultipleDoc.vue b/apps/labs/doc/autocomplete/MultipleDoc.vue
deleted file mode 100644
index f870122f2..000000000
--- a/apps/labs/doc/autocomplete/MultipleDoc.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
-    </DocSectionText>
-    <div class="card">
-        <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
-        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
-
-        <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            items: [],
-            code: {
-                basic: `
-<label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
-<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
-
-<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
-        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
-
-        <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
-        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
-
-        <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(null);
-const value2 = ref(null);
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/ObjectsDoc.vue b/apps/labs/doc/autocomplete/ObjectsDoc.vue
deleted file mode 100644
index eee29856b..000000000
--- a/apps/labs/doc/autocomplete/ObjectsDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            AutoComplete can work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
-            Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-    </div>
-    <DocSectionCode :code="code" :service="['CountryService']" />
-</template>
-
-<script>
-import { CountryService } from '@/service/CountryService';
-
-export default {
-    data() {
-        return {
-            countries: null,
-            selectedCountry: null,
-            filteredCountries: null,
-            code: {
-                basic: `
-<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-    </div>
-</template>
-
-<script>
-import { CountryService } from '@/service/CountryService';
-
-export default {
-    data() {
-        return {
-            countries: null,
-            selectedCountry: null,
-            filteredCountries: null
-        };
-    },
-    mounted() {
-        CountryService.getCountries().then((data) => (this.countries = data));
-    },
-    methods: {
-        search(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                } else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { CountryService } from "@/service/CountryService";
-
-onMounted(() => {
-    CountryService.getCountries().then((data) => (countries.value = data));
-});
-
-const countries = ref();
-const selectedCountry = ref();
-const filteredCountries = ref();
-
-
-const search = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            filteredCountries.value = [...countries.value];
-        } else {
-            filteredCountries.value = countries.value.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-}
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        CountryService.getCountries().then((data) => (this.countries = data));
-    },
-    methods: {
-        search(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                } else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/SizesDoc.vue b/apps/labs/doc/autocomplete/SizesDoc.vue
deleted file mode 100644
index 52f6cdcc8..000000000
--- a/apps/labs/doc/autocomplete/SizesDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>AutoComplete provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
-        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            items: [],
-            code: {
-                basic: `
-<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
-<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
-<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
-        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            items: [],
-        };
-    },
-    methods: {
-        search() {
-            this.items = [];
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
-        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const items = ref([]);
-
-const search = () => {
-    items.value = [];
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search() {
-            this.items = [];
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/TemplateDoc.vue b/apps/labs/doc/autocomplete/TemplateDoc.vue
deleted file mode 100644
index 293431d6f..000000000
--- a/apps/labs/doc/autocomplete/TemplateDoc.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>AutoComplete offers multiple slots for customization through templating.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="px-3 py-2">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </AutoComplete>
-    </div>
-    <DocSectionCode :code="code" :service="['CountryService']" />
-</template>
-
-<script>
-import { CountryService } from '@/service/CountryService';
-export default {
-    data() {
-        return {
-            selectedCountry: null,
-            countries: null,
-            filteredCountries: null,
-            code: {
-                basic: `
-<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
-    <template #option="slotProps">
-        <div class="flex items-center">
-            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-            <div>{{ slotProps.option.name }}</div>
-        </div>
-    </template>
-    <template #header>
-        <div class="font-medium px-3 py-2">Available Countries</div>
-    </template>
-    <template #footer>
-        <div class="px-3 py-3">
-            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-        </div>
-    </template>
-</AutoComplete>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="px-3 py-3">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </AutoComplete>
-    </div>
-</template>
-
-<script>
-import { CountryService } from '@/service/CountryService';
-
-export default {
-    data() {
-        return {
-            countries: null,
-            selectedCountry: null,
-            filteredCountries: null
-        };
-    },
-    mounted() {
-        CountryService.getCountries().then((data) => (this.countries = data));
-    },
-    methods: {
-        search(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                } else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="px-3 py-3">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </AutoComplete>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { CountryService } from "@/service/CountryService";
-
-onMounted(() => {
-    CountryService.getCountries().then((data) => (countries.value = data));
-});
-
-const countries = ref();
-const selectedCountry = ref();
-const filteredCountries = ref();
-
-
-const search = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            filteredCountries.value = [...countries.value];
-        } else {
-            filteredCountries.value = countries.value.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-}
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        CountryService.getCountries().then((data) => (this.countries = data));
-    },
-    methods: {
-        search(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                } else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/autocomplete/VirtualScrollDoc.vue b/apps/labs/doc/autocomplete/VirtualScrollDoc.vue
deleted file mode 100644
index 1f92f6d5c..000000000
--- a/apps/labs/doc/autocomplete/VirtualScrollDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Virtual Scrolling is a performant way to render large lists. Configuration of the scroll behavior is defined with <i>virtualScrollerOptions</i> that requires <i>itemSize</i> as the mandatory value to set the height of an item. Visit
-            <PrimeVueNuxtLink to="/virtualscroller">VirtualScroller</PrimeVueNuxtLink> documentation for more information about the configuration API.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
-            selectedItem: null,
-            filteredItems: null,
-            code: {
-                basic: `
-<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
-    :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
-            selectedItem: null,
-            filteredItems: null,
-        };
-    },
-    methods: {
-        searchItems(event) {
-            //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
-            let query = event.query;
-            let _filteredItems = [];
-
-            for (let i = 0; i < this.items.length; i++) {
-                let item = this.items[i];
-
-                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
-                    _filteredItems.push(item);
-                }
-            }
-
-            this.filteredItems = _filteredItems;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
-const selectedItem = ref();
-const filteredItems = ref();
-const searchItems = (event) => {
-    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
-    let query = event.query;
-    let _filteredItems = [];
-
-    for (let i = 0; i < items.value.length; i++) {
-        let item = items.value[i];
-
-        if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
-            _filteredItems.push(item);
-        }
-    }
-
-    filteredItems.value = _filteredItems;
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        searchItems(event) {
-            //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
-            let query = event.query;
-            let _filteredItems = [];
-
-            for (let i = 0; i < this.items.length; i++) {
-                let item = this.items[i];
-
-                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
-                    _filteredItems.push(item);
-                }
-            }
-
-            this.filteredItems = _filteredItems;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/avatar/AccessibilityDoc.vue b/apps/labs/doc/avatar/AccessibilityDoc.vue
deleted file mode 100644
index 366f0034f..000000000
--- a/apps/labs/doc/avatar/AccessibilityDoc.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
-            avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/avatar/AvatarGroupDoc.vue b/apps/labs/doc/avatar/AvatarGroupDoc.vue
deleted file mode 100644
index ee145fd3b..000000000
--- a/apps/labs/doc/avatar/AvatarGroupDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
-            <Avatar label="+2" shape="circle" />
-        </AvatarGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<AvatarGroup>
-    <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-    <Avatar image="/images/avatar/asiyajavayant.png" shape="circle" />
-    <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
-    <Avatar image="/images/avatar/ionibowcher.png" shape="circle" />
-    <Avatar image="/images/avatar/xuxuefeng.png" shape="circle" />
-    <Avatar label="+2" shape="circle" />
-</AvatarGroup>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
-            <Avatar label="+2" shape="circle" />
-        </AvatarGroup>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
-            <Avatar label="+2" shape="circle" />
-        </AvatarGroup>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/avatar/IconDoc.vue b/apps/labs/doc/avatar/IconDoc.vue
deleted file mode 100644
index 9b2a72236..000000000
--- a/apps/labs/doc/avatar/IconDoc.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap gap-8">
-            <div class="flex-auto">
-                <h5>Icon</h5>
-                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
-                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Circle</h5>
-                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Badge</h5>
-                <OverlayBadge value="4" severity="danger" class="inline-flex">
-                    <Avatar icon="pi pi-user" size="xlarge" />
-                </OverlayBadge>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
-<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
-<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
-
-<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
-<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
-
-<OverlayBadge value="4" severity="danger" class="inline-flex">
-    <Avatar icon="pi pi-user" size="xlarge" />
-</OverlayBadge>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-8">
-            <div class="flex-auto">
-                <h5>Icon</h5>
-                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
-                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Circle</h5>
-                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Badge</h5>
-                <OverlayBadge value="4" severity="danger" class="inline-flex">
-                    <Avatar icon="pi pi-user" size="xlarge" />
-                </OverlayBadge>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-8">
-            <div class="flex-auto">
-                <h5>Icon</h5>
-                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
-                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Circle</h5>
-                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Badge</h5>
-                <OverlayBadge value="4" severity="danger" class="inline-flex">
-                    <Avatar icon="pi pi-user" size="xlarge" />
-                </OverlayBadge>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/avatar/ImageDoc.vue b/apps/labs/doc/avatar/ImageDoc.vue
deleted file mode 100644
index 0fd189127..000000000
--- a/apps/labs/doc/avatar/ImageDoc.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Use the <i>image</i> property to display an image as an Avatar.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap gap-8">
-            <div class="flex-auto">
-                <h5>Image</h5>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Badge</h5>
-                <OverlayBadge value="4" severity="danger" class="inline-flex">
-                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
-                </OverlayBadge>
-            </div>
-
-            <div class="flex-auto">
-                <h5>Gravatar</h5>
-                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
-<Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
-<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
-
-<OverlayBadge value="4" severity="danger" class="inline-flex">
-    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
-</OverlayBadge>
-
-<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-8">
-            <div class="flex-auto">
-                <h5>Image</h5>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Badge</h5>
-                <OverlayBadge value="4" severity="danger" class="inline-flex">
-                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
-                </OverlayBadge>
-            </div>
-
-            <div class="flex-auto">
-                <h5>Gravatar</h5>
-                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-8">
-            <div class="flex-auto">
-                <h5>Image</h5>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Badge</h5>
-                <OverlayBadge value="4" severity="danger" class="inline-flex">
-                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
-                </OverlayBadge>
-            </div>
-
-            <div class="flex-auto">
-                <h5>Gravatar</h5>
-                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/avatar/ImportDoc.vue b/apps/labs/doc/avatar/ImportDoc.vue
deleted file mode 100644
index efe8f6619..000000000
--- a/apps/labs/doc/avatar/ImportDoc.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Avatar from 'primevue/avatar';
-import AvatarGroup from 'primevue/avatargroup';   //Optional for grouping
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/avatar/LabelDoc.vue b/apps/labs/doc/avatar/LabelDoc.vue
deleted file mode 100644
index 73f399b10..000000000
--- a/apps/labs/doc/avatar/LabelDoc.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A letter Avatar is defined with the <i>label</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap gap-8">
-            <div class="flex-auto">
-                <h5>Label</h5>
-                <Avatar label="P" class="mr-2" size="xlarge" />
-                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
-                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Circle</h5>
-                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
-            </div>
-
-            <div class="flex-auto">
-                <h5>Badge</h5>
-                <OverlayBadge value="4" severity="danger" class="inline-flex">
-                    <Avatar label="U" size="xlarge" />
-                </OverlayBadge>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Avatar label="P" class="mr-2" size="xlarge" />
-<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
-<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
-
-<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
-<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
-
-<OverlayBadge value="4" severity="danger" class="inline-flex">
-    <Avatar label="U" size="xlarge" />
-</OverlayBadge>
-`,
-                options: `
-<template>
-    <div class="flex flex-wrap gap-8">
-        <div class="flex-auto">
-            <h5>Label</h5>
-            <Avatar label="P" class="mr-2" size="xlarge" />
-            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
-            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
-        </div>
-
-        <div class="flex-auto">
-            <h5>Circle</h5>
-            <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
-            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
-        </div>
-
-        <div class="flex-auto">
-            <h5>Badge</h5>
-            <OverlayBadge value="4" severity="danger" class="inline-flex">
-                <Avatar label="U" size="xlarge" />
-            </OverlayBadge>
-        </div>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="flex flex-wrap gap-8">
-        <div class="flex-auto">
-            <h5>Label</h5>
-            <Avatar label="P" class="mr-2" size="xlarge" />
-            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
-            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
-        </div>
-
-        <div class="flex-auto">
-            <h5>Circle</h5>
-            <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
-            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
-            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
-        </div>
-
-        <div class="flex-auto">
-            <h5>Badge</h5>
-            <OverlayBadge value="4" severity="danger" class="inline-flex">
-                <Avatar label="U" size="xlarge" />
-            </OverlayBadge>
-        </div>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/badge/AccessibilityDoc.vue b/apps/labs/doc/badge/AccessibilityDoc.vue
deleted file mode 100644
index d6fc47e23..000000000
--- a/apps/labs/doc/badge/AccessibilityDoc.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
-            <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/badge/BasicDoc.vue b/apps/labs/doc/badge/BasicDoc.vue
deleted file mode 100644
index ea02a9773..000000000
--- a/apps/labs/doc/badge/BasicDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Text to display is defined with the <i>value</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Badge value="2"></Badge>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Badge value="2"></Badge>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Badge value="2"></Badge>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Badge value="2"></Badge>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/badge/ButtonDoc.vue b/apps/labs/doc/badge/ButtonDoc.vue
deleted file mode 100644
index ed48c9969..000000000
--- a/apps/labs/doc/badge/ButtonDoc.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Buttons have built-in support for badges to display a badge inline.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
-        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
-<Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
-        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
-        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/badge/ImportDoc.vue b/apps/labs/doc/badge/ImportDoc.vue
deleted file mode 100644
index 234e72a8b..000000000
--- a/apps/labs/doc/badge/ImportDoc.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-// import as component
-import Badge from 'primevue/badge';
-import OverlayBadge from 'primevue/overlaybadge';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/badge/OverlayDoc.vue b/apps/labs/doc/badge/OverlayDoc.vue
deleted file mode 100644
index c6da655e5..000000000
--- a/apps/labs/doc/badge/OverlayDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A badge can be added to any element by encapsulating the content with the <i>OverlayBadge</i> component.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-6">
-        <OverlayBadge value="2">
-            <i class="pi pi-bell" style="font-size: 2rem" />
-        </OverlayBadge>
-        <OverlayBadge value="4" severity="danger">
-            <i class="pi pi-calendar" style="font-size: 2rem" />
-        </OverlayBadge>
-        <OverlayBadge severity="danger">
-            <i class="pi pi-envelope" style="font-size: 2rem" />
-        </OverlayBadge>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<OverlayBadge value="2">
-    <i class="pi pi-bell" style="font-size: 2rem" />
-</OverlayBadge>
-<OverlayBadge value="4" severity="danger">
-    <i class="pi pi-calendar" style="font-size: 2rem" />
-</OverlayBadge>
-<OverlayBadge severity="danger">
-    <i class="pi pi-envelope" style="font-size: 2rem" />
-</OverlayBadge>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-6">
-        <OverlayBadge value="2">
-            <i class="pi pi-bell" style="font-size: 2rem" />
-        </OverlayBadge>
-        <OverlayBadge value="4" severity="danger">
-            <i class="pi pi-calendar" style="font-size: 2rem" />
-        </OverlayBadge>
-        <OverlayBadge severity="danger">
-            <i class="pi pi-envelope" style="font-size: 2rem" />
-        </OverlayBadge>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-6">
-        <OverlayBadge value="2">
-            <i class="pi pi-bell" style="font-size: 2rem" />
-        </OverlayBadge>
-        <OverlayBadge value="4" severity="danger">
-            <i class="pi pi-calendar" style="font-size: 2rem" />
-        </OverlayBadge>
-        <OverlayBadge severity="danger">
-            <i class="pi pi-envelope" style="font-size: 2rem" />
-        </OverlayBadge>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/badge/SeverityDoc.vue b/apps/labs/doc/badge/SeverityDoc.vue
deleted file mode 100644
index f1e8b9801..000000000
--- a/apps/labs/doc/badge/SeverityDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Severity defines the variant of a badge.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Badge value="2"></Badge>
-        <Badge value="6" severity="secondary"></Badge>
-        <Badge value="8" severity="success"></Badge>
-        <Badge value="4" severity="info"></Badge>
-        <Badge value="9" severity="warn"></Badge>
-        <Badge value="3" severity="danger"></Badge>
-        <Badge value="5" severity="contrast"></Badge>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Badge value="2"></Badge>
-<Badge value="6" severity="secondary"></Badge>
-<Badge value="8" severity="success"></Badge>
-<Badge value="4" severity="info"></Badge>
-<Badge value="9" severity="warn"></Badge>
-<Badge value="3" severity="danger"></Badge>
-<Badge value="5" severity="contrast"></Badge>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Badge value="2"></Badge>
-        <Badge value="6" severity="secondary"></Badge>
-        <Badge value="8" severity="success"></Badge>
-        <Badge value="4" severity="info"></Badge>
-        <Badge value="9" severity="warn"></Badge>
-        <Badge value="3" severity="danger"></Badge>
-        <Badge value="5" severity="contrast"></Badge>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Badge value="2"></Badge>
-        <Badge value="6" severity="secondary"></Badge>
-        <Badge value="8" severity="success"></Badge>
-        <Badge value="4" severity="info"></Badge>
-        <Badge value="9" severity="warn"></Badge>
-        <Badge value="3" severity="danger"></Badge>
-        <Badge value="5" severity="contrast"></Badge>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/badge/SizeDoc.vue b/apps/labs/doc/badge/SizeDoc.vue
deleted file mode 100644
index a06fdf6ef..000000000
--- a/apps/labs/doc/badge/SizeDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Use the <i>size</i> property to customize the dimensions of a Badge.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-2">
-        <Badge value="8" size="xlarge" severity="success"></Badge>
-        <Badge value="6" size="large" severity="warn"></Badge>
-        <Badge value="4" severity="info"></Badge>
-        <Badge value="2" size="small"></Badge>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Badge value="8" size="xlarge" severity="success"></Badge>
-<Badge value="6" size="large" severity="warn"></Badge>
-<Badge value="4" severity="info"></Badge>
-<Badge value="2" size="small"></Badge>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-2">
-        <Badge value="8" size="xlarge" severity="success"></Badge>
-        <Badge value="6" size="large" severity="warn"></Badge>
-        <Badge value="4" severity="info"></Badge>
-        <Badge value="2" size="small"></Badge>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-2">
-        <Badge value="8" size="xlarge" severity="success"></Badge>
-        <Badge value="6" size="large" severity="warn"></Badge>
-        <Badge value="4" severity="info"></Badge>
-        <Badge value="2" size="small"></Badge>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/blockui/AccessibilityDoc.vue b/apps/labs/doc/blockui/AccessibilityDoc.vue
deleted file mode 100644
index 7a9adaa4c..000000000
--- a/apps/labs/doc/blockui/AccessibilityDoc.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/blockui/BasicDoc.vue b/apps/labs/doc/blockui/BasicDoc.vue
deleted file mode 100644
index 88478ed87..000000000
--- a/apps/labs/doc/blockui/BasicDoc.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="mb-4">
-            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
-            <Button label="Unblock" @click="blocked = false"></Button>
-        </div>
-        <BlockUI :blocked="blocked">
-            <Panel header="Basic">
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </Panel>
-        </BlockUI>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            blocked: false,
-            code: {
-                basic: `
-<div class="mb-4">
-    <Button label="Block" @click="blocked = true" class="mr-2"></Button>
-    <Button label="Unblock" @click="blocked = false"></Button>
-</div>
-<BlockUI :blocked="blocked">
-    <Panel header="Basic">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </Panel>
-</BlockUI>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="mb-4">
-            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
-            <Button label="Unblock" @click="blocked = false"></Button>
-        </div>
-        <BlockUI :blocked="blocked">
-            <Panel header="Basic">
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </Panel>
-        </BlockUI>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            blocked: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="mb-4">
-            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
-            <Button label="Unblock" @click="blocked = false"></Button>
-        </div>
-        <BlockUI :blocked="blocked">
-            <Panel header="Basic">
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </Panel>
-        </BlockUI>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const blocked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/blockui/DocumentDoc.vue b/apps/labs/doc/blockui/DocumentDoc.vue
deleted file mode 100644
index 5004afa40..000000000
--- a/apps/labs/doc/blockui/DocumentDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enabling <i>fullScreen</i> property controls the document.</p>
-    </DocSectionText>
-    <div class="card">
-        <BlockUI :blocked="blocked" fullScreen />
-        <Button label="Block" @click="blockDocument" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            blocked: false,
-            code: {
-                basic: `
-<BlockUI :blocked="blocked" fullScreen />
-<Button label="Block" @click="blocked = true" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <BlockUI :blocked="blocked" fullScreen />
-        <Button label="Block" @click="blockDocument" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            blocked: false
-        }
-    },
-    methods: {
-        blockDocument() {
-            this.blocked = true;
-
-            setTimeout(() => {
-                this.blocked = false;
-            }, 3000);
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <BlockUI :blocked="blocked" fullScreen />
-        <Button label="Block" @click="blockDocument" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const blocked = ref(false);
-const blockDocument = () => {
-    blocked.value = true;
-
-    setTimeout(() => {
-        blocked.value = false;
-    }, 3000);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        blockDocument() {
-            this.blocked = true;
-
-            setTimeout(() => {
-                this.blocked = false;
-            }, 3000);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/blockui/ImportDoc.vue b/apps/labs/doc/blockui/ImportDoc.vue
deleted file mode 100644
index 07a04631d..000000000
--- a/apps/labs/doc/blockui/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import BlockUI from 'primevue/blockui';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/breadcrumb/AccessibilityDoc.vue b/apps/labs/doc/breadcrumb/AccessibilityDoc.vue
deleted file mode 100644
index 3368f258f..000000000
--- a/apps/labs/doc/breadcrumb/AccessibilityDoc.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
-            separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/breadcrumb/BasicDoc.vue b/apps/labs/doc/breadcrumb/BasicDoc.vue
deleted file mode 100644
index b839de05a..000000000
--- a/apps/labs/doc/breadcrumb/BasicDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Breadcrumb requires a collection of menuitems as its <i>model</i>, the root item is defined with the <i>home</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home'
-            },
-            items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
-            code: {
-                basic: `
-<Breadcrumb :home="home" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home'
-            },
-            items: [
-                { label: 'Electronics' }, 
-                { label: 'Computer' }, 
-                { label: 'Accessories' }, 
-                { label: 'Keyboard' }, 
-                { label: 'Wireless' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const home = ref({
-    icon: 'pi pi-home'
-});
-const items = ref([
-    { label: 'Electronics' }, 
-    { label: 'Computer' }, 
-    { label: 'Accessories' }, 
-    { label: 'Keyboard' }, 
-    { label: 'Wireless' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/breadcrumb/ImportDoc.vue b/apps/labs/doc/breadcrumb/ImportDoc.vue
deleted file mode 100644
index 201dc0bbf..000000000
--- a/apps/labs/doc/breadcrumb/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Breadcrumb from 'primevue/breadcrumb';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/breadcrumb/RouterDoc.vue b/apps/labs/doc/breadcrumb/RouterDoc.vue
deleted file mode 100644
index 5750446f9..000000000
--- a/apps/labs/doc/breadcrumb/RouterDoc.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="[item.icon, 'text-color']" />
-                        <span class="text-primary font-semibold">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
-                </a>
-            </template>
-        </Breadcrumb>
-    </div>
-    <DocSectionCode :code="code" hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home',
-                route: '/slider'
-            },
-            items: [{ label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }],
-            code: {
-                basic: `
-<Breadcrumb :home="home" :model="items">
-    <template #item="{ item, props }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a :href="href" v-bind="props.action" @click="navigate">
-                <span :class="[item.icon, 'text-color']" />
-                <span class="text-primary font-semibold">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-            <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
-        </a>
-    </template>
-</Breadcrumb>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="[item.icon, 'text-color']" />
-                        <span class="text-primary font-semibold">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
-                </a>
-            </template>
-        </Breadcrumb>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home',
-                route: '/slider'
-            },
-            items: [
-                { label: 'Components' },
-                { label: 'Form' },
-                { label: 'InputText', route: '/inputtext' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="[item.icon, 'text-color']" />
-                        <span class="text-primary font-semibold">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
-                </a>
-            </template>
-        </Breadcrumb>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const home = ref({
-    icon: 'pi pi-home',
-    route: '/slider'
-});
-const items = ref([
-    { label: 'Components' },
-    { label: 'Form' },
-    { label: 'InputText', route: '/inputtext' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/breadcrumb/TemplateDoc.vue b/apps/labs/doc/breadcrumb/TemplateDoc.vue
deleted file mode 100644
index 166a75fe5..000000000
--- a/apps/labs/doc/breadcrumb/TemplateDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content can be placed inside the items using the <i>item</i> template. The divider between the items has its own <i>separator</i> template.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items">
-            <template #item="{ item }">
-                <a class="cursor-pointer" :href="item.url">
-                    <span :class="item.icon"></span>
-                </a>
-            </template>
-            <template #separator> / </template>
-        </Breadcrumb>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: { icon: 'pi pi-home' },
-            items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }],
-            code: {
-                basic: `
-<Breadcrumb :home="home" :model="items">
-    <template #item="{ item }">
-        <a class="cursor-pointer" :href="item.url">
-            <span :class="item.icon"></span>
-        </a>
-    </template>
-    <template #separator> / </template>
-</Breadcrumb>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items">
-            <template #item="{ item }">
-                <a class="cursor-pointer" :href="item.url">
-                    <span :class="item.icon"></span>
-                </a>
-            </template>
-            <template #separator> / </template>
-        </Breadcrumb>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: { icon: 'pi pi-home' },
-            items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items">
-            <template #item="{ item }">
-                <a class="cursor-pointer" :href="item.url">
-                    <span :class="item.icon"></span>
-                </a>
-            </template>
-            <template #separator> / </template>
-        </Breadcrumb>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const home = ref({ icon: 'pi pi-home' });
-const items = ref([{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/AccessibilityDoc.vue b/apps/labs/doc/button/AccessibilityDoc.vue
deleted file mode 100644
index 208f2ba89..000000000
--- a/apps/labs/doc/button/AccessibilityDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
-            icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the button.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Activates the button.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Activates the button.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button icon="pi pi-check" aria-label="Submit" />
-
-<Button icon="pi pi-check" label="Submit" />
-
-<Button class="youtube p-0" aria-label="Youtube">
-    <i class="pi pi-youtube px-2"></i>
-    <span class="px-4">Youtube</span>
-</Button>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/BadgeDoc.vue b/apps/labs/doc/button/BadgeDoc.vue
deleted file mode 100644
index 588cf03e9..000000000
--- a/apps/labs/doc/button/BadgeDoc.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Emails" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button type="button" label="Emails" badge="2" />
-<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Emails" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Emails" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/BasicDoc.vue b/apps/labs/doc/button/BasicDoc.vue
deleted file mode 100644
index 29ddf9822..000000000
--- a/apps/labs/doc/button/BasicDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Submit" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/ButtonGroupDoc.vue b/apps/labs/doc/button/ButtonGroupDoc.vue
deleted file mode 100644
index 6511c3a74..000000000
--- a/apps/labs/doc/button/ButtonGroupDoc.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ButtonGroup>
-            <Button label="Save" icon="pi pi-check" />
-            <Button label="Delete" icon="pi pi-trash" />
-            <Button label="Cancel" icon="pi pi-times" />
-        </ButtonGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ButtonGroup>
-    <Button label="Save" icon="pi pi-check" />
-    <Button label="Delete" icon="pi pi-trash" />
-    <Button label="Cancel" icon="pi pi-times" />
-</ButtonGroup>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ButtonGroup>
-            <Button label="Save" icon="pi pi-check" />
-            <Button label="Delete" icon="pi pi-trash" />
-            <Button label="Cancel" icon="pi pi-times" />
-        </ButtonGroup>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ButtonGroup>
-            <Button label="Save" icon="pi pi-check" />
-            <Button label="Delete" icon="pi pi-trash" />
-            <Button label="Cancel" icon="pi pi-times" />
-        </ButtonGroup>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/DisabledDoc.vue b/apps/labs/doc/button/DisabledDoc.vue
deleted file mode 100644
index 7699ec631..000000000
--- a/apps/labs/doc/button/DisabledDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be used.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Submit" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Submit" disabled />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Submit" disabled />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/HeadlessDoc.vue b/apps/labs/doc/button/HeadlessDoc.vue
deleted file mode 100644
index 41c52dca7..000000000
--- a/apps/labs/doc/button/HeadlessDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button v-slot="slotProps" asChild>
-            <button
-                v-bind="slotProps.a11yAttrs"
-                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
-            >
-                SIGN UP
-            </button>
-        </Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button v-slot="slotProps" asChild>
-    <button
-        v-bind="slotProps.a11yAttrs"
-        class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
-    >
-        SIGN UP
-    </button>
-</Button>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button v-slot="slotProps" asChild>
-            <button
-                v-bind="slotProps.a11yAttrs"
-                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
-            >
-                SIGN UP
-            </button>
-        </Button>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button v-slot="slotProps" asChild>
-            <button
-                v-bind="slotProps.a11yAttrs"
-                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
-            >
-                SIGN UP
-            </button>
-        </Button>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/IconOnlyDoc.vue b/apps/labs/doc/button/IconOnlyDoc.vue
deleted file mode 100644
index 18fe197d0..000000000
--- a/apps/labs/doc/button/IconOnlyDoc.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Buttons can have icons without labels.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button icon="pi pi-check" aria-label="Filter" />
-<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
-<Button icon="pi pi-search" severity="success" aria-label="Search" />
-<Button icon="pi pi-user" severity="info" aria-label="User" />
-<Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
-<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
-<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
-<Button icon="pi pi-star" severity="contrast" aria-label="Star" />
-
-<Button icon="pi pi-check" rounded aria-label="Filter" />
-<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
-<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
-<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
-<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
-<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
-<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
-<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
-
-<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
-<Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
-<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
-<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
-<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
-<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
-<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
-<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
-
-<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
-<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
-<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
-<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
-<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
-<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
-<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
-<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
-
-<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
-<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
-<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
-<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
-<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
-<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
-<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
-<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
-        </div>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/IconsDoc.vue b/apps/labs/doc/button/IconsDoc.vue
deleted file mode 100644
index e014e487a..000000000
--- a/apps/labs/doc/button/IconsDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <div class="flex flex-wrap gap-4 justify-center">
-            <Button icon="pi pi-home" aria-label="Save" />
-            <Button label="Profile" icon="pi pi-user" />
-            <Button label="Save" icon="pi pi-check" iconPos="right" />
-        </div>
-        <div class="flex flex-wrap gap-4 justify-center">
-            <Button label="Search" icon="pi pi-search" iconPos="top" />
-            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button icon="pi pi-home" aria-label="Save" />
-<Button label="Profile" icon="pi pi-user" />
-<Button label="Save" icon="pi pi-check" iconPos="right" />
-<Button label="Search" icon="pi pi-search" iconPos="top" />
-<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <div class="flex flex-wrap gap-4 justify-center">
-            <Button icon="pi pi-home" aria-label="Save" />
-            <Button label="Profile" icon="pi pi-user" />
-            <Button label="Save" icon="pi pi-check" iconPos="right" />
-        </div>
-        <div class="flex flex-wrap gap-4 justify-center">
-            <Button label="Search" icon="pi pi-search" iconPos="top" />
-            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
-        </div>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <div class="flex flex-wrap gap-4 justify-center">
-            <Button icon="pi pi-home" aria-label="Save" />
-            <Button label="Profile" icon="pi pi-user" />
-            <Button label="Save" icon="pi pi-check" iconPos="right" />
-        </div>
-        <div class="flex flex-wrap gap-4 justify-center">
-            <Button label="Search" icon="pi pi-search" iconPos="top" />
-            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/ImportDoc.vue b/apps/labs/doc/button/ImportDoc.vue
deleted file mode 100644
index 9518ba9ba..000000000
--- a/apps/labs/doc/button/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Button from 'primevue/button';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/LinkDoc.vue b/apps/labs/doc/button/LinkDoc.vue
deleted file mode 100644
index e894c6658..000000000
--- a/apps/labs/doc/button/LinkDoc.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-4">
-        <Button label="Link" variant="link" />
-        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Link" variant="link" />
-<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-<Button as="router-link" label="Router" to="/" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center gap-4">
-        <Button label="Link" variant="link" />
-        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center gap-4">
-        <Button label="Link" variant="link" />
-        <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/LoadingDoc.vue b/apps/labs/doc/button/LoadingDoc.vue
deleted file mode 100644
index 9701c6e91..000000000
--- a/apps/labs/doc/button/LoadingDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Busy state is controlled with the <i>loading</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            loading: false,
-            code: {
-                basic: `
-<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            loading: false
-        };
-    },
-    methods: {
-        load() {
-            this.loading = true;
-            setTimeout(() => {
-                this.loading = false;
-            }, 2000);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const loading = ref(false);
-
-const load = () => {
-    loading.value = true;
-    setTimeout(() => {
-        loading.value = false;
-    }, 2000);
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        load() {
-            this.loading = true;
-            setTimeout(() => {
-                this.loading = false;
-            }, 2000);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/OutlinedDoc.vue b/apps/labs/doc/button/OutlinedDoc.vue
deleted file mode 100644
index 83763d247..000000000
--- a/apps/labs/doc/button/OutlinedDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Outlined buttons display a border without a transparent background.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="outlined" />
-        <Button label="Secondary" severity="secondary" variant="outlined" />
-        <Button label="Success" severity="success" variant="outlined" />
-        <Button label="Info" severity="info" variant="outlined" />
-        <Button label="Warn" severity="warn" variant="outlined" />
-        <Button label="Help" severity="help" variant="outlined" />
-        <Button label="Danger" severity="danger" variant="outlined" />
-        <Button label="Contrast" severity="contrast" variant="outlined" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Primary" variant="outlined" />
-<Button label="Secondary" severity="secondary" variant="outlined" />
-<Button label="Success" severity="success" variant="outlined" />
-<Button label="Info" severity="info" variant="outlined" />
-<Button label="Warn" severity="warn" variant="outlined" />
-<Button label="Help" severity="help" variant="outlined" />
-<Button label="Danger" severity="danger" variant="outlined" />
-<Button label="Contrast" severity="contrast" variant="outlined" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="outlined" />
-        <Button label="Secondary" severity="secondary" variant="outlined" />
-        <Button label="Success" severity="success" variant="outlined" />
-        <Button label="Info" severity="info" variant="outlined" />
-        <Button label="Warn" severity="warn" variant="outlined" />
-        <Button label="Help" severity="help" variant="outlined" />
-        <Button label="Danger" severity="danger" variant="outlined" />
-        <Button label="Contrast" severity="contrast" variant="outlined" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="outlined" />
-        <Button label="Secondary" severity="secondary" variant="outlined" />
-        <Button label="Success" severity="success" variant="outlined" />
-        <Button label="Info" severity="info" variant="outlined" />
-        <Button label="Warn" severity="warn" variant="outlined" />
-        <Button label="Help" severity="help" variant="outlined" />
-        <Button label="Danger" severity="danger" variant="outlined" />
-        <Button label="Contrast" severity="contrast" variant="outlined" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/RaisedDoc.vue b/apps/labs/doc/button/RaisedDoc.vue
deleted file mode 100644
index f4be302da..000000000
--- a/apps/labs/doc/button/RaisedDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Raised buttons display a shadow to indicate elevation.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" raised />
-        <Button label="Secondary" severity="secondary" raised />
-        <Button label="Success" severity="success" raised />
-        <Button label="Info" severity="info" raised />
-        <Button label="Warn" severity="warn" raised />
-        <Button label="Help" severity="help" raised />
-        <Button label="Danger" severity="danger" raised />
-        <Button label="Contrast" severity="contrast" raised />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Primary" raised />
-<Button label="Secondary" severity="secondary" raised />
-<Button label="Success" severity="success" raised />
-<Button label="Info" severity="info" raised />
-<Button label="Warn" severity="warn" raised />
-<Button label="Help" severity="help" raised />
-<Button label="Danger" severity="danger" raised />
-<Button label="Contrast" severity="contrast" raised />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" raised />
-        <Button label="Secondary" severity="secondary" raised />
-        <Button label="Success" severity="success" raised />
-        <Button label="Info" severity="info" raised />
-        <Button label="Warn" severity="warn" raised />
-        <Button label="Help" severity="help" raised />
-        <Button label="Danger" severity="danger" raised />
-        <Button label="Contrast" severity="contrast" raised />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" raised />
-        <Button label="Secondary" severity="secondary" raised />
-        <Button label="Success" severity="success" raised />
-        <Button label="Info" severity="info" raised />
-        <Button label="Warn" severity="warn" raised />
-        <Button label="Help" severity="help" raised />
-        <Button label="Danger" severity="danger" raised />
-        <Button label="Contrast" severity="contrast" raised />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/RaisedTextDoc.vue b/apps/labs/doc/button/RaisedTextDoc.vue
deleted file mode 100644
index 5416b3c12..000000000
--- a/apps/labs/doc/button/RaisedTextDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="text" raised />
-        <Button label="Secondary" severity="secondary" variant="text" raised />
-        <Button label="Success" severity="success" variant="text" raised />
-        <Button label="Info" severity="info" variant="text" raised />
-        <Button label="Warn" severity="warn" variant="text" raised />
-        <Button label="Help" severity="help" variant="text" raised />
-        <Button label="Danger" severity="danger" variant="text" raised />
-        <Button label="Contrast" severity="contrast" variant="text" raised />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Primary" variant="text" raised />
-<Button label="Secondary" severity="secondary" variant="text" raised />
-<Button label="Success" severity="success" variant="text" raised />
-<Button label="Info" severity="info" variant="text" raised />
-<Button label="Warn" severity="warn" variant="text" raised />
-<Button label="Help" severity="help" variant="text" raised />
-<Button label="Danger" severity="danger" variant="text" raised />
-<Button label="Contrast" severity="contrast" variant="text" raised />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="text" raised />
-        <Button label="Secondary" severity="secondary" variant="text" raised />
-        <Button label="Success" severity="success" variant="text" raised />
-        <Button label="Info" severity="info" variant="text" raised />
-        <Button label="Warn" severity="warn" variant="text" raised />
-        <Button label="Help" severity="help" variant="text" raised />
-        <Button label="Danger" severity="danger" variant="text" raised />
-        <Button label="Contrast" severity="contrast" variant="text" raised />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="text" raised />
-        <Button label="Secondary" severity="secondary" variant="text" raised />
-        <Button label="Success" severity="success" variant="text" raised />
-        <Button label="Info" severity="info" variant="text" raised />
-        <Button label="Warn" severity="warn" variant="text" raised />
-        <Button label="Help" severity="help" variant="text" raised />
-        <Button label="Danger" severity="danger" variant="text" raised />
-        <Button label="Contrast" severity="contrast" variant="text" raised />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/RoundedDoc.vue b/apps/labs/doc/button/RoundedDoc.vue
deleted file mode 100644
index 804d5d5f9..000000000
--- a/apps/labs/doc/button/RoundedDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Rounded buttons have a circular border radius.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" rounded />
-        <Button label="Secondary" severity="secondary" rounded />
-        <Button label="Success" severity="success" rounded />
-        <Button label="Info" severity="info" rounded />
-        <Button label="Warn" severity="warn" rounded />
-        <Button label="Help" severity="help" rounded />
-        <Button label="Danger" severity="danger" rounded />
-        <Button label="Contrast" severity="contrast" rounded />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Primary" rounded />
-<Button label="Secondary" severity="secondary" rounded />
-<Button label="Success" severity="success" rounded />
-<Button label="Info" severity="info" rounded />
-<Button label="Warn" severity="warn" rounded />
-<Button label="Help" severity="help" rounded />
-<Button label="Danger" severity="danger" rounded />
-<Button label="Contrast" severity="contrast" rounded />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" rounded />
-        <Button label="Secondary" severity="secondary" rounded />
-        <Button label="Success" severity="success" rounded />
-        <Button label="Info" severity="info" rounded />
-        <Button label="Warn" severity="warn" rounded />
-        <Button label="Help" severity="help" rounded />
-        <Button label="Danger" severity="danger" rounded />
-        <Button label="Contrast" severity="contrast" rounded />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" rounded />
-        <Button label="Secondary" severity="secondary" rounded />
-        <Button label="Success" severity="success" rounded />
-        <Button label="Info" severity="info" rounded />
-        <Button label="Warn" severity="warn" rounded />
-        <Button label="Help" severity="help" rounded />
-        <Button label="Danger" severity="danger" rounded />
-        <Button label="Contrast" severity="contrast" rounded />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/SeverityDoc.vue b/apps/labs/doc/button/SeverityDoc.vue
deleted file mode 100644
index 12f005179..000000000
--- a/apps/labs/doc/button/SeverityDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>severity</i> property defines the variant of a button.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" />
-        <Button label="Secondary" severity="secondary" />
-        <Button label="Success" severity="success" />
-        <Button label="Info" severity="info" />
-        <Button label="Warn" severity="warn" />
-        <Button label="Help" severity="help" />
-        <Button label="Danger" severity="danger" />
-        <Button label="Contrast" severity="contrast" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Primary" />
-<Button label="Secondary" severity="secondary" />
-<Button label="Success" severity="success" />
-<Button label="Info" severity="info" />
-<Button label="Warn" severity="warn" />
-<Button label="Help" severity="help" />
-<Button label="Danger" severity="danger" />
-<Button label="Contrast" severity="contrast" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" />
-        <Button label="Secondary" severity="secondary" />
-        <Button label="Success" severity="success" />
-        <Button label="Info" severity="info" />
-        <Button label="Warn" severity="warn" />
-        <Button label="Help" severity="help" />
-        <Button label="Danger" severity="danger" />
-        <Button label="Contrast" severity="contrast" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" />
-        <Button label="Secondary" severity="secondary" />
-        <Button label="Success" severity="success" />
-        <Button label="Info" severity="info" />
-        <Button label="Warn" severity="warn" />
-        <Button label="Help" severity="help" />
-        <Button label="Danger" severity="danger" />
-        <Button label="Contrast" severity="contrast" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/SizesDoc.vue b/apps/labs/doc/button/SizesDoc.vue
deleted file mode 100644
index 4e6ce2a1b..000000000
--- a/apps/labs/doc/button/SizesDoc.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap items-center justify-center gap-4">
-        <Button label="Small" icon="pi pi-check" size="small" />
-        <Button label="Normal" icon="pi pi-check" />
-        <Button label="Large" icon="pi pi-check" size="large" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Small" icon="pi pi-check" size="small" />
-<Button label="Normal" icon="pi pi-check" />
-<Button label="Large" icon="pi pi-check" size="large" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap items-center justify-center gap-4">
-        <Button label="Small" icon="pi pi-check" size="small" />
-        <Button label="Normal" icon="pi pi-check" />
-        <Button label="Large" icon="pi pi-check" size="large" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap items-center justify-center gap-4">
-        <Button label="Small" icon="pi pi-check" size="small" />
-        <Button label="Normal" icon="pi pi-check" />
-        <Button label="Large" icon="pi pi-check" size="large" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/TemplateDoc.vue b/apps/labs/doc/button/TemplateDoc.vue
deleted file mode 100644
index b08d38218..000000000
--- a/apps/labs/doc/button/TemplateDoc.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content inside a button is defined as children.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button variant="outlined" class="!border-2">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--p-primary-color)"
-                />
-                <path
-                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                    fill="var(--p-text-color)"
-                />
-            </svg>
-        </Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button variant="outlined" class="!border-2">
-    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="..." fill="var(--p-primary-color)" />
-        <path d="..." fill="var(--p-text-color)" />
-    </svg>
-</Button>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button variant="outlined" class="!border-2">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--p-primary-color)"
-                />
-                <path
-                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                    fill="var(--p-text-color)"
-                />
-            </svg>
-        </Button>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button variant="outlined" class="!border-2">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--p-primary-color)"
-                />
-                <path
-                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                    fill="var(--p-text-color)"
-                />
-            </svg>
-        </Button>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/button/TextDoc.vue b/apps/labs/doc/button/TextDoc.vue
deleted file mode 100644
index dd0714b45..000000000
--- a/apps/labs/doc/button/TextDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Text buttons are displayed as textual elements.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="text" />
-        <Button label="Secondary" severity="secondary" variant="text" />
-        <Button label="Success" severity="success" variant="text" />
-        <Button label="Info" severity="info" variant="text" />
-        <Button label="Warn" severity="warn" variant="text" />
-        <Button label="Help" severity="help" variant="text" />
-        <Button label="Danger" severity="danger" variant="text" />
-        <Button label="Contrast" severity="contrast" variant="text" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Primary" variant="text" />
-<Button label="Secondary" severity="secondary" variant="text" />
-<Button label="Success" severity="success" variant="text" />
-<Button label="Info" severity="info" variant="text" />
-<Button label="Warn" severity="warn" variant="text" />
-<Button label="Help" severity="help" variant="text" />
-<Button label="Danger" severity="danger" variant="text" />
-<Button label="Contrast" severity="contrast" variant="text" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="text" />
-        <Button label="Secondary" severity="secondary" variant="text" />
-        <Button label="Success" severity="success" variant="text" />
-        <Button label="Info" severity="info" variant="text" />
-        <Button label="Warn" severity="warn" variant="text" />
-        <Button label="Help" severity="help" variant="text" />
-        <Button label="Danger" severity="danger" variant="text" />
-        <Button label="Contrast" severity="contrast" variant="text" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" variant="text" />
-        <Button label="Secondary" severity="secondary" variant="text" />
-        <Button label="Success" severity="success" variant="text" />
-        <Button label="Info" severity="info" variant="text" />
-        <Button label="Warn" severity="warn" variant="text" />
-        <Button label="Help" severity="help" variant="text" />
-        <Button label="Danger" severity="danger" variant="text" />
-        <Button label="Contrast" severity="contrast" variant="text" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/card/AccessibilityDoc.vue b/apps/labs/doc/card/AccessibilityDoc.vue
deleted file mode 100644
index 1792991fc..000000000
--- a/apps/labs/doc/card/AccessibilityDoc.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require
-            to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Card role="region">
-    Content
-</Card>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/card/AdvancedDoc.vue b/apps/labs/doc/card/AdvancedDoc.vue
deleted file mode 100644
index afa9d274c..000000000
--- a/apps/labs/doc/card/AdvancedDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
-    </DocSectionText>
-    <div class="mb-4 p-8 flex items-center justify-center">
-        <Card style="width: 25rem; overflow: hidden">
-            <template #header>
-                <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
-            </template>
-            <template #title>Advanced Card</template>
-            <template #subtitle>Card subtitle</template>
-            <template #content>
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-            <template #footer>
-                <div class="flex gap-4 mt-1">
-                    <Button label="Cancel" severity="secondary" outlined class="w-full" />
-                    <Button label="Save" class="w-full" />
-                </div>
-            </template>
-        </Card>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Card style="width: 25rem; overflow: hidden">
-    <template #header>
-        <img alt="user header" src="/images/usercard.png" />
-    </template>
-    <template #title>Advanced Card</template>
-    <template #subtitle>Card subtitle</template>
-    <template #content>
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-            quas!
-        </p>
-    </template>
-    <template #footer>
-        <div class="flex gap-4 mt-1">
-            <Button label="Cancel" severity="secondary" outlined class="w-full" />
-            <Button label="Save" class="w-full" />
-        </div>
-    </template>
-</Card>
-`,
-                options: `
-<template>
-    <Card style="width: 25rem; overflow: hidden">
-        <template #header>
-            <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
-        </template>
-        <template #title>Advanced Card</template>
-        <template #subtitle>Card subtitle</template>
-        <template #content>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                quas!
-            </p>
-        </template>
-        <template #footer>
-            <div class="flex gap-4 mt-1">
-                <Button label="Cancel" severity="secondary" outlined class="w-full" />
-                <Button label="Save" class="w-full" />
-            </div>
-        </template>
-    </Card>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <Card style="width: 25rem; overflow: hidden">
-        <template #header>
-            <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
-        </template>
-        <template #title>Advanced Card</template>
-        <template #subtitle>Card subtitle</template>
-        <template #content>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                quas!
-            </p>
-        </template>
-        <template #footer>
-            <div class="flex gap-4 mt-1">
-                <Button label="Cancel" severity="secondary" outlined class="w-full" />
-                <Button label="Save" class="w-full" />
-            </div>
-        </template>
-    </Card>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/card/BasicDoc.vue b/apps/labs/doc/card/BasicDoc.vue
deleted file mode 100644
index 654c53987..000000000
--- a/apps/labs/doc/card/BasicDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
-    </DocSectionText>
-    <div class="mb-4 p-8">
-        <Card>
-            <template #title>Simple Card</template>
-            <template #content>
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-        </Card>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Card>
-    <template #title>Simple Card</template>
-    <template #content>
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-            quas!
-        </p>
-    </template>
-</Card>
-`,
-                options: `
-<template>
-    <Card>
-        <template #title>Simple Card</template>
-        <template #content>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                quas!
-            </p>
-        </template>
-    </Card>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <Card>
-        <template #title>Simple Card</template>
-        <template #content>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                quas!
-            </p>
-        </template>
-    </Card>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/card/ImportDoc.vue b/apps/labs/doc/card/ImportDoc.vue
deleted file mode 100644
index 853997255..000000000
--- a/apps/labs/doc/card/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Card from 'primevue/card';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/carousel/AccessibilityDoc.vue b/apps/labs/doc/carousel/AccessibilityDoc.vue
deleted file mode 100644
index 734d0df3f..000000000
--- a/apps/labs/doc/carousel/AccessibilityDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
-            <i>aria-live</i> attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
-        </p>
-
-        <p>
-            A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Similarly
-            <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
-        </p>
-
-        <p>
-            Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button
-            elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
-        </p>
-
-        <p>
-            Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
-            Current page is marked with <i>aria-current</i>.
-        </p>
-
-        <h3>Next/Prev Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through interactive elements in the carousel.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates navigation.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates navigation.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Quick Navigation Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through the active slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last slide link.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/carousel/BasicDoc.vue b/apps/labs/doc/carousel/BasicDoc.vue
deleted file mode 100644
index a5db3642e..000000000
--- a/apps/labs/doc/carousel/BasicDoc.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
-    </DocSectionText>
-
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ],
-            code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
-    <template #item="slotProps">
-        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-            <div class="mb-4">
-                <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                </div>
-            </div>
-            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-            <div class="flex justify-between 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>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
-})
-
-const products = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1400px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '1199px',
-        numVisible: 3,
-        numScroll: 1
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/carousel/CircularDoc.vue b/apps/labs/doc/carousel/CircularDoc.vue
deleted file mode 100644
index 4936662ea..000000000
--- a/apps/labs/doc/carousel/CircularDoc.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be added which is enabled automatically in auto play mode.</p>
-    </DocSectionText>
-
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ],
-            code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
-    <template #item="slotProps">
-        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-            <div class="mb-4">
-                <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                </div>
-            </div>
-            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-            <div class="flex justify-between 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>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
-})
-
-const products = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1400px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '1199px',
-        numVisible: 3,
-        numScroll: 1
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/carousel/ImportDoc.vue b/apps/labs/doc/carousel/ImportDoc.vue
deleted file mode 100644
index 406de0295..000000000
--- a/apps/labs/doc/carousel/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Carousel from 'primevue/carousel';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/carousel/ResponsiveDoc.vue b/apps/labs/doc/carousel/ResponsiveDoc.vue
deleted file mode 100644
index d1654445c..000000000
--- a/apps/labs/doc/carousel/ResponsiveDoc.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Carousel supports specific configuration per screen size with the <i>responsiveOptions</i> property that takes an array of objects where each object defines the max-width <i>breakpoint</i>, <i>numVisible</i> for the number of items items
-            per page and <i>numScroll</i> for number of items to scroll. When <i>responsiveOptions</i> is defined, the <i>numScroll</i> and <i>numVisible</i> properties of the Carousel are used as default when there is breakpoint that applies.
-        </p>
-    </DocSectionText>
-
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ],
-            code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
-    <template #item="slotProps">
-        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-            <div class="mb-4">
-                <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                </div>
-            </div>
-            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-            <div class="flex justify-between 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>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
-})
-
-const products = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1400px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '1199px',
-        numVisible: 3,
-        numScroll: 1
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/carousel/VerticalDoc.vue b/apps/labs/doc/carousel/VerticalDoc.vue
deleted file mode 100644
index 3a19cecda..000000000
--- a/apps/labs/doc/carousel/VerticalDoc.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>To create a vertical Carousel, <i>orientation</i> needs to be set to <i>vertical</i> along with a <i>verticalViewPortHeight</i>.</p>
-    </DocSectionText>
-
-    <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
-    <template #item="slotProps">
-        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-            <div class="mb-4">
-                <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                </div>
-            </div>
-            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-            <div class="flex justify-between 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>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
-            <template #item="slotProps">
-                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
-                    <div class="mb-4">
-                        <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
-                        </div>
-                    </div>
-                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-between 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>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
-})
-
-const products = ref();
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/AccessibilityDoc.vue b/apps/labs/doc/cascadeselect/AccessibilityDoc.vue
deleted file mode 100644
index 5625edb0b..000000000
--- a/apps/labs/doc/cascadeselect/AccessibilityDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
-            The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
-        </p>
-        <p>
-            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
-            <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Closed State Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the cascadeselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none then first option receives the focus.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Popup Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Hides the popup and moves focus to the next tabbable element. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Hides the popup and moves focus to the previous tabbable element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Selects the focused option and closes the popup.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Selects the focused option and closes the popup.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup, moves focus to the cascadeselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the cascadeselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>If option is closed, opens the option otherwise moves focus to the first child option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>If option is open, closes the option otherwise moves focus to the parent option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="dd1"></span>Options</span>
-<CascadeSelect aria-labelledby="dd1" />
-
-<CascadeSelect aria-label="Options" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/BasicDoc.vue b/apps/labs/doc/cascadeselect/BasicDoc.vue
deleted file mode 100644
index 3812c19aa..000000000
--- a/apps/labs/doc/cascadeselect/BasicDoc.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            CascadeSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
-            required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/ClearIconDoc.vue b/apps/labs/doc/cascadeselect/ClearIconDoc.vue
deleted file mode 100644
index d92264882..000000000
--- a/apps/labs/doc/cascadeselect/ClearIconDoc.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the CascadeSelect.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" showClear :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/DisabledDoc.vue b/apps/labs/doc/cascadeselect/DisabledDoc.vue
deleted file mode 100644
index 7807ec8f3..000000000
--- a/apps/labs/doc/cascadeselect/DisabledDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<CascadeSelect disabled placeholder="Disabled" class="w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/FilledDoc.vue b/apps/labs/doc/cascadeselect/FilledDoc.vue
deleted file mode 100644
index 6795889ec..000000000
--- a/apps/labs/doc/cascadeselect/FilledDoc.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/FloatLabelDoc.vue b/apps/labs/doc/cascadeselect/FloatLabelDoc.vue
deleted file mode 100644
index 879f8dae3..000000000
--- a/apps/labs/doc/cascadeselect/FloatLabelDoc.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-56">
-            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56" variant="in">
-            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56" variant="on">
-            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<FloatLabel class="w-full md:w-56">
-    <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel class="w-full md:w-56">
-    <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel class="w-full md:w-56">
-    <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-56">
-            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56">
-            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56">
-            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-56">
-            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56">
-            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56">
-            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/FormsDoc.vue b/apps/labs/doc/cascadeselect/FormsDoc.vue
deleted file mode 100644
index 91bfffd37..000000000
--- a/apps/labs/doc/cascadeselect/FormsDoc.vue
+++ /dev/null
@@ -1,367 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>CascadeSelect integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                city: null
-            },
-            resolver: zodResolver(
-                z.object({
-                    city: z.union([
-                        z.object({
-                            cname: z.string().min(1, 'City is required.')
-                        }),
-                        z.any().refine((val) => false, { message: 'City is required.' })
-                    ])
-                })
-            ),
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-    <div class="flex flex-col gap-1">
-        <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            initialValues: {
-                city: null
-            },
-            resolver: zodResolver(
-                z.object({
-                    city: z.union([
-                        z.object({
-                            cname: z.string().min(1, 'City is required.')
-                        }),
-                        z.any().refine((val) => false, { message: 'City is required.' })
-                    ])
-                })
-            ),
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    city: null
-});
-
-const resolver = ref(zodResolver(
-    z.object({
-        city: z.union([
-            z.object({
-                cname: z.string().min(1, 'City is required.')
-            }),
-            z.any().refine((val) => false, { message: 'City is required.' })
-        ])
-    })
-));
-
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/IftaLabelDoc.vue b/apps/labs/doc/cascadeselect/IftaLabelDoc.vue
deleted file mode 100644
index 12e9c81be..000000000
--- a/apps/labs/doc/cascadeselect/IftaLabelDoc.vue
+++ /dev/null
@@ -1,288 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-56">
-            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
-            <label for="cs_city">City</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<IftaLabel class="w-full md:w-56">
-    <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
-    <label for="cs_city">City</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-56">
-            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
-            <label for="cs_city">City</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-56">
-            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
-            <label for="cs_city">City</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/ImportDoc.vue b/apps/labs/doc/cascadeselect/ImportDoc.vue
deleted file mode 100644
index de8dc8ffa..000000000
--- a/apps/labs/doc/cascadeselect/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import CascadeSelect from 'primevue/cascadeselect';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/InvalidDoc.vue b/apps/labs/doc/cascadeselect/InvalidDoc.vue
deleted file mode 100644
index 1ac1b0b23..000000000
--- a/apps/labs/doc/cascadeselect/InvalidDoc.vue
+++ /dev/null
@@ -1,301 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
-        <CascadeSelect
-            v-model="selectedCity2"
-            :invalid="!selectedCity2"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            class="w-full sm:w-56"
-            placeholder="Select a City"
-            variant="filled"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity1: null,
-            selectedCity2: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<div class="card flex flex-wrap justify-center gap-4">
-    <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
-        :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
-    <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
-        :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
-        <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity1: null,
-            selectedCity2: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
-        <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity1 = ref(null);
-const selectedCity2 = ref(null);
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/LoadingStateDoc.vue b/apps/labs/doc/cascadeselect/LoadingStateDoc.vue
deleted file mode 100644
index 9be6b8849..000000000
--- a/apps/labs/doc/cascadeselect/LoadingStateDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Loading state can be used <i>loading</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..." class="w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<CascadeSelect loading placeholder="Loading..." class="w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..." class="w-56" />
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..." class="w-56" />
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/SizesDoc.vue b/apps/labs/doc/cascadeselect/SizesDoc.vue
deleted file mode 100644
index d641a5d74..000000000
--- a/apps/labs/doc/cascadeselect/SizesDoc.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>CascadeSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" size="small" placeholder="Small" />
-        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Normal" />
-        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" size="large" placeholder="Large" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-    class="w-56" size="small" placeholder="Small" />
-<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-    class="w-56" placeholder="Normal" />
-<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-    class="w-56" size="large" placeholder="Large" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-            class="w-56" size="small" placeholder="Small" />
-        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-            class="w-56" placeholder="Normal" />
-        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-            class="w-56" size="large" placeholder="Large" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-            class="w-56" size="small" placeholder="Small" />
-        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-            class="w-56" placeholder="Normal" />
-        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
-            class="w-56" size="large" placeholder="Large" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/cascadeselect/TemplateDoc.vue b/apps/labs/doc/cascadeselect/TemplateDoc.vue
deleted file mode 100644
index 4e90b8077..000000000
--- a/apps/labs/doc/cascadeselect/TemplateDoc.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>CascadeSelect offers multiple slots for customization through templating.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
-                    <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
-                    <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
-                    <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="px-3 py-1">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </CascadeSelect>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
-    <template #option="slotProps">
-        <div class="flex items-center">
-            <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
-            <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
-            <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
-            <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
-        </div>
-    </template>
-    <template #dropdownicon>
-        <i class="pi pi-map" />
-    </template>
-    <template #header>
-        <div class="font-medium px-3 py-2">Available Countries</div>
-    </template>
-    <template #footer>
-        <div class="px-3 py-1">
-            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-        </div>
-    </template>
-</CascadeSelect>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
-                    <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
-                    <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
-                    <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="px-3 py-1">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </CascadeSelect>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
-                    <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
-                    <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
-                    <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="px-3 py-1">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </CascadeSelect>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/AccessibilityDoc.vue b/apps/labs/doc/checkbox/AccessibilityDoc.vue
deleted file mode 100644
index 85e63a2bd..000000000
--- a/apps/labs/doc/checkbox/AccessibilityDoc.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using
-            <i>aria-labelledby</i>, <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the checkbox.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the checked state.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="chkbox1">Remember Me</label>
-<Checkbox inputId="chkbox1" />
-
-<span id="chkbox2">Remember Me</span>
-<Checkbox aria-labelledby="chkbox2" />
-
-<Checkbox aria-label="Remember Me" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/BasicDoc.vue b/apps/labs/doc/checkbox/BasicDoc.vue
deleted file mode 100644
index 233714e8f..000000000
--- a/apps/labs/doc/checkbox/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Binary checkbox is used with the <i>v-model</i> for two-way value binding and the <i>binary</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" binary />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<Checkbox v-model="checked" binary />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" binary />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" binary />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/DisabledDoc.vue b/apps/labs/doc/checkbox/DisabledDoc.vue
deleted file mode 100644
index 40615d60f..000000000
--- a/apps/labs/doc/checkbox/DisabledDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-2">
-        <Checkbox v-model="checked1" binary disabled />
-        <Checkbox v-model="checked2" binary disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked1: false,
-            checked2: true,
-            code: {
-                basic: `
-<Checkbox v-model="checked1" binary disabled />
-<Checkbox v-model="checked2" binary disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center gap-2">
-        <Checkbox v-model="checked1" binary disabled />
-        <Checkbox v-model="checked2" binary disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked1: false,
-            checked2: true,
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center gap-2">
-        <Checkbox v-model="checked1" binary disabled />
-        <Checkbox v-model="checked2" binary disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked1 = ref(false);
-const checked2 = ref(true);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/DynamicDoc.vue b/apps/labs/doc/checkbox/DynamicDoc.vue
deleted file mode 100644
index 6fa07a6ec..000000000
--- a/apps/labs/doc/checkbox/DynamicDoc.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Checkboxes can be generated using a list of values.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
-                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
-                <label :for="category.key">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCategories: ['Marketing'],
-            categories: [
-                { name: 'Accounting', key: 'A' },
-                { name: 'Marketing', key: 'M' },
-                { name: 'Production', key: 'P' },
-                { name: 'Research', key: 'R' }
-            ],
-            code: {
-                basic: `
-<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
-    <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
-    <label :for="category.key">{{ category.name }}</label>
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
-                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
-                <label :for="category.key">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCategories: ['Marketing'],
-            categories: [
-                { name: "Accounting", key: "A" },
-                { name: "Marketing", key: "M" },
-                { name: "Production", key: "P" },
-                { name: "Research", key: "R" }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
-                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
-                <label :for="category.key">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const categories = ref([
-    {name: "Accounting", key: "A"},
-    {name: "Marketing", key: "M"},
-    {name: "Production", key: "P"},
-    {name: "Research", key: "R"}
-]);
-const selectedCategories = ref(['Marketing']);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/FilledDoc.vue b/apps/labs/doc/checkbox/FilledDoc.vue
deleted file mode 100644
index 105205ae1..000000000
--- a/apps/labs/doc/checkbox/FilledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" binary variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<Checkbox v-model="checked" binary variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" binary variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" binary variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/FormsDoc.vue b/apps/labs/doc/checkbox/FormsDoc.vue
deleted file mode 100644
index ca81d7421..000000000
--- a/apps/labs/doc/checkbox/FormsDoc.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Checkbox integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-            <div class="flex flex-col gap-2">
-                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="cheese" value="Cheese" />
-                        <label for="cheese"> Cheese </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom"> Mushroom </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="pepper" value="Pepper" />
-                        <label for="pepper"> Pepper </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="onion" value="Onion" />
-                        <label for="onion"> Onion </label>
-                    </div>
-                </CheckboxGroup>
-                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                ingredient: []
-            },
-            resolver: zodResolver(
-                z.object({
-                    ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-    <div class="flex flex-col gap-2">
-        <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
-            <div class="flex items-center gap-2">
-                <Checkbox inputId="cheese" value="Cheese" />
-                <label for="cheese"> Cheese </label>
-            </div>
-            <div class="flex items-center gap-2">
-                <Checkbox inputId="mushroom" value="Mushroom" />
-                <label for="mushroom"> Mushroom </label>
-            </div>
-            <div class="flex items-center gap-2">
-                <Checkbox inputId="pepper" value="Pepper" />
-                <label for="pepper"> Pepper </label>
-            </div>
-            <div class="flex items-center gap-2">
-                <Checkbox inputId="onion" value="Onion" />
-                <label for="onion"> Onion </label>
-            </div>
-        </CheckboxGroup>
-        <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-            <div class="flex flex-col gap-2">
-                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="cheese" value="Cheese" />
-                        <label for="cheese"> Cheese </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom"> Mushroom </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="pepper" value="Pepper" />
-                        <label for="pepper"> Pepper </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="onion" value="Onion" />
-                        <label for="onion"> Onion </label>
-                    </div>
-                </CheckboxGroup>
-                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <Toast />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                ingredient: []
-            },
-            resolver: zodResolver(
-                z.object({
-                    ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
-                })
-            ),
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-            <div class="flex flex-col gap-2">
-                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="cheese" value="Cheese" />
-                        <label for="cheese"> Cheese </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom"> Mushroom </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="pepper" value="Pepper" />
-                        <label for="pepper"> Pepper </label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Checkbox inputId="onion" value="Onion" />
-                        <label for="onion"> Onion </label>
-                    </div>
-                </CheckboxGroup>
-                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    ingredient: []
-});
-const resolver = ref(zodResolver(
-    z.object({
-        ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/GroupDoc.vue b/apps/labs/doc/checkbox/GroupDoc.vue
deleted file mode 100644
index aa12eca93..000000000
--- a/apps/labs/doc/checkbox/GroupDoc.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multiple checkboxes can be grouped together.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
-            <label for="ingredient1"> Cheese </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
-            <label for="ingredient2"> Mushroom </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
-            <label for="ingredient3"> Pepper </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
-            <label for="ingredient4"> Onion </label>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            pizza: null,
-            code: {
-                basic: `
-<div class="card flex flex-wrap justify-center gap-4">
-    <div class="flex items-center gap-2">
-        <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
-        <label for="ingredient1"> Cheese </label>
-    </div>
-    <div class="flex items-center gap-2">
-        <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
-        <label for="ingredient2"> Mushroom </label>
-    </div>
-    <div class="flex items-center gap-2">
-        <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
-        <label for="ingredient3"> Pepper </label>
-    </div>
-    <div class="flex items-center gap-2">
-        <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
-        <label for="ingredient4"> Onion </label>
-    </div>
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
-            <label for="ingredient1"> Cheese </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
-            <label for="ingredient2"> Mushroom </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
-            <label for="ingredient3"> Pepper </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
-            <label for="ingredient4"> Onion </label>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            pizza: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
-            <label for="ingredient1"> Cheese </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
-            <label for="ingredient2"> Mushroom </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
-            <label for="ingredient3"> Pepper </label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
-            <label for="ingredient4"> Onion </label>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const pizza = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/ImportDoc.vue b/apps/labs/doc/checkbox/ImportDoc.vue
deleted file mode 100644
index 26691ee9a..000000000
--- a/apps/labs/doc/checkbox/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Checkbox from 'primevue/checkbox';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/IndeterminateDoc.vue b/apps/labs/doc/checkbox/IndeterminateDoc.vue
deleted file mode 100644
index 2b5b93c38..000000000
--- a/apps/labs/doc/checkbox/IndeterminateDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>indeterminate</i> is present, the checkbox masks the actual value visually.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" indeterminate binary />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<Checkbox v-model="checked" indeterminate binary />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" indeterminate binary />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" indeterminate binary />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/InvalidDoc.vue b/apps/labs/doc/checkbox/InvalidDoc.vue
deleted file mode 100644
index a93536f3b..000000000
--- a/apps/labs/doc/checkbox/InvalidDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" :invalid="!checked" binary />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<Checkbox v-model="checked" :invalid="!checked"  binary />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" :invalid="!checked"  binary />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" :invalid="!checked"  binary />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/checkbox/SizesDoc.vue b/apps/labs/doc/checkbox/SizesDoc.vue
deleted file mode 100644
index 044dc69d3..000000000
--- a/apps/labs/doc/checkbox/SizesDoc.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Checkbox provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
-            <label for="size_small" class="text-sm">Small</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
-            <label for="size_normal">Normal</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
-            <label for="size_large" class="text-lg">Large</label>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            size: null,
-            code: {
-                basic: `
-<div class="card flex flex-wrap justify-center gap-4">
-    <div class="flex items-center gap-2">
-        <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
-        <label for="size_small" class="text-sm">Small</label>
-    </div>
-    <div class="flex items-center gap-2">
-        <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
-        <label for="size_normal">Normal</label>
-    </div>
-    <div class="flex items-center gap-2">
-        <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
-        <label for="size_large" class="text-lg">Large</label>
-    </div>
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
-            <label for="size_small" class="text-sm">Small</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
-            <label for="size_normal">Normal</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
-            <label for="size_large" class="text-lg">Large</label>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            size: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
-            <label for="size_small" class="text-sm">Small</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
-            <label for="size_normal">Normal</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
-            <label for="size_large" class="text-lg">Large</label>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const size = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/chip/AccessibilityDoc.vue b/apps/labs/doc/chip/AccessibilityDoc.vue
deleted file mode 100644
index 18dd9c407..000000000
--- a/apps/labs/doc/chip/AccessibilityDoc.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a
-            <i>tabindex</i> and focusable with the tab key.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>backspace</i>
-                        </td>
-                        <td>Hides removable.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Hides removable.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/chip/BasicDoc.vue b/apps/labs/doc/chip/BasicDoc.vue
deleted file mode 100644
index 0d54b5bff..000000000
--- a/apps/labs/doc/chip/BasicDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A basic chip with a text is created with the <i>label</i> property. In addition when <i>removable</i> is added, a delete icon is displayed to remove a chip.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Action" />
-        <Chip label="Comedy" />
-        <Chip label="Mystery" />
-        <Chip label="Thriller" removable />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Chip label="Action" />
-<Chip label="Comedy" />
-<Chip label="Mystery" />
-<Chip label="Thriller" removable />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Action" />
-        <Chip label="Comedy" />
-        <Chip label="Mystery" />
-        <Chip label="Thriller" removable />
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Action" />
-        <Chip label="Comedy" />
-        <Chip label="Mystery" />
-        <Chip label="Thriller" removable />
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/chip/IconDoc.vue b/apps/labs/doc/chip/IconDoc.vue
deleted file mode 100644
index 339ff9656..000000000
--- a/apps/labs/doc/chip/IconDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A font icon next to the label can be displayed with the <i>icon</i> property.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Apple" icon="pi pi-apple" />
-        <Chip label="Facebook" icon="pi pi-facebook" />
-        <Chip label="Google" icon="pi pi-google" />
-        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Chip label="Apple" icon="pi pi-apple" />
-<Chip label="Facebook" icon="pi pi-facebook" />
-<Chip label="Google" icon="pi pi-google" />
-<Chip label="Microsoft" icon="pi pi-microsoft" removable />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Apple" icon="pi pi-apple" />
-        <Chip label="Facebook" icon="pi pi-facebook" />
-        <Chip label="Google" icon="pi pi-google" />
-        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
-    </div>
-</template>
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Apple" icon="pi pi-apple" />
-        <Chip label="Facebook" icon="pi pi-facebook" />
-        <Chip label="Google" icon="pi pi-google" />
-        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
-    </div>
-</template>
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/chip/ImageDoc.vue b/apps/labs/doc/chip/ImageDoc.vue
deleted file mode 100644
index a2dcbfe07..000000000
--- a/apps/labs/doc/chip/ImageDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>image</i> property is used to display an image like an avatar.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
-        <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
-        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
-        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
-<Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" />
-<Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" />
-<Chip label="Xuxue Feng" image="/images/avatar/xuxuefeng.png" removable />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
-        <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
-        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
-        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
-    </div>
-</template>
-
-<script >
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
-        <Chip label="Asiya Javayant" image=https://primefaces.org/cdn/primevue"/images/avatar/asiyajavayant.png" />
-        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
-        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/chip/ImportDoc.vue b/apps/labs/doc/chip/ImportDoc.vue
deleted file mode 100644
index a451d2c60..000000000
--- a/apps/labs/doc/chip/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Chip from 'primevue/chip';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/chip/StyleDoc.vue b/apps/labs/doc/chip/StyleDoc.vue
deleted file mode 100644
index bb20d0b9d..000000000
--- a/apps/labs/doc/chip/StyleDoc.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>List of class names used in the styled mode.</p>
-    </DocSectionText>
-    <div class="doc-tablewrapper">
-        <table class="doc-table">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Element</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>p-chip</td>
-                    <td>Container element.</td>
-                </tr>
-                <tr>
-                    <td>p-chip-image</td>
-                    <td>Container element in image mode.</td>
-                </tr>
-                <tr>
-                    <td>p-chip-text</td>
-                    <td>Text of the chip.</td>
-                </tr>
-                <tr>
-                    <td>pi-chip-remove-icon</td>
-                    <td>Remove icon.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
diff --git a/apps/labs/doc/chip/TemplateDoc.vue b/apps/labs/doc/chip/TemplateDoc.vue
deleted file mode 100644
index 5a696a1a8..000000000
--- a/apps/labs/doc/chip/TemplateDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The default slot allows displaying custom content inside a chip.</p>
-    </DocSectionText>
-    <div class="card">
-        <Chip class="py-0 pl-0 pr-4">
-            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
-            <span class="ml-2 font-medium">PRIME</span>
-        </Chip>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Chip class="py-0 pl-0 pr-4">
-    <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
-    <span class="ml-2 font-medium">PRIME</span>
-</Chip>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Chip class="py-0 pl-0 pr-4">
-            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
-            <span class="ml-2 font-medium">PRIME</span>
-        </Chip>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Chip class="py-0 pl-0 pr-4">
-            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
-            <span class="ml-2 font-medium">PRIME</span>
-        </Chip>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/colorpicker/AccessibilityDoc.vue b/apps/labs/doc/colorpicker/AccessibilityDoc.vue
deleted file mode 100644
index 2912c2728..000000000
--- a/apps/labs/doc/colorpicker/AccessibilityDoc.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers.
-            In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
-        </p>
-
-        <h3>Closed State Keyboard Support of Popup ColorPicker</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the color picker button.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Opens the popup and moves focus to the color slider.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Popup Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Selects the color and closes the popup.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Selects the color and closes the popup.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup, moves focus to the input.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Color Picker Slider</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>arrow keys</i></td>
-                        <td>Changes color.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Hue Slider</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">up arrow</i>
-                                <i>down arrow</i>
-                            </span>
-                        </td>
-                        <td>Changes hue.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/colorpicker/BasicDoc.vue b/apps/labs/doc/colorpicker/BasicDoc.vue
deleted file mode 100644
index 8e1b824b4..000000000
--- a/apps/labs/doc/colorpicker/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ColorPicker is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null,
-            code: {
-                basic: `
-<ColorPicker v-model="color" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const color = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/colorpicker/DisabledDoc.vue b/apps/labs/doc/colorpicker/DisabledDoc.vue
deleted file mode 100644
index 7fe7b20bc..000000000
--- a/apps/labs/doc/colorpicker/DisabledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null,
-            code: {
-                basic: `
-<ColorPicker v-model="color" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const color = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/colorpicker/FormatDoc.vue b/apps/labs/doc/colorpicker/FormatDoc.vue
deleted file mode 100644
index 8e0518286..000000000
--- a/apps/labs/doc/colorpicker/FormatDoc.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Default color format to use in value binding is <i>hex</i> and other possible values can be <i>rgb</i> and <i>hsb</i> using the <i>format</i> property.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
-            <span>{{ colorHEX }}</span>
-        </div>
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
-            <span>{{ JSON.stringify(colorRGB) }}</span>
-        </div>
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
-            <span>{{ JSON.stringify(colorHSB) }}</span>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            colorHEX: '6466f1',
-            colorRGB: { r: 100, g: 102, b: 241 },
-            colorHSB: { h: 239, s: 59, b: 95 },
-            code: {
-                basic: `
-<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
-<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
-<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
-            <span>{{ colorHEX }}</span>
-        </div>
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
-            <span>{{ JSON.stringify(colorRGB) }}</span>
-        </div>
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
-            <span>{{ JSON.stringify(colorHSB) }}</span>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            colorHEX: '6466f1',
-            colorRGB: { r: 100, g: 102, b: 241 },
-            colorHSB: { h: 239, s: 59, b: 95 }
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
-            <span>{{ colorHEX }}</span>
-        </div>
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
-            <span>{{ JSON.stringify(colorRGB) }}</span>
-        </div>
-        <div class="flex-1 flex flex-col items-center">
-            <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
-            <span>{{ JSON.stringify(colorHSB) }}</span>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const colorHEX = ref('6466f1');
-const colorRGB = ref({ r: 100, g: 102, b: 241 });
-const colorHSB = ref({ h: 239, s: 59, b: 95 });
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/colorpicker/FormsDoc.vue b/apps/labs/doc/colorpicker/FormsDoc.vue
deleted file mode 100644
index 8e5448fd4..000000000
--- a/apps/labs/doc/colorpicker/FormsDoc.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ColorPicker integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-2">
-                <ColorPicker name="color" />
-                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                color: null
-            },
-            resolver: zodResolver(
-                z.object({
-                    color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col items-center gap-2">
-        <ColorPicker name="color" />
-        <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-2">
-                <ColorPicker name="color" />
-                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                color: null
-            },
-            resolver: zodResolver(
-                z.object({
-                    color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-2">
-                <ColorPicker name="color" />
-                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    color: null
-});
-const resolver = ref(zodResolver(
-    z.object({
-        color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/colorpicker/ImportDoc.vue b/apps/labs/doc/colorpicker/ImportDoc.vue
deleted file mode 100644
index 7429452a6..000000000
--- a/apps/labs/doc/colorpicker/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ColorPicker from 'primevue/colorpicker';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/colorpicker/InlineDoc.vue b/apps/labs/doc/colorpicker/InlineDoc.vue
deleted file mode 100644
index 737d3f2a1..000000000
--- a/apps/labs/doc/colorpicker/InlineDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ColorPicker is displayed as a popup by default, add <i>inline</i> property to customize this behavior.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" inline />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null,
-            code: {
-                basic: `
-<ColorPicker v-model="color" inline />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" inline />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" inline />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const color = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/common/presetdoc/index.json b/apps/labs/doc/common/presetdoc/index.json
deleted file mode 100644
index 80fb0a478..000000000
--- a/apps/labs/doc/common/presetdoc/index.json
+++ /dev/null
@@ -1,87 +0,0 @@
-{
-  "accordion": ".p-accordionpanel {\n    @apply flex flex-col border-b border-surface-200 dark:border-surface-700\n}\n\n.p-accordionheader {\n    @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold\n        bg-surface-0 dark:bg-surface-900\n        text-surface-500 dark:text-surface-400\n        transition-colors duration-200\n}\n\n.p-accordionpanel:first-child > .p-accordionheader {\n    @apply rounded-ss-md rounded-se-md\n}\n\n.p-accordionpanel:last-child > .p-accordionheader {\n    @apply rounded-ee-md rounded-es-md\n}\n\n.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {\n    @apply rounded-ee-md rounded-es-md\n}\n\n.p-accordionheader-toggle-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {\n    @apply outline outline-1 outline-offset-[-1px] outline-primary\n}\n\n.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0;\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0;\n}\n\n.p-accordioncontent-content {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]\n}\n",
-  "autocomplete": "@import './inputtext';\n@import './chip';\n\n.p-autocomplete {\n    @apply inline-flex\n}\n\n.p-autocomplete.p-disabled {\n    @apply opacity-100\n}\n\n.p-autocomplete-loader {\n    @apply absolute top-1/2 -mt-2 end-3\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {\n    @apply end-[3.25rem]\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {\n    @apply flex-auto w-[1%]\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {\n    @apply rounded-e-none\n}\n\n.p-autocomplete-dropdown {\n    @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-e-md\n        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300\n        text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800\n        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600\n        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-autocomplete .p-autocomplete-overlay {\n    @apply min-w-full\n}\n\n.p-autocomplete-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-autocomplete-list-container {\n    @apply overflow-auto\n}\n\n.p-autocomplete-list {\n    @apply m-0 p-1 list-none flex flex-col gap-[2px]\n}\n\n.p-autocomplete-option {\n    @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm\n        text-surface-700 dark:text-surface-0 bg-transparent border-none\n        transition-colors duration-200\n}\n\n.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0\n}\n\n.p-autocomplete-option-selected {\n    @apply bg-highlight\n}\n\n.p-autocomplete-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-autocomplete-option-group {\n    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent\n}\n\n.p-autocomplete-input-multiple {\n    @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap\n        px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700 rounded-md w-full\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200 outline-none\n}\n\n.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {\n    @apply border-primary\n}\n\n.p-autocomplete.p-invalid .p-autocomplete-input-multiple {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-variant-filled.p-autocomplete-input-multiple {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-autocomplete.p-disabled .p-autocomplete-input-multiple {\n    @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400\n}\n\n.p-autocomplete-chip.p-chip {\n    @apply py-1 rounded-sm\n}\n\n.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {\n    @apply px-1\n}\n\n.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {\n    @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0\n}\n\n.p-autocomplete-input-chip {\n    @apply flex-auto inline-flex py-1\n}\n\n.p-autocomplete-input-chip input {\n    @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit\n}\n\n.p-autocomplete-input-chip input::placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-autocomplete-empty-message {\n    @apply px-3 py-2\n}\n\n.p-autocomplete-fluid {\n    @apply flex\n}\n\n.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {\n    @apply w-[1%]\n}\n",
-  "avatar": ".p-avatar {\n    @apply inline-flex items-center justify-center\n        w-8 h-8 text-base rounded-md\n        bg-surface-200 dark:bg-surface-700\n}\n\n.p-avatar-image {\n    @apply bg-transparent\n}\n\n.p-avatar-circle,\n.p-avatar-circle img {\n    @apply rounded-full\n}\n\n.p-avatar-icon {\n    @apply text-base\n}\n\n.p-avatar img {\n    @apply w-full h-full\n}\n\n.p-avatar-lg {\n    @apply w-12 h-12 text-2xl\n}\n\n.p-avatar-lg .p-avatar-icon {\n    @apply text-2xl\n}\n\n.p-avatar-xl {\n    @apply w-16 h-16 text-[2rem]\n}\n\n.p-avatar-xl .p-avatar-icon {\n    @apply text-[2rem]\n}\n\n.p-avatar-group {\n    @apply flex items-center\n}\n\n.p-avatar-group .p-avatar + .p-avatar {\n    @apply -ms-4\n}\n\n.p-avatar-group .p-avatar {\n    @apply border-2 border-surface-200 dark:border-surface-700\n}\n",
-  "badge": ".p-badge {\n    @apply inline-flex items-center justify-center rounded-md\n        py-0 px-2 text-xs font-bold min-w-6 h-6\n        bg-primary text-primary-contrast\n}\n\n.p-badge-dot {\n    @apply min-w-2 h-2 rounded-full p-0\n}\n\n.p-badge-circle {\n    @apply p-0 rounded-full\n}\n\n.p-badge-secondary {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300\n}\n\n.p-badge-success {\n    @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950\n}\n\n.p-badge-info {\n    @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950\n}\n\n.p-badge-warn {\n    @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950\n}\n\n.p-badge-danger {\n    @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950\n}\n\n.p-badge-contrast {\n    @apply bg-surface-950 dark:bg-white text-white dark:text-surface-950\n}\n\n.p-badge-sm {\n    @apply text-[0.625rem] min-w-5 h-5\n}\n\n.p-badge-lg {\n    @apply text-sm min-w-7 h-7\n}\n\n.p-badge-xl {\n    @apply text-base min-w-8 h-8\n}",
-  "blockui": ".p-blockui {\n    @apply relative\n}\n\n.p-blockui-mask {\n    @apply rounded-md\n}\n\n.p-blockui-mask.p-overlay-mask {\n    @apply absolute\n}\n\n.p-blockui-mask-document.p-overlay-mask {\n    @apply fixed\n}",
-  "breadcrumb": ".p-breadcrumb {\n    @apply bg-surface-0 dark:bg-surface-900 p-4 overflow-x-auto\n}\n\n.p-breadcrumb-list {\n    @apply m-0 p-0 list-none flex items-center flex-nowrap gap-2\n}\n\n.p-breadcrumb-separator {\n    @apply flex items-center text-surface-400 dark:text-surface-500\n}\n\n.p-breadcrumb-separator-icon:dir(rtl) {\n    @apply rotate-180\n}\n\n.p-breadcrumb::-webkit-scrollbar {\n    @apply hidden\n}\n\n.p-breadcrumb-item-link {\n    @apply no-underline flex items-center gap-2 transition-colors duration-200 rounded-md\n        text-surface-500 dark:text-surface-400\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-breadcrumb-item-label {\n    @apply transition-colors duration-200\n}\n\n.p-breadcrumb-item-icon {\n    @apply text-surface-400 dark:text-surface-500 transition-colors duration-200\n}\n\n.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n",
-  "button": "@import './badge';\n\n.p-button {\n    @apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative\n        bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast\n        border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        px-3 py-2 transition-colors duration-200 gap-2 rounded-md\n        disabled:cursor-default\n}\n\n.p-button-icon-right {\n    @apply order-1\n}\n\n.p-button-icon-right:dir(rtl) {\n    @apply order-[-1]\n}\n\n.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {\n    @apply order-1\n}\n\n.p-button-icon-bottom {\n    @apply order-2\n}\n\n.p-button-icon-only {\n    @apply w-10 px-0 gap-0\n}\n\n.p-button-icon-only.p-button-rounded {\n    @apply rounded-full h-10\n}\n\n.p-button-icon-only .p-button-label {\n    @apply invisible w-0\n}\n\n.p-button-sm {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-button-sm .p-button-icon {\n    @apply text-sm\n}\n\n.p-button-lg {\n    @apply text-[1.125rem] px-[0.875rem] py-[0.625rem]\n}\n\n.p-button-lg .p-button-icon {\n    @apply text-[1.125rem]\n}\n\n.p-button-vertical {\n    @apply flex-col\n}\n\n.p-button-label {\n    @apply font-medium\n}\n\n.p-button-fluid {\n    @apply w-full\n}\n\n.p-button-fluid.p-button-icon-only {\n    @apply w-10\n}\n\n.p-button .p-badge {\n    @apply min-w-4 h-4 leading-4\n}\n\n.p-button-raised {\n    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]\n}\n\n.p-button-rounded {\n    @apply rounded-[2rem]\n}\n\n.p-button-secondary {\n    @apply bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300\n        border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300\n        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800\n        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600\n        dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600\n        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300\n}\n\n.p-button-success {\n    @apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700\n        border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200\n        dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200\n        dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-green-500 dark:focus-visible:outline-green-400\n}\n\n.p-button-info {\n    @apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700\n        border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200\n        dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200\n        dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400\n}\n\n.p-button-warn {\n    @apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700\n        border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200\n        dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200\n        dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400\n}\n\n.p-button-help {\n    @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700\n        border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200\n        dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200\n        dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400\n}\n\n.p-button-danger {\n    @apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700\n        border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200\n        dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200\n        dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-red-500 dark:focus-visible:outline-red-400\n}\n\n.p-button-contrast {\n    @apply bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800\n        border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800\n        text-white enabled:hover:text-white enabled:active:text-white\n        dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200\n        dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300\n        dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n        focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0\n}\n\n.p-button-outlined {\n    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100\n        border-primary-200 enabled:hover:border-primary-200 enabled:active:border-primary-200\n        text-primary enabled:hover:text-primary enabled:active:text-primary\n        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15\n        dark:border-primary-700 dark:enabled:hover:border-primary-700 dark:enabled:active:border-primary-700\n        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary\n}\n\n.p-button-outlined.p-button-secondary {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200\n        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500\n        dark:bg-transparent dark:enabled:hover:bg-white/5 dark:enabled:active:bg-white/15\n        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700\n        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400\n}\n\n.p-button-outlined.p-button-success {\n    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100\n        border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200\n        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500\n        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15\n        dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700\n        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400\n}\n\n.p-button-outlined.p-button-info {\n    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100\n        border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200\n        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500\n        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15\n        dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700\n        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400\n}\n\n.p-button-outlined.p-button-warn {\n    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100\n        border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200\n        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500\n        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15\n        dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700\n        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400\n}\n\n.p-button-outlined.p-button-help {\n    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100\n        border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200\n        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500\n        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15\n        dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700\n        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400\n}\n\n.p-button-outlined.p-button-danger {\n    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100\n        border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200\n        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500\n        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15\n        dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700\n        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400\n}\n\n.p-button-outlined.p-button-contrast {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-surface-700 enabled:hover:border-surface-700 enabled:active:border-surface-700\n        text-surface-950 enabled:hover:text-surface-950 enabled:active:text-surface-950\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-surface-500 dark:enabled:hover:border-surface-500 dark:enabled:active:border-surface-500\n        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0\n}\n\n.p-button-outlined.p-button-plain {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200\n        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-surface-600 dark:enabled:hover:border-surface-600 dark:enabled:active:border-surface-600\n        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0\n}\n\n.p-button-text {\n    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-primary enabled:hover:text-primary enabled:active:text-primary\n        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary\n}\n\n.p-button-text.p-button-secondary {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400\n}\n\n.p-button-text.p-button-success {\n    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500\n        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400\n}\n\n.p-button-text.p-button-info {\n    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500\n        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400\n}\n\n.p-button-text.p-button-warn {\n    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500\n        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400\n}\n\n.p-button-text.p-button-help {\n    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500\n        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400\n}\n\n.p-button-text.p-button-danger {\n    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500\n        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400\n}\n\n.p-button-text.p-button-contrast {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500\n        dark:bg-transparent dark:enabled:hover:bg-surface-400/5 dark:enabled:active:bg-surface-400/15\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400\n}\n\n.p-button-text.p-button-plain {\n    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent\n        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0\n}\n\n.p-button-link {\n    @apply bg-transparent enabled:hover:bg-transparent enabled:active:bg-transparent\n        border-transparent enabled:hover:border-transparent enabled:active:border-transparent\n        text-primary enabled:hover:text-primary enabled:active:text-primary\n}\n\n.p-button-link:not(:disabled):hover .p-button-label {\n    @apply underline\n}\n",
-  "buttongroup": ".p-buttongroup .p-button {\n    @apply m-0 focus-visible:relative focus-visible:z-10\n}\n\n.p-buttongroup .p-button:not(:last-child) {\n    @apply border-r-0\n}\n\n.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) {\n    @apply rounded-none\n}\n\n.p-buttongroup .p-button:first-of-type:not(:only-of-type) {\n    @apply rounded-e-none\n}\n\n.p-buttongroup .p-button:last-of-type:not(:only-of-type) {\n    @apply rounded-s-none\n}\n",
-  "card": ".p-card {\n    @apply flex flex-col rounded-xl\n        bg-surface-0 dark:bg-surface-900 \n        text-surface-700 dark:text-surface-0\n        shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]\n}\n\n.p-card-caption {\n    @apply flex flex-col gap-2\n}\n\n.p-card-body {\n    @apply p-5 flex flex-col gap-2\n}\n\n.p-card-title {\n    @apply font-medium text-xl\n}\n\n.p-card-subtitle {\n    @apply text-surface-500 dark:text-surface-400\n}",
-  "carousel": "@import './button';\n\n.p-carousel {\n    @apply flex flex-col\n}\n\n.p-carousel-content-container {\n    @apply flex flex-col overflow-auto\n}\n\n.p-carousel-content {\n    @apply flex flex-row gap-1\n}\n\n.p-carousel-content:dir(rtl) {\n    @apply flex-row-reverse\n}\n\n.p-carousel-viewport {\n    @apply overflow-hidden w-full\n}\n\n.p-carousel-item-list {\n    @apply flex flex-row\n}\n\n.p-carousel-prev-button,\n.p-carousel-next-button {\n    @apply self-center flex-shrink-0\n}\n\n.p-carousel-indicator-list {\n    @apply flex flex-row justify-center flex-wrap p-4 gap-2 m-0 list-none\n}\n\n.p-carousel-indicator-list:dir(rtl) {\n    @apply rtl:flex-row-reverse\n}\n\n.p-carousel-indicator-button {\n    @apply flex items-center justify-center w-8 h-2 border-none rounded-md p-0 m-0 select-none cursor-pointer transition-colors duration-200\n        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-carousel-indicator-active .p-carousel-indicator-button {\n    @apply bg-primary\n}\n\n.p-carousel-vertical .p-carousel-content {\n    @apply flex-col\n}\n\n.p-carousel-vertical .p-carousel-item-list {\n    @apply flex-col h-full\n}\n\n.p-items-hidden .p-carousel-item {\n    @apply invisible\n}\n\n.p-items-hidden .p-carousel-item.p-carousel-item-active {\n    @apply visible\n}\n",
-  "cascadeselect": ".p-cascadeselect {\n    @apply inline-flex cursor-pointer relative select-none rounded-md\n        bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-cascadeselect:not(.p-disabled):hover {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-cascadeselect:not(.p-disabled).p-focus {\n    @apply border-primary\n}\n\n.p-cascadeselect.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-cascadeselect.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-cascadeselect.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-cascadeselect-dropdown {\n    @apply flex items-center justify-center shrink-0 bg-transparent\n        text-surface-500 dark:text-surface-400 w-10 rounded-e-md\n}\n\n.p-cascadeselect-clear-icon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10\n}\n\n.p-cascadeselect-label {\n    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]\n        py-2 px-3 overflow-ellipsis\n        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none\n}\n\n.p-cascadeselect-label.p-placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-cascadeselect.p-disabled .p-cascadeselect-label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-cascadeselect-label-empty {\n    @apply overflow-hidden opacity-0\n}\n\n.p-cascadeselect-fluid {\n    @apply flex\n}\n\n.p-cascadeselect-fluid .p-cascadeselect-label {\n    @apply w-[1%]\n}\n\n.p-cascadeselect-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-cascadeselect .p-cascadeselect-overlay {\n    @apply min-w-full\n}\n\n.p-cascadeselect-option-list {\n    @apply hidden min-w-full absolute z-10\n}\n\n.p-cascadeselect-list {\n    @apply min-w-full m-0 list-none p-1 flex flex-col gap-[2px]\n}\n\n.p-cascadeselect-option {\n    @apply cursor-pointer font-normal whitespace-nowrap\n        text-surface-700 dark:text-surface-0 bg-transparent border-none\n        transition-colors duration-200 rounded-sm\n}\n\n.p-cascadeselect-option-active {\n    @apply overflow-visible\n}\n\n.p-cascadeselect-option-active > .p-cascadeselect-option-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-cascadeselect-option-selected .p-cascadeselect-option-content {\n    @apply bg-highlight\n}\n\n.p-cascadeselect-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-cascadeselect-option-active > .p-cascadeselect-option-list {\n    @apply block start-full top-0\n}\n\n.p-cascadeselect-option-content {\n    @apply flex items-center justify-between overflow-hidden relative px-3 py-2\n}\n\n.p-cascadeselect-group-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem] text-surface-400 dark:text-surface-500\n}\n\n.p-cascadeselect-group-icon:dir(rtl) {\n    @apply rotate-180\n}\n\n\n.p-cascadeselect-mobile-active .p-cascadeselect-option-content {\n    @apply rounded-sm\n}\n\n.p-cascadeselect-mobile-active-active .p-cascadeselect-list {\n    @apply flex flex-col top-full start-0 z-10\n}\n\n.p-cascadeselect-mobile-active .p-cascadeselect-list > .p-cascadeselect-option > .p-cascadeselect-option-content .p-cascadeselect-group-icon {\n    @apply ms-auto transition-transform duration-200\n}\n\n.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {\n    @apply -rotate-90\n}\n\n.p-cascadeselect-mobile-active .p-cascadeselect-option-list {\n    @apply static shadow-none border-none ps-4\n}\n\n.p-cascadeselect-sm .p-cascadeselect-label {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-cascadeselect-lg .p-cascadeselect-label {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n",
-  "checkbox": ".p-checkbox {\n    @apply relative inline-flex select-none w-5 h-5 align-bottom\n}\n\n.p-checkbox-input {\n    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10\n        border border-transparent rounded-sm\n}\n\n.p-checkbox-box {\n    @apply flex justify-center items-center rounded-sm w-5 h-5\n        border border-surface-300 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-950\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n}\n\n.p-checkbox-icon {\n    @apply text-surface-700 dark:text-surface-0\n        text-sm w-[0.875rem] h-[0.875rem]\n        transition-colors duration-200\n}\n\n.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-checkbox-checked .p-checkbox-box {\n    @apply border-primary bg-primary\n}\n\n.p-checkbox-checked .p-checkbox-icon {\n    @apply text-primary-contrast\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {\n    @apply bg-primary-emphasis border-primary-emphasis\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {\n    @apply text-primary-contrast\n}\n\n.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-checkbox.p-invalid > .p-checkbox-box {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-checkbox.p-variant-filled .p-checkbox-box {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-checkbox.p-disabled {\n    @apply opacity-100\n}\n\n.p-checkbox.p-disabled .p-checkbox-box {\n    @apply bg-surface-200 dark:bg-surface-400 border-surface-300 dark:border-surface-700\n}\n\n.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {\n    @apply text-surface-700 dark:text-surface-900\n}\n\n.p-checkbox-sm,\n.p-checkbox-sm .p-checkbox-box {\n    @apply w-4 h-4\n}\n\n.p-checkbox-sm .p-checkbox-icon {\n    @apply w-3 h-3\n}\n\n.p-checkbox-lg,\n.p-checkbox-lg .p-checkbox-box {\n    @apply w-6 h-6\n}\n\n.p-checkbox-lg .p-checkbox-icon {\n    @apply w-4 h-4\n}\n",
-  "chip": ".p-chip {\n    @apply inline-flex items-center rounded-2xl gap-2 px-3 py-2\n        bg-surface-100 dark:bg-surface-800\n        text-surface-800 dark:text-surface-0\n}\n\n.p-chip-icon {\n    @apply text-surface-800 dark:bg-surface-0 text-base w-4 h-4\n}\n\n.p-chip-image {\n    @apply rounded-full w-8 h-8 -ms-2\n}\n\n.p-chip:has(.p-chip-remove-icon) {\n    @apply pe-2\n}\n\n.p-chip:has(.p-chip-image) {\n    @apply pt-1 pb-1\n}\n\n.p-chip-remove-icon {\n    @apply cursor-pointer text-base w-4 h-4 rounded-full\n        text-surface-800 dark:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n",
-  "colorpicker": ".p-colorpicker {\n    @apply inline-block relative;\n}\n\n.p-colorpicker-dragging {\n    @apply cursor-pointer\n}\n\n.p-colorpicker-preview {\n    @apply w-6 h-6 p-0 border-none rounded-md transition-colors duration-200 cursor-pointer disabled:cursor-auto\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-colorpicker-panel {\n    @apply bg-surface-800 dark:bg-surface-900\n        border border-surface-900 dark:border-surface-700\n        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n        w-[193px] h-[166px] absolute top-0 start-0\n}\n\n.p-colorpicker-panel-inline {\n    @apply static shadow-none\n}\n\n.p-colorpicker-content {\n    @apply relative;\n}\n\n.p-colorpicker-color-selector {\n    @apply w-[150px] h-[150px] top-[8px] start-[8px] absolute\n}\n\n.p-colorpicker-color-background {\n    @apply w-full h-full bg-[linear-gradient(to_top,#000_0%,rgba(0,0,0,0)_100%),linear-gradient(to_right,#fff_0%,rgba(255,255,255,0)_100%)];\n}\n\n.p-colorpicker-color-handle {\n    @apply absolute top-0 start-[150px] rounded-full w-[10px] h-[10px] border border-surface-0 -mt-[5px] me-0 mb-0 -ms-[5px] cursor-pointer opacity-85\n}\n\n.p-colorpicker-hue {\n    @apply w-[17px] h-[150px] top-[8px] start-[167px] absolute opacity-85 bg-[linear-gradient(0deg,red_0,#ff0_17%,#0f0_33%,#0ff_50%,#00f_67%,#f0f_83%,red)];\n}\n\n.p-colorpicker-hue-handle {\n    @apply absolute top-[150px] start-0 w-[21px] -ms-[2px] -mt-[5px] h-[10px] border-2 opacity-85 border-surface-0 cursor-pointer\n}\n",
-  "common": ".p-connected-overlay-enter-from {\n    @apply opacity-0 scale-y-75\n}\n\n.p-connected-overlay-leave-to {\n    @apply opacity-0\n}\n\n.p-connected-overlay-enter-active {\n    @apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)]\n}\n\n.p-connected-overlay-leave-active {\n    @apply transition-opacity duration-100 ease-linear\n}\n\n.p-toggleable-content-enter-from,\n.p-toggleable-content-leave-to {\n    @apply max-h-0\n}\n\n.p-toggleable-content-enter-to,\n.p-toggleable-content-leave-from {\n    @apply max-h-[1000px]\n}\n\n.p-toggleable-content-leave-active {\n    @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)];\n}\n\n.p-toggleable-content-enter-active {\n    @apply overflow-hidden transition-[max-height] duration-1000 ease-in-out\n}\n\n.p-disabled,\n.p-disabled * {\n    @apply cursor-default pointer-events-none select-none\n}\n\n.p-disabled,\n.p-component:disabled {\n    @apply opacity-60\n}\n\n.pi {\n    @apply text-base\n}\n\n.p-icon {\n    @apply w-4 h-4\n}\n\n.p-overlay-mask {\n    @apply bg-black/50 text-surface-200 transition-colors duration-150 fixed top-0 start-0 w-full h-full\n}\n\n.p-overlay-mask-enter {\n    animation: p-overlay-mask-enter-animation 150ms forwards;\n}\n\n.p-overlay-mask-leave {\n    animation: p-overlay-mask-leave-animation 150ms forwards;\n}\n\n@keyframes p-overlay-mask-enter-animation {\n    from {\n        background: transparent;\n    }\n    to {\n        background: rgba(0,0,0,0.5);\n    }\n}\n\n@keyframes p-overlay-mask-leave-animation {\n    from {\n        background: rgba(0,0,0,0.5);\n    }\n    to {\n        background: transparent;\n    }\n}\n",
-  "confirmdialog": "@import './dialog';\n@import './button';\n\n.p-confirmdialog .p-dialog-content {\n    @apply flex items-center gap-4\n}\n\n.p-confirmdialog-icon {\n    @apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8\n}",
-  "confirmpopup": "@import './button';\n\n.p-confirmpopup {\n    @apply absolute mt-[10px] top-0 left-0\n        border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none\n        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700\n        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none\n        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900\n}\n\n.p-confirmpopup-content {\n    @apply flex items-center p-3 gap-4\n}\n\n.p-confirmpopup-icon {\n    @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0\n}\n\n.p-confirmpopup-footer {\n    @apply flex justify-end gap-2 pt-0 px-3 pb-3\n}\n\n.p-confirmpopup-footer button {\n    @apply w-auto\n}\n\n.p-confirmpopup-footer button:last-child {\n    @apply m-0\n}\n\n.p-confirmpopup-flipped {\n    @apply -mt-[10px] mb-[10px]\n}\n\n.p-confirmpopup-enter-from {\n    @apply opacity-0 scale-y-75\n}\n\n.p-confirmpopup-leave-to {\n    @apply opacity-0\n}\n\n.p-confirmpopup-enter-active {\n    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]\n}\n\n.p-confirmpopup-leave-active {\n    @apply transition-opacity duration-100 ease-linear\n}\n\n.p-confirmpopup-flipped:after,\n.p-confirmpopup-flipped:before {\n    @apply bottom-auto top-full\n}\n\n.p-confirmpopup-flipped:after {\n    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900\n}\n\n.p-confirmpopup-flipped:before {\n    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700\n}\n",
-  "contextmenu": ".p-contextmenu {\n    @apply bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        rounded-md min-w-52 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-contextmenu-root-list,\n.p-contextmenu-submenu {\n    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]\n}\n\n.p-contextmenu-submenu {\n    @apply absolute min-w-full z-10 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-contextmenu-item {\n    @apply relative\n}\n\n.p-contextmenu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-contextmenu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-contextmenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-contextmenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-contextmenu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-contextmenu-enter-from,\n.p-contextmenu-leave-active {\n    @apply opacity-0\n}\n\n.p-contextmenu-enter-active {\n    @apply transition-opacity duration-[250ms]\n}\n\n.p-contextmenu-mobile .p-contextmenu-submenu {\n    @apply static shadow-none border-none ps-4 pe-0\n}\n\n.p-contextmenu-mobile .p-contextmenu-submenu-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {\n    @apply -rotate-90\n}\n",
-  "datatable": "@import './paginator';\n\n.p-datatable {\n    @apply relative\n}\n\n.p-datatable-table {\n    @apply border-spacing-0 w-full\n}\n\n.p-datatable-scrollable > .p-datatable-table-container {\n    @apply relative\n}\n\n.p-datatable-scrollable-table > .p-datatable-thead {\n    @apply top-0 z-10\n}\n\n.p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n    @apply sticky z-10\n}\n\n.p-datatable-scrollable-table > .p-datatable-tfoot {\n    @apply bottom-0 z-10\n}\n\n.p-datatable-scrollable .p-datatable-frozen-column {\n    @apply sticky bg-surface-0 dark:bg-surface-900\n}\n\n.p-datatable-scrollable th.p-datatable-frozen-column {\n    @apply z-10\n}\n\n.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,\n.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {\n    @apply bg-surface-0 dark:bg-surface-900\n}\n\n.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,\n.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {\n    @apply bg-surface-0 dark:bg-surface-900\n}\n\n.p-datatable-flex-scrollable {\n    @apply flex flex-col h-full\n}\n\n.p-datatable-flex-scrollable > .p-datatable-table-container {\n    @apply flex flex-col flex-1 h-full\n}\n\n.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {\n    @apply sticky z-10\n}\n\n.p-datatable-resizable-table > .p-datatable-thead > tr > th,\n.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n.p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n    @apply overflow-hidden whitespace-nowrap\n}\n\n.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {\n    @apply bg-clip-padding relative\n}\n\n.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {\n    @apply hidden\n}\n\n.p-datatable-column-resizer {\n    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent\n}\n\n.p-datatable-column-header-content {\n    @apply flex items-center gap-2\n}\n\n.p-datatable-column-resize-indicator {\n    @apply w-px absolute z-10 hidden bg-primary\n}\n\n.p-datatable-row-reorder-indicator-up,\n.p-datatable-row-reorder-indicator-down {\n    @apply absolute hidden\n}\n\n.p-datatable-reorderable-column,\n.p-datatable-reorderable-row-handle {\n    @apply cursor-move\n}\n\n.p-datatable-mask {\n    @apply absolute flex items-center justify-center z-20\n}\n\n.p-datatable-inline-filter {\n    @apply flex items-center w-full gap-2\n}\n\n.p-datatable-inline-filter .p-datatable-filter-element-container {\n    @apply flex-auto w-[1%]\n}\n\n.p-datatable-filter-overlay {\n    @apply bg-surface-0 dark:bg-surface-900 rounded-md min-w-52\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-datatable-filter-constraint-list {\n    @apply m-0 list-none flex flex-col p-1 gap-[2px]\n}\n\n.p-datatable-filter-constraint {\n    @apply px-3 py-2 rounded-sm cursor-pointer transition-colors duration-200 text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-filter-constraint-selected {\n    @apply bg-highlight\n}\n\n.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover\n{\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-datatable-filter-constraint:focus-visible {\n    @apply outline-none bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-datatable-filter-constraint-selected:focus-visible {\n    @apply bg-highlight-emphasis\n}\n\n.p-datatable-filter-constraint-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-datatable-popover-filter {\n    @apply inline-flex ms-auto\n}\n\n.p-datatable-filter-overlay-popover {\n    @apply flex flex-col gap-2\n        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-datatable-filter-operator-dropdown {\n    @apply w-full\n}\n\n.p-datatable-filter-rule-list,\n.p-datatable-filter-rule {\n    @apply flex flex-col gap-2\n}\n\n.p-datatable-filter-rule {\n    @apply border-b border-surface-200 dark:border-surface-700 last:border-b-0 pb-2 last:pb-0\n}\n\n.p-datatable-filter-add-rule-button {\n    @apply w-full\n}\n\n.p-datatable-filter-remove-rule-button {\n    @apply w-full\n}\n\n.p-datatable-filter-buttonbar {\n    @apply p-0 flex items-center justify-between\n}\n\n.p-datatable-virtualscroller-spacer {\n    @apply flex\n}\n\n.p-datatable .p-virtualscroller .p-virtualscroller-loading {\n    @apply !transform-none min-h-0 sticky top-0 start-0\n}\n\n.p-datatable-paginator-top {\n    @apply border-b border-surface-200 dark:border-surface-700\n}\n\n.p-datatable-paginator-bottom {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-datatable-header {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-footer {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-header-cell {\n    @apply py-3 px-4 font-normal text-start transition-colors duration-200\n        border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-column-title {\n    @apply font-semibold\n}\n\n.p-datatable-tbody > tr {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200\n}\n\n.p-datatable-tbody > tr > td {\n    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800\n}\n\n.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected {\n    @apply bg-highlight\n}\n\n.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {\n    @apply border-b-primary-100 dark:border-b-primary-900\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected > td {\n    @apply border-b-primary-100 dark:border-b-primary-900\n}\n\n.p-datatable-tbody > tr:focus-visible,\n.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {\n    @apply outline outline-1 -outline-offset-1 outline-primary\n}\n\n.p-datatable-tfoot > tr > td {\n    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-datatable-column-footer {\n    @apply font-semibold\n}\n\n.p-datatable-sortable-column {\n    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary\n}\n\n.p-datatable-column-title,\n.p-datatable-sort-icon,\n.p-datatable-sort-badge {\n    @apply align-middle\n}\n\n.p-datatable-sort-icon {\n    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200\n}\n\n.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-datatable-column-sorted {\n    @apply bg-highlight\n}\n\n.p-datatable-column-sorted .p-datatable-sort-icon {\n    @apply bg-highlight\n}\n\n.p-datatable-hoverable .p-datatable-selectable-row {\n    @apply cursor-pointer\n}\n\n.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {\n    @apply shadow-[inset_0_2px_0_0_theme(colors.primary)]\n}\n\n.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {\n    @apply shadow-[inset_0_-2px_0_0_theme(colors.primary)]\n}\n\n.p-datatable-loading-icon {\n    @apply text-[2rem] w-8 h-8\n}\n\n.p-datatable-gridlines .p-datatable-header {\n    @apply border-t border-x\n}\n\n.p-datatable-gridlines .p-datatable-footer {\n    @apply border-b border-x\n}\n\n.p-datatable-gridlines .p-datatable-paginator-top {\n    @apply border-t border-x\n}\n\n.p-datatable-gridlines .p-datatable-paginator-bottom {\n    @apply border-b border-x\n}\n\n.p-datatable-gridlines .p-datatable-thead > tr > th {\n    @apply border-t border-x last:border\n}\n\n.p-datatable-gridlines .p-datatable-tbody > tr > td {\n    @apply border-t border-s last:border-r\n}\n\n.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {\n    @apply border-y border-s last:border\n}\n\n.p-datatable-gridlines .p-datatable-tfoot > tr > td {\n    @apply border-y border-s last:border\n}\n\n.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {\n    @apply border-b border-s last:border-r\n}\n\n.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {\n    @apply border-b border-s last:border-r\n}\n\n.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {\n    @apply border-s last:border-r\n}\n\n.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {\n    @apply bg-surface-50 dark:bg-surface-950\n}\n\n.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected {\n    @apply bg-highlight\n}\n\n.p-datatable.p-datatable-sm .p-datatable-header {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-sm .p-datatable-footer {\n    @apply py-1 px-2\n}\n\n.p-datatable.p-datatable-lg .p-datatable-header {\n    @apply py-4 px-5\n}\n\n.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {\n    @apply py-4 px-5\n}\n\n.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td {\n    @apply py-4 px-5\n}\n\n.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td {\n    @apply py-4 px-5\n}\n\n.p-datatable.p-datatable-lg .p-datatable-footer {\n    @apply py-4 px-5\n}\n\n.p-datatable-row-toggle-button {\n    @apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none\n        transition-colors duration-200 rounded-full border-none bg-transparent\n        text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700\n        dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary\n}\n\n.p-datatable-row-toggle-icon:dir(rtl) {\n    @apply rotate-180\n}\n",
-  "dataview": "@import './paginator';\n\n.p-dataview {\n    @apply border-none\n}\n\n.p-dataview-header {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 \n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-dataview-content {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-dataview-footer {\n    @apply py-3 px-4 border-t border-surface-200 dark:border-surface-700 \n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-dataview-paginator-top {\n    @apply border-b border-surface-200 dark:border-surface-700\n}\n\n.p-dataview-paginator-bottom {\n    @apply border-t border-surface-200 dark:border-surface-700\n}",
-  "datepicker": "@import './button';\n@import './inputtext';\n\n.p-datepicker {\n    @apply inline-flex max-w-full\n}\n\n.p-datepicker-input {\n    @apply flex-auto w-[1%]\n}\n\n.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {\n    @apply rounded-e-none\n}\n\n.p-datepicker-dropdown {\n    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none\n        w-10 rounded-e-md border border-s-0 border-surface-300 dark:border-surface-700\n        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300\n        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800\n        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600\n        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-datepicker:has(.p-datepicker-input-icon-container) {\n    @apply relative\n}\n\n.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {\n    @apply pe-10\n}\n\n.p-datepicker-input-icon-container {\n    @apply cursor-pointer absolute top-1/2 end-3 -mt-2 text-surface-400\n}\n\n.p-datepicker-fluid {\n    @apply flex\n}\n\n.p-datepicker-fluid .p-datepicker-input {\n    @apply w-[1%]\n}\n\n.p-datepicker .p-datepicker-panel {\n    @apply min-w-full\n}\n\n.p-datepicker-panel {\n    @apply w-auto p-3 rounded-md\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-datepicker-panel-inline {\n    @apply inline-block overflow-x-auto shadow-none\n}\n\n.p-datepicker-header {\n    @apply flex items-center justify-between pt-0 px-0 pb-2 font-medium gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border-b border-surface-200 dark:border-surface-700\n}\n\n.p-datepicker-next-button:dir(rtl) {\n    @apply order-[-1]\n}\n.p-datepicker-prev-button:dir(rtl) {\n    @apply order-1\n}\n\n.p-datepicker-title {\n    @apply flex items-center justify-between gap-2 font-medium\n}\n\n.p-datepicker-select-year,\n.p-datepicker-select-month {\n    @apply border-none bg-transparent m-0 cursor-pointer font-medium transition-colors duration-200\n        py-1 px-2 rounded-md text-surface-700 dark:text-surface-0\n        enabled:hover:bg-surface-100 enabled:hover:text-surface-800\n        dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-datepicker-calendar-container {\n    @apply flex\n}\n\n.p-datepicker-calendar-container .p-datepicker-calendar {\n    @apply flex-auto border-s border-surface-200 dark:border-surface-700 gap-3\n        first:ps-0 first:border-s-0 last:pe-0\n}\n\n.p-datepicker-day-view {\n    @apply w-full border-collapse text-base mt-2 mx-0 mb-0\n}\n\n.p-datepicker-weekday-cell {\n    @apply p-1\n}\n\n.p-datepicker-weekday {\n    @apply font-medium text-surface-700 dark:text-surface-0\n}\n\n.p-datepicker-day-cell {\n    @apply p-1\n}\n\n.p-datepicker-day {\n    @apply flex items-center justify-center cursor-pointer my-0 mx-auto overflow-hidden relative w-8 h-8\n        rounded-full p-1 transition-colors duration-200 border border-transparent text-surface-700 dark:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datepicker-day-selected {\n    @apply bg-primary text-primary-contrast\n}\n\n.p-datepicker-day-selected-range {\n    @apply bg-highlight\n}\n\n.p-datepicker-today > .p-datepicker-day {\n    @apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0\n}\n\n.p-datepicker-today > .p-datepicker-day-selected {\n    @apply bg-primary text-primary-contrast\n}\n\n.p-datepicker-today > .p-datepicker-day-selected-range {\n    @apply bg-highlight\n}\n\n.p-datepicker-weeknumber {\n    @apply text-center\n}\n\n.p-datepicker-month-view {\n    @apply mt-2 mb-0 mx-0\n}\n\n.p-datepicker-month {\n    @apply w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative\n        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datepicker-month-selected {\n    @apply bg-primary text-primary-contrast\n}\n\n.p-datepicker-year-view {\n    @apply mt-2 mb-0 mx-0\n}\n\n.p-datepicker-year {\n    @apply w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative\n        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-datepicker-year-selected {\n    @apply bg-primary text-primary-contrast\n}\n\n.p-datepicker-buttonbar {\n    @apply flex justify-between items-center pt-2 pb-0 px-0 border-t border-surface-200 dark:border-surface-700\n}\n\n.p-datepicker-buttonbar .p-button {\n    @apply w-auto\n}\n\n.p-datepicker-time-picker {\n    @apply flex items-center justify-center border-t border-surface-200 dark:border-surface-700 p-0 gap-2\n}\n\n.p-datepicker-calendar-container + .p-datepicker-time-picker {\n    @apply pt-2 pb-0 px-0\n}\n\n.p-datepicker-time-picker > div {\n    @apply flex items-center flex-col gap-1\n}\n\n.p-datepicker-time-picker span {\n    @apply text-base\n}\n\n.p-datepicker-timeonly .p-datepicker-time-picker {\n    @apply border-t-0\n}\n",
-  "dialog": "@import './button';\n\n.p-dialog {\n    @apply max-h-[90%] scale-100 rounded-xl\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]\n}\n\n.p-dialog-content {\n    @apply overflow-y-auto pt-0 px-5 pb-5\n}\n\n.p-dialog-header {\n    @apply flex items-center justify-between shrink-0 p-5\n}\n\n.p-dialog-title {\n    @apply font-semibold text-xl\n}\n\n.p-dialog-footer {\n    @apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2\n}\n\n.p-dialog-header-actions {\n    @apply flex items-center gap-2\n}\n\n.p-dialog-enter-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]\n}\n\n.p-dialog-leave-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]\n}\n\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    @apply opacity-0 scale-75\n}\n\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n    @apply m-3 [transform:translate3d(0,0,0)]\n}\n\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n    @apply transition-all duration-300 ease-out\n}\n\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    @apply [transform:translate3d(0,-100%,0)]\n}\n\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    @apply [transform:translate3d(0,100%,0)]\n}\n\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n    @apply [transform:translate3d(-100%,0,0)]\n}\n\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n    @apply [transform:translate3d(100%,0,0)]\n}\n\n.p-dialog-left:dir(rtl) .p-dialog-enter-from,\n.p-dialog-left:dir(rtl) .p-dialog-leave-to,\n.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,\n.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,\n.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,\n.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to {\n    @apply [transform:translate3d(100%,0,0)]\n}\n.p-dialog-right:dir(rtl) .p-dialog-enter-from,\n.p-dialog-right:dir(rtl) .p-dialog-leave-to,\n.p-dialog-topright:dir(rtl) .p-dialog-enter-from,\n.p-dialog-topright:dir(rtl) .p-dialog-leave-to,\n.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,\n.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to {\n    @apply [transform:translate3d(-100%,0,0)]\n}\n\n.p-dialog-maximized {\n    @apply !w-screen !h-screen top-0 start-0 max-h-full rounded-none\n}\n\n.p-dialog-maximized .p-dialog-content {\n    @apply flex-grow\n}\n",
-  "divider": ".p-divider-horizontal {\n    @apply flex w-full relative items-center my-4 mx-0 py-0 px-4\n        before:absolute before:block before:top-1/2 before:start-0 before:w-full\n        before:border-t before:border-surface-200 dark:before:border-surface-700\n}\n\n.p-divider-horizontal .p-divider-content {\n    @apply py-0 px-2\n}\n\n.p-divider-vertical {\n    @apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0\n        before:absolute before:block before:top-0 before:start-1/2 before:h-full\n        before:border-s before:border-surface-200 before:dark:border-surface-700\n}\n\n.p-divider.p-divider-vertical .p-divider-content {\n    @apply py-2 px-0\n}\n\n.p-divider-content {\n    @apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-divider-solid.p-divider-horizontal:before {\n    @apply border-solid\n}\n\n.p-divider-solid.p-divider-vertical:before {\n    @apply border-solid\n}\n\n.p-divider-dashed.p-divider-horizontal:before {\n    @apply border-dashed\n}\n\n.p-divider-dashed.p-divider-vertical:before {\n    @apply border-dashed\n}\n\n.p-divider-dotted.p-divider-horizontal:before {\n    @apply border-dotted\n}\n\n.p-divider-dotted.p-divider-vertical:before {\n    @apply border-dotted\n}\n\n.p-divider-left:dir(rtl),\n.p-divider-right:dir(rtl) {\n    @apply flex-row-reverse\n}\n",
-  "dock": ".p-dock {\n    @apply absolute z-10 flex justify-center items-center pointer-events-none\n}\n\n.p-dock-list-container {\n    @apply flex pointer-events-auto bg-white/10 border border-white/10 p-2 rounded-xl\n}\n\n.p-dock-list {\n    @apply m-0 p-0 list-none flex items-center justify-center outline-none\n}\n\n.p-dock-item {\n    @apply transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform p-2 rounded-md\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-dock-item-link {\n    @apply flex flex-col items-center justify-center relative cursor-default w-12 h-12\n}\n\n.p-dock-top {\n    @apply start-0 top-0 w-full\n}\n\n.p-dock-top .p-dock-item {\n    @apply origin-[center_top]\n}\n\n.p-dock-bottom {\n    @apply start-0 bottom-0 w-full\n}\n\n.p-dock-bottom .p-dock-item {\n    @apply origin-[center_bottom]\n}\n\n.p-dock-right {\n    @apply end-0 top-0 h-full\n}\n\n.p-dock-right .p-dock-item {\n    @apply origin-[center_right]\n}\n\n.p-dock-right .p-dock-list {\n    @apply flex-col\n}\n\n.p-dock-left {\n    @apply start-0 top-0 h-full\n}\n\n.p-dock-left .p-dock-item {\n    @apply origin-[center_left]\n}\n\n.p-dock-left .p-dock-list {\n    @apply flex-col\n}\n\n.p-dock-mobile.p-dock-top .p-dock-list-container,\n.p-dock-mobile.p-dock-bottom .p-dock-list-container {\n    @apply overflow-x-auto w-full\n}\n\n.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,\n.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {\n    @apply mt-0 mx-auto\n}\n\n.p-dock-mobile.p-dock-left .p-dock-list-container,\n.p-dock-mobile.p-dock-right .p-dock-list-container {\n    @apply overflow-y-auto h-full\n}\n\n.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,\n.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {\n    @apply mt-auto mx-0\n}\n\n.p-dock-mobile .p-dock-list .p-dock-item {\n    @apply transform-none m-0\n}\n",
-  "drawer": "@import './button';\n\n.p-drawer {\n    @apply flex flex-col pointer-events-auto relative transition-transform duration-300\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]\n}\n\n.p-drawer {\n    @apply [transform:translate3d(0,0,0)]\n}\n\n.p-drawer-content {\n    @apply overflow-y-auto flex-grow pt-0 pb-5 px-5\n}\n\n.p-drawer-header {\n    @apply flex items-center justify-between flex-shrink-0 p-5\n}\n\n.p-drawer-footer {\n    @apply p-5\n}\n\n.p-drawer-title {\n    @apply font-semibold text-2xl\n}\n\n.p-drawer-full .p-drawer {\n    @apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0\n}\n\n.p-drawer-left .p-drawer-enter-from,\n.p-drawer-left .p-drawer-leave-to {\n    @apply -translate-x-full\n}\n\n.p-drawer-right .p-drawer-enter-from,\n.p-drawer-right .p-drawer-leave-to {\n    @apply translate-x-full\n}\n\n.p-drawer-top .p-drawer-enter-from,\n.p-drawer-top .p-drawer-leave-to {\n    @apply -translate-y-full\n}\n\n.p-drawer-bottom .p-drawer-enter-from,\n.p-drawer-bottom .p-drawer-leave-to {\n    @apply translate-y-full\n}\n\n.p-drawer-full .p-drawer-enter-from,\n.p-drawer-full .p-drawer-leave-to {\n    @apply opacity-0\n}\n\n.p-drawer-full .p-drawer-enter-active,\n.p-drawer-full .p-drawer-leave-active {\n    @apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]\n}\n\n.p-drawer-left .p-drawer {\n    @apply w-80 h-full border-r\n}\n\n.p-drawer-right .p-drawer {\n    @apply w-80 h-full border-s\n}\n\n.p-drawer-top .p-drawer {\n    @apply h-40 w-full border-b\n}\n\n.p-drawer-bottom .p-drawer {\n    @apply h-40 w-full border-t\n}\n\n.p-drawer-left .p-drawer-content,\n.p-drawer-right .p-drawer-content,\n.p-drawer-top .p-drawer-content,\n.p-drawer-bottom .p-drawer-content {\n    @apply w-full h-full\n}\n\n.p-drawer-open {\n    @apply flex\n}\n\n.p-overlay-mask:dir(rtl) {\n    @apply flex-row-reverse;\n}\n",
-  "fieldset": ".p-fieldset {\n    @apply border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        px-[1.125rem] pt-0 pb-[1.125rem]\n}\n\n.p-fieldset-legend {\n    @apply border border-transparent rounded-md px-3 py-2\n        transition-colors duration-200\n}\n\n.p-fieldset-toggleable > .p-fieldset-legend {\n    @apply p-0\n}\n\n.p-fieldset-toggle-button {\n    @apply select-none overflow-hidden relative\n        flex items-center justify-center gap-2\n        px-3 py-2\n        border-none rounded-md\n        bg-surface-0 dark:bg-surface-900\n        hover:bg-surface-100 dark:hover:bg-surface-800\n        text-surface-700 dark:text-surface-0\n        hover:text-surface-800 dark:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-fieldset-legend-label {\n    @apply font-semibold;\n}\n\n.p-fieldset-toggle-icon {\n    @apply text-surface-500 dark:text-surface-400\n        transition-colors duration-200\n}\n\n.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-fieldset .p-fieldset-content {\n    @apply p-0\n}",
-  "fileupload": "@import './button';\n@import './message';\n@import './progressbar';\n\n.p-fileupload input[type=\"file\"] {\n    @apply hidden\n}\n\n.p-fileupload-advanced {\n    @apply border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-fileupload-header {\n    @apply flex items-center p-[1.125rem] gap-2 text-surface-700 dark:text-surface-0\n}\n\n.p-fileupload-content {\n    @apply border border-transparent relative transition-colors duration-200 pt-0 px-[1.125rem] pb-[1.125rem]\n}\n\n.p-fileupload-content .p-progressbar {\n    @apply w-full absolute top-0 start-0 h-1\n}\n\n.p-fileupload-file-list {\n    @apply flex flex-col gap-2 mt-[1.125rem]\n}\n\n.p-fileupload-file {\n    @apply flex flex-wrap items-center p-4 border-b border-surface-200 dark:border-surface-700 gap-2 last:border-b-0\n}\n\n.p-fileupload-file-info {\n    @apply flex flex-col gap-2\n}\n\n.p-fileupload-file-thumbnail {\n    @apply flex-shrink-0\n}\n\n.p-fileupload-file-actions {\n    @apply ms-auto\n}\n\n.p-fileupload-highlight {\n    @apply border border-dashed border-primary\n}\n\n.p-fileupload-advanced .p-message {\n    @apply mt-0\n}\n\n.p-fileupload-basic {\n    @apply flex flex-wrap items-center justify-center gap-2\n}\n",
-  "floatlabel": ".p-floatlabel {\n    @apply block relative\n}\n\n.p-floatlabel label {\n    @apply absolute pointer-events-none top-1/2 -translate-y-1/2 transition-all duration-200 ease-out leading-none font-medium\n        start-3 text-surface-500 dark:text-surface-400\n}\n\n.p-floatlabel:has(.p-textarea) label {\n    @apply top-2 translate-y-0\n}\n\n.p-floatlabel:has(.p-inputicon:first-child) label {\n    @apply start-10\n}\n\n.p-floatlabel:has(.p-invalid) label {\n    @apply text-red-400 dark:text-red-300\n}\n\n.p-floatlabel:has(input:focus) label,\n.p-floatlabel:has(input.p-filled) label,\n.p-floatlabel:has(input:-webkit-autofill) label,\n.p-floatlabel:has(textarea:focus) label,\n.p-floatlabel:has(textarea.p-filled) label,\n.p-floatlabel:has(.p-inputwrapper-focus) label,\n.p-floatlabel:has(.p-inputwrapper-filled) label {\n    @apply -top-5 translate-y-0 text-xs font-normal\n}\n\n.p-floatlabel:has(input.p-filled) label,\n.p-floatlabel:has(textarea.p-filled) label,\n.p-floatlabel:has(.p-inputwrapper-filled) label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-floatlabel:has(input:focus) label,\n.p-floatlabel:has(input:-webkit-autofill) label,\n.p-floatlabel:has(textarea:focus) label ,\n.p-floatlabel:has(.p-inputwrapper-focus) label  {\n    @apply text-primary\n}\n\n.p-floatlabel-in .p-inputtext,\n.p-floatlabel-in .p-textarea,\n.p-floatlabel-in .p-select-label,\n.p-floatlabel-in .p-multiselect-label,\n.p-floatlabel-in .p-autocomplete-input-multiple,\n.p-floatlabel-in .p-cascadeselect-label,\n.p-floatlabel-in .p-treeselect-label {\n    @apply pt-6 pb-2\n}\n\n.p-floatlabel-in:has(input:focus) label,\n.p-floatlabel-in:has(input.p-filled) label,\n.p-floatlabel-in:has(input:-webkit-autofill) label,\n.p-floatlabel-in:has(textarea:focus) label,\n.p-floatlabel-in:has(textarea.p-filled) label,\n.p-floatlabel-in:has(.p-inputwrapper-focus) label,\n.p-floatlabel-in:has(.p-inputwrapper-filled) label {\n    @apply top-2\n}\n\n.p-floatlabel-on:has(input:focus) label,\n.p-floatlabel-on:has(input.p-filled) label,\n.p-floatlabel-on:has(input:-webkit-autofill) label,\n.p-floatlabel-on:has(textarea:focus) label,\n.p-floatlabel-on:has(textarea.p-filled) label,\n.p-floatlabel-on:has(.p-inputwrapper-focus) label,\n.p-floatlabel-on:has(.p-inputwrapper-filled) label {\n    @apply top-0 -translate-y-1/2 rounded-sm bg-surface-0 dark:bg-surface-950 py-0 px-[0.125rem]\n}\n",
-  "galleria": ".p-galleria {\n    @apply overflow-hidden border border-surface-200 dark:border-surface-700 rounded-md\n}\n\n.p-galleria-content {\n    @apply flex flex-col\n}\n\n.p-galleria-items-container {\n    @apply flex flex-col relative\n}\n\n.p-galleria-items {\n    @apply relative flex h-full\n}\n\n.p-galleria-nav-button {\n    @apply absolute top-1/2 inline-flex justify-center items-center overflow-hidden select-none border-none cursor-pointer\n        w-12 h-12 transition-colors duration-200 p-0 -mt-12 mx-2 mb-0 rounded-full\n        bg-white/10 text-surface-100 enabled:hover:bg-white/20 enabled:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-galleria-next-icon,\n.p-galleria-prev-icon {\n    @apply text-2xl w-6 h-6\n}\n\n.p-galleria-prev-button {\n    @apply start-0\n}\n\n.p-galleria-next-button {\n    @apply end-0\n}\n\n.p-galleria-prev-button:dir(rtl) {\n    @apply start-auto end-0\n}\n.p-galleria-next-button:dir(rtl) {\n    @apply end-auto start-0\n}\n\n.p-galleria-item {\n    @apply flex justify-center items-center h-full w-full\n}\n\n.p-galleria-hover-navigators .p-galleria-nav-button {\n    @apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out\n}\n\n.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {\n    @apply pointer-events-auto opacity-100\n}\n\n.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {\n    @apply pointer-events-none\n}\n\n.p-galleria-caption {\n    @apply absolute bottom-0 left-0 w-full bg-black/5 text-surface-100 p-4\n}\n\n.p-galleria-thumbnails {\n    @apply flex flex-col overflow-auto flex-shrink-0\n}\n\n.p-galleria-thumbnail-nav-button {\n    @apply self-center flex-grow-0 flex-shrink-0 basis-auto justify-center items-center overflow-hidden relative\n        my-0 mx-2 p-0 border-none select-none cursor-pointer w-8 h-8 rounded-md transition-colors duration-200 bg-transparent\n        text-surface-600 hover:bg-surface-100 hover:text-surface-700\n        dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,\n.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {\n    @apply text-base w-4 h-4\n}\n\n.p-galleria-thumbnails-content {\n    @apply flex flex-row bg-surface-0 dark:bg-surface-900 py-4 px-1\n}\n\n.p-galleria-thumbnails-viewport {\n    @apply overflow-hidden w-full\n}\n\n.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),\n.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {\n    @apply rotate-180\n}\n\n.p-galleria-thumbnail-items {\n    @apply flex\n}\n\n.p-galleria-thumbnail-item {\n    @apply overflow-auto flex items-center justify-center cursor-pointer opacity-50\n}\n\n.p-galleria-thumbnail {\n    @apply outline-transparent transition-opacity duration-300 hover:opacity-100\n}\n\n.p-galleria-thumbnail-item-current {\n    @apply opacity-100\n}\n\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    @apply flex-row\n}\n\n.p-galleria-thumbnails-left .p-galleria-items-container,\n.p-galleria-thumbnails-right .p-galleria-items-container {\n    @apply flex-row\n}\n\n.p-galleria-thumbnails-left .p-galleria-items-container,\n.p-galleria-thumbnails-top .p-galleria-items-container {\n    @apply order-2\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnails,\n.p-galleria-thumbnails-top .p-galleria-thumbnails {\n    @apply order-1\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnails-content,\n.p-galleria-thumbnails-right .p-galleria-thumbnails-content {\n    @apply flex-col flex-grow\n}\n\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    @apply flex-col h-full\n}\n\n.p-galleria-indicator-list {\n    @apply flex items-center justify-center p-4 gap-2 m-0 list-none\n}\n\n.p-galleria-indicator-button {\n    @apply inline-flex items-center w-4 h-4 rounded-full m-0 p-0 border-none select-none cursor-pointer transition-colors duration-200\n        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-galleria-indicator-active .p-galleria-indicator-button {\n    @apply bg-primary\n}\n\n.p-galleria-indicators-left .p-galleria-items-container,\n.p-galleria-indicators-right .p-galleria-items-container {\n    @apply flex-row items-center\n}\n\n.p-galleria-indicators-left .p-galleria-items,\n.p-galleria-indicators-top .p-galleria-items {\n    @apply order-2\n}\n\n.p-galleria-indicators-left .p-galleria-indicator-list,\n.p-galleria-indicators-top .p-galleria-indicator-list {\n    @apply order-1\n}\n\n.p-galleria-indicators-left .p-galleria-indicator-list,\n.p-galleria-indicators-right .p-galleria-indicator-list {\n    @apply flex-col\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-list {\n    @apply absolute flex z-10 bg-black/50\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-button {\n    @apply bg-white/40 hover:bg-white/60\n}\n\n.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {\n    @apply bg-white/90\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {\n    @apply top-0 left-0 w-full items-start\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {\n    @apply right-0 top-0 h-full items-end\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {\n    @apply bottom-0 left-0 w-full items-end\n}\n\n.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {\n    @apply left-0 top-0 h-full items-start\n}\n\n.p-galleria-mask {\n    @apply fixed top-0 left-0 w-full h-full flex items-center justify-center\n}\n\n.p-galleria-close-button {\n    @apply absolute top-0 right-0 flex items-center justify-center overflow-hidden m-2 rounded-full\n        transition-colors duration-200 select-none cursor-pointer w-12 h-12 p-0 border-none\n        bg-white/10 text-surface-50 hover:bg-white/20 hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-galleria-close-icon {\n    @apply text-2xl w-6 h-6\n}\n\n.p-galleria-mask .p-galleria-nav-button {\n    @apply fixed top-1/2\n}\n\n.p-galleria-enter-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]\n}\n\n.p-galleria-leave-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]\n}\n\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    @apply opacity-0 scale-75\n}\n\n.p-galleria-enter-active .p-galleria-nav-button {\n    @apply opacity-0\n}\n\n.p-items-hidden .p-galleria-thumbnail-item {\n    @apply invisible\n}\n\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    @apply visible\n}\n",
-  "iconfield": ".p-iconfield {\n    @apply relative\n}\n\n.p-inputicon {\n    @apply absolute top-1/2 -mt-2 text-surface-400 leading-none\n}\n\n.p-iconfield .p-inputicon:first-child {\n    @apply start-3\n}\n\n.p-iconfield .p-inputicon:last-child {\n    @apply end-3\n}\n\n.p-iconfield .p-inputtext:not(:first-child) {\n    @apply ps-10\n}\n\n.p-iconfield .p-inputtext:not(:last-child) {\n    @apply pe-10\n}\n",
-  "iftalabel": ".p-iftalabel {\n    @apply block relative\n}\n\n.p-iftalabel label {\n    @apply absolute pointer-events-none top-2 transition-all ease-out duration-200 leading-none text-xs font-medium start-3 text-surface-500 dark:text-surface-400\n}\n\n.p-iftalabel .p-inputtext,\n.p-iftalabel .p-textarea,\n.p-iftalabel .p-select-label,\n.p-iftalabel .p-multiselect-label,\n.p-iftalabel .p-autocomplete-input-multiple,\n.p-iftalabel .p-cascadeselect-label,\n.p-iftalabel .p-treeselect-label {\n    @apply pt-6 pb-2\n}\n\n.p-iftalabel:has(.p-invalid) label {\n    @apply text-red-400 dark:text-red-300\n}\n\n.p-iftalabel:has(input:focus) label ,\n.p-iftalabel:has(input:-webkit-autofill) label,\n.p-iftalabel:has(textarea:focus) label ,\n.p-iftalabel:has(.p-inputwrapper-focus) label  {\n    @apply text-primary\n}\n\n.p-iftalabel .p-inputicon {\n    @apply top-6 translate-y-1/4 mt-0\n}\n",
-  "image": ".p-image-mask {\n    @apply flex items-center justify-center\n}\n\n.p-image-preview {\n    @apply relative inline-flex leading-none\n}\n\n.p-image-preview-mask {\n    @apply absolute start-0 top-0 w-full h-full flex items-center justify-center opacity-0\n        border-none p-0 cursor-pointer bg-transparent text-surface-200 transition-all duration-200\n}\n\n.p-image-preview:hover > .p-image-preview-mask {\n    @apply opacity-100 cursor-pointer bg-black/40 dark:bg-black/60\n}\n\n.p-image-preview-icon {\n    @apply text-2xl w-6 h-6\n}\n\n.p-image-toolbar {\n    @apply absolute top-4 end-4 start-auto bottom-auto flex z-10 p-2 bg-white/10 border border-white/20 rounded-3xl gap-2;\n}\n\n.p-image-action {\n    @apply inline-flex justify-center items-center text-surface-50 bg-transparent w-12 h-12 m-0 p-0\n        border-none cursor-pointer select-none rounded-full transition-colors duration-200\n        hover:text-surface-0 hover:bg-white/10\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-image-action .p-icon {\n    @apply text-2xl h-6 w-6\n}\n\n.p-image-action.p-disabled {\n    @apply pointer-events-auto\n}\n\n.p-image-original {\n    @apply transition-transform duration-150 max-w-[100vw] max-h-[100vh]\n}\n\n.p-image-original-enter-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]\n}\n\n.p-image-original-leave-active {\n    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]\n}\n\n.p-image-original-enter-from,\n.p-image-original-leave-to {\n    @apply opacity-0 scale-75\n}\n",
-  "imagecompare": ".p-imagecompare {\n    @apply relative overflow-hidden w-full aspect-video\n}\n\n.p-imagecompare img {\n    @apply w-full h-full absolute\n}\n\n.p-imagecompare img + img {\n    @apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]\n}\n\n.p-imagecompare:dir(rtl) img + img {\n    @apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]\n}\n\n.p-imagecompare-slider {\n    @apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200\n        hover:w-[calc(100%+2rem)] hover:-ms-4\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    @apply bg-white/40 h-8 w-8\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    @apply bg-white/40 h-8 w-8\n}\n",
-  "inplace": ".p-inplace-display {\n    @apply inline cursor-pointer border border-transparent px-3 py-2 rounded-md\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-inplace-display:not(.p-disabled):hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-inplace-content {\n    @apply block\n}",
-  "inputgroup": ".p-inputgroup,\n.p-inputgroup .p-floatlabel,\n.p-inputgroup .p-iftalabel {\n    @apply flex items-stretch w-full\n}\n\n.p-inputgroup .p-inputtext,\n.p-inputgroup .p-inputwrapper {\n    @apply flex-auto w-[1%]\n}\n\n.p-inputgroupaddon {\n    @apply flex items-center justify-center p-2 min-w-10\n        border-y border-surface-300 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-950 text-surface-400\n}\n\n.p-inputgroupaddon:first-child,\n.p-inputgroupaddon + .p-inputgroupaddon {\n    @apply border-s\n}\n\n.p-inputgroupaddon:last-child {\n    @apply border-e\n}\n\n.p-inputgroup > .p-component,\n.p-inputgroup > .p-inputwrapper > .p-component,\n.p-inputgroup > .p-floatlabel > .p-component,\n.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component,\n.p-inputgroup > .p-iftalabel > .p-component,\n.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component {\n    @apply rounded-none m-0\n}\n\n.p-inputgroupaddon:first-child,\n.p-inputgroup > .p-component:first-child,\n.p-inputgroup > .p-inputwrapper:first-child > .p-component,\n.p-inputgroup > .p-floatlabel:first-child > .p-component,\n.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component,\n.p-inputgroup > .p-iftalabel:first-child > .p-component,\n.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component {\n    @apply rounded-s-md\n}\n\n.p-inputgroupaddon:last-child,\n.p-inputgroup > .p-component:last-child,\n.p-inputgroup > .p-inputwrapper:last-child > .p-component,\n.p-inputgroup > .p-floatlabel:last-child > .p-component,\n.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component,\n.p-inputgroup > .p-iftalabel:last-child > .p-component,\n.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component {\n    @apply rounded-e-md\n}\n\n.p-inputgroup .p-component:focus,\n.p-inputgroup .p-component.p-focus,\n.p-inputgroup .p-inputwrapper-focus,\n.p-inputgroup .p-component:focus ~ label,\n.p-inputgroup .p-component.p-focus ~ label,\n.p-inputgroup .p-inputwrapper-focus ~ label {\n    @apply z-10\n}\n\n.p-inputgroup > .p-button:not(.p-button-icon-only) {\n    @apply w-auto\n}\n",
-  "inputnumber": "@import './inputtext';\n\n.p-inputnumber {\n    @apply inline-flex relative\n}\n\n.p-inputnumber-button {\n    @apply flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10\n        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200\n        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300\n        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600\n        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700\n        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700\n        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200\n        transition-colors duration-200\n}\n\n.p-inputnumber-stacked .p-inputnumber-button {\n    @apply relative flex-auto border-none\n}\n\n.p-inputnumber-stacked .p-inputnumber-button-group {\n    @apply flex flex-col absolute top-px end-px h-[calc(100%-2px)] z-10\n}\n\n.p-inputnumber-stacked .p-inputnumber-increment-button {\n    @apply p-0 rounded-tr-[5px]\n}\n\n.p-inputnumber-stacked .p-inputnumber-decrement-button {\n    @apply p-0 rounded-br-[5px]\n}\n\n.p-inputnumber-horizontal .p-inputnumber-increment-button {\n    @apply order-3 rounded-e-md border-s-0\n}\n\n.p-inputnumber-horizontal .p-inputnumber-input {\n    @apply order-2 rounded-none\n}\n\n.p-inputnumber-horizontal .p-inputnumber-decrement-button {\n    @apply order-1 rounded-s-md border-r-0\n}\n\n.p-floatlabel:has(.p-inputnumber-horizontal) label {\n    @apply ms-10\n}\n\n.p-inputnumber-vertical {\n    @apply flex-col\n}\n\n.p-inputnumber-vertical .p-inputnumber-button {\n    @apply py-2\n}\n\n.p-inputnumber-vertical .p-inputnumber-increment-button {\n    @apply order-1 rounded-ss-md rounded-se-md w-full border-b-0\n}\n\n.p-inputnumber-vertical .p-inputnumber-input {\n    @apply order-2 rounded-none text-center\n}\n\n.p-inputnumber-vertical .p-inputnumber-decrement-button {\n    @apply order-3 rounded-ee-md rounded-es-md w-full border-t-0\n}\n\n.p-inputnumber-input {\n    @apply flex-auto\n}\n\n.p-inputnumber-fluid {\n    @apply w-full\n}\n\n.p-inputnumber-fluid .p-inputnumber-input {\n    @apply w-[1%]\n}\n\n.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {\n    @apply w-full\n}\n",
-  "inputotp": "@import './inputtext';\n\n.p-inputotp {\n    @apply flex items-center gap-2\n}\n\n.p-inputotp-input {\n    @apply text-center w-10\n}",
-  "inputtext": ".p-inputtext {\n    @apply appearance-none rounded-md\n        border border-surface-300 dark:border-surface-700 \n        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600\n        enabled:focus:border-primary dark:enabled:focus:border-primary\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 disabled:opacity-100\n        placeholder:text-surface-500 dark:placeholder:text-surface-400\n        px-3 py-2\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        outline-none\n}\n\n.p-inputtext.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-inputtext.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-inputtext-sm {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-inputtext-lg {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-inputtext-fluid {\n    @apply w-full\n}",
-  "knob": ".p-knob-range {\n    @apply fill-none transition-[stroke] duration-100 ease-in\n}\n\n.p-knob-text {\n    @apply text-xl text-center\n}\n\n.p-knob svg {\n    @apply rounded-full\n        transition-colors duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-knob svg path:first-child {\n    @apply stroke-surface-200 dark:stroke-surface-700\n}\n\n.p-knob svg path + path {\n    @apply stroke-primary\n}\n\n.p-knob svg text {\n    @apply fill-surface-500 dark:fill-surface-400\n}\n\n.p-knob-value {\n    animation-name: p-knob-dash-frame;\n    animation-fill-mode: forwards;\n    fill: none;\n}\n\n@keyframes p-knob-dash-frame {\n    100% {\n        stroke-dashoffset: 0;\n    }\n}",
-  "listbox": "@import './inputtext';\n@import './iconfield';\n\n.p-listbox {\n    @apply bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0\n        border border-surface-300 dark:border-surface-700 rounded-md\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-listbox.p-focus {\n    @apply border-primary\n}\n\n.p-listbox.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-listbox.p-disabled .p-listbox-option {\n    @apply text-surface-500 dark:text-surface-400 cursor-default\n}\n\n.p-listbox.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-listbox-header {\n    @apply pt-2 pb-1 px-4\n}\n\n.p-listbox-filter {\n    @apply w-full\n}\n\n.p-listbox-list-container {\n    @apply overflow-auto\n}\n\n.p-listbox-list {\n    @apply list-none m-0 p-1 outline-none flex flex-col gap-[2px]\n}\n\n.p-listbox-option {\n    @apply flex items-center cursor-pointer relative overflow-hidden px-3 py-2 border-none rounded-sm\n        text-surface-700 dark:text-surface-0\n        transition-colors duration-200\n}\n\n.p-listbox-striped li:nth-child(even of .p-listbox-option) {\n    @apply bg-surface-50 dark:bg-surface-900\n}\n\n.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {\n    @apply bg-highlight\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-listbox-option-check-icon {\n    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0\n}\n\n.p-listbox-option-group {\n    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold \n}\n\n.p-listbox-empty-message {\n    @apply px-3 py-2\n}",
-  "megamenu": ".p-megamenu {\n    @apply relative flex items-center rounded-md gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n}\n\n.p-megamenu-start,\n.p-megamenu-end {\n    @apply flex items-center\n}\n\n.p-megamenu-root-list {\n    @apply m-0 p-0 list-none outline-none flex items-center flex-wrap gap-2\n}\n\n.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content {\n    @apply rounded-md\n}\n\n.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {\n    @apply px-3 py-2\n}\n\n.p-megamenu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-megamenu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-megamenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-megamenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-megamenu-overlay {\n    @apply hidden absolute w-auto z-10 start-0 min-w-full rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {\n    @apply block\n}\n\n.p-megamenu-submenu {\n    @apply m-0 p-1 list-none min-w-52 flex flex-col gap-[2px]\n}\n\n.p-megamenu-submenu-label {\n    @apply px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent\n}\n\n.p-megamenu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-megamenu-horizontal {\n    @apply items-center px-3 py-2\n}\n\n.p-megamenu-horizontal .p-megamenu-root-list {\n    @apply flex items-center flex-wrap gap-2\n}\n\n.p-megamenu-horizontal .p-megamenu-end {\n    @apply ms-auto self-center\n}\n\n.p-megamenu-vertical {\n    @apply inline-flex min-w-52 flex-col items-stretch p-1\n}\n\n.p-megamenu-vertical .p-megamenu-root-list {\n    @apply items-stretch flex-col gap-[2px]\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {\n    @apply start-full top-0\n}\n\n.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply ms-auto\n}\n\n.p-megamenu-grid {\n    @apply flex\n}\n\n.p-megamenu-col-2,\n.p-megamenu-col-3,\n.p-megamenu-col-4,\n.p-megamenu-col-6,\n.p-megamenu-col-12 {\n    @apply flex-grow-0 flex-shrink-0 basis-auto p-2\n}\n\n.p-megamenu-col-2 {\n    @apply w-1/6;\n}\n\n.p-megamenu-col-3 {\n    @apply w-1/4\n}\n\n.p-megamenu-col-4 {\n    @apply w-1/3\n}\n\n.p-megamenu-col-6 {\n    @apply w-1/2\n}\n\n.p-megamenu-col-12 {\n    @apply w-full\n}\n\n.p-megamenu-button {\n    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full\n        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300\n        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-megamenu-mobile {\n    @apply flex\n}\n\n.p-megamenu-mobile .p-megamenu-button {\n    @apply flex\n}\n\n.p-megamenu-mobile .p-megamenu-root-list {\n    @apply absolute hidden flex-col top-full start-0 z-10 w-full p-1 gap-[2px]\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-megamenu-mobile-active .p-megamenu-root-list {\n    @apply flex\n}\n\n.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {\n    @apply w-full static\n}\n\n.p-megamenu-mobile .p-megamenu-overlay {\n    @apply static border-none rounded-none shadow-none\n}\n\n.p-megamenu-mobile .p-megamenu-grid {\n    @apply flex-wrap overflow-auto max-h-[90%]\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply ms-auto transition-transform duration-[200ms]\n}\n\n.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {\n    @apply -rotate-180\n}\n",
-  "menu": ".p-menu {\n    @apply bg-surface-0 dark:bg-surface-900 \n        text-surface-700 dark:text-surface-0 \n        border border-surface-200 dark:border-surface-700\n        rounded-md min-w-52\n}\n\n.p-menu-list {\n    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]\n}\n\n.p-menu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-menu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-menu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-menu-item.p-focus .p-menu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0 \n}\n\n.p-menu-item.p-focus .p-menu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menu-item:not(.p-disabled) .p-menu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menu-overlay {\n    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-menu-submenu-label {\n    @apply bg-transparent px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold\n}\n\n.p-menu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}",
-  "menubar": ".p-menubar {\n    @apply flex items-center rounded-md px-3 py-2 gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n}\n\n.p-menubar-start,\n.p-megamenu-end {\n    @apply flex items-center\n}\n\n.p-menubar-root-list,\n.p-menubar-submenu {\n    @apply flex m-0 p-0 list-none outline-none\n}\n\n.p-menubar-root-list {\n    @apply items-center flex-wrap gap-2\n}\n\n.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {\n    @apply rounded-md\n}\n\n.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {\n    @apply px-3 py-2\n}\n\n.p-menubar-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-menubar-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-menubar-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-menubar-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-menubar-submenu-icon:dir(rtl) {\n    @apply rotate-180\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item-active > .p-menubar-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-menubar-submenu {\n    @apply hidden absolute min-w-52 z-10\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        flex-col p-1 gap-[2px] rounded-md\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-menubar-submenu .p-menubar-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-menubar-submenu .p-menubar-item {\n    @apply relative\n}\n\n .p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu {\n    @apply block start-full top-0\n}\n\n.p-menubar-end {\n    @apply ms-auto self-center\n}\n\n.p-menubar-button {\n    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full\n        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300\n        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-menubar-mobile {\n    @apply relative\n}\n\n.p-menubar-mobile .p-menubar-button {\n    @apply flex\n}\n\n.p-menubar-mobile .p-menubar-root-list {\n    @apply absolute hidden w-full flex-col top-full start-0 z-10 p-1 gap-[2px] rounded-md\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {\n    @apply px-3 py-3\n}\n\n.p-menubar-mobile-active .p-menubar-root-list {\n    @apply flex\n}\n\n.p-menubar-mobile .p-menubar-root-list .p-menubar-item {\n    @apply w-full static\n}\n\n.p-menubar-mobile .p-menubar-root-list .p-menubar-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply ms-auto transition-transform duration-[200ms]\n}\n\n.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply -rotate-180\n}\n\n.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-menubar-mobile  .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {\n    @apply -rotate-90\n}\n\n.p-menubar-mobile .p-menubar-submenu {\n    @apply w-full static shadow-none border-none ps-4 pe-0\n}\n",
-  "message": ".p-message {\n    @apply rounded-md outline outline-1\n}\n\n.p-message-content {\n    @apply flex items-center px-3 py-2 gap-2 h-full\n}\n\n.p-message-icon {\n    @apply flex-shrink-0\n}\n\n.p-message-close-button {\n    @apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none\n        w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n}\n\n.p-message-info {\n    @apply bg-blue-50/95 outline-blue-200 text-blue-600\n        dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500\n        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]\n}\n\n.p-message-info .p-message-close-button {\n    @apply hover:bg-blue-100 focus-visible:outline-blue-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500\n}\n\n.p-message-info.p-message-outlined {\n    @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600\n}\n\n.p-message-info.p-message-simple {\n    @apply text-blue-500 dark:text-blue-600\n}\n\n.p-message-success {\n    @apply bg-green-50/95 outline-green-200 text-green-600\n        dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500\n        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]\n}\n\n.p-message-success .p-message-close-button {\n    @apply hover:bg-green-100 focus-visible:outline-green-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-green-500\n}\n\n.p-message-success.p-message-outlined {\n    @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600\n}\n\n.p-message-success.p-message-simple {\n    @apply text-green-500 dark:text-green-600\n}\n\n.p-message-warn {\n    @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600\n        dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500\n        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]\n}\n\n.p-message-warn .p-message-close-button {\n    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500\n}\n\n.p-message-warn.p-message-outlined {\n    @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600\n}\n\n.p-message-warn.p-message-simple {\n    @apply text-yellow-500 dark:text-yellow-600\n}\n\n.p-message-error {\n    @apply bg-red-50/95 outline-red-200 text-red-600\n        dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500\n        shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]\n}\n\n.p-message-error .p-message-close-button {\n    @apply hover:bg-red-100 focus-visible:outline-red-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-red-500\n}\n\n.p-message-error.p-message-outlined {\n    @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600\n}\n\n.p-message-error.p-message-simple {\n    @apply text-red-500 dark:text-red-600\n}\n\n.p-message-secondary {\n    @apply bg-surface-100 outline-surface-200 text-surface-600\n        dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300\n        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-message-secondary .p-message-close-button {\n    @apply hover:bg-surface-200 focus-visible:outline-surface-600\n        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300\n}\n\n.p-message-secondary.p-message-outlined {\n    @apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600\n}\n\n.p-message-secondary.p-message-simple {\n    @apply text-surface-500 dark:text-surface-600\n}\n\n.p-message-contrast {\n    @apply bg-surface-900 outline-surface-950 text-surface-50\n        dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950\n        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-message-contrast .p-message-close-button {\n    @apply hover:bg-surface-800 focus-visible:outline-surface-50\n        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950\n}\n\n.p-message-contrast.p-message-outlined {\n    @apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0\n}\n\n.p-message-contrast.p-message-simple {\n    @apply text-surface-950 dark:text-surface-0\n}\n\n.p-message-text {\n    @apply text-base font-medium\n}\n\n.p-message-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n\n.p-message-enter-from {\n    @apply opacity-0\n}\n\n.p-message-enter-active {\n    @apply transition-opacity duration-300\n}\n\n.p-message.p-message-leave-from {\n    @apply max-h-[1000px]\n}\n\n.p-message.p-message-leave-to {\n    @apply max-h-0 opacity-0 m-0\n}\n\n.p-message-leave-active {\n    @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]\n}\n\n.p-message-leave-active .p-message-close-button {\n    @apply opacity-0\n}\n\n.p-message-sm .p-message-content {\n    @apply px-2.5 py-[0.375rem]\n}\n\n.p-message-sm .p-message-text {\n    @apply text-sm\n}\n\n.p-message-sm .p-message-icon {\n    @apply w-4 h-4 text-sm\n}\n\n.p-message-sm .p-message-close-icon {\n    @apply w-3.5 h-3.5 text-sm\n}\n\n.p-message-lg .p-message-content {\n    @apply px-3.5 py-2.5\n}\n\n.p-message-lg .p-message-text {\n    @apply text-xl\n}\n\n.p-message-lg .p-message-icon {\n    @apply w-5 h-5 text-xl\n}\n\n.p-message-lg .p-message-close-icon {\n    @apply w-[1.125rem] h-[1.125rem] text-xl\n}\n\n.p-message-outlined {\n    @apply bg-transparent outline outline-1\n}\n\n.p-message-simple {\n    @apply bg-transparent outline-none shadow-none\n}\n\n.p-message-simple .p-message-content {\n    @apply p-0\n}\n\n.p-message-outlined .p-message-close-button:hover,\n.p-message-simple .p-message-close-button:hover {\n    @apply bg-transparent\n}\n",
-  "metergroup": ".p-metergroup {\n    @apply flex gap-4\n}\n\n.p-metergroup-meters {\n    @apply flex bg-surface-200 dark:bg-surface-700 rounded-md\n}\n\n.p-metergroup-label-list {\n    @apply flex flex-wrap m-0 p-0 list-none\n}\n\n.p-metergroup-label {\n    @apply inline-flex items-center gap-2\n}\n\n.p-metergroup-label-marker {\n    @apply inline-flex w-2 h-2 rounded-full\n}\n\n.p-metergroup-label-icon {\n    @apply text-base w-4 h-4\n}\n\n.p-metergroup-horizontal {\n    @apply flex-col\n}\n\n.p-metergroup-label-list-horizontal {\n    @apply gap-4\n}\n\n.p-metergroup-horizontal .p-metergroup-meters {\n    @apply h-2\n}\n\n.p-metergroup-horizontal .p-metergroup-meter:first-of-type {\n    @apply rounded-s-md\n}\n\n.p-metergroup-horizontal .p-metergroup-meter:last-of-type {\n    @apply rounded-e-md\n}\n\n.p-metergroup-vertical {\n    @apply flex-row\n}\n\n.p-metergroup-label-list-vertical {\n    @apply flex-col gap-2\n}\n\n.p-metergroup-vertical .p-metergroup-meters {\n    @apply flex-col w-2 h-full\n}\n\n.p-metergroup-vertical .p-metergroup-label-list {\n    @apply items-start\n}\n\n.p-metergroup-vertical .p-metergroup-meter:first-of-type {\n    @apply rounded-ss-md rounded-se-md\n}\n\n.p-metergroup-vertical .p-metergroup-meter:last-of-type {\n    @apply rounded-ee-md rounded-es-md\n}\n",
-  "multiselect": "@import './checkbox';\n@import './chip';\n@import './inputtext';\n@import './iconfield';\n\n.p-multiselect {\n    @apply inline-flex cursor-pointer relative select-none rounded-md\n        bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-multiselect:not(.p-disabled):hover {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-multiselect:not(.p-disabled).p-focus {\n    @apply border-primary\n}\n\n.p-multiselect.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-multiselect.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-multiselect.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-multiselect-dropdown {\n    @apply flex items-center justify-center shrink-0 bg-transparent\n        text-surface-500 dark:text-surface-400 w-10 rounded-e-md\n}\n\n.p-multiselect-clear-icon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10\n}\n\n.p-multiselect-label-container {\n    @apply overflow-hidden flex-auto\n}\n\n.p-multiselect-label {\n    @apply flex items-center gap-1 whitespace-nowrap overflow-hidden text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0\n}\n\n.p-multiselect-label.p-placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-multiselect.p-disabled .p-multiselect-label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-multiselect-label-empty {\n    @apply overflow-hidden opacity-0\n}\n\n.p-multiselect .p-multiselect-overlay {\n    @apply min-w-full\n}\n\n.p-multiselect-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-multiselect-header {\n    @apply flex items-center pt-2 pb-1 px-4\n}\n\n.p-multiselect-header .p-checkbox {\n    @apply me-2\n}\n\n.p-multiselect-filter-container {\n    @apply flex-auto\n}\n\n.p-multiselect-filter {\n    @apply w-full\n}\n\n.p-multiselect-list-container {\n    @apply overflow-auto\n}\n\n.p-multiselect-list {\n    @apply m-0 p-1 list-none gap-[2px] flex flex-col\n}\n\n.p-multiselect-option {\n    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-3 py-2\n        rounded-sm text-surface-700 dark:text-surface-0 bg-transparent border-none\n        transition-colors duration-200\n}\n\n.p-multiselect-option:not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-0\n}\n\n.p-multiselect-option-group {\n    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold\n}\n\n.p-multiselect-empty-message {\n    @apply px-3 py-2\n}\n\n.p-multiselect-label .p-chip {\n    @apply py-1 rounded-sm\n}\n\n.p-multiselect-label:has(.p-chip) {\n    @apply py-1 px-[0.375rem]\n}\n\n.p-multiselect-fluid {\n    @apply flex\n}\n\n.p-multiselect-sm .p-multiselect-label {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-multiselect-sm .p-multiselect-dropdown .p-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-multiselect-lg .p-multiselect-label {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-multiselect-lg .p-multiselect-dropdown .p-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n",
-  "orderlist": "@import './button';\n@import './listbox';\n\n.p-orderlist {\n    @apply flex gap-[1.125rem]\n}\n\n.p-orderlist-controls {\n    @apply flex flex-col justify-center gap-2\n}",
-  "organizationchart": ".p-organizationchart-table {\n    @apply border-spacing-0 border-separate my-0 mx-auto\n}\n\n.p-organizationchart-table > tbody > tr > td {\n    @apply text-center align-top py-0 px-3\n}\n\n.p-organizationchart-node {\n    @apply inline-block relative py-3 px-4 rounded-md\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        transition-colors duration-200\n}\n\n.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {\n    @apply pt-3 px-4 pb-5\n}\n\n.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-organizationchart-node-selected {\n    @apply bg-highlight\n}\n\n.p-organizationchart-node-toggle-button {\n    @apply absolute -bottom-3 -ms-3 z-20 start-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full\n        inline-flex items-center justify-center transition-colors duration-200\n        border border-surface-200 dark:border-surface-700\n        bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700\n        dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n.p-organizationchart-node-toggle-button-icon {\n    @apply relative top-px\n}\n\n.p-organizationchart-connector-down {\n    @apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700\n}\n\n.p-organizationchart-connector-right {\n    @apply rounded-none\n}\n\n.p-organizationchart-connector-left {\n    @apply rounded-none border-e border-surface-200 dark:border-surface-700\n}\n\n.p-organizationchart-connector-top {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-organizationchart-node-selectable {\n    @apply cursor-pointer\n}\n\n.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {\n    @apply border-e-0\n}\n\n.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {\n    @apply rounded-se-md\n}\n\n.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {\n    @apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md\n}\n",
-  "overlaybadge": "@import './badge';\n\n.p-overlaybadge {\n    @apply relative\n}\n\n.p-overlaybadge .p-badge {\n    @apply absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline outline-2 outline-surface-0 dark:outline-surface-900\n}\n\n.p-overlaybadge .p-badge:dir(rtl) {\n    @apply -translate-x-1/2 -translate-y-1/2\n}\n",
-  "paginator": ".p-paginator {\n    @apply flex items-center justify-center flex-wrap py-2 px-4 rounded-md gap-1\n        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-paginator-content {\n    @apply flex items-center justify-center flex-wrap gap-1\n}\n\n.p-paginator-content-start {\n    @apply ms-auto\n}\n\n.p-paginator-content-end {\n    @apply me-auto\n}\n\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev {\n    @apply cursor-pointer inline-flex items-center justify-center leading-none overflow-hidden relative\n        bg-transparent border-none min-w-10 h-10 transition-colors duration-200 rounded-full p-0 m-0\n        text-surface-500 dark:text-surface-400\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,\n.p-paginator-first:not(.p-disabled):hover,\n.p-paginator-prev:not(.p-disabled):hover,\n.p-paginator-next:not(.p-disabled):hover,\n.p-paginator-last:not(.p-disabled):hover {\n    @apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300\n}\n\n.p-paginator-page.p-paginator-page-selected {\n    @apply bg-highlight\n}\n\n.p-paginator-current {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-paginator-pages {\n    @apply flex items-center gap-1\n}\n\n.p-paginator-jtp-input .p-inputtext {\n    @apply max-w-10\n}\n\n.p-paginator-first:dir(rtl),\n.p-paginator-prev:dir(rtl),\n.p-paginator-next:dir(rtl),\n.p-paginator-last:dir(rtl) {\n    @apply rotate-180\n}\n",
-  "panel": "@import './button';\n\n.p-panel {\n    @apply border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-panel-header {\n    @apply flex justify-between items-center p-[1.125rem]\n}\n\n.p-panel-toggleable .p-panel-header {\n    @apply py-[0.375rem] px-[1.125rem]\n}\n\n.p-panel-title {\n    @apply leading-none font-semibold\n}\n\n.p-panel-content {\n    @apply pt-0 pb-[1.125rem] px-[1.125rem] \n}\n\n.p-panel-footer {\n    @apply pt-0 pb-[1.125rem] px-[1.125rem] \n}",
-  "panelmenu": ".p-panelmenu {\n    @apply flex flex-col gap-2\n}\n\n.p-panelmenu-panel {\n    @apply bg-surface-0 dark:bg-surface-900 rounded-md p-1\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n}\n\n.p-panelmenu-header {\n    @apply outline-none\n}\n\n.p-panelmenu-header-content {\n    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0\n}\n\n.p-panelmenu-header-link {\n    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer relative no-underline text-inherit\n}\n\n.p-panelmenu-header-icon,\n.p-panelmenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-panelmenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-header:not(.p-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) {\n    @apply rotate-180;\n}\n\n.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-submenu {\n    @apply m-0 py-0 ps-4 outline-none list-none\n}\n\n.p-panelmenu-item-link {\n    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer no-underline text-inherit relative overflow-hidden\n}\n\n.p-panelmenu-item-content {\n    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0\n}\n\n.p-panelmenu-item.p-focus > .p-panelmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n",
-  "password": "@import './inputtext';\n\n.p-password {\n    @apply inline-flex relative\n}\n\n.p-password .p-password-overlay {\n    @apply min-w-full\n}\n\n.p-password-meter {\n    @apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md\n}\n\n.p-password-meter-label {\n    @apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md\n}\n\n.p-password-meter-weak {\n    @apply bg-red-500 dark:bg-red-400\n}\n\n.p-password-meter-medium {\n    @apply bg-amber-500 dark:bg-amber-400\n}\n\n.p-password-meter-strong {\n    @apply bg-green-500 dark:bg-green-400\n}\n\n.p-password-fluid {\n    @apply flex\n}\n\n.p-password-fluid .p-password-input {\n    @apply w-full\n}\n\n.p-password-input::-ms-reveal,\n.p-password-input::-ms-clear {\n    @apply hidden\n}\n\n.p-password-overlay {\n    @apply p-3 rounded-md bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-password-content {\n    @apply flex flex-col gap-2\n}\n\n.p-password-toggle-mask-icon {\n    @apply end-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4\n}\n\n.p-password:has(.p-password-toggle-mask-icon) .p-password-input {\n    @apply pe-10\n}\n",
-  "picklist": "@import './button';\n@import './listbox';\n\n.p-picklist {\n    @apply flex gap-[1.125rem]\n}\n\n.p-picklist-controls {\n    @apply flex flex-col justify-center gap-2\n}\n\n.p-picklist-list-container {\n    @apply flex-grow flex-shrink basis-1/2\n}\n\n.p-picklist .p-listbox {\n    @apply h-full\n}",
-  "popover": ".p-popover {\n    @apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none\n        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700\n        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none\n        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900\n}\n\n.p-popover-content {\n    @apply p-3\n}\n\n.p-popover-flipped {\n    @apply -mt-[10px] mb-[10px]\n}\n\n.p-popover-enter-from {\n    @apply opacity-0 scale-y-75\n}\n\n.p-popover-leave-to {\n    @apply opacity-0\n}\n\n.p-popover-enter-active {\n    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]\n}\n\n.p-popover-leave-active {\n    @apply transition-opacity duration-100 ease-linear\n}\n\n.p-popover-flipped:after,\n.p-popover-flipped:before {\n    @apply bottom-auto top-full\n}\n\n.p-popover.p-popover-flipped:after {\n    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900\n}\n\n.p-popover.p-popover-flipped:before {\n    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700\n}\n",
-  "progressbar": ".p-progressbar {\n    @apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md\n}\n\n.p-progressbar-value {\n    @apply m-0 bg-primary\n}\n\n.p-progressbar-label {\n    @apply text-primary-contrast text-xs font-semibold\n}\n\n.p-progressbar-determinate .p-progressbar-value {\n    @apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out\n}\n\n.p-progressbar-determinate .p-progressbar-label {\n    @apply inline-flex\n}\n\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];\n}\n\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];\n\n}\n\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation-delay: 1.15s;\n}\n\n@keyframes p-progressbar-indeterminate-anim {\n    0% {\n        inset-inline-start: -35%;\n        inset-inline-end: 100%;\n    }\n    60% {\n        inset-inline-start: 100%;\n        inset-inline-end: -90%;\n    }\n    100% {\n        inset-inline-start: 100%;\n        inset-inline-end: -90%;\n    }\n}\n\n@keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        inset-inline-start: -200%;\n        inset-inline-end: 100%;\n    }\n    60% {\n        inset-inline-start: 107%;\n        inset-inline-end: -8%;\n    }\n    100% {\n        inset-inline-start: 107%;\n        inset-inline-end: -8%;\n    }\n}\n",
-  "progressspinner": ".p-progressspinner {\n    @apply relative my-0 mx-auto w-[100px] h-[100px] inline-block\n        before:block before:pt-[100%]\n}\n\n.p-progressspinner-spin {\n    @apply h-full origin-center w-full absolute top-0 bottom-0 start-0 end-0 m-auto;\n}\n\n.p-progressspinner-spin {\n    animation: p-progressspinner-rotate 2s linear infinite;\n}\n\n.p-progressspinner-circle {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: 0;\n    stroke: theme(colors.red.500);\n    stroke-linecap: round;\n    animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;\n}\n\n@keyframes p-progressspinner-rotate {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes p-progressspinner-dash {\n    0% {\n        stroke-dasharray: 1, 200;\n        stroke-dashoffset: 0;\n    }\n    50% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -35px;\n    }\n    100% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -124px;\n    }\n}\n\n@keyframes p-progressspinner-color {\n    100%,\n    0% {\n        stroke: theme(colors.red.500);\n    }\n    40% {\n        stroke: theme(colors.blue.500);\n    }\n    66% {\n        stroke: theme(colors.green.500);\n    }\n    80%,\n    90% {\n        stroke: theme(colors.yellow.500);\n    }\n}\n",
-  "radiobutton": ".p-radiobutton {\n    @apply relative inline-flex select-none w-5 h-5\n}\n\n.p-radiobutton-input {\n    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10\n        border border-transparent rounded-full\n}\n\n.p-radiobutton-box {\n    @apply flex justify-center items-center rounded-full\n        border border-surface-300 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-950\n        w-5 h-5\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n}\n\n.p-radiobutton-icon {\n    @apply bg-transparent text-xs w-3 h-3 rounded-full\n        transition-all duration-200 backface-hidden\n}\n\n.p-radiobutton-icon {\n    @apply scale-[0.1]\n}\n\n.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-radiobutton-checked .p-radiobutton-box {\n    @apply border-primary bg-primary\n}\n\n.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {\n    @apply bg-primary-contrast visible\n}\n\n.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {\n    @apply scale-100\n}\n\n.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {\n    @apply border-primary-emphasis bg-primary-emphasis\n}\n\n.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {\n    @apply bg-primary-contrast\n}\n\n.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-radiobutton.p-invalid > .p-radiobutton-box {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-radiobutton.p-variant-filled .p-radiobutton-box {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-radiobutton.p-disabled {\n    @apply opacity-100\n}\n\n.p-radiobutton.p-disabled .p-radiobutton-box {\n    @apply bg-surface-200 dark:bg-surface-400\n        border-surface-300 dark:border-surface-700\n}\n\n.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {\n    @apply bg-surface-700 dark:bg-surface-400\n}\n\n.p-radiobutton-sm,\n.p-radiobutton-sm .p-radiobutton-box {\n    @apply w-4 h-4\n}\n\n.p-radiobutton-sm .p-radiobutton-icon {\n    @apply w-2 h-2\n}\n\n.p-radiobutton-lg,\n.p-radiobutton-lg .p-radiobutton-box {\n    @apply w-6 h-6\n}\n\n.p-radiobutton-lg .p-radiobutton-icon {\n    @apply w-4 h-4\n}\n",
-  "rating": ".p-rating {\n    @apply relative flex items-center gap-1\n}\n\n.p-rating-option {\n    @apply inline-flex items-center cursor-pointer rounded-full\n}\n\n.p-rating-option.p-focus-visible {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-rating-icon {\n    @apply text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200\n}\n\n.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {\n    @apply text-primary\n}\n\n.p-rating-option-active .p-rating-icon {\n    @apply text-primary\n}",
-  "ripple": ".p-ink {\n    @apply block absolute bg-black/10 dark:bg-white/30 scale-0 rounded-[100%] pointer-events-none\n}\n\n.p-ink-active {\n    @apply transition-[opacity,transform] duration-500 scale-[2.5] opacity-0 ease-linear\n}",
-  "scrollpanel": ".p-scrollpanel-content-container {\n    @apply overflow-hidden w-full h-full relative z-10 float-left\n}\n\n.p-scrollpanel-content {\n    @apply relative overflow-auto\n        h-[calc(100%+18px)] w-[calc(100%+18px)]\n        pt-0 ps-0 pr-[18px] pb-[18px] [scrollbar-width:none]\n}\n\n.p-scrollpanel-content::-webkit-scrollbar {\n    @apply hidden\n}\n\n.p-scrollpanel-bar {\n    @apply relative rounded-sm z-20 cursor-pointer opacity-0\n        bg-surface-100 dark:bg-surface-800\n        transition-opacity duration-200 border-none\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-scrollpanel-bar-y {\n    @apply w-[9px] top-0\n}\n\n.p-scrollpanel-bar-x {\n    @apply h-[9px] bottom-0\n}\n\n.p-scrollpanel-hidden {\n    @apply invisible\n}\n\n.p-scrollpanel:hover .p-scrollpanel-bar,\n.p-scrollpanel:active .p-scrollpanel-bar {\n    @apply opacity-100\n}\n\n.p-scrollpanel-grabbed {\n    @apply select-none\n}\n",
-  "scrolltop": "@import './button';\n\n.p-scrolltop.p-button {\n    @apply fixed bottom-5 end-5\n}\n\n.p-scrolltop-sticky.p-button {\n    @apply sticky flex ms-auto\n}\n\n.p-scrolltop-enter-from {\n    @apply opacity-0\n}\n\n.p-scrolltop-enter-active {\n    @apply transition-opacity duration-150\n}\n\n.p-scrolltop.p-scrolltop-leave-to {\n    @apply opacity-0\n}\n\n.p-scrolltop-leave-active {\n    @apply transition-opacity duration-150\n}\n",
-  "select": "@import './button';\n@import './inputtext';\n@import './iconfield';\n\n.p-select {\n    @apply inline-flex cursor-pointer relative select-none rounded-md\n        bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-select:not(.p-disabled):hover {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-select:not(.p-disabled).p-focus {\n    @apply border-primary\n}\n\n.p-select.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-select.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-select.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-select-clear-icon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10\n}\n\n.p-select-dropdown {\n    @apply flex items-center justify-center shrink-0 bg-transparent\n        text-surface-500 dark:text-surface-400 w-10 rounded-e-md\n}\n\n.p-select-label {\n    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]\n        py-2 px-3 overflow-ellipsis\n        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none\n}\n\n.p-select-label.p-placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-select:has(.p-select-clear-icon) .p-select-label {\n    @apply pe-7\n}\n\n.p-select.p-disabled .p-select-label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-select-label-empty {\n    @apply overflow-hidden opacity-0\n}\n\ninput.p-select-label {\n    @apply cursor-default\n}\n\n.p-select .p-select-overlay {\n    @apply min-w-full\n}\n\n.p-select-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-select-header {\n    @apply pt-2 pb-1 px-4\n}\n\n.p-select-filter {\n    @apply w-full\n}\n\n.p-select-list-container {\n    @apply overflow-auto\n}\n\n.p-select-option-group {\n    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold\n}\n\n.p-select-list {\n    @apply m-0 p-1 list-none gap-[2px] flex flex-col\n}\n\n.p-select-option {\n    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center\n        px-3 py-2 border-none text-surface-700 dark:text-surface-0 bg-transparent rounded-sm\n        transition-colors duration-200\n}\n\n.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-select-option.p-select-option-selected {\n    @apply bg-highlight\n}\n\n.p-select-option.p-select-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-select-option-check-icon {\n    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0\n}\n\n.p-select-empty-message {\n    @apply px-3 py-2\n}\n\n.p-select-fluid {\n    @apply flex\n}\n\n.p-select-sm .p-select-label {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-select-sm .p-select-dropdown .p-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-select-lg .p-select-label {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-select-lg .p-select-dropdown .p-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n",
-  "selectbutton": "@import './togglebutton';\n\n.p-selectbutton {\n    @apply inline-flex select-none rounded-md\n}\n\n.p-selectbutton .p-togglebutton {\n    @apply rounded-none border-y border-r border-s-0\n}\n\n.p-selectbutton .p-togglebutton:focus-visible {\n    @apply relative z-10\n}\n\n.p-selectbutton .p-togglebutton:first-child {\n    @apply border-s rounded-s-md\n}\n\n.p-selectbutton .p-togglebutton:last-child {\n    @apply rounded-e-md\n}\n\n.p-selectbutton.p-invalid {\n    @apply outline outline-offset-0 outline-red-400 dark:outline-red-300\n}\n",
-  "skeleton": ".p-skeleton {\n    @apply overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md\n}\n\n.p-skeleton-circle {\n    @apply rounded-full\n}\n\n.p-skeleton-animation-none::after {\n    @apply animate-none\n}\n",
-  "slider": ".p-slider {\n    @apply relative bg-surface-200 dark:bg-surface-700 rounded-sm\n}\n\n.p-slider-handle {\n    @apply cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px]\n        bg-surface-200 dark:bg-surface-700 rounded-full\n        transition-colors duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        before:w-[16px] before:h-[16px] before:block before:rounded-full\n        before:bg-surface-0 dark:before:bg-surface-950\n        before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)]\n        before:transition-colors before:duration-200\n}\n\n.p-slider-range {\n    @apply block bg-primary rounded-sm\n}\n\n.p-slider.p-slider-horizontal {\n    @apply h-[3px]\n}\n\n.p-slider-horizontal .p-slider-range {\n    @apply top-0 start-0 h-full\n}\n\n.p-slider-horizontal .p-slider-handle {\n    @apply top-1/2 -mt-[10px] -ms-[10px]\n}\n\n.p-slider-vertical {\n    @apply min-h-[100px] w-[3px]\n}\n\n.p-slider-vertical .p-slider-handle {\n    @apply start-1/2 -mb-[10px] -ms-[10px]\n}\n\n.p-slider-vertical .p-slider-range {\n    @apply bottom-0 start-0 w-full\n}\n",
-  "speeddial": "@import './button';\n\n.p-speeddial {\n    @apply static flex gap-2\n}\n\n.p-speeddial-button {\n    @apply z-10\n}\n\n.p-speeddial-button.p-speeddial-rotate {\n    @apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform\n}\n\n.p-speeddial-list {\n    @apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2\n        transition-[top] ease-linear duration-200\n}\n\n.p-speeddial-item {\n    @apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform\n}\n\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    @apply absolute\n}\n\n.p-speeddial-mask {\n    @apply absolute start-0 top-0 w-full h-full opacity-0 bg-black/40 dark:bg-black/60 rounded-md transition-opacity duration-150\n}\n\n.p-speeddial-mask-visible {\n    @apply pointer-events-none opacity-100 transition-opacity duration-150\n}\n\n.p-speeddial-open .p-speeddial-list {\n    @apply pointer-events-auto\n}\n\n.p-speeddial-open .p-speeddial-item {\n    @apply scale-100 opacity-100\n}\n\n.p-speeddial-open .p-speeddial-rotate {\n    @apply rotate-45\n}\n",
-  "splitbutton": "@import './button';\n@import './tieredmenu';\n\n.p-splitbutton {\n    @apply inline-flex relative rounded-md\n}\n\n.p-splitbutton-button {\n    @apply rounded-e-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10\n}\n\n.p-splitbutton-dropdown {\n    @apply rounded-s-none focus-visible:z-10\n}\n\n.p-splitbutton .p-menu {\n    @apply min-w-full\n}\n\n.p-splitbutton-fluid {\n    @apply w-full\n}\n\n.p-splitbutton-rounded .p-splitbutton-dropdown {\n    @apply rounded-e-[2rem]\n}\n\n.p-splitbutton-rounded .p-splitbutton-button {\n    @apply rounded-s-[2rem]\n}\n\n.p-splitbutton-raised {\n    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]\n}\n",
-  "splitter": ".p-splitter {\n    @apply flex flex-wrap\n        border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-splitter-vertical {\n    @apply flex-col\n}\n\n.p-splitter-gutter {\n    @apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700\n}\n\n.p-splitter-gutter-handle {\n    @apply rounded-md bg-transparent \n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    @apply cursor-col-resize select-none\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    @apply cursor-row-resize select-none\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    @apply h-[24px] w-full\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    @apply w-[24px] h-full\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    @apply cursor-col-resize\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    @apply cursor-row-resize\n}\n\n.p-splitterpanel {\n    @apply flex-grow overflow-hidden\n}\n\n.p-splitterpanel-nested {\n    @apply flex\n}\n\n.p-splitterpanel .p-splitter {\n    @apply flex-grow border-none\n}",
-  "stepper": ".p-steplist {\n    @apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto\n}\n\n.p-step {\n    @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial\n}\n\n.p-step-header {\n    @apply border-none inline-flex items-center no-underline cursor-pointer\n        transition-colors duration-200 rounded-md bg-transparent p-0 gap-2\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-step.p-disabled .p-step-header {\n    @apply cursor-default\n}\n\n\n.p-stepper.p-stepper-readonly .p-step {\n    @apply cursor-auto\n}\n\n.p-step-title {\n    @apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full\n        text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200\n}\n\n.p-step-number {\n    @apply flex items-center justify-center text-surface-500 dark:text-surface-400\n        bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700\n        min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative\n        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]\n}\n\n.p-step-active .p-step-header {\n    @apply cursor-default\n}\n\n.p-step-active .p-step-number {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700\n}\n\n.p-step-active .p-step-title {\n    @apply text-primary\n}\n\n.p-step:not(.p-disabled):focus-visible {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-step:has(~ .p-step-active) .p-stepper-separator {\n    @apply bg-primary\n}\n\n.p-stepper-separator {\n    @apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200\n}\n\n.p-steppanels {\n    @apply pt-[0.875rem] pb-[1.125rem] px-2\n}\n\n.p-steppanel {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-stepper:has(.p-stepitem) {\n    @apply flex flex-col\n}\n\n.p-stepitem {\n    @apply flex flex-col flex-initial\n}\n\n.p-stepitem.p-stepitem-active {\n    @apply flex-auto\n}\n\n.p-stepitem .p-step {\n    @apply flex-initial\n}\n\n.p-stepitem .p-steppanel-content {\n    @apply w-full ps-4\n}\n\n.p-stepitem .p-steppanel {\n    @apply flex flex-auto\n}\n\n.p-stepitem .p-stepper-separator {\n    @apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ms-[1.625rem] relative start-[-2.5px]\n}\n\n.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {\n    @apply bg-primary\n}\n\n.p-stepitem:last-of-type .p-steppanel {\n    @apply ps-8\n}\n",
-  "tabs": ".p-tabs {\n    @apply flex flex-col\n}\n\n.p-tablist {\n    @apply flex relative\n}\n\n.p-tabs-scrollable > .p-tablist {\n    @apply overflow-hidden\n}\n\n.p-tablist-viewport {\n    @apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto\n}\n\n.p-tablist-viewport::-webkit-scrollbar {\n    @apply hidden\n}\n\n.p-tablist-tab-list {\n    @apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700\n}\n\n.p-tablist-content {\n    @apply flex-grow\n}\n\n.p-tablist-nav-button {\n    @apply !absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer\n        bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10\n        shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50\n        focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-tablist-prev-button {\n    @apply start-0\n}\n\n.p-tablist-next-button {\n    @apply end-0\n}\n\n.p-tablist-prev-button:dir(rtl),\n.p-tablist-next-button:dir(rtl) {\n    @apply rotate-180\n}\n\n.p-tab {\n    @apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem]\n        border-b border-surface-200 dark:border-surface-700 font-semibold\n        text-surface-500 dark:text-surface-400\n        transition-colors duration-200 -mb-px\n}\n\n.p-tab.p-disabled {\n    @apply cursor-default\n}\n\n.p-tab:not(.p-disabled):focus-visible {\n    @apply z-10 outline outline-1 outline-offset-[-1px] outline-primary\n}\n\n.p-tab:not(.p-tab-active):not(.p-disabled):hover {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-tab-active {\n    @apply border-primary text-primary\n}\n\n.p-tabpanels {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n        pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none\n}\n\n.p-tablist-active-bar {\n    @apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]\n}\n\n.p-tablist-viewport {\n    @apply [scrollbar-behavior:smooth] [scrollbar-width:none]\n}\n",
-  "tag": ".p-tag {\n    @apply inline-flex items-center justify-center\n        bg-primary-100 dark:bg-primary-500/15\n        text-primary-700 dark:text-primary-300\n        text-sm font-bold py-1 px-2 rounded-md gap-1\n}\n\n.p-tag-icon {\n    @apply text-xs w-3 h-3\n}\n\n.p-tag-rounded {\n    @apply rounded-2xl\n}\n\n.p-tag-success {\n    @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300\n}\n\n.p-tag-info {\n    @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300\n}\n\n.p-tag-warn {\n    @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300\n}\n\n.p-tag-danger {\n    @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300\n}\n\n.p-tag-secondary {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300\n}\n\n.p-tag-contrast {\n    @apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950\n}",
-  "tailwind": "@import './common';\n\n/* Form */\n@import './autocomplete';\n@import './cascadeselect';\n@import './checkbox';\n@import './colorpicker';\n@import './datepicker';\n@import './iconfield';\n@import './iftalabel';\n@import './inputgroup';\n@import './inputnumber';\n@import './inputotp';\n@import './inputtext';\n@import './floatlabel';\n@import './knob';\n@import './listbox';\n@import './multiselect';\n@import './password';\n@import './radiobutton';\n@import './rating';\n@import './select';\n@import './selectbutton';\n@import './slider';\n@import './textarea';\n@import './togglebutton';\n@import './toggleswitch';\n@import './treeselect';\n\n/* Button */\n@import './button';\n@import './buttongroup';\n@import './speeddial';\n@import './splitbutton';\n\n/* Data */\n@import './datatable';\n@import './dataview';\n@import './paginator';\n@import './picklist';\n@import './orderlist';\n@import './organizationchart';\n@import './timeline';\n@import './tree';\n@import './treetable';\n\n/* Overlay */\n@import './confirmdialog';\n@import './confirmpopup';\n@import './dialog';\n@import './drawer';\n@import './popover';\n@import './tooltip';\n\n/* Menu */\n@import './breadcrumb';\n@import './contextmenu';\n@import './dock';\n@import './menu';\n@import './menubar';\n@import './megamenu';\n@import './panelmenu';\n@import './tieredmenu';\n\n/* Panel */\n@import './accordion';\n@import './card';\n@import './divider';\n@import './fieldset';\n@import './panel';\n@import './scrollpanel';\n@import './splitter';\n@import './stepper';\n@import './tabs';\n@import './toolbar';\n\n/* File */\n@import './fileupload';\n\n/* Message */\n@import './message';\n@import './toast';\n\n/* Media */\n@import './carousel';\n@import './galleria';\n@import './image';\n@import './imagecompare';\n\n/* Misc */\n@import './avatar';\n@import './badge';\n@import './blockui';\n@import './chip';\n@import './inplace';\n@import './metergroup';\n@import './overlaybadge';\n@import './progressbar';\n@import './progressspinner';\n@import './ripple';\n@import './scrolltop';\n@import './skeleton';\n@import './tag';\n@import './terminal';\n",
-  "terminal": ".p-terminal {\n    @apply h-72 overflow-auto px-3 py-2 rounded-md\n        border border-surface-300 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n}\n\n.p-terminal-prompt {\n    @apply flex items-center\n}\n\n.p-terminal-prompt-value {\n    @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base\n}\n\n.p-terminal-prompt-label {\n    @apply me-1\n}\n\n.p-terminal-input::-ms-clear {\n    @apply hidden\n}\n",
-  "textarea": ".p-textarea {\n    @apply appearance-none rounded-md\n        border border-surface-300 dark:border-surface-700\n        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600\n        enabled:focus:border-primary\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n        disabled:bg-surface-200 disabled:text-surface-500 disabled:opacity-100 dark:disabled:bg-surface-700 dark:disabled:text-surface-400\n        placeholder:text-surface-500 dark:placeholder:text-surface-400\n        px-3 py-2\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        outline-none\n}\n\n.p-textarea.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-textarea.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-textarea-fluid {\n    @apply w-full\n}\n\n.p-textarea-resizable {\n    @apply overflow-hidden resize-none\n}\n\n.p-textarea-sm {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-textarea-lg {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n",
-  "tieredmenu": ".p-tieredmenu {\n    @apply bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        rounded-md min-w-52\n}\n\n.p-tieredmenu-root-list,\n.p-tieredmenu-submenu {\n    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]\n}\n\n.p-tieredmenu-submenu {\n    @apply absolute min-w-full z-10 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-tieredmenu-item {\n    @apply relative\n}\n\n.p-tieredmenu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-tieredmenu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-tieredmenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-tieredmenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-tieredmenu-overlay {\n    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-tieredmenu-enter-from,\n.p-tieredmenu-leave-active {\n    @apply opacity-0\n}\n\n.p-tieredmenu-enter-active {\n    @apply transition-opacity duration-[250ms]\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu {\n    @apply static shadow-none border-none ps-4 pe-0\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply -rotate-90\n}\n",
-  "timeline": ".p-timeline {\n    @apply flex flex-col flex-grow\n}\n\n.p-timeline-left .p-timeline-event-opposite {\n    @apply text-end\n}\n\n.p-timeline-left .p-timeline-event-content {\n    @apply text-start\n}\n\n.p-timeline-right .p-timeline-event {\n    @apply flex-row-reverse\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n    @apply text-start\n}\n\n.p-timeline-right .p-timeline-event-content {\n    @apply text-end\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    @apply flex-row-reverse\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    @apply text-end\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    @apply text-start\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    @apply text-start\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    @apply text-end\n}\n\n.p-timeline-vertical .p-timeline-event-opposite,\n.p-timeline-vertical .p-timeline-event-content {\n    @apply py-0 px-4 leading-none\n}\n\n.p-timeline-vertical .p-timeline-event-connector {\n    @apply w-[2px]\n}\n\n.p-timeline-event {\n    @apply flex relative min-h-20 last:min-h-0\n}\n\n.p-timeline-event-opposite {\n    @apply flex-1\n}\n\n.p-timeline-event-content {\n    @apply flex-1\n}\n\n.p-timeline-event-separator {\n    @apply flex-none flex flex-col items-center\n}\n\n.p-timeline-event-marker {\n    @apply inline-flex items-center justify-center relative self-baseline\n        border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem]\n        bg-surface-0 dark:bg-surface-900\n        before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary\n        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]\n}\n\n.p-timeline-event-connector {\n    @apply flex-grow bg-surface-200 dark:bg-surface-700\n}\n\n.p-timeline-horizontal {\n    @apply flex-row\n}\n\n.p-timeline-horizontal .p-timeline-event {\n    @apply flex-col flex-1\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n    @apply flex-none\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n    @apply flex-row\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n    @apply w-full h-[2px]\n}\n\n.p-timeline-horizontal .p-timeline-event-opposite,\n.p-timeline-horizontal .p-timeline-event-content {\n    @apply py-4 px-0\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    @apply flex-col-reverse\n}\n\n.p-timeline-bottom .p-timeline-event {\n    @apply flex-col-reverse\n}\n",
-  "toast": ".p-toast {\n    @apply w-96 rounded-md whitespace-pre-line break-words\n}\n\n.p-toast-message {\n    @apply mb-4\n}\n\n.p-toast-message-icon {\n    @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]\n}\n\n.p-toast-message-content {\n    @apply flex items-start p-3 gap-2\n}\n\n.p-toast-message-text {\n    @apply flex-auto flex flex-col gap-2\n}\n\n.p-toast-summary {\n    @apply font-medium text-base\n}\n\n.p-toast-detail {\n    @apply font-medium text-sm\n}\n\n.p-toast-close-button {\n    @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none\n        transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -end-1/4 p-0 border-none\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n}\n\n.p-toast-close-button:dir(rtl) {\n    @apply ms-auto end-auto\n}\n\n.p-toast-message-info,\n.p-toast-message-success,\n.p-toast-message-warn,\n.p-toast-message-error,\n.p-toast-message-secondary,\n.p-toast-message-contrast {\n    @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md\n}\n\n.p-toast-close-icon {\n    @apply text-base w-4 h-4\n}\n\n.p-toast-message-info {\n    @apply bg-blue-50/95 border-blue-200 text-blue-600\n        dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500\n        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]\n}\n\n.p-toast-message-info .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-info .p-toast-close-button {\n    @apply hover:bg-blue-100 focus-visible:outline-blue-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500\n}\n\n.p-toast-message-success {\n    @apply bg-green-50/95 border-green-200 text-green-600\n        dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500\n        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]\n}\n\n.p-toast-message-success .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-success .p-toast-close-button {\n    @apply hover:bg-green-100 focus-visible:outline-green-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-green-500\n}\n\n.p-toast-message-warn {\n    @apply bg-yellow-50/95 border-yellow-200 text-yellow-600\n        dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500\n        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]\n}\n\n.p-toast-message-warn .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-warn .p-toast-close-button {\n    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500\n}\n\n.p-toast-message-error {\n    @apply bg-red-50/95 border-red-200 text-red-600\n        dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500\n        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]\n}\n\n.p-toast-message-error .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-error .p-toast-close-button {\n    @apply hover:bg-red-100 focus-visible:outline-red-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-red-500\n}\n\n.p-toast-message-secondary {\n    @apply bg-surface-100 border-surface-200 text-surface-600\n        dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300\n        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-toast-message-secondary .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-secondary .p-toast-close-button {\n    @apply hover:bg-surface-200 focus-visible:outline-surface-600\n        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300\n}\n\n.p-toast-message-contrast {\n    @apply bg-surface-900 border-surface-950 text-surface-50\n        dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950\n        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-toast-message-contrast .p-toast-detail {\n    @apply text-surface-0 dark:text-surface-950\n}\n\n.p-toast-message-contrast .p-toast-close-button {\n    @apply hover:bg-surface-800 focus-visible:outline-surface-50\n        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950\n}\n\n.p-toast-top-center {\n    @apply -translate-x-1/2;\n}\n\n.p-toast-bottom-center {\n    @apply -translate-x-1/2;\n}\n\n.p-toast-center {\n    @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2\n}\n\n.p-toast-message-enter-from {\n    @apply opacity-0 translate-y-1/2\n}\n\n.p-toast-message-leave-from {\n    @apply max-h-[1000px]\n}\n\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    @apply max-h-0 opacity-0 mb-0 overflow-hidden\n}\n\n.p-toast-message-enter-active {\n    @apply [transition:transform_0.3s,opacity_0.3s]\n}\n\n.p-toast-message-leave-active {\n    @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]\n}\n",
-  "togglebutton": ".p-togglebutton {\n    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none\n        border border-surface-100 dark:border-surface-950 rounded-md\n        bg-surface-100 dark:bg-surface-950\n        text-surface-500 dark:text-surface-400 text-base font-medium\n        px-4 py-2\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        disabled:opacity-100 disabled:cursor-default\n        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500\n        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400\n        transition-colors duration-300\n        before:bg-transparent before:absolute before:start-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]\n        before:transition-colors before:duration-200\n}\n\n.p-togglebutton-content {\n    @apply relative inline-flex items-center justify-center gap-2\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    @apply relative transition-none\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n    @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0\n}\n\n.p-togglebutton.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-togglebutton-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    @apply text-surface-700 dark:text-surface-300\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    @apply text-surface-900 dark:text-surface-0\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-togglebutton-sm {\n    @apply text-sm px-[0.75rem] py-[0.375rem]\n}\n\n.p-togglebutton-lg {\n    @apply text-lg px-[1.25rem] py-[0.625rem]\n}\n",
-  "toggleswitch": ".p-toggleswitch {\n    @apply inline-block w-10 h-6\n}\n\n.p-toggleswitch-input {\n    @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 start-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]\n}\n\n.p-toggleswitch-slider {\n    @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        bg-surface-300 dark:bg-surface-700\n        border border-transparent\n        transition-colors duration-200\n}\n\n.p-toggleswitch-handle {\n    @apply absolute top-1/2 flex justify-center items-center\n        bg-surface-0 dark:bg-surface-400\n        text-surface-500 dark:text-surface-900\n        w-4 h-4 start-1 -mt-2 rounded-full\n        transition-[background,color,left] duration-200\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {\n    @apply bg-primary\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary start-5\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {\n    @apply bg-surface-400 dark:bg-surface-600\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {\n    @apply bg-primary-emphasis\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-toggleswitch.p-invalid > .p-toggleswitch-slider {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-toggleswitch.p-disabled {\n    @apply opacity-100\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-slider {\n    @apply bg-surface-200 dark:bg-surface-600\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-handle {\n    @apply bg-surface-700 dark:bg-surface-900\n}\n",
-  "toolbar": ".p-toolbar {\n    @apply flex items-center justify-between flex-wrap p-3 gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700 rounded-md\n}\n\n.p-toolbar-start,\n.p-toolbar-center,\n.p-toolbar-end {\n    @apply flex items-center\n}",
-  "tooltip": ".p-tooltip {\n    @apply absolute hidden max-w-48\n}\n\n.p-tooltip-right,\n.p-tooltip-left {\n    @apply py-0 px-1\n}\n\n.p-tooltip-top,\n.p-tooltip-bottom {\n    @apply py-1 px-0\n}\n\n.p-tooltip-text {\n    @apply whitespace-pre-line break-words  bg-surface-700 text-surface-0 py-2 px-3\n        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-tooltip-arrow {\n    @apply absolute w-0 h-0 border-solid border-transparent\n}\n\n.p-tooltip-right .p-tooltip-arrow {\n    @apply -mt-1 border-[.25rem] border-s-0 border-e-surface-700 rtl:rotate-180\n}\n\n.p-tooltip-left .p-tooltip-arrow {\n    @apply -mt-1 border-[.25rem] border-e-0 border-s-surface-700 rtl:rotate-180\n}\n\n.p-tooltip-top .p-tooltip-arrow {\n    @apply -ms-1 border-[.25rem] border-b-0 border-t-surface-700\n}\n\n.p-tooltip-bottom .p-tooltip-arrow {\n    @apply -ms-1 border-[.25rem] border-t-0 border-b-surface-700\n}\n",
-  "tree": ".p-tree {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 p-4\n}\n\n.p-tree-root-children,\n.p-tree-node-children {\n    @apply flex flex-col list-none m-0 gap-[2px]\n}\n\n.p-tree-root-children {\n    @apply pt-[2px] pb-0 px-0\n}\n\n.p-tree-node-children {\n    @apply pt-[2px] pe-0 pb-0 ps-4\n}\n\n.p-tree-node {\n    @apply p-0 outline-none\n}\n\n.p-tree-node-content {\n    @apply rounded-md px-2 py-1 flex items-center text-surface-700 dark:text-surface-0 gap-1 transition-colors duration-200\n}\n\n.p-tree-node:focus-visible > .p-tree-node-content {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {\n    @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-tree-node-content.p-tree-node-selected {\n    @apply bg-highlight\n}\n\n.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {\n    @apply text-inherit\n}\n\n.p-tree-node-toggle-button {\n    @apply cursor-pointer select-none inline-flex justify-center rounded-full items-center overflow-hidden relative flex-shrink-0\n        w-7 h-7 p-0 transition-colors duration-200 border-none\n        bg-transparent enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-800\n        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-600 dark:enabled:hover:text-surface-300\n}\n\n.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary\n}\n\n.p-tree-root {\n    @apply overflow-auto\n}\n\n.p-tree-node-selectable {\n    @apply cursor-pointer select-none\n}\n\n.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {\n    @apply invisible\n}\n\n.p-tree-node-icon {\n    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200\n}\n\n.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {\n    @apply text-primary\n}\n\n.p-tree-filter {\n    @apply mb-2\n}\n\n.p-tree-filter-input {\n    @apply w-full\n}\n\n.p-tree-loading {\n    @apply relative h-full\n}\n\n.p-tree-loading-icon {\n    @apply text-[2rem] h-8 w-8\n}\n\n.p-tree .p-tree-mask {\n    @apply absolute z-10 flex items-center justify-center\n}\n\n.p-tree-flex-scrollable {\n    @apply flex flex-1 h-full flex-col\n}\n\n.p-tree-flex-scrollable .p-tree-root {\n    @apply flex-1\n}\n",
-  "treeselect": "@import './chip';\n@import './tree';\n\n.p-treeselect {\n    @apply inline-flex cursor-pointer relative select-none rounded-md\n        bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200\n}\n\n.p-treeselect:not(.p-disabled):hover {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-treeselect:not(.p-disabled).p-focus {\n    @apply border-primary\n}\n\n.p-treeselect.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-treeselect.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-treeselect.p-disabled {\n    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default\n}\n\n.p-treeselect-dropdown {\n    @apply flex items-center justify-center shrink-0 bg-transparent\n        text-surface-500 dark:text-surface-400 w-10 rounded-e-md\n}\n\n.p-treeselect-clear-icon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10\n}\n\n.p-treeselect-label-container {\n    @apply overflow-hidden flex-auto\n}\n\n.p-treeselect-label {\n    @apply flex items-center gap-1 whitespace-nowrap text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0\n}\n\n.p-treeselect-label.p-placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-treeselect.p-disabled .p-treeselect-label {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-treeselect-label-empty {\n    @apply overflow-hidden invisible\n}\n\n.p-treeselect .p-treeselect-overlay {\n    @apply min-w-full\n}\n\n.p-treeselect-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n\n.p-treeselect-tree-container {\n    @apply overflow-auto\n}\n\n.p-treeselect-empty-message {\n    @apply px-3 py-2\n}\n\n.p-treeselect-fluid {\n    @apply flex\n}\n\n.p-treeselect-overlay .p-tree {\n    @apply p-1\n}\n\n.p-treeselect-overlay .p-tree-loading {\n    @apply min-h-12\n}\n\n.p-treeselect-label .p-chip {\n    @apply pt-1 pb-1 rounded-sm\n}\n\n.p-treeselect-label:has(.p-chip) {\n    @apply py-1 px-1\n}\n\n.p-treeselect-sm .p-treeselect-label {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-treeselect-sm .p-treeselect-dropdown .p-icon {\n    @apply text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-treeselect-lg .p-treeselect-label {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-treeselect-lg .p-treeselect-dropdown .p-icon {\n    @apply text-lg w-[1.125rem] h-[1.125rem]\n}\n",
-  "treetable": "@import './paginator';\n\n.p-treetable {\n    @apply relative\n}\n\n.p-treetable-table {\n    @apply border-spacing-0 w-full\n}\n\n.p-treetable-scrollable > .p-treetable-table-container {\n    @apply relative\n}\n\n.p-treetable-scrollable-table > .p-treetable-thead {\n    @apply top-0 z-10\n}\n\n.p-treetable-scrollable-table > .p-treetable-frozen-tbody {\n    @apply sticky z-10\n}\n\n.p-treetable-scrollable-table>.p-treetable-tfoot {\n    @apply bottom-0 z-10\n}\n\n.p-treetable-scrollable .p-treetable-frozen-column {\n    @apply sticky bg-surface-0 dark:bg-surface-900\n}\n\n.p-treetable-scrollable th.p-treetable-frozen-column {\n    @apply z-10\n}\n\n.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {\n    @apply bg-surface-0 dark:bg-surface-900\n}\n\n.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot  {\n    @apply bg-surface-0 dark:bg-surface-900\n}\n\n.p-treetable-flex-scrollable {\n    @apply flex flex-col h-full\n}\n\n.p-treetable-flex-scrollable > .p-treetable-table-container {\n    @apply flex flex-col flex-1 h-full\n}\n\n.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header {\n    @apply sticky z-10\n}\n\n.p-treetable-resizable-table > .p-treetable-thead > tr > th,\n.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,\n.p-treetable-resizable-table > .p-treetable-tbody > tr > td {\n    @apply overflow-hidden whitespace-nowrap\n}\n\n.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {\n    @apply bg-clip-padding relative\n}\n\n.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer {\n    @apply hidden\n}\n\n.p-treetable-column-resizer {\n    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent\n}\n\n.p-treetable-column-header-content {\n    @apply flex items-center gap-2\n}\n\n.p-treetable-column-resize-indicator {\n    @apply w-px absolute z-10 hidden bg-primary\n}\n\n.p-treetable-mask {\n    @apply absolute flex items-center justify-center z-20\n}\n\n.p-treetable-paginator-top {\n    @apply border-b border-surface-200 dark:border-surface-700\n}\n\n.p-treetable-paginator-bottom {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-treetable-header {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-treetable-footer {\n    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-treetable-header-cell {\n    @apply py-3 px-4 font-normal text-start transition-colors duration-200\n        border-b border-surface-200 dark:border-surface-700\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-treetable-column-title {\n    @apply font-semibold\n}\n\n.p-treetable-tbody > tr {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200\n}\n\n.p-treetable-tbody > tr > td {\n    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800\n}\n\n.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-treetable-tbody > tr.p-treetable-row-selected {\n    @apply bg-highlight\n}\n\n.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {\n    @apply border-b-primary-100 dark:border-b-primary-900\n}\n\n.p-treetable-tbody > tr.p-treetable-row-selected > td {\n    @apply border-b-primary-100 dark:border-b-primary-900\n}\n\n.p-treetable-tbody > tr:focus-visible,\n.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {\n    @apply outline outline-1 -outline-offset-1 outline-primary\n}\n\n.p-treetable-tfoot > tr > td {\n    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-treetable-column-footer {\n    @apply font-semibold\n}\n\n.p-treetable-sortable-column {\n    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary\n}\n\n.p-treetable-column-title,\n.p-treetable-sort-icon,\n.p-treetable-sort-badge {\n    @apply align-middle\n}\n\n.p-treetable-sort-icon {\n    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200\n}\n\n.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {\n    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0\n}\n\n.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-treetable-column-sorted {\n    @apply bg-highlight\n}\n\n.p-treetable-column-sorted .p-treetable-sort-icon {\n    @apply bg-highlight\n}\n\n.p-treetable-hoverable .p-treetable-selectable-row {\n    @apply cursor-pointer\n}\n\n.p-treetable-loading-icon {\n    @apply text-[2rem] w-8 h-8\n}\n\n.p-treetable-gridlines .p-treetable-header {\n    @apply border-t border-x\n}\n\n.p-treetable-gridlines .p-treetable-footer {\n    @apply border-b border-x\n}\n\n.p-treetable-gridlines .p-treetable-paginator-top {\n    @apply border-t border-x\n}\n\n.p-treetable-gridlines .p-treetable-paginator-bottom {\n    @apply border-b border-x\n}\n\n.p-treetable-gridlines .p-treetable-thead > tr > th {\n    @apply border-t border-x last:border\n}\n\n.p-treetable-gridlines .p-treetable-tbody > tr > td {\n    @apply border-t border-s last:border-r\n}\n\n.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {\n    @apply border-y border-s last:border\n}\n\n.p-treetable-gridlines .p-treetable-tfoot > tr > td {\n    @apply border-y border-s last:border\n}\n\n.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {\n    @apply border-b border-s last:border-r\n}\n\n.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {\n    @apply border-b border-s last:border-r\n}\n\n.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {\n    @apply border-x\n}\n\n.p-treetable.p-treetable-sm .p-treetable-header {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-sm .p-treetable-footer {\n    @apply py-1 px-2\n}\n\n.p-treetable.p-treetable-lg .p-treetable-header {\n    @apply py-4 px-5\n}\n\n.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {\n    @apply py-4 px-5\n}\n\n.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {\n    @apply py-4 px-5\n}\n\n.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {\n    @apply py-4 px-5\n}\n\n.p-treetable.p-treetable-lg .p-treetable-footer {\n    @apply py-4 px-5\n}\n\n.p-treetable-body-cell-content {\n    @apply flex items-center gap-2\n}\n\n.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button {\n    @apply text-inherit\n}\n\n.p-treetable-node-toggle-button {\n    @apply inline-flex items-center justify-center overflow-hidden relative select-none\n        transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer\n        enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900\n        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n\n}\n\n.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary\n}\n\n.p-treetable-node-toggle-icon:dir(rtl) {\n    @apply rotate-180\n}\n"
-}
\ No newline at end of file
diff --git a/apps/labs/doc/confirmdialog/AccessibilityDoc.vue b/apps/labs/doc/confirmdialog/AccessibilityDoc.vue
deleted file mode 100644
index ebdb428f9..000000000
--- a/apps/labs/doc/confirmdialog/AccessibilityDoc.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default
-            behavior. In addition <i>aria-modal</i> is added since focus is kept within the popup.
-        </p>
-
-        <p>
-            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
-            trigger and the dialog is defined.
-        </p>
-        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Overlay Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the next the focusable element within the dialog.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element within the dialog.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the dialog.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Buttons Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Closes the dialog.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Closes the dialog.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<ConfirmDialog id="confirm" />
-
-<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
-`
-            },
-            code2: {
-                basic: `
-<script setup>
-const confirm = useConfirm();
-const isVisible = ref(false);
-
-const openDialog = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        onShow: () => {
-            isVisible.value = true;
-        },
-        onHide: () => {
-            isVisible.value = false;
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmdialog/BasicDoc.vue b/apps/labs/doc/confirmdialog/BasicDoc.vue
deleted file mode 100644
index 57fbac265..000000000
--- a/apps/labs/doc/confirmdialog/BasicDoc.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
-    </DocSectionText>
-    <ConfirmDialog></ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-center">
-        <Button @click="confirm1()" label="Save" outlined></Button>
-        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmDialog></ConfirmDialog>
-<Button @click="confirm1()" label="Save" outlined></Button>
-<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
-`,
-                options: `
-<template>
-    <Toast />
-    <ConfirmDialog></ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-center">
-        <Button @click="confirm1()" label="Save" outlined></Button>
-        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        confirm1() {
-            this.$confirm.require({
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-exclamation-triangle',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    outlined: true
-                },
-                acceptProps: {
-                    label: 'Save'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        },
-        confirm2() {
-            this.$confirm.require({
-                message: 'Do you want to delete this record?',
-                header: 'Danger Zone',
-                icon: 'pi pi-info-circle',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    outlined: true
-                },
-                acceptProps: {
-                    label: 'Delete',
-                    severity: 'danger'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <Toast />
-    <ConfirmDialog></ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-center">
-        <Button @click="confirm1()" label="Save" outlined></Button>
-        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm1 = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        icon: 'pi pi-exclamation-triangle',
-        rejectProps: {
-            label: 'Cancel',
-            severity: 'secondary',
-            outlined: true
-        },
-        acceptProps: {
-            label: 'Save'
-        },
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-
-const confirm2 = () => {
-    confirm.require({
-        message: 'Do you want to delete this record?',
-        header: 'Danger Zone',
-        icon: 'pi pi-info-circle',
-        rejectLabel: 'Cancel',
-        rejectProps: {
-            label: 'Cancel',
-            severity: 'secondary',
-            outlined: true
-        },
-        acceptProps: {
-            label: 'Delete',
-            severity: 'danger'
-        },
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        confirm1() {
-            this.$confirm.require({
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-exclamation-triangle',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    outlined: true
-                },
-                acceptProps: {
-                    label: 'Save'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        },
-        confirm2() {
-            this.$confirm.require({
-                message: 'Do you want to delete this record?',
-                header: 'Danger Zone',
-                icon: 'pi pi-info-circle',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    outlined: true
-                },
-                acceptProps: {
-                    label: 'Delete',
-                    severity: 'danger'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmdialog/ConfirmationServiceDoc.vue b/apps/labs/doc/confirmdialog/ConfirmationServiceDoc.vue
deleted file mode 100644
index 7f5eeee0e..000000000
--- a/apps/labs/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-    <div class="doc-section-description">
-        <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
-    </div>
-    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-import {createApp} from 'vue';
-import ConfirmationService from 'primevue/confirmationservice';
-
-const app = createApp(App);
-app.use(ConfirmationService);
-`
-            },
-            code2: {
-                basic: `
-import { useConfirm } from "primevue/useconfirm";
-
-const confirm = useConfirm();
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmdialog/HeadlessDoc.vue b/apps/labs/doc/confirmdialog/HeadlessDoc.vue
deleted file mode 100644
index d5431a783..000000000
--- a/apps/labs/doc/confirmdialog/HeadlessDoc.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
-    </DocSectionText>
-    <ConfirmDialog group="headless">
-        <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
-                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
-                    <i class="pi pi-question text-5xl"></i>
-                </div>
-                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
-                <p class="mb-0">{{ message.message }}</p>
-                <div class="flex items-center gap-2 mt-6">
-                    <Button label="Save" @click="acceptCallback" class="w-32"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
-                </div>
-            </div>
-        </template>
-    </ConfirmDialog>
-    <div class="card flex justify-center">
-        <Button @click="requireConfirmation()" label="Save"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmDialog group="headless">
-    <template #container="{ message, acceptCallback, rejectCallback }">
-        <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
-            <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
-                <i class="pi pi-question text-5xl"></i>
-            </div>
-            <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
-            <p class="mb-0">{{ message.message }}</p>
-            <div class="flex items-center gap-2 mt-6">
-                <Button label="Save" @click="acceptCallback" class="w-32"></Button>
-                <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
-            </div>
-        </div>
-    </template>
-</ConfirmDialog>
-<Button @click="requireConfirmation()" label="Save"></Button>
-`,
-                options: `
-<template>
-    <ConfirmDialog group="headless">
-        <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
-                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
-                    <i class="pi pi-question text-5xl"></i>
-                </div>
-                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
-                <p class="mb-0">{{ message.message }}</p>
-                <div class="flex items-center gap-2 mt-6">
-                    <Button label="Save" @click="acceptCallback" class="w-32"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
-                </div>
-            </div>
-        </template>
-    </ConfirmDialog>
-    <div class="card flex justify-center">
-        <Button @click="requireConfirmation()" label="Save"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script>
-export default {
-    methods: {
-        requireConfirmation() {
-            this.$confirm.require({
-                group: 'headless',
-                header: 'Are you sure?',
-                message: 'Please confirm to proceed.',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <ConfirmDialog group="headless">
-        <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
-                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
-                    <i class="pi pi-question text-5xl"></i>
-                </div>
-                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
-                <p class="mb-0">{{ message.message }}</p>
-                <div class="flex items-center gap-2 mt-6">
-                    <Button label="Save" @click="acceptCallback"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback"></Button>
-                </div>
-            </div>
-        </template>
-    </ConfirmDialog>
-    <div class="card flex justify-center">
-        <Button @click="requireConfirmation()" label="Save"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const requireConfirmation = () => {
-    confirm.require({
-        group: 'headless',
-        header: 'Are you sure?',
-        message: 'Please confirm to proceed.',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        requireConfirmation() {
-            this.$confirm.require({
-                group: 'headless',
-                header: 'Are you sure?',
-                message: 'Please confirm to proceed.',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmdialog/ImportDoc.vue b/apps/labs/doc/confirmdialog/ImportDoc.vue
deleted file mode 100644
index 85c50e88e..000000000
--- a/apps/labs/doc/confirmdialog/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ConfirmDialog from 'primevue/confirmdialog';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmdialog/PositionDoc.vue b/apps/labs/doc/confirmdialog/PositionDoc.vue
deleted file mode 100644
index 06e410c0f..000000000
--- a/apps/labs/doc/confirmdialog/PositionDoc.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>position</i> property of the confirm options specifies the location of the Dialog.</p>
-    </DocSectionText>
-    <ConfirmDialog group="positioned"></ConfirmDialog>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-2 mb-4">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-        <div class="flex flex-wrap justify-center gap-2 mb-4">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-        <div class="flex flex-wrap justify-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmDialog group="positioned"></ConfirmDialog>
-<div class="flex flex-wrap justify-center gap-2 mb-4">
-    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
-</div>
-<div class="flex flex-wrap justify-center gap-2 mb-4">
-    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
-</div>
-<div class="flex flex-wrap justify-center gap-2">
-    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
-</div>
-`,
-                options: `
-<template>
-    <Toast />
-    <ConfirmDialog group="positioned"></ConfirmDialog>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-2 mb-4">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-        <div class="flex flex-wrap justify-center gap-2 mb-4">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-        <div class="flex flex-wrap justify-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        confirmPosition(position) {
-            this.$confirm.require({
-                group: 'positioned',
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-info-circle',
-                position: position,
-                rejectClass: 'p-button-secondary p-button-text',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    text: true
-                },
-                acceptProps: {
-                    label: 'Save',
-                    text: true
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
-                }
-            });
-        },
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <Toast />
-    <ConfirmDialog group="positioned"></ConfirmDialog>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-2 mb-4">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-        <div class="flex flex-wrap justify-center gap-2 mb-4">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-        <div class="flex flex-wrap justify-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirmPosition = (position) => {
-    confirm.require({
-        group: 'positioned',
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        icon: 'pi pi-info-circle',
-        position: position,
-        rejectProps: {
-            label: 'Cancel',
-            severity: 'secondary',
-            text: true
-        },
-        acceptProps: {
-            label: 'Save',
-            text: true
-        },
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        confirmPosition(position) {
-            this.$confirm.require({
-                group: 'positioned',
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-info-circle',
-                position: position,
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    text: true
-                },
-                acceptProps: {
-                    label: 'Save',
-                    text: true
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmdialog/TemplateDoc.vue b/apps/labs/doc/confirmdialog/TemplateDoc.vue
deleted file mode 100644
index 12956bbfe..000000000
--- a/apps/labs/doc/confirmdialog/TemplateDoc.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Templating allows customizing the message content.</p>
-    </DocSectionText>
-    <ConfirmDialog group="templating">
-        <template #message="slotProps">
-            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
-                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
-                <p>{{ slotProps.message.message }}</p>
-            </div>
-        </template>
-    </ConfirmDialog>
-    <div class="card flex justify-center">
-        <Button @click="showTemplate()" label="Save"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmDialog group="templating">
-    <template #message="slotProps">
-        <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
-            <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
-            <p>{{ slotProps.message.message }}</p>
-        </div>
-    </template>
-</ConfirmDialog>
-<Button @click="showTemplate()" label="Save"></Button>
-`,
-                options: `
-<template>
-    <ConfirmDialog group="templating">
-        <template #message="slotProps">
-            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
-                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
-                <p>{{ slotProps.message.message }}</p>
-            </div>
-        </template>
-    </ConfirmDialog>
-    <div class="card flex justify-center">
-        <Button @click="showTemplate()" label="Save"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script>
-export default {
-    methods: {
-        showTemplate() {
-            this.$confirm.require({
-                group: 'templating',
-                header: 'Confirmation',
-                message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-exclamation-circle',
-                rejectProps: {
-                    label: 'Cancel',
-                    icon: 'pi pi-times',
-                    outlined: true,
-                    size: 'small'
-                },
-                acceptProps: {
-                    label: 'Save',
-                    icon: 'pi pi-check',
-                    size: 'small'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <ConfirmDialog group="templating">
-        <template #message="slotProps">
-            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
-                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
-                <p>{{ slotProps.message.message }}</p>
-            </div>
-        </template>
-    </ConfirmDialog>
-    <div class="card flex justify-center">
-        <Button @click="showTemplate()" label="Save"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const showTemplate = () => {
-    confirm.require({
-        group: 'templating',
-        header: 'Confirmation',
-        message: 'Please confirm to proceed moving forward.',
-        icon: 'pi pi-exclamation-circle',
-        rejectProps: {
-            label: 'Cancel',
-            icon: 'pi pi-times',
-            outlined: true,
-            size: 'small'
-        },
-        acceptProps: {
-            label: 'Save',
-            icon: 'pi pi-check',
-            size: 'small'
-        },
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        showTemplate() {
-            this.$confirm.require({
-                group: 'templating',
-                header: 'Confirmation',
-                message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-exclamation-circle',
-                rejectProps: {
-                    label: 'Cancel',
-                    icon: 'pi pi-times',
-                    outlined: true,
-                    size: 'small'
-                },
-                acceptProps: {
-                    label: 'Save',
-                    icon: 'pi pi-check',
-                    size: 'small'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmpopup/AccessibilityDoc.vue b/apps/labs/doc/confirmpopup/AccessibilityDoc.vue
deleted file mode 100644
index de059239d..000000000
--- a/apps/labs/doc/confirmpopup/AccessibilityDoc.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
-            <i>aria-modal</i> is added since focus is kept within the popup.
-        </p>
-        <p>
-            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmPopup adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
-            trigger and the dialog is defined.
-        </p>
-        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Overlay Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the next the focusable element within the popup.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element within the popup.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the popup and moves focus to the trigger.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Buttons Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<ConfirmPopup id="confirm" aria-label="popup" />
-
-<Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />
-`
-            },
-            code2: {
-                basic: `
-<script setup>
-const confirm = useConfirm();
-const isVisible = ref(false);
-const openPopup = (event) => {
-    confirm.require({
-        target: event.currentTarget,
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        onShow: () => {
-            isVisible.value = true;
-        },
-        onHide: () => {
-            isVisible.value = false;
-        }
-    });
-}
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmpopup/BasicDoc.vue b/apps/labs/doc/confirmpopup/BasicDoc.vue
deleted file mode 100644
index 241061c89..000000000
--- a/apps/labs/doc/confirmpopup/BasicDoc.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
-    </DocSectionText>
-    <ConfirmPopup></ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-center">
-        <Button @click="confirm1($event)" label="Save" outlined></Button>
-        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmPopup></ConfirmPopup>
-<Button @click="confirm1($event)" label="Save" outlined></Button>
-<Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
-`,
-                options: `
-<template>
-    <Toast />
-    <ConfirmPopup></ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-center">
-        <Button @click="confirm1($event)" label="Save" outlined></Button>
-        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        confirm1(event) {
-            this.$confirm.require({
-                target: event.currentTarget,
-                message: 'Are you sure you want to proceed?',
-                icon: 'pi pi-exclamation-triangle',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    outlined: true
-                },
-                acceptProps: {
-                    label: 'Save'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        },
-        confirm2(event) {
-            this.$confirm.require({
-                target: event.currentTarget,
-                message: 'Do you want to delete this record?',
-                icon: 'pi pi-info-circle',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    outlined: true
-                },
-                acceptProps: {
-                    label: 'Delete',
-                    severity: 'danger'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        },
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <Toast />
-    <ConfirmPopup></ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-center">
-        <Button @click="confirm1($event)" label="Save" outlined></Button>
-        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm1 = (event) => {
-    confirm.require({
-        target: event.currentTarget,
-        message: 'Are you sure you want to proceed?',
-        icon: 'pi pi-exclamation-triangle',
-        rejectProps: {
-            label: 'Cancel',
-            severity: 'secondary',
-            outlined: true
-        },
-        acceptProps: {
-            label: 'Save'
-        },
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-
-const confirm2 = (event) => {
-    confirm.require({
-        target: event.currentTarget,
-        message: 'Do you want to delete this record?',
-        icon: 'pi pi-info-circle',
-        rejectProps: {
-            label: 'Cancel',
-            severity: 'secondary',
-            outlined: true
-        },
-        acceptProps: {
-            label: 'Delete',
-            severity: 'danger'
-        },
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        confirm1(event) {
-            this.$confirm.require({
-                target: event.currentTarget,
-                message: 'Are you sure you want to proceed?',
-                icon: 'pi pi-exclamation-triangle',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    outlined: true
-                },
-                acceptProps: {
-                    label: 'Save'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        },
-        confirm2(event) {
-            this.$confirm.require({
-                target: event.currentTarget,
-                message: 'Do you want to delete this record?',
-                icon: 'pi pi-info-circle',
-                rejectProps: {
-                    label: 'Cancel',
-                    severity: 'secondary',
-                    outlined: true
-                },
-                acceptProps: {
-                    label: 'Delete',
-                    severity: 'danger'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmpopup/ConfirmationServiceDoc.vue b/apps/labs/doc/confirmpopup/ConfirmationServiceDoc.vue
deleted file mode 100644
index ed87bc88a..000000000
--- a/apps/labs/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-    <div class="doc-section-description">
-        <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
-    </div>
-    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-import {createApp} from 'vue';
-import ConfirmationService from 'primevue/confirmationservice';
-
-const app = createApp(App);
-app.use(ConfirmationService);
-`
-            },
-            code2: {
-                basic: `
-import { useConfirm } from "primevue/useconfirm";
-
-const confirm = useConfirm();
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmpopup/HeadlessDoc.vue b/apps/labs/doc/confirmpopup/HeadlessDoc.vue
deleted file mode 100644
index e792019ad..000000000
--- a/apps/labs/doc/confirmpopup/HeadlessDoc.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
-    </DocSectionText>
-    <ConfirmPopup group="headless">
-        <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="rounded p-4">
-                <span>{{ message.message }}</span>
-                <div class="flex items-center gap-2 mt-4">
-                    <Button label="Save" @click="acceptCallback" size="small"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
-                </div>
-            </div>
-        </template>
-    </ConfirmPopup>
-    <div class="card flex justify-center">
-        <Button @click="requireConfirmation($event)" label="Save"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmPopup group="headless">
-    <template #container="{ message, acceptCallback, rejectCallback }">
-        <div class="rounded p-4">
-            <span>{{ message.message }}</span>
-            <div class="flex items-center gap-2 mt-4">
-                <Button label="Save" @click="acceptCallback" size="small"></Button>
-                <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
-            </div>
-        </div>
-    </template>
-</ConfirmPopup>
-<Button @click="requireConfirmation($event)" label="Save"></Button>
-`,
-                options: `
-<template>
-    <Toast />
-    <ConfirmPopup group="headless">
-        <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="rounded p-4">
-                <span>{{ message.message }}</span>
-                <div class="flex items-center gap-2 mt-4">
-                    <Button label="Save" @click="acceptCallback" size="small"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
-                </div>
-            </div>
-        </template>
-    </ConfirmPopup>
-    <div class="card flex justify-center">
-        <Button @click="requireConfirmation($event)" label="Save"></Button>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        requireConfirmation(event) {
-            this.$confirm.require({
-                target: event.currentTarget,
-                group: 'headless',
-                message: 'Save your current process?',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <Toast />
-    <ConfirmPopup group="headless">
-        <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="rounded p-4">
-                <span>{{ message.message }}</span>
-                <div class="flex items-center gap-2 mt-4">
-                    <Button label="Save" @click="acceptCallback" size="small"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
-                </div>
-            </div>
-        </template>
-    </ConfirmPopup>
-    <div class="card flex justify-center">
-        <Button @click="requireConfirmation($event)" label="Save"></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const requireConfirmation = (event) => {
-    confirm.require({
-        target: event.currentTarget,
-        group: 'headless',
-        message: 'Save your current process?',
-        accept: () => {
-            toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
-        },
-        reject: () => {
-            toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
-        }
-    });
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        requireConfirmation(event) {
-            this.$confirm.require({
-                target: event.currentTarget,
-                group: 'headless',
-                message: 'Save your current process?',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmpopup/ImportDoc.vue b/apps/labs/doc/confirmpopup/ImportDoc.vue
deleted file mode 100644
index efdcb08f7..000000000
--- a/apps/labs/doc/confirmpopup/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ConfirmPopup from 'primevue/confirmpopup';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/confirmpopup/TemplateDoc.vue b/apps/labs/doc/confirmpopup/TemplateDoc.vue
deleted file mode 100644
index fbbdf01c9..000000000
--- a/apps/labs/doc/confirmpopup/TemplateDoc.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Templating allows customizing the message content.</p>
-    </DocSectionText>
-    <ConfirmPopup group="templating">
-        <template #message="slotProps">
-            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
-                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
-                <p>{{ slotProps.message.message }}</p>
-            </div>
-        </template>
-    </ConfirmPopup>
-    <div class="card flex justify-center">
-        <Button @click="showTemplate($event)" label="Save"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmPopup group="templating">
-    <template #message="slotProps">
-        <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
-            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
-            <p>{{ slotProps.message.message }}</p>
-        </div>
-    </template>
-</ConfirmPopup>
-<Button @click="showTemplate($event)" label="Save"></Button>
-`,
-                options: `
-<template>
-    <Toast />
-    <ConfirmPopup group="templating">
-        <template #message="slotProps">
-            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
-                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
-                <p>{{ slotProps.message.message }}</p>
-            </div>
-        </template>
-    </ConfirmPopup>
-    <div class="card flex justify-center">
-        <Button @click="showTemplate($event)" label="Save"></Button>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        showTemplate(event) {
-            this.$confirm.require({
-                target: event.currentTarget,
-                group: 'templating',
-                message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-exclamation-circle',
-                rejectProps: {
-                    icon: 'pi pi-times',
-                    label: 'Cancel',
-                    outlined: true
-                },
-                acceptProps: {
-                    icon: 'pi pi-check',
-                    label: 'Confirm'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <Toast />
-    <ConfirmPopup group="templating">
-        <template #message="slotProps">
-            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
-                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
-                <p>{{ slotProps.message.message }}</p>
-            </div>
-        </template>
-    </ConfirmPopup>
-    <div class="card flex justify-center">
-        <Button @click="showTemplate($event)" label="Save"></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const showTemplate = (event) => {
-    confirm.require({
-        target: event.currentTarget,
-        group: 'templating',
-        message: 'Please confirm to proceed moving forward.',
-        icon: 'pi pi-exclamation-circle',
-        rejectProps: {
-            icon: 'pi pi-times',
-            label: 'Cancel',
-            outlined: true
-        },
-        acceptProps: {
-            icon: 'pi pi-check',
-            label: 'Confirm'
-        },
-        accept: () => {
-            toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
-        },
-        reject: () => {
-            toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
-        }
-    });
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        showTemplate(event) {
-            this.$confirm.require({
-                target: event.currentTarget,
-                group: 'templating',
-                message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-exclamation-circle',
-                rejectProps: {
-                    icon: 'pi pi-times',
-                    label: 'Cancel',
-                    outlined: true
-                },
-                acceptProps: {
-                    icon: 'pi pi-check',
-                    label: 'Confirm'
-                },
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/contextmenu/AccessibilityDoc.vue b/apps/labs/doc/contextmenu/AccessibilityDoc.vue
deleted file mode 100644
index c7b43a5b7..000000000
--- a/apps/labs/doc/contextmenu/AccessibilityDoc.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
-            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as
-            the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i> and <i>aria-expanded</i> to define the relation between the item and the submenu.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the context menu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Opens a submenu if there is one available and moves focus to the first item.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/contextmenu/BasicDoc.vue b/apps/labs/doc/contextmenu/BasicDoc.vue
deleted file mode 100644
index 68e9ecb53..000000000
--- a/apps/labs/doc/contextmenu/BasicDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using an event of the target like <i>contextmenu</i> to display the menu.</p>
-    </DocSectionText>
-    <div class="card flex md:justify-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
-        <ContextMenu ref="menu" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Copy', icon: 'pi pi-copy' },
-                { label: 'Rename', icon: 'pi pi-file-edit' }
-            ],
-            code: {
-                basic: `
-<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
-<ContextMenu ref="menu" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex md:justify-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-[30rem] rounded shadow-lg" aria-haspopup="true" />
-        <ContextMenu ref="menu" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Copy', icon: 'pi pi-copy' },
-                { label: 'Rename', icon: 'pi pi-file-edit' }
-            ]
-        };
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-[30rem] rounded shadow-lg" aria-haspopup="true" />
-        <ContextMenu ref="menu" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const menu = ref();
-const items = ref([
-    { label: 'Copy', icon: 'pi pi-copy' },
-    { label: 'Rename', icon: 'pi pi-file-edit' }
-]);
-
-const onImageRightClick = (event) => {
-    menu.value.show(event);
-};
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/contextmenu/CommandDoc.vue b/apps/labs/doc/contextmenu/CommandDoc.vue
deleted file mode 100644
index ce7044bba..000000000
--- a/apps/labs/doc/contextmenu/CommandDoc.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <div class="card flex sm:justify-center">
-        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
-            <li
-                v-for="user in users"
-                :key="user.id"
-                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
-                @contextmenu="onRightClick($event, user)"
-            >
-                <div class="flex flex-1 items-center gap-2">
-                    <img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" class="w-8 h-8" />
-                    <span class="font-bold">{{ user.name }}</span>
-                </div>
-                <Tag :value="user.role" :severity="getBadge(user)" />
-            </li>
-        </ul>
-        <ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedUser: null,
-            users: [
-                { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
-                { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
-                { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
-                { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
-                { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
-            ],
-            items: [
-                {
-                    label: 'Roles',
-                    icon: 'pi pi-users',
-                    items: [
-                        {
-                            label: 'Admin',
-                            command: () => {
-                                this.selectedUser.role = 'Admin';
-                            }
-                        },
-                        {
-                            label: 'Member',
-                            command: () => {
-                                this.selectedUser.role = 'Member';
-                            }
-                        },
-                        {
-                            label: 'Guest',
-                            command: () => {
-                                this.selectedUser.role = 'Guest';
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Invite',
-                    icon: 'pi pi-user-plus',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
-    <li
-        v-for="user in users"
-        :key="user.id"
-        :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
-        @contextmenu="onRightClick($event, user)"
-    >
-        <div class="flex flex-1 items-center gap-2">
-            <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
-            <span class="font-bold">{{ user.name }}</span>
-        </div>
-        <Tag :value="user.role" :severity="getBadge(user)" />
-    </li>
-</ul>
-<ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
-<Toast />
-`,
-                options: `
-<template>
-    <div class="card flex sm:justify-center">
-        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
-            <li
-                v-for="user in users"
-                :key="user.id"
-                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
-                @contextmenu="onRightClick($event, user)"
-            >
-                <div class="flex flex-1 items-center gap-2">
-                    <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
-                    <span class="font-bold">{{ user.name }}</span>
-                </div>
-                <Tag :value="user.role" :severity="getBadge(user)" />
-            </li>
-        </ul>
-        <ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedUser: null,
-            users: [
-                { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
-                { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
-                { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
-                { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
-                { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
-            ],
-            items: [
-                {
-                    label: 'Roles',
-                    icon: 'pi pi-users',
-                    items: [
-                        {
-                            label: 'Admin',
-                            command: () => {
-                                this.selectedUser.role = 'Admin';
-                            }
-                        },
-                        {
-                            label: 'Member',
-                            command: () => {
-                                this.selectedUser.role = 'Member';
-                            }
-                        },
-                        {
-                            label: 'Guest',
-                            command: () => {
-                                this.selectedUser.role = 'Guest';
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Invite',
-                    icon: 'pi pi-user-plus',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        onRightClick(event, user) {
-            this.selectedUser = user;
-            this.$refs.menu.show(event);
-        },
-        getBadge(user) {
-            if (user.role === 'Member') return 'info';
-            else if (user.role === 'Guest') return 'warn';
-            else return null;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex sm:justify-center">
-        <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
-            <li
-                v-for="user in users"
-                :key="user.id"
-                :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
-                @contextmenu="onRightClick($event, user)"
-            >
-                <div class="flex flex-1 items-center gap-2">
-                    <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
-                    <span class="font-bold">{{ user.name }}</span>
-                </div>
-                <Tag :value="user.role" :severity="getBadge(user)" />
-            </li>
-        </ul>
-        <ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-const selectedUser = ref();
-const menu = ref();
-const users = ref([
-    { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
-    { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
-    { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
-    { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
-    { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
-]);
-const items = ref([
-    {
-        label: 'Roles',
-        icon: 'pi pi-users',
-        items: [
-            {
-                label: 'Admin',
-                command: () => {
-                    selectedUser.value.role = 'Admin';
-                }
-            },
-            {
-                label: 'Member',
-                command: () => {
-                    selectedUser.value.role = 'Member';
-                }
-            },
-            {
-                label: 'Guest',
-                command: () => {
-                    selectedUser.value.role = 'Guest';
-                }
-            }
-        ]
-    },
-    {
-        label: 'Invite',
-        icon: 'pi pi-user-plus',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
-        }
-    }
-]);
-
-const onRightClick = (event, user) => {
-    selectedUser.value = user;
-    menu.value.show(event);
-};
-
-const getBadge = (user) => {
-    if (user.role === 'Member') return 'info';
-    else if (user.role === 'Guest') return 'warn';
-    else return null;
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onRightClick(event, user) {
-            this.selectedUser = user;
-            this.$refs.menu.show(event);
-        },
-        getBadge(user) {
-            if (user.role === 'Member') return 'info';
-            else if (user.role === 'Guest') return 'warn';
-            else return null;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/contextmenu/DataTableDoc.vue b/apps/labs/doc/contextmenu/DataTableDoc.vue
deleted file mode 100644
index 280f02d11..000000000
--- a/apps/labs/doc/contextmenu/DataTableDoc.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DataTable has built-in support for ContextMenu, see the <NuxtLink to="/datatable/#contextmenu">ContextMenu</NuxtLink> demo for an example.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/contextmenu/DocumentDoc.vue b/apps/labs/doc/contextmenu/DocumentDoc.vue
deleted file mode 100644
index 3f753a66a..000000000
--- a/apps/labs/doc/contextmenu/DocumentDoc.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Setting global property attaches the context menu to the document.</p>
-    </DocSectionText>
-    <div class="card text-center">
-        <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
-        <ContextMenu global :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Translate',
-                    icon: 'pi pi-language'
-                },
-                {
-                    label: 'Speech',
-                    icon: 'pi pi-volume-up',
-                    items: [
-                        {
-                            label: 'Start',
-                            icon: 'pi pi-caret-right'
-                        },
-                        {
-                            label: 'Stop',
-                            icon: 'pi pi-pause'
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Print',
-                    icon: 'pi pi-print'
-                }
-            ],
-            code: {
-                basic: `
-<ContextMenu global :model="items" />
-`,
-                options: `
-<template>
-    <div class="card text-center">
-        <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
-        <ContextMenu global :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Translate',
-                    icon: 'pi pi-language'
-                },
-                {
-                    label: 'Speech',
-                    icon: 'pi pi-volume-up',
-                    items: [
-                        {
-                            label: 'Start',
-                            icon: 'pi pi-caret-right'
-                        },
-                        {
-                            label: 'Stop',
-                            icon: 'pi pi-pause'
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Print',
-                    icon: 'pi pi-print'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card text-center">
-        <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
-        <ContextMenu global :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Translate',
-        icon: 'pi pi-language'
-    },
-    {
-        label: 'Speech',
-        icon: 'pi pi-volume-up',
-        items: [
-            {
-                label: 'Start',
-                icon: 'pi pi-caret-right'
-            },
-            {
-                label: 'Stop',
-                icon: 'pi pi-pause'
-            }
-        ]
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Print',
-        icon: 'pi pi-print'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/contextmenu/ImportDoc.vue b/apps/labs/doc/contextmenu/ImportDoc.vue
deleted file mode 100644
index 61db50a6d..000000000
--- a/apps/labs/doc/contextmenu/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ContextMenu from 'primevue/contextmenu';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/contextmenu/RouterDoc.vue b/apps/labs/doc/contextmenu/RouterDoc.vue
deleted file mode 100644
index 642f017c7..000000000
--- a/apps/labs/doc/contextmenu/RouterDoc.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--p-primary-color)"
-                />
-                <path
-                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                    fill="var(--p-text-color)"
-                />
-            </svg>
-        </span>
-        <ContextMenu ref="routemenu" :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                </a>
-            </template>
-        </ContextMenu>
-    </div>
-    <DocSectionCode :code="code" hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router Link',
-                    icon: 'pi pi-palette',
-                    route: '/slider'
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    url: 'https://vuejs.org/'
-                }
-            ],
-            code: {
-                basic: `
-<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
-    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="..." fill="var(--p-primary-color)" />
-        <path d="..." fill="var(--p-text-color)" />
-    </svg>
-</span>
-<ContextMenu ref="routemenu" :model="items">
-    <template #item="{ item, props }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                <span :class="item.icon" />
-                <span class="ml-2">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-            <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
-        </a>
-    </template>
-</ContextMenu>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--p-primary-color)"
-                />
-                <path
-                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                    fill="var(--p-text-color)"
-                />
-            </svg>
-        </span>
-        <ContextMenu ref="routemenu" :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                </a>
-            </template>
-        </ContextMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router Link',
-                    icon: 'pi pi-palette',
-                    route: '/slider'
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    url: 'https://vuejs.org/'
-                }
-            ]
-        };
-    },
-    methods: {
-        onRightClick(event) {
-            this.$refs.routemenu.show(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--p-primary-color)"
-                />
-                <path
-                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                    fill="var(--p-text-color)"
-                />
-            </svg>
-        </span>
-        <ContextMenu ref="routemenu" :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                </a>
-            </template>
-        </ContextMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const routemenu = ref();
-const items = ref([
-    {
-        label: 'Router Link',
-        icon: 'pi pi-palette',
-        route: '/slider'
-    },
-    {
-        label: 'Programmatic',
-        icon: 'pi pi-link',
-        command: () => {
-            router.push('/slider');
-        }
-    },
-    {
-        label: 'External',
-        icon: 'pi pi-home',
-        url: 'https://vuejs.org/'
-    }
-]);
-
-const onRightClick = (event) => {
-    routemenu.value.show(event);
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onRightClick(event) {
-            this.$refs.routemenu.show(event);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/contextmenu/TemplateDoc.vue b/apps/labs/doc/contextmenu/TemplateDoc.vue
deleted file mode 100644
index 57b8217cc..000000000
--- a/apps/labs/doc/contextmenu/TemplateDoc.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ContextMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card flex md:justify-center">
-        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
-            <li
-                v-for="product in products"
-                :key="product.id"
-                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
-                @contextmenu="onRightClick($event, product.id)"
-            >
-                <div class="flex flex-wrap p-2 items-center gap-4">
-                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
-                    <div class="flex-1 flex flex-col gap-1">
-                        <span class="font-bold">{{ product.name }}</span>
-                        <div class="flex items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ product.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold ml-8">${{ product.price }}</span>
-                </div>
-            </li>
-        </ul>
-        <ContextMenu ref="menu" :model="items" @hide="selectedId = null">
-            <template #item="{ item, props }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
-                </a>
-            </template>
-        </ContextMenu>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedId: null,
-            items: [
-                {
-                    label: 'Favorite',
-                    icon: 'pi pi-star',
-                    shortcut: '⌘+D'
-                },
-                {
-                    label: 'Add',
-                    icon: 'pi pi-shopping-cart',
-                    shortcut: '⌘+A'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp',
-                            badge: 2
-                        },
-                        {
-                            label: 'Instagram',
-                            icon: 'pi pi-instagram',
-                            badge: 3
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
-    <li
-        v-for="product in products"
-        :key="product.id"
-        :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
-        @contextmenu="onRightClick($event, product.id)"
-    >
-        <div class="flex flex-wrap p-2 items-center gap-4">
-            <img class="w-16 shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
-            <div class="flex-1 flex flex-col gap-1">
-                <span class="font-bold">{{ product.name }}</span>
-                <div class="flex items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ product.category }}</span>
-                </div>
-            </div>
-            <span class="font-bold ml-8">\${{ product.price }}</span>
-        </div>
-    </li>
-</ul>
-<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
-    <template #item="{ item, props }">
-        <a v-ripple class="flex items-center" v-bind="props.action">
-            <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
-            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
-        </a>
-    </template>
-</ContextMenu>
-`,
-                options: `
-<template>
-    <div class="card flex md:justify-center">
-        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
-            <li
-                v-for="product in products"
-                :key="product.id"
-                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
-                @contextmenu="onRightClick($event, product.id)"
-            >
-                <div class="flex flex-wrap p-2 items-center gap-4">
-                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
-                    <div class="flex-1 flex flex-col gap-1">
-                        <span class="font-bold">{{ product.name }}</span>
-                        <div class="flex items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ product.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold ml-8">\${{ product.price }}</span>
-                </div>
-            </li>
-        </ul>
-        <ContextMenu ref="menu" :model="items" @hide="selectedId = null">
-            <template #item="{ item, props }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
-                </a>
-            </template>
-        </ContextMenu>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedId: null,
-            items: [
-                {
-                    label: 'Favorite',
-                    icon: 'pi pi-star',
-                    shortcut: '⌘+D'
-                },
-                {
-                    label: 'Add',
-                    icon: 'pi pi-shopping-cart',
-                    shortcut: '⌘+A'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp',
-                            badge: 2
-                        },
-                        {
-                            label: 'Instagram',
-                            icon: 'pi pi-instagram',
-                            badge: 3
-                        }
-                    ]
-                }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    },
-    methods: {
-        onRightClick(event, id) {
-            this.selectedId = id;
-            this.$refs.menu.show(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex md:justify-center">
-        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]" @hide="selectedId = null">
-            <li
-                v-for="product in products"
-                :key="product.id"
-                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
-                @contextmenu="onRightClick($event, product.id)"
-            >
-                <div class="flex flex-wrap p-2 items-center gap-4">
-                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
-                    <div class="flex-1 flex flex-col gap-1">
-                        <span class="font-bold">{{ product.name }}</span>
-                        <div class="flex items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ product.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold ml-8">\${{ product.price }}</span>
-                </div>
-            </li>
-        </ul>
-        <ContextMenu ref="menu" :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
-                </a>
-            </template>
-        </ContextMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const menu = ref();
-const items = ref([
-    {
-        label: 'Favorite',
-        icon: 'pi pi-star',
-        shortcut: '⌘+D'
-    },
-    {
-        label: 'Add',
-        icon: 'pi pi-shopping-cart',
-        shortcut: '⌘+A'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Share',
-        icon: 'pi pi-share-alt',
-        items: [
-            {
-                label: 'Whatsapp',
-                icon: 'pi pi-whatsapp',
-                badge: 2
-            },
-            {
-                label: 'Instagram',
-                icon: 'pi pi-instagram',
-                badge: 3
-            }
-        ]
-    }
-]);
-
-const products = ref(null);
-const selectedId = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
-});
-
-const onRightClick = (event, id) => {
-    selectedId.value = id;
-    menu.value.show(event);
-};
-
-<\/script>
-`
-            },
-            data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        onRightClick(event, id) {
-            this.selectedId = id;
-            this.$refs.menu.show(event);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/AccessibilityDoc.vue b/apps/labs/doc/datatable/AccessibilityDoc.vue
deleted file mode 100644
index 209b14abd..000000000
--- a/apps/labs/doc/datatable/AccessibilityDoc.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table for
-            readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers utilizer
-            <i>aria-sort</i> attribute either set to "ascending" or "descending".
-        </p>
-
-        <p>
-            Built-in checkbox and radiobutton components for row selection use <i>checkbox</i> and <i>radiobutton</i>. The label to describe them is retrieved from the <i>aria.selectRow</i> and <i>aria.unselectRow</i> properties of the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Similarly header checkbox uses <i>selectAll</i> and <i>unselectAll</i> keys. When a row is selected, <i>aria-selected</i> is
-            set to true on a row.
-        </p>
-
-        <p>
-            The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties of the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
-        </p>
-
-        <p>
-            The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the
-            button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
-            <i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and <i>aria.apply</i> properties.
-            <i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well.
-        </p>
-
-        <p>
-            Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used for the
-            <i>aria-label</i>.
-        </p>
-
-        <p>Paginator is a standalone component used inside the DataTable, refer to the <PrimeVueNuxtLink to="/paginator">paginator</PrimeVueNuxtLink> for more information about the accessibility features.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Any button element inside the DataTable used for cases like filter, row expansion, edit are tabbable and can be used with <i>space</i> and <i>enter</i> keys.</p>
-
-        <h3>Sortable Headers Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves through the headers.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Sorts the column.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Sorts the column.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Filter Menu Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves through the elements inside the popup.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Hides the popup.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Selection Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the first selected row, if there is none then first row receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous row.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next row.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Toggles the selected state of the focused row depending on the metaKeySelection setting.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Toggles the selected state of the focused row depending on the metaKeySelection setting.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first row.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last row.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>down arrow</i></td>
-                        <td>Moves focus to the next row and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>up arrow</i></td>
-                        <td>Moves focus to the previous row and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>space</i></td>
-                        <td>Selects the rows between the most recently selected row and the focused row.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
-                        <td>Selects the focused rows and all the options up to the first one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
-                        <td>Selects the focused rows and all the options down to the last one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>a</i></td>
-                        <td>Selects all rows.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/datatable/BasicDoc.vue b/apps/labs/doc/datatable/BasicDoc.vue
deleted file mode 100644
index 9e1b380f1..000000000
--- a/apps/labs/doc/datatable/BasicDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DataTable requires a <i>value</i> as data to display and <i>Column</i> components as children for the representation.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/ColumnGroupDoc.vue b/apps/labs/doc/datatable/ColumnGroupDoc.vue
deleted file mode 100644
index e073b8233..000000000
--- a/apps/labs/doc/datatable/ColumnGroupDoc.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Columns can be grouped within a <i>Row</i> component and groups can be displayed within a ColumnGroup component. These groups can be displayed using <i>type</i> property that can be <i>header</i> or <i>footer</i>. Number of cells and rows
-            to span are defined with the <i>colspan</i> and <i>rowspan</i> properties of a Column.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="sales" tableStyle="min-width: 50rem">
-                <ColumnGroup type="header">
-                    <Row>
-                        <Column header="Product" :rowspan="3" />
-                        <Column header="Sale Rate" :colspan="4" />
-                    </Row>
-                    <Row>
-                        <Column header="Sales" :colspan="2" />
-                        <Column header="Profits" :colspan="2" />
-                    </Row>
-                    <Row>
-                        <Column header="Last Year" sortable field="lastYearSale" />
-                        <Column header="This Year" sortable field="thisYearSale" />
-                        <Column header="Last Year" sortable field="lastYearProfit" />
-                        <Column header="This Year" sortable field="thisYearProfit" />
-                    </Row>
-                </ColumnGroup>
-                <Column field="product" />
-                <Column field="lastYearSale">
-                    <template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
-                </Column>
-                <Column field="thisYearSale">
-                    <template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
-                </Column>
-                <Column field="lastYearProfit">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.lastYearProfit) }}
-                    </template>
-                </Column>
-                <Column field="thisYearProfit">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.thisYearProfit) }}
-                    </template>
-                </Column>
-                <ColumnGroup type="footer">
-                    <Row>
-                        <Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
-                        <Column :footer="lastYearTotal" />
-                        <Column :footer="thisYearTotal" />
-                    </Row>
-                </ColumnGroup>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            sales: null,
-            code: {
-                basic: `
-<DataTable :value="sales" tableStyle="min-width: 50rem">
-    <ColumnGroup type="header">
-        <Row>
-            <Column header="Product" :rowspan="3" />
-            <Column header="Sale Rate" :colspan="4" />
-        </Row>
-        <Row>
-            <Column header="Sales" :colspan="2" />
-            <Column header="Profits" :colspan="2" />
-        </Row>
-        <Row>
-            <Column header="Last Year" sortable field="lastYearSale" />
-            <Column header="This Year" sortable field="thisYearSale" />
-            <Column header="Last Year" sortable field="lastYearProfit" />
-            <Column header="This Year" sortable field="thisYearProfit" />
-        </Row>
-    </ColumnGroup>
-    <Column field="product" />
-    <Column field="lastYearSale">
-        <template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
-    </Column>
-    <Column field="thisYearSale">
-        <template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
-    </Column>
-    <Column field="lastYearProfit">
-        <template #body="slotProps">
-            {{ formatCurrency(slotProps.data.lastYearProfit) }}
-        </template>
-    </Column>
-    <Column field="thisYearProfit">
-        <template #body="slotProps">
-            {{ formatCurrency(slotProps.data.thisYearProfit) }}
-        </template>
-    </Column>
-    <ColumnGroup type="footer">
-        <Row>
-            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
-            <Column :footer="lastYearTotal" />
-            <Column :footer="thisYearTotal" />
-        </Row>
-    </ColumnGroup>
-</DataTable>
-`,
-                options: `
-<template>
-    <DataTable :value="sales" tableStyle="min-width: 50rem">
-        <ColumnGroup type="header">
-            <Row>
-                <Column header="Product" :rowspan="3" />
-                <Column header="Sale Rate" :colspan="4" />
-            </Row>
-            <Row>
-                <Column header="Sales" :colspan="2" />
-                <Column header="Profits" :colspan="2" />
-            </Row>
-            <Row>
-                <Column header="Last Year" sortable field="lastYearSale"/>
-                <Column header="This Year" sortable field="thisYearSale"/>
-                <Column header="Last Year" sortable field="lastYearProfit"/>
-                <Column header="This Year" sortable field="thisYearProfit"/>
-            </Row>
-        </ColumnGroup>
-        <Column field="product" />
-        <Column field="lastYearSale">
-            <template #body="slotProps">
-                {{slotProps.data.lastYearSale}}%
-            </template>
-        </Column>
-        <Column field="thisYearSale">
-            <template #body="slotProps">
-                {{slotProps.data.thisYearSale}}%
-            </template>
-        </Column>
-        <Column field="lastYearProfit">
-            <template #body="slotProps">
-                {{formatCurrency(slotProps.data.lastYearProfit)}}
-            </template>
-        </Column>
-        <Column field="thisYearProfit">
-            <template #body="slotProps">
-                {{formatCurrency(slotProps.data.thisYearProfit)}}
-            </template>
-        </Column>
-        <ColumnGroup type="footer">
-            <Row>
-                <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
-                <Column :footer="lastYearTotal" />
-                <Column :footer="thisYearTotal" />
-            </Row>
-        </ColumnGroup>
-    </DataTable>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            sales: null
-        }
-    },
-    created() {
-        this.sales = [
-            {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
-            {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
-            {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
-            {product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
-            {product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
-            {product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale:  65, lastYearProfit: 421132, thisYearProfit: 150005},
-            {product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
-            {product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
-            {product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
-            {product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
-        ];
-    },
-    methods: {
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-        }
-    },
-    computed: {
-        lastYearTotal() {
-            let total = 0;
-            for(let sale of this.sales) {
-                total += sale.lastYearProfit;
-            }
-
-            return this.formatCurrency(total);
-        },
-        thisYearTotal() {
-            let total = 0;
-            for(let sale of this.sales) {
-                total += sale.thisYearProfit;
-            }
-
-            return this.formatCurrency(total);
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <DataTable :value="sales" tableStyle="min-width: 50rem">
-        <ColumnGroup type="header">
-            <Row>
-                <Column header="Product" :rowspan="3" />
-                <Column header="Sale Rate" :colspan="4" />
-            </Row>
-            <Row>
-                <Column header="Sales" :colspan="2" />
-                <Column header="Profits" :colspan="2" />
-            </Row>
-            <Row>
-                <Column header="Last Year" sortable field="lastYearSale"/>
-                <Column header="This Year" sortable field="thisYearSale"/>
-                <Column header="Last Year" sortable field="lastYearProfit"/>
-                <Column header="This Year" sortable field="thisYearProfit"/>
-            </Row>
-        </ColumnGroup>
-        <Column field="product" />
-        <Column field="lastYearSale">
-            <template #body="slotProps">
-                {{slotProps.data.lastYearSale}}%
-            </template>
-        </Column>
-        <Column field="thisYearSale">
-            <template #body="slotProps">
-                {{slotProps.data.thisYearSale}}%
-            </template>
-        </Column>
-        <Column field="lastYearProfit">
-            <template #body="slotProps">
-                {{formatCurrency(slotProps.data.lastYearProfit)}}
-            </template>
-        </Column>
-        <Column field="thisYearProfit">
-            <template #body="slotProps">
-                {{formatCurrency(slotProps.data.thisYearProfit)}}
-            </template>
-        </Column>
-        <ColumnGroup type="footer">
-            <Row>
-                <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
-                <Column :footer="lastYearTotal" />
-                <Column :footer="thisYearTotal" />
-            </Row>
-        </ColumnGroup>
-    </DataTable>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue';
-
-
-const sales = ref([
-    {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
-    {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
-    {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
-    {product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
-    {product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
-    {product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale:  65, lastYearProfit: 421132, thisYearProfit: 150005},
-    {product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
-    {product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
-    {product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
-    {product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
-]);
-
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-};
-
-const lastYearTotal = computed(() => {
-    let total = 0;
-    for(let sale of sales.value) {
-        total += sale.lastYearProfit;
-    }
-
-    return formatCurrency(total);
-});
-
-const thisYearTotal = computed(() => {
-    let total = 0;
-    for(let sale of sales.value) {
-        total += sale.thisYearProfit;
-    }
-
-    return formatCurrency(total);
-});
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            this.sales = [
-                { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
-                { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
-                { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 },
-                { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 },
-                { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 },
-                { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 },
-                { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 },
-                { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 },
-                { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 },
-                { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 }
-            ];
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        }
-    },
-    computed: {
-        lastYearTotal() {
-            let total = 0;
-
-            for (let sale of this.sales) {
-                total += sale.lastYearProfit;
-            }
-
-            return this.formatCurrency(total);
-        },
-        thisYearTotal() {
-            let total = 0;
-
-            for (let sale of this.sales) {
-                total += sale.thisYearProfit;
-            }
-
-            return this.formatCurrency(total);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/ColumnToggleDoc.vue b/apps/labs/doc/datatable/ColumnToggleDoc.vue
deleted file mode 100644
index b8dab4a59..000000000
--- a/apps/labs/doc/datatable/ColumnToggleDoc.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" tableStyle="min-width: 50rem">
-                <template #header>
-                    <div style="text-align: left">
-                        <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle" display="chip" placeholder="Select Columns" />
-                    </div>
-                </template>
-                <Column field="code" header="Code" />
-                <Column v-for="(col, index) of selectedColumns" :key="col.field + '_' + index" :field="col.field" :header="col.header"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            selectedColumns: null,
-            columns: null,
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
-    <template #header>
-        <div style="text-align:left">
-            <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
-                display="chip" placeholder="Select Columns" />
-        </div>
-    </template>
-    <Column field="code" header="Code" />
-    <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div>
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <template #header>
-                <div style="text-align:left">
-                    <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
-                        display="chip" placeholder="Select Columns" />
-                </div>
-            </template>
-            <Column field="code" header="Code" />
-            <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            selectedColumns: null,
-            columns: null,
-            products: null
-        }
-    },
-    created() {
-        this.columns = [
-            {field: 'name', header: 'Name'},
-            {field: 'category', header: 'Category'},
-            {field: 'quantity', header: 'Quantity'}
-        ];
-        this.selectedColumns = this.columns;
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        onToggle(value) {
-            this.selectedColumns = this.columns.filter(col => value.includes(col));
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div>
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <template #header>
-                <div style="text-align:left">
-                    <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
-                        display="chip" placeholder="Select Columns" />
-                </div>
-            </template>
-            <Column field="code" header="Code" />
-            <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const columns = ref([
-    {field: 'name', header: 'Name'},
-    {field: 'category', header: 'Category'},
-    {field: 'quantity', header: 'Quantity'}
-]);
-const selectedColumns = ref(columns.value);
-const products = ref();
-const onToggle = (val) => {
-    selectedColumns.value = columns.value.filter(col => val.includes(col));
-};
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    created() {
-        this.columns = [
-            { field: 'name', header: 'Name' },
-            { field: 'category', header: 'Category' },
-            { field: 'quantity', header: 'Quantity' }
-        ];
-        this.selectedColumns = this.columns;
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        onToggle(value) {
-            this.selectedColumns = this.columns.filter((col) => value.includes(col));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/ConditionalStyleDoc.vue b/apps/labs/doc/datatable/ConditionalStyleDoc.vue
deleted file mode 100644
index 43999b8a1..000000000
--- a/apps/labs/doc/datatable/ConditionalStyleDoc.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Particular rows and cells can be styled based on conditions. The <i>rowClass</i> receives a row data as a parameter to return a style class for a row whereas cells are customized using the <i>body</i> template.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity">
-                    <template #body="slotProps">
-                        <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity">
-        <template #body="slotProps">
-            <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity">
-                <template #body="slotProps">
-                    <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    },
-    methods: {
-        rowClass(data) {
-            return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
-        },
-        rowStyle(data) {
-            if (data.quantity === 0) {
-                return { fontWeight: 'bold', fontStyle: 'italic' };
-            }
-        },
-        stockSeverity(data) {
-            if (data.quantity === 0) return 'danger';
-            else if (data.quantity > 0 && data.quantity < 10) return 'warn';
-            else return 'success';
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity">
-                <template #body="slotProps">
-                    <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (this.products = data));
-});
-
-const products = ref();
-
-const rowClass = (data) => {
-    return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
-};
-const rowStyle = (data) => {
-    if (data.quantity === 0) {
-        return { fontWeight: 'bold', fontStyle: 'italic' };
-    }
-};
-const stockSeverity = (data) => {
-    if (data.quantity === 0) return 'danger';
-    else if (data.quantity > 0 && data.quantity < 10) return 'warn';
-    else return 'success';
-}
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsSmall().then((data) => (this.products = data));
-        },
-        rowClass(data) {
-            return [{ '!bg-primary !text-primary-contrast': data.category === 'Fitness' }];
-        },
-        rowStyle(data) {
-            if (data.quantity === 0) {
-                return { fontWeight: 'bold', fontStyle: 'italic' };
-            }
-        },
-        stockSeverity(data) {
-            if (data.quantity === 0) return 'danger';
-            else if (data.quantity > 0 && data.quantity < 10) return 'warn';
-            else return 'success';
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/ContextMenuDoc.vue b/apps/labs/doc/datatable/ContextMenuDoc.vue
deleted file mode 100644
index d35782449..000000000
--- a/apps/labs/doc/datatable/ContextMenuDoc.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            DataTable has exclusive integration with ContextMenu using the <i>contextMenu</i> event to open a menu on right click alont with <i>contextMenuSelection</i> property and <i>row-contextmenu</i> event to control the selection via the menu.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
-            <DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="price" header="Price">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.price) }}
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            menuModel: [
-                { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct) },
-                { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct) }
-            ],
-            code: {
-                basic: `
-<ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
-<DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu
-        @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="price" header="Price">
-        <template #body="slotProps">
-            {{ formatCurrency(slotProps.data.price) }}
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
-        <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
-                @rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="price" header="Price">
-                <template #body="slotProps">
-                    {{formatCurrency(slotProps.data.price)}}
-            </template>
-            </Column>
-        </DataTable>
-        <Toast />
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            menuModel: [
-                {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
-                {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
-            ]
-        }
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        onRowContextMenu(event) {
-            this.$refs.cm.show(event.originalEvent);
-        },
-        viewProduct(product) {
-            this.$toast.add({severity: 'info', summary: 'Product Selected', detail: product.name, life: 3000});
-        },
-        deleteProduct(product) {
-            this.products = this.products.filter((p) => p.id !== product.id);
-            this.$toast.add({severity: 'error', summary: 'Product Deleted', detail: product.name, life: 3000});
-            this.selectedProduct = null;
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
-        <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
-                @rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="price" header="Price">
-                <template #body="slotProps">
-                    {{formatCurrency(slotProps.data.price)}}
-                </template>
-                </Column>
-        </DataTable>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const cm = ref();
-const toast = useToast();
-const products = ref();
-const selectedProduct = ref();
-const menuModel = ref([
-    {label: 'View', icon: 'pi pi-fw pi-search', command: () => viewProduct(selectedProduct)},
-    {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => deleteProduct(selectedProduct)}
-]);
-const onRowContextMenu = (event) => {
-    cm.value.show(event.originalEvent);
-};
-const viewProduct = (product) => {
-    toast.add({severity: 'info', summary: 'Product Selected', detail: product.value.name, life: 3000});
-};
-const deleteProduct = (product) => {
-    products.value = products.value.filter((p) => p.id !== product.value.id);
-    toast.add({severity: 'error', summary: 'Product Deleted', detail: product.value.name, life: 3000});
-    selectedProduct.value = null;
-};
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-};
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        onRowContextMenu(event) {
-            this.$refs.cm.show(event.originalEvent);
-        },
-        viewProduct(product) {
-            this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: product.name, life: 3000 });
-        },
-        deleteProduct(product) {
-            this.products = this.products.filter((p) => p.id !== product.id);
-            this.$toast.add({ severity: 'error', summary: 'Product Deleted', detail: product.name, life: 3000 });
-            this.selectedProduct = null;
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/DynamicColumnsDoc.vue b/apps/labs/doc/datatable/DynamicColumnsDoc.vue
deleted file mode 100644
index d440b6918..000000000
--- a/apps/labs/doc/datatable/DynamicColumnsDoc.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Columns can be created programmatically.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" tableStyle="min-width: 50rem">
-                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            columns: null,
-            code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
-    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            columns: null
-        };
-    },
-    created() {
-        this.columns = [
-            { field: 'code', header: 'Code' },
-            { field: 'name', header: 'Name' },
-            { field: 'category', header: 'Category' },
-            { field: 'quantity', header: 'Quantity' }
-        ];
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const columns = [
-    { field: 'code', header: 'Code' },
-    { field: 'name', header: 'Name' },
-    { field: 'category', header: 'Category' },
-    { field: 'quantity', header: 'Quantity' }
-];
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    created() {
-        this.columns = [
-            { field: 'code', header: 'Code' },
-            { field: 'name', header: 'Name' },
-            { field: 'category', header: 'Category' },
-            { field: 'quantity', header: 'Quantity' }
-        ];
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/ExportDoc.vue b/apps/labs/doc/datatable/ExportDoc.vue
deleted file mode 100644
index 364ef4707..000000000
--- a/apps/labs/doc/datatable/ExportDoc.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DataTable can export its data to CSV format.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable ref="dt" :value="products" tableStyle="min-width: 50rem">
-                <template #header>
-                    <div class="text-end pb-4">
-                        <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
-                    </div>
-                </template>
-                <Column field="code" header="Code" exportHeader="Product Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
-    <template #header>
-        <div class="text-end pb-4">
-            <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
-        </div>
-    </template>
-    <Column field="code" header="Code" exportHeader="Product Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div>
-        <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
-            <template #header>
-                <div class="text-end pb-4">
-                    <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
-                </div>
-            </template>
-            <Column field="code" header="Code" exportHeader="Product Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        exportCSV() {
-            this.$refs.dt.exportCSV();
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div>
-        <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
-            <template #header>
-                <div class="text-end pb-4">
-                    <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
-                </div>
-            </template>
-            <Column field="code" header="Code" exportHeader="Product Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const dt = ref();
-const products = ref();
-const exportCSV = () => {
-    dt.value.exportCSV();
-};
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        exportCSV() {
-            this.$refs.dt.exportCSV();
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/GridLinesDoc.vue b/apps/labs/doc/datatable/GridLinesDoc.vue
deleted file mode 100644
index 09aed1ecf..000000000
--- a/apps/labs/doc/datatable/GridLinesDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enabling <i>showGridlines</i> displays borders between cells.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/ImportDoc.vue b/apps/labs/doc/datatable/ImportDoc.vue
deleted file mode 100644
index f1800e604..000000000
--- a/apps/labs/doc/datatable/ImportDoc.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-import ColumnGroup from 'primevue/columngroup';   // optional
-import Row from 'primevue/row';                   // optional
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/LazyLoadDoc.vue b/apps/labs/doc/datatable/LazyLoadDoc.vue
deleted file mode 100644
index db04082fd..000000000
--- a/apps/labs/doc/datatable/LazyLoadDoc.vue
+++ /dev/null
@@ -1,489 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime <i>paging</i>, <i>sorting</i> and <i>filtering</i> occurs. Sample below
-            imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
-        </p>
-        <p>
-            Enabling the <i>lazy</i> property and assigning the logical number of rows to <i>totalRecords</i> by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually records
-            of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
-        </p>
-        <p>Note that, the implementation of <i>checkbox selection</i> in lazy mode needs to be handled manually as in this example since the DataTable cannot know about the whole dataset.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                ref="dt"
-                v-model:filters="filters"
-                v-model:selection="selectedCustomers"
-                :value="customers"
-                lazy
-                paginator
-                :first="first"
-                :rows="10"
-                dataKey="id"
-                :totalRecords="totalRecords"
-                :loading="loading"
-                @page="onPage($event)"
-                @sort="onSort($event)"
-                @filter="onFilter($event)"
-                filterDisplay="row"
-                :globalFilterFields="['name', 'country.name', 'company', 'representative.name']"
-                :selectAll="selectAll"
-                @select-all-change="onSelectAllChange"
-                @row-select="onRowSelect"
-                @row-unselect="onRowUnselect"
-                tableStyle="min-width: 75rem"
-            >
-                <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-                <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
-                    </template>
-                </Column>
-                <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
-                            <span>{{ data.country.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
-                    </template>
-                </Column>
-                <Column field="company" header="Company" filterMatchMode="contains" sortable>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
-                    </template>
-                </Column>
-                <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
-                            <span>{{ data.representative.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            loading: false,
-            totalRecords: 0,
-            customers: null,
-            selectedCustomers: null,
-            selectAll: false,
-            first: 0,
-            filters: {
-                name: { value: '', matchMode: 'contains' },
-                'country.name': { value: '', matchMode: 'contains' },
-                company: { value: '', matchMode: 'contains' },
-                'representative.name': { value: '', matchMode: 'contains' }
-            },
-            lazyParams: {},
-            columns: [
-                { field: 'name', header: 'Name' },
-                { field: 'country.name', header: 'Country' },
-                { field: 'company', header: 'Company' },
-                { field: 'representative.name', header: 'Representative' }
-            ],
-            code: {
-                basic: `
-<DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
-        :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
-        :globalFilterFields="['name','country.name', 'company', 'representative.name']"
-        v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
-    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-    <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
-        <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-        </template>
-    </Column>
-    <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                <span>{{ data.country.name }}</span>
-            </div>
-        </template>
-        <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-        </template>
-    </Column>
-    <Column field="company" header="Company" filterMatchMode="contains" sortable>
-        <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-        </template>
-    </Column>
-    <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                <span>{{ data.representative.name }}</span>
-            </div>
-        </template>
-        <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-	<div class="card">
-        <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
-            :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
-            :globalFilterFields="['name','country.name', 'company', 'representative.name']"
-            v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
-            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-            <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
-                <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-                </template>
-            </Column>
-            <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-                </template>
-            </Column>
-            <Column field="company" header="Company" filterMatchMode="contains" sortable>
-                <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-                </template>
-            </Column>
-            <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-                </template>
-            </Column>
-        </DataTable>
-	</div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            loading: false,
-            totalRecords: 0,
-            customers: null,
-            selectedCustomers: null,
-            selectAll: false,
-            first: 0,
-            filters: {
-                'name': {value: '', matchMode: 'contains'},
-                'country.name': {value: '', matchMode: 'contains'},
-                'company': {value: '', matchMode: 'contains'},
-                'representative.name': {value: '', matchMode: 'contains'},
-            },
-            lazyParams: {},
-            columns: [
-                {field: 'name', header: 'Name'},
-                {field: 'country.name', header: 'Country'},
-                {field: 'company', header: 'Company'},
-                {field: 'representative.name', header: 'Representative'}
-            ]
-        }
-    },
-    mounted() {
-        this.loading = true;
-
-        this.lazyParams = {
-            first: 0,
-            rows: 10,
-            sortField: null,
-            sortOrder: null,
-            filters: this.filters
-        };
-
-        this.loadLazyData();
-    },
-    methods: {
-        loadLazyData() {
-            this.loading = true;
-            this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
-
-            setTimeout(() => {
-                CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => {
-                    this.customers = data.customers;
-                    this.totalRecords = data.totalRecords;
-                    this.loading = false;
-                });
-            }, Math.random() * 1000 + 250);
-        },
-        onPage(event) {
-            this.lazyParams = event;
-            this.loadLazyData(event);
-        },
-        onSort(event) {
-            this.lazyParams = event;
-            this.loadLazyData(event);
-        },
-        onFilter(event) {
-            this.lazyParams.filters = this.filters;
-            this.loadLazyData(event);
-        },
-        onSelectAllChange(event) {
-            const selectAll = event.checked;
-
-            if (selectAll) {
-                CustomerService.getCustomers().then(data => {
-                    this.selectAll = true;
-                    this.selectedCustomers = data.customers;
-                });
-            }
-            else {
-                this.selectAll = false;
-                this.selectedCustomers = [];
-            }
-        },
-        onRowSelect() {
-            this.selectAll = this.selectedCustomers.length === this.totalRecords
-        },
-        onRowUnselect() {
-            this.selectAll = false;
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-	<div class="card">
-        <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
-            :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
-            :globalFilterFields="['name','country.name', 'company', 'representative.name']"
-            v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
-            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-            <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
-                <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-                </template>
-            </Column>
-            <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-                </template>
-            </Column>
-            <Column field="company" header="Company" filterMatchMode="contains" sortable>
-                <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-                </template>
-            </Column>
-            <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
-                </template>
-            </Column>
-        </DataTable>
-	</div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-onMounted(() => {
-    loading.value = true;
-
-    lazyParams.value = {
-        first: 0,
-        rows: 10,
-        sortField: null,
-        sortOrder: null,
-        filters: filters.value
-    };
-
-    loadLazyData();
-});
-
-const dt = ref();
-const loading = ref(false);
-const totalRecords = ref(0);
-const customers = ref();
-const selectedCustomers = ref();
-const selectAll = ref(false);
-const first = ref(0);
-const filters = ref({
-    'name': {value: '', matchMode: 'contains'},
-    'country.name': {value: '', matchMode: 'contains'},
-    'company': {value: '', matchMode: 'contains'},
-    'representative.name': {value: '', matchMode: 'contains'},
-});
-const lazyParams = ref({});
-const columns = ref([
-    {field: 'name', header: 'Name'},
-    {field: 'country.name', header: 'Country'},
-    {field: 'company', header: 'Company'},
-    {field: 'representative.name', header: 'Representative'}
-]);
-
-const loadLazyData = (event) => {
-    loading.value = true;
-    lazyParams.value = { ...lazyParams.value, first: event?.first || first.value };
-
-    setTimeout(() => {
-        CustomerService.getCustomers({ lazyEvent: JSON.stringify(lazyParams.value) }).then((data) => {
-            customers.value = data.customers;
-            totalRecords.value = data.totalRecords;
-            loading.value = false;
-        });
-    }, Math.random() * 1000 + 250);
-};
-const onPage = (event) => {
-    lazyParams.value = event;
-    loadLazyData(event);
-};
-const onSort = (event) => {
-    lazyParams.value = event;
-    loadLazyData(event);
-};
-const onFilter = (event) => {
-    lazyParams.value.filters = filters.value ;
-    loadLazyData(event);
-};
-const onSelectAllChange = (event) => {
-    selectAll.value = event.checked;
-
-    if (selectAll) {
-        CustomerService.getCustomers().then(data => {
-            selectAll.value = true;
-            selectedCustomers.value = data.customers;
-        });
-    }
-    else {
-        selectAll.value = false;
-        selectedCustomers.value = [];
-    }
-};
-const onRowSelect = () => {
-    selectAll.value = selectedCustomers.value.length === totalRecords.value;
-};
-const onRowUnselect = () => {
-    selectAll.value = false;
-};
-
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            this.loading = true;
-
-            this.lazyParams = {
-                first: 0,
-                rows: 10,
-                sortField: null,
-                sortOrder: null,
-                filters: this.filters
-            };
-
-            this.loadLazyData();
-        },
-        loadLazyData(event) {
-            this.loading = true;
-            this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
-
-            setTimeout(() => {
-                CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => {
-                    this.customers = data.customers;
-                    this.totalRecords = data.totalRecords;
-                    this.loading = false;
-                });
-            }, Math.random() * 1000 + 250);
-        },
-        onPage(event) {
-            this.lazyParams = event;
-            this.loadLazyData(event);
-        },
-        onSort(event) {
-            this.lazyParams = event;
-            this.loadLazyData(event);
-        },
-        onFilter(event) {
-            this.lazyParams.filters = this.filters;
-            this.loadLazyData(event);
-        },
-        onSelectAllChange(event) {
-            const selectAll = event.checked;
-
-            if (selectAll) {
-                CustomerService.getCustomers().then((data) => {
-                    this.selectAll = true;
-                    this.selectedCustomers = data.customers;
-                });
-            } else {
-                this.selectAll = false;
-                this.selectedCustomers = [];
-            }
-        },
-        onRowSelect() {
-            this.selectAll = this.selectedCustomers.length === this.totalRecords;
-        },
-        onRowUnselect() {
-            this.selectAll = false;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/ReorderDoc.vue b/apps/labs/doc/datatable/ReorderDoc.vue
deleted file mode 100644
index 094c836f5..000000000
--- a/apps/labs/doc/datatable/ReorderDoc.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding <i>reorderableColumns</i> property.</p>
-        <p>
-            Similarly, adding <i>rowReorder</i> property to a column enables draggable rows. For the drag handle a column needs to have <i>rowReorder</i> property and table needs to have <i>row-reorder</i> event is required to control the state of
-            the rows after reorder completes.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" reorderableColumns @column-reorder="onColReorder" @row-reorder="onRowReorder" tableStyle="min-width: 50rem">
-                <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
-                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            columns: null,
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
-    <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
-    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-	<div>
-        <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
-            <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
-            <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
-        </DataTable>
-        <Toast />
-	</div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            columns: null,
-            products: null
-        }
-    },
-    created() {
-        this.columns = [
-            {field: 'code', header: 'Code'},
-            {field: 'name', header: 'Name'},
-            {field: 'category', header: 'Category'},
-            {field: 'quantity', header: 'Quantity'}
-        ];
-    },
-    mounted() {
-        ProductService.getProductsMini().then(data => this.products = data);
-    },
-    methods: {
-        onColReorder() {
-            this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
-        },
-        onRowReorder(event) {
-            this.products = event.value;
-            this.$toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-	<div>
-        <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
-            <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
-            <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
-        </DataTable>
-        <Toast />
-	</div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then(data => products.value = data);
-});
-
-const toast = useToast();
-const columns = ref([
-    {field: 'code', header: 'Code'},
-    {field: 'name', header: 'Name'},
-    {field: 'category', header: 'Category'},
-    {field: 'quantity', header: 'Quantity'}
-]);
-const products = ref();
-
-const onColReorder = () => {
-    toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
-};
-const onRowReorder = (event) => {
-    products.value = event.value;
-    toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
-};
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    created() {
-        this.columns = [
-            { field: 'code', header: 'Code' },
-            { field: 'name', header: 'Name' },
-            { field: 'category', header: 'Category' },
-            { field: 'quantity', header: 'Quantity' }
-        ];
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        onColReorder() {
-            this.$toast.add({ severity: 'success', summary: 'Column Reordered', life: 3000 });
-        },
-        onRowReorder(event) {
-            this.products = event.value;
-            this.$toast.add({ severity: 'success', summary: 'Rows Reordered', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/RowExpansionDoc.vue b/apps/labs/doc/datatable/RowExpansionDoc.vue
deleted file mode 100644
index 69b11f90b..000000000
--- a/apps/labs/doc/datatable/RowExpansionDoc.vue
+++ /dev/null
@@ -1,485 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Row expansion is controlled with <i>expandedRows</i> property. The column that has the expander element requires <i>expander</i> property to be enabled. Optional <i>rowExpand</i> and <i>rowCollapse</i>
-            events are available as callbacks.
-        </p>
-        <p>
-            Expanded rows can either be an array of row data or when <i>dataKey</i> is present, an object whose keys are strings referring to the identifier of the row data and values are booleans to represent the expansion state e.g.
-            <i>&#123;'1004': true&#125;</i>. The <i>dataKey</i> alternative is more performant for large amounts of data.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
-                <template #header>
-                    <div class="flex flex-wrap justify-end gap-2">
-                        <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
-                        <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-                    </div>
-                </template>
-                <Column expander style="width: 5rem" />
-                <Column field="name" header="Name"></Column>
-                <Column header="Image">
-                    <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
-                    </template>
-                </Column>
-                <Column field="price" header="Price">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.price) }}
-                    </template>
-                </Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="rating" header="Reviews">
-                    <template #body="slotProps">
-                        <Rating :modelValue="slotProps.data.rating" readonly />
-                    </template>
-                </Column>
-                <Column header="Status">
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
-                    </template>
-                </Column>
-                <template #expansion="slotProps">
-                    <div class="p-4">
-                        <h5>Orders for {{ slotProps.data.name }}</h5>
-                        <DataTable :value="slotProps.data.orders">
-                            <Column field="id" header="Id" sortable></Column>
-                            <Column field="customer" header="Customer" sortable></Column>
-                            <Column field="date" header="Date" sortable></Column>
-                            <Column field="amount" header="Amount" sortable>
-                                <template #body="slotProps">
-                                    {{ formatCurrency(slotProps.data.amount) }}
-                                </template>
-                            </Column>
-                            <Column field="status" header="Status" sortable>
-                                <template #body="slotProps">
-                                    <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
-                                </template>
-                            </Column>
-                            <Column headerStyle="width:4rem">
-                                <template #body>
-                                    <Button icon="pi pi-search" />
-                                </template>
-                            </Column>
-                        </DataTable>
-                    </div>
-                </template>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            expandedRows: {},
-            code: {
-                basic: `
-<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
-        @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
-    <template #header>
-        <div class="flex flex-wrap justify-end gap-2">
-            <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
-            <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-        </div>
-    </template>
-    <Column expander style="width: 5rem" />
-    <Column field="name" header="Name"></Column>
-    <Column header="Image">
-        <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
-        </template>
-    </Column>
-    <Column field="price" header="Price">
-        <template #body="slotProps">
-            {{ formatCurrency(slotProps.data.price) }}
-        </template>
-    </Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="rating" header="Reviews">
-        <template #body="slotProps">
-            <Rating :modelValue="slotProps.data.rating" readonly />
-        </template>
-    </Column>
-    <Column header="Status">
-        <template #body="slotProps">
-            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
-        </template>
-    </Column>
-    <template #expansion="slotProps">
-        <div class="p-4">
-            <h5>Orders for {{ slotProps.data.name }}</h5>
-            <DataTable :value="slotProps.data.orders">
-                <Column field="id" header="Id" sortable></Column>
-                <Column field="customer" header="Customer" sortable></Column>
-                <Column field="date" header="Date" sortable></Column>
-                <Column field="amount" header="Amount" sortable>
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.amount) }}
-                    </template>
-                </Column>
-                <Column field="status" header="Status" sortable>
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
-                    </template>
-                </Column>
-                <Column headerStyle="width:4rem">
-                    <template #body>
-                        <Button icon="pi pi-search" />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </template>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
-                @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
-            <template #header>
-                <div class="flex flex-wrap justify-end gap-2">
-                    <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
-                    <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-                </div>
-            </template>
-            <Column expander style="width: 5rem" />
-            <Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
-                </template>
-            </Column>
-            <Column field="price" header="Price">
-                <template #body="slotProps">
-                    {{ formatCurrency(slotProps.data.price) }}
-                </template>
-            </Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="rating" header="Reviews">
-                <template #body="slotProps">
-                    <Rating :modelValue="slotProps.data.rating" readonly />
-                </template>
-            </Column>
-            <Column header="Status">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
-                </template>
-            </Column>
-            <template #expansion="slotProps">
-                <div class="p-4">
-                    <h5>Orders for {{ slotProps.data.name }}</h5>
-                    <DataTable :value="slotProps.data.orders" >
-                        <Column field="id" header="Id" sortable></Column>
-                        <Column field="customer" header="Customer" sortable></Column>
-                        <Column field="date" header="Date" sortable></Column>
-                        <Column field="amount" header="Amount" sortable>
-                            <template #body="slotProps">
-                                {{ formatCurrency(slotProps.data.amount) }}
-                            </template>
-                        </Column>
-                        <Column field="status" header="Status" sortable>
-                            <template #body="slotProps">
-                                <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
-                            </template>
-                        </Column>
-                        <Column headerStyle="width:4rem">
-                            <template #body>
-                                <Button icon="pi pi-search" />
-                            </template>
-                        </Column>
-                    </DataTable>
-                </div>
-            </template>
-        </DataTable>
-        <Toast />
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            expandedRows: {}
-        };
-    },
-    mounted() {
-        ProductService.getProductsWithOrdersSmall().then((data) => (this.products = data));
-    },
-    methods: {
-        onRowExpand(event) {
-            this.$toast.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
-        },
-        onRowCollapse(event) {
-            this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
-        },
-        expandAll() {
-            this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {});
-        },
-        collapseAll() {
-            this.expandedRows = null;
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        },
-        getOrderSeverity(order) {
-            switch (order.status) {
-                case 'DELIVERED':
-                    return 'success';
-
-                case 'CANCELLED':
-                    return 'danger';
-
-                case 'PENDING':
-                    return 'warn';
-
-                case 'RETURNED':
-                    return 'info';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
-                @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
-            <template #header>
-                <div class="flex flex-wrap justify-end gap-2">
-                    <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
-                    <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-                </div>
-            </template>
-            <Column expander style="width: 5rem" />
-            <Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
-                </template>
-            </Column>
-            <Column field="price" header="Price">
-                <template #body="slotProps">
-                    {{ formatCurrency(slotProps.data.price) }}
-                </template>
-            </Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="rating" header="Reviews">
-                <template #body="slotProps">
-                    <Rating :modelValue="slotProps.data.rating" readonly />
-                </template>
-            </Column>
-            <Column header="Status">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
-                </template>
-            </Column>
-            <template #expansion="slotProps">
-                <div class="p-4">
-                    <h5>Orders for {{ slotProps.data.name }}</h5>
-                    <DataTable :value="slotProps.data.orders">
-                        <Column field="id" header="Id" sortable></Column>
-                        <Column field="customer" header="Customer" sortable></Column>
-                        <Column field="date" header="Date" sortable></Column>
-                        <Column field="amount" header="Amount" sortable>
-                            <template #body="slotProps">
-                                {{ formatCurrency(slotProps.data.amount) }}
-                            </template>
-                        </Column>
-                        <Column field="status" header="Status" sortable>
-                            <template #body="slotProps">
-                                <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
-                            </template>
-                        </Column>
-                        <Column headerStyle="width:4rem">
-                            <template #body>
-                                <Button icon="pi pi-search" />
-                            </template>
-                        </Column>
-                    </DataTable>
-                </div>
-            </template>
-        </DataTable>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { ProductService } from '@/service/ProductService';
-
-const products = ref();
-const expandedRows = ref({});
-const toast = useToast();
-
-onMounted(() => {
-    ProductService.getProductsWithOrdersSmall().then((data) => (products.value = data));
-});
-
-const onRowExpand = (event) => {
-    toast.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
-};
-const onRowCollapse = (event) => {
-    toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
-};
-const expandAll = () => {
-    expandedRows.value = products.value.reduce((acc, p) => (acc[p.id] = true) && acc, {});
-};
-const collapseAll = () => {
-    expandedRows.value = null;
-};
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-const getOrderSeverity = (order) => {
-    switch (order.status) {
-        case 'DELIVERED':
-            return 'success';
-
-        case 'CANCELLED':
-            return 'danger';
-
-        case 'PENDING':
-            return 'warn';
-
-        case 'RETURNED':
-            return 'info';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5,
-    orders: [
-        {
-            id: '1000-0',
-            productCode: 'f230fh0g3',
-            date: '2020-09-13',
-            amount: 65,
-            quantity: 1,
-            customer: 'David James',
-            status: 'PENDING'
-        },
-        ...
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsWithOrdersSmall().then((data) => (this.products = data));
-        },
-        onRowExpand(event) {
-            this.$toast.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
-        },
-        onRowCollapse(event) {
-            this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
-        },
-        expandAll() {
-            this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {});
-        },
-        collapseAll() {
-            this.expandedRows = null;
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        },
-        getOrderSeverity(order) {
-            switch (order.status) {
-                case 'DELIVERED':
-                    return 'success';
-
-                case 'CANCELLED':
-                    return 'danger';
-
-                case 'PENDING':
-                    return 'warn';
-
-                case 'RETURNED':
-                    return 'info';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/SizeDoc.vue b/apps/labs/doc/datatable/SizeDoc.vue
deleted file mode 100644
index cf4f9363f..000000000
--- a/apps/labs/doc/datatable/SizeDoc.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex justify-center mb-6">
-                <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
-            </div>
-            <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            size: { label: 'Normal', value: 'null' },
-            sizeOptions: [
-                { label: 'Small', value: 'small' },
-                { label: 'Normal', value: 'null' },
-                { label: 'Large', value: 'large' }
-            ],
-            code: {
-                basic: `
-<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
-<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex justify-center mb-6">
-            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
-        </div>
-        <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            size: { label: 'Normal', value: 'null' },
-            sizeOptions: [
-                { label: 'Small', value: 'small' },
-                { label: 'Normal', value: 'null' },
-                { label: 'Large', value: 'large' }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex justify-center mb-6">
-            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
-        </div>
-        <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const size = ref({ label: 'Normal', value: 'null' });
-const sizeOptions = ref([
-    { label: 'Small', value: 'small' },
-    { label: 'Normal', value: 'null' },
-    { label: 'Large', value: 'large' }
-]);
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/StatefulDoc.vue b/apps/labs/doc/datatable/StatefulDoc.vue
deleted file mode 100644
index 47a01aa83..000000000
--- a/apps/labs/doc/datatable/StatefulDoc.vue
+++ /dev/null
@@ -1,479 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.</p>
-        <p>
-            Change the state of the table e.g paginate, navigate away and then return to this table again to test this feature, the setting is set as <i>session</i> with the <i>stateStorage</i> property so that Table retains the state until the
-            browser is closed. Other alternative is <i>local</i> referring to <i>localStorage</i> for an extended lifetime.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                v-model:filters="filters"
-                v-model:selection="selectedCustomer"
-                :value="customers"
-                stateStorage="session"
-                stateKey="dt-state-demo-session"
-                paginator
-                :rows="5"
-                filterDisplay="menu"
-                selectionMode="single"
-                dataKey="id"
-                :globalFilterFields="['name', 'country.name', 'representative.name', 'status']"
-                tableStyle="min-width: 50rem"
-            >
-                <template #header>
-                    <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
-                        <InputText v-model="filters['global'].value" placeholder="Global Search" />
-                    </IconField>
-                </template>
-                <Column field="name" header="Name" sortable style="width: 25%">
-                    <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                    </template>
-                </Column>
-                <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
-                            <span>{{ data.country.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                    </template>
-                </Column>
-                <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
-                            <span>{{ data.representative.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                            <template #option="slotProps">
-                                <div class="flex items-center gap-2">
-                                    <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
-                                    <span>{{ slotProps.option.name }}</span>
-                                </div>
-                            </template>
-                        </MultiSelect>
-                    </template>
-                </Column>
-                <Column field="status" header="Status" sortable filterMatchMode="equals" style="width: 25%">
-                    <template #body="{ data }">
-                        <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                            <template #option="slotProps">
-                                <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                            </template>
-                        </Select>
-                    </template>
-                </Column>
-                <template #empty> No customers found. </template>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            selectedCustomer: null,
-            filters: null,
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
-            code: {
-                basic: `
-<DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
-    stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
-    selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
-    <template #header>
-        <IconField>
-            <InputIcon>
-                <i class="pi pi-search" />
-            </InputIcon>
-            <InputText v-model="filters['global'].value" placeholder="Global Search" />
-        </IconField>
-    </template>
-    <Column field="name" header="Name" sortable style="width: 25%">
-        <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-        </template>
-    </Column>
-    <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                <span>{{ data.country.name }}</span>
-            </div>
-        </template>
-        <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-        </template>
-    </Column>
-    <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                <span>{{ data.representative.name }}</span>
-            </div>
-        </template>
-        <template #filter="{ filterModel }">
-            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                <template #option="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                        <span>{{ slotProps.option.name }}</span>
-                    </div>
-                </template>
-            </MultiSelect>
-        </template>
-    </Column>
-    <Column field="status" header="Status" sortable filterMatchMode="equals" style="width: 25%">
-        <template #body="{ data }">
-            <Tag :value="data.status" :severity="getSeverity(data.status)" />
-        </template>
-        <template #filter="{ filterModel }">
-            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                <template #option="slotProps">
-                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                </template>
-            </Select>
-        </template>
-    </Column>
-    <template #empty> No customers found. </template>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
-                stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
-                selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
-            <template #header>
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-search" />
-                    </InputIcon>
-                    <InputText v-model="filters['global'].value" placeholder="Global Search" />
-                </IconField>
-            </template>
-            <Column field="name" header="Name" sortable style="width: 25%">
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                </template>
-            </Column>
-            <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column field="status" header="Status" sortable filterMatchMode="equals" style="width: 25%">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Select>
-                </template>
-            </Column>
-            <template #empty> No customers found. </template>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            selectedCustomer: null,
-            filters: null,
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']
-        };
-    },
-    created() {
-        this.initFilters();
-    },
-    mounted() {
-        CustomerService.getCustomersSmall().then((data) => (this.customers = data));
-    },
-    methods: {
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
-            };
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
-                stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
-                selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
-            <template #header>
-                <IconField>
-                <InputIcon>
-                    <i class="pi pi-search" />
-                </InputIcon>
-                <InputText v-model="filters['global'].value" placeholder="Global Search" />
-            </IconField>
-            </template>
-            <Column field="name" header="Name" sortable style="width: 25%">
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                </template>
-            </Column>
-            <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column field="status" header="Status" sortable filterMatchMode="equals" style="width: 25%">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Select>
-                </template>
-            </Column>
-            <template #empty> No customers found. </template>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-const customers = ref();
-const selectedCustomer = ref();
-const filters = ref(
-    {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        representative: { value: null, matchMode: FilterMatchMode.IN },
-        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
-    }
-);
-const representatives = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-    { name: 'Onyama Limba', image: 'onyamalimba.png' },
-    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-]);
-const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-
-onMounted(() => {
-    CustomerService.getCustomersSmall().then((data) => (customers.value = data));
-});
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warn';
-
-        case 'renewal':
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-/* CustomerService */
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`
-            }
-        };
-    },
-    created() {
-        this.initFilters();
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersSmall().then((data) => (this.customers = data));
-        },
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
-            };
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/StripedRowsDoc.vue b/apps/labs/doc/datatable/StripedRowsDoc.vue
deleted file mode 100644
index b02fbc644..000000000
--- a/apps/labs/doc/datatable/StripedRowsDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Alternating rows are displayed when <i>stripedRows</i> property is present.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/TemplateDoc.vue b/apps/labs/doc/datatable/TemplateDoc.vue
deleted file mode 100644
index 49773051b..000000000
--- a/apps/labs/doc/datatable/TemplateDoc.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content at <i>header</i> and <i>footer</i> sections are supported via templating.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" tableStyle="min-width: 50rem">
-                <template #header>
-                    <div class="flex flex-wrap items-center justify-between gap-2">
-                        <span class="text-xl font-bold">Products</span>
-                        <Button icon="pi pi-refresh" rounded raised />
-                    </div>
-                </template>
-                <Column field="name" header="Name"></Column>
-                <Column header="Image">
-                    <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-24 rounded" />
-                    </template>
-                </Column>
-                <Column field="price" header="Price">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.price) }}
-                    </template>
-                </Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="rating" header="Reviews">
-                    <template #body="slotProps">
-                        <Rating :modelValue="slotProps.data.rating" readonly />
-                    </template>
-                </Column>
-                <Column header="Status">
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
-                    </template>
-                </Column>
-                <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
-    <template #header>
-        <div class="flex flex-wrap items-center justify-between gap-2">
-            <span class="text-xl font-bold">Products</span>
-            <Button icon="pi pi-refresh" rounded raised />
-        </div>
-    </template>
-    <Column field="name" header="Name"></Column>
-    <Column header="Image">
-        <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
-        </template>
-    </Column>
-    <Column field="price" header="Price">
-        <template #body="slotProps">
-            {{ formatCurrency(slotProps.data.price) }}
-        </template>
-    </Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="rating" header="Reviews">
-        <template #body="slotProps">
-            <Rating :modelValue="slotProps.data.rating" readonly />
-        </template>
-    </Column>
-    <Column header="Status">
-        <template #body="slotProps">
-            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
-        </template>
-    </Column>
-    <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <template #header>
-                <div class="flex flex-wrap items-center justify-between gap-2">
-                    <span class="text-xl font-bold">Products</span>
-                    <Button icon="pi pi-refresh" rounded raised />
-                </div>
-            </template>
-            <Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
-                </template>
-            </Column>
-            <Column field="price" header="Price">
-                <template #body="slotProps">
-                    {{ formatCurrency(slotProps.data.price) }}
-                </template>
-            </Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="rating" header="Reviews">
-                <template #body="slotProps">
-                    <Rating :modelValue="slotProps.data.rating" readonly />
-                </template>
-            </Column>
-            <Column header="Status">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
-                </template>
-            </Column>
-            <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <template #header>
-                <div class="flex flex-wrap items-center justify-between gap-2">
-                    <span class="text-xl font-bold">Products</span>
-                    <Button icon="pi pi-refresh" rounded raised />
-                </div>
-            </template>
-            <Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
-                </template>
-            </Column>
-            <Column field="price" header="Price">
-                <template #body="slotProps">
-                    {{ formatCurrency(slotProps.data.price) }}
-                </template>
-            </Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="rating" header="Reviews">
-                <template #body="slotProps">
-                    <Rating :modelValue="slotProps.data.rating" readonly />
-                </template>
-            </Column>
-            <Column header="Status">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
-                </template>
-            </Column>
-            <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/colresize/ExpandModeDoc.vue b/apps/labs/doc/datatable/colresize/ExpandModeDoc.vue
deleted file mode 100644
index fae264a12..000000000
--- a/apps/labs/doc/datatable/colresize/ExpandModeDoc.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then(data => products.value = data);
-});
-
-const products = ref();
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/colresize/FitModeDoc.vue b/apps/labs/doc/datatable/colresize/FitModeDoc.vue
deleted file mode 100644
index 5e597ee8d..000000000
--- a/apps/labs/doc/datatable/colresize/FitModeDoc.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Columns can be resized with drag and drop when <i>resizableColumns</i> is enabled. Default resize mode is <i>fit</i>
-            that does not change the overall table width.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then(data => products.value = data);
-});
-
-const products = ref();
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/edit/CellEditDoc.vue b/apps/labs/doc/datatable/edit/CellEditDoc.vue
deleted file mode 100644
index b4535071c..000000000
--- a/apps/labs/doc/datatable/edit/CellEditDoc.vue
+++ /dev/null
@@ -1,304 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> templating of a Column and implementing <i>cell-edit-complete</i> to update the state.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                :value="products"
-                editMode="cell"
-                @cell-edit-complete="onCellEditComplete"
-                :pt="{
-                    table: { style: 'min-width: 50rem' },
-                    column: {
-                        bodycell: ({ state }) => ({
-                            class: [{ '!py-0': state['d_editing'] }]
-                        })
-                    }
-                }"
-            >
-                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
-                    <template #body="{ data, field }">
-                        {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
-                    </template>
-                    <template #editor="{ data, field }">
-                        <template v-if="field !== 'price'">
-                            <InputText v-model="data[field]" autofocus fluid />
-                        </template>
-                        <template v-else>
-                            <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
-                        </template>
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            columns: [
-                { field: 'code', header: 'Code' },
-                { field: 'name', header: 'Name' },
-                { field: 'quantity', header: 'Quantity' },
-                { field: 'price', header: 'Price' }
-            ],
-            code: {
-                basic: `
-<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
-    :pt="{
-        table: { style: 'min-width: 50rem' },
-        column: {
-            bodycell: ({ state }) => ({
-                class: [{ '!py-0': state['d_editing'] }]
-            })
-        }
-    }"
->
-    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
-        <template #body="{ data, field }">
-            {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
-        </template>
-        <template #editor="{ data, field }">
-            <template v-if="field !== 'price'">
-                <InputText v-model="data[field]" autofocus fluid />
-            </template>
-            <template v-else>
-                <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
-            </template>
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
-            :pt="{
-                table: { style: 'min-width: 50rem' },
-                column: {
-                    bodycell: ({ state }) => ({
-                        class: [{ '!py-0': state['d_editing'] }]
-                    })
-                }
-            }"
-        >
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
-                <template #body="{ data, field }">
-                    {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
-                </template>
-                <template #editor="{ data, field }">
-                    <template v-if="field !== 'price'">
-                        <InputText v-model="data[field]" autofocus fluid />
-                    </template>
-                    <template v-else>
-                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
-                    </template>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            columns: [
-                { field: 'code', header: 'Code' },
-                { field: 'name', header: 'Name' },
-                { field: 'quantity', header: 'Quantity' },
-                { field: 'price', header: 'Price' }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        onCellEditComplete(event) {
-            let { data, newValue, field } = event;
-
-            switch (field) {
-                case 'quantity':
-                case 'price':
-                    if (this.isPositiveInteger(newValue)) data[field] = newValue;
-                    else event.preventDefault();
-                    break;
-
-                default:
-                    if (newValue.trim().length > 0) data[field] = newValue;
-                    else event.preventDefault();
-                    break;
-            }
-        },
-        isPositiveInteger(val) {
-            let str = String(val);
-
-            str = str.trim();
-
-            if (!str) {
-                return false;
-            }
-
-            str = str.replace(/^0+/, '') || '0';
-            var n = Math.floor(Number(str));
-
-            return n !== Infinity && String(n) === str && n >= 0;
-        },
-        formatCurrency(value) {
-            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
-            :pt="{
-                table: { style: 'min-width: 50rem' },
-                column: {
-                    bodycell: ({ state }) => ({
-                        class: [{ '!py-0': state['d_editing'] }]
-                    })
-                }
-            }"
-        >
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
-                <template #body="{ data, field }">
-                    {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
-                </template>
-                <template #editor="{ data, field }">
-                    <template v-if="field !== 'price'">
-                        <InputText v-model="data[field]" autofocus fluid />
-                    </template>
-                    <template v-else>
-                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
-                    </template>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-const products = ref();
-const columns = ref([
-    { field: 'code', header: 'Code' },
-    { field: 'name', header: 'Name' },
-    { field: 'quantity', header: 'Quantity' },
-    { field: 'price', header: 'Price' }
-]);
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const onCellEditComplete = (event) => {
-    let { data, newValue, field } = event;
-
-    switch (field) {
-        case 'quantity':
-        case 'price':
-            if (isPositiveInteger(newValue)) data[field] = newValue;
-            else event.preventDefault();
-            break;
-
-        default:
-            if (newValue.trim().length > 0) data[field] = newValue;
-            else event.preventDefault();
-            break;
-    }
-};
-const isPositiveInteger = (val) => {
-    let str = String(val);
-
-    str = str.trim();
-
-    if (!str) {
-        return false;
-    }
-
-    str = str.replace(/^0+/, '') || '0';
-    var n = Math.floor(Number(str));
-
-    return n !== Infinity && String(n) === str && n >= 0;
-};
-const formatCurrency = (value) => {
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
-}
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        onCellEditComplete(event) {
-            let { data, newValue, field } = event;
-
-            switch (field) {
-                case 'quantity':
-                case 'price':
-                    if (this.isPositiveInteger(newValue)) data[field] = newValue;
-                    else event.preventDefault();
-                    break;
-
-                default:
-                    if (newValue.trim().length > 0) data[field] = newValue;
-                    else event.preventDefault();
-                    break;
-            }
-        },
-        isPositiveInteger(val) {
-            let str = String(val);
-
-            str = str.trim();
-
-            if (!str) {
-                return false;
-            }
-
-            str = str.replace(/^0+/, '') || '0';
-            var n = Math.floor(Number(str));
-
-            return n !== Infinity && String(n) === str && n >= 0;
-        },
-        formatCurrency(value) {
-            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/edit/RowEditDoc.vue b/apps/labs/doc/datatable/edit/RowEditDoc.vue
deleted file mode 100644
index d4b134ffd..000000000
--- a/apps/labs/doc/datatable/edit/RowEditDoc.vue
+++ /dev/null
@@ -1,351 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Row editing is configured with setting <i>editMode</i> as <i>row</i> and defining <i>editingRows</i> with the v-model directive to hold the reference of the editing rows. Similarly with cell edit mode, defining input elements with
-            <i>editor</i> slot of a Column and implementing <i>row-edit-save</i> are necessary to update the state. The column to control the editing state should have <i>editor</i> templating applied.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                v-model:editingRows="editingRows"
-                :value="products"
-                editMode="row"
-                dataKey="id"
-                @row-edit-save="onRowEditSave"
-                :pt="{
-                    table: { style: 'min-width: 50rem' },
-                    column: {
-                        bodycell: ({ state }) => ({
-                            style: state['d_editing'] && 'padding-top: 0.75rem; padding-bottom: 0.75rem'
-                        })
-                    }
-                }"
-            >
-                <Column field="code" header="Code" style="width: 20%">
-                    <template #editor="{ data, field }">
-                        <InputText v-model="data[field]" fluid />
-                    </template>
-                </Column>
-                <Column field="name" header="Name" style="width: 20%">
-                    <template #editor="{ data, field }">
-                        <InputText v-model="data[field]" fluid />
-                    </template>
-                </Column>
-                <Column field="inventoryStatus" header="Status" style="width: 20%">
-                    <template #editor="{ data, field }">
-                        <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
-                            <template #option="slotProps">
-                                <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
-                            </template>
-                        </Select>
-                    </template>
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-                    </template>
-                </Column>
-                <Column field="price" header="Price" style="width: 20%">
-                    <template #body="{ data, field }">
-                        {{ formatCurrency(data[field]) }}
-                    </template>
-                    <template #editor="{ data, field }">
-                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
-                    </template>
-                </Column>
-                <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            editingRows: [],
-            statuses: [
-                { label: 'In Stock', value: 'INSTOCK' },
-                { label: 'Low Stock', value: 'LOWSTOCK' },
-                { label: 'Out of Stock', value: 'OUTOFSTOCK' }
-            ],
-            code: {
-                basic: `
-<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
-    :pt="{
-        table: { style: 'min-width: 50rem' },
-        column: {
-            bodycell: ({ state }) => ({
-                style:  state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
-            })
-        }
-    }"
->
-    <Column field="code" header="Code" style="width: 20%">
-        <template #editor="{ data, field }">
-            <InputText v-model="data[field]" />
-        </template>
-    </Column>
-    <Column field="name" header="Name" style="width: 20%">
-        <template #editor="{ data, field }">
-            <InputText v-model="data[field]" fluid />
-        </template>
-    </Column>
-    <Column field="inventoryStatus" header="Status" style="width: 20%">
-        <template #editor="{ data, field }">
-            <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
-                <template #option="slotProps">
-                    <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
-                </template>
-            </Select>
-        </template>
-        <template #body="slotProps">
-            <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-        </template>
-    </Column>
-    <Column field="price" header="Price" style="width: 20%">
-        <template #body="{ data, field }">
-            {{ formatCurrency(data[field]) }}
-        </template>
-        <template #editor="{ data, field }">
-            <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
-        </template>
-    </Column>
-    <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
-            :pt="{
-                table: { style: 'min-width: 50rem' },
-                column: {
-                    bodycell: ({ state }) => ({
-                        style:  state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
-                    })
-                }
-            }"
-        >
-            <Column field="code" header="Code" style="width: 20%">
-                <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" fluid />
-                </template>
-            </Column>
-            <Column field="name" header="Name" style="width: 20%">
-                <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" fluid />
-                </template>
-            </Column>
-            <Column field="inventoryStatus" header="Status" style="width: 20%">
-                <template #editor="{ data, field }">
-                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
-                        </template>
-                    </Select>
-                </template>
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-                </template>
-            </Column>
-            <Column field="price" header="Price" style="width: 20%">
-                <template #body="{ data, field }">
-                    {{ formatCurrency(data[field]) }}
-                </template>
-                <template #editor="{ data, field }">
-                    <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
-                </template>
-            </Column>
-            <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            editingRows: [],
-            statuses: [
-                { label: 'In Stock', value: 'INSTOCK' },
-                { label: 'Low Stock', value: 'LOWSTOCK' },
-                { label: 'Out of Stock', value: 'OUTOFSTOCK' }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        onRowEditSave(event) {
-            let { newData, index } = event;
-
-            this.products[index] = newData;
-        },
-        getStatusLabel(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        },
-        formatCurrency(value) {
-            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
-            :pt="{
-                table: { style: 'min-width: 50rem' },
-                column: {
-                    bodycell: ({ state }) => ({
-                        style:  state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
-                    })
-                }
-            }"
-        >
-            <Column field="code" header="Code" style="width: 20%">
-                <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" fluid />
-                </template>
-            </Column>
-            <Column field="name" header="Name" style="width: 20%">
-                <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" fluid />
-                </template>
-            </Column>
-            <Column field="inventoryStatus" header="Status" style="width: 20%">
-                <template #editor="{ data, field }">
-                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
-                        </template>
-                    </Select>
-                </template>
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-                </template>
-            </Column>
-            <Column field="price" header="Price" style="width: 20%">
-                <template #body="{ data, field }">
-                    {{ formatCurrency(data[field]) }}
-                </template>
-                <template #editor="{ data, field }">
-                    <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
-                </template>
-            </Column>
-            <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-const products = ref();
-const editingRows = ref([]);
-const statuses = ref([
-    { label: 'In Stock', value: 'INSTOCK' },
-    { label: 'Low Stock', value: 'LOWSTOCK' },
-    { label: 'Out of Stock', value: 'OUTOFSTOCK' }
-]);
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const onRowEditSave = (event) => {
-    let { newData, index } = event;
-
-    products.value[index] = newData;
-};
-const getStatusLabel = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-const formatCurrency = (value) => {
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
-}
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        onRowEditSave(event) {
-            let { newData, index } = event;
-
-            this.products[index] = newData;
-        },
-        getStatusLabel(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        },
-        formatCurrency(value) {
-            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/filter/AdvancedFilterDoc.vue b/apps/labs/doc/datatable/filter/AdvancedFilterDoc.vue
deleted file mode 100644
index 780d6586a..000000000
--- a/apps/labs/doc/datatable/filter/AdvancedFilterDoc.vue
+++ /dev/null
@@ -1,755 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>filterDisplay</i> is set as <i>menu</i>, filtering UI is placed inside a popover with support for multiple constraints and advanced templating.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id" filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
-                <template #header>
-                    <div class="flex justify-between">
-                        <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-search" />
-                            </InputIcon>
-                            <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                        </IconField>
-                    </div>
-                </template>
-                <template #empty> No customers found. </template>
-                <template #loading> Loading customers data. Please wait. </template>
-                <Column field="name" header="Name" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        {{ data.name }}
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                    </template>
-                </Column>
-                <Column header="Country" filterField="country.name" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
-                            <span>{{ data.country.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                    </template>
-                    <template #filterclear="{ filterCallback }">
-                        <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
-                    </template>
-                    <template #filterapply="{ filterCallback }">
-                        <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
-                    </template>
-                    <template #filterfooter>
-                        <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
-                    </template>
-                </Column>
-                <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
-                            <span>{{ data.representative.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                            <template #option="slotProps">
-                                <div class="flex items-center gap-2">
-                                    <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
-                                    <span>{{ slotProps.option.name }}</span>
-                                </div>
-                            </template>
-                        </MultiSelect>
-                    </template>
-                </Column>
-                <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
-                    <template #body="{ data }">
-                        {{ formatDate(data.date) }}
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-                    </template>
-                </Column>
-                <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
-                    <template #body="{ data }">
-                        {{ formatCurrency(data.balance) }}
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-                    </template>
-                </Column>
-                <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                            <template #option="slotProps">
-                                <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                            </template>
-                        </Select>
-                    </template>
-                </Column>
-                <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <Slider v-model="filterModel.value" range class="m-4"></Slider>
-                        <div class="flex items-center justify-between px-2">
-                            <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                            <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
-                    <template #body="{ data }">
-                        <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <label for="verified-filter" class="font-bold"> Verified </label>
-                        <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            filters: null,
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
-            loading: true,
-            code: {
-                basic: `
-<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
-        filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
-    <template #header>
-        <div class="flex justify-between">
-            <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-            <IconField>
-                <InputIcon>
-                    <i class="pi pi-search" />
-                </InputIcon>
-                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-            </IconField>
-        </div>
-    </template>
-    <template #empty> No customers found. </template>
-    <template #loading> Loading customers data. Please wait. </template>
-    <Column field="name" header="Name" style="min-width: 12rem">
-        <template #body="{ data }">
-            {{ data.name }}
-        </template>
-        <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-        </template>
-    </Column>
-    <Column header="Country" filterField="country.name" style="min-width: 12rem">
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                <span>{{ data.country.name }}</span>
-            </div>
-        </template>
-        <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-        </template>
-        <template #filterclear="{ filterCallback }">
-            <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
-        </template>
-        <template #filterapply="{ filterCallback }">
-            <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
-        </template>
-        <template #filterfooter>
-            <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
-        </template>
-    </Column>
-    <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                <span>{{ data.representative.name }}</span>
-            </div>
-        </template>
-        <template #filter="{ filterModel }">
-            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                <template #option="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                        <span>{{ slotProps.option.name }}</span>
-                    </div>
-                </template>
-            </MultiSelect>
-        </template>
-    </Column>
-    <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
-        <template #body="{ data }">
-            {{ formatDate(data.date) }}
-        </template>
-        <template #filter="{ filterModel }">
-            <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-        </template>
-    </Column>
-    <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
-        <template #body="{ data }">
-            {{ formatCurrency(data.balance) }}
-        </template>
-        <template #filter="{ filterModel }">
-            <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-        </template>
-    </Column>
-    <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-        <template #body="{ data }">
-            <Tag :value="data.status" :severity="getSeverity(data.status)" />
-        </template>
-        <template #filter="{ filterModel }">
-            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                <template #option="slotProps">
-                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                </template>
-            </Select>
-        </template>
-    </Column>
-    <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
-        <template #body="{ data }">
-            <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-        </template>
-        <template #filter="{ filterModel }">
-            <Slider v-model="filterModel.value" range class="m-4"></Slider>
-            <div class="flex items-center justify-between px-2">
-                <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-            </div>
-        </template>
-    </Column>
-    <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
-        <template #body="{ data }">
-            <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
-        </template>
-        <template #filter="{ filterModel }">
-            <label for="verified-filter" class="font-bold"> Verified </label>
-            <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
-                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
-            <template #header>
-                <div class="flex justify-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
-                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </IconField>
-                </div>
-            </template>
-            <template #empty> No customers found. </template>
-            <template #loading> Loading customers data. Please wait. </template>
-            <Column field="name" header="Name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    {{ data.name }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" filterField="country.name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                </template>
-                <template #filterclear="{ filterCallback }">
-                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
-                </template>
-                <template #filterapply="{ filterCallback }">
-                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
-                </template>
-                <template #filterfooter>
-                    <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
-                </template>
-            </Column>
-            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatDate(data.date) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-                </template>
-            </Column>
-            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatCurrency(data.balance) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-                </template>
-            </Column>
-            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Select>
-                </template>
-            </Column>
-            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-                </template>
-                <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
-                    <div class="flex items-center justify-between px-2">
-                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
-                <template #body="{ data }">
-                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
-                </template>
-                <template #filter="{ filterModel }">
-                    <label for="verified-filter" class="font-bold"> Verified </label>
-                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            filters: null,
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
-            loading: true
-        };
-    },
-    created() {
-        this.initFilters();
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => {
-            this.customers = this.getCustomers(data);
-            this.loading = false;
-        });
-    },
-    methods: {
-        formatDate(value) {
-            return value.toLocaleDateString('en-US', {
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric'
-            });
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        clearFilter() {
-            this.initFilters();
-        },
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-            };
-        },
-        getCustomers(data) {
-            return [...(data || [])].map((d) => {
-                d.date = new Date(d.date);
-
-                return d;
-            });
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
-                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
-            <template #header>
-                <div class="flex justify-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
-                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </IconField>
-                </div>
-            </template>
-            <template #empty> No customers found. </template>
-            <template #loading> Loading customers data. Please wait. </template>
-            <Column field="name" header="Name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    {{ data.name }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" filterField="country.name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                </template>
-                <template #filterclear="{ filterCallback }">
-                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
-                </template>
-                <template #filterapply="{ filterCallback }">
-                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
-                </template>
-                <template #filterfooter>
-                    <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
-                </template>
-            </Column>
-            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatDate(data.date) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-                </template>
-            </Column>
-            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatCurrency(data.balance) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-                </template>
-            </Column>
-            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Select>
-                </template>
-            </Column>
-            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-                </template>
-                <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
-                    <div class="flex items-center justify-between px-2">
-                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
-                <template #body="{ data }">
-                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
-                </template>
-                <template #filter="{ filterModel }">
-                    <label for="verified-filter" class="font-bold"> Verified </label>
-                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-const customers = ref();
-const filters = ref();
-const representatives = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-    { name: 'Onyama Limba', image: 'onyamalimba.png' },
-    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-]);
-const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-const loading = ref(true);
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => {
-        customers.value = getCustomers(data);
-        loading.value = false;
-    });
-});
-
-
-const initFilters = () => {
-    filters.value = {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        representative: { value: null, matchMode: FilterMatchMode.IN },
-        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-    };
-};
-
-initFilters();
-
-const formatDate = (value) => {
-    return value.toLocaleDateString('en-US', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric'
-    });
-};
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-const clearFilter = () => {
-    initFilters();
-};
-const getCustomers = (data) => {
-    return [...(data || [])].map((d) => {
-        d.date = new Date(d.date);
-
-        return d;
-    });
-};
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warn';
-
-        case 'renewal':
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`
-            }
-        };
-    },
-    created() {
-        this.initFilters();
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => {
-                this.customers = this.getCustomers(data);
-                this.loading = false;
-            });
-        },
-        formatDate(value) {
-            return value.toLocaleDateString('en-US', {
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric'
-            });
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        clearFilter() {
-            this.initFilters();
-        },
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-            };
-        },
-        getCustomers(data) {
-            return [...(data || [])].map((d) => {
-                d.date = new Date(d.date);
-
-                return d;
-            });
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/filter/BasicFilterDoc.vue b/apps/labs/doc/datatable/filter/BasicFilterDoc.vue
deleted file mode 100644
index b90211a0b..000000000
--- a/apps/labs/doc/datatable/filter/BasicFilterDoc.vue
+++ /dev/null
@@ -1,537 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Data filtering is enabled by defining the <i>filters</i> model referring to a <i>DataTableFilterMeta</i> instance and specifying a filter element for a column using the <i>filter</i> template. This template receives a
-            <i>filterModel</i> and <i>filterCallback</i> to build your own UI.
-        </p>
-        <p>The optional global filtering searches the data against a single value that is bound to the <i>global</i> key of the <i>filters</i> object. The fields to search against are defined with the <i>globalFilterFields</i>.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
-                <template #header>
-                    <div class="flex justify-end">
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-search" />
-                            </InputIcon>
-                            <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                        </IconField>
-                    </div>
-                </template>
-                <template #empty> No customers found. </template>
-                <template #loading> Loading customers data. Please wait. </template>
-                <Column field="name" header="Name" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        {{ data.name }}
-                    </template>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
-                    </template>
-                </Column>
-                <Column header="Country" filterField="country.name" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
-                            <span>{{ data.country.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
-                    </template>
-                </Column>
-                <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
-                            <span>{{ data.representative.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
-                            <template #option="slotProps">
-                                <div class="flex items-center gap-2">
-                                    <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
-                                    <span>{{ slotProps.option.name }}</span>
-                                </div>
-                            </template>
-                        </MultiSelect>
-                    </template>
-                </Column>
-                <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                    </template>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
-                            <template #option="slotProps">
-                                <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                            </template>
-                        </Select>
-                    </template>
-                </Column>
-                <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
-                    <template #body="{ data }">
-                        <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
-                    </template>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            filters: {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                status: { value: null, matchMode: FilterMatchMode.EQUALS },
-                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-            },
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
-            loading: true,
-            code: {
-                basic: `
-<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
-        :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
-    <template #header>
-        <div class="flex justify-end">
-            <IconField>
-                <InputIcon>
-                    <i class="pi pi-search" />
-                </InputIcon>
-                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-            </IconField>
-        </div>
-    </template>
-    <template #empty> No customers found. </template>
-    <template #loading> Loading customers data. Please wait. </template>
-    <Column field="name" header="Name" style="min-width: 12rem">
-        <template #body="{ data }">
-            {{ data.name }}
-        </template>
-        <template #filter="{ filterModel, filterCallback }">
-            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
-        </template>
-    </Column>
-    <Column header="Country" filterField="country.name" style="min-width: 12rem">
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                <span>{{ data.country.name }}</span>
-            </div>
-        </template>
-        <template #filter="{ filterModel, filterCallback }">
-            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
-        </template>
-    </Column>
-    <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                <span>{{ data.representative.name }}</span>
-            </div>
-        </template>
-        <template #filter="{ filterModel, filterCallback }">
-            <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
-                <template #option="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                        <span>{{ slotProps.option.name }}</span>
-                    </div>
-                </template>
-            </MultiSelect>
-        </template>
-    </Column>
-    <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
-        <template #body="{ data }">
-            <Tag :value="data.status" :severity="getSeverity(data.status)" />
-        </template>
-        <template #filter="{ filterModel, filterCallback }">
-            <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
-                <template #option="slotProps">
-                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                </template>
-            </Select>
-        </template>
-    </Column>
-    <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
-        <template #body="{ data }">
-            <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
-        </template>
-        <template #filter="{ filterModel, filterCallback }">
-            <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
-                :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
-            <template #header>
-                <div class="flex justify-end">
-                    <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
-                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </IconField>
-                </div>
-            </template>
-            <template #empty> No customers found. </template>
-            <template #loading> Loading customers data. Please wait. </template>
-            <Column field="name" header="Name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    {{ data.name }}
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" filterField="country.name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
-                </template>
-            </Column>
-            <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Select>
-                </template>
-            </Column>
-            <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
-                <template #body="{ data }">
-                    <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { FilterMatchMode } from '@primevue/core/api';
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            filters: {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                status: { value: null, matchMode: FilterMatchMode.EQUALS },
-                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-            },
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
-            loading: true
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => {
-            this.customers = this.getCustomers(data);
-            this.loading = false;
-        });
-    },
-    methods: {
-        getCustomers(data) {
-            return [...(data || [])].map((d) => {
-                d.date = new Date(d.date);
-
-                return d;
-            });
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
-                :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
-            <template #header>
-                <div class="flex justify-end">
-                    <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
-                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </IconField>
-                </div>
-            </template>
-            <template #empty> No customers found. </template>
-            <template #loading> Loading customers data. Please wait. </template>
-            <Column field="name" header="Name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    {{ data.name }}
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" filterField="country.name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
-                </template>
-            </Column>
-            <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Select>
-                </template>
-            </Column>
-            <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
-                <template #body="{ data }">
-                    <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { FilterMatchMode } from '@primevue/core/api';
-import { CustomerService } from '@/service/CustomerService';
-
-const customers = ref();
-const filters = ref({
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-    name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-    'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-    representative: { value: null, matchMode: FilterMatchMode.IN },
-    status: { value: null, matchMode: FilterMatchMode.EQUALS },
-    verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-});
-const representatives = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-    { name: 'Onyama Limba', image: 'onyamalimba.png' },
-    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-]);
-const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-const loading = ref(true);
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => {
-            customers.value = getCustomers(data);
-            loading.value = false;
-        });
-});
-
-const getCustomers = (data) => {
-    return [...(data || [])].map((d) => {
-        d.date = new Date(d.date);
-
-        return d;
-    });
-};
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warn';
-
-        case 'renewal':
-            return null;
-    }
-}
-
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => {
-                this.customers = this.getCustomers(data);
-                this.loading = false;
-            });
-        },
-        getCustomers(data) {
-            return [...(data || [])].map((d) => {
-                d.date = new Date(d.date);
-
-                return d;
-            });
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/pagination/PaginationBasicDoc.vue b/apps/labs/doc/datatable/pagination/PaginationBasicDoc.vue
deleted file mode 100644
index ac3ca5fa2..000000000
--- a/apps/labs/doc/datatable/pagination/PaginationBasicDoc.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" style="width: 25%"></Column>
-                <Column field="country.name" header="Country" style="width: 25%"></Column>
-                <Column field="company" header="Company" style="width: 25%"></Column>
-                <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            code: {
-                basic: `
-<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" style="width: 25%"></Column>
-    <Column field="country.name" header="Country" style="width: 25%"></Column>
-    <Column field="company" header="Company" style="width: 25%"></Column>
-    <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" style="width: 25%"></Column>
-            <Column field="country.name" header="Country" style="width: 25%"></Column>
-            <Column field="company" header="Company" style="width: 25%"></Column>
-            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" style="width: 25%"></Column>
-            <Column field="country.name" header="Country" style="width: 25%"></Column>
-            <Column field="company" header="Company" style="width: 25%"></Column>
-            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
-});
-
-const customers = ref();
-
-<\/script>
-`,
-                data: `
-                {
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/pagination/PaginationHeadlessDoc.vue b/apps/labs/doc/datatable/pagination/PaginationHeadlessDoc.vue
deleted file mode 100644
index c815efe72..000000000
--- a/apps/labs/doc/datatable/pagination/PaginationHeadlessDoc.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Headless mode on Pagination is enabled by adding using <i>paginatorcontainer</i>.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="customers" paginator :rows="5" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" style="width: 25%"></Column>
-                <Column field="country.name" header="Country" style="width: 25%"></Column>
-                <Column field="company" header="Company" style="width: 25%"></Column>
-                <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-                <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                    <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                        <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                        <div class="text-color font-medium">
-                            <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                            <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                        </div>
-                        <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                    </div>
-                </template>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            code: {
-                basic: `
-<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" style="width: 25%"></Column>
-    <Column field="country.name" header="Country" style="width: 25%"></Column>
-    <Column field="company" header="Company" style="width: 25%"></Column>
-    <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-    <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-        <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-            <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-            <div class="text-color font-medium">
-                <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-            </div>
-            <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-        </div>
-    </template>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" style="width: 25%"></Column>
-            <Column field="country.name" header="Country" style="width: 25%"></Column>
-            <Column field="company" header="Company" style="width: 25%"></Column>
-            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                    <div class="text-color font-medium">
-                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                    </div>
-                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                </div>
-            </template>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" style="width: 25%"></Column>
-            <Column field="country.name" header="Country" style="width: 25%"></Column>
-            <Column field="company" header="Company" style="width: 25%"></Column>
-            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                    <div class="text-color font-medium">
-                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                    </div>
-                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                </div>
-            </template>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
-});
-
-const customers = ref();
-
-<\/script>
-`,
-                data: `
-                {
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/pagination/PaginationTemplateDoc.vue b/apps/labs/doc/datatable/pagination/PaginationTemplateDoc.vue
deleted file mode 100644
index 7f844bdde..000000000
--- a/apps/labs/doc/datatable/pagination/PaginationTemplateDoc.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Paginator UI is customized using the <i>paginatorTemplate</i> property. Each element can also be customized further with your own UI to replace the default one, refer to the
-            <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                :value="customers"
-                paginator
-                :rows="5"
-                :rowsPerPageOptions="[5, 10, 20, 50]"
-                paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-                currentPageReportTemplate="{first} to {last} of {totalRecords}"
-                tableStyle="min-width: 50rem"
-            >
-                <template #paginatorstart>
-                    <Button type="button" icon="pi pi-refresh" text />
-                </template>
-                <template #paginatorend>
-                    <Button type="button" icon="pi pi-download" text />
-                </template>
-                <Column field="name" header="Name" style="width: 25%"></Column>
-                <Column field="country.name" header="Country" style="width: 25%"></Column>
-                <Column field="company" header="Company" style="width: 25%"></Column>
-                <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            code: {
-                basic: `
-<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
-        paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-        currentPageReportTemplate="{first} to {last} of {totalRecords}">
-    <template #paginatorstart>
-        <Button type="button" icon="pi pi-refresh" text />
-    </template>
-    <template #paginatorend>
-        <Button type="button" icon="pi pi-download" text />
-    </template>
-    <Column field="name" header="Name" style="width: 25%"></Column>
-    <Column field="country.name" header="Country" style="width: 25%"></Column>
-    <Column field="company" header="Company" style="width: 25%"></Column>
-    <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
-                paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-                currentPageReportTemplate="{first} to {last} of {totalRecords}">
-            <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" text />
-            </template>
-            <template #paginatorend>
-                <Button type="button" icon="pi pi-download" text />
-            </template>
-            <Column field="name" header="Name" style="width: 25%"></Column>
-            <Column field="country.name" header="Country" style="width: 25%"></Column>
-            <Column field="company" header="Company" style="width: 25%"></Column>
-            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
-                paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-                currentPageReportTemplate="{first} to {last} of {totalRecords}">
-            <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" text />
-            </template>
-            <template #paginatorend>
-                <Button type="button" icon="pi pi-download" text />
-            </template>
-            <Column field="name" header="Name" style="width: 25%"></Column>
-            <Column field="country.name" header="Country" style="width: 25%"></Column>
-            <Column field="company" header="Company" style="width: 25%"></Column>
-            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
-});
-
-const customers = ref();
-
-<\/script>
-`,
-                data: `
-                {
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue b/apps/labs/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
deleted file mode 100644
index d3222ce8a..000000000
--- a/apps/labs/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            When <i>expandableRowGroups</i> is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the <i>expandedRows</i> property and <i>rowgroup-expand</i> and
-            <i>rowgroup-collapse</i> events.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                v-model:expandedRowGroups="expandedRowGroups"
-                :value="customers"
-                expandableRowGroups
-                rowGroupMode="subheader"
-                groupRowsBy="representative.name"
-                sortMode="single"
-                sortField="representative.name"
-                :sortOrder="1"
-                @rowgroup-expand="onRowGroupExpand"
-                @rowgroup-collapse="onRowGroupCollapse"
-                tableStyle="min-width: 50rem"
-            >
-                <template #groupheader="slotProps">
-                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" class="ml-2 inline-block" />
-                    <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
-                </template>
-                <Column field="representative.name" header="Representative"></Column>
-                <Column field="name" header="Name" style="width: 20%"></Column>
-                <Column field="country" header="Country" style="width: 20%">
-                    <template #body="slotProps">
-                        <div class="flex items-center gap-2">
-                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
-                            <span>{{ slotProps.data.country.name }}</span>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="company" header="Company" style="width: 20%"></Column>
-                <Column field="status" header="Status" style="width: 20%">
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                    </template>
-                </Column>
-                <Column field="date" header="Date" style="width: 20%"></Column>
-                <template #groupfooter="slotProps">
-                    <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
-                </template>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            expandedRowGroups: null,
-            code: {
-                basic: `
-<DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
-        expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
-        sortMode="single" sortField="representative.name" :sortOrder="1">
-    <template #groupheader="slotProps">
-        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
-        <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
-    </template>
-    <Column field="representative.name" header="Representative"></Column>
-    <Column field="name" header="Name" style="width: 20%"></Column>
-    <Column field="country" header="Country" style="width: 20%">
-        <template #body="slotProps">
-            <div class="flex items-center gap-2">
-                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                <span>{{ slotProps.data.country.name }}</span>
-            </div>
-        </template>
-    </Column>
-    <Column field="company" header="Company" style="width: 20%"></Column>
-    <Column field="status" header="Status" style="width: 20%">
-        <template #body="slotProps">
-            <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-        </template>
-    </Column>
-    <Column field="date" header="Date" style="width: 20%"></Column>
-    <template #groupfooter="slotProps">
-        <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
-    </template>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
-                expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
-                sortMode="single" sortField="representative.name" :sortOrder="1">
-            <template #groupheader="slotProps">
-                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
-                <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
-            </template>
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="name" header="Name" style="width: 20%"></Column>
-            <Column field="country" header="Country" style="width: 20%">
-                <template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                        <span>{{ slotProps.data.country.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="company" header="Company" style="width: 20%"></Column>
-            <Column field="status" header="Status" style="width: 20%">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                </template>
-            </Column>
-            <Column field="date" header="Date" style="width: 20%"></Column>
-            <template #groupfooter="slotProps">
-                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
-            </template>
-        </DataTable>
-        <Toast />
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            expandedRowGroups: null
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-    },
-    methods: {
-        onRowGroupExpand(event) {
-            this.$toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
-        },
-        onRowGroupCollapse(event) {
-            this.$toast.add({ severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000 });
-        },
-        calculateCustomerTotal(name) {
-            let total = 0;
-
-            if (this.customers) {
-                for (let customer of this.customers) {
-                    if (customer.representative.name === name) {
-                        total++;
-                    }
-                }
-            }
-
-            return total;
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
-                expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
-                sortMode="single" sortField="representative.name" :sortOrder="1">
-            <template #groupheader="slotProps">
-                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
-                <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
-            </template>
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="name" header="Name" style="width: 20%"></Column>
-            <Column field="country" header="Country" style="width: 20%">
-                <template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                        <span>{{ slotProps.data.country.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="company" header="Company" style="width: 20%"></Column>
-            <Column field="status" header="Status" style="width: 20%">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                </template>
-            </Column>
-            <Column field="date" header="Date" style="width: 20%"></Column>
-            <template #groupfooter="slotProps">
-                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
-            </template>
-        </DataTable>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { CustomerService } from '@/service/CustomerService';
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
-});
-
-const customers = ref();
-const expandedRowGroups = ref();
-const toast = useToast();
-const onRowGroupExpand = (event) => {
-    toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
-};
-const onRowGroupCollapse = (event) => {
-    toast.add({ severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000 });
-};
-const calculateCustomerTotal = (name) => {
-    let total = 0;
-
-    if (customers.value) {
-        for (let customer of customers.value) {
-            if (customer.representative.name === name) {
-                total++;
-            }
-        }
-    }
-
-    return total;
-};
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warn';
-
-        case 'renewal':
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-        },
-        onRowGroupExpand(event) {
-            this.$toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
-        },
-        onRowGroupCollapse(event) {
-            this.$toast.add({ severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000 });
-        },
-        calculateCustomerTotal(name) {
-            let total = 0;
-
-            if (this.customers) {
-                for (let customer of this.customers) {
-                    if (customer.representative.name === name) {
-                        total++;
-                    }
-                }
-            }
-
-            return total;
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue b/apps/labs/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
deleted file mode 100644
index f0306b640..000000000
--- a/apps/labs/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>rowGroupMode</i> is configured to be <i>rowspan</i>, the grouping column spans multiple rows.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
-                <Column header="#" headerStyle="width:3rem">
-                    <template #body="slotProps">
-                        {{ slotProps.index + 1 }}
-                    </template>
-                </Column>
-                <Column field="representative.name" header="Representative" style="min-width: 200px">
-                    <template #body="slotProps">
-                        <div class="flex items-center gap-2">
-                            <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
-                            <span>{{ slotProps.data.representative.name }}</span>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="name" header="Name" style="min-width: 200px"></Column>
-                <Column field="country" header="Country" style="min-width: 150px">
-                    <template #body="slotProps">
-                        <div class="flex items-center gap-2">
-                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
-                            <span>{{ slotProps.data.country.name }}</span>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="company" header="Company" style="min-width: 200px"></Column>
-                <Column field="status" header="Status" style="min-width: 100px">
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                    </template>
-                </Column>
-                <Column field="date" header="Date" style="min-width: 100px"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            expandedRowGroups: null,
-            code: {
-                basic: `
-<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
-    <Column header="#" headerStyle="width:3rem">
-        <template #body="slotProps">
-            {{ slotProps.index + 1 }}
-        </template>
-    </Column>
-    <Column field="representative.name" header="Representative" style="min-width: 200px">
-        <template #body="slotProps">
-            <div class="flex items-center gap-2">
-                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
-                <span>{{ slotProps.data.representative.name }}</span>
-            </div>
-        </template>
-    </Column>
-    <Column field="name" header="Name" style="min-width: 200px"></Column>
-    <Column field="country" header="Country" style="min-width: 150px">
-        <template #body="slotProps">
-            <div class="flex items-center gap-2">
-                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                <span>{{ slotProps.data.country.name }}</span>
-            </div>
-        </template>
-    </Column>
-    <Column field="company" header="Company" style="min-width: 200px"></Column>
-    <Column field="status" header="Status" style="min-width: 100px">
-        <template #body="slotProps">
-            <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-        </template>
-    </Column>
-    <Column field="date" header="Date" style="min-width: 100px"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
-            <Column header="#" headerStyle="width:3rem">
-                <template #body="slotProps">
-                    {{ slotProps.index + 1 }}
-                </template>
-            </Column>
-            <Column field="representative.name" header="Representative" style="min-width: 200px">
-                <template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
-                        <span>{{ slotProps.data.representative.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="name" header="Name" style="min-width: 200px"></Column>
-            <Column field="country" header="Country" style="min-width: 150px">
-                <template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                        <span>{{ slotProps.data.country.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="company" header="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" style="min-width: 100px">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                </template>
-            </Column>
-            <Column field="date" header="Date" style="min-width: 100px"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
-            <Column header="#" headerStyle="width:3rem">
-                <template #body="slotProps">
-                    {{ slotProps.index + 1 }}
-                </template>
-            </Column>
-            <Column field="representative.name" header="Representative" style="min-width: 200px">
-                <template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
-                        <span>{{ slotProps.data.representative.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="name" header="Name" style="min-width: 200px"></Column>
-            <Column field="country" header="Country" style="min-width: 150px">
-                <template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                        <span>{{ slotProps.data.country.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="company" header="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" style="min-width: 100px">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                </template>
-            </Column>
-            <Column field="date" header="Date" style="min-width: 100px"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { CustomerService } from '@/service/CustomerService';
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
-});
-
-const customers = ref();
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warn';
-
-        case 'renewal':
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-        },
-        onRowGroupExpand(event) {
-            this.$toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
-        },
-        onRowGroupCollapse(event) {
-            this.$toast.add({ severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000 });
-        },
-        calculateCustomerTotal(name) {
-            let total = 0;
-
-            if (this.customers) {
-                for (let customer of this.customers) {
-                    if (customer.representative.name === name) {
-                        total++;
-                    }
-                }
-            }
-
-            return total;
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue b/apps/labs/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
deleted file mode 100644
index ce80c5712..000000000
--- a/apps/labs/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
+++ /dev/null
@@ -1,302 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Rows are grouped with the <i>groupRowsBy</i> property. When <i>rowGroupMode</i> is set as <i>subheader</i>, a header and footer can be displayed for each group. The content of a group header is provided with <i>groupheader</i> and footer
-            with <i>groupfooter</i> slots.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-                <template #groupheader="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
-                        <span>{{ slotProps.data.representative.name }}</span>
-                    </div>
-                </template>
-                <Column field="representative.name" header="Representative"></Column>
-                <Column field="name" header="Name" style="min-width: 200px"></Column>
-                <Column field="country" header="Country" style="min-width: 200px">
-                    <template #body="slotProps">
-                        <div class="flex items-center gap-2">
-                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
-                            <span>{{ slotProps.data.country.name }}</span>
-                        </div>
-                    </template>
-                </Column>
-                <Column field="company" header="Company" style="min-width: 200px"></Column>
-                <Column field="status" header="Status" style="min-width: 200px">
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                    </template>
-                </Column>
-                <Column field="date" header="Date" style="min-width: 200px"></Column>
-                <template #groupfooter="slotProps">
-                    <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
-                </template>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            code: {
-                basic: `
-<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
-        sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-    <Column field="representative.name" header="Representative"></Column>
-    <Column field="name" header="Name" style="min-width: 200px"></Column>
-    <Column field="country" header="Country" style="min-width: 200px">
-        <template #body="slotProps">
-            <div class="flex items-center gap-2">
-                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                <span>{{ slotProps.data.country.name }}</span>
-            </div>
-        </template>
-    </Column>
-    <Column field="company" header="Company" style="min-width: 200px"></Column>
-    <Column field="status" header="Status" style="min-width: 200px">
-        <template #body="slotProps">
-            <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-        </template>
-    </Column>
-    <Column field="date" header="Date" style="min-width: 200px"></Column>
-    <template #groupheader="slotProps">
-        <div class="flex items-center gap-2">
-            <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
-            <span>{{ slotProps.data.representative.name }}</span>
-        </div>
-    </template>
-    <template #groupfooter="slotProps">
-        <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
-    </template>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
-                sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="name" header="Name" style="min-width: 200px"></Column>
-            <Column field="country" header="Country" style="min-width: 200px">
-                <template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                        <span>{{ slotProps.data.country.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="company" header="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" style="min-width: 200px">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                </template>
-            </Column>
-            <Column field="date" header="Date" style="min-width: 200px"></Column>
-            <template #groupheader="slotProps">
-                <div class="flex items-center gap-2">
-                    <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
-                    <span>{{ slotProps.data.representative.name }}</span>
-                </div>
-            </template>
-            <template #groupfooter="slotProps">
-                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
-            </template>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-    },
-    methods: {
-        calculateCustomerTotal(name) {
-            let total = 0;
-
-            if (this.customers) {
-                for (let customer of this.customers) {
-                    if (customer.representative.name === name) {
-                        total++;
-                    }
-                }
-            }
-
-            return total;
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
-                sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="name" header="Name" style="min-width: 200px"></Column>
-            <Column field="country" header="Country" style="min-width: 200px">
-                <template #body="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
-                        <span>{{ slotProps.data.country.name }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="company" header="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" style="min-width: 200px">
-                <template #body="slotProps">
-                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
-                </template>
-            </Column>
-            <Column field="date" header="Date" style="min-width: 200px"></Column>
-            <template #groupheader="slotProps">
-                <div class="flex items-center gap-2">
-                    <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
-                    <span>{{ slotProps.data.representative.name }}</span>
-                </div>
-            </template>
-            <template #groupfooter="slotProps">
-                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
-            </template>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
-});
-
-const customers = ref();
-const calculateCustomerTotal = (name) => {
-    let total = 0;
-
-    if (customers.value) {
-        for (let customer of customers.value) {
-            if (customer.representative.name === name) {
-                total++;
-            }
-        }
-    }
-
-    return total;
-};
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warn';
-
-        case 'renewal':
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
-        },
-        calculateCustomerTotal(name) {
-            let total = 0;
-
-            if (this.customers) {
-                for (let customer of this.customers) {
-                    if (customer.representative.name === name) {
-                        total++;
-                    }
-                }
-            }
-
-            return total;
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
deleted file mode 100644
index 239d55b46..000000000
--- a/apps/labs/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specifying <i>selectionMode</i> as <i>multiple</i> on a Column, displays a checkbox inside that column for selection.</p>
-        <p>The header checkbox toggles the selection state of the whole dataset by default, when paginator is enabled you may add <i>selectAll</i> property and <i>select-all-change</i> event to only control the selection of visible rows.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
-                <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true,
-            code: {
-                basic: `
-<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
-    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
-            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
-            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const selectedProduct = ref();
-const metaKey = ref(true);
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowselection/ColumnRowSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
deleted file mode 100644
index 146248892..000000000
--- a/apps/labs/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Row selection with an element inside a column is implemented with templating.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-                <Column class="w-24 !text-end">
-                    <template #body="{ data }">
-                        <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-    <Column class="w-24 !text-end">
-        <template #body="{ data }">
-            <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-            <Column class="w-24 !text-end">
-                <template #body="{ data }">
-                    <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
-                </template>
-            </Column>
-        </DataTable>
-        <Toast/>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        selectRow(data) {
-            this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-            <Column class="w-24 !text-end">
-                <template #body="{ data }">
-                    <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
-                </template>
-            </Column>
-        </DataTable>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const toast = useToast();
-const selectRow = (data) => {
-    toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
-};
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        selectRow(data) {
-            this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
deleted file mode 100644
index da94deb7e..000000000
--- a/apps/labs/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            More than one row is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is not necessary to add to existing selections. When the optional
-            <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new row requires meta key to be present. Note that in touch enabled devices, DataTable always ignores metaKey.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex justify-center items-center mb-6 gap-2">
-                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-                <label for="input-metakey">MetaKey</label>
-            </div>
-            <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true,
-            code: {
-                basic: `
-<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-
-<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex justify-center items-center mb-6 gap-2">
-            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex justify-center items-center mb-6 gap-2">
-            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const selectedProduct = ref();
-const metaKey = ref(true);
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
deleted file mode 100644
index 6acd27001..000000000
--- a/apps/labs/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Specifying <i>selectionMode</i> as <i>single</i> on a Column, displays a radio button inside that column for selection. By default, row clicks also trigger selection, set <i>selectionMode</i> of DataTable to <i>radiobutton</i> to only
-            trigger selection using the radio buttons.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
-                <Column selectionMode="single" headerStyle="width: 3rem"></Column>
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true,
-            code: {
-                basic: `
-<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
-    <Column selectionMode="single" headerStyle="width: 3rem"></Column>
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
-            <Column selectionMode="single" headerStyle="width: 3rem"></Column>
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
-            <Column selectionMode="single" headerStyle="width: 3rem"></Column>
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const selectedProduct = ref();
-const metaKey = ref(true);
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowselection/RowSelectEventsDoc.vue b/apps/labs/doc/datatable/rowselection/RowSelectEventsDoc.vue
deleted file mode 100644
index 299a946bf..000000000
--- a/apps/labs/doc/datatable/rowselection/RowSelectEventsDoc.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DataTable provides <i>row-select</i> and <i>row-unselect</i> events to listen selection events.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false" @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true,
-            code: {
-                basic: `
-<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
-        @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
-    <Column selectionMode="single" headerStyle="width: 3rem"></Column>
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
-                @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-        <Toast/>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        onRowSelect(event) {
-            this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000 });
-        },
-        onRowUnselect(event) {
-            this.$toast.add({ severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
-                @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-        <Toast/>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const selectedProduct = ref();
-const toast = useToast();
-const onRowSelect = (event) => {
-    toast.add({ severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000 });
-};
-const onRowUnselect = (event) => {
-    toast.add({ severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000 });
-}
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        onRowSelect(event) {
-            this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000 });
-        },
-        onRowUnselect(event) {
-            this.$toast.add({ severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/rowselection/SingleRowSelectionDoc.vue b/apps/labs/doc/datatable/rowselection/SingleRowSelectionDoc.vue
deleted file mode 100644
index 6044301f6..000000000
--- a/apps/labs/doc/datatable/rowselection/SingleRowSelectionDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Single row selection is enabled by defining <i>selectionMode</i> as <i>single</i> along with a value binding using <i>selection</i> property. When available, it is suggested to provide a unique identifier of a row with <i>dataKey</i> to
-            optimize performance.
-        </p>
-        <p>
-            By default, metaKey press (e.g. <i>⌘</i>) is necessary to unselect a row however this can be configured with disabling the <i>metaKeySelection</i> property. In touch enabled devices this option has no effect and behavior is same as
-            setting it to false.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex justify-center items-center mb-6 gap-2">
-                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-                <label for="input-metakey">MetaKey</label>
-            </div>
-            <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true,
-            code: {
-                basic: `
-<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-
-<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code"></Column>
-    <Column field="name" header="Name"></Column>
-    <Column field="category" header="Category"></Column>
-    <Column field="quantity" header="Quantity"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex justify-center items-center mb-6 gap-2">
-            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            metaKey: true
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex justify-center items-center mb-6 gap-2">
-            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const selectedProduct = ref();
-const metaKey = ref(true);
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/samples/CustomersDoc.vue b/apps/labs/doc/datatable/samples/CustomersDoc.vue
deleted file mode 100644
index 30b9e4660..000000000
--- a/apps/labs/doc/datatable/samples/CustomersDoc.vue
+++ /dev/null
@@ -1,709 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DataTable with selection, pagination, filtering, sorting and templating.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                v-model:filters="filters"
-                v-model:selection="selectedCustomers"
-                :value="customers"
-                paginator
-                :rows="10"
-                dataKey="id"
-                filterDisplay="menu"
-                :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
-            >
-                <template #header>
-                    <div class="flex justify-between">
-                        <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-search" />
-                            </InputIcon>
-                            <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                        </IconField>
-                    </div>
-                </template>
-                <template #empty> No customers found. </template>
-                <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-                <Column field="name" header="Name" sortable style="min-width: 14rem">
-                    <template #body="{ data }">
-                        {{ data.name }}
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                    </template>
-                </Column>
-                <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
-                            <span>{{ data.country.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                    </template>
-                </Column>
-                <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-                    <template #body="{ data }">
-                        <div class="flex items-center gap-2">
-                            <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
-                            <span>{{ data.representative.name }}</span>
-                        </div>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                            <template #option="slotProps">
-                                <div class="flex items-center gap-2">
-                                    <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
-                                    <span>{{ slotProps.option.name }}</span>
-                                </div>
-                            </template>
-                        </MultiSelect>
-                    </template>
-                </Column>
-                <Column field="date" header="Date" sortable filterField="date" dataType="date" style="min-width: 10rem">
-                    <template #body="{ data }">
-                        {{ formatDate(data.date) }}
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-                    </template>
-                </Column>
-                <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
-                    <template #body="{ data }">
-                        {{ formatCurrency(data.balance) }}
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-                    </template>
-                </Column>
-                <Column header="Status" sortable field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                            <template #option="slotProps">
-                                <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                            </template>
-                        </Select>
-                    </template>
-                </Column>
-                <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
-                    <template #body="{ data }">
-                        <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-                    </template>
-                    <template #filter="{ filterModel }">
-                        <Slider v-model="filterModel.value" range class="m-4"></Slider>
-                        <div class="flex items-center justify-between px-2">
-                            <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                            <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-                        </div>
-                    </template>
-                </Column>
-                <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
-                    <template #body>
-                        <Button type="button" icon="pi pi-cog" rounded />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            selectedCustomers: null,
-            filters: null,
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
-            code: {
-                basic: `
-<DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
-    :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
-    <template #header>
-        <div class="flex justify-between">
-            <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-            <IconField>
-                <InputIcon>
-                    <i class="pi pi-search" />
-                </InputIcon>
-                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-            </IconField>
-        </div>
-    </template>
-    <template #empty> No customers found. </template>
-    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-    <Column field="name" header="Name" sortable style="min-width: 14rem">
-        <template #body="{ data }">
-            {{ data.name }}
-        </template>
-        <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-        </template>
-    </Column>
-    <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                <span>{{ data.country.name }}</span>
-            </div>
-        </template>
-        <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-        </template>
-    </Column>
-    <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-        <template #body="{ data }">
-            <div class="flex items-center gap-2">
-                <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                <span>{{ data.representative.name }}</span>
-            </div>
-        </template>
-        <template #filter="{ filterModel }">
-            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                <template #option="slotProps">
-                    <div class="flex items-center gap-2">
-                        <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                        <span>{{ slotProps.option.name }}</span>
-                    </div>
-                </template>
-            </MultiSelect>
-        </template>
-    </Column>
-    <Column field="date" header="Date" sortable filterField="date" dataType="date" style="min-width: 10rem">
-        <template #body="{ data }">
-            {{ formatDate(data.date) }}
-        </template>
-        <template #filter="{ filterModel }">
-            <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-        </template>
-    </Column>
-    <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
-        <template #body="{ data }">
-            {{ formatCurrency(data.balance) }}
-        </template>
-        <template #filter="{ filterModel }">
-            <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-        </template>
-    </Column>
-    <Column header="Status" field="status" sortable :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-        <template #body="{ data }">
-            <Tag :value="data.status" :severity="getSeverity(data.status)" />
-        </template>
-        <template #filter="{ filterModel }">
-            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                <template #option="slotProps">
-                    <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                </template>
-            </Select>
-        </template>
-    </Column>
-    <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
-        <template #body="{ data }">
-            <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-        </template>
-        <template #filter="{ filterModel }">
-            <Slider v-model="filterModel.value" range class="m-4"></Slider>
-            <div class="flex items-center justify-between px-2">
-                <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-            </div>
-        </template>
-    </Column>
-    <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
-        <template #body>
-            <Button type="button" icon="pi pi-cog" rounded />
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
-            :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
-            <template #header>
-                <div class="flex justify-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
-                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </IconField>
-                </div>
-            </template>
-            <template #empty> No customers found. </template>
-            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-            <Column field="name" header="Name" sortable style="min-width: 14rem">
-                <template #body="{ data }">
-                    {{ data.name }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                </template>
-            </Column>
-            <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column field="date" header="Date" sortable filterField="date" dataType="date" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatDate(data.date) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-                </template>
-            </Column>
-            <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatCurrency(data.balance) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-                </template>
-            </Column>
-            <Column header="Status" field="status" sortable :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Select>
-                </template>
-            </Column>
-            <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-                </template>
-                <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
-                    <div class="flex items-center justify-between px-2">
-                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
-                <template #body>
-                    <Button type="button" icon="pi pi-cog" rounded />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            selectedCustomers: null,
-            filters: null,
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']
-        };
-    },
-    created() {
-        this.initFilters();
-    },
-    mounted() {
-        CustomerService.getCustomersLarge().then((data) => {
-            this.customers = this.getCustomers(data);
-        });
-    },
-    methods: {
-        formatDate(value) {
-            return value.toLocaleDateString('en-US', {
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric'
-            });
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        clearFilter() {
-            this.initFilters();
-        },
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-            };
-        },
-        getCustomers(data) {
-            return [...(data || [])].map((d) => {
-                d.date = new Date(d.date);
-
-                return d;
-            });
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
-            :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
-            <template #header>
-                <div class="flex justify-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
-                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </IconField>
-                </div>
-            </template>
-            <template #empty> No customers found. </template>
-            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-            <Column field="name" header="Name" sortable style="min-width: 14rem">
-                <template #body="{ data }">
-                    {{ data.name }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
-                </template>
-            </Column>
-            <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column field="date" header="Date" sortable filterField="date" dataType="date" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatDate(data.date) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-                </template>
-            </Column>
-            <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatCurrency(data.balance) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-                </template>
-            </Column>
-            <Column header="Status" field="status" sortable :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Select>
-                </template>
-            </Column>
-            <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-                </template>
-                <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
-                    <div class="flex items-center justify-between px-2">
-                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
-                <template #body>
-                    <Button type="button" icon="pi pi-cog" rounded />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-
-const customers = ref();
-const selectedCustomers = ref();
-const filters = ref();
-const representatives = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-    { name: 'Onyama Limba', image: 'onyamalimba.png' },
-    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-]);
-const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-
-onMounted(() => {
-    CustomerService.getCustomersLarge().then((data) => {
-        customers.value = getCustomers(data);
-    });
-});
-
-
-const initFilters = () => {
-    filters.value = {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        representative: { value: null, matchMode: FilterMatchMode.IN },
-        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-    };
-};
-
-initFilters();
-
-const formatDate = (value) => {
-    return value.toLocaleDateString('en-US', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric'
-    });
-};
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-const clearFilter = () => {
-    initFilters();
-};
-const getCustomers = (data) => {
-    return [...(data || [])].map((d) => {
-        d.date = new Date(d.date);
-
-        return d;
-    });
-};
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warn';
-
-        case 'renewal':
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`
-            }
-        };
-    },
-    created() {
-        this.initFilters();
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersLarge().then((data) => {
-                this.customers = this.getCustomers(data);
-            });
-        },
-        formatDate(value) {
-            return value.toLocaleDateString('en-US', {
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric'
-            });
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        clearFilter() {
-            this.initFilters();
-        },
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-            };
-        },
-        getCustomers(data) {
-            return [...(data || [])].map((d) => {
-                d.date = new Date(d.date);
-
-                return d;
-            });
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warn';
-
-                case 'renewal':
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/samples/ProductsDoc.vue b/apps/labs/doc/datatable/samples/ProductsDoc.vue
deleted file mode 100644
index 667929a5e..000000000
--- a/apps/labs/doc/datatable/samples/ProductsDoc.vue
+++ /dev/null
@@ -1,958 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>CRUD implementation example with a Dialog.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Toolbar class="mb-6">
-                <template #start>
-                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
-                </template>
-
-                <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
-                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
-                </template>
-            </Toolbar>
-
-            <DataTable
-                ref="dt"
-                v-model:selection="selectedProducts"
-                :value="products"
-                dataKey="id"
-                :paginator="true"
-                :rows="10"
-                :filters="filters"
-                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                :rowsPerPageOptions="[5, 10, 25]"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
-            >
-                <template #header>
-                    <div class="flex flex-wrap gap-2 items-center justify-between">
-                        <h4 class="m-0">Manage Products</h4>
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-search" />
-                            </InputIcon>
-                            <InputText v-model="filters['global'].value" placeholder="Search..." />
-                        </IconField>
-                    </div>
-                </template>
-
-                <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
-                <Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
-                <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
-                <Column header="Image">
-                    <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
-                    </template>
-                </Column>
-                <Column field="price" header="Price" sortable style="min-width: 8rem">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.price) }}
-                    </template>
-                </Column>
-                <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
-                <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Rating :modelValue="slotProps.data.rating" :readonly="true" />
-                    </template>
-                </Column>
-                <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-                    </template>
-                </Column>
-                <Column :exportable="false" style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
-                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-
-    <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
-        <div class="flex flex-col gap-6">
-            <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
-            <div>
-                <label for="name" class="block font-bold mb-3">Name</label>
-                <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
-                <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
-            </div>
-            <div>
-                <label for="description" class="block font-bold mb-3">Description</label>
-                <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
-            </div>
-            <div>
-                <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
-                <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
-            </div>
-
-            <div>
-                <span class="block font-bold mb-4">Category</span>
-                <div class="grid grid-cols-12 gap-4">
-                    <div class="flex items-center gap-2 col-span-6">
-                        <RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
-                        <label for="category1">Accessories</label>
-                    </div>
-                    <div class="flex items-center gap-2 col-span-6">
-                        <RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
-                        <label for="category2">Clothing</label>
-                    </div>
-                    <div class="flex items-center gap-2 col-span-6">
-                        <RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
-                        <label for="category3">Electronics</label>
-                    </div>
-                    <div class="flex items-center gap-2 col-span-6">
-                        <RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
-                        <label for="category4">Fitness</label>
-                    </div>
-                </div>
-            </div>
-
-            <div class="grid grid-cols-12 gap-4">
-                <div class="col-span-6">
-                    <label for="price" class="block font-bold mb-3">Price</label>
-                    <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
-                </div>
-                <div class="col-span-6">
-                    <label for="quantity" class="block font-bold mb-3">Quantity</label>
-                    <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
-                </div>
-            </div>
-        </div>
-
-        <template #footer>
-            <Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
-            <Button label="Save" icon="pi pi-check" @click="saveProduct" />
-        </template>
-    </Dialog>
-
-    <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
-        <div class="flex items-center gap-4">
-            <i class="pi pi-exclamation-triangle !text-3xl" />
-            <span v-if="product"
-                >Are you sure you want to delete <b>{{ product.name }}</b
-                >?</span
-            >
-        </div>
-        <template #footer>
-            <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
-            <Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
-        </template>
-    </Dialog>
-
-    <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
-        <div class="flex items-center gap-4">
-            <i class="pi pi-exclamation-triangle !text-3xl" />
-            <span v-if="product">Are you sure you want to delete the selected products?</span>
-        </div>
-        <template #footer>
-            <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
-            <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
-        </template>
-    </Dialog>
-
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-import { FilterMatchMode } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            products: null,
-            productDialog: false,
-            deleteProductDialog: false,
-            deleteProductsDialog: false,
-            product: {},
-            selectedProducts: null,
-            filters: {},
-            submitted: false,
-            statuses: [
-                { label: 'INSTOCK', value: 'instock' },
-                { label: 'LOWSTOCK', value: 'lowstock' },
-                { label: 'OUTOFSTOCK', value: 'outofstock' }
-            ],
-            code: {
-                basic: `
-<Toolbar class="mb-6">
-    <template #start>
-        <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
-        <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
-    </template>
-
-    <template #end>
-        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
-        <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
-    </template>
-</Toolbar>
-
-<DataTable
-    ref="dt"
-    v-model:selection="selectedProducts"
-    :value="products"
-    dataKey="id"
-    :paginator="true"
-    :rows="10"
-    :filters="filters"
-    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-    :rowsPerPageOptions="[5, 10, 25]"
-    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
->
-    <template #header>
-        <div class="flex flex-wrap gap-2 items-center justify-between">
-            <h4 class="m-0">Manage Products</h4>
-            <IconField>
-                <InputIcon>
-                    <i class="pi pi-search" />
-                </InputIcon>
-                <InputText v-model="filters['global'].value" placeholder="Search..." />
-            </IconField>
-        </div>
-    </template>
-
-    <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
-    <Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
-    <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
-    <Column header="Image">
-        <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
-        </template>
-    </Column>
-    <Column field="price" header="Price" sortable style="min-width: 8rem">
-        <template #body="slotProps">
-            {{ formatCurrency(slotProps.data.price) }}
-        </template>
-    </Column>
-    <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
-    <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
-        <template #body="slotProps">
-            <Rating :modelValue="slotProps.data.rating" :readonly="true" />
-        </template>
-    </Column>
-    <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
-        <template #body="slotProps">
-            <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-        </template>
-    </Column>
-    <Column :exportable="false" style="min-width: 12rem">
-        <template #body="slotProps">
-            <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
-            <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div>
-        <div class="card">
-            <Toolbar class="mb-6">
-                <template #start>
-                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
-                </template>
-
-                <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
-                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
-                </template>
-            </Toolbar>
-
-            <DataTable
-                ref="dt"
-                v-model:selection="selectedProducts"
-                :value="products"
-                dataKey="id"
-                :paginator="true"
-                :rows="10"
-                :filters="filters"
-                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                :rowsPerPageOptions="[5, 10, 25]"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
-            >
-                <template #header>
-                    <div class="flex flex-wrap gap-2 items-center justify-between">
-                        <h4 class="m-0">Manage Products</h4>
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-search" />
-                            </InputIcon>
-                            <InputText v-model="filters['global'].value" placeholder="Search..." />
-                        </IconField>
-                    </div>
-                </template>
-
-                <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
-                <Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
-                <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
-                <Column header="Image">
-                    <template #body="slotProps">
-                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
-                    </template>
-                </Column>
-                <Column field="price" header="Price" sortable style="min-width: 8rem">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.price) }}
-                    </template>
-                </Column>
-                <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
-                <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Rating :modelValue="slotProps.data.rating" :readonly="true" />
-                    </template>
-                </Column>
-                <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-                    </template>
-                </Column>
-                <Column :exportable="false" style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
-                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-
-        <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
-            <div class="flex flex-col gap-6">
-                <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
-                <div>
-                    <label for="name" class="block font-bold mb-3">Name</label>
-                    <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
-                    <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
-                </div>
-                <div>
-                    <label for="description" class="block font-bold mb-3">Description</label>
-                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
-                </div>
-                <div>
-                    <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
-                    <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
-                </div>
-
-                <div>
-                    <span class="block font-bold mb-4">Category</span>
-                    <div class="grid grid-cols-12 gap-4">
-                        <div class="flex items-center gap-2 col-span-6">
-                            <RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
-                            <label for="category1">Accessories</label>
-                        </div>
-                        <div class="flex items-center gap-2 col-span-6">
-                            <RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
-                            <label for="category2">Clothing</label>
-                        </div>
-                        <div class="flex items-center gap-2 col-span-6">
-                            <RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
-                            <label for="category3">Electronics</label>
-                        </div>
-                        <div class="flex items-center gap-2 col-span-6">
-                            <RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
-                            <label for="category4">Fitness</label>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="grid grid-cols-12 gap-4">
-                    <div class="col-span-6">
-                        <label for="price" class="block font-bold mb-3">Price</label>
-                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
-                    </div>
-                    <div class="col-span-6">
-                        <label for="quantity" class="block font-bold mb-3">Quantity</label>
-                        <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
-                    </div>
-                </div>
-            </div>
-
-            <template #footer>
-                <Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
-                <Button label="Save" icon="pi pi-check" @click="saveProduct" />
-            </template>
-        </Dialog>
-
-        <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
-            <div class="flex items-center gap-4">
-                <i class="pi pi-exclamation-triangle !text-3xl" />
-                <span v-if="product"
-                    >Are you sure you want to delete <b>{{ product.name }}</b
-                    >?</span
-                >
-            </div>
-            <template #footer>
-                <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
-                <Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
-            </template>
-        </Dialog>
-
-        <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
-            <div class="flex items-center gap-4">
-                <i class="pi pi-exclamation-triangle !text-3xl" />
-                <span v-if="product">Are you sure you want to delete the selected products?</span>
-            </div>
-            <template #footer>
-                <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
-                <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
-            </template>
-        </Dialog>
-	</div>
-</template>
-
-<script>
-import { FilterMatchMode } from '@primevue/core/api';
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            productDialog: false,
-            deleteProductDialog: false,
-            deleteProductsDialog: false,
-            product: {},
-            selectedProducts: null,
-            filters: {},
-            submitted: false,
-            statuses: [
-				{label: 'INSTOCK', value: 'instock'},
-				{label: 'LOWSTOCK', value: 'lowstock'},
-				{label: 'OUTOFSTOCK', value: 'outofstock'}
-            ]
-        }
-    },
-    created() {
-        this.initFilters();
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data));
-    },
-    methods: {
-        formatCurrency(value) {
-            if(value)
-				return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-			return;
-        },
-        openNew() {
-            this.product = {};
-            this.submitted = false;
-            this.productDialog = true;
-        },
-        hideDialog() {
-            this.productDialog = false;
-            this.submitted = false;
-        },
-        saveProduct() {
-            this.submitted = true;
-
-			if (this.product?.name?.trim()) {
-                if (this.product.id) {
-                    this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus;
-                    this.products[this.findIndexById(this.product.id)] = this.product;
-                    this.$toast.add({severity:'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
-                }
-                else {
-                    this.product.id = this.createId();
-                    this.product.code = this.createId();
-                    this.product.image = 'product-placeholder.svg';
-                    this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
-                    this.products.push(this.product);
-                    this.$toast.add({severity:'success', summary: 'Successful', detail: 'Product Created', life: 3000});
-                }
-
-                this.productDialog = false;
-                this.product = {};
-            }
-        },
-        editProduct(product) {
-            this.product = {...product};
-            this.productDialog = true;
-        },
-        confirmDeleteProduct(product) {
-            this.product = product;
-            this.deleteProductDialog = true;
-        },
-        deleteProduct() {
-            this.products = this.products.filter(val => val.id !== this.product.id);
-            this.deleteProductDialog = false;
-            this.product = {};
-            this.$toast.add({severity:'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
-        },
-        findIndexById(id) {
-            let index = -1;
-            for (let i = 0; i < this.products.length; i++) {
-                if (this.products[i].id === id) {
-                    index = i;
-                    break;
-                }
-            }
-
-            return index;
-        },
-        createId() {
-            let id = '';
-            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-            for ( var i = 0; i < 5; i++ ) {
-                id += chars.charAt(Math.floor(Math.random() * chars.length));
-            }
-            return id;
-        },
-        exportCSV() {
-            this.$refs.dt.exportCSV();
-        },
-        confirmDeleteSelected() {
-            this.deleteProductsDialog = true;
-        },
-        deleteSelectedProducts() {
-            this.products = this.products.filter(val => !this.selectedProducts.includes(val));
-            this.deleteProductsDialog = false;
-            this.selectedProducts = null;
-            this.$toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
-        },
-        initFilters() {
-            this.filters = {
-                'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
-            }
-        },
-        getStatusLabel(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div>
-        <div class="card">
-            <Toolbar class="mb-6">
-                <template #start>
-                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
-                </template>
-
-                <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
-                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
-                </template>
-            </Toolbar>
-
-            <DataTable
-                ref="dt"
-                v-model:selection="selectedProducts"
-                :value="products"
-                dataKey="id"
-                :paginator="true"
-                :rows="10"
-                :filters="filters"
-                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                :rowsPerPageOptions="[5, 10, 25]"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
-            >
-                <template #header>
-                    <div class="flex flex-wrap gap-2 items-center justify-between">
-                        <h4 class="m-0">Manage Products</h4>
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-search" />
-                            </InputIcon>
-                            <InputText v-model="filters['global'].value" placeholder="Search..." />
-                        </IconField>
-                    </div>
-                </template>
-
-                <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
-                <Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
-                <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
-                <Column header="Image">
-                    <template #body="slotProps">
-                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
-                    </template>
-                </Column>
-                <Column field="price" header="Price" sortable style="min-width: 8rem">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.price) }}
-                    </template>
-                </Column>
-                <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
-                <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Rating :modelValue="slotProps.data.rating" :readonly="true" />
-                    </template>
-                </Column>
-                <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-                    </template>
-                </Column>
-                <Column :exportable="false" style="min-width: 12rem">
-                    <template #body="slotProps">
-                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
-                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-
-        <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
-            <div class="flex flex-col gap-6">
-                <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
-                <div>
-                    <label for="name" class="block font-bold mb-3">Name</label>
-                    <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
-                    <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
-                </div>
-                <div>
-                    <label for="description" class="block font-bold mb-3">Description</label>
-                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
-                </div>
-                <div>
-                    <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
-                    <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
-                </div>
-
-                <div>
-                    <span class="block font-bold mb-4">Category</span>
-                    <div class="grid grid-cols-12 gap-4">
-                        <div class="flex items-center gap-2 col-span-6">
-                            <RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
-                            <label for="category1">Accessories</label>
-                        </div>
-                        <div class="flex items-center gap-2 col-span-6">
-                            <RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
-                            <label for="category2">Clothing</label>
-                        </div>
-                        <div class="flex items-center gap-2 col-span-6">
-                            <RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
-                            <label for="category3">Electronics</label>
-                        </div>
-                        <div class="flex items-center gap-2 col-span-6">
-                            <RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
-                            <label for="category4">Fitness</label>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="grid grid-cols-12 gap-4">
-                    <div class="col-span-6">
-                        <label for="price" class="block font-bold mb-3">Price</label>
-                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
-                    </div>
-                    <div class="col-span-6">
-                        <label for="quantity" class="block font-bold mb-3">Quantity</label>
-                        <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
-                    </div>
-                </div>
-            </div>
-
-            <template #footer>
-                <Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
-                <Button label="Save" icon="pi pi-check" @click="saveProduct" />
-            </template>
-        </Dialog>
-
-        <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
-            <div class="flex items-center gap-4">
-                <i class="pi pi-exclamation-triangle !text-3xl" />
-                <span v-if="product"
-                    >Are you sure you want to delete <b>{{ product.name }}</b
-                    >?</span
-                >
-            </div>
-            <template #footer>
-                <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
-                <Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
-            </template>
-        </Dialog>
-
-        <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
-            <div class="flex items-center gap-4">
-                <i class="pi pi-exclamation-triangle !text-3xl" />
-                <span v-if="product">Are you sure you want to delete the selected products?</span>
-            </div>
-            <template #footer>
-                <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
-                <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
-            </template>
-        </Dialog>
-	</div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { FilterMatchMode } from '@primevue/core/api';
-import { useToast } from 'primevue/usetoast';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProducts().then((data) => (products.value = data));
-});
-
-const toast = useToast();
-const dt = ref();
-const products = ref();
-const productDialog = ref(false);
-const deleteProductDialog = ref(false);
-const deleteProductsDialog = ref(false);
-const product = ref({});
-const selectedProducts = ref();
-const filters = ref({
-    'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
-});
-const submitted = ref(false);
-const statuses = ref([
-    {label: 'INSTOCK', value: 'instock'},
-    {label: 'LOWSTOCK', value: 'lowstock'},
-    {label: 'OUTOFSTOCK', value: 'outofstock'}
-]);
-
-const formatCurrency = (value) => {
-    if(value)
-        return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-    return;
-};
-const openNew = () => {
-    product.value = {};
-    submitted.value = false;
-    productDialog.value = true;
-};
-const hideDialog = () => {
-    productDialog.value = false;
-    submitted.value = false;
-};
-const saveProduct = () => {
-    submitted.value = true;
-
-    if (product?.value.name?.trim()) {
-        if (product.value.id) {
-            product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
-            products.value[findIndexById(product.value.id)] = product.value;
-            toast.add({severity:'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
-        }
-        else {
-            product.value.id = createId();
-            product.value.code = createId();
-            product.value.image = 'product-placeholder.svg';
-            product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
-            products.value.push(product.value);
-            toast.add({severity:'success', summary: 'Successful', detail: 'Product Created', life: 3000});
-        }
-
-        productDialog.value = false;
-        product.value = {};
-    }
-};
-const editProduct = (prod) => {
-    product.value = {...prod};
-    productDialog.value = true;
-};
-const confirmDeleteProduct = (prod) => {
-    product.value = prod;
-    deleteProductDialog.value = true;
-};
-const deleteProduct = () => {
-    products.value = products.value.filter(val => val.id !== product.value.id);
-    deleteProductDialog.value = false;
-    product.value = {};
-    toast.add({severity:'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
-};
-const findIndexById = (id) => {
-    let index = -1;
-    for (let i = 0; i < products.value.length; i++) {
-        if (products.value[i].id === id) {
-            index = i;
-            break;
-        }
-    }
-
-    return index;
-};
-const createId = () => {
-    let id = '';
-    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    for ( var i = 0; i < 5; i++ ) {
-        id += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    return id;
-}
-const exportCSV = () => {
-    dt.value.exportCSV();
-};
-const confirmDeleteSelected = () => {
-    deleteProductsDialog.value = true;
-};
-const deleteSelectedProducts = () => {
-    products.value = products.value.filter(val => !selectedProducts.value.includes(val));
-    deleteProductsDialog.value = false;
-    selectedProducts.value = null;
-    toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
-};
-
-const getStatusLabel = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    created() {
-        this.initFilters();
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProducts().then((data) => (this.products = data));
-        },
-        formatCurrency(value) {
-            if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-
-            return;
-        },
-        openNew() {
-            this.product = {};
-            this.submitted = false;
-            this.productDialog = true;
-        },
-        hideDialog() {
-            this.productDialog = false;
-            this.submitted = false;
-        },
-        saveProduct() {
-            this.submitted = true;
-
-            if (this.product?.name?.trim()) {
-                if (this.product.id) {
-                    this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
-                    this.products[this.findIndexById(this.product.id)] = this.product;
-                    this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
-                } else {
-                    this.product.id = this.createId();
-                    this.product.code = this.createId();
-                    this.product.image = 'product-placeholder.svg';
-                    this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
-                    this.products.push(this.product);
-                    this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
-                }
-
-                this.productDialog = false;
-                this.product = {};
-            }
-        },
-        editProduct(product) {
-            this.product = { ...product };
-            this.productDialog = true;
-        },
-        confirmDeleteProduct(product) {
-            this.product = product;
-            this.deleteProductDialog = true;
-        },
-        deleteProduct() {
-            this.products = this.products.filter((val) => val.id !== this.product.id);
-            this.deleteProductDialog = false;
-            this.product = {};
-            this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
-        },
-        findIndexById(id) {
-            let index = -1;
-
-            for (let i = 0; i < this.products.length; i++) {
-                if (this.products[i].id === id) {
-                    index = i;
-                    break;
-                }
-            }
-
-            return index;
-        },
-        createId() {
-            let id = '';
-            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
-            for (var i = 0; i < 5; i++) {
-                id += chars.charAt(Math.floor(Math.random() * chars.length));
-            }
-
-            return id;
-        },
-        exportCSV() {
-            this.$refs.dt.exportCSV();
-        },
-        confirmDeleteSelected() {
-            this.deleteProductsDialog = true;
-        },
-        deleteSelectedProducts() {
-            this.products = this.products.filter((val) => !this.selectedProducts.includes(val));
-            this.deleteProductsDialog = false;
-            this.selectedProducts = null;
-            this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
-        },
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS }
-            };
-        },
-        getStatusLabel(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/scroll/FlexibleScrollDoc.vue b/apps/labs/doc/datatable/scroll/FlexibleScrollDoc.vue
deleted file mode 100644
index c0767ad54..000000000
--- a/apps/labs/doc/datatable/scroll/FlexibleScrollDoc.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data viewport
-            adjusts itself according to the size changes.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
-
-        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }" @show="onShow">
-            <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name"></Column>
-                <Column field="country.name" header="Country"></Column>
-                <Column field="representative.name" header="Representative"></Column>
-                <Column field="company" header="Company"></Column>
-            </DataTable>
-            <template #footer>
-                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
-            </template>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            dialogVisible: false,
-            code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
-<Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-    <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
-        <Column field="name" header="Name"></Column>
-        <Column field="country.name" header="Country"></Column>
-        <Column field="representative.name" header="Representative"></Column>
-        <Column field="company" header="Company"></Column>
-    </DataTable>
-    <template #footer>
-        <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
-    </template>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
-
-        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-            <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name"></Column>
-                <Column field="country.name" header="Country"></Column>
-                <Column field="representative.name" header="Representative"></Column>
-                <Column field="company" header="Company"></Column>
-            </DataTable>
-            <template #footer>
-                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
-            </template>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            dialogVisible: false
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => {
-            this.customers = data;
-        });
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
-
-        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-            <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name"></Column>
-                <Column field="country.name" header="Country"></Column>
-                <Column field="representative.name" header="Representative"></Column>
-                <Column field="company" header="Company"></Column>
-            </DataTable>
-            <template #footer>
-                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
-            </template>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-const customers = ref();
-const dialogVisible = ref(false);
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => {
-        customers.value = data;
-    });
-});
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        onShow() {
-            CustomerService.getCustomersMedium().then((data) => {
-                this.customers = data;
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/scroll/FrozenColumnsDoc.vue b/apps/labs/doc/datatable/scroll/FrozenColumnsDoc.vue
deleted file mode 100644
index 5dd7adf55..000000000
--- a/apps/labs/doc/datatable/scroll/FrozenColumnsDoc.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
-
-            <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
-                <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
-                <Column field="id" header="Id" style="min-width: 100px"></Column>
-                <Column field="name" header="Name" style="min-width: 200px"></Column>
-                <Column field="country.name" header="Country" style="min-width: 200px"></Column>
-                <Column field="date" header="Date" style="min-width: 200px"></Column>
-                <Column field="company" header="Company" style="min-width: 200px"></Column>
-                <Column field="status" header="Status" style="min-width: 200px"></Column>
-                <Column field="activity" header="Activity" style="min-width: 200px"></Column>
-                <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
-                <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
-                    <template #body="{ data }">
-                        <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            balanceFrozen: false,
-            code: {
-                basic: `
-<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
-<DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
-    <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
-    <Column field="id" header="Id" style="min-width: 100px"></Column>
-    <Column field="name" header="Name" style="min-width: 200px"></Column>
-    <Column field="country.name" header="Country" style="min-width: 200px"></Column>
-    <Column field="date" header="Date" style="min-width: 200px"></Column>
-    <Column field="company" header="Company" style="min-width: 200px"></Column>
-    <Column field="status" header="Status" style="min-width: 200px"></Column>
-    <Column field="activity" header="Activity" style="min-width: 200px"></Column>
-    <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
-    <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
-        <template #body="{ data }">
-            <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
-
-        <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
-            <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
-            <Column field="id" header="Id" style="min-width: 100px"></Column>
-            <Column field="name" header="Name" style="min-width: 200px"></Column>
-            <Column field="country.name" header="Country" style="min-width: 200px"></Column>
-            <Column field="date" header="Date" style="min-width: 200px"></Column>
-            <Column field="company" header="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" style="min-width: 200px"></Column>
-            <Column field="activity" header="Activity" style="min-width: 200px"></Column>
-            <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
-            <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
-                <template #body="{ data }">
-                    <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            balanceFrozen: false
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersLarge().then((data) => {
-            this.customers = data;
-        });
-    },
-    methods: {
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
-
-        <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
-            <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
-            <Column field="id" header="Id" style="min-width: 100px"></Column>
-            <Column field="name" header="Name" style="min-width: 200px"></Column>
-            <Column field="country.name" header="Country" style="min-width: 200px"></Column>
-            <Column field="date" header="Date" style="min-width: 200px"></Column>
-            <Column field="company" header="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" style="min-width: 200px"></Column>
-            <Column field="activity" header="Activity" style="min-width: 200px"></Column>
-            <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
-            <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
-                <template #body="{ data }">
-                    <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-onMounted(() => {
-    CustomerService.getCustomersLarge().then((data) => {
-        customers.value = data;
-    });
-});
-
-const customers = ref();
-const balanceFrozen = ref(false);
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersLarge().then((data) => {
-                this.customers = data;
-            });
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/scroll/FrozenRowsDoc.vue b/apps/labs/doc/datatable/scroll/FrozenRowsDoc.vue
deleted file mode 100644
index 162440dff..000000000
--- a/apps/labs/doc/datatable/scroll/FrozenRowsDoc.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Rows can be fixed during scrolling by enabling the <i>frozenValue</i> property.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                :value="customers"
-                :frozenValue="lockedCustomers"
-                scrollable
-                scrollHeight="400px"
-                :pt="{
-                    table: { style: 'min-width: 50rem' },
-                    bodyrow: ({ props }) => ({
-                        class: [{ 'font-bold': props.frozenRow }]
-                    })
-                }"
-            >
-                <Column field="name" header="Name"></Column>
-                <Column field="country.name" header="Country"></Column>
-                <Column field="representative.name" header="Representative"></Column>
-                <Column field="status" header="Status"></Column>
-                <Column style="flex: 0 0 4rem">
-                    <template #body="{ data, frozenRow, index }">
-                        <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            lockedCustomers: [
-                {
-                    id: 5135,
-                    name: 'Geraldine Bisset',
-                    country: {
-                        name: 'France',
-                        code: 'fr'
-                    },
-                    company: 'Bisset Group',
-                    status: 'proposal',
-                    date: '2019-05-05',
-                    activity: 0,
-                    representative: {
-                        name: 'Amy Elsner',
-                        image: 'amyelsner.png'
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<DataTable
-    :value="customers"
-    :frozenValue="lockedCustomers"
-    scrollable
-    scrollHeight="400px"
-    :pt="{
-        table: { style: 'min-width: 50rem' },
-        bodyrow: ({ props }) => ({
-            class: [{ 'font-bold': props.frozenRow }]
-        })
-    }"
->
-    <Column field="name" header="Name"></Column>
-    <Column field="country.name" header="Country"></Column>
-    <Column field="representative.name" header="Representative"></Column>
-    <Column field="status" header="Status"></Column>
-    <Column style="flex: 0 0 4rem">
-        <template #body="{ data, frozenRow, index }">
-            <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable
-            :value="customers"
-            :frozenValue="lockedCustomers"
-            scrollable
-            scrollHeight="400px"
-            :pt="{
-                table: { style: 'min-width: 50rem' },
-                bodyrow: ({ props }) => ({
-                    class: [{ 'font-bold': props.frozenRow }]
-                })
-            }"
-        >
-            <Column field="name" header="Name"></Column>
-            <Column field="country.name" header="Country"></Column>
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="status" header="Status"></Column>
-            <Column style="flex: 0 0 4rem">
-                <template #body="{ data, frozenRow, index }">
-                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            lockedCustomers: [
-                {
-                    id: 5135,
-                    name: 'Geraldine Bisset',
-                    country: {
-                        name: 'France',
-                        code: 'fr'
-                    },
-                    company: 'Bisset Group',
-                    status: 'proposal',
-                    date: '2019-05-05',
-                    activity: 0,
-                    representative: {
-                        name: 'Amy Elsner',
-                        image: 'amyelsner.png'
-                    }
-                }
-            ]
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => {
-            this.customers = data;
-        });
-    },
-    methods: {
-        toggleLock(data, frozen, index) {
-            if (frozen) {
-                this.lockedCustomers = this.lockedCustomers.filter((c, i) => i !== index);
-                this.customers.push(data);
-            } else {
-                this.customers = this.customers.filter((c, i) => i !== index);
-                this.lockedCustomers.push(data);
-            }
-
-            this.customers.sort((val1, val2) => {
-                return val1.id < val2.id ? -1 : 1;
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable
-            :value="customers"
-            :frozenValue="lockedCustomers"
-            scrollable
-            scrollHeight="400px"
-            :pt="{
-                table: { style: 'min-width: 50rem' },
-                bodyrow: ({ props }) => ({
-                    class: [{ 'font-bold': props.frozenRow }]
-                })
-            }"
-        >
-            <Column field="name" header="Name"></Column>
-            <Column field="country.name" header="Country"></Column>
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="status" header="Status"></Column>
-            <Column style="flex: 0 0 4rem">
-                <template #body="{ data, frozenRow, index }">
-                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-const customers = ref();
-const lockedCustomers = ref([
-    {
-        id: 5135,
-        name: 'Geraldine Bisset',
-        country: {
-            name: 'France',
-            code: 'fr'
-        },
-        company: 'Bisset Group',
-        status: 'proposal',
-        date: '2019-05-05',
-        activity: 0,
-        representative: {
-            name: 'Amy Elsner',
-            image: 'amyelsner.png'
-        }
-    }
-]);
-const toggleLock = (data, frozen, index) => {
-    if (frozen) {
-        lockedCustomers.value = lockedCustomers.value.filter((c, i) => i !== index);
-        customers.value.push(data);
-    }
-    else {
-        customers.value = customers.value.filter((c, i) => i !== index);
-        lockedCustomers.value.push(data);
-    }
-
-    customers.value.sort((val1, val2) => {
-        return val1.id < val2.id ? -1 : 1;
-    });
-};
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => {
-        customers.value = data;
-    });
-});
-
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => {
-                this.customers = data;
-            });
-        },
-        toggleLock(data, frozen, index) {
-            if (frozen) {
-                this.lockedCustomers = this.lockedCustomers.filter((c, i) => i !== index);
-                this.customers.push(data);
-            } else {
-                this.customers = this.customers.filter((c, i) => i !== index);
-                this.lockedCustomers.push(data);
-            }
-
-            this.customers.sort((val1, val2) => {
-                return val1.id < val2.id ? -1 : 1;
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/scroll/HorizontalScrollDoc.vue b/apps/labs/doc/datatable/scroll/HorizontalScrollDoc.vue
deleted file mode 100644
index 4ed8989d2..000000000
--- a/apps/labs/doc/datatable/scroll/HorizontalScrollDoc.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Horizontal scrollbar is displayed when table width exceeds the parent width.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="customers" scrollable scrollHeight="400px">
-                <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
-                <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
-                <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
-                <Column field="date" header="Date" footer="Date" style="min-width: 200px"></Column>
-                <Column field="balance" header="Balance" footer="Balance" style="min-width: 200px">
-                    <template #body="{ data }">
-                        {{ formatCurrency(data.balance) }}
-                    </template>
-                </Column>
-                <Column field="company" header="Company" footer="Company" style="min-width: 200px"></Column>
-                <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
-                <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
-                <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            code: {
-                basic: `
-<DataTable :value="customers" scrollable scrollHeight="400px">
-    <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
-    <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
-    <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
-    <Column field="date" header="Date" footer="Date" style="min-width: 200px"></Column>
-    <Column field="balance" header="Balance" footer="Balance" style="min-width: 200px">
-        <template #body="{ data }">
-            {{ formatCurrency(data.balance) }}
-        </template>
-    </Column>
-    <Column field="company" header="Company" footer="Company" style="min-width: 200px"></Column>
-    <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
-    <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
-    <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" scrollable scrollHeight="400px">
-            <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
-            <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
-            <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
-            <Column field="date" header="Date" footer="Date" style="min-width: 200px"></Column>
-            <Column field="balance" header="Balance" footer="Balance" style="min-width: 200px">
-                <template #body="{ data }">
-                    {{ formatCurrency(data.balance) }}
-                </template>
-            </Column>
-            <Column field="company" header="Company" footer="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
-            <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
-            <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => {
-            this.customers = data;
-        });
-    },
-    methods: {
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" scrollable scrollHeight="400px">
-            <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
-            <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
-            <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
-            <Column field="date" header="Date" footer="Date" style="min-width: 200px"></Column>
-            <Column field="balance" header="Balance" footer="Balance" style="min-width: 200px">
-                <template #body="{ data }">
-                    {{ formatCurrency(data.balance) }}
-                </template>
-            </Column>
-            <Column field="company" header="Company" footer="Company" style="min-width: 200px"></Column>
-            <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
-            <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
-            <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-const customers = ref();
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => {
-        customers.value = data;
-    });
-});
-
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => {
-                this.customers = data;
-            });
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/scroll/VerticalScrollDoc.vue b/apps/labs/doc/datatable/scroll/VerticalScrollDoc.vue
deleted file mode 100644
index d24973c8b..000000000
--- a/apps/labs/doc/datatable/scroll/VerticalScrollDoc.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name"></Column>
-                <Column field="country.name" header="Country"></Column>
-                <Column field="representative.name" header="Representative"></Column>
-                <Column field="company" header="Company"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CustomerService']" />
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null,
-            code: {
-                basic: `
-<DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name"></Column>
-    <Column field="country.name" header="Country"></Column>
-    <Column field="representative.name" header="Representative"></Column>
-    <Column field="company" header="Company"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name"></Column>
-            <Column field="country.name" header="Country"></Column>
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="company" header="Company"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CustomerService } from '@/service/CustomerService';
-
-export default {
-    data() {
-        return {
-            customers: null
-        };
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => {
-            this.customers = data;
-        });
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name"></Column>
-            <Column field="country.name" header="Country"></Column>
-            <Column field="representative.name" header="Representative"></Column>
-            <Column field="company" header="Company"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-
-const customers = ref();
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => {
-        customers.value = data;
-    });
-});
-<\/script>
-`,
-                data: `
-{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            CustomerService.getCustomersMedium().then((data) => {
-                this.customers = data;
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/sort/MultipleColumnsDoc.vue b/apps/labs/doc/datatable/sort/MultipleColumnsDoc.vue
deleted file mode 100644
index c421b1823..000000000
--- a/apps/labs/doc/datatable/sort/MultipleColumnsDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code" sortable style="width: 25%"></Column>
-                <Column field="name" header="Name" sortable style="width: 25%"></Column>
-                <Column field="category" header="Category" sortable style="width: 25%"></Column>
-                <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code" sortable style="width: 25%"></Column>
-    <Column field="name" header="Name" sortable style="width: 25%"></Column>
-    <Column field="category" header="Category" sortable style="width: 25%"></Column>
-    <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code" sortable style="width: 25%"></Column>
-            <Column field="name" header="Name" sortable style="width: 25%"></Column>
-            <Column field="category" header="Category" sortable style="width: 25%"></Column>
-            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code" sortable style="width: 25%"></Column>
-            <Column field="name" header="Name" sortable style="width: 25%"></Column>
-            <Column field="category" header="Category" sortable style="width: 25%"></Column>
-            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/sort/PresortDoc.vue b/apps/labs/doc/datatable/sort/PresortDoc.vue
deleted file mode 100644
index a4b6fc469..000000000
--- a/apps/labs/doc/datatable/sort/PresortDoc.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Defining a default <i>sortField</i> and <i>sortOrder</i> displays data as sorted initially in single column sorting. In <i>multiple</i> sort mode, <i>multiSortMeta</i> should be used instead by providing an array of
-            <i>DataTableSortMeta</i> objects.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code" sortable style="width: 20%"></Column>
-                <Column field="name" header="Name" sortable style="width: 20%"></Column>
-                <Column field="price" header="Price" :sortable="true">
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.price) }}
-                    </template>
-                </Column>
-                <Column field="category" header="Category" sortable style="width: 20%"></Column>
-                <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code" sortable style="width: 20%"></Column>
-    <Column field="name" header="Name" sortable style="width: 20%"></Column>
-    <Column field="price" header="Price" :sortable="true">
-        <template #body="slotProps">
-            {{ formatCurrency(slotProps.data.price) }}
-        </template>
-    </Column>
-    <Column field="category" header="Category" sortable style="width: 20%"></Column>
-    <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code" sortable style="width: 20%"></Column>
-            <Column field="name" header="Name" sortable style="width: 20%"></Column>
-            <Column field="price" header="Price" :sortable="true">
-                <template #body="slotProps">
-                    {{ formatCurrency(slotProps.data.price) }}
-                </template>
-            </Column>
-            <Column field="category" header="Category" sortable style="width: 20%"></Column>
-            <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code" sortable style="width: 20%"></Column>
-            <Column field="name" header="Name" sortable style="width: 20%"></Column>
-            <Column field="price" header="Price" :sortable="true">
-                <template #body="slotProps">
-                    {{ formatCurrency(slotProps.data.price) }}
-                </template>
-            </Column>
-            <Column field="category" header="Category" sortable style="width: 20%"></Column>
-            <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-}
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/sort/RemovableSortDoc.vue b/apps/labs/doc/datatable/sort/RemovableSortDoc.vue
deleted file mode 100644
index c4d3309d2..000000000
--- a/apps/labs/doc/datatable/sort/RemovableSortDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>removableSort</i> is present, the third click removes the sorting from the column.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
-                <Column field="code" header="Code" sortable style="width: 25%"></Column>
-                <Column field="name" header="Name" sortable style="width: 25%"></Column>
-                <Column field="category" header="Category" sortable style="width: 25%"></Column>
-                <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" removableSort tableStyle="min-width: 50rem">
-    <Column field="code" header="Code" sortable style="width: 25%"></Column>
-    <Column field="name" header="Name" sortable style="width: 25%"></Column>
-    <Column field="category" header="Category" sortable style="width: 25%"></Column>
-    <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
-            <Column field="code" header="Code" sortable style="width: 25%"></Column>
-            <Column field="name" header="Name" sortable style="width: 25%"></Column>
-            <Column field="category" header="Category" sortable style="width: 25%"></Column>
-            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
-            <Column field="code" header="Code" sortable style="width: 25%"></Column>
-            <Column field="name" header="Name" sortable style="width: 25%"></Column>
-            <Column field="category" header="Category" sortable style="width: 25%"></Column>
-            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/sort/SingleColumnDoc.vue b/apps/labs/doc/datatable/sort/SingleColumnDoc.vue
deleted file mode 100644
index 5448f7e2f..000000000
--- a/apps/labs/doc/datatable/sort/SingleColumnDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Sorting on a column is enabled by adding the <i>sortable</i> property.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="products" tableStyle="min-width: 50rem">
-                <Column field="code" header="Code" sortable style="width: 25%"></Column>
-                <Column field="name" header="Name" sortable style="width: 25%"></Column>
-                <Column field="category" header="Category" sortable style="width: 25%"></Column>
-                <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
-    <Column field="code" header="Code" sortable style="width: 25%"></Column>
-    <Column field="name" header="Name" sortable style="width: 25%"></Column>
-    <Column field="category" header="Category" sortable style="width: 25%"></Column>
-    <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code" sortable style="width: 25%"></Column>
-            <Column field="name" header="Name" sortable style="width: 25%"></Column>
-            <Column field="category" header="Category" sortable style="width: 25%"></Column>
-            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" tableStyle="min-width: 50rem">
-            <Column field="code" header="Code" sortable style="width: 25%"></Column>
-            <Column field="name" header="Name" sortable style="width: 25%"></Column>
-            <Column field="category" header="Category" sortable style="width: 25%"></Column>
-            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue b/apps/labs/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
deleted file mode 100644
index 0e453456b..000000000
--- a/apps/labs/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
+++ /dev/null
@@ -1,313 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When lazy loading is enabled via the <i>virtualScrollerOptions</i>, data is fetched on demand during scrolling instead of preload.</p>
-        <p>In sample below, an in-memory list and timeout is used to mimic fetching from a remote datasource. The <i>virtualCars</i> is an empty array that is populated on scroll.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                :value="virtualCars"
-                scrollable
-                scrollHeight="400px"
-                :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }"
-                tableStyle="min-width: 50rem"
-            >
-                <Column field="id" header="Id" style="width: 20%">
-                    <template #loading>
-                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                            <Skeleton width="60%" height="1rem" />
-                        </div>
-                    </template>
-                </Column>
-                <Column field="vin" header="Vin" style="width: 20%">
-                    <template #loading>
-                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                            <Skeleton width="40%" height="1rem" />
-                        </div>
-                    </template>
-                </Column>
-                <Column field="year" header="Year" style="width: 20%">
-                    <template #loading>
-                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                            <Skeleton width="30%" height="1rem" />
-                        </div>
-                    </template>
-                </Column>
-                <Column field="brand" header="Brand" style="width: 20%">
-                    <template #loading>
-                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                            <Skeleton width="40%" height="1rem" />
-                        </div>
-                    </template>
-                </Column>
-                <Column field="color" header="Color" style="width: 20%">
-                    <template #loading>
-                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                            <Skeleton width="60%" height="1rem" />
-                        </div>
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CarService']" />
-</template>
-
-<script>
-import { CarService } from '@/service/CarService';
-
-export default {
-    data() {
-        return {
-            cars: null,
-            virtualCars: Array.from({ length: 100000 }),
-            lazyLoading: false,
-            loadLazyTimeout: null,
-            code: {
-                basic: `
-<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
-        :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
-    <Column field="id" header="Id" style="width: 20%">
-        <template #loading>
-            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                <Skeleton width="60%" height="1rem" />
-            </div>
-        </template>
-    </Column>
-    <Column field="vin" header="Vin" style="width: 20%">
-        <template #loading>
-            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                <Skeleton width="40%" height="1rem" />
-            </div>
-        </template>
-    </Column>
-    <Column field="year" header="Year" style="width: 20%">
-        <template #loading>
-            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                <Skeleton width="30%" height="1rem" />
-            </div>
-        </template>
-    </Column>
-    <Column field="brand" header="Brand" style="width: 20%">
-        <template #loading>
-            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                <Skeleton width="40%" height="1rem" />
-            </div>
-        </template>
-    </Column>
-    <Column field="color" header="Color" style="width: 20%">
-        <template #loading>
-            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                <Skeleton width="60%" height="1rem" />
-            </div>
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
-                :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
-            <Column field="id" header="Id" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="60%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-            <Column field="vin" header="Vin" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="40%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-            <Column field="year" header="Year" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="30%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-            <Column field="brand" header="Brand" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="40%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-            <Column field="color" header="Color" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="60%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CarService } from '@/service/CarService';
-
-export default {
-    data() {
-        return {
-            cars: null,
-            virtualCars: Array.from({ length: 100000 }),
-            lazyLoading: false,
-            loadLazyTimeout: null
-        };
-    },
-    mounted() {
-        this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
-    },
-    methods: {
-        loadCarsLazy(event) {
-            !this.lazyLoading && (this.lazyLoading = true);
-
-            if (this.loadLazyTimeout) {
-                clearTimeout(this.loadLazyTimeout);
-            }
-
-            //simulate remote connection with a timeout
-            this.loadLazyTimeout = setTimeout(() => {
-                let _virtualCars = [...this.virtualCars];
-                let { first, last } = event;
-
-                //load data of required page
-                const loadedCars = this.cars.slice(first, last);
-
-                //populate page of virtual cars
-                Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
-
-                this.virtualCars = _virtualCars;
-                this.lazyLoading = false;
-            }, Math.random() * 1000 + 250);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
-                :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
-            <Column field="id" header="Id" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="60%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-            <Column field="vin" header="Vin" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="40%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-            <Column field="year" header="Year" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="30%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-            <Column field="brand" header="Brand" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="40%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-            <Column field="color" header="Color" style="width: 20%">
-                <template #loading>
-                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
-                        <Skeleton width="60%" height="1rem" />
-                    </div>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CarService } from '@/service/CarService';
-
-onMounted(() => {
-    cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
-});
-
-const cars = ref();
-const virtualCars = ref(Array.from({ length: 100000 }));
-const lazyLoading = ref(false);
-const loadLazyTimeout = ref();
-
-const loadCarsLazy = (event) => {
-    !lazyLoading.value && (lazyLoading.value = true);
-
-    if (loadLazyTimeout.value) {
-        clearTimeout(loadLazyTimeout.value);
-    }
-
-    //simulate remote connection with a timeout
-    loadLazyTimeout.value = setTimeout(() => {
-        let _virtualCars = [...virtualCars.value];
-        let { first, last } = event;
-
-        //load data of required page
-        const loadedCars = cars.value.slice(first, last);
-
-        //populate page of virtual cars
-        Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
-
-        virtualCars.value = _virtualCars;
-        lazyLoading.value = false;
-    }, Math.random() * 1000 + 250);
-};
-<\/script>
-`,
-                data: `
-{
-    id: 1
-    vin: tvACo,
-    brand: Norma,
-    color: Black,
-    year: 2002
-}`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
-        },
-        loadCarsLazy(event) {
-            !this.lazyLoading && (this.lazyLoading = true);
-
-            if (this.loadLazyTimeout) {
-                clearTimeout(this.loadLazyTimeout);
-            }
-
-            //simulate remote connection with a timeout
-            this.loadLazyTimeout = setTimeout(() => {
-                let _virtualCars = [...this.virtualCars];
-                let { first, last } = event;
-
-                //load data of required page
-                const loadedCars = this.cars.slice(first, last);
-
-                //populate page of virtual cars
-                Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
-
-                this.virtualCars = _virtualCars;
-                this.lazyLoading = false;
-            }, Math.random() * 1000 + 250);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue b/apps/labs/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
deleted file mode 100644
index 69772898e..000000000
--- a/apps/labs/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Virtual Scrolling is an efficient way to render large amount data. Usage is similar to regular scrolling with the addition of <i>virtualScrollerOptions</i> property to define a fixed <i>itemSize</i>. Internally,
-            <PrimeVueNuxtLink to="/virtualscroller">VirtualScroller</PrimeVueNuxtLink> component is utilized so refer to the API of VirtualScroller for more information about the available options.
-        </p>
-        <p>In this example, <strong>100000</strong> preloaded records are rendered by the Table.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
-                <Column field="id" header="Id" style="width: 20%"></Column>
-                <Column field="vin" header="Vin" style="width: 20%"></Column>
-                <Column field="year" header="Year" style="width: 20%"></Column>
-                <Column field="brand" header="Brand" style="width: 20%"></Column>
-                <Column field="color" header="Color" style="width: 20%"></Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['CarService']" />
-</template>
-
-<script>
-import { CarService } from '@/service/CarService';
-
-export default {
-    data() {
-        return {
-            cars: null,
-            code: {
-                basic: `
-<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
-    <Column field="id" header="Id" style="width: 20%"></Column>
-    <Column field="vin" header="Vin" style="width: 20%"></Column>
-    <Column field="year" header="Year" style="width: 20%"></Column>
-    <Column field="brand" header="Brand" style="width: 20%"></Column>
-    <Column field="color" header="Color" style="width: 20%"></Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
-            <Column field="id" header="Id" style="width: 20%"></Column>
-            <Column field="vin" header="Vin" style="width: 20%"></Column>
-            <Column field="year" header="Year" style="width: 20%"></Column>
-            <Column field="brand" header="Brand" style="width: 20%"></Column>
-            <Column field="color" header="Color" style="width: 20%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { CarService } from '@/service/CarService';
-
-export default {
-    data() {
-        return {
-            cars: null
-        };
-    },
-    mounted() {
-        this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
-            <Column field="id" header="Id" style="width: 20%"></Column>
-            <Column field="vin" header="Vin" style="width: 20%"></Column>
-            <Column field="year" header="Year" style="width: 20%"></Column>
-            <Column field="brand" header="Brand" style="width: 20%"></Column>
-            <Column field="color" header="Color" style="width: 20%"></Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CarService } from '@/service/CarService';
-
-const cars = ref();
-
-onMounted(() => {
-    cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
-});
-<\/script>
-`,
-                data: `
-{
-    id: 1
-    vin: tvACo,
-    brand: Norma,
-    color: Black,
-    year: 2002
-}`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dataview/AccessibilityDoc.vue b/apps/labs/doc/dataview/AccessibilityDoc.vue
deleted file mode 100644
index 43a5cdae5..000000000
--- a/apps/labs/doc/dataview/AccessibilityDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
-            derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API respectively.
-        </p>
-
-        <p>Refer to <PrimeVueNuxtLink to="/paginator">paginator</PrimeVueNuxtLink> accessibility documentation for the paginator of the component.</p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the buttons.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Toggles the checked state of a button.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/dataview/BasicDoc.vue b/apps/labs/doc/dataview/BasicDoc.vue
deleted file mode 100644
index 7f7d397ec..000000000
--- a/apps/labs/doc/dataview/BasicDoc.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DataView requires a <i>value</i> to display along with a <i>list</i> slot for item content.</p>
-    </DocSectionText>
-    <div class="card">
-        <DataView :value="products">
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataView :value="products">
-    <template #list="slotProps">
-        <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" />
-                        <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">
-                            <div>
-                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                            </div>
-                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                    <i class="pi pi-star-fill text-yellow-500"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col md:items-end gap-8">
-                            <span class="text-xl font-semibold">\${{ item.price }}</span>
-                            <div class="flex flex-row-reverse md:flex-row gap-2">
-                                <Button icon="pi pi-heart" outlined></Button>
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-</DataView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataView :value="products">
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataView :value="products">
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 5)));
-});
-
-const products = ref();
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dataview/ImportDoc.vue b/apps/labs/doc/dataview/ImportDoc.vue
deleted file mode 100644
index ac8c94c70..000000000
--- a/apps/labs/doc/dataview/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import DataView from 'primevue/dataview';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dataview/LayoutDoc.vue b/apps/labs/doc/dataview/LayoutDoc.vue
deleted file mode 100644
index 4eac835b5..000000000
--- a/apps/labs/doc/dataview/LayoutDoc.vue
+++ /dev/null
@@ -1,478 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The <i>grid</i> mode is not built-in for flexibility purposes and requires a library with CSS grid features like Tailwind.</p>
-    </DocSectionText>
-    <div class="card">
-        <DataView :value="products" :layout="layout">
-            <template #header>
-                <div class="flex justify-end">
-                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                        <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-                        </template>
-                    </SelectButton>
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-cols-12 gap-4">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
-                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
-                            <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" />
-                                    <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">
-                                <div class="flex flex-row justify-between items-start gap-2">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col gap-6 mt-6">
-                                    <span class="text-2xl font-semibold">${{ item.price }}</span>
-                                    <div class="flex gap-2">
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid',
-            options: ['list', 'grid'],
-            code: {
-                basic: `
-<DataView :value="products" :layout="layout">
-    <template #header>
-        <div class="flex justify-end">
-            <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                <template #option="{ option }">
-                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-                </template>
-            </SelectButton>
-        </div>
-    </template>
-
-    <template #list="slotProps">
-        <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" />
-                        <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">
-                            <div>
-                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                            </div>
-                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                    <i class="pi pi-star-fill text-yellow-500"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col md:items-end gap-8">
-                            <span class="text-xl font-semibold">\${{ item.price }}</span>
-                            <div class="flex flex-row-reverse md:flex-row gap-2">
-                                <Button icon="pi pi-heart" outlined></Button>
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <template #grid="slotProps">
-        <div class="grid grid-cols-12 gap-4">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
-                <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
-                    <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"/>
-                            <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">
-                        <div class="flex flex-row justify-between items-start gap-2">
-                            <div>
-                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium mt-1">{{ item.name }}</div>
-                            </div>
-                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                    <i class="pi pi-star-fill text-yellow-500"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col gap-6 mt-6">
-                            <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                            <div class="flex gap-2">
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
-                                <Button icon="pi pi-heart" outlined></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-</DataView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataView :value="products" :layout="layout">
-            <template #header>
-                <div class="flex justify-end">
-                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                        <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-                        </template>
-                    </SelectButton>
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-cols-12 gap-4">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
-                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
-                            <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"/>
-                                    <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">
-                                <div class="flex flex-row justify-between items-start gap-2">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col gap-6 mt-6">
-                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex gap-2">
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid',
-            options: ['list', 'grid'],
-        }
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataView :value="products" :layout="layout">
-            <template #header>
-                <div class="flex justify-end">
-                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                        <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-                        </template>
-                    </SelectButton>
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <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" />
-                                 <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-cols-12 gap-4">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
-                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
-                            <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"/>
-                                    <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">
-                                <div class="flex flex-row justify-between items-start gap-2">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col gap-6 mt-6">
-                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex gap-2">
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProducts().then((data) => (products.value = data.slice(0, 12)));
-});
-
-const products = ref();
-const layout = ref('grid');
-const options = ref(['list', 'grid']);
-
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-}
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dataview/LoadingDoc.vue b/apps/labs/doc/dataview/LoadingDoc.vue
deleted file mode 100644
index d48a6bbe3..000000000
--- a/apps/labs/doc/dataview/LoadingDoc.vue
+++ /dev/null
@@ -1,370 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>While data is being loaded. <PrimeVueNuxtLink to="/skeleton">Skeleton</PrimeVueNuxtLink> component may be used to indicate the busy state.</p>
-    </DocSectionText>
-    <div class="card">
-        <DataView :value="products" :layout="layout">
-            <template #header>
-                <div class="flex justify-end">
-                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                        <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-                        </template>
-                    </SelectButton>
-                </div>
-            </template>
-
-            <template #list>
-                <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-t border-surface-200 dark:border-surface-700': i !== 0 }">
-                            <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
-                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
-                                <div class="flex flex-col items-center sm:items-start gap-4">
-                                    <Skeleton width="8rem" height="2rem" />
-                                    <Skeleton width="6rem" height="1rem" />
-
-                                    <div class="flex items-center gap-4">
-                                        <Skeleton width="6rem" height="1rem" />
-                                        <Skeleton width="3rem" height="1rem" />
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
-                                    <Skeleton width="4rem" height="2rem" />
-                                    <Skeleton size="3rem" shape="circle" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid>
-                <div class="grid grid-cols-12 gap-4">
-                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 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">
-                                <Skeleton width="6rem" height="2rem" />
-                                <Skeleton width="3rem" height="1rem" />
-                            </div>
-                            <div class="flex flex-col items-center gap-4 py-8">
-                                <Skeleton width="75%" height="10rem" />
-                                <Skeleton width="8rem" height="2rem" />
-                                <Skeleton width="6rem" height="1rem" />
-                            </div>
-                            <div class="flex items-center justify-between">
-                                <Skeleton width="4rem" height="2rem" />
-                                <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid',
-            options: ['list', 'grid'],
-            code: {
-                basic: `
-<DataView :value="products" :layout="layout">
-    <template #header>
-        <div class="flex justify-end">
-            <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                <template #option="{ option }">
-                    <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-                </template>
-            </SelectButton>
-        </div>
-    </template>
-
-    <template #list>
-        <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-t border-surface-200 dark:border-surface-700': i !== 0 }">
-                    <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
-                    <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
-                        <div class="flex flex-col items-center sm:items-start gap-4">
-                            <Skeleton width="8rem" height="2rem" />
-                            <Skeleton width="6rem" height="1rem" />
-
-                            <div class="flex items-center gap-4">
-                                <Skeleton width="6rem" height="1rem" />
-                                <Skeleton width="3rem" height="1rem" />
-                            </div>
-                        </div>
-                        <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
-                            <Skeleton width="4rem" height="2rem" />
-                            <Skeleton size="3rem" shape="circle" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <template #grid>
-        <div class="grid grid-cols-12 gap-4">
-            <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 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">
-                        <Skeleton width="6rem" height="2rem" />
-                        <Skeleton width="3rem" height="1rem" />
-                    </div>
-                    <div class="flex flex-col items-center gap-4 py-8">
-                        <Skeleton width="75%" height="10rem" />
-                        <Skeleton width="8rem" height="2rem" />
-                        <Skeleton width="6rem" height="1rem" />
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <Skeleton width="4rem" height="2rem" />
-                        <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-</DataView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataView :value="products" :layout="layout">
-            <template #header>
-                <div class="flex justify-end">
-                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                        <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-                        </template>
-                    </SelectButton>
-                </div>
-            </template>
-
-            <template #list>
-                <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-t border-surface-200 dark:border-surface-700': i !== 0 }">
-                            <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
-                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
-                                <div class="flex flex-col items-center sm:items-start gap-4">
-                                    <Skeleton width="8rem" height="2rem" />
-                                    <Skeleton width="6rem" height="1rem" />
-
-                                    <div class="flex items-center gap-4">
-                                        <Skeleton width="6rem" height="1rem" />
-                                        <Skeleton width="3rem" height="1rem" />
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
-                                    <Skeleton width="4rem" height="2rem" />
-                                    <Skeleton size="3rem" shape="circle" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid>
-                <div class="grid grid-cols-12 gap-4">
-                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 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">
-                                <Skeleton width="6rem" height="2rem" />
-                                <Skeleton width="3rem" height="1rem" />
-                            </div>
-                            <div class="flex flex-col items-center gap-4 py-8">
-                                <Skeleton width="75%" height="10rem" />
-                                <Skeleton width="8rem" height="2rem" />
-                                <Skeleton width="6rem" height="1rem" />
-                            </div>
-                            <div class="flex items-center justify-between">
-                                <Skeleton width="4rem" height="2rem" />
-                                <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid',
-            options: ['list', 'grid'],
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 6)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataView :value="products" :layout="layout">
-            <template #header>
-                <div class="flex justify-end">
-                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                        <template #option="{ option }">
-                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-                        </template>
-                    </SelectButton>
-                </div>
-            </template>
-
-            <template #list>
-                <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-t border-surface-200 dark:border-surface-700': i !== 0 }">
-                            <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
-                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
-                                <div class="flex flex-col items-center sm:items-start gap-4">
-                                    <Skeleton width="8rem" height="2rem" />
-                                    <Skeleton width="6rem" height="1rem" />
-
-                                    <div class="flex items-center gap-4">
-                                        <Skeleton width="6rem" height="1rem" />
-                                        <Skeleton width="3rem" height="1rem" />
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
-                                    <Skeleton width="4rem" height="2rem" />
-                                    <Skeleton size="3rem" shape="circle" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid>
-                <div class="grid grid-cols-12 gap-4">
-                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 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">
-                                <Skeleton width="6rem" height="2rem" />
-                                <Skeleton width="3rem" height="1rem" />
-                            </div>
-                            <div class="flex flex-col items-center gap-4 py-8">
-                                <Skeleton width="75%" height="10rem" />
-                                <Skeleton width="8rem" height="2rem" />
-                                <Skeleton width="6rem" height="1rem" />
-                            </div>
-                            <div class="flex items-center justify-between">
-                                <Skeleton width="4rem" height="2rem" />
-                                <Skeleton width="6rem" height="1rem" shape="circle" size="3rem" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 6)));
-});
-
-const products = ref();
-const layout = ref('grid');
-const options = ref(['list', 'grid']);
-
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-}
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 6)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dataview/PaginationDoc.vue b/apps/labs/doc/dataview/PaginationDoc.vue
deleted file mode 100644
index 99a78c53e..000000000
--- a/apps/labs/doc/dataview/PaginationDoc.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Pagination is enabled with the <i>paginator</i> and <i>rows</i> properties. Refer to the <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> for more information about customizing the paginator.</p>
-    </DocSectionText>
-    <div class="card">
-        <DataView :value="products" paginator :rows="5">
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataView :value="products" paginator :rows="5">
-    <template #list="slotProps">
-        <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" />
-                        <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">
-                            <div>
-                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                            </div>
-                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                    <i class="pi pi-star-fill text-yellow-500"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col md:items-end gap-8">
-                            <span class="text-xl font-semibold">\${{ item.price }}</span>
-                            <div class="flex flex-row-reverse md:flex-row gap-2">
-                                <Button icon="pi pi-heart" outlined></Button>
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-</DataView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataView :value="products" paginator :rows="5">
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataView :value="products" paginator :rows="5">
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
-});
-
-const products = ref();
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dataview/SortingDoc.vue b/apps/labs/doc/dataview/SortingDoc.vue
deleted file mode 100644
index 92ad24a4d..000000000
--- a/apps/labs/doc/dataview/SortingDoc.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Built-in sorting is controlled by bindings <i>sortField</i> and <i>sortField</i> properties from a custom UI.</p>
-    </DocSectionText>
-    <div class="card">
-        <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
-            <template #header>
-                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
-            </template>
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            sortKey: null,
-            sortOrder: null,
-            sortField: null,
-            sortOptions: [
-                { label: 'Price High to Low', value: '!price' },
-                { label: 'Price Low to High', value: 'price' }
-            ],
-            code: {
-                basic: `
-<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
-    <template #header>
-        <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
-    </template>
-    <template #list="slotProps">
-        <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" />
-                        <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">
-                            <div>
-                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                            </div>
-                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                    <i class="pi pi-star-fill text-yellow-500"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col md:items-end gap-8">
-                            <span class="text-xl font-semibold">\${{ item.price }}</span>
-                            <div class="flex flex-row-reverse md:flex-row gap-2">
-                                <Button icon="pi pi-heart" outlined></Button>
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-</DataView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
-            <template #header>
-                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
-            </template>
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            sortKey: null,
-            sortOrder: null,
-            sortField: null,
-            sortOptions: [
-                { label: 'Price High to Low', value: '!price' },
-                { label: 'Price Low to High', value: 'price' }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        },
-        onSortChange(event) {
-            const value = event.value.value;
-            const sortValue = event.value;
-
-            if (value.indexOf('!') === 0) {
-                this.sortOrder = -1;
-                this.sortField = value.substring(1, value.length);
-                this.sortKey = sortValue;
-            } else {
-                this.sortOrder = 1;
-                this.sortField = value;
-                this.sortKey = sortValue;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
-            <template #header>
-                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
-            </template>
-            <template #list="slotProps">
-                <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" />
-                                <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">
-                                    <div>
-                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
-                                            <i class="pi pi-star-fill text-yellow-500"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 5)));
-});
-
-const products = ref();
-const sortKey = ref();
-const sortOrder = ref();
-const sortField = ref();
-const sortOptions = ref([
-    {label: 'Price High to Low', value: '!price'},
-    {label: 'Price Low to High', value: 'price'},
-]);
-const onSortChange = (event) => {
-    const value = event.value.value;
-    const sortValue = event.value;
-
-    if (value.indexOf('!') === 0) {
-        sortOrder.value = -1;
-        sortField.value = value.substring(1, value.length);
-        sortKey.value = sortValue;
-    }
-    else {
-        sortOrder.value = 1;
-        sortField.value = value;
-        sortKey.value = sortValue;
-    }
-};
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        },
-        onSortChange(event) {
-            const value = event.value.value;
-            const sortValue = event.value;
-
-            if (value.indexOf('!') === 0) {
-                this.sortOrder = -1;
-                this.sortField = value.substring(1, value.length);
-                this.sortKey = sortValue;
-            } else {
-                this.sortOrder = 1;
-                this.sortField = value;
-                this.sortKey = sortValue;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/AccessibilityDoc.vue b/apps/labs/doc/datepicker/AccessibilityDoc.vue
deleted file mode 100644
index 41a73e8a5..000000000
--- a/apps/labs/doc/datepicker/AccessibilityDoc.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
-            <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.
-        </p>
-        <p>
-            The optional datepicker button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
-            <i>chooseDate</i> key of the aria property from the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. This label is also used for the <i>aria-label</i> of the popup as well.
-            When there is a value selected, it is formatted and appended to the label to be able to notify users about the current value.
-        </p>
-
-        <p>
-            Popup has a <i>dialog</i> role along with <i>aria-modal</i> and <i>aria-label</i>. The navigation buttons at the header has an <i>aria-label</i> retrieved from the <i>prevYear</i>, <i>nextYear</i>, <i>prevMonth</i>, <i>nextMonth</i>,
-            <i>prevDecade</i> and <i>nextDecade</i> keys of the locale aria API. Similarly month picker button uses the <i>chooseMonth</i> and year picker button uses the <i>chooseYear</i> keys.
-        </p>
-
-        <p>
-            Main date table uses <i>grid</i> role that contains th elements with <i>col</i> as the scope along with <i>abbr</i> tag resolving to the full name of the month. Each date cell has an <i>aria-label</i> referring to the full date value.
-            Buttons at the footer utilize their readable labels as <i>aria-label</i> as well. Selected date also receives the <i>aria-selected</i> attribute.
-        </p>
-
-        <p>
-            Timepicker spinner buttons get their labels for <i>aria-label</i> from the aria locale API using the <i>prevHour</i>, <i>nextHour</i>, <i>prevMinute</i>, <i>nextMinute</i>, <i>prevSecond</i>, <i>nextSecond</i>, <i>am</i> and
-            <i>pm</i> keys.
-        </p>
-
-        <p>DatePicker also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Choose Date Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Popup Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup and moves focus to the input element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next focusable element within the popup.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the next focusable element within the popup.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Header Buttons Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Triggers the button action.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Triggers the button action.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Date Grid Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Selects the date, closes the popup and moves focus to the input element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Closes the popup and moves focus to the input element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the same day of the previous week.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>Closes the popup and moves focus to the input element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the same day of the next week.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>Moves focus to the next day.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Moves focus to the previous day.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Moves focus to the first day of the current week.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Moves focus to the last day of the current week.</td>
-                    </tr>
-                    <tr>
-                        <td><i>page up</i></td>
-                        <td>Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>page up</i></td>
-                        <td>Changes the date to previous year in date picker mode. Has no effect in month or year picker.</td>
-                    </tr>
-                    <tr>
-                        <td><i>page down</i></td>
-                        <td>Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>page down</i></td>
-                        <td>Changes the date to next year in date picker mode. Has no effect in month or year picker.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Footer Buttons Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Triggers the button action.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Triggers the button action.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="date1">Date</label>
-<DatePicker inputId="date1" />
-
-<span id="date2">Date</span>
-<DatePicker aria-labelledby="date2" />
-
-<DatePicker aria-label="Date" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/BasicDoc.vue b/apps/labs/doc/datepicker/BasicDoc.vue
deleted file mode 100644
index 11b63e4b0..000000000
--- a/apps/labs/doc/datepicker/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DatePicker is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/ButtonBarDoc.vue b/apps/labs/doc/datepicker/ButtonBarDoc.vue
deleted file mode 100644
index 1f4b7e43b..000000000
--- a/apps/labs/doc/datepicker/ButtonBarDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>showButtonBar</i> is present, today and clear buttons are displayed at the footer.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" showButtonBar />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" showButtonBar />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" showButtonBar />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" showButtonBar />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/DateTemplateDoc.vue b/apps/labs/doc/datepicker/DateTemplateDoc.vue
deleted file mode 100644
index 4deeaa4c1..000000000
--- a/apps/labs/doc/datepicker/DateTemplateDoc.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content can be placed inside date cells with the <i>date</i> slot that takes a Date as a parameter.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date">
-            <template #date="slotProps">
-                <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
-                <template v-else>{{ slotProps.date.day }}</template>
-            </template>
-        </DatePicker>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date">
-    <template #date="slotProps">
-        <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
-        <template v-else>{{ slotProps.date.day }}</template>
-    </template>
-</DatePicker>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date">
-            <template #date="slotProps">
-                <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
-                <template v-else>{{ slotProps.date.day }}</template>
-            </template>
-        </DatePicker>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date">
-            <template #date="slotProps">
-                <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
-                <template v-else>{{ slotProps.date.day }}</template>
-            </template>
-        </DatePicker>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/DisabledDoc.vue b/apps/labs/doc/datepicker/DisabledDoc.vue
deleted file mode 100644
index f129cd1f3..000000000
--- a/apps/labs/doc/datepicker/DisabledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/FilledDoc.vue b/apps/labs/doc/datepicker/FilledDoc.vue
deleted file mode 100644
index 10a709a50..000000000
--- a/apps/labs/doc/datepicker/FilledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/FloatLabelDoc.vue b/apps/labs/doc/datepicker/FloatLabelDoc.vue
deleted file mode 100644
index ba40e0b1f..000000000
--- a/apps/labs/doc/datepicker/FloatLabelDoc.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<FloatLabel>
-    <DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/FormatDoc.vue b/apps/labs/doc/datepicker/FormatDoc.vue
deleted file mode 100644
index 612091612..000000000
--- a/apps/labs/doc/datepicker/FormatDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Default date format is <i>mm/dd/yy</i> which can be customized using the <i>dateFormat</i> property. Following options can be a part of the format.</p>
-        <ul class="mb-6 leading-loose">
-            <li><i>d</i> - day of month (no leading zero)</li>
-            <li><i>dd</i> - day of month (two digit)</li>
-            <li><i>o</i> - day of the year (no leading zeros)</li>
-            <li><i>oo</i> - day of the year (three digit)</li>
-            <li><i>D</i> - day name short</li>
-            <li><i>DD</i> - day name long</li>
-            <li><i>m</i> - month of year (no leading zero)</li>
-            <li><i>mm</i> - month of year (two digit)</li>
-            <li><i>M</i> - month name short</li>
-            <li><i>MM</i> - month name long</li>
-            <li><i>y</i> - year (two digit)</li>
-            <li><i>yy</i> - year (four digit)</li>
-            <li><i>@</i> - Unix timestamp (ms since 01/01/1970)</li>
-            <li><i>!</i> - Windows ticks (100ns since 01/01/0001)</li>
-            <li><i>'...'</i> - literal text</li>
-            <li><i>''</i> - single quote</li>
-            <li><i>anything else</i> - literal text</li>
-        </ul>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" dateFormat="dd/mm/yy" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/FormsDoc.vue b/apps/labs/doc/datepicker/FormsDoc.vue
deleted file mode 100644
index d5154563d..000000000
--- a/apps/labs/doc/datepicker/FormsDoc.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DatePicker integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                date: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    date: z.preprocess((val) => {
-                        if (val === '' || val === null) {
-                            return null;
-                        }
-
-                        return new Date(val);
-                    }, z.union([z.date(), z.null().refine((val) => val !== null, { message: 'Date is required.' })]))
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col gap-1">
-        <DatePicker name="date" fluid />
-        <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                date: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    date: z.preprocess((val) => {
-                        if (val === '' || val === null) {
-                            return null;
-                        }
-
-                        return new Date(val);
-                    }, z.union([z.date(), z.null().refine((val) => val !== null, { message: 'Date is required.' })]))
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    date: ''
-});
-const resolver = ref(zodResolver(
-    z.object({
-        date: z.preprocess((val) => {
-            if (val === '' || val === null) {
-                return null;
-            }
-
-            return new Date(val);
-        }, z.union([z.date(), z.null().refine((val) => val !== null, { message: 'Date is required.' })]))
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/IconDoc.vue b/apps/labs/doc/datepicker/IconDoc.vue
deleted file mode 100644
index fc5a33210..000000000
--- a/apps/labs/doc/datepicker/IconDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>An additional icon is displayed next to the input field when <i>showIcon</i> is present.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
-        </div>
-        <div class="flex-auto">
-            <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
-        </div>
-        <div class="flex-auto">
-            <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
-                <template #inputicon="slotProps">
-                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
-                </template>
-            </DatePicker>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            buttondisplay: null,
-            icondisplay: null,
-            templatedisplay: null,
-            code: {
-                basic: `
-<DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" />
-<DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" />
-<DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly>
-    <template #inputicon="slotProps">
-        <i class="pi pi-clock" @click="slotProps.clickCallback" />
-    </template>
-</DatePicker>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
-        </div>
-        <div class="flex-auto">
-            <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
-        </div>
-        <div class="flex-auto">
-            <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
-                <template #inputicon="slotProps">
-                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
-                </template>
-            </DatePicker>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            buttondisplay: null,
-            icondisplay: null,
-            templatedisplay: null,
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
-        </div>
-        <div class="flex-auto">
-            <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
-        </div>
-        <div class="flex-auto">
-            <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
-                <template #inputicon="slotProps">
-                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
-                </template>
-            </DatePicker>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const buttondisplay = ref();
-const icondisplay = ref();
-const templatedisplay = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/IftaLabelDoc.vue b/apps/labs/doc/datepicker/IftaLabelDoc.vue
deleted file mode 100644
index 3a181b83a..000000000
--- a/apps/labs/doc/datepicker/IftaLabelDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
-            <label for="date">Date</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<IftaLabel>
-    <DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
-    <label for="date">Date</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
-            <label for="date">Date</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
-            <label for="date">Date</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/ImportDoc.vue b/apps/labs/doc/datepicker/ImportDoc.vue
deleted file mode 100644
index 57eccf5e9..000000000
--- a/apps/labs/doc/datepicker/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import DatePicker from 'primevue/datepicker';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/InlineDoc.vue b/apps/labs/doc/datepicker/InlineDoc.vue
deleted file mode 100644
index d6f1789dd..000000000
--- a/apps/labs/doc/datepicker/InlineDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DatePicker is displayed as a popup by default, add <i>inline</i> property to customize this behavior.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/InvalidDoc.vue b/apps/labs/doc/datepicker/InvalidDoc.vue
deleted file mode 100644
index cad85a50e..000000000
--- a/apps/labs/doc/datepicker/InvalidDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date1: null,
-            date2: null,
-            code: {
-                basic: `
-<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
-<DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date1: null,
-            date2: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date1 = ref(null);
-const date2 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/LocaleDoc.vue b/apps/labs/doc/datepicker/LocaleDoc.vue
deleted file mode 100644
index 1bf69abe9..000000000
--- a/apps/labs/doc/datepicker/LocaleDoc.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Locale for different languages and formats is defined globally, refer to the <NuxtLink to="/configuration/#locale">PrimeVue Locale</NuxtLink> configuration for more information.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/datepicker/MinMaxDoc.vue b/apps/labs/doc/datepicker/MinMaxDoc.vue
deleted file mode 100644
index 4f020dd98..000000000
--- a/apps/labs/doc/datepicker/MinMaxDoc.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Boundaries for the permitted dates that can be entered are defined with <i>minDate</i> and <i>maxDate</i> properties.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            minDate: null,
-            maxDate: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            minDate: null,
-            maxDate: null
-        };
-    },
-    created() {
-        let today = new Date();
-        let month = today.getMonth();
-        let year = today.getFullYear();
-        let prevMonth = month === 0 ? 11 : month - 1;
-        let prevYear = prevMonth === 11 ? year - 1 : year;
-        let nextMonth = month === 11 ? 0 : month + 1;
-        let nextYear = nextMonth === 0 ? year + 1 : year;
-
-        this.minDate = new Date();
-        this.minDate.setMonth(prevMonth);
-        this.minDate.setFullYear(prevYear);
-        this.maxDate = new Date();
-        this.maxDate.setMonth(nextMonth);
-        this.maxDate.setFullYear(nextYear);
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-let today = new Date();
-let month = today.getMonth();
-let year = today.getFullYear();
-let prevMonth = (month === 0) ? 11 : month -1;
-let prevYear = (prevMonth === 11) ? year - 1 : year;
-let nextMonth = (month === 11) ? 0 : month + 1;
-let nextYear = (nextMonth === 0) ? year + 1 : year;
-
-const date = ref();
-const minDate = ref(new Date());
-const maxDate = ref(new Date());
-
-minDate.value.setMonth(prevMonth);
-minDate.value.setFullYear(prevYear);
-maxDate.value.setMonth(nextMonth);
-maxDate.value.setFullYear(nextYear);
-<\/script>
-`
-            }
-        };
-    },
-    created() {
-        let today = new Date();
-        let month = today.getMonth();
-        let year = today.getFullYear();
-        let prevMonth = month === 0 ? 11 : month - 1;
-        let prevYear = prevMonth === 11 ? year - 1 : year;
-        let nextMonth = month === 11 ? 0 : month + 1;
-        let nextYear = nextMonth === 0 ? year + 1 : year;
-
-        this.minDate = new Date();
-        this.minDate.setMonth(prevMonth);
-        this.minDate.setFullYear(prevYear);
-        this.maxDate = new Date();
-        this.maxDate.setMonth(nextMonth);
-        this.maxDate.setFullYear(nextYear);
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/MonthPickerDoc.vue b/apps/labs/doc/datepicker/MonthPickerDoc.vue
deleted file mode 100644
index 1b54e987e..000000000
--- a/apps/labs/doc/datepicker/MonthPickerDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Month only picker is enabled by specifying <i>view</i> as <i>month</i> in addition to a suitable <i>dateFormat</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" view="month" dateFormat="mm/yy" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/MultipleDoc.vue b/apps/labs/doc/datepicker/MultipleDoc.vue
deleted file mode 100644
index d301922ba..000000000
--- a/apps/labs/doc/datepicker/MultipleDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>In order to choose multiple dates, set <i>selectionMode</i> as <i>multiple</i>. In this mode, the value binding should be an array.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            dates: null,
-            code: {
-                basic: `
-<DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            dates: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const dates = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/MultipleMonthsDoc.vue b/apps/labs/doc/datepicker/MultipleMonthsDoc.vue
deleted file mode 100644
index 8bd503e19..000000000
--- a/apps/labs/doc/datepicker/MultipleMonthsDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Number of months to display is configured with the <i>numberOfMonths</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" :numberOfMonths="2" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" :numberOfMonths="2" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" :numberOfMonths="2" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" :numberOfMonths="2" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/RangeDoc.vue b/apps/labs/doc/datepicker/RangeDoc.vue
deleted file mode 100644
index e6521b126..000000000
--- a/apps/labs/doc/datepicker/RangeDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A range of dates can be selected by defining <i>selectionMode</i> as <i>range</i>, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            dates: null,
-            code: {
-                basic: `
-<DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            dates: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const dates = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/SizesDoc.vue b/apps/labs/doc/datepicker/SizesDoc.vue
deleted file mode 100644
index 4dc26716c..000000000
--- a/apps/labs/doc/datepicker/SizesDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DatePicker provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
-        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
-<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
-<DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
-        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
-        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/TimeDoc.vue b/apps/labs/doc/datepicker/TimeDoc.vue
deleted file mode 100644
index 8094888c8..000000000
--- a/apps/labs/doc/datepicker/TimeDoc.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
-            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
-            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            datetime12h: null,
-            datetime24h: null,
-            time: null,
-            code: {
-                basic: `
-<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
-<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
-<DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
-            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
-            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            datetime12h: null,
-            datetime24h: null,
-            time: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
-            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
-            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const datetime12h = ref();
-const datetime24h = ref();
-const time = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/datepicker/YearPickerDoc.vue b/apps/labs/doc/datepicker/YearPickerDoc.vue
deleted file mode 100644
index 8d14e5427..000000000
--- a/apps/labs/doc/datepicker/YearPickerDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specifying <i>view</i> as <i>year</i> in addition to a suitable <i>dateFormat</i> enables the year picker.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" view="year" dateFormat="yy" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<DatePicker v-model="date" view="year" dateFormat="yy" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" view="year" dateFormat="yy" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <DatePicker v-model="date" view="year" dateFormat="yy" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/deferredcontent/AccessibilityDoc.vue b/apps/labs/doc/deferredcontent/AccessibilityDoc.vue
deleted file mode 100644
index 79ccb4967..000000000
--- a/apps/labs/doc/deferredcontent/AccessibilityDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
-            have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
-        </p>
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
-    Content
-</DeferredContent>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/deferredcontent/BasicDoc.vue b/apps/labs/doc/deferredcontent/BasicDoc.vue
deleted file mode 100644
index d2c8d6a01..000000000
--- a/apps/labs/doc/deferredcontent/BasicDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DeferredContent is used by wrapping the target.</p>
-    </DocSectionText>
-    <div class="card">
-        <div style="height: 1000px">Scroll down to lazy load an image.</div>
-
-        <DeferredContent @load="onImageLoad">
-            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
-        </DeferredContent>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<DeferredContent @load="onImageLoad">
-    <img src="/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
-</DeferredContent>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast />
-        <div style="height: 1000px">Scroll down to lazy load an image.</div>
-
-        <DeferredContent @load="onImageLoad">
-            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
-        </DeferredContent>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        onImageLoad() {
-            this.$toast.add({ severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable', life: 2000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <div style="height: 1000px">Scroll down to lazy load an image.</div>
-
-        <DeferredContent @load="onImageLoad">
-            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
-        </DeferredContent>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const onImageLoad = () => {
-    toast.add({ severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable', life: 2000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onImageLoad() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Image loaded', life: 2000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/deferredcontent/DataTableDoc.vue b/apps/labs/doc/deferredcontent/DataTableDoc.vue
deleted file mode 100644
index 878b0bfc2..000000000
--- a/apps/labs/doc/deferredcontent/DataTableDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A practical example that triggers a fetch when the table becomes visible in viewport.</p>
-    </DocSectionText>
-    <div class="card">
-        <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
-
-        <DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
-            <DataTable :value="products">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </DeferredContent>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { ProductService } from '/service/ProductService';
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
-    <DataTable :value="products">
-        <Column field="code" header="Code"></Column>
-        <Column field="name" header="Name"></Column>
-        <Column field="category" header="Category"></Column>
-        <Column field="quantity" header="Quantity"></Column>
-    </DataTable>
-</DeferredContent>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast />
-        <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
-        
-        <DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
-            <DataTable :value="products">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </DeferredContent>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    methods: {
-        onDataLoad() {
-            ProductService.getProductsSmall().then((data) => (this.products = data));
-            this.$toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
-
-        <DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
-            <DataTable :value="products">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </DeferredContent>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-const products = ref(null);
-
-const onDataLoad = () => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
-    toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
-};
-<\/script>
-`
-            },
-            products: null
-        };
-    },
-    methods: {
-        onDataLoad() {
-            ProductService.getProductsSmall().then((data) => (this.products = data));
-            this.$toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/deferredcontent/ImportDoc.vue b/apps/labs/doc/deferredcontent/ImportDoc.vue
deleted file mode 100644
index b80368549..000000000
--- a/apps/labs/doc/deferredcontent/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import DeferredContent from 'primevue/deferredcontent';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/AccessibilityDoc.vue b/apps/labs/doc/dialog/AccessibilityDoc.vue
deleted file mode 100644
index 6e11cf256..000000000
--- a/apps/labs/doc/dialog/AccessibilityDoc.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In
-            addition <i>aria-modal</i> is added since focus is kept within the popup.
-        </p>
-        <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
-        <p>
-            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, you
-            may use <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Overlay Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the next the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the dialog if <i>closeOnEscape</i> is true.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Close Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Closes the dialog.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Closes the dialog.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" />
-
-<Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }">
-    <p>Content</p>
-</Dialog>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/BasicDoc.vue b/apps/labs/doc/dialog/BasicDoc.vue
deleted file mode 100644
index 02ecc10c7..000000000
--- a/apps/labs/doc/dialog/BasicDoc.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Dialog is used as a container and visibility is controlled with a binding to <i>visible</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Button label="Show" @click="visible = true" />
-
-<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-    <div class="flex items-center gap-4 mb-4">
-        <label for="username" class="font-semibold w-24">Username</label>
-        <InputText id="username" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex items-center gap-4 mb-8">
-        <label for="email" class="font-semibold w-24">Email</label>
-        <InputText id="email" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex justify-end gap-2">
-        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-        <Button type="button" label="Save" @click="visible = false"></Button>
-    </div>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/HeadlessDoc.vue b/apps/labs/doc/dialog/HeadlessDoc.vue
deleted file mode 100644
index ca04bca67..000000000
--- a/apps/labs/doc/dialog/HeadlessDoc.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Login" icon="pi pi-user" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
-            <template #container="{ closeCallback }">
-                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-primary-700)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--p-primary-200)"
-                        />
-                    </svg>
-                    <div class="inline-flex flex-col gap-2">
-                        <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
-                    </div>
-                    <div class="inline-flex flex-col gap-2">
-                        <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
-                    </div>
-                    <div class="flex items-center gap-4">
-                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
-                    </div>
-                </div>
-            </template>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Button label="Login" icon="pi pi-user" @click="visible = true" />
-
-<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
-    <template #container="{ closeCallback }">
-        <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
-                <path
-                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--p-primary-700)"
-                />
-                <path
-                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                    fill="var(--p-primary-200)"
-                />
-            </svg>
-            <div class="inline-flex flex-col gap-2">
-                <label for="username" class="text-primary-50 font-semibold">Username</label>
-                <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
-            </div>
-            <div class="inline-flex flex-col gap-2">
-                <label for="password" class="text-primary-50 font-semibold">Password</label>
-                <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
-            </div>
-            <div class="flex items-center gap-4">
-                <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
-                <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
-            </div>
-        </div>
-    </template>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Login" icon="pi pi-user" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
-            <template #container="{ closeCallback }">
-                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-primary-700)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--p-primary-200)"
-                        />
-                    </svg>
-                    <div class="inline-flex flex-col gap-2">
-                        <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
-                    </div>
-                    <div class="inline-flex flex-col gap-2">
-                        <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
-                    </div>
-                    <div class="flex items-center gap-4">
-                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
-                    </div>
-                </div>
-            </template>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Login" icon="pi pi-user" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
-            <template #container="{ closeCallback }">
-                <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-primary-700)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--p-primary-200)"
-                        />
-                    </svg>
-                    <div class="inline-flex flex-col gap-2">
-                        <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
-                    </div>
-                    <div class="inline-flex flex-col gap-2">
-                        <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
-                    </div>
-                    <div class="flex items-center gap-4">
-                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
-                    </div>
-                </div>
-            </template>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/ImportDoc.vue b/apps/labs/doc/dialog/ImportDoc.vue
deleted file mode 100644
index 9ba13f80c..000000000
--- a/apps/labs/doc/dialog/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Dialog from 'primevue/dialog';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/LongContentDoc.vue b/apps/labs/doc/dialog/LongContentDoc.vue
deleted file mode 100644
index 34f4ec170..000000000
--- a/apps/labs/doc/dialog/LongContentDoc.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When content exceeds viewport, Dialog automatically becomes scrollable.</p>
-    </DocSectionText>
-
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="mb-8">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p class="mb-8">
-                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
-                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
-                consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-            </p>
-            <p class="mb-8">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
-                facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
-                earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-            </p>
-            <p class="mb-8">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p class="mb-8">
-                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
-                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
-                consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
-                facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
-                earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-            </p>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Button label="Show" @click="visible = true" />
-
-<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-    <p class="mb-8">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-    <p class="mb-8">
-        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
-        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-    </p>
-    <p class="mb-8">
-        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
-        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
-        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-    </p>
-    <p class="mb-8">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-    <p class="mb-8">
-        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
-        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-    </p>
-    <p>
-        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
-        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
-        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-    </p>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="mb-8">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p class="mb-8">
-                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-                adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
-                ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-            </p>
-            <p class="mb-8">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
-                maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
-                non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-            </p>
-            <p class="mb-8">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p class="mb-8">
-                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-                adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
-                ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
-                maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
-                non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-            </p>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="mb-8">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p class="mb-8">
-                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-                adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
-                ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-            </p>
-            <p class="mb-8">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
-                maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
-                non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-            </p>
-            <p class="mb-8">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p class="mb-8">
-                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-                adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
-                ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
-                maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
-                non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-            </p>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/MaximizableDoc.vue b/apps/labs/doc/dialog/MaximizableDoc.vue
deleted file mode 100644
index d92f7724f..000000000
--- a/apps/labs/doc/dialog/MaximizableDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Adding <i>maximizable</i> property enables the full screen mode.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Button label="Show" @click="visible = true" />
-
-<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/PositionDoc.vue b/apps/labs/doc/dialog/PositionDoc.vue
deleted file mode 100644
index 80e85e634..000000000
--- a/apps/labs/doc/dialog/PositionDoc.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>position</i> property defines the location of relative to the screen.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-2 mb-2">
-            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
-        </div>
-        <div class="flex flex-wrap justify-center gap-2 mb-2">
-            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
-        </div>
-        <div class="flex flex-wrap justify-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
-        </div>
-
-        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            position: 'center',
-            visible: false,
-            code: {
-                basic: `
-<div class="flex flex-wrap justify-center gap-2 mb-2">
-    <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
-    <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
-</div>
-<div class="flex flex-wrap justify-center gap-2 mb-2">
-    <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
-    <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
-    <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
-</div>
-<div class="flex flex-wrap justify-center gap-2">
-    <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
-    <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
-    <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
-</div>
-
-<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-    <div class="flex items-center gap-4 mb-4">
-        <label for="username" class="font-semibold w-24">Username</label>
-        <InputText id="username" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex items-center gap-4 mb-8">
-        <label for="email" class="font-semibold w-24">Email</label>
-        <InputText id="email" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex justify-end gap-2">
-        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-        <Button type="button" label="Save" @click="visible = false"></Button>
-    </div>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-2 mb-2">
-            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
-        </div>
-        <div class="flex flex-wrap justify-center gap-2 mb-2">
-            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
-        </div>
-        <div class="flex flex-wrap justify-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
-        </div>
-
-        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            position: 'center',
-            visible: false
-        };
-    },
-    methods: {
-        openPosition(position) {
-            this.position = position;
-            this.visible = true;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap justify-center gap-2 mb-2">
-            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
-        </div>
-        <div class="flex flex-wrap justify-center gap-2 mb-2">
-            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
-        </div>
-        <div class="flex flex-wrap justify-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
-        </div>
-
-        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const position = ref('center');
-const visible = ref(false);
-
-const openPosition = (pos) => {
-    position.value = pos;
-    visible.value = true;
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        openPosition(position) {
-            this.position = position;
-            this.visible = true;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/ResponsiveDoc.vue b/apps/labs/doc/dialog/ResponsiveDoc.vue
deleted file mode 100644
index b9b0918a3..000000000
--- a/apps/labs/doc/dialog/ResponsiveDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Dialog width can be adjusted per screen size with the <i>breakpoints</i> option where the max-width for the breakpoint and the width are defined as key-value pairs. When no breakpoint matches width defined in <i>style</i> or
-            <i>class</i> is used. Alternatively responsive utility classes of libraries like Tailwind or PrimeFlex can also be used such as <i>md:w-screen</i>.
-        </p>
-    </DocSectionText>
-
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Button label="Show" @click="visible = true" />
-
-<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/TemplateDoc.vue b/apps/labs/doc/dialog/TemplateDoc.vue
deleted file mode 100644
index 4f991697e..000000000
--- a/apps/labs/doc/dialog/TemplateDoc.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Header and Footer sections allow customization via templating.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <template #header>
-                <div class="inline-flex items-center justify-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                </div>
-            </template>
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-2">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <template #footer>
-                <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
-                <Button label="Save" outlined severity="secondary" @click="visible = false" autofocus />
-            </template>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Button label="Show" @click="visible = true" />
-
-<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-    <template #header>
-        <div class="inline-flex items-center justify-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-        </div>
-    </template>
-    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-    <div class="flex items-center gap-4 mb-4">
-        <label for="username" class="font-semibold w-24">Username</label>
-        <InputText id="username" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex items-center gap-4 mb-2">
-        <label for="email" class="font-semibold w-24">Email</label>
-        <InputText id="email" class="flex-auto" autocomplete="off" />
-    </div>
-    <template #footer>
-        <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
-        <Button label="Save" outlined severity="secondary" @click="visible = false" autofocus />
-    </template>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <template #header>
-                <div class="inline-flex items-center justify-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                </div>
-            </template>
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-2">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <template #footer>
-                <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
-                <Button label="Save" outlined severity="secondary" @click="visible = false" autofocus />
-            </template>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <template #header>
-                <div class="inline-flex items-center justify-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                </div>
-            </template>
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-2">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <template #footer>
-                <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
-                <Button label="Save" outlined severity="secondary" @click="visible = false" autofocus />
-            </template>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dialog/WithoutModalDoc.vue b/apps/labs/doc/dialog/WithoutModalDoc.vue
deleted file mode 100644
index 223a82c20..000000000
--- a/apps/labs/doc/dialog/WithoutModalDoc.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Mask layer behind the Dialog is configured with the <i>modal</i> property. By default, no modal layer is added.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-
-        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Button label="Show" @click="visible = true" />
-
-<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-    <div class="flex items-center gap-4 mb-4">
-        <label for="username" class="font-semibold w-24">Username</label>
-        <InputText id="username" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex items-center gap-4 mb-8">
-        <label for="email" class="font-semibold w-24">Email</label>
-        <InputText id="email" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex justify-end gap-2">
-        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-        <Button type="button" label="Save" @click="visible = false"></Button>
-    </div>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="visible = true" />
-        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-            <div class="flex items-center gap-4 mb-4">
-                <label for="username" class="font-semibold w-24">Username</label>
-                <InputText id="username" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex items-center gap-4 mb-8">
-                <label for="email" class="font-semibold w-24">Email</label>
-                <InputText id="email" class="flex-auto" autocomplete="off" />
-            </div>
-            <div class="flex justify-end gap-2">
-                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-                <Button type="button" label="Save" @click="visible = false"></Button>
-            </div>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/divider/AccessibilityDoc.vue b/apps/labs/doc/divider/AccessibilityDoc.vue
deleted file mode 100644
index ce89027fa..000000000
--- a/apps/labs/doc/divider/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/divider/BasicDoc.vue b/apps/labs/doc/divider/BasicDoc.vue
deleted file mode 100644
index b3cb457d7..000000000
--- a/apps/labs/doc/divider/BasicDoc.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Divider is basically placed between the items to separate.</p>
-    </DocSectionText>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<p class="m-0">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-</p>
-
-<Divider />
-
-<p class="m-0">
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-</p>
-
-<Divider />
-
-<p class="m-0">
-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-    deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-</p>
-
-<Divider />
-
-<p class="m-0">
-    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-</p>
-`,
-                options: `
-<template>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider />
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/divider/ContentDoc.vue b/apps/labs/doc/divider/ContentDoc.vue
deleted file mode 100644
index adf92b6d3..000000000
--- a/apps/labs/doc/divider/ContentDoc.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Children are rendered within the boundaries of the divider where location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are <i>left</i>, <i>center</i> and<i>right</i> whereas vertical
-            mode supports <i>top</i>, <i>center</i> and <i>bottom</i>.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider align="left" type="solid">
-            <b>Left</b>
-        </Divider>
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider align="center" type="dotted">
-            <b>Center</b>
-        </Divider>
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider align="right" type="dashed">
-            <b>Right</b>
-        </Divider>
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<p class="m-0">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-</p>
-
-<Divider align="left" type="solid">
-    <b>Left</b>
-</Divider>
-
-<p class="m-0">
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-</p>
-
-<Divider align="center" type="dotted">
-    <b>Center</b>
-</Divider>
-
-<p class="m-0">
-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-    deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-</p>
-
-<Divider align="right" type="dashed">
-    <b>Right</b>
-</Divider>
-
-<p class="m-0">
-    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-</p>
-`,
-                options: `
-<template>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider align="left" type="solid">
-            <b>Left</b>
-        </Divider>
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider align="center" type="dotted">
-            <b>Center</b>
-        </Divider>
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider align="right" type="dashed">
-            <b>Right</b>
-        </Divider>
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider align="left" type="solid">
-            <b>Left</b>
-        </Divider>
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider align="center" type="dotted">
-            <b>Center</b>
-        </Divider>
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider align="right" type="dashed">
-            <b>Right</b>
-        </Divider>
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/divider/ImportDoc.vue b/apps/labs/doc/divider/ImportDoc.vue
deleted file mode 100644
index ed986827d..000000000
--- a/apps/labs/doc/divider/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Divider from 'primevue/divider';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/divider/LoginDoc.vue b/apps/labs/doc/divider/LoginDoc.vue
deleted file mode 100644
index 5134636a2..000000000
--- a/apps/labs/doc/divider/LoginDoc.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Sample implementation of a login form using a divider with content.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-col md:flex-row">
-            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
-                <div class="flex flex-col gap-2">
-                    <label for="username">Username</label>
-                    <InputText id="username" type="text" />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="password">Password</label>
-                    <InputText id="password" type="password" />
-                </div>
-                <div class="flex">
-                    <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
-                </div>
-            </div>
-            <div class="w-full md:w-2/12">
-                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
-                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
-            </div>
-            <div class="w-full md:w-5/12 flex items-center justify-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div class="flex flex-col md:flex-row">
-    <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
-        <div class="flex flex-col gap-2">
-            <label for="username">Username</label>
-            <InputText id="username" type="text" />
-        </div>
-        <div class="flex flex-col gap-2">
-            <label for="password">Password</label>
-            <InputText id="password" type="password" />
-        </div>
-        <div class="flex">
-            <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
-        </div>
-    </div>
-    <div class="w-full md:w-2/12">
-        <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
-        <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
-    </div>
-    <div class="w-full md:w-5/12 flex items-center justify-center py-5">
-        <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
-    </div>
-</div>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-col md:flex-row">
-            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
-                <div class="flex flex-col gap-2">
-                    <label for="username">Username</label>
-                    <InputText id="username" type="text" />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="password">Password</label>
-                    <InputText id="password" type="password" />
-                </div>
-                <div class="flex">
-                    <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
-                </div>
-            </div>
-            <div class="w-full md:w-2/12">
-                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
-                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
-            </div>
-            <div class="w-full md:w-5/12 flex items-center justify-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-col md:flex-row">
-            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
-                <div class="flex flex-col gap-2">
-                    <label for="username">Username</label>
-                    <InputText id="username" type="text" />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="password">Password</label>
-                    <InputText id="password" type="password" />
-                </div>
-                <div class="flex">
-                    <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
-                </div>
-            </div>
-            <div class="w-full md:w-2/12">
-                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
-                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
-            </div>
-            <div class="w-full md:w-5/12 flex items-center justify-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/divider/TypeDoc.vue b/apps/labs/doc/divider/TypeDoc.vue
deleted file mode 100644
index 8435720ea..000000000
--- a/apps/labs/doc/divider/TypeDoc.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Style of the border is configured with the <i>type</i> property that can either be <i>solid</i>, <i>dotted</i> or <i>dashed</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider type="solid" />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider type="dotted" />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider type="dashed" />
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<p class="m-0">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-</p>
-
-<Divider type="solid" />
-
-<p class="m-0">
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-</p>
-
-<Divider type="dotted" />
-
-<p class="m-0">
-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-    deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-</p>
-
-<Divider type="dashed" />
-
-<p class="m-0">
-    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-    maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-</p>
-`,
-                options: `
-<template>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider type="solid" />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider type="dotted" />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider type="dashed" />
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider type="solid" />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider type="dotted" />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider type="dashed" />
-
-        <p class="m-0">
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/divider/VerticalDoc.vue b/apps/labs/doc/divider/VerticalDoc.vue
deleted file mode 100644
index 895230128..000000000
--- a/apps/labs/doc/divider/VerticalDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Vertical divider is enabled by setting the <i>layout</i> property as <i>vertical</i>.</p>
-    </DocSectionText>
-    <div class="card flex">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider layout="vertical" />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider layout="vertical" />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<p class="m-0">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-</p>
-
-<Divider layout="vertical" />
-
-<p class="m-0">
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-</p>
-
-<Divider layout="vertical" />
-
-<p class="m-0">
-    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-    deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-</p>
-`,
-                options: `
-<template>
-    <div class="card flex">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider layout="vertical" />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider layout="vertical" />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider layout="vertical" />
-
-        <p class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider layout="vertical" />
-
-        <p class="m-0">
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dock/AccessibilityDoc.vue b/apps/labs/doc/dock/AccessibilityDoc.vue
deleted file mode 100644
index 98dc321d6..000000000
--- a/apps/labs/doc/dock/AccessibilityDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with
-            <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the first menuitem.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused menuitem.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused menuitem.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next menuitem in vertical layout.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous menuitem in vertical layout.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next menuitem in horizontal layout.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous menuitem in horizontal layout.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first menuitem.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last menuitem.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/dock/AdvancedDoc.vue b/apps/labs/doc/dock/AdvancedDoc.vue
deleted file mode 100644
index ff133f7d8..000000000
--- a/apps/labs/doc/dock/AdvancedDoc.vue
+++ /dev/null
@@ -1,928 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A sample desktop demo using various components.</p>
-    </DocSectionText>
-    <div class="card dock-demo">
-        <Toast position="top-center" group="tc" />
-        <Menubar :model="menubarItems">
-            <template #start>
-                <i class="pi pi-apple px-2"></i>
-            </template>
-            <template #end>
-                <i class="pi pi-video px-2" />
-                <i class="pi pi-wifi px-2" />
-                <i class="pi pi-volume-up px-2" />
-                <span class="px-2">Fri 13:07</span>
-                <i class="pi pi-search px-2" />
-                <i class="pi pi-bars px-2" />
-            </template>
-        </Menubar>
-
-        <div class="dock-window dock-advanced">
-            <Dock :model="items">
-                <template #item="{ item }">
-                    <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
-                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                    </a>
-                </template>
-            </Dock>
-
-            <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
-            </Dialog>
-
-            <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                <Tree :value="nodes" />
-            </Dialog>
-
-            <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-                </template>
-            </Galleria>
-        </div>
-    </div>
-    <DocSectionCode :code="code" :service="['PhotoService', 'NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-import { PhotoService } from '@/service/PhotoService';
-import TerminalService from 'primevue/terminalservice';
-
-export default {
-    data() {
-        return {
-            displayFinder: false,
-            displayTerminal: false,
-            displayPhotos: false,
-            images: null,
-            nodes: null,
-            items: [
-                {
-                    label: 'Finder',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg',
-                    command: () => {
-                        this.displayFinder = true;
-                    }
-                },
-                {
-                    label: 'Terminal',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/terminal.svg',
-                    command: () => {
-                        this.displayTerminal = true;
-                    }
-                },
-                {
-                    label: 'App Store',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Safari',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/safari.svg',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Photos',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg',
-                    command: () => {
-                        this.displayPhotos = true;
-                    }
-                },
-                {
-                    label: 'GitHub',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/github.svg'
-                },
-                {
-                    label: 'Trash',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
-                    }
-                }
-            ],
-            menubarItems: [
-                {
-                    label: 'Finder',
-                    class: 'menubar-root'
-                },
-                {
-                    label: 'File',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Quit'
-                }
-            ],
-            responsiveOptions: [
-                {
-                    breakpoint: '1024px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 2
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Dock :model="items">
-    <template #item="{ item }">
-        <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
-            <img :alt="item.label" :src="item.icon" style="width: 100%" />
-        </a>
-    </template>
-</Dock>
-`,
-                options: `
-<template>
-    <div class="card dock-demo">
-        <Toast position="top-center" group="tc" />
-        <Menubar :model="menubarItems">
-            <template #start>
-                <i class="pi pi-apple px-2"></i>
-            </template>
-            <template #end>
-                <i class="pi pi-video px-2" />
-                <i class="pi pi-wifi px-2" />
-                <i class="pi pi-volume-up px-2" />
-                <span class="px-2">Fri 13:07</span>
-                <i class="pi pi-search px-2" />
-                <i class="pi pi-bars px-2" />
-            </template>
-        </Menubar>
-
-        <div class="dock-window dock-advanced">
-            <Dock :model="items">
-                <template #item="{ item }">
-                    <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
-                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                    </a>
-                </template>
-            </Dock>
-
-            <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
-            </Dialog>
-
-            <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                <Tree :value="nodes" />
-            </Dialog>
-
-            <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-                </template>
-            </Galleria>
-        </div>
-    </div>
-</template>
-
-<script>
-import TerminalService from 'primevue/terminalservice';
-import { NodeService } from '@/service/NodeService';
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            displayFinder: false,
-            displayTerminal: false,
-            displayPhotos: false,
-            images: null,
-            nodes: null,
-            items: [
-                {
-                    label: 'Finder',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg',
-                    command: () => {
-                        this.displayFinder = true;
-                    }
-                },
-                {
-                    label: 'Terminal',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/terminal.svg',
-                    command: () => {
-                        this.displayTerminal = true;
-                    }
-                },
-                {
-                    label: 'App Store',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Safari',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/safari.svg',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Photos',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg',
-                    command: () => {
-                        this.displayPhotos = true;
-                    }
-                },
-                {
-                    label: 'GitHub',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/github.svg'
-                },
-                {
-                    label: 'Trash',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
-                    }
-                }
-            ],
-            menubarItems: [
-                {
-                    label: 'Finder',
-                    class: 'menubar-root'
-                },
-                {
-                    label: 'File',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Quit'
-                }
-            ],
-            responsiveOptions: [
-                {
-                    breakpoint: '1024px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 2
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-        TerminalService.on('command', this.commandHandler);
-    },
-    beforeUnmount() {
-        TerminalService.off('command', this.commandHandler);
-    },
-    methods: {
-        onDockItemClick(event, item) {
-            if (item.command) {
-                item.command();
-            }
-
-            event.preventDefault();
-        },
-        commandHandler(text) {
-            let response;
-            let argsIndex = text.indexOf(' ');
-            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-            switch (command) {
-                case 'date':
-                    response = 'Today is ' + new Date().toDateString();
-                    break;
-
-                case 'greet':
-                    response = 'Hola ' + text.substring(argsIndex + 1);
-                    break;
-
-                case 'random':
-                    response = Math.floor(Math.random() * 100);
-                    break;
-
-                default:
-                    response = 'Unknown command: ' + command;
-            }
-
-            TerminalService.emit('response', response);
-        }
-    }
-};
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-
-.dock-demo .p-menubar {
-    padding: 0;
-    border-radius: 0;
-}
-</style>
-`,
-                composition: `
-<template>
-    <div>
-        <div class="card dock-demo">
-            <Toast position="top-center" group="tc" />
-
-            <Menubar :model="menubarItems">
-                <template #start>
-                    <i class="pi pi-apple px-2"></i>
-                </template>
-                <template #end>
-                    <i class="pi pi-video px-2" />
-                    <i class="pi pi-wifi px-2" />
-                    <i class="pi pi-volume-up px-2" />
-                    <span class="px-2">Fri 13:07</span>
-                    <i class="pi pi-search px-2" />
-                    <i class="pi pi-bars px-2" />
-                </template>
-            </Menubar>
-
-            <div class="dock-window dock-advanced">
-                <Dock :model="items">
-                    <template #item="{ item }">
-                        <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
-                            <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                        </a>
-                    </template>
-                </Dock>
-
-                <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                    <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
-                </Dialog>
-
-                <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                    <Tree :value="nodes" />
-                </Dialog>
-
-                <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
-                    <template #item="slotProps">
-                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-                    </template>
-                </Galleria>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import TerminalService from 'primevue/terminalservice';
-import { NodeService } from '@/service/NodeService';
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then(data => images.value = data);
-    NodeService.getTreeNodes().then(data => nodes.value = data);
-    TerminalService.on('command', commandHandler);
-})
-
-onBeforeUnmount(() => {
-    TerminalService.off('command', commandHandler);
-})
-
-const displayFinder = ref(false);
-const displayTerminal = ref(false);
-const displayPhotos = ref(false);
-const images = ref();
-const nodes = ref();
-const toast = useToast();
-const items = ref([
-    {
-        label: 'Finder',
-        icon: "https://primefaces.org/cdn/primevue//images/dock/finder.svg",
-        command: () => {
-            displayFinder.value = true;
-        }
-    },
-    {
-        label: 'Terminal',
-        icon: "https://primefaces.org/cdn/primevue//images/dock/terminal.svg",
-        command: () => {
-            displayTerminal.value = true;
-        }
-    },
-    {
-        label: 'App Store',
-        icon: "https://primefaces.org/cdn/primevue//images/dock/appstore.svg",
-        command: () => {
-            toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
-        }
-    },
-    {
-        label: 'Safari',
-        icon: "https://primefaces.org/cdn/primevue//images/dock/safari.svg",
-        command: () => {
-            toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
-        }
-    },
-    {
-        label: 'Photos',
-        icon: "https://primefaces.org/cdn/primevue//images/dock/photos.svg",
-        command: () => {
-            displayPhotos.value = true;
-        }
-    },
-    {
-        label: 'GitHub',
-        icon: "https://primefaces.org/cdn/primevue//images/dock/github.svg",
-    },
-    {
-        label: 'Trash',
-        icon: "https://primefaces.org/cdn/primevue//images/dock/trash.png",
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
-        }
-    }
-]);
-const menubarItems = ref([
-    {
-        label: 'Finder',
-        class: 'menubar-root'
-    },
-    {
-        label: 'File',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    },
-
-                ]
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        items: [
-            {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            },
-
-        ]
-    },
-    {
-        label: 'Users',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus',
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus',
-
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Events',
-        items: [
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            },
-            {
-                label: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Quit'
-    }
-]);
-const responsiveOptions = ref([
-    {
-        breakpoint: '1024px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 2
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1
-    }
-]);
-
-const onDockItemClick = (event, item) => {
-    if (item.command) {
-        item.command();
-    }
-
-    event.preventDefault();
-};
-
-const commandHandler = (text) => {
-    let response;
-    let argsIndex = text.indexOf(' ');
-    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-    switch(command) {
-        case "date":
-            response = 'Today is ' + new Date().toDateString();
-            break;
-
-        case "greet":
-            response = 'Hola ' + text.substring(argsIndex + 1);
-            break;
-
-        case "random":
-            response = Math.floor(Math.random() * 100);
-            break;
-
-        default:
-            response = "Unknown command: " + command;
-    }
-
-    TerminalService.emit('response', response);
-};
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-
-}
-
-.dock-demo .p-menubar {
-    padding: 0;
-    border-radius: 0;
-}
-</style>
-`
-            }
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-        TerminalService.on('command', this.commandHandler);
-    },
-    beforeUnmount() {
-        TerminalService.off('command', this.commandHandler);
-    },
-    methods: {
-        onDockItemClick(event, item) {
-            if (item.command) {
-                item.command();
-            }
-
-            event.preventDefault();
-        },
-        commandHandler(text) {
-            let response;
-            let argsIndex = text.indexOf(' ');
-            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-            switch (command) {
-                case 'date':
-                    response = 'Today is ' + new Date().toDateString();
-                    break;
-
-                case 'greet':
-                    response = 'Hola ' + text.substring(argsIndex + 1);
-                    break;
-
-                case 'random':
-                    response = Math.floor(Math.random() * 100);
-                    break;
-
-                default:
-                    response = 'Unknown command: ' + command;
-            }
-
-            TerminalService.emit('response', response);
-        }
-    }
-};
-</script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-
-.dock-demo .p-menubar {
-    padding: 0;
-    border-radius: 0;
-}
-</style>
diff --git a/apps/labs/doc/dock/BasicDoc.vue b/apps/labs/doc/dock/BasicDoc.vue
deleted file mode 100644
index 41e861844..000000000
--- a/apps/labs/doc/dock/BasicDoc.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Menu requires a collection of menuitems as its <i>model</i> and an <i>icon</i> template. Default location is <i>bottom</i> and other edges are also available when defined with the <i>position</i> property.</p>
-    </DocSectionText>
-    <div class="card dock-demo">
-        <div class="flex flex-wrap gap-4 mb-8">
-            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
-                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
-                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
-            </div>
-        </div>
-        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg)'">
-            <Dock :model="items" :position="position">
-                <template #itemicon="{ item }">
-                    <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Finder',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-                },
-                {
-                    label: 'App Store',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-                },
-                {
-                    label: 'Photos',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-                },
-                {
-                    label: 'Trash',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-                }
-            ],
-            position: 'bottom',
-            positions: [
-                {
-                    label: 'Bottom',
-                    value: 'bottom'
-                },
-                {
-                    label: 'Top',
-                    value: 'top'
-                },
-                {
-                    label: 'Left',
-                    value: 'left'
-                },
-                {
-                    label: 'Right',
-                    value: 'right'
-                }
-            ],
-            code: {
-                basic: `
-<Dock :model="items" :position="position">
-    <template #itemicon="{ item }">
-        <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
-    </template>
-</Dock>
-`,
-                options: `
-<template>
-    <div class="card dock-demo">
-        <div class="flex flex-wrap gap-4 mb-8">
-            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
-                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
-                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
-            </div>
-        </div>
-        <div class="dock-window">
-            <Dock :model="items" :position="position">
-                <template #itemicon="{ item }">
-                    <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Finder',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-                },
-                {
-                    label: 'App Store',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-                },
-                {
-                    label: 'Photos',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-                },
-                {
-                    label: 'Trash',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-                }
-            ],
-            position: 'bottom',
-            positions: [
-                {
-                    label: 'Bottom',
-                    value: 'bottom'
-                },
-                {
-                    label: 'Top',
-                    value: 'top'
-                },
-                {
-                    label: 'Left',
-                    value: 'left'
-                },
-                {
-                    label: 'Right',
-                    value: 'right'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-</style>
-`,
-                composition: `
-<template>
-    <div class="card dock-demo">
-        <div class="flex flex-wrap gap-4 mb-8">
-            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
-                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
-                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
-            </div>
-        </div>
-        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
-            <Dock :model="items" :position="position">
-                <template #itemicon="{ item }">
-                    <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Finder',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-    },
-    {
-        label: 'App Store',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-    },
-    {
-        label: 'Photos',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-    },
-    {
-        label: 'Trash',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-    }
-]);
-const position = ref('bottom');
-const positions = ref([
-    {
-        label: 'Bottom',
-        value: 'bottom'
-    },
-    {
-        label: 'Top',
-        value: 'top'
-    },
-    {
-        label: 'Left',
-        value: 'left'
-    },
-    {
-        label: 'Right',
-        value: 'right'
-    }
-]);
-
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-</style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-
-.dock-demo .p-menubar {
-    padding: 0;
-    border-radius: 0;
-}
-</style>
diff --git a/apps/labs/doc/dock/ImportDoc.vue b/apps/labs/doc/dock/ImportDoc.vue
deleted file mode 100644
index 6f75f4c52..000000000
--- a/apps/labs/doc/dock/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Dock from 'primevue/dock';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/drawer/AccessibilityDoc.vue b/apps/labs/doc/drawer/AccessibilityDoc.vue
deleted file mode 100644
index 656026597..000000000
--- a/apps/labs/doc/drawer/AccessibilityDoc.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Drawer component uses <i>complementary</i> role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like <i>aria-labelledby</i> can be added. In
-            addition <i>aria-modal</i> is added since focus is kept within the drawer when opened.
-        </p>
-
-        <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Overlay Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the next the focusable element within the drawer.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element within the drawer.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the dialog.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Close Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Closes the drawer.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Closes the drawer.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
-
-<Drawer id="sbar" v-model:visible="visible" role="region" >
-    <p>Content</p>
-</Drawer>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/drawer/BasicDoc.vue b/apps/labs/doc/drawer/BasicDoc.vue
deleted file mode 100644
index 837b50e71..000000000
--- a/apps/labs/doc/drawer/BasicDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Drawer is used as a container and visibility is controlled with a binding to <i>visible</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<div class="card flex justify-center">
-    <Drawer v-model:visible="visible" header="Drawer">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </Drawer>
-    <Button icon="pi pi-arrow-right" @click="visible = true" />
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/drawer/FullScreenDoc.vue b/apps/labs/doc/drawer/FullScreenDoc.vue
deleted file mode 100644
index 6f8fa316e..000000000
--- a/apps/labs/doc/drawer/FullScreenDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The whole page is covered when <i>position</i> property is set as <i>full</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" position="full">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-window-maximize" @click="visible = true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<div class="card flex justify-center">
-    <Drawer v-model:visible="visible" header="Drawer" position="full">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </Drawer>
-    <Button icon="pi pi-window-maximize" @click="visible = true" />
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" position="full">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-window-maximize" @click="visible = true" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" position="full">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-window-maximize" @click="visible = true" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/drawer/HeadlessDoc.vue b/apps/labs/doc/drawer/HeadlessDoc.vue
deleted file mode 100644
index 8ef91ccfd..000000000
--- a/apps/labs/doc/drawer/HeadlessDoc.vue
+++ /dev/null
@@ -1,784 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible">
-            <template #container="{ closeCallback }">
-                <div class="flex flex-col h-full">
-                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
-                        <span class="inline-flex items-center gap-2">
-                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path
-                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                                    fill="var(--p-primary-color)"
-                                />
-                                <path
-                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                                    fill="var(--p-text-color)"
-                                />
-                            </svg>
-                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
-                        </span>
-                        <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
-                        </span>
-                    </div>
-                    <div class="overflow-y-auto">
-                        <ul class="list-none p-4 m-0">
-                            <li>
-                                <div
-                                    v-ripple
-                                    v-styleclass="{
-                                        selector: '@next',
-                                        enterFromClass: 'hidden',
-                                        enterActiveClass: 'animate-slidedown',
-                                        leaveToClass: 'hidden',
-                                        leaveActiveClass: 'animate-slideup'
-                                    }"
-                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
-                                >
-                                    <span class="font-medium">FAVORITES</span>
-                                    <i class="pi pi-chevron-down"></i>
-                                </div>
-                                <ul class="list-none p-0 m-0 overflow-hidden">
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-home mr-2"></i>
-                                            <span class="font-medium">Dashboard</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-bookmark mr-2"></i>
-                                            <span class="font-medium">Bookmarks</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            v-ripple
-                                            v-styleclass="{
-                                                selector: '@next',
-                                                enterFromClass: 'hidden',
-                                                enterActiveClass: 'animate-slidedown',
-                                                leaveToClass: 'hidden',
-                                                leaveActiveClass: 'animate-slideup'
-                                            }"
-                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
-                                        >
-                                            <i class="pi pi-chart-line mr-2"></i>
-                                            <span class="font-medium">Reports</span>
-                                            <i class="pi pi-chevron-down ml-auto"></i>
-                                        </a>
-                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
-                                            <li>
-                                                <a
-                                                    v-ripple
-                                                    v-styleclass="{
-                                                        selector: '@next',
-                                                        enterFromClass: 'hidden',
-                                                        enterActiveClass: 'animate-slidedown',
-                                                        leaveToClass: 'hidden',
-                                                        leaveActiveClass: 'animate-slideup'
-                                                    }"
-                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
-                                                >
-                                                    <i class="pi pi-chart-line mr-2"></i>
-                                                    <span class="font-medium">Revenue</span>
-                                                    <i class="pi pi-chevron-down ml-auto"></i>
-                                                </a>
-                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
-                                                    <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                            <i class="pi pi-table mr-2"></i>
-                                                            <span class="font-medium">View</span>
-                                                        </a>
-                                                    </li>
-                                                    <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                            <i class="pi pi-search mr-2"></i>
-                                                            <span class="font-medium">Search</span>
-                                                        </a>
-                                                    </li>
-                                                </ul>
-                                            </li>
-                                            <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                    <i class="pi pi-chart-line mr-2"></i>
-                                                    <span class="font-medium">Expenses</span>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-users mr-2"></i>
-                                            <span class="font-medium">Team</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-comments mr-2"></i>
-                                            <span class="font-medium">Messages</span>
-                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-calendar mr-2"></i>
-                                            <span class="font-medium">Calendar</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-cog mr-2"></i>
-                                            <span class="font-medium">Settings</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                        <ul class="list-none p-4 m-0">
-                            <li>
-                                <div
-                                    v-ripple
-                                    v-styleclass="{
-                                        selector: '@next',
-                                        enterFromClass: 'hidden',
-                                        enterActiveClass: 'animate-slidedown',
-                                        leaveToClass: 'hidden',
-                                        leaveActiveClass: 'animate-slideup'
-                                    }"
-                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
-                                >
-                                    <span class="font-medium">APPLICATION</span>
-                                    <i class="pi pi-chevron-down"></i>
-                                </div>
-                                <ul class="list-none p-0 m-0 overflow-hidden">
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-folder mr-2"></i>
-                                            <span class="font-medium">Projects</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-chart-bar mr-2"></i>
-                                            <span class="font-medium">Performance</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-cog mr-2"></i>
-                                            <span class="font-medium">Settings</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="mt-auto">
-                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
-                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                            <span class="font-bold">Amy Elsner</span>
-                        </a>
-                    </div>
-                </div>
-            </template>
-        </Drawer>
-        <Button icon="pi pi-bars" @click="visible = true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Drawer v-model:visible="visible">
-    <template #container="{ closeCallback }">
-        <div class="flex flex-col h-full">
-            <div class="flex items-center justify-between px-6 pt-4 shrink-0">
-                <span class="inline-flex items-center gap-2">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="..." fill="var(--p-primary-color)" />
-                        <path d="..." fill="var(--p-text-color)" />
-                    </svg>
-                    <span class="font-semibold text-2xl text-primary">Your Logo</span>
-                </span>
-                <span>
-                    <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
-                </span>
-            </div>
-            <div class="overflow-y-auto">
-                <ul class="list-none p-4 m-0">
-                    <li>
-                        <div
-                            v-ripple
-                            v-styleclass="{
-                                selector: '@next',
-                                enterFromClass: 'hidden',
-                                enterActiveClass: 'animate-slidedown',
-                                leaveToClass: 'hidden',
-                                leaveActiveClass: 'animate-slideup'
-                            }"
-                            class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
-                        >
-                            <span class="font-medium">FAVORITES</span>
-                            <i class="pi pi-chevron-down"></i>
-                        </div>
-                        <ul class="list-none p-0 m-0 overflow-hidden">
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-home mr-2"></i>
-                                    <span class="font-medium">Dashboard</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-bookmark mr-2"></i>
-                                    <span class="font-medium">Bookmarks</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    v-ripple
-                                    v-styleclass="{
-                                        selector: '@next',
-                                        enterFromClass: 'hidden',
-                                        enterActiveClass: 'animate-slidedown',
-                                        leaveToClass: 'hidden',
-                                        leaveActiveClass: 'animate-slideup'
-                                    }"
-                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
-                                >
-                                    <i class="pi pi-chart-line mr-2"></i>
-                                    <span class="font-medium">Reports</span>
-                                    <i class="pi pi-chevron-down ml-auto"></i>
-                                </a>
-                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
-                                    <li>
-                                        <a
-                                            v-ripple
-                                            v-styleclass="{
-                                                selector: '@next',
-                                                enterFromClass: 'hidden',
-                                                enterActiveClass: 'animate-slidedown',
-                                                leaveToClass: 'hidden',
-                                                leaveActiveClass: 'animate-slideup'
-                                            }"
-                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
-                                        >
-                                            <i class="pi pi-chart-line mr-2"></i>
-                                            <span class="font-medium">Revenue</span>
-                                            <i class="pi pi-chevron-down ml-auto"></i>
-                                        </a>
-                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
-                                            <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                    <i class="pi pi-table mr-2"></i>
-                                                    <span class="font-medium">View</span>
-                                                </a>
-                                            </li>
-                                            <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                    <i class="pi pi-search mr-2"></i>
-                                                    <span class="font-medium">Search</span>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-chart-line mr-2"></i>
-                                            <span class="font-medium">Expenses</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-users mr-2"></i>
-                                    <span class="font-medium">Team</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-comments mr-2"></i>
-                                    <span class="font-medium">Messages</span>
-                                    <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-calendar mr-2"></i>
-                                    <span class="font-medium">Calendar</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-cog mr-2"></i>
-                                    <span class="font-medium">Settings</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-                <ul class="list-none p-4 m-0">
-                    <li>
-                        <div
-                            v-ripple
-                            v-styleclass="{
-                                selector: '@next',
-                                enterFromClass: 'hidden',
-                                enterActiveClass: 'animate-slidedown',
-                                leaveToClass: 'hidden',
-                                leaveActiveClass: 'animate-slideup'
-                            }"
-                            class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
-                        >
-                            <span class="font-medium">APPLICATION</span>
-                            <i class="pi pi-chevron-down"></i>
-                        </div>
-                        <ul class="list-none p-0 m-0 overflow-hidden">
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-folder mr-2"></i>
-                                    <span class="font-medium">Projects</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-chart-bar mr-2"></i>
-                                    <span class="font-medium">Performance</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                    <i class="pi pi-cog mr-2"></i>
-                                    <span class="font-medium">Settings</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-            </div>
-            <div class="mt-auto">
-                <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
-                <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                    <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold">Amy Elsner</span>
-                </a>
-            </div>
-        </div>
-    </template>
-</Drawer>
-<Button icon="pi pi-bars" @click="visible = true" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible">
-            <template #container="{ closeCallback }">
-                <div class="flex flex-col h-full">
-                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
-                        <span class="inline-flex items-center gap-2">
-                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path
-                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                                    fill="var(--p-primary-color)"
-                                />
-                                <path
-                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                                    fill="var(--p-text-color)"
-                                />
-                            </svg>
-                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
-                        </span>
-                        <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
-                        </span>
-                    </div>
-                    <div class="overflow-y-auto">
-                        <ul class="list-none p-4 m-0">
-                            <li>
-                                <div
-                                    v-ripple
-                                    v-styleclass="{
-                                        selector: '@next',
-                                        enterFromClass: 'hidden',
-                                        enterActiveClass: 'animate-slidedown',
-                                        leaveToClass: 'hidden',
-                                        leaveActiveClass: 'animate-slideup'
-                                    }"
-                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
-                                >
-                                    <span class="font-medium">FAVORITES</span>
-                                    <i class="pi pi-chevron-down"></i>
-                                </div>
-                                <ul class="list-none p-0 m-0 overflow-hidden">
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-home mr-2"></i>
-                                            <span class="font-medium">Dashboard</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-bookmark mr-2"></i>
-                                            <span class="font-medium">Bookmarks</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            v-ripple
-                                            v-styleclass="{
-                                                selector: '@next',
-                                                enterFromClass: 'hidden',
-                                                enterActiveClass: 'animate-slidedown',
-                                                leaveToClass: 'hidden',
-                                                leaveActiveClass: 'animate-slideup'
-                                            }"
-                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
-                                        >
-                                            <i class="pi pi-chart-line mr-2"></i>
-                                            <span class="font-medium">Reports</span>
-                                            <i class="pi pi-chevron-down ml-auto"></i>
-                                        </a>
-                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
-                                            <li>
-                                                <a
-                                                    v-ripple
-                                                    v-styleclass="{
-                                                        selector: '@next',
-                                                        enterFromClass: 'hidden',
-                                                        enterActiveClass: 'animate-slidedown',
-                                                        leaveToClass: 'hidden',
-                                                        leaveActiveClass: 'animate-slideup'
-                                                    }"
-                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
-                                                >
-                                                    <i class="pi pi-chart-line mr-2"></i>
-                                                    <span class="font-medium">Revenue</span>
-                                                    <i class="pi pi-chevron-down ml-auto"></i>
-                                                </a>
-                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
-                                                    <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                            <i class="pi pi-table mr-2"></i>
-                                                            <span class="font-medium">View</span>
-                                                        </a>
-                                                    </li>
-                                                    <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                            <i class="pi pi-search mr-2"></i>
-                                                            <span class="font-medium">Search</span>
-                                                        </a>
-                                                    </li>
-                                                </ul>
-                                            </li>
-                                            <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                    <i class="pi pi-chart-line mr-2"></i>
-                                                    <span class="font-medium">Expenses</span>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-users mr-2"></i>
-                                            <span class="font-medium">Team</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-comments mr-2"></i>
-                                            <span class="font-medium">Messages</span>
-                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-calendar mr-2"></i>
-                                            <span class="font-medium">Calendar</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-cog mr-2"></i>
-                                            <span class="font-medium">Settings</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                        <ul class="list-none p-4 m-0">
-                            <li>
-                                <div
-                                    v-ripple
-                                    v-styleclass="{
-                                        selector: '@next',
-                                        enterFromClass: 'hidden',
-                                        enterActiveClass: 'animate-slidedown',
-                                        leaveToClass: 'hidden',
-                                        leaveActiveClass: 'animate-slideup'
-                                    }"
-                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
-                                >
-                                    <span class="font-medium">APPLICATION</span>
-                                    <i class="pi pi-chevron-down"></i>
-                                </div>
-                                <ul class="list-none p-0 m-0 overflow-hidden">
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-folder mr-2"></i>
-                                            <span class="font-medium">Projects</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-chart-bar mr-2"></i>
-                                            <span class="font-medium">Performance</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-cog mr-2"></i>
-                                            <span class="font-medium">Settings</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="mt-auto">
-                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
-                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                            <span class="font-bold">Amy Elsner</span>
-                        </a>
-                    </div>
-                </div>
-            </template>
-        </Drawer>
-        <Button icon="pi pi-bars" @click="visible = true" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible">
-            <template #container="{ closeCallback }">
-                <div class="flex flex-col h-full">
-                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
-                        <span class="inline-flex items-center gap-2">
-                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path
-                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                                    fill="var(--p-primary-color)"
-                                />
-                                <path
-                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                                    fill="var(--p-text-color)"
-                                />
-                            </svg>
-                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
-                        </span>
-                        <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
-                        </span>
-                    </div>
-                    <div class="overflow-y-auto">
-                        <ul class="list-none p-4 m-0">
-                            <li>
-                                <div
-                                    v-ripple
-                                    v-styleclass="{
-                                        selector: '@next',
-                                        enterFromClass: 'hidden',
-                                        enterActiveClass: 'animate-slidedown',
-                                        leaveToClass: 'hidden',
-                                        leaveActiveClass: 'animate-slideup'
-                                    }"
-                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
-                                >
-                                    <span class="font-medium">FAVORITES</span>
-                                    <i class="pi pi-chevron-down"></i>
-                                </div>
-                                <ul class="list-none p-0 m-0 overflow-hidden">
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-home mr-2"></i>
-                                            <span class="font-medium">Dashboard</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-bookmark mr-2"></i>
-                                            <span class="font-medium">Bookmarks</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            v-ripple
-                                            v-styleclass="{
-                                                selector: '@next',
-                                                enterFromClass: 'hidden',
-                                                enterActiveClass: 'animate-slidedown',
-                                                leaveToClass: 'hidden',
-                                                leaveActiveClass: 'animate-slideup'
-                                            }"
-                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
-                                        >
-                                            <i class="pi pi-chart-line mr-2"></i>
-                                            <span class="font-medium">Reports</span>
-                                            <i class="pi pi-chevron-down ml-auto"></i>
-                                        </a>
-                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
-                                            <li>
-                                                <a
-                                                    v-ripple
-                                                    v-styleclass="{
-                                                        selector: '@next',
-                                                        enterFromClass: 'hidden',
-                                                        enterActiveClass: 'animate-slidedown',
-                                                        leaveToClass: 'hidden',
-                                                        leaveActiveClass: 'animate-slideup'
-                                                    }"
-                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
-                                                >
-                                                    <i class="pi pi-chart-line mr-2"></i>
-                                                    <span class="font-medium">Revenue</span>
-                                                    <i class="pi pi-chevron-down ml-auto"></i>
-                                                </a>
-                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
-                                                    <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                            <i class="pi pi-table mr-2"></i>
-                                                            <span class="font-medium">View</span>
-                                                        </a>
-                                                    </li>
-                                                    <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                            <i class="pi pi-search mr-2"></i>
-                                                            <span class="font-medium">Search</span>
-                                                        </a>
-                                                    </li>
-                                                </ul>
-                                            </li>
-                                            <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                                    <i class="pi pi-chart-line mr-2"></i>
-                                                    <span class="font-medium">Expenses</span>
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-users mr-2"></i>
-                                            <span class="font-medium">Team</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-comments mr-2"></i>
-                                            <span class="font-medium">Messages</span>
-                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-calendar mr-2"></i>
-                                            <span class="font-medium">Calendar</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-cog mr-2"></i>
-                                            <span class="font-medium">Settings</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                        <ul class="list-none p-4 m-0">
-                            <li>
-                                <div
-                                    v-ripple
-                                    v-styleclass="{
-                                        selector: '@next',
-                                        enterFromClass: 'hidden',
-                                        enterActiveClass: 'animate-slidedown',
-                                        leaveToClass: 'hidden',
-                                        leaveActiveClass: 'animate-slideup'
-                                    }"
-                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
-                                >
-                                    <span class="font-medium">APPLICATION</span>
-                                    <i class="pi pi-chevron-down"></i>
-                                </div>
-                                <ul class="list-none p-0 m-0 overflow-hidden">
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-folder mr-2"></i>
-                                            <span class="font-medium">Projects</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-chart-bar mr-2"></i>
-                                            <span class="font-medium">Performance</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                                            <i class="pi pi-cog mr-2"></i>
-                                            <span class="font-medium">Settings</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="mt-auto">
-                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
-                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
-                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                            <span class="font-bold">Amy Elsner</span>
-                        </a>
-                    </div>
-                </div>
-            </template>
-        </Drawer>
-        <Button icon="pi pi-bars" @click="visible = true" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/drawer/ImportDoc.vue b/apps/labs/doc/drawer/ImportDoc.vue
deleted file mode 100644
index 2ac7335ec..000000000
--- a/apps/labs/doc/drawer/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Drawer from 'primevue/drawer';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/drawer/PositionDoc.vue b/apps/labs/doc/drawer/PositionDoc.vue
deleted file mode 100644
index 2c5897661..000000000
--- a/apps/labs/doc/drawer/PositionDoc.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Drawer location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as valid values.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex gap-2 justify-center">
-            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
-            <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
-            <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
-            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
-        </div>
-
-        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visibleLeft: false,
-            visibleRight: false,
-            visibleTop: false,
-            visibleBottom: false,
-            code: {
-                basic: `
-<div class="flex gap-2 justify-center">
-    <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
-    <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
-    <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
-    <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
-</div>
-
-<Drawer v-model:visible="visibleLeft" header="Left Drawer">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</Drawer>
-
-<Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</Drawer>
-
-<Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</Drawer>
-
-<Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</Drawer>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex gap-2 justify-center">
-            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
-            <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
-            <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
-            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
-        </div>
-
-        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visibleLeft: false,
-            visibleRight: false,
-            visibleTop: false,
-            visibleBottom: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex gap-2 justify-center">
-            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
-            <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
-            <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
-            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
-        </div>
-
-        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-
-        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visibleLeft = ref(false);
-const visibleRight = ref(false);
-const visibleTop = ref(false);
-const visibleBottom = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/drawer/SizeDoc.vue b/apps/labs/doc/drawer/SizeDoc.vue
deleted file mode 100644
index 1053071ea..000000000
--- a/apps/labs/doc/drawer/SizeDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties, this responsive example utilizes Tailwind.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<div class="card flex justify-center">
-    <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </Drawer>
-    <Button icon="pi pi-arrow-right" @click="visible = true" />
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        </Drawer>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/drawer/TemplateDoc.vue b/apps/labs/doc/drawer/TemplateDoc.vue
deleted file mode 100644
index e6ad80d30..000000000
--- a/apps/labs/doc/drawer/TemplateDoc.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content at the header and footer sections is displayed with templating.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible">
-            <template #header>
-                <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold">Amy Elsner</span>
-                </div>
-            </template>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-            <template #footer>
-                <div class="flex items-center gap-2">
-                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
-                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
-                </div>
-            </template>
-        </Drawer>
-        <Button icon="pi pi-plus" @click="visible = true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Drawer v-model:visible="visible">
-    <template #header>
-        <div class="flex items-center gap-2">
-            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-            <span class="font-bold">Amy Elsner</span>
-        </div>
-    </template>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    <template #footer>
-        <div class="flex items-center gap-2">
-            <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
-            <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
-        </div>
-    </template>
-</Drawer>
-<Button icon="pi pi-plus" @click="visible = true" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible">
-            <template #header>
-                <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold">Amy Elsner</span>
-                </div>
-            </template>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-            <template #footer>
-                <div class="flex items-center gap-2">
-                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
-                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
-                </div>
-            </template>
-        </Drawer>
-        <Button icon="pi pi-plus" @click="visible = true" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Drawer v-model:visible="visible">
-            <template #header>
-                <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold">Amy Elsner</span>
-                </div>
-            </template>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-            <template #footer>
-                <div class="flex items-center gap-2">
-                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
-                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
-                </div>
-            </template>
-        </Drawer>
-        <Button icon="pi pi-plus" @click="visible = true" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/AccessibilityDoc.vue b/apps/labs/doc/dynamicdialog/AccessibilityDoc.vue
deleted file mode 100644
index 9d89f057b..000000000
--- a/apps/labs/doc/dynamicdialog/AccessibilityDoc.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <p>Visit accessibility section of <NuxtLink to="/dialog/#accessibility">dialog</NuxtLink> component for more information.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/dynamicdialog/CloseDialogDoc.vue b/apps/labs/doc/dynamicdialog/CloseDialogDoc.vue
deleted file mode 100644
index 372e5dec2..000000000
--- a/apps/labs/doc/dynamicdialog/CloseDialogDoc.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>close</i> function is available through a <i>dialogRef</i> that is injected to the component loaded by the dialog.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import { inject } from "vue";
-
-const dialogRef = inject('dialogRef');
-
-const closeDialog = () => {
-    dialogRef.value.close();
-}
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/CustomizationDoc.vue b/apps/labs/doc/dynamicdialog/CustomizationDoc.vue
deleted file mode 100644
index 47a159ad5..000000000
--- a/apps/labs/doc/dynamicdialog/CustomizationDoc.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information about the available props.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ProductListDemo from './ProductListDemo';
-import { useDialog } from 'primevue/usedialog';
-
-const dialog = useDialog();
-
-const showProducts = () => {
-    dialog.open(ProductListDemo, {
-        props: {
-            header: 'Product List',
-            style: {
-                width: '50vw',
-            },
-            breakpoints:{
-                '960px': '75vw',
-                '640px': '90vw'
-            },
-            modal: true
-        }
-    });
-}
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/DialogServiceDoc.vue b/apps/labs/doc/dynamicdialog/DialogServiceDoc.vue
deleted file mode 100644
index 94c5564ac..000000000
--- a/apps/labs/doc/dynamicdialog/DialogServiceDoc.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.</p>
-        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
-        <p>A dynamic dialog is controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-        <p>The service is available with the <i>useDialog</i> function for Composition API or using the <i>$dialog</i> property of the application for Options API.</p>
-        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<DynamicDialog />
-`
-            },
-            code2: {
-                basic: `
-import {createApp} from 'vue';
-import DialogService from 'primevue/dialogservice';
-
-const app = createApp(App);
-app.use(DialogService);
-`
-            },
-            code3: {
-                basic: `
-/* Composition API */
-import { useDialog } from 'primevue/usedialog';
-
-const dialog = useDialog();
-
-/* Options API */
-const dialog = this.$dialog;
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/EventsDoc.vue b/apps/labs/doc/dynamicdialog/EventsDoc.vue
deleted file mode 100644
index f5715b91e..000000000
--- a/apps/labs/doc/dynamicdialog/EventsDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>emits</i> object defines callbacks to handle events emitted by the component within the Dialog.</p>
-
-        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
-        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-import ProductListDemo from './ProductListDemo';
-import { useDialog } from 'primevue/usedialog';
-
-const dialog = useDialog();
-
-const showProducts = () => {
-    dialog.open(ProductListDemo, {
-        onCancel: (e) => {
-            console.log(e);  // {user: 'primetime'}
-        }
-    });
-}
-`
-            },
-            code2: {
-                basic: `
-<script setup>
-/* ProductListDemo.vue */
-const emit = defineEmits(['cancel', 'save'])
-
-function buttonClick() {
-    emit('cancel', {user: 'primetime'});
-}
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/ExampleDoc.vue b/apps/labs/doc/dynamicdialog/ExampleDoc.vue
deleted file mode 100644
index 306b8cc5a..000000000
--- a/apps/labs/doc/dynamicdialog/ExampleDoc.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A sample implementation to demonstrate loading components asynchronously, nested content and passing data.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-
-        <DynamicDialog />
-    </div>
-    <DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" />
-</template>
-
-<script>
-import { markRaw } from 'vue';
-import FooterDemo from './demo/FooterDemo';
-import ProductListDemo from './demo/ProductListDemo';
-
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-
-<DynamicDialog />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-        <Toast />
-        <DynamicDialog />
-    </div>
-</template>
-
-<script>
-import Button from 'primevue/button';
-import { markRaw, defineAsyncComponent } from 'vue';
-const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
-const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
-
-export default {
-    methods: {
-        showProducts() {
-            const dialogRef = this.$dialog.open(ProductListDemo, {
-                props: {
-                    header: 'Product List',
-                    style: {
-                        width: '50vw'
-                    },
-                    breakpoints: {
-                        '960px': '75vw',
-                        '640px': '90vw'
-                    },
-                    modal: true
-                },
-                templates: {
-                    footer: markRaw(FooterDemo)
-                },
-                onClose: (options) => {
-                    const data = options.data;
-
-                    if (data) {
-                        const buttonType = data.buttonType;
-                        const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
-
-                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
-                    }
-                }
-            });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-        <Toast />
-        <DynamicDialog />
-    </div>
-</template>
-
-<script setup>
-import { markRaw, defineAsyncComponent } from 'vue';
-import { useDialog } from 'primevue/usedialog';
-import { useToast } from 'primevue/usetoast';
-import Button from 'primevue/button';
-const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
-const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
-
-const dialog = useDialog();
-const toast = useToast();
-
-const showProducts = () => {
-    const dialogRef = dialog.open(ProductListDemo, {
-        props: {
-            header: 'Product List',
-            style: {
-                width: '50vw',
-            },
-            breakpoints:{
-                '960px': '75vw',
-                '640px': '90vw'
-            },
-            modal: true
-        },
-        templates: {
-            footer: markRaw(FooterDemo)
-        },
-        onClose: (options) => {
-            const data = options.data;
-            if (data) {
-                const buttonType = data.buttonType;
-                const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
-
-                toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
-            }
-        }
-    });
-}
-<\/script>
-`,
-                data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            },
-            extFiles: {
-                options: {
-                    'src/components/ProductListDemo.vue': {
-                        content: `
-<template>
-	<div>
-        <div class="flex justify-end mt-1 mb-4">
-            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
-        </div>
-        <DataTable :value="products">
-			<Column field="code" header="Code"></Column>
-			<Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
-                </template>
-            </Column>
-			<Column field="category" header="Category"></Column>
-			<Column field="quantity" header="Quantity"></Column>
-            <Column style="width:5rem">
-                <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
-                </template>
-            </Column>
-		</DataTable>
-
-	</div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-import InfoDemo from './InfoDemo.vue';
-
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
-    },
-    methods: {
-        selectProduct(data) {
-            this.dialogRef.close(data);
-        },
-        showInfo() {
-            this.$dialog.open(InfoDemo, {
-                props: {
-                    header: 'Information',
-                    modal: true,
-                    dismissableMask: true
-                },
-                data: {
-                    totalProducts: this.products ? this.products.length : 0
-                }
-            });
-        }
-    }
-}
-<\/script>
-`
-                    },
-                    'src/components/InfoDemo.vue': {
-                        content: `
-<template>
-    <div>
-        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
-        <div class="flex justify-end">
-            <Button type="button" label="Close" @click="closeDialog"></Button>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            totalProducts: 0
-        }
-    },
-    mounted() {
-        this.totalProducts = this.dialogRef.data.totalProducts;
-    },
-    methods: {
-        closeDialog() {
-            this.dialogRef.close();
-        }
-    }
-}
-<\/script>
-                            `
-                    },
-                    'src/components/FooterDemo.vue': {
-                        content: `
-<template>
-    <Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
-</template>
-
-<script>
-export default {
-    inject: ['dialogRef'],
-    methods: {
-        closeDialog(e) {
-            this.dialogRef.close(e);
-        }
-    }
-};
-<\/script>
-`
-                    }
-                },
-                composition: {
-                    'src/components/ProductListDemo.vue': {
-                        content: `
-<template>
-	<div>
-        <div class="flex justify-end mt-1 mb-4">
-            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
-        </div>
-        <DataTable :value="products">
-			<Column field="code" header="Code"></Column>
-			<Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
-                </template>
-            </Column>
-			<Column field="category" header="Category"></Column>
-			<Column field="quantity" header="Quantity"></Column>
-            <Column style="width:5rem">
-                <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
-                </template>
-            </Column>
-		</DataTable>
-
-	</div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-import { useDialog } from "primevue/usedialog";
-import { ProductService } from "@/service/ProductService";
-import InfoDemo from "./InfoDemo.vue";
-
-const dialogRef = inject("dialogRef");
-const dialog = useDialog();
-const products = ref(null);
-
-onMounted(() => {
-    ProductService
-        .getProductsSmall()
-        .then((data) => (products.value = data.slice(0, 5)));
-});
-
-const selectProduct = (data) => {
-    dialogRef.value.close(data);
-};
-
-const showInfo = () => {
-    dialog.open(InfoDemo, {
-        props: {
-            header: "Information",
-            modal: true,
-            dismissableMask: true,
-        },
-        data: {
-            totalProducts: products.value ? products.value.length : 0,
-        }
-    });
-};
-<\/script>
-`
-                    },
-                    'src/components/InfoDemo.vue': {
-                        content: `
-<template>
-    <div>
-        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
-        <div class="flex justify-end">
-            <Button type="button" label="Close" @click="closeDialog"></Button>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-
-const totalProducts = ref(0);
-const dialogRef = inject("dialogRef");
-
-onMounted(() => {
-    totalProducts.value = dialogRef.value.data.totalProducts;
-});
-
-const closeDialog = () => {
-    dialogRef.value.close();
-};
-<\/script>
-                            `
-                    },
-                    'src/components/FooterDemo.vue': {
-                        content: `
-<template>
-    <Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
-</template>
-
-<script setup>
-import { inject } from "vue";
-
-const dialogRef = inject("dialogRef");
-
-const closeDialog = (e) => {
-    dialogRef.value.close(e);
-};
-<\/script>
-`
-                    }
-                }
-            }
-        };
-    },
-    methods: {
-        showProducts() {
-            const dialogRef = this.$dialog.open(ProductListDemo, {
-                props: {
-                    header: 'Product List',
-                    style: {
-                        width: '50vw'
-                    },
-                    breakpoints: {
-                        '960px': '75vw',
-                        '640px': '90vw'
-                    },
-                    modal: true
-                },
-                templates: {
-                    footer: markRaw(FooterDemo)
-                },
-                onClose: (options) => {
-                    const data = options.data;
-
-                    if (data) {
-                        const buttonType = data.buttonType;
-                        const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };
-
-                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
-                    }
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/ImportDoc.vue b/apps/labs/doc/dynamicdialog/ImportDoc.vue
deleted file mode 100644
index e7e2d515d..000000000
--- a/apps/labs/doc/dynamicdialog/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import DynamicDialog from 'primevue/dynamicdialog';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/OpenDialogDoc.vue b/apps/labs/doc/dynamicdialog/OpenDialogDoc.vue
deleted file mode 100644
index 503078c33..000000000
--- a/apps/labs/doc/dynamicdialog/OpenDialogDoc.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
-        <p>The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.</p>
-        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-import ProductListDemo from './ProductListDemo';
-import { useDialog } from 'primevue/usedialog';
-
-const dialog = useDialog();
-
-const showProducts = () => {
-    dialog.open(ProductListDemo, {});
-}
-`
-            },
-            code2: {
-                basic: `
-import { useDialog } from 'primevue/usedialog';
-
-const dialog = useDialog();
-
-const dynamicComponent = defineAsyncComponent(() => import('./ProductListDemo.vue'));
-
-const showProducts = () => {
-    dialog.open(dynamicComponent, {});
-}
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/PassingDataDoc.vue b/apps/labs/doc/dynamicdialog/PassingDataDoc.vue
deleted file mode 100644
index 642c7e5b1..000000000
--- a/apps/labs/doc/dynamicdialog/PassingDataDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Use the <i>data</i> property to pass parameters when opening a Dialog, the internal component can later access this data using <i>dialogRef</i>.</p>
-
-        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-
-        <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback.</p>
-        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
-        <DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-const dialog = useDialog();
-
-const showProducts = () => {
-    dialog.open(ProductListDemo, {
-        data: {
-            user: 'primetime'
-        }
-    });
-}
-`
-            },
-            code2: {
-                basic: `
-import { inject, onMounted } from "vue";
-
-const dialogRef = inject('dialogRef');
-
-onMounted(() => {
-    const params = dialogRef.value.data; // {user: 'primetime'}
-})
-`
-            },
-            code3: {
-                basic: `
-const dialog = useDialog();
-
-const showProducts = () => {
-    dialog.open(ProductListDemo, {
-        onClose: (opt) => {
-            const callbackParams = opt.data; // {selectedId: 12}
-        }
-    });
-}
-`
-            },
-            code4: {
-                basic: `
-import { inject } from "vue";
-
-const dialogRef = inject('dialogRef');
-
-const closeDialog = () => {
-    dialogRef.value.close({
-        selectedId: 12
-    });
-}
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/demo/FooterDemo.vue b/apps/labs/doc/dynamicdialog/demo/FooterDemo.vue
deleted file mode 100644
index ed59847f2..000000000
--- a/apps/labs/doc/dynamicdialog/demo/FooterDemo.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-    <Button type="button" label="Cancel" icon="pi pi-times" @click="closeDialog({ buttonType: 'Cancel' })" autofocus></Button>
-</template>
-
-<script>
-export default {
-    inject: ['dialogRef'],
-    methods: {
-        closeDialog(e) {
-            this.dialogRef.close(e);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/demo/InfoDemo.vue b/apps/labs/doc/dynamicdialog/demo/InfoDemo.vue
deleted file mode 100644
index 53a6b2968..000000000
--- a/apps/labs/doc/dynamicdialog/demo/InfoDemo.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <div>
-        <p>
-            There are <strong>{{ totalProducts }}</strong> products in total in this list.
-        </p>
-        <div class="flex justify-end">
-            <Button autofocus type="button" label="Close" @click="closeDialog"></Button>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            totalProducts: 0
-        };
-    },
-    mounted() {
-        this.totalProducts = this.dialogRef.data.totalProducts;
-    },
-    methods: {
-        closeDialog() {
-            this.dialogRef.close();
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/dynamicdialog/demo/ProductListDemo.vue b/apps/labs/doc/dynamicdialog/demo/ProductListDemo.vue
deleted file mode 100644
index ac4dfc575..000000000
--- a/apps/labs/doc/dynamicdialog/demo/ProductListDemo.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <div>
-        <div class="flex justify-end mt-1 mb-4">
-            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
-        </div>
-        <DataTable :value="products">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
-                </template>
-            </Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-            <Column style="width: 5rem">
-                <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-import InfoDemo from './InfoDemo.vue';
-
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 5)));
-    },
-    methods: {
-        selectProduct(data) {
-            this.dialogRef.close(data);
-        },
-        showInfo() {
-            this.$dialog.open(InfoDemo, {
-                props: {
-                    header: 'Information',
-                    modal: true,
-                    dismissableMask: true
-                },
-                data: {
-                    totalProducts: this.products ? this.products.length : 0
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/fieldset/AccessibilityDoc.vue b/apps/labs/doc/fieldset/AccessibilityDoc.vue
deleted file mode 100644
index 91dd1c2ee..000000000
--- a/apps/labs/doc/fieldset/AccessibilityDoc.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a button element is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define the id of the content section
-            along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the
-            <i>toggleButtonProps</i> property.
-        </p>
-        <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
-
-        <h6>Content Toggle Button Keyboard Support</h6>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Toggles the visibility of the content.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the visibility of the content.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/fieldset/BasicDoc.vue b/apps/labs/doc/fieldset/BasicDoc.vue
deleted file mode 100644
index 3957123e3..000000000
--- a/apps/labs/doc/fieldset/BasicDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A simple Fieldset is created with a <i>legend</i> property along with the content as children.</p>
-    </DocSectionText>
-    <div class="card">
-        <Fieldset legend="Header">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Fieldset legend="Header">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Fieldset>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Fieldset legend="Header">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Fieldset legend="Header">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/fieldset/ImportDoc.vue b/apps/labs/doc/fieldset/ImportDoc.vue
deleted file mode 100644
index a375a6171..000000000
--- a/apps/labs/doc/fieldset/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Fieldset from 'primevue/fieldset';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/fieldset/TemplateDoc.vue b/apps/labs/doc/fieldset/TemplateDoc.vue
deleted file mode 100644
index 3edffa469..000000000
--- a/apps/labs/doc/fieldset/TemplateDoc.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Legend section can be customized with custom content using templating.</p>
-    </DocSectionText>
-    <div class="card">
-        <Fieldset>
-            <template #legend>
-                <div class="flex items-center pl-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold p-2">Amy Elsner</span>
-                </div>
-            </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Fieldset>
-    <template #legend>
-        <div class="flex items-center pl-2">
-            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-            <span class="font-bold p-2">Amy Elsner</span>
-        </div>
-    </template>
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Fieldset>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Fieldset>
-            <template #legend>
-                <div class="flex items-center pl-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold p-2">Amy Elsner</span>
-                </div>
-            </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Fieldset>
-            <template #legend>
-                <div class="flex items-center pl-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold p-2">Amy Elsner</span>
-                </div>
-            </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/fieldset/ToggleableDoc.vue b/apps/labs/doc/fieldset/ToggleableDoc.vue
deleted file mode 100644
index 286a1c460..000000000
--- a/apps/labs/doc/fieldset/ToggleableDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Content of the fieldset can be expanded and collapsed when <i>toggleable</i> option is enabled.</p>
-    </DocSectionText>
-    <div class="card">
-        <Fieldset legend="Header" :toggleable="true">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Fieldset legend="Header" :toggleable="true">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Fieldset>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Fieldset legend="Header" :toggleable="true">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Fieldset legend="Header" :toggleable="true">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/fileupload/AccessibilityDoc.vue b/apps/labs/doc/fileupload/AccessibilityDoc.vue
deleted file mode 100644
index ea7335051..000000000
--- a/apps/labs/doc/fileupload/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>FileUpload uses a hidden native <i>input</i> element with <i>type="file"</i> for screen readers.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Interactive elements of the uploader are buttons, visit the <NuxtLink to="/button/#accessibility">Button</NuxtLink> accessibility section for more information.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/fileupload/AdvancedDoc.vue b/apps/labs/doc/fileupload/AdvancedDoc.vue
deleted file mode 100644
index 1b34d8389..000000000
--- a/apps/labs/doc/fileupload/AdvancedDoc.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
-    </DocSectionText>
-    <div class="card">
-        <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
-            <template #empty>
-                <span>Drag and drop files to here to upload.</span>
-            </template>
-        </FileUpload>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
-    <template #empty>
-        <span>Drag and drop files to here to upload.</span>
-    </template>
-</FileUpload>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast />
-        <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
-            <template #empty>
-                <span>Drag and drop files to here to upload.</span>
-            </template>
-        </FileUpload>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        onAdvancedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
-            <template #empty>
-                <span>Drag and drop files to here to upload.</span>
-            </template>
-        </FileUpload>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const onAdvancedUpload = () => {
-    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onAdvancedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/fileupload/AutoDoc.vue b/apps/labs/doc/fileupload/AutoDoc.vue
deleted file mode 100644
index a54ae28d5..000000000
--- a/apps/labs/doc/fileupload/AutoDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>auto</i> property is enabled, a file gets uploaded instantly after selection.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        onUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const onUpload = () => {
-    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/fileupload/BasicDoc.vue b/apps/labs/doc/fileupload/BasicDoc.vue
deleted file mode 100644
index 9f22baa3f..000000000
--- a/apps/labs/doc/fileupload/BasicDoc.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>FileUpload basic <i>mode</i> provides a simpler UI as an alternative to default advanced mode.</p>
-    </DocSectionText>
-    <div class="card flex flex-col gap-6 items-center justify-center">
-        <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
-        <Button label="Upload" @click="upload" severity="secondary" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
-<Button label="Upload" @click="upload" severity="secondary" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col gap-6 items-center justify-center">
-        <Toast />
-        <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
-        <Button label="Upload" @click="upload" severity="secondary" />
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        upload() {
-            this.$refs.fileupload.upload();
-        },
-        onUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col gap-6 items-center justify-center">
-        <Toast />
-        <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
-        <Button label="Upload" @click="upload" severity="secondary" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-const fileupload = ref();
-
-const upload = () => {
-    fileupload.value.upload();
-};
-
-const onUpload = () => {
-    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        upload() {
-            this.$refs.fileupload.upload();
-        },
-        onUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/fileupload/CustomUploadDoc.vue b/apps/labs/doc/fileupload/CustomUploadDoc.vue
deleted file mode 100644
index 001ff8025..000000000
--- a/apps/labs/doc/fileupload/CustomUploadDoc.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Uploading implementation can be overridden by enabling <i>customUpload</i> property. This sample, displays the image on the client side with a grayscale filter.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-6">
-        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
-        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            src: null,
-            code: {
-                basic: `
-<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
-<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-6">
-        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
-        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            src: null
-        }
-    },
-    methods: {
-        onFileSelect(event) {
-            const file = event.files[0];
-            const reader = new FileReader();
-
-            reader.onload = async (e) => {
-                this.src = e.target.result;
-            };
-
-            reader.readAsDataURL(file);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-6">
-        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
-        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const src = ref(null);
-
-function onFileSelect(event) {
-    const file = event.files[0];
-    const reader = new FileReader();
-
-    reader.onload = async (e) => {
-        src.value = e.target.result;
-    };
-
-    reader.readAsDataURL(file);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onFileSelect(event) {
-            const file = event.files[0];
-            const reader = new FileReader();
-
-            reader.onload = async (e) => {
-                this.src = e.target.result;
-            };
-
-            reader.readAsDataURL(file);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/fileupload/ImportDoc.vue b/apps/labs/doc/fileupload/ImportDoc.vue
deleted file mode 100644
index adf897abe..000000000
--- a/apps/labs/doc/fileupload/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import FileUpload from 'primevue/fileupload';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/fileupload/TemplateDoc.vue b/apps/labs/doc/fileupload/TemplateDoc.vue
deleted file mode 100644
index 4d7a4e9cb..000000000
--- a/apps/labs/doc/fileupload/TemplateDoc.vue
+++ /dev/null
@@ -1,408 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Uploader UI can be customized with templating.</p>
-    </DocSectionText>
-    <div class="card">
-        <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
-            <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
-                    <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
-                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
-                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
-                    </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
-                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
-                    </ProgressBar>
-                </div>
-            </template>
-            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
-                <div class="flex flex-col gap-8 pt-4">
-                    <Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length }" severity="error">
-                        {{ message }}
-                    </Message>
-
-                    <div v-if="files.length > 0">
-                        <h5>Pending</h5>
-                        <div class="flex flex-wrap gap-4">
-                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
-                                <div>
-                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                                </div>
-                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                                <div>{{ formatSize(file.size) }}</div>
-                                <Badge value="Pending" severity="warn" />
-                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div v-if="uploadedFiles.length > 0">
-                        <h5>Completed</h5>
-                        <div class="flex flex-wrap gap-4">
-                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
-                                <div>
-                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                                </div>
-                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                                <div>{{ formatSize(file.size) }}</div>
-                                <Badge value="Completed" class="mt-4" severity="success" />
-                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <template #empty>
-                <div class="flex items-center justify-center flex-col">
-                    <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
-                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
-                </div>
-            </template>
-        </FileUpload>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            files: [],
-            totalSize: 0,
-            totalSizePercent: 0,
-            code: {
-                basic: `
-<FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
-    <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-        <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
-            <div class="flex gap-2">
-                <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
-                <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
-                <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
-            </div>
-            <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
-                <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
-            </ProgressBar>
-        </div>
-    </template>
-    <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
-        <div class="flex flex-col gap-8 pt-4">
-            <Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length}" severity="error">
-                {{ message }}
-            </Message>
-
-            <div v-if="files.length > 0">
-                <h5>Pending</h5>
-                <div class="flex flex-wrap gap-4">
-                    <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
-                        <div>
-                            <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                        </div>
-                        <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                        <div>{{ formatSize(file.size) }}</div>
-                        <Badge value="Pending" severity="warn" />
-                        <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
-                    </div>
-                </div>
-            </div>
-
-            <div v-if="uploadedFiles.length > 0">
-                <h5>Completed</h5>
-                <div class="flex flex-wrap gap-4">
-                    <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
-                        <div>
-                            <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                        </div>
-                        <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                        <div>{{ formatSize(file.size) }}</div>
-                        <Badge value="Completed" class="mt-4" severity="success" />
-                        <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-    <template #empty>
-        <div class="flex items-center justify-center flex-col">
-            <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
-            <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
-        </div>
-    </template>
-</FileUpload>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast />
-        <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
-            <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
-                    <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
-                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
-                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
-                    </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
-                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
-                    </ProgressBar>
-                </div>
-            </template>
-            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
-                <div class="flex flex-col gap-8 pt-4">
-                    <Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length}" severity="error">
-                        {{ message }}
-                    </Message>
-
-                    <div v-if="files.length > 0">
-                        <h5>Pending</h5>
-                        <div class="flex flex-wrap gap-4">
-                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
-                                <div>
-                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                                </div>
-                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                                <div>{{ formatSize(file.size) }}</div>
-                                <Badge value="Pending" severity="warn" />
-                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div v-if="uploadedFiles.length > 0">
-                        <h5>Completed</h5>
-                        <div class="flex flex-wrap gap-4">
-                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
-                                <div>
-                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                                </div>
-                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                                <div>{{ formatSize(file.size) }}</div>
-                                <Badge value="Completed" class="mt-4" severity="success" />
-                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <template #empty>
-                <div class="flex items-center justify-center flex-col">
-                    <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
-                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
-                </div>
-            </template>
-        </FileUpload>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            files: [],
-            totalSize: 0,
-            totalSizePercent: 0,
-        };
-    },
-    methods: {
-        onRemoveTemplatingFile(file, removeFileCallback, index) {
-            removeFileCallback(index);
-            this.totalSize -= parseInt(this.formatSize(file.size));
-            this.totalSizePercent = this.totalSize / 10;
-        },
-        onClearTemplatingUpload(clear) {
-            clear();
-            this.totalSize = 0;
-            this.totalSizePercent = 0;
-        },
-        onSelectedFiles(event) {
-            this.files = event.files;
-            this.files.forEach((file) => {
-                this.totalSize += parseInt(this.formatSize(file.size));
-            });
-        },
-        uploadEvent(callback) {
-            this.totalSizePercent = this.totalSize / 10;
-            callback();
-        },
-        onTemplatedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        },
-        formatSize(bytes) {
-            const k = 1024;
-            const dm = 3;
-            const sizes = this.$primevue.config.locale.fileSizeTypes;
-
-            if (bytes === 0) {
-                return \`0 \${sizes[0]}\`;
-            }
-
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-
-            return \`\${formattedSize} \${sizes[i]}\`;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
-            <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
-                    <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
-                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
-                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
-                    </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
-                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
-                    </ProgressBar>
-                </div>
-            </template>
-            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
-                <div class="flex flex-col gap-8 pt-4">
-                    <div v-if="files.length > 0">
-                        <h5>Pending</h5>
-                        <div class="flex flex-wrap gap-4">
-                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
-                                <div>
-                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                                </div>
-                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                                <div>{{ formatSize(file.size) }}</div>
-                                <Badge value="Pending" severity="warn" />
-                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div v-if="uploadedFiles.length > 0">
-                        <h5>Completed</h5>
-                        <div class="flex flex-wrap gap-4">
-                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
-                                <div>
-                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
-                                </div>
-                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
-                                <div>{{ formatSize(file.size) }}</div>
-                                <Badge value="Completed" class="mt-4" severity="success" />
-                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <template #empty>
-                <div class="flex items-center justify-center flex-col">
-                    <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
-                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
-                </div>
-            </template>
-        </FileUpload>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { usePrimeVue } from 'primevue/config';
-import { useToast } from "primevue/usetoast";
-
-const $primevue = usePrimeVue();
-const toast = useToast();
-
-const totalSize = ref(0);
-const totalSizePercent = ref(0);
-const files = ref([]);
-
-const onRemoveTemplatingFile = (file, removeFileCallback, index) => {
-    removeFileCallback(index);
-    totalSize.value -= parseInt(formatSize(file.size));
-    totalSizePercent.value = totalSize.value / 10;
-};
-
-const onClearTemplatingUpload = (clear) => {
-    clear();
-    totalSize.value = 0;
-    totalSizePercent.value = 0;
-};
-
-const onSelectedFiles = (event) => {
-    files.value = event.files;
-    files.value.forEach((file) => {
-        totalSize.value += parseInt(formatSize(file.size));
-    });
-};
-
-const uploadEvent = (callback) => {
-    totalSizePercent.value = totalSize.value / 10;
-    callback();
-};
-
-const onTemplatedUpload = () => {
-    toast.add({ severity: "info", summary: "Success", detail: "File Uploaded", life: 3000 });
-};
-
-const formatSize = (bytes) => {
-    const k = 1024;
-    const dm = 3;
-    const sizes = $primevue.config.locale.fileSizeTypes;
-
-    if (bytes === 0) {
-        return \`0 \${sizes[0]}\`;
-    }
-
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-
-    return \`\${formattedSize} \${sizes[i]}\`;
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onRemoveTemplatingFile(file, removeFileCallback, index) {
-            removeFileCallback(index);
-            this.totalSize -= parseInt(this.formatSize(file.size));
-            this.totalSizePercent = this.totalSize / 10;
-        },
-        onClearTemplatingUpload(clear) {
-            clear();
-            this.totalSize = 0;
-            this.totalSizePercent = 0;
-        },
-        onSelectedFiles(event) {
-            this.files = event.files;
-            this.files.forEach((file) => {
-                this.totalSize += parseInt(this.formatSize(file.size));
-            });
-            this.totalSizePercent = this.totalSize / 10;
-        },
-        uploadEvent(callback) {
-            callback();
-        },
-        onTemplatedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        },
-        formatSize(bytes) {
-            const k = 1024;
-            const dm = 3;
-            const sizes = this.$primevue.config.locale.fileSizeTypes;
-
-            if (bytes === 0) {
-                return `0 ${sizes[0]}`;
-            }
-
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-
-            return `${formattedSize} ${sizes[i]}`;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/floatlabel/AccessibilityDoc.vue b/apps/labs/doc/floatlabel/AccessibilityDoc.vue
deleted file mode 100644
index 6f5b4e1eb..000000000
--- a/apps/labs/doc/floatlabel/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>FloatLabel does not require any roles and attributes.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/floatlabel/BasicDoc.vue b/apps/labs/doc/floatlabel/BasicDoc.vue
deleted file mode 100644
index 6ebf82616..000000000
--- a/apps/labs/doc/floatlabel/BasicDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>FloatLabel is used by wrapping the input and its label.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <FloatLabel>
-            <InputText id="username" v-model="value" autocomplete="off" />
-            <label for="username">Username</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<FloatLabel>
-    <InputText id="username" v-model="value" />
-    <label for="username">Username</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <FloatLabel>
-            <InputText id="username" v-model="value" />
-            <label for="username">Username</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <FloatLabel>
-            <InputText id="username" v-model="value" />
-            <label for="username">Username</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/floatlabel/ImportDoc.vue b/apps/labs/doc/floatlabel/ImportDoc.vue
deleted file mode 100644
index b6bd6f478..000000000
--- a/apps/labs/doc/floatlabel/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import FloatLabel from 'primevue/floatlabel';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/floatlabel/InvalidDoc.vue b/apps/labs/doc/floatlabel/InvalidDoc.vue
deleted file mode 100644
index 0ac618180..000000000
--- a/apps/labs/doc/floatlabel/InvalidDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When the form element is invalid, the label is also highlighted.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputText id="value1" v-model="value1" autocomplete="off" :invalid="!value1" />
-            <label for="value1">Username</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputText id="value2" v-model="value2" autocomplete="off" :invalid="!value2" />
-            <label for="value2">Username</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="value3" v-model="value3" autocomplete="off" :invalid="!value3" />
-            <label for="value3">Username</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: '',
-            code: {
-                basic: `
-<FloatLabel>
-    <InputText id="value1" v-model="value1" :invalid="!value1" />
-    <label for="value1">Username</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <InputText id="value2" v-model="value2" :invalid="!value2" />
-    <label for="value2">Username</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <InputText id="value3" v-model="value3" :invalid="!value3" />
-    <label for="value3">Username</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputText id="value1" v-model="value1" :invalid="!value1" />
-            <label for="value1">Username</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputText id="value2" v-model="value2" :invalid="!value2" />
-            <label for="value2">Username</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="value3" v-model="value3" :invalid="!value3" />
-            <label for="value3">Username</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: ''
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputText id="value1" v-model="value1" :invalid="!value1" />
-            <label for="value1">Username</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputText id="value2" v-model="value2" :invalid="!value2" />
-            <label for="value2">Username</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="value3" v-model="value3" :invalid="!value3" />
-            <label for="value3">Username</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref('');
-const value2 = ref('');
-const value3 = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/floatlabel/VariantsDoc.vue b/apps/labs/doc/floatlabel/VariantsDoc.vue
deleted file mode 100644
index cfb1dccbb..000000000
--- a/apps/labs/doc/floatlabel/VariantsDoc.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>variant</i> property defines the position of the label. Default value is <i>over</i>, whereas <i>in</i> and <i>on</i> are the alternatives.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value1" autocomplete="off" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="on_label" v-model="value2" autocomplete="off" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            code: {
-                basic: `
-<FloatLabel variant="in">
-    <InputText id="in_label" v-model="value1" autocomplete="off" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <InputText id="on_label" v-model="value2" autocomplete="off" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value1" autocomplete="off" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="on_label" v-model="value2" autocomplete="off" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<div class="card flex flex-wrap justify-center items-end gap-4">
-    <div class="card flex flex-wrap justify-center gap-4">
-        <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value1" autocomplete="off" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="on_label" v-model="value2" autocomplete="off" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/fluid/AccessibilityDoc.vue b/apps/labs/doc/fluid/AccessibilityDoc.vue
deleted file mode 100644
index 03b4077a4..000000000
--- a/apps/labs/doc/fluid/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Fluid does not require any roles and attributes.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/fluid/BasicDoc.vue b/apps/labs/doc/fluid/BasicDoc.vue
deleted file mode 100644
index 5f812eeae..000000000
--- a/apps/labs/doc/fluid/BasicDoc.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Components with the <i>fluid</i> option like <i>InputText</i> have the ability to span the full width of their component. Enabling the <i>fluid</i> for each component individually may be cumbersome so wrap the content with <i>Fluid</i> to
-            instead for an easier alternative.
-        </p>
-        <p>Any component that has the <i>fluid</i> property can be nested inside the <i>Fluid</i> component. The <i>fluid</i> property of a child component has higher precedence than the fluid container as shown in the last sample.</p>
-    </DocSectionText>
-    <div class="card flex flex-col gap-6">
-        <div>
-            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
-            <InputText id="non-fluid" />
-        </div>
-
-        <div>
-            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
-            <InputText id="non-fluid" fluid />
-        </div>
-
-        <Fluid>
-            <span class="font-bold mb-2 block">Fluid Container</span>
-            <div class="grid grid-cols-2 gap-4">
-                <div><InputText /></div>
-                <div><InputText /></div>
-                <div class="col-span-full"><InputText /></div>
-                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
-            </div>
-        </Fluid>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<div>
-    <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
-    <InputText id="non-fluid" />
-</div>
-
-<div>
-    <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
-    <InputText id="non-fluid" fluid />
-</div>
-
-<Fluid>
-    <span class="font-bold mb-2 block">Fluid Container</span>
-    <div class="grid grid-cols-2 gap-4">
-        <div><InputText /></div>
-        <div><InputText /></div>
-        <div class="col-span-full"><InputText /></div>
-        <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
-    </div>
-</Fluid>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col gap-6">
-        <div>
-            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
-            <InputText id="non-fluid" />
-        </div>
-
-        <div>
-            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
-            <InputText id="non-fluid" fluid />
-        </div>
-
-        <Fluid>
-            <span class="font-bold mb-2 block">Fluid Container</span>
-            <div class="grid grid-cols-2 gap-4">
-                <div><InputText /></div>
-                <div><InputText /></div>
-                <div class="col-span-full"><InputText /></div>
-                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
-            </div>
-        </Fluid>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-
-`,
-                composition: `
-<template>
-     <div class="card flex flex-col gap-6">
-        <div>
-            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
-            <InputText id="non-fluid" />
-        </div>
-
-        <div>
-            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
-            <InputText id="non-fluid" fluid />
-        </div>
-
-        <Fluid>
-            <span class="font-bold mb-2 block">Fluid Container</span>
-            <div class="grid grid-cols-2 gap-4">
-                <div><InputText /></div>
-                <div><InputText /></div>
-                <div class="col-span-full"><InputText /></div>
-                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
-            </div>
-        </Fluid>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/fluid/ImportDoc.vue b/apps/labs/doc/fluid/ImportDoc.vue
deleted file mode 100644
index fc94d9b6b..000000000
--- a/apps/labs/doc/fluid/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Fluid from 'primevue/fluid';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/AccessibilityDoc.vue b/apps/labs/doc/galleria/AccessibilityDoc.vue
deleted file mode 100644
index 16f60d75a..000000000
--- a/apps/labs/doc/galleria/AccessibilityDoc.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Galleria uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
-            <i>aria-live</i> attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay.
-        </p>
-
-        <p>
-            A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Similarly
-            <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
-        </p>
-
-        <p>
-            Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button
-            elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
-        </p>
-
-        <p>
-            Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a <i>tablist</i> role whereas each item has a <i>tab</i> role with <i>aria-selected</i> and <i>aria-controls</i> attributes. The
-            <i>aria-label</i> attribute of a quick navigation item refers to the <i>aria.pageLabel</i> of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Current page is marked with
-            <i>aria-current</i>.
-        </p>
-
-        <p>
-            In full screen mode, modal element uses <i>dialog</i> role with <i>aria-modal</i> enabled. The close button retrieves <i>aria-label</i> from the <i>aria.close</i> property of the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
-        </p>
-
-        <h3>Next/Prev Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through interactive elements in the carousel.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates navigation.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates navigation.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Quick Navigation Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through the active slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first slide link.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last slide link.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/galleria/AdvancedDoc.vue b/apps/labs/doc/galleria/AdvancedDoc.vue
deleted file mode 100644
index 9af2de13d..000000000
--- a/apps/labs/doc/galleria/AdvancedDoc.vue
+++ /dev/null
@@ -1,512 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Advanced Galleria implementation with a custom UI.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria
-                ref="galleria"
-                v-model:activeIndex="activeIndex"
-                :value="images"
-                :numVisible="5"
-                containerStyle="max-width: 640px"
-                :showThumbnails="showThumbnails"
-                :showItemNavigators="true"
-                :showItemNavigatorsOnHover="true"
-                :circular="true"
-                :autoPlay="isAutoPlay"
-                :transitionInterval="3000"
-                :responsiveOptions="responsiveOptions"
-                :pt="{
-                    root: {
-                        class: [{ 'flex flex-col': fullScreen }]
-                    },
-                    content: {
-                        class: ['relative', { 'flex-1 justify-center': fullScreen }]
-                    },
-                    thumbnails: 'absolute w-full left-0 bottom-0'
-                }"
-            >
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <div class="grid gap-4 justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                    </div>
-                </template>
-                <template #footer>
-                    <div class="flex items-stretch bg-surface-950 text-white h-10">
-                        <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
-                            <i class="pi pi-th-large"></i>
-                        </button>
-                        <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
-                        <span v-if="images" class="flex items-center gap-4 ml-3">
-                            <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                            <span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
-                            <span class="text-sm">{{ images[activeIndex].alt }}</span>
-                        </span>
-                        <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
-                            <i :class="fullScreenIcon"></i>
-                        </button>
-                    </div>
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            activeIndex: 0,
-            showThumbnails: false,
-            isAutoPlayActive: true,
-            fullScreen: false,
-            isAutoPlay: true,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria
-    ref="galleria"
-    v-model:activeIndex="activeIndex"
-    :value="images"
-    :numVisible="5"
-    containerStyle="max-width: 640px"
-    :showThumbnails="showThumbnails"
-    :showItemNavigators="true"
-    :showItemNavigatorsOnHover="true"
-    :circular="true"
-    :autoPlay="isAutoPlay"
-    :transitionInterval="3000"
-    :responsiveOptions="responsiveOptions"
-    :pt="{
-        root: {
-            class: [{ 'flex flex-col': fullScreen }]
-        },
-        content: {
-            class: ['relative', { 'flex-1 justify-center': fullScreen }]
-        },
-        thumbnails: 'absolute w-full left-0 bottom-0'
-    }"
->
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
-    </template>
-    <template #thumbnail="slotProps">
-        <div class="grid gap-4 justify-center">
-            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-        </div>
-    </template>
-    <template #footer>
-        <div class="flex items-stretch bg-surface-950 text-white h-10">
-            <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
-                <i class="pi pi-th-large"></i>
-            </button>
-            <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
-            <span v-if="images" class="flex items-center gap-4 ml-3">
-                <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                <span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
-                <span class="text-sm">{{ images[activeIndex].alt }}</span>
-            </span>
-            <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
-                <i :class="fullScreenIcon"></i>
-            </button>
-        </div>
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria
-            ref="galleria"
-            v-model:activeIndex="activeIndex"
-            :value="images"
-            :numVisible="5"
-            containerStyle="max-width: 640px"
-            :showThumbnails="showThumbnails"
-            :showItemNavigators="true"
-            :showItemNavigatorsOnHover="true"
-            :circular="true"
-            :autoPlay="isAutoPlay"
-            :transitionInterval="3000"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                root: {
-                    class: [{ 'flex flex-col': fullScreen }]
-                },
-                content: {
-                    class: ['relative', { 'flex-1 justify-center': fullScreen }]
-                },
-                thumbnails: 'absolute w-full left-0 bottom-0'
-            }"
-        >
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
-            </template>
-            <template #thumbnail="slotProps">
-                <div class="grid gap-4 justify-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </div>
-            </template>
-            <template #footer>
-                <div class="flex items-stretch bg-surface-950 text-white h-10">
-                    <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
-                        <i class="pi pi-th-large"></i>
-                    </button>
-                    <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
-                    <span v-if="images" class="flex items-center gap-4 ml-3">
-                        <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                        <span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
-                        <span class="text-sm">{{ images[activeIndex].alt }}</span>
-                    </span>
-                    <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
-                        <i :class="fullScreenIcon"></i>
-                    </button>
-                </div>
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            activeIndex: 0,
-            showThumbnails: false,
-            fullScreen: false,
-            isAutoPlay: true,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-        this.bindDocumentListeners();
-    },
-    methods: {
-        toggleAutoSlide() {
-            this.isAutoPlay = !this.isAutoPlay;
-        },
-        onThumbnailButtonClick() {
-            this.showThumbnails = !this.showThumbnails;
-        },
-        toggleFullScreen() {
-            if (this.fullScreen) {
-                this.closeFullScreen();
-            } else {
-                this.openFullScreen();
-            }
-        },
-        onFullScreenChange() {
-            this.fullScreen = !this.fullScreen;
-        },
-        openFullScreen() {
-            let elem = this.$refs.galleria.$el;
-
-            if (elem.requestFullscreen) {
-                elem.requestFullscreen();
-            } else if (elem.mozRequestFullScreen) {
-                /* Firefox */
-                elem.mozRequestFullScreen();
-            } else if (elem.webkitRequestFullscreen) {
-                /* Chrome, Safari & Opera */
-                elem.webkitRequestFullscreen();
-            } else if (elem.msRequestFullscreen) {
-                /* IE/Edge */
-                elem.msRequestFullscreen();
-            }
-        },
-        closeFullScreen() {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            }
-        },
-        bindDocumentListeners() {
-            document.addEventListener('fullscreenchange', this.onFullScreenChange);
-            document.addEventListener('mozfullscreenchange', this.onFullScreenChange);
-            document.addEventListener('webkitfullscreenchange', this.onFullScreenChange);
-            document.addEventListener('msfullscreenchange', this.onFullScreenChange);
-        },
-        unbindDocumentListeners() {
-            document.removeEventListener('fullscreenchange', this.onFullScreenChange);
-            document.removeEventListener('mozfullscreenchange', this.onFullScreenChange);
-            document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
-            document.removeEventListener('msfullscreenchange', this.onFullScreenChange);
-        }
-    },
-    computed: {
-        slideButtonIcon() {
-            return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
-        },
-        fullScreenIcon() {
-            return \`pi ${this.fullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria
-            ref="galleria"
-            v-model:activeIndex="activeIndex"
-            :value="images"
-            :numVisible="5"
-            containerStyle="max-width: 640px"
-            :showThumbnails="showThumbnails"
-            :showItemNavigators="true"
-            :showItemNavigatorsOnHover="true"
-            :circular="true"
-            :autoPlay="isAutoPlay"
-            :transitionInterval="3000"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                root: {
-                    class: [{ 'flex flex-col': fullScreen }]
-                },
-                content: {
-                    class: ['relative', { 'flex-1 justify-center': fullScreen }]
-                },
-                thumbnails: 'absolute w-full left-0 bottom-0'
-            }"
-        >
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
-            </template>
-            <template #thumbnail="slotProps">
-                <div class="grid gap-4 justify-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </div>
-            </template>
-            <template #footer>
-                <div class="flex items-stretch bg-surface-950 text-white h-10">
-                    <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
-                        <i class="pi pi-th-large"></i>
-                    </button>
-                    <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
-                    <span v-if="images" class="flex items-center gap-4 ml-3">
-                        <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                        <span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
-                        <span class="text-sm">{{ images[activeIndex].alt }}</span>
-                    </span>
-                    <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
-                        <i :class="fullScreenIcon"></i>
-                    </button>
-                </div>
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-    bindDocumentListeners();
-});
-
-const galleria = ref();
-const images = ref();
-const activeIndex = ref(0);
-const showThumbnails = ref(false);
-const fullScreen = ref(false);
-const isAutoPlay = ref(true);
-
-const toggleAutoSlide = () => {
-    isAutoPlay.value  = !isAutoPlay.value ;
-};
-const onThumbnailButtonClick = () => {
-    showThumbnails.value  = !showThumbnails.value ;
-};
-
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-
-const toggleFullScreen = () => {
-    if (fullScreen.value ) {
-        closeFullScreen();
-    } else {
-        openFullScreen();
-    }
-};
-const onFullScreenChange = () => {
-    fullScreen.value  = !fullScreen.value ;
-};
-const openFullScreen = () =>{
-    let elem = galleria.value.$el;
-
-    if (elem.requestFullscreen) {
-        elem.requestFullscreen();
-    } else if (elem.mozRequestFullScreen) {
-        /* Firefox */
-        elem.mozRequestFullScreen();
-    } else if (elem.webkitRequestFullscreen) {
-        /* Chrome, Safari & Opera */
-        elem.webkitRequestFullscreen();
-    } else if (elem.msRequestFullscreen) {
-        /* IE/Edge */
-        elem.msRequestFullscreen();
-    }
-};
-const closeFullScreen = () => {
-    if (document.exitFullscreen) {
-        document.exitFullscreen();
-    } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-    } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-    } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-    }
-};
-const bindDocumentListeners = () => {
-    document.addEventListener('fullscreenchange', onFullScreenChange);
-    document.addEventListener('mozfullscreenchange', onFullScreenChange);
-    document.addEventListener('webkitfullscreenchange', onFullScreenChange);
-    document.addEventListener('msfullscreenchange', onFullScreenChange);
-};
-const unbindDocumentListeners = () => {
-    document.removeEventListener('fullscreenchange', onFullScreenChange);
-    document.removeEventListener('mozfullscreenchange', onFullScreenChange);
-    document.removeEventListener('webkitfullscreenchange', onFullScreenChange);
-    document.removeEventListener('msfullscreenchange', onFullScreenChange);
-};
-
-const fullScreenIcon = computed(() => {
-    return \`pi \${fullScreen.value ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
-});
-const slideButtonIcon = computed(() => {
-    return \`pi \${isAutoPlay.value ? 'pi-pause' : 'pi-play'}\`;
-});
-<\/script>
-
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-            this.bindDocumentListeners();
-        },
-        toggleAutoSlide() {
-            this.isAutoPlay = !this.isAutoPlay;
-        },
-        onThumbnailButtonClick() {
-            this.showThumbnails = !this.showThumbnails;
-        },
-        toggleFullScreen() {
-            if (this.fullScreen) {
-                this.closeFullScreen();
-            } else {
-                this.openFullScreen();
-            }
-        },
-        onFullScreenChange() {
-            this.fullScreen = !this.fullScreen;
-        },
-        openFullScreen() {
-            let elem = this.$refs.galleria.$el;
-
-            if (elem.requestFullscreen) {
-                elem.requestFullscreen();
-            } else if (elem.mozRequestFullScreen) {
-                /* Firefox */
-                elem.mozRequestFullScreen();
-            } else if (elem.webkitRequestFullscreen) {
-                /* Chrome, Safari & Opera */
-                elem.webkitRequestFullscreen();
-            } else if (elem.msRequestFullscreen) {
-                /* IE/Edge */
-                elem.msRequestFullscreen();
-            }
-        },
-        closeFullScreen() {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            }
-        },
-        bindDocumentListeners() {
-            document.addEventListener('fullscreenchange', this.onFullScreenChange);
-            document.addEventListener('mozfullscreenchange', this.onFullScreenChange);
-            document.addEventListener('webkitfullscreenchange', this.onFullScreenChange);
-            document.addEventListener('msfullscreenchange', this.onFullScreenChange);
-        },
-        unbindDocumentListeners() {
-            document.removeEventListener('fullscreenchange', this.onFullScreenChange);
-            document.removeEventListener('mozfullscreenchange', this.onFullScreenChange);
-            document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
-            document.removeEventListener('msfullscreenchange', this.onFullScreenChange);
-        }
-    },
-    computed: {
-        slideButtonIcon() {
-            return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
-        },
-        fullScreenIcon() {
-            return `pi ${this.fullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/AutoPlayDoc.vue b/apps/labs/doc/galleria/AutoPlayDoc.vue
deleted file mode 100644
index 1ddf063a3..000000000
--- a/apps/labs/doc/galleria/AutoPlayDoc.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
-    :circular="true" :autoPlay="true" :transitionInterval="2000">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
-            :circular="true" :autoPlay="true" :transitionInterval="2000">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
-            :circular="true" :autoPlay="true" :transitionInterval="2000">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/BasicDoc.vue b/apps/labs/doc/galleria/BasicDoc.vue
deleted file mode 100644
index 1ed161743..000000000
--- a/apps/labs/doc/galleria/BasicDoc.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Galleria requires a <i>value</i> as a collection of images, <i>item</i> template for the higher resolution image and <i>thumbnail</i> template to display as a thumbnail.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/CaptionDoc.vue b/apps/labs/doc/galleria/CaptionDoc.vue
deleted file mode 100644
index 2ba3726e0..000000000
--- a/apps/labs/doc/galleria/CaptionDoc.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-                <template #caption="slotProps">
-                    <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
-                    <p class="text-white">{{ slotProps.item.alt }}</p>
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-    </template>
-    <template #caption="slotProps">
-        <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
-        <p class="text-white">{{ slotProps.item.alt }}</p>
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-            <template #caption="slotProps">
-                <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
-                <p class="text-white">{{ slotProps.item.alt }}</p>
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-            <template #caption="slotProps">
-                <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
-                <p class="text-white">{{ slotProps.item.alt }}</p>
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/ControlledDoc.vue b/apps/labs/doc/galleria/ControlledDoc.vue
deleted file mode 100644
index 525e23eae..000000000
--- a/apps/labs/doc/galleria/ControlledDoc.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="mb-4">
-                <Button icon="pi pi-minus" @click="prev" />
-                <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
-            </div>
-
-            <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            activeIndex: 2,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<div>
-    <Button icon="pi pi-minus" @click="prev" />
-    <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
-</div>
-
-<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="mb-4">
-            <Button icon="pi pi-minus" @click="prev" />
-            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
-        </div>
-
-        <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            activeIndex: 2,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    },
-    methods: {
-        next() {
-            this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
-        },
-        prev() {
-            this.activeIndex = this.activeIndex === 0 ? 0 : this.activeIndex - 1;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="mb-4">
-            <Button icon="pi pi-minus" @click="prev" />
-            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
-        </div>
-
-        <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const activeIndex = ref(2);
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-
-const next = () => {
-    activeIndex.value = activeIndex.value === images.value.length - 1 ? images.value.length - 1 : activeIndex.value + 1;
-};
-const prev = () => {
-    activeIndex.value = activeIndex.value === 0 ? 0 : activeIndex.value - 1;
-};
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        },
-        next() {
-            this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
-        },
-        prev() {
-            this.activeIndex = this.activeIndex === 0 ? 0 : this.activeIndex - 1;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/ImportDoc.vue b/apps/labs/doc/galleria/ImportDoc.vue
deleted file mode 100644
index 30b4d7ce0..000000000
--- a/apps/labs/doc/galleria/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Galleria from 'primevue/galleria';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/ResponsiveDoc.vue b/apps/labs/doc/galleria/ResponsiveDoc.vue
deleted file mode 100644
index 792f09a7f..000000000
--- a/apps/labs/doc/galleria/ResponsiveDoc.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/ThumbnailDoc.vue b/apps/labs/doc/galleria/ThumbnailDoc.vue
deleted file mode 100644
index 0dd8d74b0..000000000
--- a/apps/labs/doc/galleria/ThumbnailDoc.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Thumbnails represent a smaller version of the actual content.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex flex-wrap gap-4 mb-8">
-                <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
-                    <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                    <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-                </div>
-            </div>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <div class="grid gap-4 justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                    </div>
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            position: 'bottom',
-            positionOptions: [
-                {
-                    label: 'Bottom',
-                    value: 'bottom'
-                },
-                {
-                    label: 'Top',
-                    value: 'top'
-                },
-                {
-                    label: 'Left',
-                    value: 'left'
-                },
-                {
-                    label: 'Right',
-                    value: 'right'
-                }
-            ],
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #thumbnail="slotProps">
-        <div class="grid gap-4 justify-center">
-            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-        </div>
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-4 mb-8">
-            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
-                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-            </div>
-        </div>
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <div class="grid gap-4 justify-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-                </div>
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            position: 'bottom',
-            positionOptions: [
-                {
-                    label: 'Bottom',
-                    value: 'bottom'
-                },
-                {
-                    label: 'Top',
-                    value: 'top'
-                },
-                {
-                    label: 'Left',
-                    value: 'left'
-                },
-                {
-                    label: 'Right',
-                    value: 'right'
-                }
-            ],
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-4 mb-8">
-            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
-                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-            </div>
-        </div>
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <div class="grid gap-4 justify-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-                </div>
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-const images = ref();
-const position = ref('bottom');
-const positionOptions = ref([
-    {
-        label: 'Bottom',
-        value: 'bottom'
-    },
-    {
-        label: 'Top',
-        value: 'top'
-    },
-    {
-        label: 'Left',
-        value: 'left'
-    },
-    {
-        label: 'Right',
-        value: 'right'
-    }
-]);
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/fullscreen/CustomContentDoc.vue b/apps/labs/doc/galleria/fullscreen/CustomContentDoc.vue
deleted file mode 100644
index 3d344cff2..000000000
--- a/apps/labs/doc/galleria/fullscreen/CustomContentDoc.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card flex justify-center">
-            <Galleria
-                v-model:activeIndex="activeIndex"
-                v-model:visible="displayCustom"
-                :value="images"
-                :responsiveOptions="responsiveOptions"
-                :numVisible="7"
-                containerStyle="max-width: 850px"
-                :circular="true"
-                :fullScreen="true"
-                :showItemNavigators="true"
-                :showThumbnails="false"
-            >
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-
-            <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
-                <div v-for="(image, index) of images" :key="index" class="col-span-4">
-                    <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
-                </div>
-            </div>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            activeIndex: 0,
-            responsiveOptions: [
-                {
-                    breakpoint: '1024px',
-                    numVisible: 5
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-            ],
-            displayCustom: false,
-            code: {
-                basic: `
-<Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
-    containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
-            containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-
-        <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
-            <div v-for="(image, index) of images" :key="index" class="col-span-4">
-                <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            activeIndex: 0,
-            responsiveOptions: [
-                {
-                    breakpoint: '1024px',
-                    numVisible: 5
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-            ],
-            displayCustom: false
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    },
-    methods: {
-        imageClick(index) {
-            this.activeIndex = index;
-            this.displayCustom = true;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
-            containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-
-        <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
-            <div v-for="(image, index) of images" :key="index" class="col-span-4">
-                <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const activeIndex = ref(0);
-const responsiveOptions = ref([
-    {
-        breakpoint: '1024px',
-        numVisible: 5
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1
-    }
-]);
-const displayCustom = ref(false);
-
-const imageClick = (index) => {
-    activeIndex.value = index;
-    displayCustom.value = true;
-};
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        },
-        imageClick(index) {
-            this.activeIndex = index;
-            this.displayCustom = true;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/fullscreen/WithThumbnailsDoc.vue b/apps/labs/doc/galleria/fullscreen/WithThumbnailsDoc.vue
deleted file mode 100644
index 2d3c67bee..000000000
--- a/apps/labs/doc/galleria/fullscreen/WithThumbnailsDoc.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Full screen mode is enabled by adding <i>fullScreen</i> property and and visibility is controlled with a binding to <i>visible</i> property.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card flex justify-center">
-            <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-
-            <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1500px',
-                    numVisible: 5
-                },
-                {
-                    breakpoint: '1024px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 2
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-            ],
-            displayBasic: false,
-            code: {
-                basic: `
-<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-    </template>
-</Galleria>
-
-<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-
-        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1500px',
-                    numVisible: 5
-                },
-                {
-                    breakpoint: '1024px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 2
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-            ],
-            displayBasic: false
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-
-        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1500px',
-        numVisible: 5
-    },
-    {
-        breakpoint: '1024px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 2
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1
-    }
-]);
-const displayBasic = ref(false);
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-})
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue b/apps/labs/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
deleted file mode 100644
index be67bf6a6..000000000
--- a/apps/labs/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Thumbnails can also be hidden in full screen mode.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card flex justify-center">
-            <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-
-            <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1500px',
-                    numVisible: 5
-                },
-                {
-                    breakpoint: '1024px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 2
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-            ],
-            displayBasic: false,
-            code: {
-                basic: `
-<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-    </template>
-</Galleria>
-
-<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-
-        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1500px',
-                    numVisible: 5
-                },
-                {
-                    breakpoint: '1024px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 2
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-            ],
-            displayBasic: false
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-
-        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1500px',
-        numVisible: 5
-    },
-    {
-        breakpoint: '1024px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 2
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1
-    }
-]);
-const displayBasic = ref(false);
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-})
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/indicator/ClickEventDoc.vue b/apps/labs/doc/galleria/indicator/ClickEventDoc.vue
deleted file mode 100644
index d39f13167..000000000
--- a/apps/labs/doc/galleria/indicator/ClickEventDoc.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            code: {
-                basic: `
-<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
-    :showThumbnails="false" :showIndicators="true">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
-            :showThumbnails="false" :showIndicators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
-            :showThumbnails="false" :showIndicators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/indicator/HoverEventDoc.vue b/apps/labs/doc/galleria/indicator/HoverEventDoc.vue
deleted file mode 100644
index a06a66617..000000000
--- a/apps/labs/doc/galleria/indicator/HoverEventDoc.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            code: {
-                basic: `
-<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
-    :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
-            :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
-            :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/indicator/PositionDoc.vue b/apps/labs/doc/galleria/indicator/PositionDoc.vue
deleted file mode 100644
index 28c6ea89e..000000000
--- a/apps/labs/doc/galleria/indicator/PositionDoc.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Indicators can be placed at four different sides using the <i>indicatorsPosition</i> property. In addition, enabling <i>showIndicatorsOnItem</i> moves the indicators inside the image section.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex flex-wrap gap-4 mb-8">
-                <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
-                    <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                    <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-                </div>
-            </div>
-            <div class="flex items-center mb-8">
-                <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
-                <label for="inside_cbox" class="ml-2"> Inside </label>
-            </div>
-            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            inside: false,
-            position: 'bottom',
-            positionOptions: [
-                {
-                    label: 'Bottom',
-                    value: 'bottom'
-                },
-                {
-                    label: 'Top',
-                    value: 'top'
-                },
-                {
-                    label: 'Left',
-                    value: 'left'
-                },
-                {
-                    label: 'Right',
-                    value: 'right'
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
-    :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-4 mb-8">
-            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
-                <RadioButton :value="option.value" />
-                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-            </div>
-        </div>
-        <div class="flex items-center mb-8">
-            <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
-            <label for="inside_cbox" class="ml-2"> Inside </label>
-        </div>
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            inside: false,
-            position: 'bottom',
-            positionOptions: [
-                {
-                    label: 'Bottom',
-                    value: 'bottom'
-                },
-                {
-                    label: 'Top',
-                    value: 'top'
-                },
-                {
-                    label: 'Left',
-                    value: 'left'
-                },
-                {
-                    label: 'Right',
-                    value: 'right'
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-4 mb-8">
-            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
-                <RadioButton :value="option.value" />
-                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-            </div>
-        </div>
-        <div class="flex items-center mb-8">
-            <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
-            <label for="inside_cbox" class="ml-2"> Inside </label>
-        </div>
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
-            :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const inside = ref(false);
-const position = ref('bottom');
-const positionOptions = ref([
-    {
-        label: 'Bottom',
-        value: 'bottom'
-    },
-    {
-        label: 'Top',
-        value: 'top'
-    },
-    {
-        label: 'Left',
-        value: 'left'
-    },
-    {
-        label: 'Right',
-        value: 'right'
-    }
-]);
-
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/indicator/TemplateDoc.vue b/apps/labs/doc/galleria/indicator/TemplateDoc.vue
deleted file mode 100644
index 2c2935d0d..000000000
--- a/apps/labs/doc/galleria/indicator/TemplateDoc.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Indicator content can be customized with the <i>indicator</i> property that takes an index as a parameter and expects content.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #indicator="{ index }">
-                    <span style="color: #ffffff; cursor: pointer">{{ index + 1 }}</span>
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            code: {
-                basic: `
-<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
-    :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #indicator="{ index }">
-        <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
-            :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #indicator="{ index }">
-                <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
-            :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #indicator="{ index }">
-                <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/navigator/HoverDoc.vue b/apps/labs/doc/galleria/navigator/HoverDoc.vue
deleted file mode 100644
index 32abd1b91..000000000
--- a/apps/labs/doc/galleria/navigator/HoverDoc.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Navigators are displayed on hover only if <i>showItemNavigatorsOnHover</i> is enabled.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/navigator/IndicatorsDoc.vue b/apps/labs/doc/galleria/navigator/IndicatorsDoc.vue
deleted file mode 100644
index c8ebf0fbe..000000000
--- a/apps/labs/doc/galleria/navigator/IndicatorsDoc.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Navigators and Indicators can be combined as well.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria
-                :value="images"
-                :responsiveOptions="responsiveOptions"
-                :numVisible="5"
-                :circular="true"
-                containerStyle="max-width: 640px"
-                :showItemNavigators="true"
-                :showThumbnails="false"
-                :showItemNavigatorsOnHover="true"
-                :showIndicators="true"
-            >
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-    :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-    </template>
-    <template #thumbnail="slotProps">
-            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-            :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-            </template>
-            <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-            :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-            </template>
-            <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '991px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/navigator/ItemThumbnailsDoc.vue b/apps/labs/doc/galleria/navigator/ItemThumbnailsDoc.vue
deleted file mode 100644
index 4b3647af7..000000000
--- a/apps/labs/doc/galleria/navigator/ItemThumbnailsDoc.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Add <i>showItemNavigators</i> to display navigator elements and the left and right side.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-    :showItemNavigators="true">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-            :showItemNavigators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-            :showItemNavigators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue b/apps/labs/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
deleted file mode 100644
index 1fadfa98f..000000000
--- a/apps/labs/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Simple example with navigators only.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-    :showItemNavigators="true" :showThumbnails="false">
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-            :showItemNavigators="true" :showThumbnails="false">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
-            :showItemNavigators="true" :showThumbnails="false">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '991px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            PhotoService.getImages().then((data) => (this.images = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/iconfield/AccessibilityDoc.vue b/apps/labs/doc/iconfield/AccessibilityDoc.vue
deleted file mode 100644
index 59e583a38..000000000
--- a/apps/labs/doc/iconfield/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>IconField and InputIcon do not require any roles and attributes.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Components does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/iconfield/BasicDoc.vue b/apps/labs/doc/iconfield/BasicDoc.vue
deleted file mode 100644
index 27d68b4bf..000000000
--- a/apps/labs/doc/iconfield/BasicDoc.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p><i>IconField</i> wraps the <i>InputIcon</i> and the input field component.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <IconField>
-            <InputIcon class="pi pi-search" />
-            <InputText v-model="value1" placeholder="Search" />
-        </IconField>
-
-        <IconField>
-            <InputText v-model="value2" variant="filled" />
-            <InputIcon class="pi pi-spin pi-spinner" />
-        </IconField>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            code: {
-                basic: `
-<IconField>
-    <InputIcon class="pi pi-search" />
-    <InputText v-model="value1" placeholder="Search" />
-</IconField>
-
-<IconField>
-    <InputText v-model="value2" variant="filled" />
-    <InputIcon class="pi pi-spin pi-spinner" />
-</IconField>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <IconField>
-            <InputIcon class="pi pi-search" />
-            <InputText v-model="value1" placeholder="Search" />
-        </IconField>
-
-        <IconField>
-            <InputText v-model="value2" variant="filled" />
-            <InputIcon class="pi pi-spin pi-spinner" />
-        </IconField>
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <IconField>
-            <InputIcon class="pi pi-search" />
-            <InputText v-model="value1" placeholder="Search" />
-        </IconField>
-
-        <IconField>
-            <InputText v-model="value2" variant="filled" />
-            <InputIcon class="pi pi-spin pi-spinner" />
-        </IconField>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/iconfield/FloatLabelDoc.vue b/apps/labs/doc/iconfield/FloatLabelDoc.vue
deleted file mode 100644
index 79a3365da..000000000
--- a/apps/labs/doc/iconfield/FloatLabelDoc.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="over_label" v-model="value1" autocomplete="off" />
-            </IconField>
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
-            </IconField>
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="on_label" v-model="value3" autocomplete="off" />
-            </IconField>
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<FloatLabel>
-    <IconField>
-        <InputIcon class="pi pi-search" />
-        <InputText id="over_label" v-model="value1" autocomplete="off" />
-    </IconField>
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <IconField>
-        <InputIcon class="pi pi-search" />
-        <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
-    </IconField>
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <IconField>
-        <InputIcon class="pi pi-search" />
-        <InputText id="on_label" v-model="value3" autocomplete="off" />
-    </IconField>
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="over_label" v-model="value1" autocomplete="off" />
-            </IconField>
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
-            </IconField>
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="on_label" v-model="value3" autocomplete="off" />
-            </IconField>
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="over_label" v-model="value1" autocomplete="off" />
-            </IconField>
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
-            </IconField>
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText id="on_label" v-model="value3" autocomplete="off" />
-            </IconField>
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/iconfield/IftaLabelDoc.vue b/apps/labs/doc/iconfield/IftaLabelDoc.vue
deleted file mode 100644
index 4e4cc4aaa..000000000
--- a/apps/labs/doc/iconfield/IftaLabelDoc.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <IconField>
-                <InputIcon class="pi pi-user" />
-                <InputText id="username" v-model="value" autocomplete="off" variant="filled" />
-            </IconField>
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<IftaLabel>
-    <IconField>
-        <InputIcon class="pi pi-user" />
-        <InputText id="username" v-model="value" variant="filled" />
-    </IconField>
-    <label for="username">Username</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <IconField>
-                <InputIcon class="pi pi-user" />
-                <InputText id="username" v-model="value" variant="filled" />
-            </IconField>
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <IconField>
-                <InputIcon class="pi pi-user" />
-                <InputText id="username" v-model="value" variant="filled" />
-            </IconField>
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/iconfield/ImportDoc.vue b/apps/labs/doc/iconfield/ImportDoc.vue
deleted file mode 100644
index 61231b855..000000000
--- a/apps/labs/doc/iconfield/ImportDoc.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import IconField from 'primevue/iconfield';
-import InputIcon from 'primevue/inputicon';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/iconfield/SizesDoc.vue b/apps/labs/doc/iconfield/SizesDoc.vue
deleted file mode 100644
index 9fe9f69c7..000000000
--- a/apps/labs/doc/iconfield/SizesDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IconField is compatible with the size setting of the input field.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <IconField>
-            <InputIcon class="pi pi-search" />
-            <InputText v-model="value1" placeholder="Small" size="small" />
-        </IconField>
-
-        <IconField>
-            <InputText v-model="value2" placeholder="Normal" />
-            <InputIcon class="pi pi-user" />
-        </IconField>
-
-        <IconField>
-            <InputIcon class="pi pi-lock" />
-            <InputText v-model="value3" placeholder="Large" size="large" />
-            <InputIcon class="pi pi-spin pi-spinner" />
-        </IconField>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<IconField>
-    <InputIcon class="pi pi-search" />
-    <InputText v-model="value1" placeholder="Small" size="small" />
-</IconField>
-
-<IconField>
-    <InputIcon class="pi pi-search" />
-    <InputText v-model="value2" placeholder="Normal" />
-</IconField>
-
-<IconField>
-    <InputText v-model="value3" placeholder="Large" size="large" />
-    <InputIcon class="pi pi-spin pi-spinner" />
-</IconField>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <IconField>
-            <InputIcon class="pi pi-search" />
-            <InputText v-model="value1" placeholder="Small" size="small" />
-        </IconField>
-
-        <IconField>
-            <InputIcon class="pi pi-search" />
-            <InputText v-model="value2" placeholder="Normal" />
-        </IconField>
-
-        <IconField>
-            <InputText v-model="value3" placeholder="Large" size="large" />
-            <InputIcon class="pi pi-spin pi-spinner" />
-        </IconField>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <IconField>
-            <InputIcon class="pi pi-search" />
-            <InputText v-model="value1" placeholder="Small" size="small" />
-        </IconField>
-
-        <IconField>
-            <InputIcon class="pi pi-search" />
-            <InputText v-model="value2" placeholder="Normal" />
-        </IconField>
-
-        <IconField>
-            <InputText v-model="value3" placeholder="Large" size="large" />
-            <InputIcon class="pi pi-spin pi-spinner" />
-        </IconField>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/iconfield/TemplateDoc.vue b/apps/labs/doc/iconfield/TemplateDoc.vue
deleted file mode 100644
index ffc53ab53..000000000
--- a/apps/labs/doc/iconfield/TemplateDoc.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content inside an InputIcon is defined as children.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IconField>
-            <InputIcon>
-                <svg width="14" height="16" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--p-primary-color)"
-                    />
-                    <path
-                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--p-text-color)"
-                    />
-                </svg>
-            </InputIcon>
-            <InputText v-model="value" placeholder="Search" />
-        </IconField>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<IconField>
-    <InputIcon>
-        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="..." fill="var(--p-primary-color)" />
-            <path d="..." fill="var(--p-text-color)" />
-        </svg>
-    </InputIcon>
-    <InputText v-model="value" placeholder="Search" />
-</IconField>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IconField>
-            <InputIcon>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="..." fill="var(--p-primary-color)" />
-                    <path d="..." fill="var(--p-text-color)" />
-                </svg>
-            </InputIcon>
-            <InputText v-model="value" placeholder="Search" />
-        </IconField>
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IconField>
-            <InputIcon>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="..." fill="var(--p-primary-color)" />
-                    <path d="..." fill="var(--p-text-color)" />
-                </svg>
-            </InputIcon>
-            <InputText v-model="value" placeholder="Search" />
-        </IconField>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/icons/BasicDoc.vue b/apps/labs/doc/icons/BasicDoc.vue
deleted file mode 100644
index 612e6a40e..000000000
--- a/apps/labs/doc/icons/BasicDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>PrimeIcons use the <i>pi pi-&#123;icon&#125;</i> syntax such as <i>pi pi-check</i>. A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-4">
-        <i class="pi pi-check"></i>
-        <i class="pi pi-times"></i>
-        <span class="pi pi-search"></span>
-        <span class="pi pi-user"></span>
-    </div>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<i class="pi pi-check"></i>
-<i class="pi pi-times"></i>
-<span class="pi pi-search"></span>
-<span class="pi pi-user"></span>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/icons/ColorDoc.vue b/apps/labs/doc/icons/ColorDoc.vue
deleted file mode 100644
index 7153d5343..000000000
--- a/apps/labs/doc/icons/ColorDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Icon color is defined with the <i>color</i> property which is inherited from parent by default.</p>
-    </DocSectionText>
-    <div class="card flex justify-center items-center gap-4">
-        <i class="pi pi-check" style="color: slateblue"></i>
-        <i class="pi pi-times" style="color: green"></i>
-        <i class="pi pi-search" style="color: 'var(--p-primary-color)'"></i>
-        <i class="pi pi-user" style="color: #708090"></i>
-    </div>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<i class="pi pi-check" style="color: slateblue"></i>
-<i class="pi pi-times" style="color: green"></i>
-<i class="pi pi-search" style="color: 'var(--p-primary-color)'"></i>
-<i class="pi pi-user" style="color: #708090"></i>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/icons/ConstantsDoc.vue b/apps/labs/doc/icons/ConstantsDoc.vue
deleted file mode 100644
index 6c7315daf..000000000
--- a/apps/labs/doc/icons/ConstantsDoc.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Constants API is available to reference icons easily when used programmatically.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-import { PrimeIcons } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    items: [
-                        { label: 'New', icon: PrimeIcons.PLUS },
-                        { label: 'Open', icon: PrimeIcons.DOWNLOAD }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-</template>
-
-<script>
-import { PrimeIcons } from '@primevue/core/api';
-
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    items: [
-                        { label: 'New', icon: PrimeIcons.PLUS },
-                        { label: 'Open', icon: PrimeIcons.DOWNLOAD }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/icons/DownloadDoc.vue b/apps/labs/doc/icons/DownloadDoc.vue
deleted file mode 100644
index 1f4138a25..000000000
--- a/apps/labs/doc/icons/DownloadDoc.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-npm install primeicons
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/icons/FigmaDoc.vue b/apps/labs/doc/icons/FigmaDoc.vue
deleted file mode 100644
index 26eb2b320..000000000
--- a/apps/labs/doc/icons/FigmaDoc.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            PrimeIcons library is now available on <a href="https://www.figma.com/community/file/1354343849355792252/primeicons" target="_blank" rel="noopener noreferrer">Figma Community</a>. By adding them as a library, you can easily use these
-            icons in your designs.
-        </p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/customicons/FontAwesomeDoc.vue b/apps/labs/doc/icons/FontAwesomeDoc.vue
similarity index 100%
rename from apps/labs/doc/customicons/FontAwesomeDoc.vue
rename to apps/labs/doc/icons/FontAwesomeDoc.vue
diff --git a/apps/labs/doc/customicons/ImageDoc.vue b/apps/labs/doc/icons/ImageDoc.vue
similarity index 88%
rename from apps/labs/doc/customicons/ImageDoc.vue
rename to apps/labs/doc/icons/ImageDoc.vue
index e39080223..2c2c29741 100644
--- a/apps/labs/doc/customicons/ImageDoc.vue
+++ b/apps/labs/doc/icons/ImageDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Any time of image can be used as an icon.</p>
+        <p>Any type of image can be used as an icon.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
diff --git a/apps/labs/doc/icons/ImportDoc.vue b/apps/labs/doc/icons/ImportDoc.vue
deleted file mode 100644
index e8195d598..000000000
--- a/apps/labs/doc/icons/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>CSS file of the icon library needs to be imported in <i>styles.scss</i> of your application.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: "\nimport 'primeicons/primeicons.css'\n"
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/icons/ListDoc.vue b/apps/labs/doc/icons/ListDoc.vue
deleted file mode 100644
index 6383aef8c..000000000
--- a/apps/labs/doc/icons/ListDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Here is the full list of PrimeIcons. More icons will be added periodically and you may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
-    </DocSectionText>
-
-    <InputText v-model="filter" class="w-full p-4 mt-4 mb-6" placeholder="Search an icon" />
-
-    <div class="card">
-        <div class="grid grid-cols-12 gap-4 text-center">
-            <div v-for="icon of filteredIcons" :key="icon.properties.name" class="col-span-12 md:col-span-2 mb-8">
-                <i :class="'text-2xl mb-4 text-surface-500 dark:text-surface-400 pi pi-' + icon.properties.name"></i>
-                <div>pi-{{ icon.properties.name }}</div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { IconService } from '@/service/IconService';
-
-export default {
-    data() {
-        return {
-            icons: null,
-            filter: null
-        };
-    },
-    mounted() {
-        IconService.getIcons().then((data) => {
-            let d_data = data;
-            let d_icons = d_data.filter((value) => {
-                return value.icon.tags.indexOf('deprecate') === -1;
-            });
-
-            d_icons.sort((icon1, icon2) => {
-                if (icon1.properties.name < icon2.properties.name) return -1;
-                else if (icon1.properties.name < icon2.properties.name) return 1;
-                else return 0;
-            });
-
-            this.icons = d_icons;
-        });
-    },
-    computed: {
-        filteredIcons() {
-            let sanitizedInput = this.filter?.replace(/[^\w\s]/gi, '').replace(/\s/g, '');
-
-            if (this.filter)
-                return this.icons.filter((icon) => {
-                    return (
-                        icon.icon.tags.some((tag) =>
-                            tag
-                                .replace(/[^\w\s]/gi, '')
-                                .replace(/\s/g, '')
-                                .includes(sanitizedInput.toLowerCase())
-                        ) ||
-                        icon.properties.name
-                            .replace(/[^\w\s]/gi, '')
-                            .replace(/\s/g, '')
-                            .toLowerCase()
-                            .includes(sanitizedInput.toLowerCase())
-                    );
-                });
-            else return this.icons;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/customicons/MaterialDoc.vue b/apps/labs/doc/icons/MaterialDoc.vue
similarity index 100%
rename from apps/labs/doc/customicons/MaterialDoc.vue
rename to apps/labs/doc/icons/MaterialDoc.vue
diff --git a/apps/labs/doc/customicons/SVGDoc.vue b/apps/labs/doc/icons/SVGDoc.vue
similarity index 100%
rename from apps/labs/doc/customicons/SVGDoc.vue
rename to apps/labs/doc/icons/SVGDoc.vue
diff --git a/apps/labs/doc/icons/SizeDoc.vue b/apps/labs/doc/icons/SizeDoc.vue
deleted file mode 100644
index 60614aa90..000000000
--- a/apps/labs/doc/icons/SizeDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Size of an icon is controlled with the font-size property of the element.</p>
-    </DocSectionText>
-    <div class="card flex justify-center items-center gap-4">
-        <i class="pi pi-check" style="font-size: 1rem"></i>
-        <i class="pi pi-times" style="font-size: 1.5rem"></i>
-        <i class="pi pi-search" style="font-size: 2rem"></i>
-        <i class="pi pi-user" style="font-size: 2.5rem"></i>
-    </div>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<i class="pi pi-check" style="font-size: 1rem"></i>
-<i class="pi pi-times" style="font-size: 1.5rem"></i>
-<i class="pi pi-search" style="font-size: 2rem"></i>
-<i class="pi pi-user" style="font-size: 2.5rem"></i>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/icons/SpinDoc.vue b/apps/labs/doc/icons/SpinDoc.vue
deleted file mode 100644
index 8cbc3bc45..000000000
--- a/apps/labs/doc/icons/SpinDoc.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Special <i>pi-spin</i> class applies infinite rotation to an icon.</p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-4">
-        <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
-        <i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
-    </div>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
-<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/customicons/VideoDoc.vue b/apps/labs/doc/icons/VideoDoc.vue
similarity index 100%
rename from apps/labs/doc/customicons/VideoDoc.vue
rename to apps/labs/doc/icons/VideoDoc.vue
diff --git a/apps/labs/doc/iftalabel/AccessibilityDoc.vue b/apps/labs/doc/iftalabel/AccessibilityDoc.vue
deleted file mode 100644
index 05d727668..000000000
--- a/apps/labs/doc/iftalabel/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>IftaLabel does not require any roles and attributes.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/iftalabel/BasicDoc.vue b/apps/labs/doc/iftalabel/BasicDoc.vue
deleted file mode 100644
index 680182f42..000000000
--- a/apps/labs/doc/iftalabel/BasicDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used by wrapping the input and its label.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" autocomplete="off" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<IftaLabel>
-    <InputText id="username" v-model="value" />
-    <label for="username">Username</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/iftalabel/ImportDoc.vue b/apps/labs/doc/iftalabel/ImportDoc.vue
deleted file mode 100644
index c54ef52e4..000000000
--- a/apps/labs/doc/iftalabel/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import IftaLabel from 'primevue/iftalabel';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/iftalabel/InvalidDoc.vue b/apps/labs/doc/iftalabel/InvalidDoc.vue
deleted file mode 100644
index 8c2075a39..000000000
--- a/apps/labs/doc/iftalabel/InvalidDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When the form element is invalid, the label is also highlighted.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" autocomplete="off" :invalid="!value" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<IftaLabel>
-    <InputText id="username" v-model="value" :invalid="!value" />
-    <label for="username">Username</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" :invalid="!value" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" :invalid="!value" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/image/AccessibilityDoc.vue b/apps/labs/doc/image/AccessibilityDoc.vue
deleted file mode 100644
index 9fabe7c72..000000000
--- a/apps/labs/doc/image/AccessibilityDoc.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, with <i>previewButtonProps</i>
-            you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
-        </p>
-
-        <p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p>
-
-        <p>
-            Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API as <i>aria-label</i>.
-        </p>
-
-        <h3>ButtonBar Keyboard Support</h3>
-        <p>When preview is activated, close button receives the initial focus.</p>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through button bar.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the button.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the button.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>esc</i>
-                        </td>
-                        <td>Closes the image preview.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/image/BasicDoc.vue b/apps/labs/doc/image/BasicDoc.vue
deleted file mode 100644
index ab326950d..000000000
--- a/apps/labs/doc/image/BasicDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Image is used similar to the standard <i>img</i> element.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Image src="/image.jpg" alt="Image" width="250" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/image/ImportDoc.vue b/apps/labs/doc/image/ImportDoc.vue
deleted file mode 100644
index d8edd4cd3..000000000
--- a/apps/labs/doc/image/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Image from 'primevue/image';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/image/PreviewDoc.vue b/apps/labs/doc/image/PreviewDoc.vue
deleted file mode 100644
index b71b3467c..000000000
--- a/apps/labs/doc/image/PreviewDoc.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
-    </div>
-
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Image src="/image.jpg" alt="Image" width="250" preview />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/image/TemplateDoc.vue b/apps/labs/doc/image/TemplateDoc.vue
deleted file mode 100644
index b1ccba7ef..000000000
--- a/apps/labs/doc/image/TemplateDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            An eye icon is displayed by default when the image is hovered in preview mode, use the <i>previewicon</i> slot for custom content. In addition, the <i>image</i> and <i>preview</i> slots are available to define the thumbnail and detailed
-            image respectively.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Image alt="Image" preview>
-            <template #previewicon>
-                <i class="pi pi-search"></i>
-            </template>
-            <template #image>
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
-            </template>
-            <template #preview="slotProps">
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
-            </template>
-        </Image>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Image alt="Image" preview>
-    <template #previewicon>
-        <i class="pi pi-search"></i>
-    </template>
-    <template #image>
-        <img src="/thumbnail.jpg" alt="image" />
-    </template>
-    <template #preview="slotProps">
-        <img src="/image.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
-    </template>
-</Image>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Image alt="Image" preview>
-            <template #previewicon>
-                <i class="pi pi-search"></i>
-            </template>
-            <template #image>
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
-            </template>
-            <template #preview="slotProps">
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
-            </template>
-        </Image>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Image alt="Image" preview>
-            <template #previewicon>
-                <i class="pi pi-search"></i>
-            </template>
-            <template #image>
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
-            </template>
-            <template #preview="slotProps">
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
-            </template>
-        </Image>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/imagecompare/AccessibilityDoc.vue b/apps/labs/doc/imagecompare/AccessibilityDoc.vue
deleted file mode 100644
index 1ca1094f1..000000000
--- a/apps/labs/doc/imagecompare/AccessibilityDoc.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>ImageComponent component uses a native range <i>slider</i> internally. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the component.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">left arrow</i>
-                                <i>up arrow</i>
-                            </span>
-                        </td>
-                        <td>Decrements the value.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">right arrow</i>
-                                <i>down arrow</i>
-                            </span>
-                        </td>
-                        <td>Increments the value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Set the minimum value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Set the maximum value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>page up</i></td>
-                        <td>Increments the value by 10 steps.</td>
-                    </tr>
-                    <tr>
-                        <td><i>page down</i></td>
-                        <td>Decrements the value by 10 steps.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="image_label">Compare Images</span>
-<ImageCompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
-    ...
-</ImageCompare>
-
-<ImageCompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
-    ...
-</ImageCompare>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/imagecompare/BasicDoc.vue b/apps/labs/doc/imagecompare/BasicDoc.vue
deleted file mode 100644
index 0cb3dfe0b..000000000
--- a/apps/labs/doc/imagecompare/BasicDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Images are defined using templating with <i>left</i> and <i>right</i> slots. Use the <i>style</i> or <i>class</i> properties to define the size of the container.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ImageCompare class="shadow-lg rounded-2xl">
-            <template #left>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
-            </template>
-            <template #right>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
-            </template>
-        </ImageCompare>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ImageCompare class="shadow-lg rounded-2xl">
-    <template #left>
-        <img src="~/assets/images/island1.jpg" />
-    </template>
-    <template #right>
-        <img src="~/assets/images/island2.jpg" />
-    </template>
-</ImageCompare>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ImageCompare class="shadow-lg rounded-2xl">
-            <template #left>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
-            </template>
-            <template #right>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
-            </template>
-        </ImageCompare>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ImageCompare class="shadow-lg rounded-2xl">
-            <template #left>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
-            </template>
-            <template #right>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
-            </template>
-        </ImageCompare>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/imagecompare/ImportDoc.vue b/apps/labs/doc/imagecompare/ImportDoc.vue
deleted file mode 100644
index 571ddb772..000000000
--- a/apps/labs/doc/imagecompare/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ImageCompare from 'primevue/imagecompare';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/imagecompare/ResponsiveDoc.vue b/apps/labs/doc/imagecompare/ResponsiveDoc.vue
deleted file mode 100644
index c90516e0d..000000000
--- a/apps/labs/doc/imagecompare/ResponsiveDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Apply responsive styles to the container element to optimize display per screen size.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ImageCompare class="sm:!w-96 shadow-lg rounded-2xl">
-            <template #left>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
-            </template>
-            <template #right>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
-            </template>
-        </ImageCompare>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ImageCompare class="sm:!w-96 shadow-lg rounded-2xl">
-    <template #left>
-        <img src="~/assets/images/island1.jpg" />
-    </template>
-    <template #right>
-        <img src="~/assets/images/island2.jpg" />
-    </template>
-</ImageCompare>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ImageCompare class="sm:!w-96 shadow-lg rounde-2xl">
-            <template #left>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
-            </template>
-            <template #right>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
-            </template>
-        </ImageCompare>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ImageCompare class="sm:!w-96 shadow-lg">
-            <template #left>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
-            </template>
-            <template #right>
-                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
-            </template>
-        </ImageCompare>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inplace/AccessibilityDoc.vue b/apps/labs/doc/inplace/AccessibilityDoc.vue
deleted file mode 100644
index 5a3bc964a..000000000
--- a/apps/labs/doc/inplace/AccessibilityDoc.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Inplace component defines <i>aria-live</i> as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.</p>
-
-        <h3>View Mode Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Switches to content.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/inplace/BasicDoc.vue b/apps/labs/doc/inplace/BasicDoc.vue
deleted file mode 100644
index e8a59a792..000000000
--- a/apps/labs/doc/inplace/BasicDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p><i>Inplace</i> component requires <i>display</i> and <i>content</i> templates to define the content of each state.</p>
-    </DocSectionText>
-    <div class="card">
-        <Inplace>
-            <template #display> View Content </template>
-            <template #content>
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </template>
-        </Inplace>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Inplace>
-    <template #display> View Content </template>
-    <template #content>
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </template>
-</Inplace>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Inplace>
-            <template #display> View Content </template>
-            <template #content>
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Inplace>
-            <template #display> View Content </template>
-            <template #content>
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inplace/ImageDoc.vue b/apps/labs/doc/inplace/ImageDoc.vue
deleted file mode 100644
index 9b35aecb3..000000000
--- a/apps/labs/doc/inplace/ImageDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Any content such as an image can be placed inside an Inplace.</p>
-    </DocSectionText>
-    <div class="card">
-        <Inplace>
-            <template #display>
-                <span class="inline-flex items-center gap-2">
-                    <span class="pi pi-image"></span>
-                    <span>View Photo</span>
-                </span>
-            </template>
-            <template #content>
-                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
-            </template>
-        </Inplace>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Inplace>
-    <template #display>
-        <span class="inline-flex items-center gap-2">
-            <span class="pi pi-image"></span>
-            <span>View Photo</span>
-        </span>
-    </template>
-    <template #content>
-        <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
-    </template>
-</Inplace>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Inplace>
-            <template #display>
-                <span class="inline-flex items-center gap-2">
-                    <span class="pi pi-image"></span>
-                    <span>View Photo</span>
-                </span>
-            </template>
-            <template #content>
-                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
-            </template>
-        </Inplace>
-    </div>
-</template>
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Inplace>
-            <template #display>
-                <span class="inline-flex items-center gap-2">
-                    <span class="pi pi-image"></span>
-                    <span>View Photo</span>
-                </span>
-            </template>
-            <template #content>
-                <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inplace/ImportDoc.vue b/apps/labs/doc/inplace/ImportDoc.vue
deleted file mode 100644
index 2bac32b80..000000000
--- a/apps/labs/doc/inplace/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Inplace from 'primevue/inplace';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inplace/InputDoc.vue b/apps/labs/doc/inplace/InputDoc.vue
deleted file mode 100644
index 81ffb0b8c..000000000
--- a/apps/labs/doc/inplace/InputDoc.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>closeCallback</i> switches the state back to display mode when called from an event.</p>
-    </DocSectionText>
-    <div class="card">
-        <Inplace>
-            <template #display>
-                {{ text || 'Click to Edit' }}
-            </template>
-            <template #content="{ closeCallback }">
-                <span class="inline-flex items-center gap-2">
-                    <InputText v-model="text" autofocus />
-                    <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
-                </span>
-            </template>
-        </Inplace>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            text: null,
-            code: {
-                basic: `
-<Inplace>
-    <template #display>
-        {{ text || 'Click to Edit' }}
-    </template>
-    <template #content="{ closeCallback }">
-        <span class="inline-flex items-center gap-2">
-            <InputText v-model="text" autofocus />
-            <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
-        </span>
-    </template>
-</Inplace>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Inplace>
-            <template #display>
-                {{ text || 'Click to Edit' }}
-            </template>
-            <template #content="{ closeCallback }">
-                <span class="inline-flex items-center gap-2">
-                    <InputText v-model="text" autofocus />
-                    <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
-                </span>
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            text: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Inplace>
-            <template #display>
-                {{ text || 'Click to Edit' }}
-            </template>
-            <template #content="{ closeCallback }">
-                <span class="inline-flex items-center gap-2">
-                    <InputText v-model="text" autofocus />
-                    <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
-                </span>
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const text = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inplace/LazyDoc.vue b/apps/labs/doc/inplace/LazyDoc.vue
deleted file mode 100644
index 0155c5287..000000000
--- a/apps/labs/doc/inplace/LazyDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>open</i> event is used to initialize the content such as loading data in a lazy manner.</p>
-    </DocSectionText>
-    <div class="card">
-        <Inplace @open="loadData">
-            <template #display> View Data </template>
-            <template #content>
-                <DataTable :value="products">
-                    <Column field="code" header="Code"></Column>
-                    <Column field="name" header="Name"></Column>
-                    <Column field="category" header="Category"></Column>
-                    <Column field="quantity" header="Quantity"></Column>
-                </DataTable>
-            </template>
-        </Inplace>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<Inplace @open="loadData">
-    <template #display> View Data </template>
-    <template #content>
-        <DataTable :value="products">
-            <Column field="code" header="Code"></Column>
-            <Column field="name" header="Name"></Column>
-            <Column field="category" header="Category"></Column>
-            <Column field="quantity" header="Quantity"></Column>
-        </DataTable>
-    </template>
-</Inplace>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Inplace @open="loadData">
-            <template #display> View Data </template>
-            <template #content>
-                <DataTable :value="products">
-                    <Column field="code" header="Code"></Column>
-                    <Column field="name" header="Name"></Column>
-                    <Column field="category" header="Category"></Column>
-                    <Column field="quantity" header="Quantity"></Column>
-                </DataTable>
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script>
-import {ProductService} from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        }
-    },
-    methods: {
-        loadData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Inplace @open="loadData">
-            <template #display> View Data </template>
-            <template #content>
-                <DataTable :value="products">
-                    <Column field="code" header="Code"></Column>
-                    <Column field="name" header="Name"></Column>
-                    <Column field="category" header="Category"></Column>
-                    <Column field="quantity" header="Quantity"></Column>
-                </DataTable>
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import {ProductService} from "@/service/ProductService";
-
-
-const products = ref();
-const loadData = () => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        loadData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputgroup/AccessibilityDoc.vue b/apps/labs/doc/inputgroup/AccessibilityDoc.vue
deleted file mode 100644
index a9a17185d..000000000
--- a/apps/labs/doc/inputgroup/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>InputGroup and InputGroupAddon do not require any roles and attributes.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/inputgroup/BasicDoc.vue b/apps/labs/doc/inputgroup/BasicDoc.vue
deleted file mode 100644
index 15b4cb7ca..000000000
--- a/apps/labs/doc/inputgroup/BasicDoc.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A group is created by wrapping the input and add-ons with the <i>InputGroup</i> component. Each add-on element is defined as a child of <i>InputGroupAddon</i> component.</p>
-    </DocSectionText>
-    <div class="card grid grid-cols-1 md:grid-cols-2 gap-4">
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-user"></i>
-            </InputGroupAddon>
-            <InputText v-model="text1" placeholder="Username" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>$</InputGroupAddon>
-            <InputNumber v-model="number" placeholder="Price" />
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>www</InputGroupAddon>
-            <InputText v-model="text2" placeholder="Website" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-map"></i>
-            </InputGroupAddon>
-            <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
-        </InputGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            text1: null,
-            text2: null,
-            number: null,
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<InputGroup>
-    <InputGroupAddon>
-        <i class="pi pi-user"></i>
-    </InputGroupAddon>
-    <InputText v-model="text1" placeholder="Username" />
-</InputGroup>
-
-<InputGroup>
-    <InputGroupAddon>$</InputGroupAddon>
-    <InputNumber v-model="number" placeholder="Price" />
-    <InputGroupAddon>.00</InputGroupAddon>
-</InputGroup>
-
-<InputGroup>
-    <InputGroupAddon>www</InputGroupAddon>
-    <InputText v-model="text2" placeholder="Website" />
-</InputGroup>
-
-<InputGroup>
-    <InputGroupAddon>
-        <i class="pi pi-map"></i>
-    </InputGroupAddon>
-    <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
-</InputGroup>
-`,
-                options: `
-<template>
-    <div class="card grid grid-cols-1 md:grid-cols-2 gap-4">
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-user"></i>
-            </InputGroupAddon>
-            <InputText v-model="text1" placeholder="Username" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>$</InputGroupAddon>
-            <InputNumber v-model="number" placeholder="Price" />
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>www</InputGroupAddon>
-            <InputText v-model="text2" placeholder="Website" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-map"></i>
-            </InputGroupAddon>
-            <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
-        </InputGroup>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            text1: null,
-            text2: null,
-            number: null,
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card grid grid-cols-1 md:grid-cols-2 gap-4">
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-user"></i>
-            </InputGroupAddon>
-            <InputText v-model="text1" placeholder="Username" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>$</InputGroupAddon>
-            <InputNumber v-model="number" placeholder="Price" />
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>www</InputGroupAddon>
-            <InputText v-model="text2" placeholder="Website" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-map"></i>
-            </InputGroupAddon>
-            <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
-        </InputGroup>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const text1 = ref(null);
-const text2 = ref(null);
-const number = ref(null);
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputgroup/ButtonDoc.vue b/apps/labs/doc/inputgroup/ButtonDoc.vue
deleted file mode 100644
index fb6ffcac4..000000000
--- a/apps/labs/doc/inputgroup/ButtonDoc.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Buttons can be placed at either side of an input element.</p>
-    </DocSectionText>
-    <div class="card flex flex-col md:flex-row gap-4">
-        <InputGroup>
-            <Button label="Search" />
-            <InputText placeholder="Keyword" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputText placeholder="Keyword" />
-            <InputGroupAddon>
-                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
-            </InputGroupAddon>
-        </InputGroup>
-        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Button icon="pi pi-check" severity="secondary" />
-            </InputGroupAddon>
-            <InputText placeholder="Vote" />
-            <InputGroupAddon>
-                <Button icon="pi pi-times" severity="secondary" />
-            </InputGroupAddon>
-        </InputGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }],
-            code: {
-                basic: `
-<InputGroup>
-    <Button label="Search" />
-    <InputText placeholder="Keyword" />
-</InputGroup>
-
-<InputGroup>
-    <InputText placeholder="Keyword" />
-    <InputGroupAddon>
-        <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
-    </InputGroupAddon>
-</InputGroup>
-<Menu ref="menu" :model="items" popup class="!min-w-fit" />
-
-<InputGroup>
-    <InputGroupAddon>
-        <Button icon="pi pi-check" severity="secondary" />
-    </InputGroupAddon>
-    <InputText placeholder="Vote" />
-    <InputGroupAddon>
-        <Button icon="pi pi-times" severity="secondary" />
-    </InputGroupAddon>
-</InputGroup>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col md:flex-row gap-4">
-        <InputGroup>
-            <Button label="Search" />
-            <InputText placeholder="Keyword" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputText placeholder="Keyword" />
-            <InputGroupAddon>
-                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
-            </InputGroupAddon>
-        </InputGroup>
-        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Button icon="pi pi-check" severity="secondary" />
-            </InputGroupAddon>
-            <InputText placeholder="Vote" />
-            <InputGroupAddon>
-                <Button icon="pi pi-times" severity="secondary" />
-            </InputGroupAddon>
-        </InputGroup>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }],
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col md:flex-row gap-4">
-        <InputGroup>
-            <Button label="Search" />
-            <InputText placeholder="Keyword" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputText placeholder="Keyword" />
-            <InputGroupAddon>
-                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
-            </InputGroupAddon>
-        </InputGroup>
-        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Button icon="pi pi-check" severity="secondary" />
-            </InputGroupAddon>
-            <InputText placeholder="Vote" />
-            <InputGroupAddon>
-                <Button icon="pi pi-times" severity="secondary" />
-            </InputGroupAddon>
-        </InputGroup>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const menu = ref();
-const items = ref([{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }]);
-
-const toggle = (event) => {
-    menu.value.toggle(event);
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputgroup/CheckboxDoc.vue b/apps/labs/doc/inputgroup/CheckboxDoc.vue
deleted file mode 100644
index 3287463a9..000000000
--- a/apps/labs/doc/inputgroup/CheckboxDoc.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
-    </DocSectionText>
-    <div class="card flex flex-col md:flex-row gap-4">
-        <InputGroup>
-            <InputText placeholder="Price" />
-            <InputGroupAddon>
-                <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
-            </InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Checkbox v-model="checked1" :binary="true" />
-            </InputGroupAddon>
-            <InputText placeholder="Username" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Checkbox v-model="checked2" :binary="true" />
-            </InputGroupAddon>
-            <InputText placeholder="Website" />
-            <InputGroupAddon>
-                <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
-            </InputGroupAddon>
-        </InputGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked1: false,
-            checked2: false,
-            radioValue1: '',
-            radioValue2: '',
-            code: {
-                basic: `
-<InputGroup>
-    <InputText placeholder="Price" />
-    <InputGroupAddon>
-        <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
-    </InputGroupAddon>
-</InputGroup>
-
-<InputGroup>
-    <InputGroupAddon>
-        <Checkbox v-model="checked1" :binary="true" />
-    </InputGroupAddon>
-    <InputText placeholder="Username" />
-</InputGroup>
-
-<InputGroup>
-    <InputGroupAddon>
-        <Checkbox v-model="checked2" :binary="true" />
-    </InputGroupAddon>
-    <InputText placeholder="Website" />
-    <InputGroupAddon>
-        <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
-    </InputGroupAddon>
-</InputGroup>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col md:flex-row gap-4">
-        <InputGroup>
-            <InputText placeholder="Price" />
-            <InputGroupAddon>
-                <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
-            </InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Checkbox v-model="checked1" :binary="true" />
-            </InputGroupAddon>
-            <InputText placeholder="Username" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Checkbox v-model="checked2" :binary="true" />
-            </InputGroupAddon>
-            <InputText placeholder="Website" />
-            <InputGroupAddon>
-                <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
-            </InputGroupAddon>
-        </InputGroup>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked1: false,
-            checked2: false,
-            radioValue1: '',
-            radioValue2: ''
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col md:flex-row gap-4">
-        <InputGroup>
-            <InputText placeholder="Price" />
-            <InputGroupAddon>
-                <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
-            </InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Checkbox v-model="checked1" :binary="true" />
-            </InputGroupAddon>
-            <InputText placeholder="Username" />
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>
-                <Checkbox v-model="checked2" :binary="true" />
-            </InputGroupAddon>
-            <InputText placeholder="Website" />
-            <InputGroupAddon>
-                <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
-            </InputGroupAddon>
-        </InputGroup>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked1 = ref(false);
-const checked2 = ref(false);
-const radioValue1 = ref('');
-const radioValue2 = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputgroup/FloatLabelDoc.vue b/apps/labs/doc/inputgroup/FloatLabelDoc.vue
deleted file mode 100644
index da8395861..000000000
--- a/apps/labs/doc/inputgroup/FloatLabelDoc.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-col md:items-end md:flex-row gap-4">
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-user"></i>
-            </InputGroupAddon>
-            <FloatLabel>
-                <InputText id="over_label" v-model="value1" />
-                <label for="over_label">Over Label</label>
-            </FloatLabel>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>$</InputGroupAddon>
-            <FloatLabel variant="in">
-                <InputText id="in_label" v-model="value2" />
-                <label for="in_label">In Label</label>
-            </FloatLabel>
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>www</InputGroupAddon>
-            <FloatLabel variant="on">
-                <InputText id="on_label" v-model="value3" />
-                <label for="on_label">On Label</label>
-            </FloatLabel>
-        </InputGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<InputGroup>
-    <InputGroupAddon>
-        <i class="pi pi-user"></i>
-    </InputGroupAddon>
-    <FloatLabel>
-        <InputText id="over_label" v-model="value1" />
-        <label for="over_label">Over Label</label>
-    </FloatLabel>
-</InputGroup>
-
-<InputGroup>
-    <InputGroupAddon>$</InputGroupAddon>
-    <FloatLabel variant="in">
-        <InputText id="in_label" v-model="value2" />
-        <label for="in_label">In Label</label>
-    </FloatLabel>
-    <InputGroupAddon>.00</InputGroupAddon>
-</InputGroup>
-
-<InputGroup>
-    <InputGroupAddon>www</InputGroupAddon>
-    <FloatLabel variant="on">
-        <InputText id="on_label" v-model="value3" />
-        <label for="on_label">On Label</label>
-    </FloatLabel>
-</InputGroup>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col md:items-end md:flex-row gap-4">
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-user"></i>
-            </InputGroupAddon>
-            <FloatLabel>
-                <InputText id="over_label" v-model="value1" />
-                <label for="over_label">Over Label</label>
-            </FloatLabel>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>$</InputGroupAddon>
-            <FloatLabel variant="in">
-                <InputText id="in_label" v-model="value2" />
-                <label for="in_label">In Label</label>
-            </FloatLabel>
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>www</InputGroupAddon>
-            <FloatLabel variant="on">
-                <InputText id="on_label" v-model="value3" />
-                <label for="on_label">On Label</label>
-            </FloatLabel>
-        </InputGroup>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col md:items-end md:flex-row gap-4">
-        <InputGroup>
-            <InputGroupAddon>
-                <i class="pi pi-user"></i>
-            </InputGroupAddon>
-            <FloatLabel>
-                <InputText id="over_label" v-model="value1" />
-                <label for="over_label">Over Label</label>
-            </FloatLabel>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>$</InputGroupAddon>
-            <FloatLabel variant="in">
-                <InputText id="in_label" v-model="value2" />
-                <label for="in_label">In Label</label>
-            </FloatLabel>
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-
-        <InputGroup>
-            <InputGroupAddon>www</InputGroupAddon>
-            <FloatLabel variant="on">
-                <InputText id="on_label" v-model="value3" />
-                <label for="on_label">On Label</label>
-            </FloatLabel>
-        </InputGroup>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputgroup/IftaLabelDoc.vue b/apps/labs/doc/inputgroup/IftaLabelDoc.vue
deleted file mode 100644
index 14b9e2746..000000000
--- a/apps/labs/doc/inputgroup/IftaLabelDoc.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputGroup class="md:w-80">
-            <InputGroupAddon>
-                <i class="pi pi-shopping-cart"></i>
-            </InputGroupAddon>
-            <IftaLabel>
-                <InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
-                <label for="price">Price</label>
-            </IftaLabel>
-        </InputGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 10,
-            code: {
-                basic: `
-<InputGroup class="md:w-80">
-    <InputGroupAddon>
-        <i class="pi pi-shopping-cart"></i>
-    </InputGroupAddon>
-    <IftaLabel>
-        <InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
-        <label for="price">Price</label>
-    </IftaLabel>
-</InputGroup>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputGroup class="md:w-80">
-            <InputGroupAddon>
-                <i class="pi pi-shopping-cart"></i>
-            </InputGroupAddon>
-            <IftaLabel>
-                <InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
-                <label for="price">Price</label>
-            </IftaLabel>
-        </InputGroup>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 10
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputGroup class="md:w-80">
-            <InputGroupAddon>
-                <i class="pi pi-shopping-cart"></i>
-            </InputGroupAddon>
-            <IftaLabel>
-                <InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
-                <label for="price">Price</label>
-            </IftaLabel>
-        </InputGroup>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(10);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputgroup/ImportDoc.vue b/apps/labs/doc/inputgroup/ImportDoc.vue
deleted file mode 100644
index 34b5654a9..000000000
--- a/apps/labs/doc/inputgroup/ImportDoc.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import InputGroup from 'primevue/inputgroup';
-import InputGroupAddon from 'primevue/inputgroupaddon';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputgroup/MultipleDoc.vue b/apps/labs/doc/inputgroup/MultipleDoc.vue
deleted file mode 100644
index 8d604854e..000000000
--- a/apps/labs/doc/inputgroup/MultipleDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multiple add-ons can be placed inside the same group.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputGroup class="sm:!w-96">
-            <InputGroupAddon>
-                <i class="pi pi-clock"></i>
-            </InputGroupAddon>
-            <InputGroupAddon>
-                <i class="pi pi-star-fill"></i>
-            </InputGroupAddon>
-            <InputNumber placeholder="Price" />
-            <InputGroupAddon>$</InputGroupAddon>
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InputGroup class="sm:!w-96">
-    <InputGroupAddon>
-        <i class="pi pi-clock"></i>
-    </InputGroupAddon>
-    <InputGroupAddon>
-        <i class="pi pi-star-fill"></i>
-    </InputGroupAddon>
-    <InputNumber placeholder="Price" />
-    <InputGroupAddon>$</InputGroupAddon>
-    <InputGroupAddon>.00</InputGroupAddon>
-</InputGroup>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputGroup class="sm:!w-96">
-            <InputGroupAddon>
-                <i class="pi pi-clock"></i>
-            </InputGroupAddon>
-            <InputGroupAddon>
-                <i class="pi pi-star-fill"></i>
-            </InputGroupAddon>
-            <InputNumber placeholder="Price" />
-            <InputGroupAddon>$</InputGroupAddon>
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputGroup class="sm:!w-96">
-            <InputGroupAddon>
-                <i class="pi pi-clock"></i>
-            </InputGroupAddon>
-            <InputGroupAddon>
-                <i class="pi pi-star-fill"></i>
-            </InputGroupAddon>
-            <InputNumber placeholder="Price" />
-            <InputGroupAddon>$</InputGroupAddon>
-            <InputGroupAddon>.00</InputGroupAddon>
-        </InputGroup>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/AccessibilityDoc.vue b/apps/labs/doc/inputmask/AccessibilityDoc.vue
deleted file mode 100644
index b7bb6740c..000000000
--- a/apps/labs/doc/inputmask/AccessibilityDoc.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
-            <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the input.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="date">Date</label>
-<InputMask id="date" />
-
-<span id="phone">Phone</span>
-<InputMask aria-labelledby="phone" />
-
-<InputMask aria-label="Age" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/BasicDoc.vue b/apps/labs/doc/inputmask/BasicDoc.vue
deleted file mode 100644
index 4974c0247..000000000
--- a/apps/labs/doc/inputmask/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputMask is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/DisabledDoc.vue b/apps/labs/doc/inputmask/DisabledDoc.vue
deleted file mode 100644
index c0cbb1a6f..000000000
--- a/apps/labs/doc/inputmask/DisabledDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="Disabled" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<InputMask mask="99-999999" placeholder="Disabled" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="Disabled" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-}
-<\/script>
-        
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="Disabled" disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/FilledDoc.vue b/apps/labs/doc/inputmask/FilledDoc.vue
deleted file mode 100644
index 1f01e62d6..000000000
--- a/apps/labs/doc/inputmask/FilledDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/FloatLabelDoc.vue b/apps/labs/doc/inputmask/FloatLabelDoc.vue
deleted file mode 100644
index a0dc4a6b1..000000000
--- a/apps/labs/doc/inputmask/FloatLabelDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: '',
-            code: {
-                basic: `
-<FloatLabel>
-    <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: ''
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref('');
-const value2 = ref('');
-const value3 = ref('');
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/FormsDoc.vue b/apps/labs/doc/inputmask/FormsDoc.vue
deleted file mode 100644
index 6680be430..000000000
--- a/apps/labs/doc/inputmask/FormsDoc.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputMask integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
-                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                serialNumber: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    serialNumber: z.string().min(1, { message: 'Serial number is required.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-    <div class="flex flex-col gap-1">
-        <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
-        <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
-                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                serialNumber: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    serialNumber: z.string().min(1, { message: 'Serial number is required.' })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
-                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    serialNumber: ''
-});
-
-const resolver = ref(zodResolver(
-    z.object({
-        serialNumber: z.string().min(1, { message: 'Serial number is required.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/IftaLabelDoc.vue b/apps/labs/doc/inputmask/IftaLabelDoc.vue
deleted file mode 100644
index ee7072fcf..000000000
--- a/apps/labs/doc/inputmask/IftaLabelDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputMask id="ssn" v-model="value" mask="999-99-9999" autocomplete="off" variant="filled" />
-            <label for="ssn">SSN</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<IftaLabel>
-    <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
-    <label for="ssn">SSN</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
-            <label for="ssn">SSN</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
-            <label for="ssn">SSN</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/ImportDoc.vue b/apps/labs/doc/inputmask/ImportDoc.vue
deleted file mode 100644
index a804ea8b4..000000000
--- a/apps/labs/doc/inputmask/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import InputMask from 'primevue/inputmask';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/InvalidDoc.vue b/apps/labs/doc/inputmask/InvalidDoc.vue
deleted file mode 100644
index 128d19962..000000000
--- a/apps/labs/doc/inputmask/InvalidDoc.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            code: {
-                basic: `
-<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
-<InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: ''
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref('');
-const value2 = ref('');
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/MaskDoc.vue b/apps/labs/doc/inputmask/MaskDoc.vue
deleted file mode 100644
index 15b457c48..000000000
--- a/apps/labs/doc/inputmask/MaskDoc.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Mask format can be a combination of the following definitions; <i>a</i> for alphabetic characters, <i>9</i> for numeric characters and <i>*</i> for alphanumberic characters. In addition, formatting characters like <i>(</i>, <i>)</i> ,
-            <i>-</i> are also accepted.
-        </p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="ssn" class="font-bold block mb-2">SSN</label>
-            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="phone" class="font-bold block mb-2">Phone</label>
-            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="serial" class="font-bold block mb-2">Serial</label>
-            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: '',
-            code: {
-                basic: `
-<div class="flex-auto">
-    <label for="ssn" class="font-bold block mb-2">SSN</label>
-    <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
-</div>
-
-<div class="flex-auto">
-    <label for="phone" class="font-bold block mb-2">Phone</label>
-    <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
-</div>
-
-<div class="flex-auto">
-    <label for="serial" class="font-bold block mb-2">Serial</label>
-    <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="ssn" class="font-bold block mb-2">SSN</label>
-            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="phone" class="font-bold block mb-2">Phone</label>
-            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="serial" class="font-bold block mb-2">Serial</label>
-            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: ''
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="ssn" class="font-bold block mb-2">SSN</label>
-            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="phone" class="font-bold block mb-2">Phone</label>
-            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="serial" class="font-bold block mb-2">Serial</label>
-            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref('');
-const value2 = ref('');
-const value3 = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/OptionalDoc.vue b/apps/labs/doc/inputmask/OptionalDoc.vue
deleted file mode 100644
index b8b24996f..000000000
--- a/apps/labs/doc/inputmask/OptionalDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, <i>?</i> is used to mark anything after the question mark optional.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-}
-<\/script>
-        
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/SizesDoc.vue b/apps/labs/doc/inputmask/SizesDoc.vue
deleted file mode 100644
index bb94c9649..000000000
--- a/apps/labs/doc/inputmask/SizesDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputMask provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
-        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
-        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
-<InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
-<InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
-        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
-        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
-        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
-        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputmask/SlotCharDoc.vue b/apps/labs/doc/inputmask/SlotCharDoc.vue
deleted file mode 100644
index c2c38d964..000000000
--- a/apps/labs/doc/inputmask/SlotCharDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Default placeholder for a mask is underscore that can be customized using <i>slotChar</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/AccessibilityDoc.vue b/apps/labs/doc/inputnumber/AccessibilityDoc.vue
deleted file mode 100644
index a798bc152..000000000
--- a/apps/labs/doc/inputnumber/AccessibilityDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element uses <i>spinbutton</i> role in addition to the
-            <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the input.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Increments the value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Decrements the value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Set the minimum value if provided.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Set the maximum value if provided.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="price">Price</label>
-<InputNumber inputId="price" />
-
-<span id="label_number">Number</span>
-<InputNumber aria-labelledby="label_number" />
-
-<InputNumber aria-label="Number" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/ButtonsDoc.vue b/apps/labs/doc/inputnumber/ButtonsDoc.vue
deleted file mode 100644
index e14ad3cc7..000000000
--- a/apps/labs/doc/inputnumber/ButtonsDoc.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
-                <template #incrementbuttonicon>
-                    <span class="pi pi-plus" />
-                </template>
-                <template #decrementbuttonicon>
-                    <span class="pi pi-minus" />
-                </template>
-            </InputNumber>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 20,
-            value2: 25,
-            value3: 10.5,
-            code: {
-                basic: `
-<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
-<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
-<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
-    <template #incrementbuttonicon>
-        <span class="pi pi-plus" />
-    </template>
-    <template #decrementbuttonicon>
-        <span class="pi pi-minus" />
-    </template>
-</InputNumber>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
-                <template #incrementbuttonicon>
-                    <span class="pi pi-plus" />
-                </template>
-                <template #decrementbuttonicon>
-                    <span class="pi pi-minus" />
-                </template>
-            </InputNumber>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 20,
-            value2: 25,
-            value3: 10.5
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid >
-                <template #incrementbuttonicon>
-                    <span class="pi pi-plus" />
-                </template>
-                <template #decrementbuttonicon>
-                    <span class="pi pi-minus" />
-                </template>
-            </InputNumber>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(20);
-const value2 = ref(25);
-const value3 = ref(10.5);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/CurrencyDoc.vue b/apps/labs/doc/inputnumber/CurrencyDoc.vue
deleted file mode 100644
index 8ca7c8bab..000000000
--- a/apps/labs/doc/inputnumber/CurrencyDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 1500,
-            value2: 2500,
-            value3: 4250,
-            value4: 5002,
-            code: {
-                basic: `
-<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
-<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
-<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
-<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 1500,
-            value2: 2500,
-            value3: 4250,
-            value4: 5002
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(1500);
-const value2 = ref(2500);
-const value3 = ref(4250);
-const value4 = ref(5002);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/DisabledDoc.vue b/apps/labs/doc/inputnumber/DisabledDoc.vue
deleted file mode 100644
index 6e6f053f1..000000000
--- a/apps/labs/doc/inputnumber/DisabledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" disabled prefix="%" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50,
-            code: {
-                basic: `
-<InputNumber v-model="value" disabled prefix="%" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" disabled prefix="%" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" disabled prefix="%" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref(50);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/FilledDoc.vue b/apps/labs/doc/inputnumber/FilledDoc.vue
deleted file mode 100644
index 03b2c5dc9..000000000
--- a/apps/labs/doc/inputnumber/FilledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputNumber v-model="value" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/FloatLabelDoc.vue b/apps/labs/doc/inputnumber/FloatLabelDoc.vue
deleted file mode 100644
index b0d5f866c..000000000
--- a/apps/labs/doc/inputnumber/FloatLabelDoc.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<FloatLabel>
-    <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/FormsDoc.vue b/apps/labs/doc/inputnumber/FormsDoc.vue
deleted file mode 100644
index c097ed14f..000000000
--- a/apps/labs/doc/inputnumber/FormsDoc.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputNumber integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputNumber name="amount" fluid />
-                <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                amount: 5
-            },
-            resolver: zodResolver(
-                z.object({
-                    amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-    <div class="flex flex-col gap-1">
-        <InputNumber name="amount" fluid />
-        <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputNumber name="amount" fluid />
-                <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                amount: 5
-            },
-            resolver: zodResolver(
-                z.object({
-                    amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputNumber name="amount" fluid />
-                <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    amount: 5
-});
-const resolver = ref(zodResolver(
-    z.object({
-        amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/IftaLabelDoc.vue b/apps/labs/doc/inputnumber/IftaLabelDoc.vue
deleted file mode 100644
index 5951c3653..000000000
--- a/apps/labs/doc/inputnumber/IftaLabelDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
-            <label for="price_input">Price</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 1,
-            code: {
-                basic: `
-<IftaLabel>
-    <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
-    <label for="price_input">Price</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
-            <label for="price_input">Price</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 1
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
-            <label for="price_input">Price</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref(1);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/ImportDoc.vue b/apps/labs/doc/inputnumber/ImportDoc.vue
deleted file mode 100644
index b66202310..000000000
--- a/apps/labs/doc/inputnumber/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import InputNumber from 'primevue/inputnumber';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/InvalidDoc.vue b/apps/labs/doc/inputnumber/InvalidDoc.vue
deleted file mode 100644
index 5f63b1d2b..000000000
--- a/apps/labs/doc/inputnumber/InvalidDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            code: {
-                basic: `
-<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(null);
-const value2 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/LocaleDoc.vue b/apps/labs/doc/inputnumber/LocaleDoc.vue
deleted file mode 100644
index 82518404b..000000000
--- a/apps/labs/doc/inputnumber/LocaleDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 151351,
-            value2: 115744,
-            value3: 635524,
-            value4: 732762,
-            code: {
-                basic: `
-<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
-<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
-<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
-<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 151351,
-            value2: 115744,
-            value3: 635524,
-            value4: 732762
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(151351);
-const value2 = ref(115744);
-const value3 = ref(635524);
-const value4 = ref(732762);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/NumeralsDoc.vue b/apps/labs/doc/inputnumber/NumeralsDoc.vue
deleted file mode 100644
index 20750e2f7..000000000
--- a/apps/labs/doc/inputnumber/NumeralsDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 42723,
-            value2: 58151,
-            value3: 2351.35,
-            value4: 50,
-            code: {
-                basic: `
-<InputNumber v-model="value1" inputId="integeronly" fluid />
-<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
-<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
-<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 42723,
-            value2: 58151,
-            value3: 2351.35,
-            value4: 50
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(42723);
-const value2 = ref(58151);
-const value3 = ref(2351.35);
-const value4 = ref(50);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue b/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
deleted file mode 100644
index f812322aa..000000000
--- a/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 20,
-            value2: 50,
-            value3: 10,
-            value4: 20,
-            code: {
-                basic: `
-<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
-<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
-<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
-<InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 20,
-            value2: 50,
-            value3: 10,
-            value4: 20
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(20);
-const value2 = ref(50);
-const value3 = ref(10);
-const value4 = ref(20);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/SizesDoc.vue b/apps/labs/doc/inputnumber/SizesDoc.vue
deleted file mode 100644
index f215787a7..000000000
--- a/apps/labs/doc/inputnumber/SizesDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputNumber provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
-<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
-<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/VerticalDoc.vue b/apps/labs/doc/inputnumber/VerticalDoc.vue
deleted file mode 100644
index 6eebef2b1..000000000
--- a/apps/labs/doc/inputnumber/VerticalDoc.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
-            <template #incrementbuttonicon>
-                <span class="pi pi-plus" />
-            </template>
-            <template #decrementbuttonicon>
-                <span class="pi pi-minus" />
-            </template>
-        </InputNumber>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50,
-            code: {
-                basic: `
-<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
-    <template #incrementbuttonicon>
-        <span class="pi pi-plus" />
-    </template>
-    <template #decrementbuttonicon>
-        <span class="pi pi-minus" />
-    </template>
-</InputNumber>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
-            <template #incrementbuttonicon>
-                <span class="pi pi-plus" />
-            </template>
-            <template #decrementbuttonicon>
-                <span class="pi pi-minus" />
-            </template>
-        </InputNumber>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
-            <template #incrementbuttonicon>
-                <span class="pi pi-plus" />
-            </template>
-            <template #decrementbuttonicon>
-                <span class="pi pi-minus" />
-            </template>
-        </InputNumber>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref(50);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputotp/AccessibilityDoc.vue b/apps/labs/doc/inputotp/AccessibilityDoc.vue
deleted file mode 100644
index 78d025d80..000000000
--- a/apps/labs/doc/inputotp/AccessibilityDoc.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Input OTP uses a set of InputText components, refer to the <NuxtLink to="/inputtext">InputText</NuxtLink> component for more information about the screen reader support.</p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the input otp.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>Moves focus to the next input element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Moves focus to the previous input element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>backspace</i></td>
-                        <td>Deletes the input and moves focus to the previous input element.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/inputotp/BasicDoc.vue b/apps/labs/doc/inputotp/BasicDoc.vue
deleted file mode 100644
index cd7d63588..000000000
--- a/apps/labs/doc/inputotp/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputOtp is used with the <i>v-model</i> property for two-way value binding. The number of characters is defined with the <i>length</i> option, which is set to 4 by default.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputOtp v-model="value" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputotp/FilledDoc.vue b/apps/labs/doc/inputotp/FilledDoc.vue
deleted file mode 100644
index 47a529cf1..000000000
--- a/apps/labs/doc/inputotp/FilledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputOtp v-model="value" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputotp/FormsDoc.vue b/apps/labs/doc/inputotp/FormsDoc.vue
deleted file mode 100644
index 139f8955f..000000000
--- a/apps/labs/doc/inputotp/FormsDoc.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputOtp integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <InputOtp name="passcode" />
-                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                passcode: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    passcode: z.string().min(1, { message: 'Passcode is required.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col gap-1">
-        <InputOtp name="passcode" />
-        <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <InputOtp name="passcode" />
-                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                passcode: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    passcode: z.string().min(1, { message: 'Passcode is required.' })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <InputOtp name="passcode" />
-                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    passcode: ''
-});
-const resolver = ref(zodResolver(
-    z.object({
-        passcode: z.string().min(1, { message: 'Passcode is required.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputotp/ImportDoc.vue b/apps/labs/doc/inputotp/ImportDoc.vue
deleted file mode 100644
index 6c589aa09..000000000
--- a/apps/labs/doc/inputotp/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import InputOtp from 'primevue/inputotp';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputotp/IntegerOnlyDoc.vue b/apps/labs/doc/inputotp/IntegerOnlyDoc.vue
deleted file mode 100644
index 25b29abbf..000000000
--- a/apps/labs/doc/inputotp/IntegerOnlyDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>integerOnly</i> is present, only integers can be accepted as input.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" integerOnly />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputOtp v-model="value" integerOnly />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" integerOnly />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" integerOnly />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputotp/MaskDoc.vue b/apps/labs/doc/inputotp/MaskDoc.vue
deleted file mode 100644
index f80fbec8e..000000000
--- a/apps/labs/doc/inputotp/MaskDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enable the <i>mask</i> option to hide the values in the input fields.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" mask />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputOtp v-model="value" mask />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" mask />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value" mask />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputotp/SampleDoc.vue b/apps/labs/doc/inputotp/SampleDoc.vue
deleted file mode 100644
index 9735ff581..000000000
--- a/apps/labs/doc/inputotp/SampleDoc.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A sample UI implementation with templating and additional elements.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-col items-center">
-            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
-            <InputOtp v-model="value" :length="6" style="gap: 0">
-                <template #default="{ attrs, events, index }">
-                    <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-                    <div v-if="index === 3" class="px-4">
-                        <i class="pi pi-minus" />
-                    </div>
-                </template>
-            </InputOtp>
-            <div class="flex justify-between mt-8 self-stretch">
-                <Button label="Resend Code" link class="p-0"></Button>
-                <Button label="Submit Code"></Button>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<div class="flex flex-col items-center">
-    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-    <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
-    <InputOtp v-model="value" :length="6" style="gap: 0">
-        <template #default="{ attrs, events, index }">
-            <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-            <div v-if="index === 3" class="px-4">
-                <i class="pi pi-minus" />
-            </div>
-        </template>
-    </InputOtp>
-    <div class="flex justify-between mt-8 self-stretch">
-        <Button label="Resend Code" link class="p-0"></Button>
-        <Button label="Submit Code"></Button>
-    </div>
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col items-center">
-            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
-            <InputOtp v-model="value" :length="6" style="gap: 0">
-                <template #default="{ attrs, events, index }">
-                    <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-                    <div v-if="index === 3" class="px-4">
-                        <i class="pi pi-minus" />
-                    </div>
-                </template>
-            </InputOtp>
-            <div class="flex justify-between mt-8 self-stretch">
-                <Button label="Resend Code" link class="p-0"></Button>
-                <Button label="Submit Code"></Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-
-<style scoped>
-.custom-otp-input {
-    width: 48px;
-    height: 48px;
-    font-size: 24px;
-    appearance: none;
-    text-align: center;
-    transition: all 0.2s;
-    border-radius: 0;
-    border: 1px solid var(--p-inputtext-border-color);
-    background: transparent;
-    outline-offset: -2px;
-    outline-color: transparent;
-    border-right: 0 none;
-    transition: outline-color 0.3s;
-    color: var(--p-inputtext-color);
-}
-
-.custom-otp-input:focus {
-    outline: 2px solid var(--p-focus-ring-color);
-}
-
-.custom-otp-input:first-child,
-.custom-otp-input:nth-child(5) {
-    border-top-left-radius: 12px;
-    border-bottom-left-radius: 12px;
-}
-
-.custom-otp-input:nth-child(3),
-.custom-otp-input:last-child {
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
-    border-right-width: 1px;
-    border-right-style: solid;
-    border-color: var(--p-inputtext-border-color);
-}
-<\/style>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col items-center">
-            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
-            <InputOtp v-model="value" :length="6" style="gap: 0">
-                <template #default="{ attrs, events, index }">
-                    <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-                    <div v-if="index === 3" class="px-4">
-                        <i class="pi pi-minus" />
-                    </div>
-                </template>
-            </InputOtp>
-            <div class="flex justify-between mt-8 self-stretch">
-                <Button label="Resend Code" link class="p-0"></Button>
-                <Button label="Submit Code"></Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-
-<style scoped>
-.custom-otp-input {
-    width: 48px;
-    height: 48px;
-    font-size: 24px;
-    appearance: none;
-    text-align: center;
-    transition: all 0.2s;
-    border-radius: 0;
-    border: 1px solid var(--p-inputtext-border-color);
-    background: transparent;
-    outline-offset: -2px;
-    outline-color: transparent;
-    border-right: 0 none;
-    transition: outline-color 0.3s;
-    color: var(--p-inputtext-color);
-}
-
-.custom-otp-input:focus {
-    outline: 2px solid var(--p-focus-ring-color);
-}
-
-.custom-otp-input:first-child,
-.custom-otp-input:nth-child(5) {
-    border-top-left-radius: 12px;
-    border-bottom-left-radius: 12px;
-}
-
-.custom-otp-input:nth-child(3),
-.custom-otp-input:last-child {
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
-    border-right-width: 1px;
-    border-right-style: solid;
-    border-color: var(--p-inputtext-border-color);
-}
-<\/style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.custom-otp-input {
-    width: 48px;
-    height: 48px;
-    font-size: 24px;
-    appearance: none;
-    text-align: center;
-    transition: all 0.2s;
-    border-radius: 0;
-    border: 1px solid var(--p-inputtext-border-color);
-    background: transparent;
-    outline-offset: -2px;
-    outline-color: transparent;
-    border-right: 0 none;
-    transition: outline-color 0.3s;
-    color: var(--p-inputtext-color);
-}
-
-.custom-otp-input:focus {
-    outline: 2px solid var(--p-focus-ring-color);
-}
-
-.custom-otp-input:first-child,
-.custom-otp-input:nth-child(5) {
-    border-top-left-radius: 12px;
-    border-bottom-left-radius: 12px;
-}
-
-.custom-otp-input:nth-child(3),
-.custom-otp-input:last-child {
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
-    border-right-width: 1px;
-    border-right-style: solid;
-    border-color: var(--p-inputtext-border-color);
-}
-</style>
diff --git a/apps/labs/doc/inputotp/SizesDoc.vue b/apps/labs/doc/inputotp/SizesDoc.vue
deleted file mode 100644
index 1ff38ad04..000000000
--- a/apps/labs/doc/inputotp/SizesDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputOtp provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <InputOtp v-model="value1" size="small" />
-        <InputOtp v-model="value2" />
-        <InputOtp v-model="value3" size="large" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<InputOtp v-model="value1" size="small" />
-<InputOtp v-model="value2" />
-<InputOtp v-model="value3" size="large" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputOtp v-model="value1" size="small" />
-        <InputOtp v-model="value2" />
-        <InputOtp v-model="value3" size="large" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputOtp v-model="value1" size="small" />
-        <InputOtp v-model="value2" />
-        <InputOtp v-model="value3" size="large" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputotp/TemplateDoc.vue b/apps/labs/doc/inputotp/TemplateDoc.vue
deleted file mode 100644
index de3189954..000000000
--- a/apps/labs/doc/inputotp/TemplateDoc.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value">
-            <template #default="{ attrs, events }">
-                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-            </template>
-        </InputOtp>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputOtp v-model="value">
-    <template #default="{ attrs, events }">
-        <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-    </template>
-</InputOtp>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value">
-            <template #default="{ attrs, events }">
-                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-            </template>
-        </InputOtp>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-
-<style scoped>
-.custom-otp-input {
-    width: 40px;
-    font-size: 36px;
-    border: 0 none;
-    appearance: none;
-    text-align: center;
-    transition: all 0.2s;
-    background: transparent;
-    border-bottom: 2px solid var(--p-inputtext-border-color);
-}
-
-.custom-otp-input:focus {
-    outline: 0 none;
-    border-bottom-color: var(--p-primary-color);
-}
-<\/style>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputOtp v-model="value">
-            <template #default="{ attrs, events }">
-                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-            </template>
-        </InputOtp>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-
-<style scoped>
-.custom-otp-input {
-    width: 40px;
-    font-size: 36px;
-    border: 0 none;
-    appearance: none;
-    text-align: center;
-    transition: all 0.2s;
-    background: transparent;
-    border-bottom: 2px solid var(--p-inputtext-border-color);
-}
-
-.custom-otp-input:focus {
-    outline: 0 none;
-    border-bottom-color: var(--p-primary-color);
-}
-<\/style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.custom-otp-input {
-    width: 40px;
-    font-size: 36px;
-    border: 0 none;
-    appearance: none;
-    text-align: center;
-    transition: all 0.2s;
-    background: transparent;
-    border-bottom: 2px solid var(--p-inputtext-border-color);
-}
-
-.custom-otp-input:focus {
-    outline: 0 none;
-    border-bottom-color: var(--p-primary-color);
-}
-</style>
diff --git a/apps/labs/doc/inputtext/AccessibilityDoc.vue b/apps/labs/doc/inputtext/AccessibilityDoc.vue
deleted file mode 100644
index f983c8af6..000000000
--- a/apps/labs/doc/inputtext/AccessibilityDoc.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
-            <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the input.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="firstname">Firstname</label>
-<InputText id="firstname" />
-
-<span id="lastname">Lastname</span>
-<InputText aria-labelledby="lastname" />
-
-<InputText aria-label="Age"/>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputtext/BasicDoc.vue b/apps/labs/doc/inputtext/BasicDoc.vue
index 804f28e79..8afeb5d08 100644
--- a/apps/labs/doc/inputtext/BasicDoc.vue
+++ b/apps/labs/doc/inputtext/BasicDoc.vue
@@ -3,53 +3,29 @@
         <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <InputText v-model="value" type="text" />
+        <PlexInputText v-model="value" />
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputText type="text" v-model="value" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputText type="text" v-model="value" />
-    </div>
-</template>
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
 
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-        
-`,
-                composition: `
+const value = ref(null);
+
+const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <InputText type="text" v-model="value" />
+        <PlexInputText v-model="value" />
     </div>
 </template>
 
 <script setup>
+import PlexInputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
 <\/script>
-        `
-            }
-        };
-    }
-};
+`);
 </script>
diff --git a/apps/labs/doc/inputtext/DisabledDoc.vue b/apps/labs/doc/inputtext/DisabledDoc.vue
index 6b42f75a0..c52e9e31a 100644
--- a/apps/labs/doc/inputtext/DisabledDoc.vue
+++ b/apps/labs/doc/inputtext/DisabledDoc.vue
@@ -3,52 +3,29 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <InputText v-model="value" disabled placeholder="Disabled" />
+        <PlexInputText v-model="value" disabled placeholder="Disabled" />
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputText v-model="value" disabled placeholder="Disabled" />
-`,
-                options: `
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <InputText v-model="value" disabled placeholder="Disabled" />
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputText v-model="value" disabled placeholder="Disabled" />
+        <PlexInputText v-model="value" disabled placeholder="Disabled" />
     </div>
 </template>
 
 <script setup>
+import PlexInputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
 <\/script>
-`
-            }
-        };
-    }
-};
+`);
 </script>
diff --git a/apps/labs/doc/inputtext/FilledDoc.vue b/apps/labs/doc/inputtext/FilledDoc.vue
deleted file mode 100644
index 11ff03fa0..000000000
--- a/apps/labs/doc/inputtext/FilledDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputText type="text" v-model="value" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputtext/FloatLabelDoc.vue b/apps/labs/doc/inputtext/FloatLabelDoc.vue
deleted file mode 100644
index 8ea88ae27..000000000
--- a/apps/labs/doc/inputtext/FloatLabelDoc.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputText id="over_label" v-model="value1" autocomplete="off" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="on_label" v-model="value3" autocomplete="off" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<FloatLabel>
-    <InputText id="over_label" v-model="value1" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <InputText id="in_label" v-model="value2" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <InputText id="on_label" v-model="value3" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputText id="over_label" v-model="value1" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value2" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="on_label" v-model="value3" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <InputText id="over_label" v-model="value1" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value2" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <InputText id="on_label" v-model="value3" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputtext/FormsDoc.vue b/apps/labs/doc/inputtext/FormsDoc.vue
deleted file mode 100644
index 3e59714f2..000000000
--- a/apps/labs/doc/inputtext/FormsDoc.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputText integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
-            </div>
-            <div class="flex flex-col gap-1">
-                <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                username: '',
-                email: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    username: z.string().min(1, { message: 'Username is required.' }),
-                    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-    <div class="flex flex-col gap-1">
-        <InputText name="username" type="text" placeholder="Username" />
-        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
-    </div>
-    <div class="flex flex-col gap-1">
-        <InputText name="email" type="text" placeholder="Email" />
-        <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
-            </div>
-            <div class="flex flex-col gap-1">
-                <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                username: '',
-                email: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    username: z.string().min(1, { message: 'Username is required.' }),
-                    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
-            </div>
-            <div class="flex flex-col gap-1">
-                <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    username: '',
-    email: ''
-});
-
-const resolver = ref(zodResolver(
-    z.object({
-        username: z.string().min(1, { message: 'Username is required.' }),
-        email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputtext/HelpTextDoc.vue b/apps/labs/doc/inputtext/HelpTextDoc.vue
index 83b6772a1..dd00e6884 100644
--- a/apps/labs/doc/inputtext/HelpTextDoc.vue
+++ b/apps/labs/doc/inputtext/HelpTextDoc.vue
@@ -3,68 +3,29 @@
         <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <div class="flex flex-col gap-2">
-            <label for="username">Username</label>
-            <InputText id="username" v-model="value" aria-describedby="username-help" />
-            <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
-        </div>
+        <PlexInputText v-model="value" type="text" />
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<div class="flex flex-col gap-2">
-    <label for="username">Username</label>
-    <InputText id="username" v-model="value" aria-describedby="username-help" />
-    <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
-</div>
-`,
-                options: `
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <div class="flex flex-col gap-2">
-            <label for="username">Username</label>
-            <InputText id="username" v-model="value" aria-describedby="username-help" />
-            <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
-        </div>
-    </div>
-</template>
-
-<script setup>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-2">
-            <label for="username">Username</label>
-            <InputText id="username" v-model="value" aria-describedby="username-help" />
-            <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
-        </div>
+        <PlexInputText v-model="value" type="text" />
     </div>
 </template>
 
 <script setup>
+import PlexInputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
 <\/script>
-`
-            }
-        };
-    }
-};
+`);
 </script>
diff --git a/apps/labs/doc/inputtext/IftaLabelDoc.vue b/apps/labs/doc/inputtext/IftaLabelDoc.vue
deleted file mode 100644
index 9c182948d..000000000
--- a/apps/labs/doc/inputtext/IftaLabelDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" autocomplete="off" variant="filled" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<IftaLabel>
-    <InputText id="username" v-model="value" variant="filled" />
-    <label for="username">Username</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" variant="filled" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <InputText id="username" v-model="value" variant="filled" />
-            <label for="username">Username</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputtext/ImportDoc.vue b/apps/labs/doc/inputtext/ImportDoc.vue
index c17eaa393..435eb2576 100644
--- a/apps/labs/doc/inputtext/ImportDoc.vue
+++ b/apps/labs/doc/inputtext/ImportDoc.vue
@@ -1,17 +1,15 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    <DocSectionCode :code="code" lang="script" />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
-                basic: `
-import InputText from 'primevue/inputtext';
+            code: `
+import InputText from '@/plex/inputtext';
 `
-            }
         };
     }
 };
diff --git a/apps/labs/doc/inputtext/InvalidDoc.vue b/apps/labs/doc/inputtext/InvalidDoc.vue
index 53351ae6b..a2e5f07dd 100644
--- a/apps/labs/doc/inputtext/InvalidDoc.vue
+++ b/apps/labs/doc/inputtext/InvalidDoc.vue
@@ -2,60 +2,30 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            code: {
-                basic: `
-<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
-<InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
-    </div>
-</template>
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
 
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: ''
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
+const value = ref('');
+
+const code = ref(`
 <template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
 </template>
 
 <script setup>
+import PlexInputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
-const value1 = ref('');
-const value2 = ref('');
+const value = ref(null);
 <\/script>
-`
-            }
-        };
-    }
-};
+`);
 </script>
diff --git a/apps/labs/doc/inputtext/SizesDoc.vue b/apps/labs/doc/inputtext/SizesDoc.vue
index b76917666..0995afe07 100644
--- a/apps/labs/doc/inputtext/SizesDoc.vue
+++ b/apps/labs/doc/inputtext/SizesDoc.vue
@@ -1,68 +1,39 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+        <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <InputText v-model="value2" type="text" placeholder="Normal" />
-        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
+        <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <PlexInputText v-model="value2" type="text" placeholder="Normal" />
+        <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<InputText v-model="value1" type="text" size="small" placeholder="Small" />
-<InputText v-model="value2" type="text" placeholder="Normal" />
-<InputText v-model="value3" type="text" size="large" placeholder="Large" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <InputText v-model="value2" type="text" placeholder="Normal" />
-        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
-    </div>
-</template>
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
 
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <InputText v-model="value2" type="text" placeholder="Normal" />
-        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
+        <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <PlexInputText v-model="value2" type="text" placeholder="Normal" />
+        <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
 </template>
 
 <script setup>
+import PlexInputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);
 const value2 = ref(null);
 const value3 = ref(null);
 <\/script>
-`
-            }
-        };
-    }
-};
+`);
 </script>
diff --git a/apps/labs/doc/introduction/ArchitectureDoc.vue b/apps/labs/doc/introduction/ArchitectureDoc.vue
new file mode 100644
index 000000000..d7ce94f33
--- /dev/null
+++ b/apps/labs/doc/introduction/ArchitectureDoc.vue
@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Plex is a spin-off library in the Prime UI ecosystem, that operates on the code ownership model. Plex leverages the flexibility of Unstyled PrimeVue and the utility-first framework of Tailwind CSS for enhanced functionality.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/labs/doc/knob/AccessibilityDoc.vue b/apps/labs/doc/knob/AccessibilityDoc.vue
deleted file mode 100644
index 77fcc1b93..000000000
--- a/apps/labs/doc/knob/AccessibilityDoc.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Knob element component uses <i>slider</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
-            <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the slider.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">left arrow</i>
-                                <i>down arrow</i>
-                            </span>
-                        </td>
-                        <td>Decrements the value.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">right arrow</i>
-                                <i>up arrow</i>
-                            </span>
-                        </td>
-                        <td>Increments the value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Set the minimum value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Set the maximum value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>page up</i></td>
-                        <td>Increments the value by 10 steps.</td>
-                    </tr>
-                    <tr>
-                        <td><i>page down</i></td>
-                        <td>Decrements the value by 10 steps.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="label_number">Number</span>
-<Knob aria-labelledby="label_number" />
-
-<Knob aria-label="Number" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/BasicDoc.vue b/apps/labs/doc/knob/BasicDoc.vue
deleted file mode 100644
index 915053633..000000000
--- a/apps/labs/doc/knob/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Knob is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 0,
-            code: {
-                basic: `
-<Knob v-model="value" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 0
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/ColorDoc.vue b/apps/labs/doc/knob/ColorDoc.vue
deleted file mode 100644
index a0b65d7a4..000000000
--- a/apps/labs/doc/knob/ColorDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            <i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the stroke
-            of range and value sections.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50,
-            code: {
-                basic: `
-<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
-`,
-                options: `
-<template>
-  <div class="card flex justify-center">
-      <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-      return {
-          value: 50
-      }
-  }
-};
-<\/script>
-`,
-                composition: `
-<template>
-  <div class="card flex justify-center">
-      <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/DisabledDoc.vue b/apps/labs/doc/knob/DisabledDoc.vue
deleted file mode 100644
index 6d0fe13b8..000000000
--- a/apps/labs/doc/knob/DisabledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50,
-            code: {
-                basic: `
-<Knob v-model="value" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/FormsDoc.vue b/apps/labs/doc/knob/FormsDoc.vue
deleted file mode 100644
index 465a3f914..000000000
--- a/apps/labs/doc/knob/FormsDoc.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Knob integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-1">
-                <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                knob: 15
-            },
-            resolver: zodResolver(
-                z.object({
-                    knob: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col items-center gap-1">
-        <Knob name="knob" />
-        <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-1">
-                <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <Toast />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                knob: 15
-            },
-            resolver: zodResolver(
-                z.object({
-                    knob: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-1">
-                <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-
-const toast = useToast();
-const initialValues = ref({
-    knob: 15
-});
-const resolver = ref(zodResolver(
-    z.object({
-        knob: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/ImportDoc.vue b/apps/labs/doc/knob/ImportDoc.vue
deleted file mode 100644
index 0e19e0664..000000000
--- a/apps/labs/doc/knob/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Knob from 'primevue/knob';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/MinMaxDoc.vue b/apps/labs/doc/knob/MinMaxDoc.vue
deleted file mode 100644
index 7dcbbc269..000000000
--- a/apps/labs/doc/knob/MinMaxDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" :min="-50" :max="50" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 10,
-            code: {
-                basic: `
-<Knob v-model="value" :min="-50" :max="50" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" :min="-50" :max="50" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 10
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" :min="-50" :max="50" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(10);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/ReactiveDoc.vue b/apps/labs/doc/knob/ReactiveDoc.vue
deleted file mode 100644
index 774be6264..000000000
--- a/apps/labs/doc/knob/ReactiveDoc.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Knob can be controlled with custom controls as well.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-2">
-        <Knob v-model="value" :size="150" readonly />
-        <div class="flex gap-2">
-            <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
-            <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 0,
-            code: {
-                basic: `
-<Knob v-model="value" :size="150" readonly />
-<div class="flex gap-2">
-    <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
-    <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-2">
-        <Knob v-model="value" :size="150" readonly />
-        <div class="flex gap-2">
-            <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
-            <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-  data() {
-      return {
-          value: 0
-      }
-  }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-2">
-        <Knob v-model="value" :size="150" readonly />
-        <div class="flex gap-2">
-            <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
-            <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/ReadOnlyDoc.vue b/apps/labs/doc/knob/ReadOnlyDoc.vue
deleted file mode 100644
index 93b9f42ae..000000000
--- a/apps/labs/doc/knob/ReadOnlyDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>readonly</i> present, value cannot be edited.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" readonly />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50,
-            code: {
-                basic: `
-<Knob v-model="value" readonly />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" readonly />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" readonly />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/SizeDoc.vue b/apps/labs/doc/knob/SizeDoc.vue
deleted file mode 100644
index 346cb5a7f..000000000
--- a/apps/labs/doc/knob/SizeDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Diameter of the knob is defined in pixels using the <i>size</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" :size="200" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 60,
-            code: {
-                basic: `
-<Knob v-model="value" :size="200" />
-`,
-                options: `
-<template>
-  <div class="card flex justify-center">
-      <Knob v-model="value" :size="200" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-      return {
-          value: 60
-      }
-  }
-};
-<\/script>
-`,
-                composition: `
-<template>
-  <div class="card flex justify-center">
-      <Knob v-model="value" :size="200" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(60);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/StepDoc.vue b/apps/labs/doc/knob/StepDoc.vue
deleted file mode 100644
index 4bc717125..000000000
--- a/apps/labs/doc/knob/StepDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" :step="10" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 40,
-            code: {
-                basic: `
-<Knob v-model="value5" :step="10" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" :step="10" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 40
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" :step="10" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(40);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/StrokeDoc.vue b/apps/labs/doc/knob/StrokeDoc.vue
deleted file mode 100644
index fd7a167c5..000000000
--- a/apps/labs/doc/knob/StrokeDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The border size is specified with the <i>stroke</i> property as a number in pixels.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" :strokeWidth="5" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 40,
-            code: {
-                basic: `
-<Knob v-model="value" :strokeWidth="5" />
-`,
-                options: `
-<template>
-  <div class="card flex justify-center">
-      <Knob v-model="value" :strokeWidth="5" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-      return {
-          value: 40
-      }
-  }
-};
-<\/script>
-`,
-                composition: `
-<template>
-  <div class="card flex justify-center">
-      <Knob v-model="value" :strokeWidth="5" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(40);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/knob/TemplateDoc.vue b/apps/labs/doc/knob/TemplateDoc.vue
deleted file mode 100644
index 974f494eb..000000000
--- a/apps/labs/doc/knob/TemplateDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The label can be customized with the <i>valueTemplate</i> property using either a template string or a function.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Knob v-model="value" valueTemplate="{value}%" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 60,
-            code: {
-                basic: `
-<Knob v-model="value" valueTemplate="{value}%" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" valueTemplate="{value}%" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 60
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" valueTemplate="{value}%" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(60);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/AccessibilityDoc.vue b/apps/labs/doc/listbox/AccessibilityDoc.vue
deleted file mode 100644
index 775219328..000000000
--- a/apps/labs/doc/listbox/AccessibilityDoc.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can be provided <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute that sets to true when multiple selection is
-            enabled. Each list item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
-        </p>
-        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.</p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Toggles the selected state of the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the selected state of the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>down arrow</i></td>
-                        <td>Moves focus to the next option and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>up arrow</i></td>
-                        <td>Moves focus to the previous option and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>space</i></td>
-                        <td>Selects the items between the most recently selected option and the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
-                        <td>Selects the focused options and all the options up to the first one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
-                        <td>Selects the focused options and all the options down to the last one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>a</i></td>
-                        <td>Selects all options.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageUp</i></td>
-                        <td>Jumps visual focus to first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageDown</i></td>
-                        <td>Jumps visual focus to last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Filter Input Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Closes the popup and moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup and moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next focusable element in the component. If there is none, moves focus to next element in page.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="lb"></span>Options</span>
-<Listbox aria-labelledby="lb" />
-
-<Listbox aria-label="City" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/BasicDoc.vue b/apps/labs/doc/listbox/BasicDoc.vue
deleted file mode 100644
index fd59606ab..000000000
--- a/apps/labs/doc/listbox/BasicDoc.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Listbox is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
-            that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/CheckmarkDoc.vue b/apps/labs/doc/listbox/CheckmarkDoc.vue
deleted file mode 100644
index f3998037b..000000000
--- a/apps/labs/doc/listbox/CheckmarkDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/DisabledDoc.vue b/apps/labs/doc/listbox/DisabledDoc.vue
deleted file mode 100644
index 68c6eed47..000000000
--- a/apps/labs/doc/listbox/DisabledDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/FilterDoc.vue b/apps/labs/doc/listbox/FilterDoc.vue
deleted file mode 100644
index 26e481925..000000000
--- a/apps/labs/doc/listbox/FilterDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Listbox provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/FormsDoc.vue b/apps/labs/doc/listbox/FormsDoc.vue
deleted file mode 100644
index b39638542..000000000
--- a/apps/labs/doc/listbox/FormsDoc.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Listbox integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                city: { name: '' }
-            },
-            resolver: zodResolver(
-                z.object({
-                    city: z.union([
-                        z.object({
-                            name: z.string().min(1, 'City is required.')
-                        }),
-                        z.any().refine((val) => false, { message: 'City is required.' })
-                    ])
-                })
-            ),
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-    <div class="flex flex-col gap-1">
-        <Listbox name="city" :options="cities" optionLabel="name" fluid />
-        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                city: { name: '' }
-            },
-            resolver: zodResolver(
-                z.object({
-                    city: z.union([
-                        z.object({
-                            name: z.string().min(1, 'City is required.')
-                        }),
-                        z.any().refine((val) => false, { message: 'City is required.' })
-                    ])
-                })
-            ),
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-1">
-                <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    city: { name: '' }
-});
-const resolver = ref(zodResolver(
-    z.object({
-        city: z.union([
-            z.object({
-                name: z.string().min(1, 'City is required.')
-            }),
-            z.any().refine((val) => false, { message: 'City is required.' })
-        ])
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/GroupDoc.vue b/apps/labs/doc/listbox/GroupDoc.vue
deleted file mode 100644
index 6824d9332..000000000
--- a/apps/labs/doc/listbox/GroupDoc.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the children
-            of a group.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </Listbox>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            groupedCities: [
-                {
-                    label: 'Germany',
-                    code: 'DE',
-                    items: [
-                        { label: 'Berlin', value: 'Berlin' },
-                        { label: 'Frankfurt', value: 'Frankfurt' },
-                        { label: 'Hamburg', value: 'Hamburg' },
-                        { label: 'Munich', value: 'Munich' }
-                    ]
-                },
-                {
-                    label: 'USA',
-                    code: 'US',
-                    items: [
-                        { label: 'Chicago', value: 'Chicago' },
-                        { label: 'Los Angeles', value: 'Los Angeles' },
-                        { label: 'New York', value: 'New York' },
-                        { label: 'San Francisco', value: 'San Francisco' }
-                    ]
-                },
-                {
-                    label: 'Japan',
-                    code: 'JP',
-                    items: [
-                        { label: 'Kyoto', value: 'Kyoto' },
-                        { label: 'Osaka', value: 'Osaka' },
-                        { label: 'Tokyo', value: 'Tokyo' },
-                        { label: 'Yokohama', value: 'Yokohama' }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
-    <template #optiongroup="slotProps">
-        <div class="flex items-center">
-            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-            <div>{{ slotProps.option.label }}</div>
-        </div>
-    </template>
-</Listbox>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </Listbox>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            groupedCities: [
-                {
-                    label: 'Germany',
-                    code: 'DE',
-                    items: [
-                        { label: 'Berlin', value: 'Berlin' },
-                        { label: 'Frankfurt', value: 'Frankfurt' },
-                        { label: 'Hamburg', value: 'Hamburg' },
-                        { label: 'Munich', value: 'Munich' }
-                    ]
-                },
-                {
-                    label: 'USA',
-                    code: 'US',
-                    items: [
-                        { label: 'Chicago', value: 'Chicago' },
-                        { label: 'Los Angeles', value: 'Los Angeles' },
-                        { label: 'New York', value: 'New York' },
-                        { label: 'San Francisco', value: 'San Francisco' }
-                    ]
-                },
-                {
-                    label: 'Japan',
-                    code: 'JP',
-                    items: [
-                        { label: 'Kyoto', value: 'Kyoto' },
-                        { label: 'Osaka', value: 'Osaka' },
-                        { label: 'Tokyo', value: 'Tokyo' },
-                        { label: 'Yokohama', value: 'Yokohama' }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </Listbox>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const groupedCities = ref([
-    {
-        label: 'Germany',
-        code: 'DE',
-        items: [
-            { label: 'Berlin', value: 'Berlin' },
-            { label: 'Frankfurt', value: 'Frankfurt' },
-            { label: 'Hamburg', value: 'Hamburg' },
-            { label: 'Munich', value: 'Munich' }
-        ]
-    },
-    {
-        label: 'USA',
-        code: 'US',
-        items: [
-            { label: 'Chicago', value: 'Chicago' },
-            { label: 'Los Angeles', value: 'Los Angeles' },
-            { label: 'New York', value: 'New York' },
-            { label: 'San Francisco', value: 'San Francisco' }
-        ]
-    },
-    {
-        label: 'Japan',
-        code: 'JP',
-        items: [
-            { label: 'Kyoto', value: 'Kyoto' },
-            { label: 'Osaka', value: 'Osaka' },
-            { label: 'Tokyo', value: 'Tokyo' },
-            { label: 'Yokohama', value: 'Yokohama' }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/ImportDoc.vue b/apps/labs/doc/listbox/ImportDoc.vue
deleted file mode 100644
index 66f60f8af..000000000
--- a/apps/labs/doc/listbox/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Listbox from 'primevue/listbox';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/InvalidDoc.vue b/apps/labs/doc/listbox/InvalidDoc.vue
deleted file mode 100644
index fd063c8c8..000000000
--- a/apps/labs/doc/listbox/InvalidDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null"  class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null"  class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null"  class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/MultipleDoc.vue b/apps/labs/doc/listbox/MultipleDoc.vue
deleted file mode 100644
index 712658fc3..000000000
--- a/apps/labs/doc/listbox/MultipleDoc.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Listbox allows choosing a single item by default, enable <i>multiple</i> property to choose more than one. When the optional <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new item requires meta key to
-            be present.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/TemplateDoc.vue b/apps/labs/doc/listbox/TemplateDoc.vue
deleted file mode 100644
index 3ff0fe1e3..000000000
--- a/apps/labs/doc/listbox/TemplateDoc.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content for an option is displayed with the <i>option</i> slot that takes an option as a parameter. Additional available templating sections are <i>filter</i> and <i>optionGroup</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-        </Listbox>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCountry: null,
-            countries: [
-                { name: 'Australia', code: 'AU' },
-                { name: 'Brazil', code: 'BR' },
-                { name: 'China', code: 'CN' },
-                { name: 'Egypt', code: 'EG' },
-                { name: 'France', code: 'FR' },
-                { name: 'Germany', code: 'DE' },
-                { name: 'India', code: 'IN' },
-                { name: 'Japan', code: 'JP' },
-                { name: 'Spain', code: 'ES' },
-                { name: 'United States', code: 'US' }
-            ],
-            code: {
-                basic: `
-<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
-    <template #option="slotProps">
-        <div class="flex items-center">
-            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-            <div>{{ slotProps.option.name }}</div>
-        </div>
-    </template>
-</Listbox>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-        </Listbox>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCountry: null,
-            countries: [
-                { name: 'Australia', code: 'AU' },
-                { name: 'Brazil', code: 'BR' },
-                { name: 'China', code: 'CN' },
-                { name: 'Egypt', code: 'EG' },
-                { name: 'France', code: 'FR' },
-                { name: 'Germany', code: 'DE' },
-                { name: 'India', code: 'IN' },
-                { name: 'Japan', code: 'JP' },
-                { name: 'Spain', code: 'ES' },
-                { name: 'United States', code: 'US' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-        </Listbox>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCountry = ref();
-const countries = ref([
-    { name: 'Australia', code: 'AU' },
-    { name: 'Brazil', code: 'BR' },
-    { name: 'China', code: 'CN' },
-    { name: 'Egypt', code: 'EG' },
-    { name: 'France', code: 'FR' },
-    { name: 'Germany', code: 'DE' },
-    { name: 'India', code: 'IN' },
-    { name: 'Japan', code: 'JP' },
-    { name: 'Spain', code: 'ES' },
-    { name: 'United States', code: 'US' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/listbox/VirtualScrollDoc.vue b/apps/labs/doc/listbox/VirtualScrollDoc.vue
deleted file mode 100644
index c089db856..000000000
--- a/apps/labs/doc/listbox/VirtualScrollDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the
-            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by Listbox.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedItem: null,
-            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
-            code: {
-                basic: `
-<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedItem: null,
-            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedItem = ref();
-const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/megamenu/AccessibilityDoc.vue b/apps/labs/doc/megamenu/AccessibilityDoc.vue
deleted file mode 100644
index ead362289..000000000
--- a/apps/labs/doc/megamenu/AccessibilityDoc.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            MegaMenu component uses the <i>menubar</i> role along with <i>aria-orientation</i> and the value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
-            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MegaMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the
-            id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i> and <i>aria-expanded</i> to define the relation between the item and the submenu.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>If focus is inside a popup menu, moves focus to the first element in the submenu otherwise closes the submenu and moves focus to the root item of the closed submenu in horizontal mode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>If focus is on a root element, moves focus to the next menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the next menu group.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>If focus is on a root element, moves focus to the previous menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the previous menu group.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/megamenu/BasicDoc.vue b/apps/labs/doc/megamenu/BasicDoc.vue
deleted file mode 100644
index 827a385b3..000000000
--- a/apps/labs/doc/megamenu/BasicDoc.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>MegaMenu requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card lg:px-20">
-        <MegaMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Furniture',
-                    icon: 'pi pi-box',
-                    items: [
-                        [
-                            {
-                                label: 'Living Room',
-                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Kitchen',
-                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
-                            },
-                            {
-                                label: 'Bathroom',
-                                items: [{ label: 'Accessories' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Bedroom',
-                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Office',
-                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Electronics',
-                    icon: 'pi pi-mobile',
-                    items: [
-                        [
-                            {
-                                label: 'Computer',
-                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Home Theater',
-                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Gaming',
-                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Appliances',
-                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Sports',
-                    icon: 'pi pi-clock',
-                    items: [
-                        [
-                            {
-                                label: 'Football',
-                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Running',
-                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Swimming',
-                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Tennis',
-                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
-                            }
-                        ]
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<MegaMenu :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <MegaMenu :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Furniture',
-                    icon: 'pi pi-box',
-                    items: [
-                        [
-                            {
-                                label: 'Living Room',
-                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Kitchen',
-                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
-                            },
-                            {
-                                label: 'Bathroom',
-                                items: [{ label: 'Accessories' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Bedroom',
-                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Office',
-                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Electronics',
-                    icon: 'pi pi-mobile',
-                    items: [
-                        [
-                            {
-                                label: 'Computer',
-                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Home Theater',
-                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Gaming',
-                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Appliances',
-                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Sports',
-                    icon: 'pi pi-clock',
-                    items: [
-                        [
-                            {
-                                label: 'Football',
-                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Running',
-                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Swimming',
-                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Tennis',
-                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
-                            }
-                        ]
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MegaMenu :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Furniture',
-        icon: 'pi pi-box',
-        items: [
-            [
-                {
-                    label: 'Living Room',
-                    items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
-                }
-            ],
-            [
-                {
-                    label: 'Kitchen',
-                    items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
-                },
-                {
-                    label: 'Bathroom',
-                    items: [{ label: 'Accessories' }]
-                }
-            ],
-            [
-                {
-                    label: 'Bedroom',
-                    items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
-                }
-            ],
-            [
-                {
-                    label: 'Office',
-                    items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Electronics',
-        icon: 'pi pi-mobile',
-        items: [
-            [
-                {
-                    label: 'Computer',
-                    items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
-                }
-            ],
-            [
-                {
-                    label: 'Home Theater',
-                    items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
-                }
-            ],
-            [
-                {
-                    label: 'Gaming',
-                    items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
-                }
-            ],
-            [
-                {
-                    label: 'Appliances',
-                    items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Sports',
-        icon: 'pi pi-clock',
-        items: [
-            [
-                {
-                    label: 'Football',
-                    items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
-                }
-            ],
-            [
-                {
-                    label: 'Running',
-                    items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
-                }
-            ],
-            [
-                {
-                    label: 'Swimming',
-                    items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
-                }
-            ],
-            [
-                {
-                    label: 'Tennis',
-                    items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
-                }
-            ]
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/megamenu/CommandDoc.vue b/apps/labs/doc/megamenu/CommandDoc.vue
deleted file mode 100644
index 32c099f53..000000000
--- a/apps/labs/doc/megamenu/CommandDoc.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property of a menuitem defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-{
-    label: 'Log out',
-    icon: 'pi pi-signout',
-    command: () => {
-        // Callback to run
-    }
-}
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/megamenu/ImportDoc.vue b/apps/labs/doc/megamenu/ImportDoc.vue
deleted file mode 100644
index 0dd5cf79f..000000000
--- a/apps/labs/doc/megamenu/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import MegaMenu from 'primevue/megamenu';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/megamenu/RouterDoc.vue b/apps/labs/doc/megamenu/RouterDoc.vue
deleted file mode 100644
index f868a2d9d..000000000
--- a/apps/labs/doc/megamenu/RouterDoc.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<MegaMenu :model="items">
-    <template #item="{ item }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple :href="href" @click="navigate">
-                <span :class="item.icon" />
-                <span class="ml-2">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple :href="item.url" :target="item.target">
-            <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
-        </a>
-    </template>
-</MegaMenu>
-`,
-                options: `
-<template>
-    <div class="card">
-        <MegaMenu :model="items">
-            <template #item="{ item }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                </a>
-            </template>
-        </MegaMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Navigation',
-                    icon: 'pi pi-link',
-                    items: [
-                        [
-                            {
-                                label: 'Router',
-                                items: [
-                                    { label: 'Theming', route: '/slider' },
-                                    { label: 'Unstyled', route: '/slider' }
-                                ]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Programmatic',
-                                items: [
-                                    {
-                                        label: 'Installation',
-                                        command: () => {
-                                            this.$router.push('/slider');
-                                        }
-                                    }
-                                ]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'External',
-                                items: [
-                                    {
-                                        label: 'Vue.js',
-                                        url: 'https://vuejs.org/'
-                                    },
-                                    {
-                                        label: 'Vite.js',
-                                        url: 'https://vuejs.org/'
-                                    }
-                                ]
-                            }
-                        ]
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MegaMenu :model="items">
-            <template #item="{ item }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                </a>
-            </template>
-        </MegaMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Navigation',
-        icon: 'pi pi-link',
-        items: [
-            [
-                {
-                    label: 'Router',
-                    items: [
-                        { label: 'Theming', route: '/slider' },
-                        { label: 'Unstyled', route: '/slider' }
-                    ]
-                }
-            ],
-            [
-                {
-                    label: 'Programmatic',
-                    items: [
-                        {
-                            label: 'Installation',
-                            command: () => {
-                                router.push('/slider');
-                            }
-                        }
-                    ]
-                }
-            ],
-            [
-                {
-                    label: 'External',
-                    items: [
-                        {
-                            label: 'Vue.js',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Vite.js',
-                            url: 'https://vuejs.org/'
-                        }
-                    ]
-                }
-            ]
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/megamenu/TemplateDoc.vue b/apps/labs/doc/megamenu/TemplateDoc.vue
deleted file mode 100644
index 349dab72e..000000000
--- a/apps/labs/doc/megamenu/TemplateDoc.vue
+++ /dev/null
@@ -1,331 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            MegaMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. Additional slots named <i>start</i> and <i>end</i> are provided to embed content before or after the menu.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <MegaMenu :model="items" class="p-4 bg-surface-0 dark:bg-surface-950" style="border-radius: 3rem">
-            <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                    <path
-                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--p-primary-color)"
-                    />
-                    <path
-                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--p-text-color)"
-                    />
-                </svg>
-            </template>
-            <template #item="{ item }">
-                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
-                    <span>{{ item.label }}</span>
-                </a>
-                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
-                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
-                        <i :class="[item.icon, 'text-lg']"></i>
-                    </span>
-                    <span class="inline-flex flex-col gap-1">
-                        <span class="font-bold text-lg">{{ item.label }}</span>
-                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
-                    </span>
-                </a>
-                <div v-else class="flex flex-col items-start gap-4 p-2">
-                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
-                    <span>{{ item.subtext }}</span>
-                    <Button :label="item.label" outlined />
-                </div>
-            </template>
-            <template #end>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            </template>
-        </MegaMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Company',
-                    root: true,
-                    items: [
-                        [
-                            {
-                                items: [
-                                    { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
-                                    { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
-                                    { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
-                                ]
-                            }
-                        ],
-                        [
-                            {
-                                items: [
-                                    { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
-                                    { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
-                                    { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
-                                ]
-                            }
-                        ],
-                        [
-                            {
-                                items: [
-                                    { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
-                                    { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
-                                    { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
-                                ]
-                            }
-                        ],
-                        [
-                            {
-                                items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Resources',
-                    root: true
-                },
-                {
-                    label: 'Contact',
-                    root: true
-                }
-            ],
-            code: {
-                basic: `
-<MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
-    <template #start>
-        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-            <path d="..." fill="var(--p-primary-color)" />
-            <path d="..." fill="var(--p-text-color)" />
-        </svg>
-    </template>
-    <template #item="{ item }">
-        <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
-            <span>{{ item.label }}</span>
-        </a>
-        <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
-            <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
-                <i :class="[item.icon, 'text-lg']"></i>
-            </span>
-            <span class="inline-flex flex-col gap-1">
-                <span class="font-bold text-lg">{{ item.label }}</span>
-                <span class="whitespace-nowrap">{{ item.subtext }}</span>
-            </span>
-        </a>
-        <div v-else class="flex flex-col items-start gap-4 p-2">
-            <img alt="megamenu-demo" :src="item.image" class="w-full" />
-            <span>{{ item.subtext }}</span>
-            <Button :label="item.label" outlined />
-        </div>
-    </template>
-    <template #end>
-        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-    </template>
-</MegaMenu>
-`,
-                options: `
-<template>
-    <div class="card">
-        <MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
-            <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                    <path
-                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--p-primary-color)"
-                    />
-                    <path
-                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--p-text-color)"
-                    />
-                </svg>
-            </template>
-            <template #item="{ item }">
-                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
-                    <span>{{ item.label }}</span>
-                </a>
-                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
-                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
-                        <i :class="[item.icon, 'text-lg']"></i>
-                    </span>
-                    <span class="inline-flex flex-col gap-1">
-                        <span class="font-bold text-lg">{{ item.label }}</span>
-                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
-                    </span>
-                </a>
-                <div v-else class="flex flex-col items-start gap-4 p-2">
-                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
-                    <span>{{ item.subtext }}</span>
-                    <Button :label="item.label" outlined />
-                </div>
-            </template>
-            <template #end>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            </template>
-        </MegaMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Company',
-                    root: true,
-                    items: [
-                        [
-                            {
-                                items: [
-                                    { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
-                                    { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
-                                    { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
-                                ]
-                            }
-                        ],
-                        [
-                            {
-                                items: [
-                                    { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
-                                    { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
-                                    { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
-                                ]
-                            }
-                        ],
-                        [
-                            {
-                                items: [
-                                    { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
-                                    { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
-                                    { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
-                                ]
-                            }
-                        ],
-                        [
-                            {
-                                items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Resources',
-                    root: true
-                },
-                {
-                    label: 'Contact',
-                    root: true
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
-            <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                    <path
-                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--p-primary-color)"
-                    />
-                    <path
-                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--p-text-color)"
-                    />
-                </svg>
-            </template>
-            <template #item="{ item }">
-                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
-                    <span>{{ item.label }}</span>
-                </a>
-                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
-                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
-                        <i :class="[item.icon, 'text-lg']"></i>
-                    </span>
-                    <span class="inline-flex flex-col gap-1">
-                        <span class="font-bold text-lg">{{ item.label }}</span>
-                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
-                    </span>
-                </a>
-                <div v-else class="flex flex-col items-start gap-4 p-2">
-                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
-                    <span>{{ item.subtext }}</span>
-                    <Button :label="item.label" outlined />
-                </div>
-            </template>
-            <template #end>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            </template>
-        </MegaMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Company',
-        root: true,
-        items: [
-            [
-                {
-                    items: [
-                        { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
-                        { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
-                        { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
-                    ]
-                }
-            ],
-            [
-                {
-                    items: [
-                        { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
-                        { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
-                        { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
-                    ]
-                }
-            ],
-            [
-                {
-                    items: [
-                        { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
-                        { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
-                        { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
-                    ]
-                }
-            ],
-            [
-                {
-                    items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Resources',
-        root: true
-    },
-    {
-        label: 'Contact',
-        root: true
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/megamenu/VerticalDoc.vue b/apps/labs/doc/megamenu/VerticalDoc.vue
deleted file mode 100644
index 06dbbab24..000000000
--- a/apps/labs/doc/megamenu/VerticalDoc.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Layout of the MegaMenu is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
-    </DocSectionText>
-    <div class="card">
-        <MegaMenu :model="items" orientation="vertical" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Furniture',
-                    icon: 'pi pi-box',
-                    items: [
-                        [
-                            {
-                                label: 'Living Room',
-                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Kitchen',
-                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
-                            },
-                            {
-                                label: 'Bathroom',
-                                items: [{ label: 'Accessories' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Bedroom',
-                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Office',
-                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Electronics',
-                    icon: 'pi pi-mobile',
-                    items: [
-                        [
-                            {
-                                label: 'Computer',
-                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Home Theater',
-                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Gaming',
-                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Appliances',
-                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Sports',
-                    icon: 'pi pi-clock',
-                    items: [
-                        [
-                            {
-                                label: 'Football',
-                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Running',
-                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Swimming',
-                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Tennis',
-                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
-                            }
-                        ]
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<MegaMenu :model="items" orientation="vertical" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <MegaMenu :model="items" orientation="vertical" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Furniture',
-                    icon: 'pi pi-box',
-                    items: [
-                        [
-                            {
-                                label: 'Living Room',
-                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Kitchen',
-                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
-                            },
-                            {
-                                label: 'Bathroom',
-                                items: [{ label: 'Accessories' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Bedroom',
-                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Office',
-                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Electronics',
-                    icon: 'pi pi-mobile',
-                    items: [
-                        [
-                            {
-                                label: 'Computer',
-                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Home Theater',
-                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Gaming',
-                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Appliances',
-                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Sports',
-                    icon: 'pi pi-clock',
-                    items: [
-                        [
-                            {
-                                label: 'Football',
-                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Running',
-                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Swimming',
-                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Tennis',
-                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
-                            }
-                        ]
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MegaMenu :model="items" orientation="vertical" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Furniture',
-        icon: 'pi pi-box',
-        items: [
-            [
-                {
-                    label: 'Living Room',
-                    items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
-                }
-            ],
-            [
-                {
-                    label: 'Kitchen',
-                    items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
-                },
-                {
-                    label: 'Bathroom',
-                    items: [{ label: 'Accessories' }]
-                }
-            ],
-            [
-                {
-                    label: 'Bedroom',
-                    items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
-                }
-            ],
-            [
-                {
-                    label: 'Office',
-                    items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Electronics',
-        icon: 'pi pi-mobile',
-        items: [
-            [
-                {
-                    label: 'Computer',
-                    items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
-                }
-            ],
-            [
-                {
-                    label: 'Home Theater',
-                    items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
-                }
-            ],
-            [
-                {
-                    label: 'Gaming',
-                    items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
-                }
-            ],
-            [
-                {
-                    label: 'Appliances',
-                    items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Sports',
-        icon: 'pi pi-clock',
-        items: [
-            [
-                {
-                    label: 'Football',
-                    items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
-                }
-            ],
-            [
-                {
-                    label: 'Running',
-                    items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
-                }
-            ],
-            [
-                {
-                    label: 'Swimming',
-                    items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
-                }
-            ],
-            [
-                {
-                    label: 'Tennis',
-                    items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
-                }
-            ]
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menu/AccessibilityDoc.vue b/apps/labs/doc/menu/AccessibilityDoc.vue
deleted file mode 100644
index 77ec0f18d..000000000
--- a/apps/labs/doc/menu/AccessibilityDoc.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Menu component uses the <i>menu</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to the
-            label of the item and <i>aria-disabled</i> defined if the item is disabled.
-        </p>
-
-        <p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>If menu is in overlay mode, popup gets closes and focus moves to target.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next menuitem.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous menuitem.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>If menu is in overlay mode, popup gets closes and focus moves to the target.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first menuitem.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last menuitem.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/menu/BasicDoc.vue b/apps/labs/doc/menu/BasicDoc.vue
deleted file mode 100644
index bb40cad90..000000000
--- a/apps/labs/doc/menu/BasicDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Menu requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'New', icon: 'pi pi-plus' },
-                { label: 'Search', icon: 'pi pi-search' }
-            ],
-            code: {
-                basic: `
-<Menu :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'New', icon: 'pi pi-plus' },
-                { label: 'Search', icon: 'pi pi-search' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { label: 'New', icon: 'pi pi-plus' },
-    { label: 'Search', icon: 'pi pi-search' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menu/CommandDoc.vue b/apps/labs/doc/menu/CommandDoc.vue
deleted file mode 100644
index a32dbabc4..000000000
--- a/apps/labs/doc/menu/CommandDoc.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-plus',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<Menu :model="items" />
-<Toast />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'New',
-                    icon: 'pi pi-plus',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
-                    }
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-
-const items = ref([
-    {
-        label: 'New',
-        icon: 'pi pi-plus',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-        }
-    },
-    {
-        label: 'Search',
-        icon: 'pi pi-search',
-        command: () => {
-            toast.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
-        }
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menu/GroupDoc.vue b/apps/labs/doc/menu/GroupDoc.vue
deleted file mode 100644
index 160de6691..000000000
--- a/apps/labs/doc/menu/GroupDoc.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Menu supports single level of grouping by defining children with the <i>items</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Documents',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-search'
-                        }
-                    ]
-                },
-                {
-                    label: 'Profile',
-                    items: [
-                        {
-                            label: 'Settings',
-                            icon: 'pi pi-cog'
-                        },
-                        {
-                            label: 'Logout',
-                            icon: 'pi pi-sign-out'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Menu :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Documents',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-search'
-                        }
-                    ]
-                },
-                {
-                    label: 'Profile',
-                    items: [
-                        {
-                            label: 'Settings',
-                            icon: 'pi pi-cog'
-                        },
-                        {
-                            label: 'Logout',
-                            icon: 'pi pi-sign-out'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Documents',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-search'
-            }
-        ]
-    },
-    {
-        label: 'Profile',
-        items: [
-            {
-                label: 'Settings',
-                icon: 'pi pi-cog'
-            },
-            {
-                label: 'Logout',
-                icon: 'pi pi-sign-out'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menu/ImportDoc.vue b/apps/labs/doc/menu/ImportDoc.vue
deleted file mode 100644
index 7728b4830..000000000
--- a/apps/labs/doc/menu/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Menu from 'primevue/menu';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menu/PopupDoc.vue b/apps/labs/doc/menu/PopupDoc.vue
deleted file mode 100644
index 1121fb21a..000000000
--- a/apps/labs/doc/menu/PopupDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Overlay mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> function of the menu ref with an event of the target.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button type="button" icon="pi pi-ellipsis-v" plain @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-        <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Options',
-                    items: [
-                        {
-                            label: 'Refresh',
-                            icon: 'pi pi-refresh'
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-upload'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-<Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-        <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Refresh',
-                    icon: 'pi pi-refresh'
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-upload'
-                }
-            ]
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-        <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const menu = ref();
-const items = ref([
-    {
-        label: 'Options',
-        items: [
-            {
-                label: 'Refresh',
-                icon: 'pi pi-refresh'
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-upload'
-            }
-        ]
-    }
-]);
-
-const toggle = (event) => {
-    menu.value.toggle(event);
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        },
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/menu/RouterDoc.vue b/apps/labs/doc/menu/RouterDoc.vue
deleted file mode 100644
index 2a382b797..000000000
--- a/apps/labs/doc/menu/RouterDoc.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Menu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                </a>
-            </template>
-        </Menu>
-    </div>
-    <DocSectionCode :code="code" hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Router Link',
-                            icon: 'pi pi-palette',
-                            route: '/slider'
-                        },
-                        {
-                            label: 'Programmatic',
-                            icon: 'pi pi-link',
-                            command: () => {
-                                this.$router.push('/slider');
-                            }
-                        },
-                        {
-                            label: 'External',
-                            icon: 'pi pi-home',
-                            url: 'https://vuejs.org/'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Menu :model="items">
-    <template #item="{ item, props }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                <span :class="item.icon" />
-                <span class="ml-2">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-            <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
-        </a>
-    </template>
-</Menu>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                </a>
-            </template>
-        </Menu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router Link',
-                    icon: 'pi pi-palette',
-                    route: '/slider'
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    url: 'https://vuejs.org/'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                </a>
-            </template>
-        </Menu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Router Link',
-        icon: 'pi pi-palette',
-        route: '/slider'
-    },
-    {
-        label: 'Programmatic',
-        icon: 'pi pi-link',
-        command: () => {
-            router.push('/slider');
-        }
-    },
-    {
-        label: 'External',
-        icon: 'pi pi-home',
-        url: 'https://vuejs.org/'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menu/TemplateDoc.vue b/apps/labs/doc/menu/TemplateDoc.vue
deleted file mode 100644
index 9bb38cf03..000000000
--- a/apps/labs/doc/menu/TemplateDoc.vue
+++ /dev/null
@@ -1,321 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Menu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. The submenu label has its own <i>submenulabel</i> template, additional slots named <i>start</i> and
-            <i>end</i> are provided to embed content before or after the menu.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Menu :model="items" class="w-full md:w-60">
-            <template #start>
-                <span class="inline-flex items-center gap-1 px-2 py-2">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-primary-color)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--p-text-color)"
-                        />
-                    </svg>
-                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
-                </span>
-            </template>
-            <template #submenulabel="{ item }">
-                <span class="text-primary font-bold">{{ item.label }}</span>
-            </template>
-            <template #item="{ item, props }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span>{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                </a>
-            </template>
-            <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-col items-start">
-                        <span class="font-bold">Amy Elsner</span>
-                        <span class="text-sm">Admin</span>
-                    </span>
-                </button>
-            </template>
-        </Menu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    separator: true
-                },
-                {
-                    label: 'Documents',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            shortcut: '⌘+N'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-search',
-                            shortcut: '⌘+S'
-                        }
-                    ]
-                },
-                {
-                    label: 'Profile',
-                    items: [
-                        {
-                            label: 'Settings',
-                            icon: 'pi pi-cog',
-                            shortcut: '⌘+O'
-                        },
-                        {
-                            label: 'Messages',
-                            icon: 'pi pi-inbox',
-                            badge: 2
-                        },
-                        {
-                            label: 'Logout',
-                            icon: 'pi pi-sign-out',
-                            shortcut: '⌘+Q'
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                }
-            ],
-            code: {
-                basic: `
-<Menu :model="items" class="w-full md:w-60">
-    <template #start>
-        <span class="inline-flex items-center gap-1 px-2 py-2">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                <path d="..." fill="var(--p-primary-color)" />
-                <path d="..." fill="var(--p-text-color)" />
-            </svg>
-            <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
-        </span>
-    </template>
-    <template #submenulabel="{ item }">
-        <span class="text-primary font-bold">{{ item.label }}</span>
-    </template>
-    <template #item="{ item, props }">
-        <a v-ripple class="flex items-center" v-bind="props.action">
-            <span :class="item.icon" />
-            <span>{{ item.label }}</span>
-            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-        </a>
-    </template>
-    <template #end>
-        <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-            <span class="inline-flex flex-col items-start">
-                <span class="font-bold">Amy Elsner</span>
-                <span class="text-sm">Admin</span>
-            </span>
-        </button>
-    </template>
-</Menu>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" class="w-full md:w-60">
-            <template #start>
-                <span class="inline-flex items-center gap-1 px-2 py-2">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-primary-color)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--p-text-color)"
-                        />
-                    </svg>
-                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
-                </span>
-            </template>
-            <template #submenulabel="{ item }">
-                <span class="text-primary font-bold">{{ item.label }}</span>
-            </template>
-            <template #item="{ item, props }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span>{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                </a>
-            </template>
-            <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-col items-start">
-                        <span class="font-bold">Amy Elsner</span>
-                        <span class="text-sm">Admin</span>
-                    </span>
-                </button>
-            </template>
-        </Menu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    separator: true
-                },
-                {
-                    label: 'Documents',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            shortcut: '⌘+N'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-search',
-                            shortcut: '⌘+S'
-                        }
-                    ]
-                },
-                {
-                    label: 'Profile',
-                    items: [
-                        {
-                            label: 'Settings',
-                            icon: 'pi pi-cog',
-                            shortcut: '⌘+O'
-                        },
-                        {
-                            label: 'Messages',
-                            icon: 'pi pi-inbox',
-                            badge: 2
-                        },
-                        {
-                            label: 'Logout',
-                            icon: 'pi pi-sign-out',
-                            shortcut: '⌘+Q'
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" class="w-full md:w-60">
-            <template #start>
-                <span class="inline-flex items-center gap-1 px-2 py-2">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-primary-color)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--p-text-color)"
-                        />
-                    </svg>
-                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
-                </span>
-            </template>
-            <template #submenulabel="{ item }">
-                <span class="text-primary font-bold">{{ item.label }}</span>
-            </template>
-            <template #item="{ item, props }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span>{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                </a>
-            </template>
-            <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-col items-start">
-                        <span class="font-bold">Amy Elsner</span>
-                        <span class="text-sm">Admin</span>
-                    </span>
-                </button>
-            </template>
-        </Menu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        separator: true
-    },
-    {
-        label: 'Documents',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus',
-                shortcut: '⌘+N'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-search',
-                shortcut: '⌘+S'
-            }
-        ]
-    },
-    {
-        label: 'Profile',
-        items: [
-            {
-                label: 'Settings',
-                icon: 'pi pi-cog',
-                shortcut: '⌘+O'
-            },
-            {
-                label: 'Messages',
-                icon: 'pi pi-inbox',
-                badge: 2
-            },
-            {
-                label: 'Logout',
-                icon: 'pi pi-sign-out',
-                shortcut: '⌘+Q'
-            }
-        ]
-    },
-    {
-        separator: true
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menubar/AccessibilityDoc.vue b/apps/labs/doc/menubar/AccessibilityDoc.vue
deleted file mode 100644
index 25f0d8c49..000000000
--- a/apps/labs/doc/menubar/AccessibilityDoc.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Menubar component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to
-            the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MenuBar uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition,
-            menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
-        </p>
-
-        <p>
-            In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe the
-            button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">PrimeVue Locale</a> API as the <i>aria-label</i>.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>If focus is on a root element, moves focus to the next menuitem otherwise opens a submenu if there is one available and moves focus to the first item.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>If focus is on a root element, moves focus to the previous menuitem otherwise closes a submenu and moves focus to the root item of the closed submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/menubar/AdvancedDoc.vue b/apps/labs/doc/menubar/AdvancedDoc.vue
deleted file mode 100644
index 052e6b873..000000000
--- a/apps/labs/doc/menubar/AdvancedDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Menubar is a simple horizontal navigation component, for advanced use cases consider <a href="https://primeblocks.org/marketing/navbar" target="_blank" rel="noopener noreferrer">Marketing</a> and
-            <a href="https://primeblocks.org/application/navbar" target="_blank" rel="noopener noreferrer">Application</a> NavBars in PrimeBlocks or <a href="https://primevue.org/templates" target="_blank" rel="noopener noreferrer">templates</a> with
-            horizontal menus in application templates.
-        </p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/menubar/BasicDoc.vue b/apps/labs/doc/menubar/BasicDoc.vue
deleted file mode 100644
index 5349ef2a2..000000000
--- a/apps/labs/doc/menubar/BasicDoc.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Menubar requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <Menubar :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-home'
-                },
-                {
-                    label: 'Features',
-                    icon: 'pi pi-star'
-                },
-                {
-                    label: 'Projects',
-                    icon: 'pi pi-search',
-                    items: [
-                        {
-                            label: 'Components',
-                            icon: 'pi pi-bolt'
-                        },
-                        {
-                            label: 'Blocks',
-                            icon: 'pi pi-server'
-                        },
-                        {
-                            label: 'UI Kit',
-                            icon: 'pi pi-pencil'
-                        },
-                        {
-                            label: 'Templates',
-                            icon: 'pi pi-palette',
-                            items: [
-                                {
-                                    label: 'Apollo',
-                                    icon: 'pi pi-palette'
-                                },
-                                {
-                                    label: 'Ultima',
-                                    icon: 'pi pi-palette'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Contact',
-                    icon: 'pi pi-envelope'
-                }
-            ],
-            code: {
-                basic: `
-<Menubar :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Menubar :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-home'
-                },
-                {
-                    label: 'Features',
-                    icon: 'pi pi-star'
-                },
-                {
-                    label: 'Projects',
-                    icon: 'pi pi-search',
-                    items: [
-                        {
-                            label: 'Components',
-                            icon: 'pi pi-bolt'
-                        },
-                        {
-                            label: 'Blocks',
-                            icon: 'pi pi-server'
-                        },
-                        {
-                            label: 'UI Kit',
-                            icon: 'pi pi-pencil'
-                        },
-                        {
-                            label: 'Templates',
-                            icon: 'pi pi-palette',
-                            items: [
-                                {
-                                    label: 'Apollo',
-                                    icon: 'pi pi-palette'
-                                },
-                                {
-                                    label: 'Ultima',
-                                    icon: 'pi pi-palette'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Contact',
-                    icon: 'pi pi-envelope'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Menubar :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Home',
-        icon: 'pi pi-home'
-    },
-    {
-        label: 'Features',
-        icon: 'pi pi-star'
-    },
-    {
-        label: 'Projects',
-        icon: 'pi pi-search',
-        items: [
-            {
-                label: 'Components',
-                icon: 'pi pi-bolt'
-            },
-            {
-                label: 'Blocks',
-                icon: 'pi pi-server'
-            },
-            {
-                label: 'UI Kit',
-                icon: 'pi pi-pencil'
-            },
-            {
-                label: 'Templates',
-                icon: 'pi pi-palette',
-                items: [
-                    {
-                        label: 'Apollo',
-                        icon: 'pi pi-palette'
-                    },
-                    {
-                        label: 'Ultima',
-                        icon: 'pi pi-palette'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Contact',
-        icon: 'pi pi-envelope'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menubar/CommandDoc.vue b/apps/labs/doc/menubar/CommandDoc.vue
deleted file mode 100644
index 7514f0cb6..000000000
--- a/apps/labs/doc/menubar/CommandDoc.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <div class="card">
-        <Menubar :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print',
-                            command: () => {
-                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Sync',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Import',
-                            icon: 'pi pi-cloud-download',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-cloud-upload',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                            }
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Menubar :model="items" />
-<Toast />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Menubar :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print',
-                            command: () => {
-                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Sync',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Import',
-                            icon: 'pi pi-cloud-download',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-cloud-upload',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                            }
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Menubar :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus',
-                command: () => {
-                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                }
-            },
-            {
-                label: 'Print',
-                icon: 'pi pi-print',
-                command: () => {
-                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                }
-            }
-        ]
-    },
-    {
-        label: 'Search',
-        icon: 'pi pi-search',
-        command: () => {
-            toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Sync',
-        icon: 'pi pi-cloud',
-        items: [
-            {
-                label: 'Import',
-                icon: 'pi pi-cloud-download',
-                command: () => {
-                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                }
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-cloud-upload',
-                command: () => {
-                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                }
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menubar/ImportDoc.vue b/apps/labs/doc/menubar/ImportDoc.vue
deleted file mode 100644
index 03e41bb8c..000000000
--- a/apps/labs/doc/menubar/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Menubar from 'primevue/menubar';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menubar/RouterDoc.vue b/apps/labs/doc/menubar/RouterDoc.vue
deleted file mode 100644
index f41934932..000000000
--- a/apps/labs/doc/menubar/RouterDoc.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card">
-        <Menubar :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span>{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span>{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
-                </a>
-            </template>
-        </Menubar>
-    </div>
-    <DocSectionCode :code="code" hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router',
-                    icon: 'pi pi-palette',
-                    items: [
-                        {
-                            label: 'Styled',
-                            route: '/slider'
-                        },
-                        {
-                            label: 'Unstyled',
-                            route: '/slider'
-                        }
-                    ]
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    items: [
-                        {
-                            label: 'Vue.js',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Vite.js',
-                            url: 'https://vitejs.dev/'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Menubar :model="items">
-    <template #item="{ item, props, hasSubmenu }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                <span :class="item.icon" />
-                <span>{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-            <span :class="item.icon" />
-            <span>{{ item.label }}</span>
-            <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
-        </a>
-    </template>
-</Menubar>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Menubar :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span>{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span>{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
-                </a>
-            </template>
-        </Menubar>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router',
-                    icon: 'pi pi-palette',
-                    items: [
-                        {
-                            label: 'Styled',
-                            route: '/slider'
-                        },
-                        {
-                            label: 'Unstyled',
-                            route: '/slider'
-                        }
-                    ]
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    items: [
-                        {
-                            label: 'Vue.js',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Vite.js',
-                            url: 'https://vitejs.dev/'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Menubar :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span>{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span>{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
-                </a>
-            </template>
-        </Menubar>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Router',
-        icon: 'pi pi-palette',
-        items: [
-            {
-                label: 'Styled',
-                route: '/slider'
-            },
-            {
-                label: 'Unstyled',
-                route: '/slider'
-            }
-        ]
-    },
-    {
-        label: 'Programmatic',
-        icon: 'pi pi-link',
-        command: () => {
-            router.push('/slider');
-        }
-    },
-    {
-        label: 'External',
-        icon: 'pi pi-home',
-        items: [
-            {
-                label: 'Vue.js',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Vite.js',
-                url: 'https://vitejs.dev/'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/menubar/TemplateDoc.vue b/apps/labs/doc/menubar/TemplateDoc.vue
deleted file mode 100644
index a1e674401..000000000
--- a/apps/labs/doc/menubar/TemplateDoc.vue
+++ /dev/null
@@ -1,248 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Menubar offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. Additional slots named <i>start</i> and <i>end</i> are provided to embed content before or after the menu.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <Menubar :model="items">
-            <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                    <path
-                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--p-primary-color)"
-                    />
-                    <path
-                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--p-text-color)"
-                    />
-                </svg>
-            </template>
-            <template #item="{ item, props, hasSubmenu, root }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span>{{ item.label }}</span>
-                    <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
-                </a>
-            </template>
-            <template #end>
-                <div class="flex items-center gap-2">
-                    <InputText placeholder="Search" type="text" class="w-36" />
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                </div>
-            </template>
-        </Menubar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-home'
-                },
-                {
-                    label: 'Projects',
-                    icon: 'pi pi-search',
-                    badge: 3,
-                    items: [
-                        {
-                            label: 'Core',
-                            icon: 'pi pi-bolt',
-                            shortcut: '⌘+S'
-                        },
-                        {
-                            label: 'Blocks',
-                            icon: 'pi pi-server',
-                            shortcut: '⌘+B'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'UI Kit',
-                            icon: 'pi pi-pencil',
-                            shortcut: '⌘+U'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Menubar :model="items">
-    <template #start>
-        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-            <path d="..." fill="var(--p-primary-color)" />
-            <path d="..." fill="var(--p-text-color)" />
-        </svg>
-    </template>
-    <template #item="{ item, props, hasSubmenu, root }">
-        <a v-ripple class="flex items-center" v-bind="props.action">
-            <span>{{ item.label }}</span>
-            <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
-        </a>
-    </template>
-    <template #end>
-        <div class="flex items-center gap-2">
-            <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
-            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-        </div>
-    </template>
-</Menubar>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Menubar :model="items">
-            <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                    <path
-                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--p-primary-color)"
-                    />
-                    <path
-                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--p-text-color)"
-                    />
-                </svg>
-            </template>
-            <template #item="{ item, props, hasSubmenu, root }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span>{{ item.label }}</span>
-                    <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
-                </a>
-            </template>
-            <template #end>
-                <div class="flex items-center gap-2">
-                    <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                </div>
-            </template>
-        </Menubar>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-home'
-                },
-                {
-                    label: 'Projects',
-                    icon: 'pi pi-search',
-                    badge: 3,
-                    items: [
-                        {
-                            label: 'Core',
-                            icon: 'pi pi-bolt',
-                            shortcut: '⌘+S'
-                        },
-                        {
-                            label: 'Blocks',
-                            icon: 'pi pi-server',
-                            shortcut: '⌘+B'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'UI Kit',
-                            icon: 'pi pi-pencil',
-                            shortcut: '⌘+U'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Menubar :model="items">
-            <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-                    <path
-                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--p-primary-color)"
-                    />
-                    <path
-                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--p-text-color)"
-                    />
-                </svg>
-            </template>
-            <template #item="{ item, props, hasSubmenu, root }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span>{{ item.label }}</span>
-                    <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
-                </a>
-            </template>
-            <template #end>
-                <div class="flex items-center gap-2">
-                    <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                </div>
-            </template>
-        </Menubar>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Home',
-        icon: 'pi pi-home'
-    },
-    {
-        label: 'Projects',
-        icon: 'pi pi-search',
-        badge: 3,
-        items: [
-            {
-                label: 'Core',
-                icon: 'pi pi-bolt',
-                shortcut: '⌘+S'
-            },
-            {
-                label: 'Blocks',
-                icon: 'pi pi-server',
-                shortcut: '⌘+B'
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'UI Kit',
-                icon: 'pi pi-pencil',
-                shortcut: '⌘+U'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/AccessibilityDoc.vue b/apps/labs/doc/message/AccessibilityDoc.vue
deleted file mode 100644
index 76ed4e21a..000000000
--- a/apps/labs/doc/message/AccessibilityDoc.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Message component uses <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and
-            <i>aria-label</i> can optionally be used as well.
-        </p>
-
-        <p>
-            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, you
-            may use <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
-        </p>
-
-        <h3>Close Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Closes the message.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Closes the message.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/message/BasicDoc.vue b/apps/labs/doc/message/BasicDoc.vue
deleted file mode 100644
index de68e088a..000000000
--- a/apps/labs/doc/message/BasicDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Message component requires a content to display.</p>
-    </DocSectionText>
-    <div class="card">
-        <Message>Message Content</Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message>Message Content</Message>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Message>Message Content</Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Message>Message Content</Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/ClosableDoc.vue b/apps/labs/doc/message/ClosableDoc.vue
deleted file mode 100644
index bcc286f5a..000000000
--- a/apps/labs/doc/message/ClosableDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enable <i>closable</i> option to display an icon to remove a message.</p>
-    </DocSectionText>
-    <div class="card">
-        <Message closable>Closable Message</Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message closable>Closable Message</Message>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Message closable>Closable Message</Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Message closable>Closable Message</Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/DynamicDoc.vue b/apps/labs/doc/message/DynamicDoc.vue
deleted file mode 100644
index 25394b42d..000000000
--- a/apps/labs/doc/message/DynamicDoc.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multiple messages can be displayed using the standard v-for directive.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center justify-center gap-4">
-        <div class="flex gap-2">
-            <Button label="Show" @click="addMessages()" />
-            <Button label="Clear" severity="secondary" @click="clearMessages()" />
-        </div>
-        <transition-group name="p-message" tag="div" class="flex flex-col">
-            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
-        </transition-group>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            messages: [],
-            count: 0,
-            code: {
-                basic: `
-<Button label="Show" @click="addMessages()" />
-<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
-<transition-group name="p-message" tag="div" class="flex flex-col">
-    <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
-</transition-group>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center justify-center gap-4">
-        <div class="flex gap-2">
-            <Button label="Show" @click="addMessages()" />
-            <Button label="Clear" severity="secondary" @click="clearMessages()" />
-        </div>
-        <transition-group name="p-message" tag="div" class="flex flex-col">
-            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
-        </transition-group>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            messages: [],
-            count: 0
-        };
-    },
-    methods: {
-        addMessages() {
-            this.messages = [
-                { severity: 'info', content: 'Dynamic Info Message', id: this.count++ },
-                { severity: 'success', content: 'Dynamic Success Message', id: this.count++ },
-                { severity: 'warn', content: 'Dynamic Warn Message', id: this.count++ }
-            ];
-        },
-        clearMessages() {
-            this.messages = [];
-        }
-    }
-};
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center justify-center gap-4">
-        <div class="flex gap-2">
-            <Button label="Show" @click="addMessages()" />
-            <Button label="Clear" severity="secondary" @click="clearMessages()" />
-        </div>
-        <transition-group name="p-message" tag="div" class="flex flex-col">
-            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
-        </transition-group>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const messages = ref([]);
-let count = ref(0);
-
-const addMessages = () => {
-    messages.value = [
-        { severity: 'info', content: 'Dynamic Info Message', id: count.value++ },
-        { severity: 'success', content: 'Dynamic Success Message', id: count.value++ },
-        { severity: 'warn', content: 'Dynamic Warn Message', id: count.value++ }
-    ];
-};
-
-const clearMessages = () => {
-    messages.value = [];
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        addMessages() {
-            this.messages = [
-                { severity: 'info', content: 'Dynamic Info Message', id: this.count++ },
-                { severity: 'success', content: 'Dynamic Success Message', id: this.count++ },
-                { severity: 'warn', content: 'Dynamic Warn Message', id: this.count++ }
-            ];
-        },
-        clearMessages() {
-            this.messages = [];
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/FormsDoc.vue b/apps/labs/doc/message/FormsDoc.vue
deleted file mode 100644
index 0190ca896..000000000
--- a/apps/labs/doc/message/FormsDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Validation errors in a form are displayed with the <i>error</i> severity.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
-            <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
-            <div class="flex flex-col gap-1">
-                <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
-                <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
-            </div>
-            <div class="flex flex-col gap-1">
-                <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
-                <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            username: null,
-            email: null,
-            code: {
-                basic: `
-<Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
-<Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
-<div class="flex flex-col gap-1">
-    <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
-    <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
-</div>
-<div class="flex flex-col gap-1">
-    <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
-    <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
-</div>
-`,
-                options: `
-<template>
-    <div class="flex flex-col gap-4">
-        <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
-        <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
-        <div class="flex flex-col gap-1">
-            <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
-            <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
-        </div>
-        <div class="flex flex-col gap-1">
-            <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
-            <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
-        </div>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="flex flex-col gap-4">
-        <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
-        <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
-        <div class="flex flex-col gap-1">
-            <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
-            <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
-        </div>
-        <div class="flex flex-col gap-1">
-            <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
-            <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/IconDoc.vue b/apps/labs/doc/message/IconDoc.vue
deleted file mode 100644
index ae6b0d799..000000000
--- a/apps/labs/doc/message/IconDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Icon property and the <i>icon</i> slots are available to customize the icon of the message</p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-4">
-        <Message severity="info" icon="pi pi-send">Info Message</Message>
-        <Message severity="success">
-            <template #icon>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            </template>
-            <span class="ml-2">How may I help you?</span>
-        </Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message severity="info" icon="pi pi-send">Info Message</Message>
-<Message severity="success">
-    <template #icon>
-        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-    </template>
-    <span class="ml-2">How may I help you?</span>
-</Message>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center gap-4">
-        <Message severity="info" icon="pi pi-send">Info Message</Message>
-        <Message severity="success">
-            <template #icon>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            </template>
-            <span class="ml-2">How may I help you?</span>
-        </Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center gap-4">
-        <Message severity="info" icon="pi pi-send">Info Message</Message>
-        <Message severity="success">
-            <template #icon>
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            </template>
-            <span class="ml-2">How may I help you?</span>
-        </Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/ImportDoc.vue b/apps/labs/doc/message/ImportDoc.vue
deleted file mode 100644
index 642a1d845..000000000
--- a/apps/labs/doc/message/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Message from 'primevue/message';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/LifeDoc.vue b/apps/labs/doc/message/LifeDoc.vue
deleted file mode 100644
index 7dfc36f2c..000000000
--- a/apps/labs/doc/message/LifeDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Messages can disappear automatically by defined the <i>life</i> in milliseconds.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center justify-center">
-        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
-        <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
-<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center justify-center">
-        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
-        <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    },
-    methods: {
-        showMessage() {
-            this.visible = true;
-
-            setTimeout(() => {
-                this.visible = false;
-            }, 3500);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center justify-center">
-        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
-        <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-let visible = ref(false);
-
-const showMessage() {
-    visible.value = true;
-
-    setTimeout(() => {
-        visible.value = false;
-    }, 3500);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        showMessage() {
-            this.visible = true;
-
-            setTimeout(() => {
-                this.visible = false;
-            }, 3500);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/OutlinedDoc.vue b/apps/labs/doc/message/OutlinedDoc.vue
deleted file mode 100644
index b4660ca98..000000000
--- a/apps/labs/doc/message/OutlinedDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Configure the <i>variant</i> value as <i>outlined</i> for messages with borders and no background.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Message severity="success" variant="outlined">Success Message</Message>
-        <Message severity="info" variant="outlined">Info Message</Message>
-        <Message severity="warn" variant="outlined">Warn Message</Message>
-        <Message severity="error" variant="outlined">Error Message</Message>
-        <Message severity="secondary" variant="outlined">Secondary Message</Message>
-        <Message severity="contrast" variant="outlined">Contrast Message</Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message severity="success" variant="outlined">Success Message</Message>
-<Message severity="info" variant="outlined">Info Message</Message>
-<Message severity="warn" variant="outlined">Warn Message</Message>
-<Message severity="error" variant="outlined">Error Message</Message>
-<Message severity="secondary" variant="outlined">Secondary Message</Message>
-<Message severity="contrast" variant="outlined">Contrast Message</Message>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Message severity="success" variant="outlined">Success Message</Message>
-        <Message severity="info" variant="outlined">Info Message</Message>
-        <Message severity="warn" variant="outlined">Warn Message</Message>
-        <Message severity="error" variant="outlined">Error Message</Message>
-        <Message severity="secondary" variant="outlined">Secondary Message</Message>
-        <Message severity="contrast" variant="outlined">Contrast Message</Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Message severity="success" variant="outlined">Success Message</Message>
-        <Message severity="info" variant="outlined">Info Message</Message>
-        <Message severity="warn" variant="outlined">Warn Message</Message>
-        <Message severity="error" variant="outlined">Error Message</Message>
-        <Message severity="secondary" variant="outlined">Secondary Message</Message>
-        <Message severity="contrast" variant="outlined">Contrast Message</Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/SeverityDoc.vue b/apps/labs/doc/message/SeverityDoc.vue
deleted file mode 100644
index 1273078bc..000000000
--- a/apps/labs/doc/message/SeverityDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>severity</i> option specifies the type of the message.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Message severity="success">Success Message</Message>
-        <Message severity="info">Info Message</Message>
-        <Message severity="warn">Warn Message</Message>
-        <Message severity="error">Error Message</Message>
-        <Message severity="secondary">Secondary Message</Message>
-        <Message severity="contrast">Contrast Message</Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message severity="success">Success Message</Message>
-<Message severity="info">Info Message</Message>
-<Message severity="warn">Warn Message</Message>
-<Message severity="error">Error Message</Message>
-<Message severity="secondary">Secondary Message</Message>
-<Message severity="contrast">Contrast Message</Message>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Message severity="success">Success Message</Message>
-        <Message severity="info">Info Message</Message>
-        <Message severity="warn">Warn Message</Message>
-        <Message severity="error">Error Message</Message>
-        <Message severity="secondary">Secondary Message</Message>
-        <Message severity="contrast">Contrast Message</Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Message severity="success">Success Message</Message>
-        <Message severity="info">Info Message</Message>
-        <Message severity="warn">Warn Message</Message>
-        <Message severity="error">Error Message</Message>
-        <Message severity="secondary">Secondary Message</Message>
-        <Message severity="contrast">Contrast Message</Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/SimpleDoc.vue b/apps/labs/doc/message/SimpleDoc.vue
deleted file mode 100644
index 8d1bdeb8e..000000000
--- a/apps/labs/doc/message/SimpleDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Configure the <i>variant</i> value as <i>simple</i> for messages without borders, backgrounds and paddings.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-8 justify-center">
-        <Message severity="success" variant="simple">Success Message</Message>
-        <Message severity="info" variant="simple">Info Message</Message>
-        <Message severity="warn" variant="simple">Warn Message</Message>
-        <Message severity="error" variant="simple">Error Message</Message>
-        <Message severity="secondary" variant="simple">Secondary Message</Message>
-        <Message severity="contrast" variant="simple">Contrast Message</Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message severity="success" variant="simple">Success Message</Message>
-<Message severity="info" variant="simple">Info Message</Message>
-<Message severity="warn" variant="simple">Warn Message</Message>
-<Message severity="error" variant="simple">Error Message</Message>
-<Message severity="secondary" variant="simple">Secondary Message</Message>
-<Message severity="contrast" variant="simple">Contrast Message</Message>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-8 justify-center">
-        <Message severity="success" variant="simple">Success Message</Message>
-        <Message severity="info" variant="simple">Info Message</Message>
-        <Message severity="warn" variant="simple">Warn Message</Message>
-        <Message severity="error" variant="simple">Error Message</Message>
-        <Message severity="secondary" variant="simple">Secondary Message</Message>
-        <Message severity="contrast" variant="simple">Contrast Message</Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-8 justify-center">
-        <Message severity="success" variant="simple">Success Message</Message>
-        <Message severity="info" variant="simple">Info Message</Message>
-        <Message severity="warn" variant="simple">Warn Message</Message>
-        <Message severity="error" variant="simple">Error Message</Message>
-        <Message severity="secondary" variant="simple">Secondary Message</Message>
-        <Message severity="contrast" variant="simple">Contrast Message</Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/message/SizesDoc.vue b/apps/labs/doc/message/SizesDoc.vue
deleted file mode 100644
index 15a21ca48..000000000
--- a/apps/labs/doc/message/SizesDoc.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <Message size="small" icon="pi pi-send">Small Message</Message>
-        <Message icon="pi pi-user">Normal Message</Message>
-        <Message size="large" icon="pi pi-check">Large Message</Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message size="small" icon="pi pi-send">Small Message</Message>
-<Message icon="pi pi-user">Normal Message</Message>
-<Message size="large" icon="pi pi-check">Large Message</Message>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Message size="small" icon="pi pi-send">Small Message</Message>
-        <Message icon="pi pi-user">Normal Message</Message>
-        <Message size="large" icon="pi pi-check">Large Message</Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Message size="small" icon="pi pi-send">Small Message</Message>
-        <Message icon="pi pi-user">Normal Message</Message>
-        <Message size="large" icon="pi pi-check">Large Message</Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/metergroup/AccessibilityDoc.vue b/apps/labs/doc/metergroup/AccessibilityDoc.vue
deleted file mode 100644
index 9dbdf98ce..000000000
--- a/apps/labs/doc/metergroup/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>MeterGroup component uses <i>meter</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> prop.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/metergroup/BasicDoc.vue b/apps/labs/doc/metergroup/BasicDoc.vue
deleted file mode 100644
index 73d49dae5..000000000
--- a/apps/labs/doc/metergroup/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }],
-            code: {
-                basic: `
-<MeterGroup :value="value" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }],
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref([{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/metergroup/IconDoc.vue b/apps/labs/doc/metergroup/IconDoc.vue
deleted file mode 100644
index db2c19cb6..000000000
--- a/apps/labs/doc/metergroup/IconDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Icons can be displayed next to the labels instead of the default marker.</p>
-    </DocSectionText>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
-                { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
-                { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
-                { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
-            ],
-            code: {
-                basic: `
-<MeterGroup :value="value" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
-                { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
-                { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
-                { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref([
-    { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
-    { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
-    { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
-    { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/metergroup/ImportDoc.vue b/apps/labs/doc/metergroup/ImportDoc.vue
deleted file mode 100644
index 0994d4f81..000000000
--- a/apps/labs/doc/metergroup/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import MeterGroup from 'primevue/metergroup';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/metergroup/LabelDoc.vue b/apps/labs/doc/metergroup/LabelDoc.vue
deleted file mode 100644
index 1bf85a2f3..000000000
--- a/apps/labs/doc/metergroup/LabelDoc.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            The position of the labels relative to the meters is defined using the <i>labelPosition</i> property. The default orientation of the labels is horizontal, and the vertical alternative is available through the
-            <i>labelOrientation</i> option.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 16 },
-                { label: 'Messages', color: '#fbbf24', value: 8 },
-                { label: 'Media', color: '#60a5fa', value: 24 },
-                { label: 'System', color: '#c084fc', value: 10 }
-            ],
-            code: {
-                basic: `
-<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 16 },
-                { label: 'Messages', color: '#fbbf24', value: 8 },
-                { label: 'Media', color: '#60a5fa', value: 24 },
-                { label: 'System', color: '#c084fc', value: 10 }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref([
-    { label: 'Apps', color: '#34d399', value: 16 },
-    { label: 'Messages', color: '#fbbf24', value: 8 },
-    { label: 'Media', color: '#60a5fa', value: 24 },
-    { label: 'System', color: '#c084fc', value: 10 }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/metergroup/MinMaxDoc.vue b/apps/labs/doc/metergroup/MinMaxDoc.vue
deleted file mode 100644
index 6294de068..000000000
--- a/apps/labs/doc/metergroup/MinMaxDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
-    </DocSectionText>
-    <div class="card">
-        <MeterGroup :value="value" :max="200" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 16 },
-                { label: 'Messages', color: '#fbbf24', value: 8 },
-                { label: 'Media', color: '#60a5fa', value: 24 },
-                { label: 'System', color: '#c084fc', value: 10 }
-            ],
-            code: {
-                basic: `
-<MeterGroup :value="value" :max="200"  />
-`,
-                options: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" :max="200"  />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 16 },
-                { label: 'Messages', color: '#fbbf24', value: 8 },
-                { label: 'Media', color: '#60a5fa', value: 24 },
-                { label: 'System', color: '#c084fc', value: 10 }
-            ],
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" :max="200"  />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref([
-    { label: 'Apps', color: '#34d399', value: 16 },
-    { label: 'Messages', color: '#fbbf24', value: 8 },
-    { label: 'Media', color: '#60a5fa', value: 24 },
-    { label: 'System', color: '#c084fc', value: 10 }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/metergroup/MultipleDoc.vue b/apps/labs/doc/metergroup/MultipleDoc.vue
deleted file mode 100644
index 3fd4bf1af..000000000
--- a/apps/labs/doc/metergroup/MultipleDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Adding more items to the array displays the meters in a group.</p>
-    </DocSectionText>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 16 },
-                { label: 'Messages', color: '#fbbf24', value: 8 },
-                { label: 'Media', color: '#60a5fa', value: 24 },
-                { label: 'System', color: '#c084fc', value: 10 }
-            ],
-            code: {
-                basic: `
-<MeterGroup :value="value" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 16 },
-                { label: 'Messages', color: '#fbbf24', value: 8 },
-                { label: 'Media', color: '#60a5fa', value: 24 },
-                { label: 'System', color: '#c084fc', value: 10 }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref([
-    { label: 'Apps', color: '#34d399', value: 16 },
-    { label: 'Messages', color: '#fbbf24', value: 8 },
-    { label: 'Media', color: '#60a5fa', value: 24 },
-    { label: 'System', color: '#c084fc', value: 10 }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/metergroup/TemplateDoc.vue b/apps/labs/doc/metergroup/TemplateDoc.vue
deleted file mode 100644
index 2a4678f16..000000000
--- a/apps/labs/doc/metergroup/TemplateDoc.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>MeterGroup provides templating support for labels, meter items, and content around the meters.</p>
-    </DocSectionText>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start">
-            <template #label="{ value }">
-                <div class="flex flex-wrap gap-4">
-                    <template v-for="val of value" :key="val.label">
-                        <Card class="flex-1 border border-surface shadow-none">
-                            <template #content>
-                                <div class="flex justify-between gap-8">
-                                    <div class="flex flex-col gap-1">
-                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
-                                        <span class="font-bold text-lg">{{ val.value }}%</span>
-                                    </div>
-                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
-                                        <i :class="val.icon" />
-                                    </span>
-                                </div>
-                            </template>
-                        </Card>
-                    </template>
-                </div>
-            </template>
-            <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" />
-            </template>
-            <template #start="{ totalPercent }">
-                <div class="flex justify-between mt-4 mb-2 relative">
-                    <span>Storage</span>
-                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
-                    <span class="font-medium">1TB</span>
-                </div>
-            </template>
-            <template #end>
-                <div class="flex justify-between mt-4">
-                    <Button label="Manage Storage" outlined size="small" />
-                    <Button label="Update Plan" size="small" />
-                </div>
-            </template>
-        </MeterGroup>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
-                { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
-                { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
-                { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
-            ],
-            code: {
-                basic: `
-<MeterGroup :value="value" labelPosition="start">
-    <template #label="{ value }">
-        <div class="flex flex-wrap gap-4">
-            <template v-for="val of value" :key="val.label">
-                <Card class="flex-1 border border-surface shadow-none">
-                    <template #content>
-                        <div class="flex justify-between gap-8">
-                            <div class="flex flex-col gap-1">
-                                <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
-                                <span class="font-bold text-lg">{{ val.value }}%</span>
-                            </div>
-                            <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
-                                <i :class="val.icon" />
-                            </span>
-                        </div>
-                    </template>
-                </Card>
-            </template>
-        </div>
-    </template>
-    <template #meter="slotProps">
-        <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
-    </template>
-    <template #start="{ totalPercent }">
-        <div class="flex justify-between mt-4 mb-2 relative">
-            <span>Storage</span>
-            <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
-            <span class="font-medium">1TB</span>
-        </div>
-    </template>
-    <template #end>
-        <div class="flex justify-between mt-4">
-            <Button label="Manage Storage" outlined size="small" />
-            <Button label="Update Plan" size="small" />
-        </div>
-    </template>
-</MeterGroup>
-`,
-                options: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start">
-            <template #label="{ value }">
-                <div class="flex flex-wrap gap-4">
-                    <template v-for="val of value" :key="val.label">
-                        <Card class="flex-1 border border-surface shadow-none">
-                            <template #content>
-                                <div class="flex justify-between gap-8">
-                                    <div class="flex flex-col gap-1">
-                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
-                                        <span class="font-bold text-lg">{{ val.value }}%</span>
-                                    </div>
-                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
-                                        <i :class="val.icon" />
-                                    </span>
-                                </div>
-                            </template>
-                        </Card>
-                    </template>
-                </div>
-            </template>
-            <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
-            </template>
-            <template #start="{ totalPercent }">
-                <div class="flex justify-between mt-4 mb-2 relative">
-                    <span>Storage</span>
-                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
-                    <span class="font-medium">1TB</span>
-                </div>
-            </template>
-            <template #end>
-                <div class="flex justify-between mt-4">
-                    <Button label="Manage Storage" outlined size="small" />
-                    <Button label="Update Plan" size="small" />
-                </div>
-            </template>
-        </MeterGroup>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
-                { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
-                { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
-                { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MeterGroup :value="value" labelPosition="start">
-            <template #label="{ value }">
-                <div class="flex flex-wrap gap-4">
-                    <template v-for="val of value" :key="i">
-                        <Card class="flex-1 border border-surface shadow-none">
-                            <template #content>
-                                <div class="flex justify-between gap-8">
-                                    <div class="flex flex-col gap-1">
-                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
-                                        <span class="font-bold text-lg">{{ val.value }}%</span>
-                                    </div>
-                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
-                                        <i :class="val.icon" />
-                                    </span>
-                                </div>
-                            </template>
-                        </Card>
-                    </template>
-                </div>
-            </template>
-            <template #meter="slotProps">
-                <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
-            </template>
-            <template #start="{ totalPercent }">
-                <div class="flex justify-between mt-4 mb-2 relative">
-                    <span>Storage</span>
-                    <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
-                    <span class="font-medium">1TB</span>
-                </div>
-            </template>
-            <template #end>
-                <div class="flex justify-between mt-4">
-                    <Button label="Manage Storage" outlined size="small" />
-                    <Button label="Update Plan" size="small" />
-                </div>
-            </template>
-        </MeterGroup>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref([
-    { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
-    { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
-    { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
-    { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/metergroup/VerticalDoc.vue b/apps/labs/doc/metergroup/VerticalDoc.vue
deleted file mode 100644
index ee8a757b6..000000000
--- a/apps/labs/doc/metergroup/VerticalDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts either <i>horizontal</i> or <i>vertical</i> as available options.</p>
-    </DocSectionText>
-    <div class="card flex justify-center" style="height: 360px">
-        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 24 },
-                { label: 'Messages', color: '#fbbf24', value: 16 },
-                { label: 'Media', color: '#60a5fa', value: 24 },
-                { label: 'System', color: '#c084fc', value: 12 }
-            ],
-            code: {
-                basic: `
-<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center" style="height: 360px">
-        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [
-                { label: 'Apps', color: '#34d399', value: 24 },
-                { label: 'Messages', color: '#fbbf24', value: 16 },
-                { label: 'Media', color: '#60a5fa', value: 24 },
-                { label: 'System', color: '#c084fc', value: 12 }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center" style="height: 360px">
-        <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref([
-    { label: 'Apps', color: '#34d399', value: 24 },
-    { label: 'Messages', color: '#fbbf24', value: 16 },
-    { label: 'Media', color: '#60a5fa', value: 24 },
-    { label: 'System', color: '#c084fc', value: 12 }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/AccessibilityDoc.vue b/apps/labs/doc/multiselect/AccessibilityDoc.vue
deleted file mode 100644
index 8e3f69da7..000000000
--- a/apps/labs/doc/multiselect/AccessibilityDoc.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
-            The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
-        </p>
-        <p>The popup listbox uses <i>listbox</i> as the role with <i>aria-multiselectable</i> enabled. Each list item has an <i>option</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.</p>
-
-        <p>
-            Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
-        </p>
-
-        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p>
-
-        <p>
-            Close button uses <i>close</i> key of the <i>aria</i> property from the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API as the <i>aria-label</i> by default, this can be
-            overriden with the <i>closeButtonProps</i>.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Closed State Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none then first option receives the focus.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Popup Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Toggles the selection state of the focused option, then moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the selection state of the focused option, then moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup, moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>down arrow</i></td>
-                        <td>Moves focus to the next option and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>up arrow</i></td>
-                        <td>Moves focus to the previous option and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>space</i></td>
-                        <td>Selects the items between the most recently selected option and the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
-                        <td>Selects the focused options and all the options up to the first one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
-                        <td>Selects the focused options and all the options down to the last one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>a</i></td>
-                        <td>Selects all options.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageUp</i></td>
-                        <td>Jumps visual focus to first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageDown</i></td>
-                        <td>Jumps visual focus to last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Toggle All Checkbox Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the checked state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup and moves focus to the multiselect element.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Filter Input Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Closes the popup and moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup and moves focus to the multiselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="dd1"></span>Options</span>
-<MultiSelect aria-labelledby="dd1" />
-
-<MultiSelect aria-label="Options" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/BasicDoc.vue b/apps/labs/doc/multiselect/BasicDoc.vue
deleted file mode 100644
index 3a5fedcd3..000000000
--- a/apps/labs/doc/multiselect/BasicDoc.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            MultiSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
-            Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-80" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/ChipsDoc.vue b/apps/labs/doc/multiselect/ChipsDoc.vue
deleted file mode 100644
index 3dbe2e740..000000000
--- a/apps/labs/doc/multiselect/ChipsDoc.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Selected values are displayed as a comma separated list by default, setting <i>display</i> as <i>chip</i> displays them as chips.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-80" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/ClearIconDoc.vue b/apps/labs/doc/multiselect/ClearIconDoc.vue
deleted file mode 100644
index 89b0e8747..000000000
--- a/apps/labs/doc/multiselect/ClearIconDoc.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the MultiSelect.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" showClear :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-80" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/DisabledDoc.vue b/apps/labs/doc/multiselect/DisabledDoc.vue
deleted file mode 100644
index 503d747af..000000000
--- a/apps/labs/doc/multiselect/DisabledDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
-`,
-                options: `
-<template>
-    <div class="flex justify-center">
-        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="flex justify-center">
-        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/FilledDoc.vue b/apps/labs/doc/multiselect/FilledDoc.vue
deleted file mode 100644
index edc322c58..000000000
--- a/apps/labs/doc/multiselect/FilledDoc.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-80" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/FilterDoc.vue b/apps/labs/doc/multiselect/FilterDoc.vue
deleted file mode 100644
index fc93eb63f..000000000
--- a/apps/labs/doc/multiselect/FilterDoc.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
-            fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-80" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/FloatLabelDoc.vue b/apps/labs/doc/multiselect/FloatLabelDoc.vue
deleted file mode 100644
index e9adce82e..000000000
--- a/apps/labs/doc/multiselect/FloatLabelDoc.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-80">
-            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="in">
-            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="on">
-            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<FloatLabel class="w-full md:w-80">
-    <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel class="w-full md:w-80" variant="in">
-    <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel class="w-full md:w-80" variant="on">
-    <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-80">
-            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="in">
-            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="on">
-            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-80">
-            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="in">
-            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="on">
-            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/FormsDoc.vue b/apps/labs/doc/multiselect/FormsDoc.vue
deleted file mode 100644
index e7007ec24..000000000
--- a/apps/labs/doc/multiselect/FormsDoc.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
-            <div class="flex flex-col gap-1">
-                <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" fluid />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                city: []
-            },
-            resolver: zodResolver(
-                z.object({
-                    city: z
-                        .array(
-                            z.object({
-                                name: z.string().min(1, 'City is required.')
-                            })
-                        )
-                        .min(1, 'City is required.')
-                })
-            ),
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-    <div class="flex flex-col gap-1">
-        <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                city: []
-            },
-            resolver: zodResolver(
-                z.object({
-                    city: z
-                    .array(
-                        z.object({
-                            name: z.string().min(1, 'City is required.')
-                        })
-                    )
-                    .min(1, 'City is required.')
-                })
-            ),
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    city: []
-});
-const resolver = ref(zodResolver(
-    z.object({
-        city: z
-            .array(
-                z.object({
-                    name: z.string().min(1, 'City is required.')
-                })
-            )
-            .min(1, 'City is required.')
-    })
-));
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/GroupDoc.vue b/apps/labs/doc/multiselect/GroupDoc.vue
deleted file mode 100644
index 6b3da3766..000000000
--- a/apps/labs/doc/multiselect/GroupDoc.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the children
-            of a group.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </MultiSelect>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            groupedCities: [
-                {
-                    label: 'Germany',
-                    code: 'DE',
-                    items: [
-                        { label: 'Berlin', value: 'Berlin' },
-                        { label: 'Frankfurt', value: 'Frankfurt' },
-                        { label: 'Hamburg', value: 'Hamburg' },
-                        { label: 'Munich', value: 'Munich' }
-                    ]
-                },
-                {
-                    label: 'USA',
-                    code: 'US',
-                    items: [
-                        { label: 'Chicago', value: 'Chicago' },
-                        { label: 'Los Angeles', value: 'Los Angeles' },
-                        { label: 'New York', value: 'New York' },
-                        { label: 'San Francisco', value: 'San Francisco' }
-                    ]
-                },
-                {
-                    label: 'Japan',
-                    code: 'JP',
-                    items: [
-                        { label: 'Kyoto', value: 'Kyoto' },
-                        { label: 'Osaka', value: 'Osaka' },
-                        { label: 'Tokyo', value: 'Tokyo' },
-                        { label: 'Yokohama', value: 'Yokohama' }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
-    <template #optiongroup="slotProps">
-        <div class="flex items-center">
-            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-            <div>{{ slotProps.option.label }}</div>
-        </div>
-    </template>
-</MultiSelect>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </MultiSelect>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            groupedCities: [
-                {
-                    label: 'Germany',
-                    code: 'DE',
-                    items: [
-                        { label: 'Berlin', value: 'Berlin' },
-                        { label: 'Frankfurt', value: 'Frankfurt' },
-                        { label: 'Hamburg', value: 'Hamburg' },
-                        { label: 'Munich', value: 'Munich' }
-                    ]
-                },
-                {
-                    label: 'USA',
-                    code: 'US',
-                    items: [
-                        { label: 'Chicago', value: 'Chicago' },
-                        { label: 'Los Angeles', value: 'Los Angeles' },
-                        { label: 'New York', value: 'New York' },
-                        { label: 'San Francisco', value: 'San Francisco' }
-                    ]
-                },
-                {
-                    label: 'Japan',
-                    code: 'JP',
-                    items: [
-                        { label: 'Kyoto', value: 'Kyoto' },
-                        { label: 'Osaka', value: 'Osaka' },
-                        { label: 'Tokyo', value: 'Tokyo' },
-                        { label: 'Yokohama', value: 'Yokohama' }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </MultiSelect>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref();
-const groupedCities = ref([
-    {
-        label: 'Germany',
-        code: 'DE',
-        items: [
-            { label: 'Berlin', value: 'Berlin' },
-            { label: 'Frankfurt', value: 'Frankfurt' },
-            { label: 'Hamburg', value: 'Hamburg' },
-            { label: 'Munich', value: 'Munich' }
-        ]
-    },
-    {
-        label: 'USA',
-        code: 'US',
-        items: [
-            { label: 'Chicago', value: 'Chicago' },
-            { label: 'Los Angeles', value: 'Los Angeles' },
-            { label: 'New York', value: 'New York' },
-            { label: 'San Francisco', value: 'San Francisco' }
-        ]
-    },
-    {
-        label: 'Japan',
-        code: 'JP',
-        items: [
-            { label: 'Kyoto', value: 'Kyoto' },
-            { label: 'Osaka', value: 'Osaka' },
-            { label: 'Tokyo', value: 'Tokyo' },
-            { label: 'Yokohama', value: 'Yokohama' }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/IftaLabelDoc.vue b/apps/labs/doc/multiselect/IftaLabelDoc.vue
deleted file mode 100644
index d4b417236..000000000
--- a/apps/labs/doc/multiselect/IftaLabelDoc.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-80">
-            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
-            <label for="ms_cities">Cities</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<IftaLabel>
-    <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
-    <label for="ms_cities">Cities</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-80">
-            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
-            <label for="ms_cities">Cities</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-80">
-            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full"variant="filled" />
-            <label for="ms_cities">Cities</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref(null);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/ImportDoc.vue b/apps/labs/doc/multiselect/ImportDoc.vue
deleted file mode 100644
index d83e23c70..000000000
--- a/apps/labs/doc/multiselect/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import MultiSelect from 'primevue/multiselect';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/InvalidDoc.vue b/apps/labs/doc/multiselect/InvalidDoc.vue
deleted file mode 100644
index 33f901399..000000000
--- a/apps/labs/doc/multiselect/InvalidDoc.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
-        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities1: [],
-            selectedCities2: [],
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
-        :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
-<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
-        :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
-                :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
-        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
-                :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities1: [],
-            selectedCities2: [],
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
-                :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
-        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
-                :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities1 = ref([]);
-const selectedCities2 = ref([]);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/LoadingStateDoc.vue b/apps/labs/doc/multiselect/LoadingStateDoc.vue
deleted file mode 100644
index 0ad78452f..000000000
--- a/apps/labs/doc/multiselect/LoadingStateDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Loading state can be used <i>loading</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/SizesDoc.vue b/apps/labs/doc/multiselect/SizesDoc.vue
deleted file mode 100644
index 1e8f07828..000000000
--- a/apps/labs/doc/multiselect/SizesDoc.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>MultiSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
-        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
-        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
-<MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
-<MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
-        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
-        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
-        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
-        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const countries = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/TemplateDoc.vue b/apps/labs/doc/multiselect/TemplateDoc.vue
deleted file mode 100644
index 1665410e5..000000000
--- a/apps/labs/doc/multiselect/TemplateDoc.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>MultiSelect offers multiple slots for customization through templating.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #filtericon>
-                <i class="pi pi-map-marker" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="p-3 flex justify-between">
-                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
-                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
-                </div>
-            </template>
-        </MultiSelect>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCountries: null,
-            countries: [
-                { name: 'Australia', code: 'AU' },
-                { name: 'Brazil', code: 'BR' },
-                { name: 'China', code: 'CN' },
-                { name: 'Egypt', code: 'EG' },
-                { name: 'France', code: 'FR' },
-                { name: 'Germany', code: 'DE' },
-                { name: 'India', code: 'IN' },
-                { name: 'Japan', code: 'JP' },
-                { name: 'Spain', code: 'ES' },
-                { name: 'United States', code: 'US' }
-            ],
-            code: {
-                basic: `
-<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
-    <template #option="slotProps">
-        <div class="flex items-center">
-            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-            <div>{{ slotProps.option.name }}</div>
-        </div>
-    </template>
-    <template #dropdownicon>
-        <i class="pi pi-map" />
-    </template>
-    <template #filtericon>
-        <i class="pi pi-map-marker" />
-    </template>
-    <template #header>
-        <div class="font-medium px-3 py-2">Available Countries</div>
-    </template>
-    <template #footer>
-        <div class="p-3 flex justify-between">
-            <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
-            <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
-        </div>
-    </template>
-</MultiSelect>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #filtericon>
-                <i class="pi pi-map-marker" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="p-3 flex justify-between">
-                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
-                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
-                </div>
-            </template>
-        </MultiSelect>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCountries: null,
-            countries: [
-                { name: 'Australia', code: 'AU' },
-                { name: 'Brazil', code: 'BR' },
-                { name: 'China', code: 'CN' },
-                { name: 'Egypt', code: 'EG' },
-                { name: 'France', code: 'FR' },
-                { name: 'Germany', code: 'DE' },
-                { name: 'India', code: 'IN' },
-                { name: 'Japan', code: 'JP' },
-                { name: 'Spain', code: 'ES' },
-                { name: 'United States', code: 'US' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #filtericon>
-                <i class="pi pi-map-marker" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="p-3 flex justify-between">
-                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
-                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
-                </div>
-            </template>
-        </MultiSelect>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCountries = ref();
-const countries = ref([
-    { name: 'Australia', code: 'AU' },
-    { name: 'Brazil', code: 'BR' },
-    { name: 'China', code: 'CN' },
-    { name: 'Egypt', code: 'EG' },
-    { name: 'France', code: 'FR' },
-    { name: 'Germany', code: 'DE' },
-    { name: 'India', code: 'IN' },
-    { name: 'Japan', code: 'JP' },
-    { name: 'Spain', code: 'ES' },
-    { name: 'United States', code: 'US' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/multiselect/VirtualScrollDoc.vue b/apps/labs/doc/multiselect/VirtualScrollDoc.vue
deleted file mode 100644
index 5830ef027..000000000
--- a/apps/labs/doc/multiselect/VirtualScrollDoc.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the
-            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by MultiSelect.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <MultiSelect
-            v-model="selectedItems"
-            :options="items"
-            :maxSelectedLabels="3"
-            :selectAll="selectAll"
-            @selectall-change="onSelectAllChange($event)"
-            @change="onChange($event)"
-            optionLabel="label"
-            optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 44 }"
-            filter
-            placeholder="Select Item"
-            class="w-full md:w-80"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedItems: null,
-            selectAll: false,
-            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
-            code: {
-                basic: `
-<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedItems: null,
-            selectAll: false,
-            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
-        };
-    },
-    methods: {
-        onSelectAllChange(event) {
-            this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
-            this.selectAll = event.checked;
-        },
-        onChange(event) {
-            this.selectAll = event.value.length === this.items.length;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-
-const selectedItems = ref();
-const selectAll = ref(false);
-const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
-
-const onSelectAllChange = (event) => {
-    selectedItems.value = event.checked ? items.value.map((item) => item.value) : [];
-    selectAll.value = event.checked;
-};
-const onChange = (event) => {
-    selectAll.value = event.value.length === items.value.length;
-}
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onSelectAllChange(event) {
-            this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
-            this.selectAll = event.checked;
-        },
-        onChange(event) {
-            this.selectAll = event.value.length === this.items.length;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/orderlist/AccessibilityDoc.vue b/apps/labs/doc/orderlist/AccessibilityDoc.vue
deleted file mode 100644
index 1b8eaff64..000000000
--- a/apps/labs/doc/orderlist/AccessibilityDoc.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the listbox can be provided with <i>listProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute. Each list item
-            has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
-        </p>
-        <p>
-            Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i> and <i>aria.moveBottom</i> properties of the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and
-            <i>moveBottomButtonProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>ListBox Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Toggles the selected state of the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Toggles the selected state of the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>down arrow</i></td>
-                        <td>Moves focus to the next option and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>up arrow</i></td>
-                        <td>Moves focus to the previous option and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>space</i></td>
-                        <td>Selects the items between the most recently selected option and the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
-                        <td>Selects the focused options and all the options up to the first one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
-                        <td>Selects the focused options and all the options down to the first one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>a</i></td>
-                        <td>Selects all options.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Buttons Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Executes button action.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Executes button action.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="lb">Options</span>
-<OrderList aria-labelledby="lb" />
-
-<OrderList aria-label="City" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/orderlist/BasicDoc.vue b/apps/labs/doc/orderlist/BasicDoc.vue
deleted file mode 100644
index b943bf003..000000000
--- a/apps/labs/doc/orderlist/BasicDoc.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>option</i> template for its content.</p>
-    </DocSectionText>
-    <div class="card sm:flex sm:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
-            <template #option="{ option }">
-                {{ option.name }}
-            </template>
-        </OrderList>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
-    <template #option="{ option }">
-        {{ option.name }}
-    </template>
-</OrderList>
-`,
-                options: `
-<template>
-    <div class="card sm:flex sm:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
-            <template #option="{ option }">
-                {{ option.name }}
-            </template>
-        </OrderList>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService'
-export default {
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card sm:flex sm:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
-            <template #option="{ option }">
-                {{ option.name }}
-            </template>
-        </OrderList>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const products = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
-});
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/orderlist/ImportDoc.vue b/apps/labs/doc/orderlist/ImportDoc.vue
deleted file mode 100644
index ec94ed990..000000000
--- a/apps/labs/doc/orderlist/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import OrderList from 'primevue/orderlist';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/orderlist/TemplateDoc.vue b/apps/labs/doc/orderlist/TemplateDoc.vue
deleted file mode 100644
index 74b22176c..000000000
--- a/apps/labs/doc/orderlist/TemplateDoc.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>For custom content support define an <i>option</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p>
-    </DocSectionText>
-    <div class="card sm:flex sm:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
-            <template #option="{ option, selected }">
-                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
-                    <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ option.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
-                    </div>
-                    <span class="font-bold sm:ml-8">${{ option.price }}</span>
-                </div>
-            </template>
-        </OrderList>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
-    <template #option="{ option , selected }">
-        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
-            <div class="flex-1 flex flex-col">
-                <span class="font-medium text-sm">{{ option.name }}</span>
-                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
-            </div>
-            <span class="font-bold sm:ml-8">\${{ option.price }}</span>
-        </div>
-    </template>
-</OrderList>
-`,
-                options: `
-<template>
-    <div class="card sm:flex sm:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
-            <template #option="{ option , selected }">
-                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
-                    <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ option.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
-                    </div>
-                    <span class="font-bold sm:ml-8">\${{ option.price }}</span>
-                </div>
-            </template>
-        </OrderList>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService'
-export default {
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card sm:flex sm:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
-            <template #option="{ option , selected }">
-                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
-                    <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ option.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
-                    </div>
-                    <span class="font-bold sm:ml-8">\${{ option.price }}</span>
-                </div>
-            </template>
-        </OrderList>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const products = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
-});
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/organizationchart/AccessibilityDoc.vue b/apps/labs/doc/organizationchart/AccessibilityDoc.vue
deleted file mode 100644
index 0b87eebc4..000000000
--- a/apps/labs/doc/organizationchart/AccessibilityDoc.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of
-            reader support in the upcoming versions.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through the focusable elements within the chart.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Toggles the expanded state of a node.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Toggles the expanded state of a node.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/organizationchart/BasicDoc.vue b/apps/labs/doc/organizationchart/BasicDoc.vue
deleted file mode 100644
index e7509ceab..000000000
--- a/apps/labs/doc/organizationchart/BasicDoc.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>OrganizationChart requires a collection of <i>TreeNode</i> instances as a <i>value</i>.</p>
-    </DocSectionText>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data">
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                label: 'Argentina',
-                children: [
-                    {
-                        label: 'Argentina',
-                        children: [
-                            {
-                                label: 'Argentina'
-                            },
-                            {
-                                label: 'Croatia'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'France',
-                        children: [
-                            {
-                                label: 'France'
-                            },
-                            {
-                                label: 'Morocco'
-                            }
-                        ]
-                    }
-                ]
-            },
-            code: {
-                basic: `
-<OrganizationChart :value="data">
-    <template #default="slotProps">
-        <span>{{ slotProps.node.label }}</span>
-    </template>
-</OrganizationChart>
-`,
-                options: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data">
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                label: 'Argentina',
-                children: [
-                    {
-                        label: 'Argentina',
-                        children: [
-                            {
-                                label: 'Argentina'
-                            },
-                            {
-                                label: 'Croatia'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'France',
-                        children: [
-                            {
-                                label: 'France'
-                            },
-                            {
-                                label: 'Morocco'
-                            }
-                        ]
-                    }
-                ]
-            }
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data">
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const data = ref({
-    label: 'Argentina',
-    children: [
-        {
-            label: 'Argentina',
-            children: [
-                {
-                    label: 'Argentina'
-                },
-                {
-                    label: 'Croatia'
-                }
-            ]
-        },
-        {
-            label: 'France',
-            children: [
-                {
-                    label: 'France'
-                },
-                {
-                    label: 'Morocco'
-                }
-            ]
-        }
-    ]
-});
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/organizationchart/ColoredDoc.vue b/apps/labs/doc/organizationchart/ColoredDoc.vue
deleted file mode 100644
index 7bd02597e..000000000
--- a/apps/labs/doc/organizationchart/ColoredDoc.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Styling a specific node is configured with <i>styleClass</i> and <i>style</i> options of a TreeNode.</p>
-    </DocSectionText>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data" collapsible>
-            <template #person="slotProps">
-                <div class="flex flex-col">
-                    <div class="flex flex-col items-center">
-                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
-                        <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
-                        <span>{{ slotProps.node.data.title }}</span>
-                    </div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                key: '0',
-                type: 'person',
-                styleClass: '!bg-indigo-100 !text-indigo-900 rounded-xl',
-                data: {
-                    image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
-                    name: 'Amy Elsner',
-                    title: 'CEO'
-                },
-                children: [
-                    {
-                        key: '0_0',
-                        type: 'person',
-                        styleClass: '!bg-purple-100 !text-purple-900 rounded-xl',
-                        data: {
-                            image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
-                            name: 'Anna Fali',
-                            title: 'CMO'
-                        },
-                        children: [
-                            {
-                                label: 'Sales',
-                                styleClass: '!bg-purple-100 !text-purple-900 rounded-xl'
-                            },
-                            {
-                                label: 'Marketing',
-                                styleClass: '!bg-purple-100 !text-purple-900 rounded-xl'
-                            }
-                        ]
-                    },
-                    {
-                        key: '0_1',
-                        type: 'person',
-                        styleClass: '!bg-teal-100 !text-teal-900 rounded-xl',
-                        data: {
-                            image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
-                            name: 'Stephen Shaw',
-                            title: 'CTO'
-                        },
-                        children: [
-                            {
-                                label: 'Development',
-                                styleClass: '!bg-teal-100 !text-teal-900 rounded-xl'
-                            },
-                            {
-                                label: 'UI/UX Design',
-                                styleClass: '!bg-teal-100 !text-teal-900 rounded-xl'
-                            }
-                        ]
-                    }
-                ]
-            },
-            code: {
-                basic: `
-<OrganizationChart :value="data" collapsible>
-    <template #person="slotProps">
-        <div class="flex flex-col">
-            <div class="flex flex-col items-center">
-                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
-                <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
-                <span>{{ slotProps.node.data.title }}</span>
-            </div>
-        </div>
-    </template>
-    <template #default="slotProps">
-        <span>{{ slotProps.node.label }}</span>
-    </template>
-</OrganizationChart>
-`,
-                options: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data" collapsible>
-            <template #person="slotProps">
-                <div class="flex flex-col">
-                    <div class="flex flex-col items-center">
-                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
-                        <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
-                        <span>{{ slotProps.node.data.title }}</span>
-                    </div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                key: '0',
-                type: 'person',
-                styleClass: '!bg-indigo-100 text-white rounded-xl',
-                data: {
-                    image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
-                    name: 'Amy Elsner',
-                    title: 'CEO'
-                },
-                children: [
-                    {
-                        key: '0_0',
-                        type: 'person',
-                        styleClass: '!bg-purple-100 text-white rounded-xl',
-                        data: {
-                            image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
-                            name: 'Anna Fali',
-                            title: 'CMO'
-                        },
-                        children: [
-                            {
-                                label: 'Sales',
-                                styleClass: '!bg-purple-100 text-white rounded-xl'
-                            },
-                            {
-                                label: 'Marketing',
-                                styleClass: '!bg-purple-100 text-white rounded-xl'
-                            }
-                        ]
-                    },
-                    {
-                        key: '0_1',
-                        type: 'person',
-                        styleClass: '!bg-teal-100 text-white rounded-xl',
-                        data: {
-                            image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
-                            name: 'Stephen Shaw',
-                            title: 'CTO'
-                        },
-                        children: [
-                            {
-                                label: 'Development',
-                                styleClass: '!bg-teal-100 text-white rounded-xl'
-                            },
-                            {
-                                label: 'UI/UX Design',
-                                styleClass: '!bg-teal-100 text-white rounded-xl'
-                            }
-                        ]
-                    }
-                ]
-            }
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data" collapsible>
-            <template #person="slotProps">
-                <div class="flex flex-col">
-                    <div class="flex flex-col items-center">
-                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
-                        <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
-                        <span>{{ slotProps.node.data.title }}</span>
-                    </div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const data = ref({
-    key: '0',
-    type: 'person',
-    styleClass: '!bg-indigo-100 text-white rounded-xl',
-    data: {
-        image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
-        name: 'Amy Elsner',
-        title: 'CEO'
-    },
-    children: [
-        {
-            key: '0_0',
-            type: 'person',
-            styleClass: '!bg-purple-100 text-white rounded-xl',
-            data: {
-                image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
-                name: 'Anna Fali',
-                title: 'CMO'
-            },
-            children: [
-                {
-                    label: 'Sales',
-                    styleClass: '!bg-purple-100 text-white rounded-xl'
-                },
-                {
-                    label: 'Marketing',
-                    styleClass: '!bg-purple-100 text-white rounded-xl'
-                }
-            ]
-        },
-        {
-            key: '0_1',
-            type: 'person',
-            styleClass: '!bg-teal-100 text-white rounded-xl',
-            data: {
-                image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
-                name: 'Stephen Shaw',
-                title: 'CTO'
-            },
-            children: [
-                {
-                    label: 'Development',
-                    styleClass: '!bg-teal-100 text-white rounded-xl'
-                },
-                {
-                    label: 'UI/UX Design',
-                    styleClass: '!bg-teal-100 text-white rounded-xl'
-                }
-            ]
-        }
-    ]
-});
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/organizationchart/ImportDoc.vue b/apps/labs/doc/organizationchart/ImportDoc.vue
deleted file mode 100644
index d611547e8..000000000
--- a/apps/labs/doc/organizationchart/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import OrganizationChart from 'primevue/organizationchart';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/organizationchart/SelectionDoc.vue b/apps/labs/doc/organizationchart/SelectionDoc.vue
deleted file mode 100644
index 30ca5f0ce..000000000
--- a/apps/labs/doc/organizationchart/SelectionDoc.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the v-model directive. Note that selection on a particular node can be disabled if the
-            <i>selectable</i> is false on the node instance.
-        </p>
-    </DocSectionText>
-    <div class="card overflow-x-auto">
-        <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
-            <template #person="slotProps">
-                <div class="flex flex-col">
-                    <div class="flex flex-col items-center">
-                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
-                        <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
-                        <span>{{ slotProps.node.data.title }}</span>
-                    </div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                key: '0',
-                type: 'person',
-                data: {
-                    image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
-                    name: 'Amy Elsner',
-                    title: 'CEO'
-                },
-                children: [
-                    {
-                        key: '0_0',
-                        type: 'person',
-                        data: {
-                            image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
-                            name: 'Anna Fali',
-                            title: 'CMO'
-                        },
-                        children: [
-                            {
-                                key: '0_0_0',
-                                label: 'Sales'
-                            },
-                            {
-                                key: '0_0_"1',
-                                label: 'Marketing'
-                            }
-                        ]
-                    },
-                    {
-                        key: '0_1',
-                        type: 'person',
-                        data: {
-                            image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
-                            name: 'Stephen Shaw',
-                            title: 'CTO'
-                        },
-                        children: [
-                            {
-                                key: '0_1_0',
-                                label: 'Development'
-                            },
-                            {
-                                key: '0_1_1',
-                                label: 'UI/UX Design'
-                            }
-                        ]
-                    }
-                ]
-            },
-            selection: {},
-            code: {
-                basic: `
-<OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
-    <template #person="slotProps">
-        <div class="flex flex-col">
-            <div class="flex flex-col items-center">
-                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
-                <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
-                <span>{{ slotProps.node.data.title }}</span>
-            </div>
-        </div>
-    </template>
-    <template #default="slotProps">
-        <span>{{ slotProps.node.label }}</span>
-    </template>
-</OrganizationChart>
-`,
-                options: `
-<template>
-    <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
-        <template #person="slotProps">
-            <div class="flex flex-col">
-                <div class="flex flex-col items-center">
-                    <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
-                    <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
-                    <span>{{ slotProps.node.data.title }}</span>
-                </div>
-            </div>
-        </template>
-        <template #default="slotProps">
-            <span>{{ slotProps.node.label }}</span>
-        </template>
-    </OrganizationChart>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                key: '0',
-                type: 'person',
-                data: {
-                    image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
-                    name: 'Amy Elsner',
-                    title: 'CEO'
-                },
-                children: [
-                    {
-                        key: '0_0',
-                        type: 'person',
-                        data: {
-                            image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
-                            name: 'Anna Fali',
-                            title: 'CMO'
-                        },
-                        children: [
-                            {
-                                key: '0_0_0',
-                                label: 'Sales'
-                            },
-                            {
-                                key: '0_0_"1',
-                                label: 'Marketing'
-                            }
-                        ]
-                    },
-                    {
-                        key: '0_1',
-                        type: 'person',
-                        data: {
-                            image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
-                            name: 'Stephen Shaw',
-                            title: 'CTO'
-                        },
-                        children: [
-                            {
-                                key: '0_1_0',
-                                label: 'Development'
-                            },
-                            {
-                                key: '0_1_1',
-                                label: 'UI/UX Design'
-                            }
-                        ]
-                    }
-                ]
-            },
-            selection: {}
-        };
-    },
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
-        <template #person="slotProps">
-            <div class="flex flex-col">
-                <div class="flex flex-col items-center">
-                    <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
-                    <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
-                    <span>{{ slotProps.node.data.title }}</span>
-                </div>
-            </div>
-        </template>
-        <template #default="slotProps">
-            <span>{{ slotProps.node.label }}</span>
-        </template>
-    </OrganizationChart>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const data = ref({
-    key: '0',
-    type: 'person',
-    data: {
-        image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
-        name: 'Amy Elsner',
-        title: 'CEO'
-    },
-    children: [
-        {
-            key: '0_0',
-            type: 'person',
-            data: {
-                image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
-                name: 'Anna Fali',
-                title: 'CMO'
-            },
-            children: [
-                {
-                    key: '0_0_0',
-                    label: 'Sales'
-                },
-                {
-                    key: '0_0_"1',
-                    label: 'Marketing'
-                }
-            ]
-        },
-        {
-            key: '0_1',
-            type: 'person',
-            data: {
-                image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
-                name: 'Stephen Shaw',
-                title: 'CTO'
-            },
-            children: [
-                {
-                    key: '0_1_0',
-                    label: 'Development'
-                },
-                {
-                    key: '0_1_1',
-                    label: 'UI/UX Design'
-                }
-            ]
-        }
-    ]
-});
-const selection = ref({});
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/organizationchart/TemplateDoc.vue b/apps/labs/doc/organizationchart/TemplateDoc.vue
deleted file mode 100644
index 123c3b9a7..000000000
--- a/apps/labs/doc/organizationchart/TemplateDoc.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>type</i> property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.</p>
-    </DocSectionText>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data" collapsible>
-            <template #country="slotProps">
-                <div class="flex flex-col items-center">
-                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem flag flag-${slotProps.node.data}`" />
-                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{ slotProps.node.data.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                key: '0',
-                type: 'country',
-                label: 'Argentina',
-                data: 'ar',
-                children: [
-                    {
-                        key: '0_0',
-                        type: 'country',
-                        label: 'Argentina',
-                        data: 'ar',
-                        children: [
-                            {
-                                key: '0_0_0',
-                                type: 'country',
-                                label: 'Argentina',
-                                data: 'ar'
-                            },
-                            {
-                                key: '0_0_1',
-                                type: 'country',
-                                label: 'Croatia',
-                                data: 'hr'
-                            }
-                        ]
-                    },
-                    {
-                        key: '0_1',
-                        type: 'country',
-                        label: 'France',
-                        data: 'fr',
-                        children: [
-                            {
-                                key: '0_1_0',
-                                type: 'country',
-                                label: 'France',
-                                data: 'fr'
-                            },
-                            {
-                                key: '0_1_1',
-                                type: 'country',
-                                label: 'Morocco',
-                                data: 'ma'
-                            }
-                        ]
-                    }
-                ]
-            },
-            code: {
-                basic: `
-<OrganizationChart :value="data" collapsible>
-    <template #country="slotProps">
-        <div class="flex flex-col items-center">
-            <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
-            <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
-        </div>
-    </template>
-    <template #default="slotProps">
-        <span>{{slotProps.node.data.label}}</span>
-    </template>
-</OrganizationChart>
-`,
-                options: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data" collapsible>
-            <template #country="slotProps">
-                <div class="flex flex-col items-center">
-                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
-                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{slotProps.node.data.label}}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                key: '0',
-                type: 'country',
-                label: 'Argentina',
-                data: 'ar',
-                children: [
-                    {
-                        key: '0_0',
-                        type: 'country',
-                        label: 'Argentina',
-                        data: 'ar',
-                        children: [
-                            {
-                                key: '0_0_0',
-                                type: 'country',
-                                label: 'Argentina',
-                                data: 'ar'
-                            },
-                            {
-                                key: '0_0_1',
-                                type: 'country',
-                                label: 'Croatia',
-                                data: 'hr'
-                            }
-                        ]
-                    },
-                    {
-                        key: '0_1',
-                        type: 'country',
-                        label: 'France',
-                        data: 'fr',
-                        children: [
-                            {
-                                key: '0_1_0',
-                                type: 'country',
-                                label: 'France',
-                                data: 'fr'
-                            },
-                            {
-                                key: '0_1_1',
-                                type: 'country',
-                                label: 'Morocco',
-                                data: 'ma'
-                            }
-                        ]
-                    }
-                ]
-            }
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data" collapsible>
-            <template #country="slotProps">
-                <div class="flex flex-col items-center">
-                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
-                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{slotProps.node.data.label}}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const data = ref({
-    key: '0',
-    type: 'country',
-    label: 'Argentina',
-    data: 'ar',
-    children: [
-        {
-            key: '0_0',
-            type: 'country',
-            label: 'Argentina',
-            data: 'ar',
-            children: [
-                {
-                    key: '0_0_0',
-                    type: 'country',
-                    label: 'Argentina',
-                    data: 'ar'
-                },
-                {
-                    key: '0_0_1',
-                    type: 'country',
-                    label: 'Croatia',
-                    data: 'hr'
-                }
-            ]
-        },
-        {
-            key: '0_1',
-            type: 'country',
-            label: 'France',
-            data: 'fr',
-            children: [
-                {
-                    key: '0_1_0',
-                    type: 'country',
-                    label: 'France',
-                    data: 'fr'
-                },
-                {
-                    key: '0_1_1',
-                    type: 'country',
-                    label: 'Morocco',
-                    data: 'ma'
-                }
-            ]
-        }
-    ]
-});
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/overview/IdeaDoc.vue b/apps/labs/doc/overview/IdeaDoc.vue
deleted file mode 100644
index a8e963e5c..000000000
--- a/apps/labs/doc/overview/IdeaDoc.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            At PrimeTek, we have been developing UI component libraries for 20+ years. Despite the rapid technical enhancements in web, the requirements have not changed significantly. Developers are still expected to build UIs with reusable UI
-            components like dropdowns, tabs, tables, modals and so on. Some teams prefer to use 3rd party UI libraries to save time so that they can focus on the application requirements whereas developing an in-house library may also be preferred to
-            be in full control. We are aiming to find the best of both worlds, a 3rd party UI library that is easy to tune and customize as if it were an in-house library.
-        </p>
-        <p>
-            The most common variable in this equation is styling, for example a modal dialog is a familiar UI item in applications, the main requirements are to be displayed as an overlay and be accessible. Although the requirements are same, the UI
-            and UX would vary depending the design used in the application due to the subjective nature. This is the main idea of an unstyled core, following the same example, PrimeVue
-            <a href="https://primevue.org/dialog/" target="_blank" rel="noopener noreferrer">Dialog</a> component provides a functional pattern out of the box while giving you the complete liberty on styling.
-        </p>
-        <p>
-            Traditional UI libraries have opinionated styling APIs, some prefer to even base it on a design system like Material. These APIs only permit customizing the opinions as they only allow what you can customize and at some point will get in
-            your way. PrimeVue is styled by default, with the upcoming v4 it will also provide a new theming API that is designed to be customizable without restrictions however the unstyled mode of PrimeVue is the key in case you'd like take the
-            freestyle approach without the need to learn new theming APIs.
-        </p>
-        <p>
-            Tailwind is a perfect fit for the unstyled mode of PrimeVue, as it is also unopinionated unlike Bootstrap. There is no <i>btn</i> class in Tailwind, instead it provides the building blocks e.g. utilities to build your own button. PrimeVue
-            takes this approach to the next level by styling the components with Tailwind utilities, so instead of using a class like <i>.p-button</i> to style a Button, styling is done with Tailwind utilities that are served as <i>presets</i>.
-        </p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/overview/PresetDoc.vue b/apps/labs/doc/overview/PresetDoc.vue
deleted file mode 100644
index c139fc433..000000000
--- a/apps/labs/doc/overview/PresetDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            A Tailwind CSS preset is a pass-through object to style PrimeVue, the components are not aware of Tailwind in core as the utility classes are injected via <i>pt</i>. This makes the architecture flexible as another CSS library like UnoCSS
-            or Bootstrap can be used instead of Tailwind.
-        </p>
-        <p>
-            The release bundle contains two built-in presets; <b>lara</b> and <b>aura</b>. In the future, more presets are planned e.g. for Material Design. The presets are implemented for you to use as a base to build your own, you may use them as
-            they are or use them as reference when creating your own design. A preset can only for a single component or multiple, visit the Gallery to view the community driven presets. Releases of presets are not published to NPM as copy-paste
-            approach is a more suitable strategy for easier customization instead of an imported module from node_modules.
-        </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-        <p>
-            Presets are reactive, as a result changing the configuration reskins the entire UI suite. This allows switching the design system at runtime e.g. from Material Design from Google to Fluent of Microsoft with a single line instead of
-            rewriting the application with another UI library.
-        </p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-import { createApp } from 'vue';
-import PrimeVue from 'primevue/config';
-import Lara from '@/presets/lara';
-
-const app = createApp(App);
-app.use(PrimeVue, {
-    unstyled: true,
-    pt: Lara
-});
-`
-            },
-            code2: {
-                basic: `
-import Lara from '@/presets/lara';
-import Aura from '@/presets/aura';
-import { usePrimeVue } from "primevue/config";
-
-const primevue = usePrimeVue();
-
-primevue.config.pt = Lara;
-//or
-primevue.config.pt = Aura;
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/overview/passthrough/GlobalDoc.vue b/apps/labs/doc/overview/passthrough/GlobalDoc.vue
deleted file mode 100644
index f073f2394..000000000
--- a/apps/labs/doc/overview/passthrough/GlobalDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>PassThrough configuration for each component type can be defined globally with the <i>pt</i> option of PrimeVue.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import { createApp } from "vue";
-import PrimeVue from "primevue/config";
-const app = createApp(App);
-
-app.use(PrimeVue, {
-    pt: {
-        inputtext: {
-            root: 'bg-surface-50 text-surface-900 ...'
-        }
-        panel: {
-            //...
-            header: {
-                class: 'bg-primary-400'
-            }
-        },
-        autocomplete: {
-            //...
-            input: {
-                root: 'w-16rem' // OR { class: 'w-16rem' }
-            }
-        },
-        //...
-    }
-});
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/overview/passthrough/LocalDoc.vue b/apps/labs/doc/overview/passthrough/LocalDoc.vue
deleted file mode 100644
index 35ee66f18..000000000
--- a/apps/labs/doc/overview/passthrough/LocalDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>This example styles a InputText component by passing the Tailwind utilities to the input element, since PrimeVue is in unstyled mode <i>.p-inputtext</i> class does not exist at all.</p>
-        <div class="card flex justify-center">
-            <InputText type="text" :pt="myInputStyle" placeholder="InputText" />
-        </div>
-        <DocSectionCode :code="code" hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            myInputStyle: {
-                root: 'bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent'
-            },
-            code: {
-                basic: `
-<InputText :pt="myInputStyle" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputText :pt="myInputStyle" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            myInputStyle: {
-                root: 'bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent'
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputText :pt="myInputStyle" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const myInputStyle = ref({
-    root: 'bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent'
-});
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/overview/passthrough/OverrideDoc.vue b/apps/labs/doc/overview/passthrough/OverrideDoc.vue
deleted file mode 100644
index 18e959bef..000000000
--- a/apps/labs/doc/overview/passthrough/OverrideDoc.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A global configuration can be overriden with the local <i>pt</i> configuration in case you'd like to change the style of a particular component.</p>
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InputText :pt="myInputStyle" :ptOptions="{mergeSections: true, mergeProps: false}">
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/overview/passthrough/ReuseDoc.vue b/apps/labs/doc/overview/passthrough/ReuseDoc.vue
deleted file mode 100644
index 9e8823cd0..000000000
--- a/apps/labs/doc/overview/passthrough/ReuseDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            The set of the utilities can easily be converted to a reusable class using the <i>@apply</i> directive of Tailwind if you'd like to reuse them in your application. Note that, the built-in presets do not follow this approach for reuse as
-            it would mean creating opinionated Tailwind components whereas focus of PrimeVue is creating Vue components. Also it would require us to naming class names and as we all know developers are not good at naming things.
-        </p>
-        <div class="card flex justify-center">
-            <InputText type="text" :pt="myInputStyle" placeholder="InputText" />
-        </div>
-        <DocSectionCode :code="code" hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            myInputStyle: {
-                root: 'myTailwindInput'
-            },
-            code: {
-                basic: `
-<style scoped>
-.myTailwindInput {
-    @apply bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent;
-}
-</style>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <InputText :pt="myInputStyle" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            myInputStyle: {
-                root: 'myTailwindInput'
-            }
-        }
-    }
-}
-<\/script>
-
-<style scoped>
-.myTailwindInput {
-    @apply bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent;
-}
-</style>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputText :pt="myInputStyle" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const myInputStyle = ref({
-    root: 'myTailwindInput'
-});
-<\/script>
-
-<style scoped>
-.myTailwindInput {
-    @apply bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent;
-}
-</style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.myTailwindInput {
-    @apply bg-gray-100 dark:bg-gray-950 p-4 text-gray-900 dark:text-gray-50 rounded-full placeholder:text-gray-500 border border-transparent;
-}
-</style>
diff --git a/apps/labs/doc/paginator/AccessibilityDoc.vue b/apps/labs/doc/paginator/AccessibilityDoc.vue
deleted file mode 100644
index 28efb6f5b..000000000
--- a/apps/labs/doc/paginator/AccessibilityDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Paginator is placed inside a <i>nav</i> element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.</p>
-
-        <p>
-            First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API respectively.
-        </p>
-
-        <p>
-            Page links are also button elements with an <i>aria-label</i> attribute derived from the <i>aria.pageLabel</i> of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API. Current
-            page is marked with <i>aria-current</i> set to "page" as well.
-        </p>
-
-        <p>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p>
-
-        <p>
-            Rows per page dropdown internally uses a dropdown component, refer to the <NuxtLink to="/select">select</NuxtLink> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
-            <i>aria.rowsPerPageLabel</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
-        </p>
-
-        <p>
-            Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers to
-            the <i>aria.jumpToPageDropdownLabel</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through the paginator elements.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Executes the paginator element action.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Executes the paginator element action.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Rows Per Page Dropdown Keyboard Support</h3>
-        <p>Refer to the <NuxtLink to="/select">select</NuxtLink> documentation for more details about keyboard support.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/paginator/BasicDoc.vue b/apps/labs/doc/paginator/BasicDoc.vue
deleted file mode 100644
index aaf94e2e5..000000000
--- a/apps/labs/doc/paginator/BasicDoc.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Paginator is used as a controlled component with <i>first</i> and <i>rows</i> properties to manage the first index and number of records to display per page. Total number of records need to be with <i>totalRecords</i> property. Default
-            template includes a dropdown to change the <i>rows</i> so <i>rowsPerPageOptions</i> is also necessary for the dropdown options.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/paginator/CurrentPageReportDoc.vue b/apps/labs/doc/paginator/CurrentPageReportDoc.vue
deleted file mode 100644
index 14fda1a73..000000000
--- a/apps/labs/doc/paginator/CurrentPageReportDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Current page report item in the template displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;</p>
-        <ul class="mb-6 leading-relaxed">
-            <li>{currentPage}</li>
-            <li>{totalPages}</li>
-            <li>{rows}</li>
-            <li>{first}</li>
-            <li>{last}</li>
-            <li>{totalRecords}</li>
-        </ul>
-    </DocSectionText>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            first: 0,
-            code: {
-                basic: `
-<Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-            currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            first: 0
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-            currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const first = ref(0);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/paginator/CustomContentDoc.vue b/apps/labs/doc/paginator/CustomContentDoc.vue
deleted file mode 100644
index 2dddef7ee..000000000
--- a/apps/labs/doc/paginator/CustomContentDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>There are two templates available named <i>start</i> and <i>end</i> to add custom content to these locations. Both templates get a state object as a slot property to provide the current page, first index and the rows.</p>
-    </DocSectionText>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
-            <template #start="slotProps"> Page: {{ slotProps.state.page }} First: {{ slotProps.state.first }} Rows: {{ slotProps.state.rows }} </template>
-            <template #end>
-                <Button type="button" icon="pi pi-search" />
-            </template>
-        </Paginator>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
-    <template #start="slotProps">
-        Page: {{ slotProps.state.page }}
-        First: {{ slotProps.state.first }}
-        Rows: {{ slotProps.state.rows }}
-    </template>
-    <template #end>
-        <Button type="button" icon="pi pi-search" />
-    </template>
-</Paginator>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
-            <template #start="slotProps">
-                Page: {{ slotProps.state.page }}
-                First: {{ slotProps.state.first }}
-                Rows: {{ slotProps.state.rows }}
-            </template>
-            <template #end>
-                <Button type="button" icon="pi pi-search" />
-            </template>
-        </Paginator>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
-            <template #start="slotProps">
-                Page: {{ slotProps.state.page }}
-                First: {{ slotProps.state.first }}
-                Rows: {{ slotProps.state.rows }}
-            </template>
-            <template #end>
-                <Button type="button" icon="pi pi-search" />
-            </template>
-        </Paginator>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/paginator/HeadlessDoc.vue b/apps/labs/doc/paginator/HeadlessDoc.vue
deleted file mode 100644
index dd95e560a..000000000
--- a/apps/labs/doc/paginator/HeadlessDoc.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements. The template receives the following data;</p>
-        <ul class="mb-6 leading-relaxed">
-            <li>first</li>
-            <li>last</li>
-            <li>rows</li>
-            <li>page</li>
-            <li>pageCount</li>
-            <li>totalRecords</li>
-            <li>firstPageCallback</li>
-            <li>lastPageCallback</li>
-            <li>prevPageCallback</li>
-            <li>nextPageCallback</li>
-            <li>rowChangeCallback</li>
-        </ul>
-    </DocSectionText>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120">
-            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                    <div class="text-color font-medium">
-                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                    </div>
-                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                </div>
-            </template>
-        </Paginator>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Paginator :rows="10" :totalRecords="120">
-    <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-        <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-            <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                <div class="text-color font-medium">
-                    <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                    <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                </div>
-                <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-            </div>
-        </template>
-    </template>
-</Paginator>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120">
-            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                    <div class="text-color font-medium">
-                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                    </div>
-                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                </div>
-            </template>
-        </Paginator>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120">
-            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                    <div class="text-color font-medium">
-                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                    </div>
-                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                </div>
-            </template>
-        </Paginator>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/paginator/ImportDoc.vue b/apps/labs/doc/paginator/ImportDoc.vue
deleted file mode 100644
index b9f43af30..000000000
--- a/apps/labs/doc/paginator/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Paginator from 'primevue/paginator';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/paginator/ResponsiveDoc.vue b/apps/labs/doc/paginator/ResponsiveDoc.vue
deleted file mode 100644
index 20f0dce18..000000000
--- a/apps/labs/doc/paginator/ResponsiveDoc.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Paginator elements can be customized per screen size by defining a template per breakpoint. Note that breakpoints are based on max-width setting, if default key is omitted then the default template would be used. Example below has 4
-            settings; up to 640px, between 641px-960px, between 961px-1300px and larger than 1301px which is the default.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <Paginator
-            :template="{
-                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
-                '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
-                '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
-                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
-            }"
-            :rows="10"
-            :totalRecords="120"
-        ></Paginator>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Paginator
-    :template="{
-        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
-        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
-        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
-        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
-    }"
-    :rows="10"
-    :totalRecords="120">
-</Paginator>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Paginator
-            :template="{
-                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
-                '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
-                '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
-                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
-            }"
-            :rows="10"
-            :totalRecords="120">
-        </Paginator>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Paginator
-            :template="{
-                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
-                '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
-                '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
-                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
-            }"
-            :rows="10"
-            :totalRecords="120">
-        </Paginator>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/paginator/TemplateDoc.vue b/apps/labs/doc/paginator/TemplateDoc.vue
deleted file mode 100644
index 7b95f6ad0..000000000
--- a/apps/labs/doc/paginator/TemplateDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
-            can be placed inside a paginator in any order.
-        </p>
-        <ul class="mb-6 leading-relaxed">
-            <li>FirstPageLink</li>
-            <li>PrevPageLink</li>
-            <li>PageLinks</li>
-            <li>NextPageLink</li>
-            <li>LastPageLink</li>
-            <li>RowsPerPageDropdown</li>
-            <li>JumpToPageDropdown</li>
-            <li>JumpToPageInput</li>
-            <li>CurrentPageReport</li>
-        </ul>
-    </DocSectionText>
-    <div class="card">
-        <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
-
-        <div class="p-4 text-center">
-            <img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="rounded w-full sm:w-[30rem]" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            first: 0,
-            code: {
-                basic: `
-<Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
-
-<div class="p-4 text-center">
-    <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
-</div>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
-
-        <div class="p-4 text-center">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            first: 0
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
-
-        <div class="p-4 text-center">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const first = ref(0);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panel/AccessibilityDoc.vue b/apps/labs/doc/panel/AccessibilityDoc.vue
deleted file mode 100644
index d0d6cd3b5..000000000
--- a/apps/labs/doc/panel/AccessibilityDoc.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value
-            of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
-        </p>
-        <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
-
-        <h3>Content Toggle Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Toggles the visibility of the content.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the visibility of the content.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/panel/BasicDoc.vue b/apps/labs/doc/panel/BasicDoc.vue
deleted file mode 100644
index 4fda697ea..000000000
--- a/apps/labs/doc/panel/BasicDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A simple Panel is created with a <i>header</i> property along with the content as children.</p>
-    </DocSectionText>
-    <div class="card">
-        <Panel header="Header">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Panel header="Header">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Panel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Panel header="Header">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Panel header="Header">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panel/ImportDoc.vue b/apps/labs/doc/panel/ImportDoc.vue
deleted file mode 100644
index 418371d7c..000000000
--- a/apps/labs/doc/panel/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Panel from 'primevue/panel';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panel/TemplateDoc.vue b/apps/labs/doc/panel/TemplateDoc.vue
deleted file mode 100644
index 3ff207020..000000000
--- a/apps/labs/doc/panel/TemplateDoc.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Header, icons and footer sections of the panel are customizable via templating.</p>
-    </DocSectionText>
-    <div class="card">
-        <Panel toggleable>
-            <template #header>
-                <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold">Amy Elsner</span>
-                </div>
-            </template>
-            <template #footer>
-                <div class="flex flex-wrap items-center justify-between gap-4">
-                    <div class="flex items-center gap-2">
-                        <Button icon="pi pi-user" rounded text></Button>
-                        <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
-                    </div>
-                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
-                </div>
-            </template>
-            <template #icons>
-                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
-                <Menu ref="menu" id="config_menu" :model="items" popup />
-            </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Refresh',
-                    icon: 'pi pi-refresh'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times'
-                }
-            ],
-            code: {
-                basic: `
-<Panel toggleable>
-    <template #header>
-        <div class="flex items-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            <span class="font-bold">Amy Elsner</span>
-        </div>
-    </template>
-    <template #footer>
-        <div class="flex flex-wrap items-center justify-between gap-4">
-            <div class="flex items-center gap-2">
-                <Button icon="pi pi-user" rounded text></Button>
-                <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
-            </div>
-            <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
-        </div>
-    </template>
-    <template #icons>
-        <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
-        <Menu ref="menu" id="config_menu" :model="items" popup />
-    </template>
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Panel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast />
-        <Panel toggleable>
-            <template #header>
-                <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold">Amy Elsner</span>
-                </div>
-            </template>
-            <template #footer>
-                <div class="flex flex-wrap items-center justify-between gap-4">
-                    <div class="flex items-center gap-2">
-                        <Button icon="pi pi-user" rounded text></Button>
-                        <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
-                    </div>
-                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
-                </div>
-            </template>
-            <template #icons>
-                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
-                <Menu ref="menu" id="config_menu" :model="items" popup />
-            </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Refresh',
-                    icon: 'pi pi-refresh'
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times'
-                }
-            ]
-        }
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        },
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <Panel toggleable>
-            <template #header>
-                <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold">Amy Elsner</span>
-                </div>
-            </template>
-            <template #footer>
-                <div class="flex flex-wrap items-center justify-between gap-4">
-                    <div class="flex items-center gap-2">
-                        <Button icon="pi pi-user" rounded text></Button>
-                        <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
-                    </div>
-                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
-                </div>
-            </template>
-            <template #icons>
-                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
-                <Menu ref="menu" id="config_menu" :model="items" popup />
-            </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from "primevue/usetoast";
-import { useRouter } from 'vue-router';
-import Menu from 'primevue/menu';
-
-const menu = ref(null);
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Refresh',
-        icon: 'pi pi-refresh'
-    },
-    {
-        label: 'Search',
-        icon: 'pi pi-search'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times'
-    }
-]);
-
-const toggle = (event) => {
-    menu.value.toggle(event);
-};
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        },
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/panel/ToggleableDoc.vue b/apps/labs/doc/panel/ToggleableDoc.vue
deleted file mode 100644
index ef73d1add..000000000
--- a/apps/labs/doc/panel/ToggleableDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
-    </DocSectionText>
-    <div class="card">
-        <Panel header="Header" toggleable>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Panel header="Header" toggleable>
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Panel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Panel header="Header" toggleable>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Panel header="Header" toggleable>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panelmenu/AccessibilityDoc.vue b/apps/labs/doc/panelmenu/AccessibilityDoc.vue
deleted file mode 100644
index bb26c4d6f..000000000
--- a/apps/labs/doc/panelmenu/AccessibilityDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Accordion header elements have a <i>button</i> role, an <i>aria-label</i> defined using the <i>label</i> property of the menuitem model and <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for
-            the visibility state.
-        </p>
-        <p>The content of an accordion panel uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
-
-        <p>
-            The tree elements has a <i>tree</i> as the role and each menu item has a <i>treeitem</i> role along with <i>aria-label</i> and <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The
-            <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
-        </p>
-
-        <h3>Header Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Toggles the visibility of the content.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Toggles the visibility of the content.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last header.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/panelmenu/BasicDoc.vue b/apps/labs/doc/panelmenu/BasicDoc.vue
deleted file mode 100644
index 8499c5cf2..000000000
--- a/apps/labs/doc/panelmenu/BasicDoc.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>PanelMenu requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Files',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'Documents',
-                            icon: 'pi pi-file',
-                            items: [
-                                {
-                                    label: 'Invoices',
-                                    icon: 'pi pi-file-pdf',
-                                    items: [
-                                        {
-                                            label: 'Pending',
-                                            icon: 'pi pi-stop'
-                                        },
-                                        {
-                                            label: 'Paid',
-                                            icon: 'pi pi-check-circle'
-                                        }
-                                    ]
-                                },
-                                {
-                                    label: 'Clients',
-                                    icon: 'pi pi-users'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Images',
-                            icon: 'pi pi-image',
-                            items: [
-                                {
-                                    label: 'Logos',
-                                    icon: 'pi pi-image'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Cloud',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Upload',
-                            icon: 'pi pi-cloud-upload'
-                        },
-                        {
-                            label: 'Download',
-                            icon: 'pi pi-cloud-download'
-                        },
-                        {
-                            label: 'Sync',
-                            icon: 'pi pi-refresh'
-                        }
-                    ]
-                },
-                {
-                    label: 'Devices',
-                    icon: 'pi pi-desktop',
-                    items: [
-                        {
-                            label: 'Phone',
-                            icon: 'pi pi-mobile'
-                        },
-                        {
-                            label: 'Desktop',
-                            icon: 'pi pi-desktop'
-                        },
-                        {
-                            label: 'Tablet',
-                            icon: 'pi pi-tablet'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Files',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'Documents',
-                            icon: 'pi pi-file',
-                            items: [
-                                {
-                                    label: 'Invoices',
-                                    icon: 'pi pi-file-pdf',
-                                    items: [
-                                        {
-                                            label: 'Pending',
-                                            icon: 'pi pi-stop'
-                                        },
-                                        {
-                                            label: 'Paid',
-                                            icon: 'pi pi-check-circle'
-                                        }
-                                    ]
-                                },
-                                {
-                                    label: 'Clients',
-                                    icon: 'pi pi-users'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Images',
-                            icon: 'pi pi-image',
-                            items: [
-                                {
-                                    label: 'Logos',
-                                    icon: 'pi pi-image'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Cloud',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Upload',
-                            icon: 'pi pi-cloud-upload'
-                        },
-                        {
-                            label: 'Download',
-                            icon: 'pi pi-cloud-download'
-                        },
-                        {
-                            label: 'Sync',
-                            icon: 'pi pi-refresh'
-                        }
-                    ]
-                },
-                {
-                    label: 'Devices',
-                    icon: 'pi pi-desktop',
-                    items: [
-                        {
-                            label: 'Phone',
-                            icon: 'pi pi-mobile'
-                        },
-                        {
-                            label: 'Desktop',
-                            icon: 'pi pi-desktop'
-                        },
-                        {
-                            label: 'Tablet',
-                            icon: 'pi pi-tablet'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Files',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'Documents',
-                icon: 'pi pi-file',
-                items: [
-                    {
-                        label: 'Invoices',
-                        icon: 'pi pi-file-pdf',
-                        items: [
-                            {
-                                label: 'Pending',
-                                icon: 'pi pi-stop'
-                            },
-                            {
-                                label: 'Paid',
-                                icon: 'pi pi-check-circle'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Clients',
-                        icon: 'pi pi-users'
-                    }
-                ]
-            },
-            {
-                label: 'Images',
-                icon: 'pi pi-image',
-                items: [
-                    {
-                        label: 'Logos',
-                        icon: 'pi pi-image'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Cloud',
-        icon: 'pi pi-cloud',
-        items: [
-            {
-                label: 'Upload',
-                icon: 'pi pi-cloud-upload'
-            },
-            {
-                label: 'Download',
-                icon: 'pi pi-cloud-download'
-            },
-            {
-                label: 'Sync',
-                icon: 'pi pi-refresh'
-            }
-        ]
-    },
-    {
-        label: 'Devices',
-        icon: 'pi pi-desktop',
-        items: [
-            {
-                label: 'Phone',
-                icon: 'pi pi-mobile'
-            },
-            {
-                label: 'Desktop',
-                icon: 'pi pi-desktop'
-            },
-            {
-                label: 'Tablet',
-                icon: 'pi pi-tablet'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panelmenu/CommandDoc.vue b/apps/labs/doc/panelmenu/CommandDoc.vue
deleted file mode 100644
index 7f4c59e32..000000000
--- a/apps/labs/doc/panelmenu/CommandDoc.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Files',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-search',
-                            command: () => {
-                                this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print',
-                            command: () => {
-                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Sync',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Import',
-                            icon: 'pi pi-cloud-download',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-cloud-upload',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Sign Out',
-                    icon: 'pi pi-sign-out',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu :model="items" />
-<Toast />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80" />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Files',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-search',
-                            command: () => {
-                                this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print',
-                            command: () => {
-                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Sync',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Import',
-                            icon: 'pi pi-cloud-download',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-cloud-upload',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Sign Out',
-                    icon: 'pi pi-sign-out',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
-                    }
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-
-const items = ref([
-    {
-        label: 'Files',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus',
-                command: () => {
-                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                }
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-search',
-                command: () => {
-                    toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-                }
-            },
-            {
-                label: 'Print',
-                icon: 'pi pi-print',
-                command: () => {
-                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                }
-            }
-        ]
-    },
-    {
-        label: 'Sync',
-        icon: 'pi pi-cloud',
-        items: [
-            {
-                label: 'Import',
-                icon: 'pi pi-cloud-download',
-                command: () => {
-                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                }
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-cloud-upload',
-                command: () => {
-                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                }
-            }
-        ]
-    },
-    {
-        label: 'Sign Out',
-        icon: 'pi pi-sign-out',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
-        }
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panelmenu/ControlledDoc.vue b/apps/labs/doc/panelmenu/ControlledDoc.vue
deleted file mode 100644
index 9368ed18f..000000000
--- a/apps/labs/doc/panelmenu/ControlledDoc.vue
+++ /dev/null
@@ -1,337 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
-            value is a boolean.
-        </p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <Button type="button" label="Toggle All" text @click="toggleAll" />
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            expandedKeys: {},
-            items: [
-                {
-                    key: '0',
-                    label: 'Users',
-                    icon: 'pi pi-users',
-                    items: [
-                        {
-                            key: '0_1',
-                            label: 'New',
-                            items: [
-                                {
-                                    key: '0_1_0',
-                                    label: 'Member'
-                                },
-                                {
-                                    key: '0_1_1',
-                                    label: 'Group'
-                                }
-                            ]
-                        },
-                        {
-                            key: '0_2',
-                            label: 'Search'
-                        }
-                    ]
-                },
-                {
-                    key: '1',
-                    label: 'Tasks',
-                    icon: 'pi pi-server',
-                    items: [
-                        {
-                            key: '1_0',
-                            label: 'Add New'
-                        },
-                        {
-                            key: '1_1',
-                            label: 'Pending'
-                        },
-                        {
-                            key: '1_2',
-                            label: 'Overdue'
-                        }
-                    ]
-                },
-                {
-                    key: '2',
-                    label: 'Calendar',
-                    icon: 'pi pi-calendar',
-                    items: [
-                        {
-                            key: '2_0',
-                            label: 'New Event'
-                        },
-                        {
-                            key: '2_1',
-                            label: 'Today'
-                        },
-                        {
-                            key: '2_2',
-                            label: 'This Week'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Button type="button" label="Toggle All" text @click="toggleAll" />
-<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Button type="button" label="Toggle All" text @click="toggleAll" />
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            expandedKeys: {},
-            items: [
-                {
-                    key: '0',
-                    label: 'Users',
-                    icon: 'pi pi-users',
-                    items: [
-                        {
-                            key: '0_1',
-                            label: 'New',
-                            items: [
-                                {
-                                    key: '0_1_0',
-                                    label: 'Member'
-                                },
-                                {
-                                    key: '0_1_1',
-                                    label: 'Group'
-                                }
-                            ]
-                        },
-                        {
-                            key: '0_2',
-                            label: 'Search'
-                        }
-                    ]
-                },
-                {
-                    key: '1',
-                    label: 'Tasks',
-                    icon: 'pi pi-server',
-                    items: [
-                        {
-                            key: '1_0',
-                            label: 'Add New'
-                        },
-                        {
-                            key: '1_1',
-                            label: 'Pending'
-                        },
-                        {
-                            key: '1_2',
-                            label: 'Overdue'
-                        }
-                    ]
-                },
-                {
-                    key: '2',
-                    label: 'Calendar',
-                    icon: 'pi pi-calendar',
-                    items: [
-                        {
-                            key: '2_0',
-                            label: 'New Event'
-                        },
-                        {
-                            key: '2_1',
-                            label: 'Today'
-                        },
-                        {
-                            key: '2_2',
-                            label: 'This Week'
-                        }
-                    ]
-                }
-            ]
-        };
-    },
-    methods: {
-        toggleAll() {
-            if (Object.keys(this.expandedKeys).length) this.collapseAll();
-            else this.expandAll();
-        },
-        expandAll() {
-            for (let node of this.items) {
-                this.expandNode(node);
-            }
-
-            this.expandedKeys = {
-                ...this.expandedKeys
-            };
-        },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            if (node.items && node.items.length) {
-                this.expandedKeys[node.key] = true;
-
-                for (let child of node.items) {
-                    this.expandNode(child);
-                }
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Button type="button" label="Toggle All" text @click="toggleAll" />
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const expandedKeys = ref({});
-const items = ref([
-    {
-        key: '0',
-        label: 'Users',
-        icon: 'pi pi-users',
-        items: [
-            {
-                key: '0_1',
-                label: 'New',
-                items: [
-                    {
-                        key: '0_1_0',
-                        label: 'Member'
-                    },
-                    {
-                        key: '0_1_1',
-                        label: 'Group'
-                    }
-                ]
-            },
-            {
-                key: '0_2',
-                label: 'Search'
-            }
-        ]
-    },
-    {
-        key: '1',
-        label: 'Tasks',
-        icon: 'pi pi-server',
-        items: [
-            {
-                key: '1_0',
-                label: 'Add New'
-            },
-            {
-                key: '1_1',
-                label: 'Pending'
-            },
-            {
-                key: '1_2',
-                label: 'Overdue'
-            }
-        ]
-    },
-    {
-        key: '2',
-        label: 'Calendar',
-        icon: 'pi pi-calendar',
-        items: [
-            {
-                key: '2_0',
-                label: 'New Event'
-            },
-            {
-                key: '2_1',
-                label: 'Today'
-            },
-            {
-                key: '2_2',
-                label: 'This Week'
-            }
-        ]
-    }
-]);
-
-const toggleAll = () => {
-    if (Object.keys(expandedKeys.value).length) collapseAll();
-    else expandAll();
-}
-
-const expandAll = () => {
-    for (let node of items.value) {
-        expandNode(node);
-    }
-
-    expandedKeys.value = {...expandedKeys.value};
-};
-
-const collapseAll = () => {
-    expandedKeys.value = {};
-};
-
-const expandNode = (node) => {
-    if (node.items && node.items.length) {
-        expandedKeys.value[node.key] = true;
-
-        for (let child of node.items) {
-            expandNode(child);
-        }
-    }
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggleAll() {
-            if (Object.keys(this.expandedKeys).length) this.collapseAll();
-            else this.expandAll();
-        },
-        expandAll() {
-            for (let node of this.items) {
-                this.expandNode(node);
-            }
-
-            this.expandedKeys = {
-                ...this.expandedKeys
-            };
-        },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            if (node.items && node.items.length) {
-                this.expandedKeys[node.key] = true;
-
-                for (let child of node.items) {
-                    this.expandNode(child);
-                }
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/panelmenu/ImportDoc.vue b/apps/labs/doc/panelmenu/ImportDoc.vue
deleted file mode 100644
index fbe84cdde..000000000
--- a/apps/labs/doc/panelmenu/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import PanelMenu from 'primevue/panelmenu';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panelmenu/MultipleDoc.vue b/apps/labs/doc/panelmenu/MultipleDoc.vue
deleted file mode 100644
index b36fbdd65..000000000
--- a/apps/labs/doc/panelmenu/MultipleDoc.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Only one root menuitem at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple root menuitems.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" multiple class="w-full md:w-80" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Files',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'Documents',
-                            icon: 'pi pi-file',
-                            items: [
-                                {
-                                    label: 'Invoices',
-                                    icon: 'pi pi-file-pdf',
-                                    items: [
-                                        {
-                                            label: 'Pending',
-                                            icon: 'pi pi-stop'
-                                        },
-                                        {
-                                            label: 'Paid',
-                                            icon: 'pi pi-check-circle'
-                                        }
-                                    ]
-                                },
-                                {
-                                    label: 'Clients',
-                                    icon: 'pi pi-users'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Images',
-                            icon: 'pi pi-image',
-                            items: [
-                                {
-                                    label: 'Logos',
-                                    icon: 'pi pi-image'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Cloud',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Upload',
-                            icon: 'pi pi-cloud-upload'
-                        },
-                        {
-                            label: 'Download',
-                            icon: 'pi pi-cloud-download'
-                        },
-                        {
-                            label: 'Sync',
-                            icon: 'pi pi-refresh'
-                        }
-                    ]
-                },
-                {
-                    label: 'Devices',
-                    icon: 'pi pi-desktop',
-                    items: [
-                        {
-                            label: 'Phone',
-                            icon: 'pi pi-mobile'
-                        },
-                        {
-                            label: 'Desktop',
-                            icon: 'pi pi-desktop'
-                        },
-                        {
-                            label: 'Tablet',
-                            icon: 'pi pi-tablet'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu :model="items" multiple />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" multiple class="w-full md:w-80" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Files',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'Documents',
-                            icon: 'pi pi-file',
-                            items: [
-                                {
-                                    label: 'Invoices',
-                                    icon: 'pi pi-file-pdf',
-                                    items: [
-                                        {
-                                            label: 'Pending',
-                                            icon: 'pi pi-stop'
-                                        },
-                                        {
-                                            label: 'Paid',
-                                            icon: 'pi pi-check-circle'
-                                        }
-                                    ]
-                                },
-                                {
-                                    label: 'Clients',
-                                    icon: 'pi pi-users'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Images',
-                            icon: 'pi pi-image',
-                            items: [
-                                {
-                                    label: 'Logos',
-                                    icon: 'pi pi-image'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Cloud',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Upload',
-                            icon: 'pi pi-cloud-upload'
-                        },
-                        {
-                            label: 'Download',
-                            icon: 'pi pi-cloud-download'
-                        },
-                        {
-                            label: 'Sync',
-                            icon: 'pi pi-refresh'
-                        }
-                    ]
-                },
-                {
-                    label: 'Devices',
-                    icon: 'pi pi-desktop',
-                    items: [
-                        {
-                            label: 'Phone',
-                            icon: 'pi pi-mobile'
-                        },
-                        {
-                            label: 'Desktop',
-                            icon: 'pi pi-desktop'
-                        },
-                        {
-                            label: 'Tablet',
-                            icon: 'pi pi-tablet'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" multiple class="w-full md:w-80" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Files',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'Documents',
-                icon: 'pi pi-file',
-                items: [
-                    {
-                        label: 'Invoices',
-                        icon: 'pi pi-file-pdf',
-                        items: [
-                            {
-                                label: 'Pending',
-                                icon: 'pi pi-stop'
-                            },
-                            {
-                                label: 'Paid',
-                                icon: 'pi pi-check-circle'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Clients',
-                        icon: 'pi pi-users'
-                    }
-                ]
-            },
-            {
-                label: 'Images',
-                icon: 'pi pi-image',
-                items: [
-                    {
-                        label: 'Logos',
-                        icon: 'pi pi-image'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Cloud',
-        icon: 'pi pi-cloud',
-        items: [
-            {
-                label: 'Upload',
-                icon: 'pi pi-cloud-upload'
-            },
-            {
-                label: 'Download',
-                icon: 'pi pi-cloud-download'
-            },
-            {
-                label: 'Sync',
-                icon: 'pi pi-refresh'
-            }
-        ]
-    },
-    {
-        label: 'Devices',
-        icon: 'pi pi-desktop',
-        items: [
-            {
-                label: 'Phone',
-                icon: 'pi pi-mobile'
-            },
-            {
-                label: 'Desktop',
-                icon: 'pi pi-desktop'
-            },
-            {
-                label: 'Tablet',
-                icon: 'pi pi-tablet'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panelmenu/RouterDoc.vue b/apps/labs/doc/panelmenu/RouterDoc.vue
deleted file mode 100644
index e6d7ba6d5..000000000
--- a/apps/labs/doc/panelmenu/RouterDoc.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80">
-            <template #item="{ item }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
-                </a>
-            </template>
-        </PanelMenu>
-    </div>
-    <DocSectionCode :code="code" hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router',
-                    icon: 'pi pi-palette',
-                    items: [
-                        {
-                            label: 'Styled',
-                            icon: 'pi pi-eraser',
-                            route: '/slider'
-                        },
-                        {
-                            label: 'Unstyled',
-                            icon: 'pi pi-heart',
-                            route: '/slider'
-                        }
-                    ]
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    items: [
-                        {
-                            label: 'Vue.js',
-                            icon: 'pi pi-star',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Vite.js',
-                            icon: 'pi pi-bookmark',
-                            url: 'https://vuejs.org/'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu :model="items">
-    <template #item="{ item }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
-                <span :class="item.icon" />
-                <span class="ml-2">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
-            <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
-            <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
-        </a>
-    </template>
-</PanelMenu>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80">
-            <template #item="{ item }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
-                </a>
-            </template>
-        </PanelMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router',
-                    icon: 'pi pi-palette',
-                    items: [
-                        {
-                            label: 'Styled',
-                            icon: 'pi pi-eraser',
-                            route: '/slider'
-                        },
-                        {
-                            label: 'Unstyled',
-                            icon: 'pi pi-heart',
-                            route: '/slider'
-                        }
-                    ]
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    items: [
-                        {
-                            label: 'Vue.js',
-                            icon: 'pi pi-star',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Vite.js',
-                            icon: 'pi pi-bookmark',
-                            url: 'https://vuejs.org/'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80">
-            <template #item="{ item }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
-                </a>
-            </template>
-        </PanelMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Router',
-        icon: 'pi pi-palette',
-        items: [
-            {
-                label: 'Styled',
-                icon: 'pi pi-eraser',
-                route: '/slider'
-            },
-            {
-                label: 'Unstyled',
-                icon: 'pi pi-heart',
-                route: '/slider'
-            }
-        ]
-    },
-    {
-        label: 'Programmatic',
-        icon: 'pi pi-link',
-        command: () => {
-            router.push('/slider');
-        }
-    },
-    {
-        label: 'External',
-        icon: 'pi pi-home',
-        items: [
-            {
-                label: 'Vue.js',
-                icon: 'pi pi-star',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Vite.js',
-                icon: 'pi pi-bookmark',
-                url: 'https://vuejs.org/'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/panelmenu/TemplateDoc.vue b/apps/labs/doc/panelmenu/TemplateDoc.vue
deleted file mode 100644
index 03fafa9ff..000000000
--- a/apps/labs/doc/panelmenu/TemplateDoc.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>PanelMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80">
-            <template #item="{ item }">
-                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
-                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
-                    <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                </a>
-            </template>
-        </PanelMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Mail',
-                    icon: 'pi pi-envelope',
-                    badge: 5,
-                    items: [
-                        {
-                            label: 'Compose',
-                            icon: 'pi pi-file-edit',
-                            shortcut: '⌘+N'
-                        },
-                        {
-                            label: 'Inbox',
-                            icon: 'pi pi-inbox',
-                            badge: 5
-                        },
-                        {
-                            label: 'Sent',
-                            icon: 'pi pi-send',
-                            shortcut: '⌘+S'
-                        },
-                        {
-                            label: 'Trash',
-                            icon: 'pi pi-trash',
-                            shortcut: '⌘+T'
-                        }
-                    ]
-                },
-                {
-                    label: 'Reports',
-                    icon: 'pi pi-chart-bar',
-                    shortcut: '⌘+R',
-                    items: [
-                        {
-                            label: 'Sales',
-                            icon: 'pi pi-chart-line',
-                            badge: 3
-                        },
-                        {
-                            label: 'Products',
-                            icon: 'pi pi-list',
-                            badge: 6
-                        }
-                    ]
-                },
-                {
-                    label: 'Profile',
-                    icon: 'pi pi-user',
-                    shortcut: '⌘+W',
-                    items: [
-                        {
-                            label: 'Settings',
-                            icon: 'pi pi-cog',
-                            shortcut: '⌘+O'
-                        },
-                        {
-                            label: 'Privacy',
-                            icon: 'pi pi-shield',
-                            shortcut: '⌘+P'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu :model="items">
-    <template #item="{ item }">
-        <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
-            <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
-            <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
-            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-        </a>
-    </template>
-</PanelMenu>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80">
-            <template #item="{ item }">
-                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
-                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
-                    <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                </a>
-            </template>
-        </PanelMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Mail',
-                    icon: 'pi pi-envelope',
-                    badge: 5,
-                    items: [
-                        {
-                            label: 'Compose',
-                            icon: 'pi pi-file-edit',
-                            shortcut: '⌘+N'
-                        },
-                        {
-                            label: 'Inbox',
-                            icon: 'pi pi-inbox',
-                            badge: 5
-                        },
-                        {
-                            label: 'Sent',
-                            icon: 'pi pi-send',
-                            shortcut: '⌘+S'
-                        },
-                        {
-                            label: 'Trash',
-                            icon: 'pi pi-trash',
-                            shortcut: '⌘+T'
-                        }
-                    ]
-                },
-                {
-                    label: 'Reports',
-                    icon: 'pi pi-chart-bar',
-                    shortcut: '⌘+R',
-                    items: [
-                        {
-                            label: 'Sales',
-                            icon: 'pi pi-chart-line',
-                            badge: 3
-                        },
-                        {
-                            label: 'Products',
-                            icon: 'pi pi-list',
-                            badge: 6
-                        }
-                    ]
-                },
-                {
-                    label: 'Profile',
-                    icon: 'pi pi-user',
-                    shortcut: '⌘+W',
-                    items: [
-                        {
-                            label: 'Settings',
-                            icon: 'pi pi-cog',
-                            shortcut: '⌘+O'
-                        },
-                        {
-                            label: 'Privacy',
-                            icon: 'pi pi-shield',
-                            shortcut: '⌘+P'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <PanelMenu :model="items" class="w-full md:w-80">
-            <template #item="{ item }">
-                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
-                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
-                    <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                </a>
-            </template>
-        </PanelMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Mail',
-        icon: 'pi pi-envelope',
-        badge: 5,
-        items: [
-            {
-                label: 'Compose',
-                icon: 'pi pi-file-edit',
-                shortcut: '⌘+N'
-            },
-            {
-                label: 'Inbox',
-                icon: 'pi pi-inbox',
-                badge: 5
-            },
-            {
-                label: 'Sent',
-                icon: 'pi pi-send',
-                shortcut: '⌘+S'
-            },
-            {
-                label: 'Trash',
-                icon: 'pi pi-trash',
-                shortcut: '⌘+T'
-            }
-        ]
-    },
-    {
-        label: 'Reports',
-        icon: 'pi pi-chart-bar',
-        shortcut: '⌘+R',
-        items: [
-            {
-                label: 'Sales',
-                icon: 'pi pi-chart-line',
-                badge: 3
-            },
-            {
-                label: 'Products',
-                icon: 'pi pi-list',
-                badge: 6
-            }
-        ]
-    },
-    {
-        label: 'Profile',
-        icon: 'pi pi-user',
-        shortcut: '⌘+W',
-        items: [
-            {
-                label: 'Settings',
-                icon: 'pi pi-cog',
-                shortcut: '⌘+O'
-            },
-            {
-                label: 'Privacy',
-                icon: 'pi pi-shield',
-                shortcut: '⌘+P'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/AccessibilityDoc.vue b/apps/labs/doc/password/AccessibilityDoc.vue
deleted file mode 100644
index bc5782f5d..000000000
--- a/apps/labs/doc/password/AccessibilityDoc.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader is notified about the changes to the strength of the password
-            using a section that has <i>aria-live</i> while typing.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the input.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Hides the strength meter if open.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="pwd1">Password</label>
-<Password inputId="pwd1" />
-
-<span id="pwd2">Password</span>
-<Password aria-labelledby="pwd2" />
-
-<Password aria-label="Password"/>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/BasicDoc.vue b/apps/labs/doc/password/BasicDoc.vue
deleted file mode 100644
index 2ccba43be..000000000
--- a/apps/labs/doc/password/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Password is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Password v-model="value" :feedback="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password v-model="value" :feedback="false" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" :feedback="false" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" :feedback="false" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/DisabledDoc.vue b/apps/labs/doc/password/DisabledDoc.vue
deleted file mode 100644
index 782daf6cf..000000000
--- a/apps/labs/doc/password/DisabledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Password disabled placeholder="Disabled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password disabled placeholder="Disabled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Password disabled placeholder="Disabled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Password disabled placeholder="Disabled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/FilledDoc.vue b/apps/labs/doc/password/FilledDoc.vue
deleted file mode 100644
index e3d8ed17c..000000000
--- a/apps/labs/doc/password/FilledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Password v-model="value" :feedback="false" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password v-model="value" :feedback="false" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" :feedback="false" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" :feedback="false" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/FloatLabelDoc.vue b/apps/labs/doc/password/FloatLabelDoc.vue
deleted file mode 100644
index 045c7a797..000000000
--- a/apps/labs/doc/password/FloatLabelDoc.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <Password v-model="value1" inputId="over_label" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <Password v-model="value2" inputId="in_label" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <Password v-model="value3" inputId="on_label" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<FloatLabel>
-    <Password v-model="value1" inputId="over_label" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <Password v-model="value2" inputId="in_label" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <Password v-model="value3" inputId="on_label" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <Password v-model="value1" inputId="over_label" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <Password v-model="value2" inputId="in_label" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <Password v-model="value3" inputId="on_label" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-   <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <Password v-model="value1" inputId="over_label" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <Password v-model="value2" inputId="in_label" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <Password v-model="value3" inputId="on_label" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/FormsDoc.vue b/apps/labs/doc/password/FormsDoc.vue
deleted file mode 100644
index 2d4d12761..000000000
--- a/apps/labs/doc/password/FormsDoc.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputText is used with the <i>v-model</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
-            <div class="flex flex-col gap-1">
-                <Password name="password" placeholder="Password" :feedback="false" fluid />
-                <template v-if="$form.password?.invalid">
-                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
-                </template>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                password: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    password: z
-                        .string()
-                        .min(3, { message: 'Minimum 3 characters.' })
-                        .max(8, { message: 'Maximum 8 characters.' })
-                        .refine((value) => /[a-z]/.test(value), {
-                            message: 'Must have a lowercase letter.'
-                        })
-                        .refine((value) => /[A-Z]/.test(value), {
-                            message: 'Must have an uppercase letter.'
-                        })
-                        .refine((value) => /\d/.test(value), {
-                            message: 'Must have a number.'
-                        })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
-    <div class="flex flex-col gap-1">
-        <Password name="password" placeholder="Password" :feedback="false" fluid />
-        <template v-if="$form.password?.invalid">
-            <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
-        </template>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
-            <div class="flex flex-col gap-1">
-                <Password name="password" placeholder="Password" :feedback="false" fluid />
-                <template v-if="$form.password?.invalid">
-                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
-                </template>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                password: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    password: z
-                        .string()
-                        .min(3, { message: 'Minimum 3 characters.' })
-                        .max(8, { message: 'Maximum 8 characters.' })
-                        .refine((value) => /[a-z]/.test(value), {
-                            message: 'Must have a lowercase letter.'
-                        })
-                        .refine((value) => /[A-Z]/.test(value), {
-                            message: 'Must have an uppercase letter.'
-                        })
-                        .refine((value) => /\d/.test(value), {
-                            message: 'Must have a number.'
-                        })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
-            <div class="flex flex-col gap-1">
-                <Password name="password" placeholder="Password" :feedback="false" fluid />
-                <template v-if="$form.password?.invalid">
-                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
-                </template>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    password: ''
-});
-const resolver = ref(zodResolver(
-    z.object({
-        password: z
-            .string()
-            .min(3, { message: 'Minimum 3 characters.' })
-            .max(8, { message: 'Maximum 8 characters.' })
-            .refine((value) => /[a-z]/.test(value), {
-                message: 'Must have a lowercase letter.'
-            })
-            .refine((value) => /[A-Z]/.test(value), {
-                message: 'Must have an uppercase letter.'
-            })
-            .refine((value) => /\d/.test(value), {
-                message: 'Must have a number.'
-            })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/IftaLabelDoc.vue b/apps/labs/doc/password/IftaLabelDoc.vue
deleted file mode 100644
index 0603344d7..000000000
--- a/apps/labs/doc/password/IftaLabelDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <Password v-model="value" inputId="password" variant="filled" />
-            <label for="password">Password</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<IftaLabel>
-    <Password v-model="value" inputId="password" variant="filled" />
-    <label for="password">Password</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <Password v-model="value" inputId="password" variant="filled" />
-            <label for="password">Password</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <Password v-model="value" inputId="password" variant="filled" />
-            <label for="password">Password</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/ImportDoc.vue b/apps/labs/doc/password/ImportDoc.vue
deleted file mode 100644
index 6ca42fcd6..000000000
--- a/apps/labs/doc/password/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Password from 'primevue/password';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/InvalidDoc.vue b/apps/labs/doc/password/InvalidDoc.vue
deleted file mode 100644
index 0ffe1e671..000000000
--- a/apps/labs/doc/password/InvalidDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            code: {
-                basic: `
-<Password v-model="value1" :invalid="!value1" placeholder="Password" />
-<Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/LocaleDoc.vue b/apps/labs/doc/password/LocaleDoc.vue
deleted file mode 100644
index e2650e32b..000000000
--- a/apps/labs/doc/password/LocaleDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Labels are translated at component level by <i>promptLabel</i>, <i>weakLabel</i>, <i>mediumLabel</i> and <i>strongLabel</i> properties. In order to apply global translations for all Password components in the application, refer to the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a>.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/MeterDoc.vue b/apps/labs/doc/password/MeterDoc.vue
deleted file mode 100644
index 70703adc3..000000000
--- a/apps/labs/doc/password/MeterDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Strength meter is displayed as a popup while a value is being entered.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Password v-model="value" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password v-model="value" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/SizesDoc.vue b/apps/labs/doc/password/SizesDoc.vue
deleted file mode 100644
index 08ac4e418..000000000
--- a/apps/labs/doc/password/SizesDoc.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Password provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <Password v-model="value1" type="text" size="small" placeholder="Small" />
-        <Password v-model="value2" type="text" placeholder="Normal" />
-        <Password v-model="value3" type="text" size="large" placeholder="Large" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<div class="card flex flex-col items-center gap-4">
-    <Password v-model="value1" type="text" size="small" placeholder="Small" />
-    <Password v-model="value2" type="text" placeholder="Normal" />
-    <Password v-model="value3" type="text" size="large" placeholder="Large" />
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Password v-model="value1" type="text" size="small" placeholder="Small" />
-        <Password v-model="value2" type="text" placeholder="Normal" />
-        <Password v-model="value3" type="text" size="large" placeholder="Large" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Password v-model="value1" type="text" size="small" placeholder="Small" />
-        <Password v-model="value2" type="text" placeholder="Normal" />
-        <Password v-model="value3" type="text" size="large" placeholder="Large" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/TemplateDoc.vue b/apps/labs/doc/password/TemplateDoc.vue
deleted file mode 100644
index 9b8735603..000000000
--- a/apps/labs/doc/password/TemplateDoc.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>3 slots are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Password v-model="value">
-            <template #header>
-                <div class="font-semibold text-xm mb-4">Pick a password</div>
-            </template>
-            <template #footer>
-                <Divider />
-                <ul class="pl-2 ml-2 my-0 leading-normal">
-                    <li>At least one lowercase</li>
-                    <li>At least one uppercase</li>
-                    <li>At least one numeric</li>
-                    <li>Minimum 8 characters</li>
-                </ul>
-            </template>
-        </Password>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password v-model="value">
-    <template #header>
-        <div class="font-semibold text-xm mb-4">Pick a password</div>
-    </template>
-    <template #footer>
-        <Divider />
-        <ul class="pl-2 ml-2 my-0 leading-normal">
-            <li>At least one lowercase</li>
-            <li>At least one uppercase</li>
-            <li>At least one numeric</li>
-            <li>Minimum 8 characters</li>
-        </ul>
-    </template>
-</Password>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value">
-            <template #header>
-                <div class="font-semibold text-xm mb-4">Pick a password</div>
-            </template>
-            <template #footer>
-                <Divider />
-                <ul class="pl-2 ml-2 my-0 leading-normal">
-                    <li>At least one lowercase</li>
-                    <li>At least one uppercase</li>
-                    <li>At least one numeric</li>
-                    <li>Minimum 8 characters</li>
-                </ul>
-            </template>
-        </Password>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value">
-            <template #header>
-                <div class="font-semibold text-xm mb-4">Pick a password</div>
-            </template>
-            <template #footer>
-                <Divider />
-                <ul class="pl-2 ml-2 my-0 leading-normal">
-                    <li>At least one lowercase</li>
-                    <li>At least one uppercase</li>
-                    <li>At least one numeric</li>
-                    <li>Minimum 8 characters</li>
-                </ul>
-            </template>
-        </Password>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/password/ToggleMaskDoc.vue b/apps/labs/doc/password/ToggleMaskDoc.vue
deleted file mode 100644
index 6a6b2447e..000000000
--- a/apps/labs/doc/password/ToggleMaskDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>toggleMask</i> is present, an icon is displayed to show the value as plain text.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Password v-model="value" toggleMask />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password v-model="value" toggleMask />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" toggleMask />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" toggleMask />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/picklist/AccessibilityDoc.vue b/apps/labs/doc/picklist/AccessibilityDoc.vue
deleted file mode 100644
index f0946797e..000000000
--- a/apps/labs/doc/picklist/AccessibilityDoc.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the source listbox and target listbox can be provided with <i>sourceListProps</i> and <i>targetListProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list elements has a <i>listbox</i> role with
-            the <i>aria-multiselectable</i> attribute. Each list item has an <i>option</i> role with <i>aria-selected</i> as their attributes.
-        </p>
-        <p>
-            Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i>, <i>aria.moveBottom</i>,<i>aria.moveToTarget</i>, <i>aria.moveAllToTarget</i>,
-            <i>aria.moveToSource</i> and <i>aria.moveAllToSource</i> properties of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, alternatively you may use
-            <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i>, <i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> <i>moveAllFromButtonProps</i>
-            <i>moveToTargetProps</i>, <i>moveAllToTargetProps</i>, <i>moveToSourceProps</i> and <i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>ListBox Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Toggles the selected state of the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Toggles the selected state of the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>down arrow</i></td>
-                        <td>Moves focus to the next option and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>up arrow</i></td>
-                        <td>Moves focus to the previous option and toggles the selection state.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>space</i></td>
-                        <td>Selects the items between the most recently selected option and the focused option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
-                        <td>Selects the focused options and all the options up to the first one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
-                        <td>Selects the focused options and all the options down to the first one.</td>
-                    </tr>
-                    <tr>
-                        <td><i>control</i> + <i>a</i></td>
-                        <td>Selects all options.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Buttons Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Executes button action.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Executes button action.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="lb">Options</span>
-<PickList aria-labelledby="lb" />
-
-<PickList aria-label="City" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/picklist/BasicDoc.vue b/apps/labs/doc/picklist/BasicDoc.vue
deleted file mode 100644
index 792665045..000000000
--- a/apps/labs/doc/picklist/BasicDoc.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>PickList requires a multidimensional array as its value bound with the <i>v-model </i>directive and a template for its content that gets the <i>option</i> instance and the index via slotProps.</p>
-    </DocSectionText>
-    <div class="card">
-        <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #option="{ option }">
-                {{ option.name }}
-            </template>
-        </PickList>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<PickList v-model="products" dataKey="id" breakpoint="1400px">
-    <template #option="{ option  }">
-        {{ option.name }}
-    </template>
-</PickList>
-`,
-                options: `
-<template>
-    <div class="card">
-        <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #option="{ option  }">
-                {{ option.name }}
-            </template>
-        </PickList>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService'
-export default {
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #option="{ option  }">
-                {{ option.name }}
-            </template>
-        </PickList>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const products = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
-});
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: '/bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
-    }
-};
-</script>
diff --git a/apps/labs/doc/picklist/ImportDoc.vue b/apps/labs/doc/picklist/ImportDoc.vue
deleted file mode 100644
index 979990d91..000000000
--- a/apps/labs/doc/picklist/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import PickList from 'primevue/picklist';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/picklist/TemplateDoc.vue b/apps/labs/doc/picklist/TemplateDoc.vue
deleted file mode 100644
index 418cc5d9f..000000000
--- a/apps/labs/doc/picklist/TemplateDoc.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>For custom content support define an <i>option</i> template that gets the item instance as a parameter. In addition <i>sourceheader</i> and <i>targetheader</i> slots are provided for further customization.</p>
-    </DocSectionText>
-    <div class="card">
-        <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
-            <template #option="{ option, selected }">
-                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
-                    <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ option.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
-                    </div>
-                    <span class="font-bold">${{ option.price }}</span>
-                </div>
-            </template>
-        </PickList>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
-    <template #option="{ option , selected }">
-        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
-            <div class="flex-1 flex flex-col">
-                <span class="font-medium text-sm">{{ option.name }}</span>
-                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
-            </div>
-            <span class="font-bold">\${{ option.price }}</span>
-        </div>
-    </template>
-</PickList>
-`,
-                options: `
-<template>
-    <div class="card">
-        <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
-            <template #option="{ option , selected }">
-                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
-                    <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ option.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
-                    </div>
-                    <span class="font-bold">\${{ option.price }}</span>
-                </div>
-            </template>
-        </PickList>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService'
-export default {
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <PickList v-model="products" dataKey="id" breakpoint="1400px">
-            <template #option="{ option , selected }">
-                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
-                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
-                    <div class="flex-1 flex flex-col">
-                        <span class="font-medium text-sm">{{ option.name }}</span>
-                        <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
-                    </div>
-                    <span class="font-bold">\${{ option.price }}</span>
-                </div>
-            </template>
-        </PickList>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const products = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
-});
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: '/bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
-    }
-};
-</script>
diff --git a/apps/labs/doc/popover/AccessibilityDoc.vue b/apps/labs/doc/popover/AccessibilityDoc.vue
deleted file mode 100644
index 3b88b00b4..000000000
--- a/apps/labs/doc/popover/AccessibilityDoc.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Popover component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition <i>aria-modal</i> is
-            added since focus is kept within the popup.
-        </p>
-        <p>Popover adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the trigger and the popup is defined.</p>
-
-        <h3>Popover Keyboard Support</h3>
-        <p>When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.</p>
-
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus to the next the focusable element within the popup.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element within the popup.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the popup and moves focus to the trigger.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/popover/BasicDoc.vue b/apps/labs/doc/popover/BasicDoc.vue
deleted file mode 100644
index e6e76970b..000000000
--- a/apps/labs/doc/popover/BasicDoc.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Popover is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
-
-        <Popover ref="op">
-            <div class="flex flex-col gap-4 w-[25rem]">
-                <div>
-                    <span class="font-medium block mb-2">Share this document</span>
-                    <InputGroup>
-                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
-                        <InputGroupAddon>
-                            <i class="pi pi-copy"></i>
-                        </InputGroupAddon>
-                    </InputGroup>
-                </div>
-                <div>
-                    <span class="font-medium block mb-2">Invite Member</span>
-                    <InputGroup>
-                        <InputText disabled></InputText>
-                        <Button label="Invite" icon="pi pi-users"></Button>
-                    </InputGroup>
-                </div>
-                <div>
-                    <span class="font-medium block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
-                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
-                            <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
-                            </div>
-                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
-                                <span>{{ member.role }}</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </Popover>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            members: [
-                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
-            ],
-            code: {
-                basic: `
-<Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
-
-<Popover ref="op">
-    <div class="flex flex-col gap-4 w-[25rem]">
-        <div>
-            <span class="font-medium block mb-2">Share this document</span>
-            <InputGroup>
-                <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
-                <InputGroupAddon>
-                    <i class="pi pi-copy"></i>
-                </InputGroupAddon>
-            </InputGroup>
-        </div>
-        <div>
-            <span class="font-medium block mb-2">Invite Member</span>
-            <InputGroup>
-                <InputText disabled />
-                <Button label="Invite" icon="pi pi-users"></Button>
-            </InputGroup>
-        </div>
-        <div>
-            <span class="font-medium block mb-2">Team Members</span>
-            <ul class="list-none p-0 m-0 flex flex-col gap-4">
-                <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
-                    <div>
-                        <span class="font-medium">{{ member.name }}</span>
-                        <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
-                    </div>
-                    <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
-                        <span>{{ member.role }}</span>
-                        <i class="pi pi-angle-down"></i>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
-</Popover>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
-
-        <Popover ref="op">
-            <div class="flex flex-col gap-4 w-[25rem]">
-                <div>
-                    <span class="font-medium block mb-2">Share this document</span>
-                    <InputGroup>
-                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
-                        <InputGroupAddon>
-                            <i class="pi pi-copy"></i>
-                        </InputGroupAddon>
-                    </InputGroup>
-                </div>
-                <div>
-                    <span class="font-medium block mb-2">Invite Member</span>
-                    <InputGroup>
-                        <InputText disabled />
-                        <Button label="Invite" icon="pi pi-users"></Button>
-                    </InputGroup>
-                </div>
-                <div>
-                    <span class="font-medium block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
-                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
-                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
-                            </div>
-                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
-                                <span>{{ member.role }}</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </Popover>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            members: [
-                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
-            ]
-        }
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.op.toggle(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
-
-        <Popover ref="op">
-            <div class="flex flex-col gap-4 w-[25rem]">
-                <div>
-                    <span class="font-medium block mb-2">Share this document</span>
-                    <InputGroup>
-                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
-                        <InputGroupAddon>
-                            <i class="pi pi-copy"></i>
-                        </InputGroupAddon>
-                    </InputGroup>
-                </div>
-                <div>
-                    <span class="font-medium block mb-2">Invite Member</span>
-                    <InputGroup>
-                        <InputText disabled />
-                        <Button label="Invite" icon="pi pi-users"></Button>
-                    </InputGroup>
-                </div>
-                <div>
-                    <span class="font-medium block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
-                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
-                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
-                            </div>
-                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
-                                <span>{{ member.role }}</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </Popover>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const op = ref();
-const members = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
-]);
-
-const toggle = (event) => {
-    op.value.toggle(event);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.op.toggle(event);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/popover/DataTableDoc.vue b/apps/labs/doc/popover/DataTableDoc.vue
deleted file mode 100644
index 9fc123fe8..000000000
--- a/apps/labs/doc/popover/DataTableDoc.vue
+++ /dev/null
@@ -1,374 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Place the Popover outside of the data iteration components to avoid rendering it multiple times.</p>
-    </DocSectionText>
-
-    <div class="card">
-        <DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
-            <Column field="id" header="Id" class="w-1/6"></Column>
-            <Column field="code" header="Code" class="w-1/6"></Column>
-            <Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
-            <Column field="price" header="Price" sortable class="w-1/6">
-                <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
-            </Column>
-            <Column header="Image" class="w-1/6">
-                <template #body="slotProps">
-                    <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
-                </template>
-            </Column>
-            <Column header="Details" class="w-1/6">
-                <template #body="slotProps">
-                    <Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
-                </template>
-            </Column>
-        </DataTable>
-
-        <Popover ref="op">
-            <div v-if="selectedProduct" class="rounded flex flex-col">
-                <div class="flex justify-center rounded">
-                    <div class="relative mx-auto">
-                        <img class="rounded w-44 sm:w-64" :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" />
-                        <Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
-                    </div>
-                </div>
-                <div class="pt-4">
-                    <div class="flex flex-row justify-between items-start gap-2 mb-4">
-                        <div>
-                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
-                            <div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
-                        </div>
-                        <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                            <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                <span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
-                                <i class="pi pi-star-fill text-yellow-500"></i>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex gap-2">
-                        <Button icon="pi pi-shopping-cart" :label="`Buy Now | \$${selectedProduct.price}`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
-                        <Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
-                    </div>
-                </div>
-            </div>
-        </Popover>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null,
-            code: {
-                basic: `
-<DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
-    <Column field="id" header="Id" class="w-1/6"></Column>
-    <Column field="code" header="Code" class="w-1/6"></Column>
-    <Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
-    <Column field="price" header="Price" sortable class="w-1/6">
-        <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
-    </Column>
-    <Column header="Image" class="w-1/6">
-        <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
-        </template>
-    </Column>
-    <Column header="Details" class="w-1/6">
-        <template #body="slotProps">
-            <Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
-        </template>
-    </Column>
-</DataTable>
-
-<Popover ref="op">
-    <div v-if="selectedProduct" class="rounded flex flex-col">
-        <div class="flex justify-center rounded">
-            <div class="relative mx-auto">
-                <img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
-                <Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
-            </div>
-        </div>
-        <div class="pt-4">
-            <div class="flex flex-row justify-between items-start gap-2 mb-4">
-                <div>
-                    <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
-                    <div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
-                </div>
-                <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                    <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                        <span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
-                        <i class="pi pi-star-fill text-yellow-500"></i>
-                    </div>
-                </div>
-            </div>
-            <div class="flex gap-2">
-                <Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
-                <Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
-            </div>
-        </div>
-    </div>
-</Popover>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
-            <Column field="id" header="Id" class="w-1/6"></Column>
-            <Column field="code" header="Code" class="w-1/6"></Column>
-            <Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
-            <Column field="price" header="Price" sortable class="w-1/6">
-                <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
-            </Column>
-            <Column header="Image" class="w-1/6">
-                <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
-                </template>
-            </Column>
-            <Column header="Details" class="w-1/6">
-                <template #body="slotProps">
-                    <Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
-                </template>
-            </Column>
-        </DataTable>
-
-        <Popover ref="op">
-            <div v-if="selectedProduct" class="rounded flex flex-col">
-                <div class="flex justify-center rounded">
-                    <div class="relative mx-auto">
-                        <img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
-                        <Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
-                    </div>
-                </div>
-                <div class="pt-4">
-                    <div class="flex flex-row justify-between items-start gap-2 mb-4">
-                        <div>
-                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
-                            <div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
-                        </div>
-                        <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                            <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                <span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
-                                <i class="pi pi-star-fill text-yellow-500"></i>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex gap-2">
-                        <Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
-                        <Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
-                    </div>
-                </div>
-            </div>
-        </Popover>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            selectedProduct: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    },
-    methods: {
-        displayProduct(event, product) {
-            this.$refs.op.hide();
-
-            if (this.selectedProduct?.id === product.id) {
-                this.selectedProduct = null;
-            } else {
-                this.selectedProduct = product;
-
-                this.$nextTick(() => {
-                    this.$refs.op.show(event);
-                });
-            }
-        },
-        hidePopover() {
-            this.$refs.op.hide();
-        },
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
-            <Column field="id" header="Id" class="w-1/6"></Column>
-            <Column field="code" header="Code" class="w-1/6"></Column>
-            <Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
-            <Column field="price" header="Price" sortable class="w-1/6">
-                <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
-            </Column>
-            <Column header="Image" class="w-1/6">
-                <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
-                </template>
-            </Column>
-            <Column header="Details" class="w-1/6">
-                <template #body="slotProps">
-                    <Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
-                </template>
-            </Column>
-        </DataTable>
-
-        <Popover ref="op">
-            <div v-if="selectedProduct" class="rounded flex flex-col">
-                <div class="flex justify-center rounded">
-                    <div class="relative mx-auto">
-                        <img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
-                        <Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
-                    </div>
-                </div>
-                <div class="pt-4">
-                    <div class="flex flex-row justify-between items-start gap-2 mb-4">
-                        <div>
-                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
-                            <div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
-                        </div>
-                        <div class="bg-surface-100 p-1" style="border-radius: 30px">
-                            <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                <span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
-                                <i class="pi pi-star-fill text-yellow-500"></i>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex gap-2">
-                        <Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
-                        <Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
-                    </div>
-                </div>
-            </div>
-        </Popover>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, nextTick } from "vue";
-import { useToast } from "primevue/usetoast";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
-});
-
-const op = ref();
-const products = ref();
-const selectedProduct = ref();
-
-const displayProduct = (event, product) => {
-    op.value.hide();
-
-    if (selectedProduct.value?.id === product.id) {
-        selectedProduct.value = null;
-    } else {
-        selectedProduct.value = product;
-
-        nextTick(() => {
-            op.value.show(event);
-        });
-    }
-}
-
-const hidePopover = () => {
-    op.value.hide();
-}
-
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warn';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-}
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: '/bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    },
-    methods: {
-        displayProduct(event, product) {
-            this.$refs.op.hide();
-
-            if (this.selectedProduct?.id === product.id) {
-                this.selectedProduct = null;
-            } else {
-                this.selectedProduct = product;
-
-                this.$nextTick(() => {
-                    this.$refs.op.show(event);
-                });
-            }
-        },
-        hidePopover() {
-            this.$refs.op.hide();
-        },
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warn';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/popover/ImportDoc.vue b/apps/labs/doc/popover/ImportDoc.vue
deleted file mode 100644
index 0506d4cdd..000000000
--- a/apps/labs/doc/popover/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Popover from 'primevue/popover';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/popover/SelectDataDoc.vue b/apps/labs/doc/popover/SelectDataDoc.vue
deleted file mode 100644
index da73a51b4..000000000
--- a/apps/labs/doc/popover/SelectDataDoc.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>In this sample, data is retrieved from the content inside the popover.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
-
-        <Popover ref="op">
-            <div class="flex flex-col gap-4">
-                <div>
-                    <span class="font-medium block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-col">
-                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
-                            <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </Popover>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedMember: null,
-            members: [
-                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
-            ],
-            code: {
-                basic: `
-<Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
-
-<Popover ref="op">
-    <div class="flex flex-col gap-4">
-        <div>
-            <span class="font-medium block mb-2">Team Members</span>
-            <ul class="list-none p-0 m-0 flex flex-col">
-                <li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
-                    <div>
-                        <span class="font-medium">{{ member.name }}</span>
-                        <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
-</Popover>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
-
-        <Popover ref="op">
-            <div class="flex flex-col gap-4">
-                <div>
-                    <span class="font-medium block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-col">
-                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
-                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </Popover>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedMember: null,
-            members: [
-                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
-            ]
-        }
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.op.toggle(event);
-        },
-        selectMember(member) {
-            this.selectedMember = member;
-            this.$refs.op.hide();
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
-
-        <Popover ref="op">
-            <div class="flex flex-col gap-4">
-                <div>
-                    <span class="font-medium block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-col">
-                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
-                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </Popover>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const op = ref();
-const selectedMember = ref(null);
-const members = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
-]);
-
-const toggle = (event) => {
-    op.value.toggle(event);
-}
-
-const selectMember = (member) => {
-    selectedMember.value = member;
-    op.value.hide();
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.op.toggle(event);
-        },
-        selectMember(member) {
-            this.selectedMember = member;
-            this.$refs.op.hide();
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressbar/AccessibilityDoc.vue b/apps/labs/doc/progressbar/AccessibilityDoc.vue
deleted file mode 100644
index 3bec619c1..000000000
--- a/apps/labs/doc/progressbar/AccessibilityDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            ProgressBar components uses <i>progressbar</i> role along with <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
-            <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <p>Not applicable.</p>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="label_status" />
-<ProgressBar aria-labelledby="label_status" />
-
-<ProgressBar aria-label="Status" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressbar/BasicDoc.vue b/apps/labs/doc/progressbar/BasicDoc.vue
deleted file mode 100644
index f3ea996b1..000000000
--- a/apps/labs/doc/progressbar/BasicDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ProgressBar is used with the <i>value</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <ProgressBar :value="50"></ProgressBar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressBar :value="50"></ProgressBar>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ProgressBar :value="50"></ProgressBar>
-    </div>
-</template>
-
-<script >
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ProgressBar :value="50"></ProgressBar>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressbar/DynamicDoc.vue b/apps/labs/doc/progressbar/DynamicDoc.vue
deleted file mode 100644
index 2793a2b1d..000000000
--- a/apps/labs/doc/progressbar/DynamicDoc.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Value is reactive so updating it dynamically changes the bar as well.</p>
-    </DocSectionText>
-    <div class="card">
-        <ProgressBar :value="value"></ProgressBar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 0,
-            interval: null,
-            code: {
-                basic: `
-<ProgressBar :value="value"></ProgressBar>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast></Toast>
-        <ProgressBar :value="value1" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: 0,
-            interval: null
-        };
-    },
-    mounted() {
-        this.startProgress();
-    },
-    beforeUnmount() {
-        this.endProgress();
-    },
-    methods: {
-        startProgress() {
-            this.interval = setInterval(() => {
-                let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
-
-                if (newValue >= 100) {
-                    newValue = 100;
-                    this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
-                }
-
-                this.value1 = newValue;
-            }, 2000);
-        },
-        endProgress() {
-            clearInterval(this.interval);
-            this.interval = null;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast></Toast>
-        <ProgressBar :value="value1" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import { useToast } from "primevue/usetoast";
-
-onMounted(() => {
-    startProgress();
-});
-
-onBeforeUnmount(() => {
-    endProgress();
-});
-
-const toast = useToast();
-const value1 = ref(0);
-const interval = ref();
-const startProgress = () => {
-    interval.value = setInterval(() => {
-        let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
-        if (newValue >= 100) {
-            newValue = 100;
-            toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
-        }
-        value1.value = newValue;
-    }, 2000);
-};
-const endProgress = () => {
-    clearInterval(interval.value);
-    interval.value = null;
-};
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.startProgress();
-    },
-    beforeUnmount() {
-        this.endProgress();
-    },
-    methods: {
-        startProgress() {
-            this.interval = setInterval(() => {
-                let newValue = this.value + Math.floor(Math.random() * 10) + 1;
-
-                if (newValue >= 100) {
-                    newValue = 100;
-                    this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
-                    this.endProgress();
-                }
-
-                this.value = newValue;
-            }, 2000);
-        },
-        endProgress() {
-            clearInterval(this.interval);
-            this.interval = null;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressbar/ImportDoc.vue b/apps/labs/doc/progressbar/ImportDoc.vue
deleted file mode 100644
index 557d425d5..000000000
--- a/apps/labs/doc/progressbar/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ProgressBar from 'primevue/progressbar';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressbar/IndeterminateDoc.vue b/apps/labs/doc/progressbar/IndeterminateDoc.vue
deleted file mode 100644
index c9cd369df..000000000
--- a/apps/labs/doc/progressbar/IndeterminateDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>For progresses with no value to track, set the <i>mode</i> property to <i>indeterminate</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressbar/TemplateDoc.vue b/apps/labs/doc/progressbar/TemplateDoc.vue
deleted file mode 100644
index 87b680f63..000000000
--- a/apps/labs/doc/progressbar/TemplateDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content inside the ProgressBar is defined with the <i>default</i> slot.</p>
-    </DocSectionText>
-    <div class="card">
-        <ProgressBar :value="value"> {{ value }}/100 </ProgressBar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 40,
-            code: {
-                basic: `
-<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 40
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref(40);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressspinner/AccessibilityDoc.vue b/apps/labs/doc/progressspinner/AccessibilityDoc.vue
deleted file mode 100644
index 83aa25230..000000000
--- a/apps/labs/doc/progressspinner/AccessibilityDoc.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>ProgressSpinner components uses <i>progressbar</i> role. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressSpinner aria-label="Loading" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressspinner/BasicDoc.vue b/apps/labs/doc/progressspinner/BasicDoc.vue
deleted file mode 100644
index 3b4ad63c5..000000000
--- a/apps/labs/doc/progressspinner/BasicDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>An infinite spin animation is displayed by default.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ProgressSpinner />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressSpinner />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ProgressSpinner />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ProgressSpinner />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressspinner/CustomDoc.vue b/apps/labs/doc/progressspinner/CustomDoc.vue
deleted file mode 100644
index 90607c664..000000000
--- a/apps/labs/doc/progressspinner/CustomDoc.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ProgressSpinner can be customized with styling property like <i>style</i>, <i>strokeWidth</i> <i>fill</i> and <i>animationDuration</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent" animationDuration=".5s" aria-label="Custom ProgressSpinner" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
-    animationDuration=".5s" aria-label="Custom ProgressSpinner" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
-            animationDuration=".5s" aria-label="Custom ProgressSpinner" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
-            animationDuration=".5s" aria-label="Custom ProgressSpinner" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/progressspinner/ImportDoc.vue b/apps/labs/doc/progressspinner/ImportDoc.vue
deleted file mode 100644
index 53b051d06..000000000
--- a/apps/labs/doc/progressspinner/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ProgressSpinner from 'primevue/progressspinner';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/AccessibilityDoc.vue b/apps/labs/doc/radiobutton/AccessibilityDoc.vue
deleted file mode 100644
index 6fd159adb..000000000
--- a/apps/labs/doc/radiobutton/AccessibilityDoc.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
-            <i>aria-labelledby</i>, <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">left arrow</i>
-                                <i>up arrow</i>
-                            </span>
-                        </td>
-                        <td>Moves focus to the previous radio button, if there is none then last radio button receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">right arrow</i>
-                                <i>down arrow</i>
-                            </span>
-                        </td>
-                        <td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>If the focused radio button is unchecked, changes the state to checked.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="rb1">One</label>
-<RadioButton inputId="rb1" />
-
-<span id="rb2">Two</span>
-<RadioButton aria-labelledby="rb2" />
-
-<RadioButton aria-label="Three" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/DisabledDoc.vue b/apps/labs/doc/radiobutton/DisabledDoc.vue
deleted file mode 100644
index 235777828..000000000
--- a/apps/labs/doc/radiobutton/DisabledDoc.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-2">
-        <RadioButton v-model="value" :value="1" disabled />
-        <RadioButton v-model="value" :value="2" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 2,
-            code: {
-                basic: `
-<RadioButton v-model="value" :value="1" disabled />
-<RadioButton v-model="value" :value="2" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center gap-2">
-        <RadioButton v-model="value" :value="1" disabled />
-        <RadioButton v-model="value" :value="2" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 2
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center gap-2">
-        <RadioButton v-model="value" :value="1" disabled />
-        <RadioButton v-model="value" :value="2" disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref(2);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/DynamicDoc.vue b/apps/labs/doc/radiobutton/DynamicDoc.vue
deleted file mode 100644
index 5ea7468a5..000000000
--- a/apps/labs/doc/radiobutton/DynamicDoc.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>RadioButtons can be generated using a list of values.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
-                <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
-                <label :for="category.key">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            categories: [
-                { name: 'Accounting', key: 'A' },
-                { name: 'Marketing', key: 'M' },
-                { name: 'Production', key: 'P' },
-                { name: 'Research', key: 'R' }
-            ],
-            selectedCategory: 'Production',
-            code: {
-                basic: `
-<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
-    <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
-    <label :for="category.key">{{ category.name }}</label>
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
-                <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
-                <label :for="category.key">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCategory: 'Production',
-            categories: [
-                { name: 'Accounting', key: 'A' },
-                { name: 'Marketing', key: 'M' },
-                { name: 'Production', key: 'P' },
-                { name: 'Research', key: 'R' }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
-                <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
-                <label :for="category.key">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const selectedCategory = ref('Production');
-const categories = ref([
-    { name: 'Accounting', key: 'A' },
-    { name: 'Marketing', key: 'M' },
-    { name: 'Production', key: 'P' },
-    { name: 'Research', key: 'R' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/FilledDoc.vue b/apps/labs/doc/radiobutton/FilledDoc.vue
deleted file mode 100644
index 207b6b870..000000000
--- a/apps/labs/doc/radiobutton/FilledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <RadioButton v-model="value" value="1" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<RadioButton v-model="value" value="1" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <RadioButton v-model="value" value="1" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <RadioButton v-model="value" value="1" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/FormsDoc.vue b/apps/labs/doc/radiobutton/FormsDoc.vue
deleted file mode 100644
index 1c7e79864..000000000
--- a/apps/labs/doc/radiobutton/FormsDoc.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>RadioButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-2">
-                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="cheese" value="Cheese" />
-                        <label for="cheese">Cheese</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom">Mushroom</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="pepper" value="Pepper" />
-                        <label for="pepper">Pepper</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="onion" value="Onion" />
-                        <label for="onion">Onion</label>
-                    </div>
-                </RadioButtonGroup>
-                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                ingredient: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    ingredient: z.string().min(1, { message: 'Ingredient is required.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col gap-2">
-        <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
-            <div class="flex items-center gap-2">
-                <RadioButton inputId="cheese" value="Cheese" />
-                <label for="cheese">Cheese</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton inputId="mushroom" value="Mushroom" />
-                <label for="mushroom">Mushroom</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton inputId="pepper" value="Pepper" />
-                <label for="pepper">Pepper</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton inputId="onion" value="Onion" />
-                <label for="onion">Onion</label>
-            </div>
-        </RadioButtonGroup>
-        <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-2">
-                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="cheese" value="Cheese" />
-                        <label for="cheese">Cheese</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom">Mushroom</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="pepper" value="Pepper" />
-                        <label for="pepper">Pepper</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="onion" value="Onion" />
-                        <label for="onion">Onion</label>
-                    </div>
-                </RadioButtonGroup>
-                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                ingredient: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    ingredient: z.string().min(1, { message: 'Ingredient is required.' })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-2">
-                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="cheese" value="Cheese" />
-                        <label for="cheese">Cheese</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom">Mushroom</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="pepper" value="Pepper" />
-                        <label for="pepper">Pepper</label>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <RadioButton inputId="onion" value="Onion" />
-                        <label for="onion">Onion</label>
-                    </div>
-                </RadioButtonGroup>
-                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    ingredient: ''
-});
-const resolver = ref(zodResolver(
-    z.object({
-        ingredient: z.string().min(1, { message: 'Ingredient is required.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/GroupDoc.vue b/apps/labs/doc/radiobutton/GroupDoc.vue
deleted file mode 100644
index 0592368df..000000000
--- a/apps/labs/doc/radiobutton/GroupDoc.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>RadioButton is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-4">
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
-                <label for="ingredient1">Cheese</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
-                <label for="ingredient2">Mushroom</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
-                <label for="ingredient3">Pepper</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-                <label for="ingredient4">Onion</label>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            ingredient: '',
-            code: {
-                basic: `
-<div class="flex flex-wrap gap-4">
-    <div class="flex items-center gap-2">
-        <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
-        <label for="ingredient1">Cheese</label>
-    </div>
-    <div class="flex items-center gap-2">
-        <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
-        <label for="ingredient2">Mushroom</label>
-    </div>
-    <div class="flex items-center gap-2">
-        <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
-        <label for="ingredient3">Pepper</label>
-    </div>
-    <div class="flex items-center gap-2">
-        <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-        <label for="ingredient4">Onion</label>
-    </div>
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-4">
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
-                <label for="ingredient1">Cheese</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
-                <label for="ingredient2">Mushroom</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
-                <label for="ingredient3">Pepper</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-                <label for="ingredient4">Onion</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            ingredient: ''
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-4">
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
-                <label for="ingredient1">Cheese</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
-                <label for="ingredient2">Mushroom</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
-                <label for="ingredient3">Pepper</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-                <label for="ingredient4">Onion</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const ingredient = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/ImportDoc.vue b/apps/labs/doc/radiobutton/ImportDoc.vue
deleted file mode 100644
index 1cea94b37..000000000
--- a/apps/labs/doc/radiobutton/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import RadioButton from 'primevue/radiobutton';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/InvalidDoc.vue b/apps/labs/doc/radiobutton/InvalidDoc.vue
deleted file mode 100644
index ed365a93c..000000000
--- a/apps/labs/doc/radiobutton/InvalidDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <RadioButton v-model="value" value="1" :invalid="value === null" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<RadioButton v-model="value" value="1" :invalid="value === null" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <RadioButton v-model="value" value="1" :invalid="value === null" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            val: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <RadioButton v-model="value" value="1" :invalid="value === null" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const val = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/radiobutton/SizesDoc.vue b/apps/labs/doc/radiobutton/SizesDoc.vue
deleted file mode 100644
index 1f3794489..000000000
--- a/apps/labs/doc/radiobutton/SizesDoc.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>RadioButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-4">
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
-                <label for="size_small" class="text-sm">Small</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
-                <label for="size_normal">Normal</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
-                <label for="size_large" class="text-lg">Large</label>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            size: null,
-            code: {
-                basic: `
-<div class="flex flex-wrap gap-4">
-    <div class="flex items-center gap-2">
-        <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
-        <label for="size_small" class="text-sm">Small</label>
-    </div>
-    <div class="flex items-center gap-2">
-        <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
-        <label for="size_normal">Normal</label>
-    </div>
-    <div class="flex items-center gap-2">
-        <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
-        <label for="size_large" class="text-lg">Large</label>
-    </div>
-</div>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-4">
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
-                <label for="size_small" class="text-sm">Small</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
-                <label for="size_normal">Normal</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
-                <label for="size_large" class="text-lg">Large</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            size: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-4">
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
-                <label for="size_small" class="text-sm">Small</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
-                <label for="size_normal">Normal</label>
-            </div>
-            <div class="flex items-center gap-2">
-                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
-                <label for="size_large" class="text-lg">Large</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const size = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/rating/AccessibilityDoc.vue b/apps/labs/doc/rating/AccessibilityDoc.vue
deleted file mode 100644
index 91655b8ac..000000000
--- a/apps/labs/doc/rating/AccessibilityDoc.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the
-            <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API via <i>star</i> and <i>stars</i> of the <i>aria</i> property.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the star representing the value, if there is none then first star receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">left arrow</i>
-                                <i>up arrow</i>
-                            </span>
-                        </td>
-                        <td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">right arrow</i>
-                                <i>down arrow</i>
-                            </span>
-                        </td>
-                        <td>Moves focus to the next star, if there is none then first star receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>If the focused star does not represent the value, changes the value to the star value.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/rating/BasicDoc.vue b/apps/labs/doc/rating/BasicDoc.vue
deleted file mode 100644
index 1daf28d57..000000000
--- a/apps/labs/doc/rating/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Rating is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Rating v-model="value" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Rating v-model="value" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/rating/DisabledDoc.vue b/apps/labs/doc/rating/DisabledDoc.vue
deleted file mode 100644
index d0e8e0a0d..000000000
--- a/apps/labs/doc/rating/DisabledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Rating v-model="value" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 5,
-            code: {
-                basic: `
-<Rating v-model="value" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 5
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(5);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/rating/FormsDoc.vue b/apps/labs/doc/rating/FormsDoc.vue
deleted file mode 100644
index 65f5d6fea..000000000
--- a/apps/labs/doc/rating/FormsDoc.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Rating integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
-            <div class="flex flex-col items-center gap-2">
-                <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                rating: null
-            },
-            resolver: zodResolver(
-                z.object({
-                    rating: z.union([z.number(), z.literal(null)]).refine((value) => value !== null, { message: 'Rating is required.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
-    <div class="flex flex-col items-center gap-2">
-        <Rating name="rating" />
-        <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
-            <div class="flex flex-col items-center gap-2">
-                <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                rating: null
-            },
-            resolver: zodResolver(
-                z.object({
-                    rating: z.union([z.number(), z.literal(null)]).refine((value) => value !== null, { message: 'Rating is required.' })
-                })
-            )
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
-            <div class="flex flex-col items-center gap-2">
-                <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    rating: null
-});
-const resolver = ref(zodResolver(
-    z.object({
-        rating: z.union([z.number(), z.literal(null)]).refine((value) => value !== null, { message: 'Rating is required.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/rating/ImportDoc.vue b/apps/labs/doc/rating/ImportDoc.vue
deleted file mode 100644
index 2070a2b4a..000000000
--- a/apps/labs/doc/rating/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Rating from 'primevue/rating';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/rating/NumberOfStarsDoc.vue b/apps/labs/doc/rating/NumberOfStarsDoc.vue
deleted file mode 100644
index 4f602e18b..000000000
--- a/apps/labs/doc/rating/NumberOfStarsDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Number of stars to display is defined with <i>stars</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Rating v-model="value" :stars="10" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 5,
-            code: {
-                basic: `
-<Rating v-model="value" :stars="10" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" :stars="10" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 5
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" :stars="10" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(5);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/rating/ReadOnlyDoc.vue b/apps/labs/doc/rating/ReadOnlyDoc.vue
deleted file mode 100644
index 75b05f2ee..000000000
--- a/apps/labs/doc/rating/ReadOnlyDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>readOnly</i> present, value cannot be edited.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Rating v-model="value" readonly />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 3,
-            code: {
-                basic: `
-<Rating v-model="value" readonly />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" readonly />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 3
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" readonly />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(3);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/rating/TemplateDoc.vue b/apps/labs/doc/rating/TemplateDoc.vue
deleted file mode 100644
index 6f756f6d5..000000000
--- a/apps/labs/doc/rating/TemplateDoc.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom icons are used to override the default icons with <i>onicon</i>, <i>officon</i> and <i>cancelicon</i> slots.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Rating v-model="value">
-            <template #onicon>
-                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
-            </template>
-            <template #officon>
-                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
-            </template>
-        </Rating>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Rating v-model="value">
-    <template #onicon>
-        <img src="/images/rating/custom-onicon.png" height="24" width="24" />
-    </template>
-    <template #officon>
-        <img src="/images/rating/custom-officon.png" height="24" width="24" />
-    </template>
-</Rating>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value">
-            <template #onicon>
-                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
-            </template>
-            <template #officon>
-                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
-            </template>
-        </Rating>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value">
-            <template #onicon>
-                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
-            </template>
-            <template #officon>
-                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
-            </template>
-        </Rating>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/ripple/AccessibilityDoc.vue b/apps/labs/doc/ripple/AccessibilityDoc.vue
deleted file mode 100644
index d041d790a..000000000
--- a/apps/labs/doc/ripple/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Ripple element has the <i>aria-hidden</i> attribute as true so that it gets ignored by the screen readers.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/ripple/ConfigurationDoc.vue b/apps/labs/doc/ripple/ConfigurationDoc.vue
deleted file mode 100644
index 4006dd485..000000000
--- a/apps/labs/doc/ripple/ConfigurationDoc.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>To start with, Ripple needs to be enabled globally. See the <a href="https://primevue.org/configuration/#ripple">Configuration API</a> for details.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-mounted() {
-    this.$primevue.config.ripple = true;
-}
-`,
-                options: `
-mounted() {
-    this.$primevue.config.ripple = true;
-}
-`,
-                composition: `
-import { usePrimeVue } from 'primevue/config';
-
-const PrimeVue = usePrimeVue();
-
-PrimeVue.config.ripple = true;
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/ripple/CustomDoc.vue b/apps/labs/doc/ripple/CustomDoc.vue
deleted file mode 100644
index a3fc12c30..000000000
--- a/apps/labs/doc/ripple/CustomDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
-    </DocSectionText>
-    <div class="card flex flex-col gap-4 items-center">
-        <span
-            >Ripple option at the <span class="mx-1 h-8 w-8 rounded-border inline-flex items-center justify-center bg-primary text-primary-contrast"><i class="pi pi-palette"></i></span> configurator needs to be turned on for the demo.</span
-        >
-        <div class="flex justify-center gap-2">
-            <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
-            <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
-            <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
-<div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
-<div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
-`,
-                options: `
-<template>
-    <div class="flex justify-center items-center gap-2">
-        <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
-        <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
-        <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
-    </div>
-</template>
-
-<style scoped>
-.box {
-    padding: 2rem;
-    border-radius: 10px;
-    width: 110px;
-    text-align: center;
-}
-</style>
-`,
-                composition: `
-<template>
-    <div class="flex justify-center items-center gap-2">
-        <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
-        <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
-        <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
-    </div>
-</template>
-
-<style scoped>
-.box {
-    padding: 2rem;
-    border-radius: 10px;
-    width: 110px;
-    text-align: center;
-}
-</style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.box {
-    padding: 2rem;
-    border-radius: 10px;
-    width: 110px;
-    text-align: center;
-}
-</style>
diff --git a/apps/labs/doc/ripple/DefaultDoc.vue b/apps/labs/doc/ripple/DefaultDoc.vue
deleted file mode 100644
index ed558f32f..000000000
--- a/apps/labs/doc/ripple/DefaultDoc.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <span
-            >Ripple option at the <span class="mx-1 h-8 w-8 rounded-border inline-flex items-center justify-center bg-primary text-primary-contrast"><i class="pi pi-palette"></i></span> configurator needs to be turned on for the demo.</span
-        >
-        <div v-ripple class="ripple-box">Default</div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div v-ripple class="ripple-box">Default</div>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <div v-ripple class="ripple-box">Default</div>
-    </div>
-</template>
-
-<script>
-<\/script>
-
-<style scoped>
-.ripple-box {
-    display: flex;
-    user-select: none;
-    justify-content: center;
-    align-items: center;
-    padding: 3rem;
-    font-weight: bold;
-    background: var(--p-content-background);
-    border: 1px solid var(--p-content-border-color);
-    border-radius: var(--p-content-border-radius);
-}
-<\/style>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <div v-ripple class="ripple-box">Default</div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-
-<style scoped>
-.ripple-box {
-    display: flex;
-    user-select: none;
-    justify-content: center;
-    align-items: center;
-    padding: 3rem;
-    font-weight: bold;
-    background: var(--p-content-background);
-    border: 1px solid var(--p-content-border-color);
-    border-radius: var(--p-content-border-radius);
-}
-<\/style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.ripple-box {
-    display: flex;
-    user-select: none;
-    justify-content: center;
-    align-items: center;
-    padding: 3rem;
-    font-weight: bold;
-    background: var(--p-content-background);
-    border: 1px solid var(--p-content-border-color);
-    border-radius: var(--p-content-border-radius);
-}
-</style>
diff --git a/apps/labs/doc/ripple/ImportDoc.vue b/apps/labs/doc/ripple/ImportDoc.vue
deleted file mode 100644
index db3da431d..000000000
--- a/apps/labs/doc/ripple/ImportDoc.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
-
-        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-
-        <p>Ripple describes how to use it with your own components and standard elements that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
-
-        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-import { createApp } from 'vue';
-import PrimeVue from 'primevue/config';
-const app = createApp(App);
-
-app.use(PrimeVue, { ripple: true });
-`
-            },
-            code2: {
-                basic: `
-import Ripple from 'primevue/ripple';
-
-app.directive('ripple', Ripple);
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/scrollpanel/AccessibilityDoc.vue b/apps/labs/doc/scrollpanel/AccessibilityDoc.vue
deleted file mode 100644
index 1ab4e5a06..000000000
--- a/apps/labs/doc/scrollpanel/AccessibilityDoc.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Scrollbars of the ScrollPanel has a <i>scrollbar</i> role along with the <i>aria-controls</i> attribute that refers to the id of the scrollable content container and the <i>aria-orientation</i> to indicate the orientation of scrolling.</p>
-
-        <h3>Header Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus through the bar.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Scrolls content down when vertical scrolling is available.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Scrolls content up when vertical scrolling is available.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left</i></td>
-                        <td>Scrolls content left when horizontal scrolling is available.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right</i></td>
-                        <td>Scrolls content right when horizontal scrolling is available.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/scrollpanel/BasicDoc.vue b/apps/labs/doc/scrollpanel/BasicDoc.vue
deleted file mode 100644
index aab0e33d6..000000000
--- a/apps/labs/doc/scrollpanel/BasicDoc.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ScrollPanel is defined using dimensions for the scrollable viewport.</p>
-    </DocSectionText>
-    <div class="card">
-        <ScrollPanel style="width: 100%; height: 200px">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-            <p class="m-0">
-                Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
-            </p>
-        </ScrollPanel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ScrollPanel style="width: 100%; height: 200px">
-    <p>
-        Lorem ipsum dolor ...
-    </p>
-</ScrollPanel>
-                
-`,
-                options: `
-<template>
-    <div class="card">
-        <ScrollPanel style="width: 100%; height: 200px">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-            <p class="m-0">
-                Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
-            </p>
-        </ScrollPanel>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ScrollPanel style="width: 100%; height: 200px">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-            <p class="m-0">
-                Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
-            </p>
-        </ScrollPanel>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/scrollpanel/CustomDoc.vue b/apps/labs/doc/scrollpanel/CustomDoc.vue
deleted file mode 100644
index 5456d0e19..000000000
--- a/apps/labs/doc/scrollpanel/CustomDoc.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Scrollbar visuals can be styled for a unified look across different platforms.</p>
-    </DocSectionText>
-    <div class="card">
-        <ScrollPanel
-            style="width: 100%; height: 200px"
-            :dt="{
-                bar: {
-                    background: '{primary.color}'
-                }
-            }"
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </ScrollPanel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ScrollPanel
-    style="width: 100%; height: 200px"
-    :dt="{
-        bar: {
-            background: '{primary.color}'
-        }
-    }"
->
-    ...
-</ScrollPanel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ScrollPanel
-            style="width: 100%; height: 200px"
-            :dt="{
-                bar: {
-                    background: '{primary.color}'
-                }
-            }"
-        >
-            ...
-        </ScrollPanel>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ScrollPanel
-            style="width: 100%; height: 200px"
-            :dt="{
-                bar: {
-                    background: '{primary.color}'
-                }
-            }"
-        >
-            ...
-        </ScrollPanel>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/scrollpanel/ImportDoc.vue b/apps/labs/doc/scrollpanel/ImportDoc.vue
deleted file mode 100644
index 08dcfd182..000000000
--- a/apps/labs/doc/scrollpanel/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ScrollPanel from 'primevue/scrollpanel';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/scrolltop/AccessibilityDoc.vue b/apps/labs/doc/scrolltop/AccessibilityDoc.vue
deleted file mode 100644
index d1b0c157e..000000000
--- a/apps/labs/doc/scrolltop/AccessibilityDoc.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default,
-            you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Scrolls to top.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Scrolls to top.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/scrolltop/BasicDoc.vue b/apps/labs/doc/scrolltop/BasicDoc.vue
deleted file mode 100644
index 55bc559b2..000000000
--- a/apps/labs/doc/scrolltop/BasicDoc.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ScrollTop listens window scroll by default.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center">
-        <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
-        <ScrollTop />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ScrollTop />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center" style="height: 2000px">
-        <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
-        <ScrollTop />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center" style="height: 2000px">
-        <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
-        <ScrollTop />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/scrolltop/ElementDoc.vue b/apps/labs/doc/scrolltop/ElementDoc.vue
deleted file mode 100644
index 245e850bc..000000000
--- a/apps/labs/doc/scrolltop/ElementDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Setting the <i>target</i> property to <i>parent</i> binds ScrollTop to its parent element that has scrolling content.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ScrollPanel style="width: 250px; height: 200px">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
-                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
-                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
-                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
-                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-            </p>
-            <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'contrast', raised: true, rounded: true }" />
-        </ScrollPanel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ScrollPanel style="width: 250px; height: 200px">
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
-        elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
-        feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
-        dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
-        Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-    </p>
-    <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'contrast', raised: true, rounded: true }" />
-</ScrollPanel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ScrollPanel style="width: 250px; height: 200px">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
-                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
-                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
-                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
-                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-            </p>
-            <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'contrast', raised: true, rounded: true }" />
-        </ScrollPanel>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ScrollPanel style="width: 250px; height: 200px">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
-                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
-                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
-                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
-                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-            </p>
-            <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" :buttonProps="{ severity: 'contrast', raised: true, rounded: true }" />
-        </ScrollPanel>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/scrolltop/ImportDoc.vue b/apps/labs/doc/scrolltop/ImportDoc.vue
deleted file mode 100644
index 5429340a9..000000000
--- a/apps/labs/doc/scrolltop/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ScrollTop from 'primevue/scrolltop';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/AccessibilityDoc.vue b/apps/labs/doc/select/AccessibilityDoc.vue
deleted file mode 100644
index d87799708..000000000
--- a/apps/labs/doc/select/AccessibilityDoc.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The select element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
-            editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which
-            option to read during keyboard navigation within the popup list.
-        </p>
-        <p>
-            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the <i>aria-activedescendant</i> of
-            the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
-        </p>
-
-        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Closed State Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the select element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and select is not editable then first option receives the focus.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Popup Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup, then moves focus to the select element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>If the select is editable, removes the visual focus from the current option and moves input cursor to one character left.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>If the select is editable, removes the visual focus from the current option and moves input cursor to one character right.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>If the select is editable, moves input cursor at the end, if not then moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>If the select is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageUp</i></td>
-                        <td>Jumps visual focus to first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageDown</i></td>
-                        <td>Jumps visual focus to last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the option whose label starts with the characters being typed if select is not editable.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Filter Input Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Closes the popup and moves focus to the select element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup and moves focus to the select element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="dd1"></span>Options</span>
-<select aria-labelledby="dd1" />
-
-<select aria-label="Options" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/BasicDoc.vue b/apps/labs/doc/select/BasicDoc.vue
deleted file mode 100644
index 5c13e5aea..000000000
--- a/apps/labs/doc/select/BasicDoc.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Select is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
-            that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/CheckmarkDoc.vue b/apps/labs/doc/select/CheckmarkDoc.vue
deleted file mode 100644
index fb6863b42..000000000
--- a/apps/labs/doc/select/CheckmarkDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/ClearIconDoc.vue b/apps/labs/doc/select/ClearIconDoc.vue
deleted file mode 100644
index fba5c5cf2..000000000
--- a/apps/labs/doc/select/ClearIconDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the Select.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/DisabledDoc.vue b/apps/labs/doc/select/DisabledDoc.vue
deleted file mode 100644
index a6795e2bf..000000000
--- a/apps/labs/doc/select/DisabledDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Select disabled placeholder="Select a City" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/EditableDoc.vue b/apps/labs/doc/select/EditableDoc.vue
deleted file mode 100644
index eb204dfbf..000000000
--- a/apps/labs/doc/select/EditableDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>editable</i> is present, the input can also be entered with typing.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/FilledDoc.vue b/apps/labs/doc/select/FilledDoc.vue
deleted file mode 100644
index f3e7c20e2..000000000
--- a/apps/labs/doc/select/FilledDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/FilterDoc.vue b/apps/labs/doc/select/FilterDoc.vue
deleted file mode 100644
index 77669b0f3..000000000
--- a/apps/labs/doc/select/FilterDoc.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Select provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
-            <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex items-center">
-                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
-                    <div>{{ slotProps.value.name }}</div>
-                </div>
-                <span v-else>
-                    {{ slotProps.placeholder }}
-                </span>
-            </template>
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-        </Select>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCountry: null,
-            countries: [
-                { name: 'Australia', code: 'AU' },
-                { name: 'Brazil', code: 'BR' },
-                { name: 'China', code: 'CN' },
-                { name: 'Egypt', code: 'EG' },
-                { name: 'France', code: 'FR' },
-                { name: 'Germany', code: 'DE' },
-                { name: 'India', code: 'IN' },
-                { name: 'Japan', code: 'JP' },
-                { name: 'Spain', code: 'ES' },
-                { name: 'United States', code: 'US' }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
-    <template #value="slotProps">
-        <div v-if="slotProps.value" class="flex items-center">
-            <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
-            <div>{{ slotProps.value.name }}</div>
-        </div>
-        <span v-else>
-            {{ slotProps.placeholder }}
-        </span>
-    </template>
-    <template #option="slotProps">
-        <div class="flex items-center">
-            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-            <div>{{ slotProps.option.name }}</div>
-        </div>
-    </template>
-</Select>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
-            <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex items-center">
-                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.value.name }}</div>
-                </div>
-                <span v-else>
-                    {{ slotProps.placeholder }}
-                </span>
-            </template>
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-        </Select>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCountry: null,
-            countries: [
-                { name: 'Australia', code: 'AU' },
-                { name: 'Brazil', code: 'BR' },
-                { name: 'China', code: 'CN' },
-                { name: 'Egypt', code: 'EG' },
-                { name: 'France', code: 'FR' },
-                { name: 'Germany', code: 'DE' },
-                { name: 'India', code: 'IN' },
-                { name: 'Japan', code: 'JP' },
-                { name: 'Spain', code: 'ES' },
-                { name: 'United States', code: 'US' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
-            <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex items-center">
-                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.value.name }}</div>
-                </div>
-                <span v-else>
-                    {{ slotProps.placeholder }}
-                </span>
-            </template>
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-        </Select>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCountry = ref();
-const countries = ref([
-    { name: 'Australia', code: 'AU' },
-    { name: 'Brazil', code: 'BR' },
-    { name: 'China', code: 'CN' },
-    { name: 'Egypt', code: 'EG' },
-    { name: 'France', code: 'FR' },
-    { name: 'Germany', code: 'DE' },
-    { name: 'India', code: 'IN' },
-    { name: 'Japan', code: 'JP' },
-    { name: 'Spain', code: 'ES' },
-    { name: 'United States', code: 'US' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/FloatLabelDoc.vue b/apps/labs/doc/select/FloatLabelDoc.vue
deleted file mode 100644
index 77e3c8aaf..000000000
--- a/apps/labs/doc/select/FloatLabelDoc.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-56">
-            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56" variant="in">
-            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56" variant="on">
-            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<FloatLabel class="w-full md:w-56">
-    <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel class="w-full md:w-56" variant="in">
-    <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel class="w-full md:w-56" variant="on">
-    <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-stretch gap-4">
-        <FloatLabel class="w-full md:w-56">
-            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56" variant="in">
-            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56" variant="on">
-            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-stretch gap-4">
-        <FloatLabel class="w-full md:w-56">
-            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56" variant="in">
-            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-56" variant="on">
-            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/FormsDoc.vue b/apps/labs/doc/select/FormsDoc.vue
deleted file mode 100644
index 479d5eaf3..000000000
--- a/apps/labs/doc/select/FormsDoc.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
-            <div class="flex flex-col gap-1">
-                <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                city: { name: '' }
-            },
-            resolver: zodResolver(
-                z.object({
-                    city: z.union([
-                        z.object({
-                            name: z.string().min(1, 'City is required.')
-                        }),
-                        z.any().refine((val) => false, { message: 'City is required.' })
-                    ])
-                })
-            ),
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
-    <div class="flex flex-col gap-1">
-        <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
-            <div class="flex flex-col gap-1">
-                <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                city: { name: '' }
-            },
-            resolver: zodResolver(
-                z.object({
-                    city: z.union([
-                        z.object({
-                            name: z.string().min(1, 'City is required.')
-                        }),
-                        z.any().refine((val) => false, { message: 'City is required.' })
-                    ])
-                })
-            ),
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
-            <div class="flex flex-col gap-1">
-                <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    city: { name: '' }
-});
-const resolver = ref(zodResolver(
-    z.object({
-        city: z.union([
-            z.object({
-                name: z.string().min(1, 'City is required.')
-            }),
-            z.any().refine((val) => false, { message: 'City is required.' })
-        ])
-    })
-));
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/GroupDoc.vue b/apps/labs/doc/select/GroupDoc.vue
deleted file mode 100644
index f5645f564..000000000
--- a/apps/labs/doc/select/GroupDoc.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the children
-            of a group.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </Select>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            groupedCities: [
-                {
-                    label: 'Germany',
-                    code: 'DE',
-                    items: [
-                        { label: 'Berlin', value: 'Berlin' },
-                        { label: 'Frankfurt', value: 'Frankfurt' },
-                        { label: 'Hamburg', value: 'Hamburg' },
-                        { label: 'Munich', value: 'Munich' }
-                    ]
-                },
-                {
-                    label: 'USA',
-                    code: 'US',
-                    items: [
-                        { label: 'Chicago', value: 'Chicago' },
-                        { label: 'Los Angeles', value: 'Los Angeles' },
-                        { label: 'New York', value: 'New York' },
-                        { label: 'San Francisco', value: 'San Francisco' }
-                    ]
-                },
-                {
-                    label: 'Japan',
-                    code: 'JP',
-                    items: [
-                        { label: 'Kyoto', value: 'Kyoto' },
-                        { label: 'Osaka', value: 'Osaka' },
-                        { label: 'Tokyo', value: 'Tokyo' },
-                        { label: 'Yokohama', value: 'Yokohama' }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
-    <template #optiongroup="slotProps">
-        <div class="flex items-center">
-            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-            <div>{{ slotProps.option.label }}</div>
-        </div>
-    </template>
-</Select>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </Select>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            groupedCities: [
-                {
-                    label: 'Germany',
-                    code: 'DE',
-                    items: [
-                        { label: 'Berlin', value: 'Berlin' },
-                        { label: 'Frankfurt', value: 'Frankfurt' },
-                        { label: 'Hamburg', value: 'Hamburg' },
-                        { label: 'Munich', value: 'Munich' }
-                    ]
-                },
-                {
-                    label: 'USA',
-                    code: 'US',
-                    items: [
-                        { label: 'Chicago', value: 'Chicago' },
-                        { label: 'Los Angeles', value: 'Los Angeles' },
-                        { label: 'New York', value: 'New York' },
-                        { label: 'San Francisco', value: 'San Francisco' }
-                    ]
-                },
-                {
-                    label: 'Japan',
-                    code: 'JP',
-                    items: [
-                        { label: 'Kyoto', value: 'Kyoto' },
-                        { label: 'Osaka', value: 'Osaka' },
-                        { label: 'Tokyo', value: 'Tokyo' },
-                        { label: 'Yokohama', value: 'Yokohama' }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
-            <template #optiongroup="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.option.label }}</div>
-                </div>
-            </template>
-        </Select>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const groupedCities = ref([
-    {
-        label: 'Germany',
-        code: 'DE',
-        items: [
-            { label: 'Berlin', value: 'Berlin' },
-            { label: 'Frankfurt', value: 'Frankfurt' },
-            { label: 'Hamburg', value: 'Hamburg' },
-            { label: 'Munich', value: 'Munich' }
-        ]
-    },
-    {
-        label: 'USA',
-        code: 'US',
-        items: [
-            { label: 'Chicago', value: 'Chicago' },
-            { label: 'Los Angeles', value: 'Los Angeles' },
-            { label: 'New York', value: 'New York' },
-            { label: 'San Francisco', value: 'San Francisco' }
-        ]
-    },
-    {
-        label: 'Japan',
-        code: 'JP',
-        items: [
-            { label: 'Kyoto', value: 'Kyoto' },
-            { label: 'Osaka', value: 'Osaka' },
-            { label: 'Tokyo', value: 'Tokyo' },
-            { label: 'Yokohama', value: 'Yokohama' }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/IftaLabelDoc.vue b/apps/labs/doc/select/IftaLabelDoc.vue
deleted file mode 100644
index a703e7bdb..000000000
--- a/apps/labs/doc/select/IftaLabelDoc.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-56">
-            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
-            <label for="dd-city">City</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<IftaLabel>
-    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
-    <label for="dd-city">City</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-56">
-            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
-            <label for="dd-city">City</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-56">
-            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
-            <label for="dd-city">City</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/ImportDoc.vue b/apps/labs/doc/select/ImportDoc.vue
deleted file mode 100644
index 8ee8a0a1b..000000000
--- a/apps/labs/doc/select/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Select from 'primevue/select';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/InvalidDoc.vue b/apps/labs/doc/select/InvalidDoc.vue
deleted file mode 100644
index ad04dc8ea..000000000
--- a/apps/labs/doc/select/InvalidDoc.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
-        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity1: null,
-            selectedCity2: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
-<Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
-        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity1: null,
-            selectedCity2: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
-        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity1 = ref(null);
-const selectedCity2 = ref(null);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/LazyVirtualScrollDoc.vue b/apps/labs/doc/select/LazyVirtualScrollDoc.vue
deleted file mode 100644
index 80fe0e33a..000000000
--- a/apps/labs/doc/select/LazyVirtualScrollDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <div class="card flex justify-center">
-        <Select
-            v-model="selectedItem"
-            :options="items"
-            optionLabel="label"
-            optionValue="value"
-            :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }"
-            placeholder="Select Item"
-            class="w-full md:w-56"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedItem: null,
-            items: Array.from({ length: 100000 }),
-            loading: false,
-            code: {
-                basic: `
-<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
-    :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
-            :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedItem: null,
-            items: Array.from({ length: 100000 }),
-            loading: false
-        };
-    },
-    loadLazyTimeout: null,
-    methods: {
-        onLazyLoad(event) {
-            this.loading = true;
-
-            if (this.loadLazyTimeout) {
-                clearTimeout(this.loadLazyTimeout);
-            }
-
-            //imitate delay of a backend call
-            this.loadLazyTimeout = setTimeout(() => {
-                const { first, last } = event;
-                const _items = [...this.items];
-
-                for (let i = first; i < last; i++) {
-                    _items[i] = { label: \`Item #\${i}\`, value: i };
-                }
-
-                this.items = _items;
-                this.loading = false;
-            }, Math.random() * 1000 + 250);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
-            :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedItem = ref();
-const items = ref(Array.from({ length: 100000 }));
-const loading = ref(false);
-const loadLazyTimeout = ref();
-const onLazyLoad = (event) => {
-    loading.value = true;
-
-    if (loadLazyTimeout.value) {
-        clearTimeout(loadLazyTimeout.value);
-    }
-
-    //imitate delay of a backend call
-    loadLazyTimeout.value = setTimeout(() => {
-        const { first, last } = event;
-        const _items = [...items.value];
-
-        for (let i = first; i < last; i++) {
-            _items[i] = { label: \`Item #\${i}\`, value: i };
-        }
-
-        items.value = _items;
-        loading.value = false;
-    }, Math.random() * 1000 + 250);
-}
-<\/script>
-`
-            }
-        };
-    },
-    loadLazyTimeout: null,
-    methods: {
-        onLazyLoad(event) {
-            this.loading = true;
-
-            if (this.loadLazyTimeout) {
-                clearTimeout(this.loadLazyTimeout);
-            }
-
-            //imitate delay of a backend call
-            this.loadLazyTimeout = setTimeout(() => {
-                const { first, last } = event;
-                const items = [...this.items];
-
-                for (let i = first; i < last; i++) {
-                    items[i] = { label: `Item #${i}`, value: i };
-                }
-
-                this.items = items;
-                this.loading = false;
-            }, Math.random() * 1000 + 250);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/LoadingStateDoc.vue b/apps/labs/doc/select/LoadingStateDoc.vue
deleted file mode 100644
index 6a05914ba..000000000
--- a/apps/labs/doc/select/LoadingStateDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Loading state can be used <i>loading</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/SizesDoc.vue b/apps/labs/doc/select/SizesDoc.vue
deleted file mode 100644
index 2cbe09ac8..000000000
--- a/apps/labs/doc/select/SizesDoc.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Select provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
-        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
-        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
-<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
-<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
-        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
-        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
-        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
-        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/TemplateDoc.vue b/apps/labs/doc/select/TemplateDoc.vue
deleted file mode 100644
index c58fc6d9f..000000000
--- a/apps/labs/doc/select/TemplateDoc.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Select offers multiple slots for customization through templating.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
-            <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex items-center">
-                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
-                    <div>{{ slotProps.value.name }}</div>
-                </div>
-                <span v-else>
-                    {{ slotProps.placeholder }}
-                </span>
-            </template>
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #header>
-                <div class="font-medium p-3">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="p-3">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </Select>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCountry: null,
-            countries: [
-                { name: 'Australia', code: 'AU' },
-                { name: 'Brazil', code: 'BR' },
-                { name: 'China', code: 'CN' },
-                { name: 'Egypt', code: 'EG' },
-                { name: 'France', code: 'FR' },
-                { name: 'Germany', code: 'DE' },
-                { name: 'India', code: 'IN' },
-                { name: 'Japan', code: 'JP' },
-                { name: 'Spain', code: 'ES' },
-                { name: 'United States', code: 'US' }
-            ],
-            code: {
-                basic: `
-<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
-    <template #value="slotProps">
-        <div v-if="slotProps.value" class="flex items-center">
-            <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
-            <div>{{ slotProps.value.name }}</div>
-        </div>
-        <span v-else>
-            {{ slotProps.placeholder }}
-        </span>
-    </template>
-    <template #option="slotProps">
-        <div class="flex items-center">
-            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-            <div>{{ slotProps.option.name }}</div>
-        </div>
-    </template>
-    <template #dropdownicon>
-        <i class="pi pi-map" />
-    </template>
-    <template #header>
-        <div class="font-medium p-3">Available Countries</div>
-    </template>
-    <template #footer>
-        <div class="p-3">
-            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-        </div>
-    </template>
-</Select>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
-            <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex items-center">
-                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.value.name }}</div>
-                </div>
-                <span v-else>
-                    {{ slotProps.placeholder }}
-                </span>
-            </template>
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #header>
-                <div class="font-medium p-3">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="p-3">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </Select>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCountry: null,
-            countries: [
-                { name: 'Australia', code: 'AU' },
-                { name: 'Brazil', code: 'BR' },
-                { name: 'China', code: 'CN' },
-                { name: 'Egypt', code: 'EG' },
-                { name: 'France', code: 'FR' },
-                { name: 'Germany', code: 'DE' },
-                { name: 'India', code: 'IN' },
-                { name: 'Japan', code: 'JP' },
-                { name: 'Spain', code: 'ES' },
-                { name: 'United States', code: 'US' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
-            <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex items-center">
-                    <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.value.name }}</div>
-                </div>
-                <span v-else>
-                    {{ slotProps.placeholder }}
-                </span>
-            </template>
-            <template #option="slotProps">
-                <div class="flex items-center">
-                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
-                    <div>{{ slotProps.option.name }}</div>
-                </div>
-            </template>
-            <template #dropdownicon>
-                <i class="pi pi-map" />
-            </template>
-            <template #header>
-                <div class="font-medium p-3">Available Countries</div>
-            </template>
-            <template #footer>
-                <div class="p-3">
-                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </Select>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCountry = ref();
-const countries = ref([
-    { name: 'Australia', code: 'AU' },
-    { name: 'Brazil', code: 'BR' },
-    { name: 'China', code: 'CN' },
-    { name: 'Egypt', code: 'EG' },
-    { name: 'France', code: 'FR' },
-    { name: 'Germany', code: 'DE' },
-    { name: 'India', code: 'IN' },
-    { name: 'Japan', code: 'JP' },
-    { name: 'Spain', code: 'ES' },
-    { name: 'United States', code: 'US' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/select/VirtualScrollDoc.vue b/apps/labs/doc/select/VirtualScrollDoc.vue
deleted file mode 100644
index 626174a00..000000000
--- a/apps/labs/doc/select/VirtualScrollDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the
-            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by Select.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedItem: null,
-            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
-            code: {
-                basic: `
-<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-    :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedItem: null,
-            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedItem = ref();
-const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/AccessibilityDoc.vue b/apps/labs/doc/selectbutton/AccessibilityDoc.vue
deleted file mode 100644
index 17f59dad3..000000000
--- a/apps/labs/doc/selectbutton/AccessibilityDoc.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>SelectButton component uses ToggleButton internally and has <i>group</i> role. Value to describe the component can be provided via <i>aria-labelledby</i> property.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the checked state of a button.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="label_number">Number</span>
-<Slider aria-labelledby="label_number" />
-
-<Slider aria-label="Number" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/BasicDoc.vue b/apps/labs/doc/selectbutton/BasicDoc.vue
deleted file mode 100644
index e83fac879..000000000
--- a/apps/labs/doc/selectbutton/BasicDoc.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            SelectButton is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
-            Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'One-Way',
-            options: ['One-Way', 'Return'],
-            code: {
-                basic: `
-<SelectButton v-model="value" :options="options" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'One-Way',
-            options: ['One-Way', 'Return']
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('One-Way');
-const options = ref(['One-Way', 'Return']);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/DisabledDoc.vue b/apps/labs/doc/selectbutton/DisabledDoc.vue
deleted file mode 100644
index 19d9b1a8d..000000000
--- a/apps/labs/doc/selectbutton/DisabledDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the <i>optionDisabled</i> property.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
-        <SelectButton v-model="value" :options="options1" disabled />
-        <SelectButton v-model="value2" :options="options2" optionDisabled="constant" optionLabel="name" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'Off',
-            value2: null,
-            options1: ['Off', 'On'],
-            options2: [
-                { name: 'Option 1', value: 1, constant: false },
-                { name: 'Option 2', value: 2, constant: true }
-            ],
-            code: {
-                basic: `
-<SelectButton v-model="value" :options="options" disabled />
-<SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
-        <SelectButton v-model="value" :options="options" disabled />
-        <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'Off',
-            value2: null,
-            options1: ['Off', 'On'],
-            options2: [
-                { name: 'Option 1', value: 1, constant: false },
-                { name: 'Option 2', value: 2, constant: true }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
-        <SelectButton v-model="value" :options="options" disabled />
-        <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref('Off');
-const value2 = ref();
-const options1 = ref(['Off', 'On']);
-const options2 = ref([
-    { name: 'Option 1', value: 1, constant: false },
-    { name: 'Option 2', value: 2, constant: true }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/FormsDoc.vue b/apps/labs/doc/selectbutton/FormsDoc.vue
deleted file mode 100644
index 7fd4888e9..000000000
--- a/apps/labs/doc/selectbutton/FormsDoc.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>SelectButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex items-center flex-col gap-1">
-                <SelectButton name="selection" :options="options" />
-                <Message v-if="$form.selection?.invalid" severity="error" size="small" variant="simple">{{ $form.selection.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                selection: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
-                })
-            ),
-            options: ['One-Way', 'Return'],
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col gap-1">
-        <SelectButton name="selection" :options="options" />
-        <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <SelectButton name="selection" :options="options" />
-                <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                selection: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
-                })
-            ),
-            options: ['One-Way', 'Return'],
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <SelectButton name="selection" :options="options" />
-                <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    selection: ''
-});
-const resolver = ref(zodResolver(
-    z.object({
-        selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/ImportDoc.vue b/apps/labs/doc/selectbutton/ImportDoc.vue
deleted file mode 100644
index 4920f1520..000000000
--- a/apps/labs/doc/selectbutton/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import SelectButton from 'primevue/selectbutton';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/InvalidDoc.vue b/apps/labs/doc/selectbutton/InvalidDoc.vue
deleted file mode 100644
index 1914a8d86..000000000
--- a/apps/labs/doc/selectbutton/InvalidDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            options: ['One-Way', 'Return'],
-            code: {
-                basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null"  />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null"  />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            options: ['One-Way', 'Return'],
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null"  />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-const options = ref(['One-Way', 'Return']);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/MultipleDoc.vue b/apps/labs/doc/selectbutton/MultipleDoc.vue
deleted file mode 100644
index 4f15196da..000000000
--- a/apps/labs/doc/selectbutton/MultipleDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            options: [
-                { name: 'Option 1', value: 1 },
-                { name: 'Option 2', value: 2 },
-                { name: 'Option 3', value: 3 }
-            ],
-            code: {
-                basic: `
-<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            options: [
-                { name: 'Option 1', value: 1 },
-                { name: 'Option 2', value: 2 },
-                { name: 'Option 3', value: 3 }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-const options = ref([
-    { name: 'Option 1', value: 1 },
-    { name: 'Option 2', value: 2 },
-    { name: 'Option 3', value: 3 }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/SizesDoc.vue b/apps/labs/doc/selectbutton/SizesDoc.vue
deleted file mode 100644
index 9bb30e3f3..000000000
--- a/apps/labs/doc/selectbutton/SizesDoc.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>SelectButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <SelectButton v-model="value1" :options="options" size="small" />
-        <SelectButton v-model="value2" :options="options" />
-        <SelectButton v-model="value3" :options="options" size="large" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: 'Beginner',
-            value3: 'Expert',
-            options: ['Beginner', 'Expert'],
-            code: {
-                basic: `
-<SelectButton v-model="value1" :options="options" size="small" />
-<SelectButton v-model="value2" :options="options" />
-<SelectButton v-model="value3" :options="options" size="large" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <SelectButton v-model="value1" :options="options" size="small" />
-        <SelectButton v-model="value2" :options="options" />
-        <SelectButton v-model="value3" :options="options" size="large" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: 'Beginner',
-            value3: 'Expert',
-            options: ['Beginner', 'Expert'],
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <SelectButton v-model="value1" :options="options" size="small" />
-        <SelectButton v-model="value2" :options="options" />
-        <SelectButton v-model="value3" :options="options" size="large" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref('Beginner');
-const value3 = ref('Expert');
-const options = ref(['Beginner', 'Expert']);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/selectbutton/TemplateDoc.vue b/apps/labs/doc/selectbutton/TemplateDoc.vue
deleted file mode 100644
index 61859eefb..000000000
--- a/apps/labs/doc/selectbutton/TemplateDoc.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
-            <template #option="slotProps">
-                <i :class="slotProps.option.icon"></i>
-            </template>
-        </SelectButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            options: [
-                { icon: 'pi pi-align-left', value: 'Left' },
-                { icon: 'pi pi-align-right', value: 'Right' },
-                { icon: 'pi pi-align-center', value: 'Center' },
-                { icon: 'pi pi-align-justify', value: 'Justify' }
-            ],
-            code: {
-                basic: `
-<SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
-    <template #option="slotProps">
-        <i :class="slotProps.option.icon"></i>
-    </template>
-</SelectButton>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
-            <template #option="slotProps">
-                <i :class="slotProps.option.icon"></i>
-            </template>
-        </SelectButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            options: [
-                { icon: 'pi pi-align-left', value: 'Left' },
-                { icon: 'pi pi-align-right', value: 'Right' },
-                { icon: 'pi pi-align-center', value: 'Center' },
-                { icon: 'pi pi-align-justify', value: 'Justify' }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
-            <template #option="slotProps">
-                <i :class="slotProps.option.icon"></i>
-            </template>
-        </SelectButton>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-const options = ref([
-    { icon: 'pi pi-align-left', value: 'Left' },
-    { icon: 'pi pi-align-right', value: 'Right' },
-    { icon: 'pi pi-align-center', value: 'Center' },
-    { icon: 'pi pi-align-justify', value: 'Justify' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/skeleton/AccessibilityDoc.vue b/apps/labs/doc/skeleton/AccessibilityDoc.vue
deleted file mode 100644
index 845210682..000000000
--- a/apps/labs/doc/skeleton/AccessibilityDoc.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Skeleton uses <i>aria-hidden</i> as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you
-            may use <i>aria-busy</i> on the container element as well to indicate the loading process.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <p>Component does not include any interactive elements.</p>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/skeleton/CardDoc.vue b/apps/labs/doc/skeleton/CardDoc.vue
deleted file mode 100644
index e2d8ce2a5..000000000
--- a/apps/labs/doc/skeleton/CardDoc.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Sample Card implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
-            <div class="flex mb-4">
-                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div>
-                    <Skeleton width="10rem" class="mb-2"></Skeleton>
-                    <Skeleton width="5rem" class="mb-2"></Skeleton>
-                    <Skeleton height=".5rem"></Skeleton>
-                </div>
-            </div>
-            <Skeleton width="100%" height="150px"></Skeleton>
-            <div class="flex justify-between mt-4">
-                <Skeleton width="4rem" height="2rem"></Skeleton>
-                <Skeleton width="4rem" height="2rem"></Skeleton>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
-    <div class="flex mb-4">
-        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-        <div>
-            <Skeleton width="10rem" class="mb-2"></Skeleton>
-            <Skeleton width="5rem" class="mb-2"></Skeleton>
-            <Skeleton height=".5rem"></Skeleton>
-        </div>
-    </div>
-    <Skeleton width="100%" height="150px"></Skeleton>
-    <div class="flex justify-between mt-4">
-        <Skeleton width="4rem" height="2rem"></Skeleton>
-        <Skeleton width="4rem" height="2rem"></Skeleton>
-    </div>
-</div>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
-            <div class="flex mb-4">
-                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div>
-                    <Skeleton width="10rem" class="mb-2"></Skeleton>
-                    <Skeleton width="5rem" class="mb-2"></Skeleton>
-                    <Skeleton height=".5rem"></Skeleton>
-                </div>
-            </div>
-            <Skeleton width="100%" height="150px"></Skeleton>
-            <div class="flex justify-between mt-4">
-                <Skeleton width="4rem" height="2rem"></Skeleton>
-                <Skeleton width="4rem" height="2rem"></Skeleton>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
-            <div class="flex mb-4">
-                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div>
-                    <Skeleton width="10rem" class="mb-2"></Skeleton>
-                    <Skeleton width="5rem" class="mb-2"></Skeleton>
-                    <Skeleton height=".5rem"></Skeleton>
-                </div>
-            </div>
-            <Skeleton width="100%" height="150px"></Skeleton>
-            <div class="flex justify-between mt-4">
-                <Skeleton width="4rem" height="2rem"></Skeleton>
-                <Skeleton width="4rem" height="2rem"></Skeleton>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/skeleton/DataTableDoc.vue b/apps/labs/doc/skeleton/DataTableDoc.vue
deleted file mode 100644
index f45d85633..000000000
--- a/apps/labs/doc/skeleton/DataTableDoc.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
-    </DocSectionText>
-    <div class="card">
-        <DataTable :value="products">
-            <Column field="code" header="Code">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="name" header="Name">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="category" header="Category">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="quantity" header="Quantity">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<DataTable :value="products">
-    <Column field="code" header="Code">
-        <template #body>
-            <Skeleton></Skeleton>
-        </template>
-    </Column>
-    <Column field="name" header="Name">
-        <template #body>
-            <Skeleton></Skeleton>
-        </template>
-    </Column>
-    <Column field="category" header="Category">
-        <template #body>
-            <Skeleton></Skeleton>
-        </template>
-    </Column>
-    <Column field="quantity" header="Quantity">
-        <template #body>
-            <Skeleton></Skeleton>
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable :value="products">
-            <Column field="code" header="Code">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="name" header="Name">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="category" header="Category">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="quantity" header="Quantity">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            products: new Array(4)
-        };
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable :value="products">
-            <Column field="code" header="Code">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="name" header="Name">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="category" header="Category">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-            <Column field="quantity" header="Quantity">
-                <template #body>
-                    <Skeleton></Skeleton>
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const products = ref(new Array(4));
-<\/script>
-`
-            },
-            products: new Array(4)
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/skeleton/ImportDoc.vue b/apps/labs/doc/skeleton/ImportDoc.vue
deleted file mode 100644
index ffed605b6..000000000
--- a/apps/labs/doc/skeleton/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Skeleton from 'primevue/skeleton';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/skeleton/ListDoc.vue b/apps/labs/doc/skeleton/ListDoc.vue
deleted file mode 100644
index 4574a9d72..000000000
--- a/apps/labs/doc/skeleton/ListDoc.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
-            <ul class="m-0 p-0 list-none">
-                <li class="mb-4">
-                    <div class="flex">
-                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                        <div class="self-center" style="flex: 1">
-                            <Skeleton width="100%" class="mb-2"></Skeleton>
-                            <Skeleton width="75%"></Skeleton>
-                        </div>
-                    </div>
-                </li>
-                <li class="mb-4">
-                    <div class="flex">
-                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                        <div class="self-center" style="flex: 1">
-                            <Skeleton width="100%" class="mb-2"></Skeleton>
-                            <Skeleton width="75%"></Skeleton>
-                        </div>
-                    </div>
-                </li>
-                <li class="mb-4">
-                    <div class="flex">
-                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                        <div class="self-center" style="flex: 1">
-                            <Skeleton width="100%" class="mb-2"></Skeleton>
-                            <Skeleton width="75%"></Skeleton>
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    <div class="flex">
-                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                        <div class="self-center" style="flex: 1">
-                            <Skeleton width="100%" class="mb-2"></Skeleton>
-                            <Skeleton width="75%"></Skeleton>
-                        </div>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
-    <ul class="m-0 p-0 list-none">
-        <li class="mb-4">
-            <div class="flex">
-                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div class="self-center" style="flex: 1">
-                    <Skeleton width="100%" class="mb-2"></Skeleton>
-                    <Skeleton width="75%"></Skeleton>
-                </div>
-            </div>
-        </li>
-        <li class="mb-4">
-            <div class="flex">
-                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div class="self-center" style="flex: 1">
-                    <Skeleton width="100%" class="mb-2"></Skeleton>
-                    <Skeleton width="75%"></Skeleton>
-                </div>
-            </div>
-        </li>
-        <li class="mb-4">
-            <div class="flex">
-                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div class="self-center" style="flex: 1">
-                    <Skeleton width="100%" class="mb-2"></Skeleton>
-                    <Skeleton width="75%"></Skeleton>
-                </div>
-            </div>
-        </li>
-        <li>
-            <div class="flex">
-                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div class="self-center" style="flex: 1">
-                    <Skeleton width="100%" class="mb-2"></Skeleton>
-                    <Skeleton width="75%"></Skeleton>
-                </div>
-            </div>
-        </li>
-    </ul>
-</div>
-`,
-                options: `
-<template>
-    <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
-        <ul class="m-0 p-0 list-none">
-            <li class="mb-4">
-                <div class="flex">
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="self-center" style="flex: 1">
-                        <Skeleton width="100%" class="mb-2"></Skeleton>
-                        <Skeleton width="75%"></Skeleton>
-                    </div>
-                </div>
-            </li>
-            <li class="mb-4">
-                <div class="flex">
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="self-center" style="flex: 1">
-                        <Skeleton width="100%" class="mb-2"></Skeleton>
-                        <Skeleton width="75%"></Skeleton>
-                    </div>
-                </div>
-            </li>
-            <li class="mb-4">
-                <div class="flex">
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="self-center" style="flex: 1">
-                        <Skeleton width="100%" class="mb-2"></Skeleton>
-                        <Skeleton width="75%"></Skeleton>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <div class="flex">
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="self-center" style="flex: 1">
-                        <Skeleton width="100%" class="mb-2"></Skeleton>
-                        <Skeleton width="75%"></Skeleton>
-                    </div>
-                </div>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
-        <ul class="m-0 p-0 list-none">
-            <li class="mb-4">
-                <div class="flex">
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="self-center" style="flex: 1">
-                        <Skeleton width="100%" class="mb-2"></Skeleton>
-                        <Skeleton width="75%"></Skeleton>
-                    </div>
-                </div>
-            </li>
-            <li class="mb-4">
-                <div class="flex">
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="self-center" style="flex: 1">
-                        <Skeleton width="100%" class="mb-2"></Skeleton>
-                        <Skeleton width="75%"></Skeleton>
-                    </div>
-                </div>
-            </li>
-            <li class="mb-4">
-                <div class="flex">
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="self-center" style="flex: 1">
-                        <Skeleton width="100%" class="mb-2"></Skeleton>
-                        <Skeleton width="75%"></Skeleton>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <div class="flex">
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="self-center" style="flex: 1">
-                        <Skeleton width="100%" class="mb-2"></Skeleton>
-                        <Skeleton width="75%"></Skeleton>
-                    </div>
-                </div>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/skeleton/ShapesDoc.vue b/apps/labs/doc/skeleton/ShapesDoc.vue
deleted file mode 100644
index 4f6572315..000000000
--- a/apps/labs/doc/skeleton/ShapesDoc.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Various shapes and sizes can be created using styling properties like <i>shape</i>, <i>width</i>, <i>height</i>, <i>borderRadius</i> and <i>class</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap">
-            <div class="w-full xl:w-6/12 p-4">
-                <h5>Rectangle</h5>
-                <Skeleton class="mb-2"></Skeleton>
-                <Skeleton width="10rem" class="mb-2"></Skeleton>
-                <Skeleton width="5rem" class="mb-2"></Skeleton>
-                <Skeleton height="2rem" class="mb-2"></Skeleton>
-                <Skeleton width="10rem" height="4rem"></Skeleton>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5>Rounded</h5>
-                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
-                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5 class="mt-4">Square</h5>
-                <div class="flex items-end">
-                    <Skeleton size="2rem" class="mr-2"></Skeleton>
-                    <Skeleton size="3rem" class="mr-2"></Skeleton>
-                    <Skeleton size="4rem" class="mr-2"></Skeleton>
-                    <Skeleton size="5rem"></Skeleton>
-                </div>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5 class="mt-4">Circle</h5>
-                <div class="flex items-end">
-                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="5rem"></Skeleton>
-                </div>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<h5>Rectangle</h5>
-<Skeleton class="mb-2"></Skeleton>
-<Skeleton width="10rem" class="mb-2"></Skeleton>
-<Skeleton width="5rem" class="mb-2"></Skeleton>
-<Skeleton height="2rem" class="mb-2"></Skeleton>
-<Skeleton width="10rem" height="4rem"></Skeleton>
-
-<h5>Rounded</h5>
-<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
-<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
-<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
-<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
-<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
-
-<h5 class="mt-4">Square</h5>
-<Skeleton size="2rem" class="mr-2"></Skeleton>
-<Skeleton size="3rem" class="mr-2"></Skeleton>
-<Skeleton size="4rem" class="mr-2"></Skeleton>
-<Skeleton size="5rem"></Skeleton>
-
-<h5 class="mt-4">Circle</h5>
-<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
-<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
-<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-<Skeleton shape="circle" size="5rem"></Skeleton>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap">
-            <div class="w-full xl:w-6/12 p-4">
-                <h5>Rectangle</h5>
-                <Skeleton class="mb-2"></Skeleton>
-                <Skeleton width="10rem" class="mb-2"></Skeleton>
-                <Skeleton width="5rem" class="mb-2"></Skeleton>
-                <Skeleton height="2rem" class="mb-2"></Skeleton>
-                <Skeleton width="10rem" height="4rem"></Skeleton>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5>Rounded</h5>
-                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
-                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5 class="mt-4">Square</h5>
-                <div class="flex items-end">
-                    <Skeleton size="2rem" class="mr-2"></Skeleton>
-                    <Skeleton size="3rem" class="mr-2"></Skeleton>
-                    <Skeleton size="4rem" class="mr-2"></Skeleton>
-                    <Skeleton size="5rem"></Skeleton>
-                </div>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5 class="mt-4">Circle</h5>
-                <div class="flex items-end">
-                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="5rem"></Skeleton>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap">
-            <div class="w-full xl:w-6/12 p-4">
-                <h5>Rectangle</h5>
-                <Skeleton class="mb-2"></Skeleton>
-                <Skeleton width="10rem" class="mb-2"></Skeleton>
-                <Skeleton width="5rem" class="mb-2"></Skeleton>
-                <Skeleton height="2rem" class="mb-2"></Skeleton>
-                <Skeleton width="10rem" height="4rem"></Skeleton>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5>Rounded</h5>
-                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
-                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5 class="mt-4">Square</h5>
-                <div class="flex items-end">
-                    <Skeleton size="2rem" class="mr-2"></Skeleton>
-                    <Skeleton size="3rem" class="mr-2"></Skeleton>
-                    <Skeleton size="4rem" class="mr-2"></Skeleton>
-                    <Skeleton size="5rem"></Skeleton>
-                </div>
-            </div>
-            <div class="w-full xl:w-6/12 p-4">
-                <h5 class="mt-4">Circle</h5>
-                <div class="flex items-end">
-                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="5rem"></Skeleton>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/AccessibilityDoc.vue b/apps/labs/doc/slider/AccessibilityDoc.vue
deleted file mode 100644
index 003d823cd..000000000
--- a/apps/labs/doc/slider/AccessibilityDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined
-            using <i>aria-labelledby</i> and <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the slider.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">left arrow</i>
-                                <i>up arrow</i>
-                            </span>
-                        </td>
-                        <td>Decrements the value.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">right arrow</i>
-                                <i>down arrow</i>
-                            </span>
-                        </td>
-                        <td>Increments the value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>home</i></td>
-                        <td>Set the minimum value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>end</i></td>
-                        <td>Set the maximum value.</td>
-                    </tr>
-                    <tr>
-                        <td><i>page up</i></td>
-                        <td>Increments the value by 10 steps.</td>
-                    </tr>
-                    <tr>
-                        <td><i>page down</i></td>
-                        <td>Decrements the value by 10 steps.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="label_number">Number</span>
-<Slider aria-labelledby="label_number" />
-
-<Slider aria-label="Number" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/BasicDoc.vue b/apps/labs/doc/slider/BasicDoc.vue
deleted file mode 100644
index 9f44f23ce..000000000
--- a/apps/labs/doc/slider/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Slider is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Slider v-model="value" class="w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Slider v-model="value" class="w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" class="w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" class="w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/FilterDoc.vue b/apps/labs/doc/slider/FilterDoc.vue
deleted file mode 100644
index 5632c6426..000000000
--- a/apps/labs/doc/slider/FilterDoc.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Image filter implementation using multiple sliders.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-col items-center">
-            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
-            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
-            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            filter: 0,
-            filterValues: [100, 100, 0],
-            filterOptions: [
-                { label: 'Contrast', value: 0 },
-                { label: 'Brightness', value: 1 },
-                { label: 'Sepia', value: 2 }
-            ],
-            code: {
-                basic: `
-<img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
-<SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
-<Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col items-center">
-            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
-            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
-            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            filter: 0,
-            filterValues: [100, 100, 0],
-            filterOptions: [
-                { label: 'Contrast', value: 0 },
-                { label: 'Brightness', value: 1 },
-                { label: 'Sepia', value: 2 }
-            ]
-        }
-    },
-    computed: {
-        filterStyle() {
-            return {
-                filter: \`contrast(\${this.filterValues[0]}%) brightness(\${this.filterValues[1]}%) sepia(\${this.filterValues[2]}%)\`
-            };
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col items-center">
-            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
-            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
-            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue';
-
-const filter = ref(0);
-const filterValues = ref([100, 100, 0]);
-const filterOptions = ref([
-    { label: 'Contrast', value: 0 },
-    { label: 'Brightness', value: 1 },
-    { label: 'Sepia', value: 2 }
-]);
-const filterStyle = computed(() => {
-    return {
-        filter: \`contrast(\${this.filterValues[0]}%) brightness(\${this.filterValues[1]}%) sepia(\${this.filterValues[2]}%)\`
-    };
-})
-<\/script>
-`
-            }
-        };
-    },
-    computed: {
-        filterStyle() {
-            return {
-                filter: `contrast(${this.filterValues[0]}%) brightness(${this.filterValues[1]}%) sepia(${this.filterValues[2]}%)`
-            };
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/FormsDoc.vue b/apps/labs/doc/slider/FormsDoc.vue
deleted file mode 100644
index 6e8d339e5..000000000
--- a/apps/labs/doc/slider/FormsDoc.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Slider integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-4">
-                <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                slider: 0
-            },
-            resolver: zodResolver(
-                z.object({
-                    slider: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-    <div class="flex flex-col gap-4">
-        <Slider name="slider" />
-        <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-4">
-                <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                slider: 0
-            },
-            resolver: zodResolver(
-                z.object({
-                    slider: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
-                })
-            ),
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-4">
-                <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    slider: 0
-});
-const resolver = ref(zodResolver(
-    z.object({
-        slider: z.number().gt(25, { message: 'Must be greater than 25.' }).lt(75, { message: 'Must be less than 75.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/ImportDoc.vue b/apps/labs/doc/slider/ImportDoc.vue
deleted file mode 100644
index edde33fc8..000000000
--- a/apps/labs/doc/slider/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Slider from 'primevue/slider';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/InputDoc.vue b/apps/labs/doc/slider/InputDoc.vue
deleted file mode 100644
index c4bb3413d..000000000
--- a/apps/labs/doc/slider/InputDoc.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Slider is connected to an input field using two-way binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="w-56">
-            <InputText v-model.number="value" class="w-full mb-4" />
-            <Slider v-model="value" class="w-full" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50,
-            code: {
-                basic: `
-<InputText v-model.number="value" />
-<Slider v-model="value" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <div class="w-56">
-            <InputText v-model.number="value" class="w-full mb-4" />
-            <Slider v-model="value" class="w-full" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="w-56">
-            <InputText v-model.number="value" class="w-full mb-4" />
-            <Slider v-model="value" class="w-full" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/RangeDoc.vue b/apps/labs/doc/slider/RangeDoc.vue
deleted file mode 100644
index 2d9c9f012..000000000
--- a/apps/labs/doc/slider/RangeDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Slider v-model="value" range class="w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [20, 80],
-            code: {
-                basic: `
-<Slider v-model="value" range class="w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" range class="w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: [20, 80]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" range class="w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref([20, 80]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/StepDoc.vue b/apps/labs/doc/slider/StepDoc.vue
deleted file mode 100644
index 0df6e00a4..000000000
--- a/apps/labs/doc/slider/StepDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Size of each movement is defined with the <i>step</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Slider v-model="value" :step="20" class="w-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 20,
-            code: {
-                basic: `
-<Slider v-model="value" :step="20" class="w-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" :step="20" class="w-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 20
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" :step="20" class="w-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(20);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/slider/VerticalDoc.vue b/apps/labs/doc/slider/VerticalDoc.vue
deleted file mode 100644
index cfbddb1dc..000000000
--- a/apps/labs/doc/slider/VerticalDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Default layout of slider is <i>horizontal</i>, use <i>orientation</i> property for the alternative <i>vertical</i> mode.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Slider v-model="value" orientation="vertical" class="h-56" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50,
-            code: {
-                basic: `
-<Slider v-model="value" orientation="vertical" class="h-56" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" orientation="vertical" class="h-56" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 50
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" orientation="vertical" class="h-56" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/AccessibilityDoc.vue b/apps/labs/doc/speeddial/AccessibilityDoc.vue
deleted file mode 100644
index 1657bdf68..000000000
--- a/apps/labs/doc/speeddial/AccessibilityDoc.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the <i>aria-labelledby</i> or <i>aria-label</i> props. Addititonally the button includes
-            includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
-        </p>
-
-        <p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the button.</p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Menu Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Toggles the visibility of the menu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Toggles the visibility of the menu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Opens the menu and moves focus to the first item.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Opens the menu and moves focus to the last item.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Opens the menu and moves focus to the last item.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Opens the menu and moves focus to the first item.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the menu.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <h3>Menu Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Actives the menuitem, closes the menu and sets focus on the menu button.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Actives the menuitem, closes the menu and sets focus on the menu button.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the menu and sets focus on the menu button.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>arrow keys</i>
-                        </td>
-                        <td>Navigates between the menu items.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first item.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last item.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<SpeedDial aria-label="Options" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/CircleDoc.vue b/apps/labs/doc/speeddial/CircleDoc.vue
deleted file mode 100644
index 5dab22aeb..000000000
--- a/apps/labs/doc/speeddial/CircleDoc.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items can be displayed around the button when <i>type</i> is set to <i>circle</i>. Additional <i>radius</i> property defines the radius of the circle.</p>
-    </DocSectionText>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/ImportDoc.vue b/apps/labs/doc/speeddial/ImportDoc.vue
deleted file mode 100644
index 84b262c2b..000000000
--- a/apps/labs/doc/speeddial/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import SpeedDial from 'primevue/speeddial';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/LinearDoc.vue b/apps/labs/doc/speeddial/LinearDoc.vue
deleted file mode 100644
index eaf3246a2..000000000
--- a/apps/labs/doc/speeddial/LinearDoc.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>SpeedDial items are defined with the <i>model</i> property based on MenuModel API. Default orientation of the items is linear and <i>direction</i> property is used to define the position of the items related to the button.</p>
-    </DocSectionText>
-    <div class="card">
-        <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
-            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
-            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
-            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
-<SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
-<SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
-<SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
-            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
-            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
-            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
-            <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
-            <SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
-            <SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/MaskDoc.vue b/apps/labs/doc/speeddial/MaskDoc.vue
deleted file mode 100644
index f3e32fc4f..000000000
--- a/apps/labs/doc/speeddial/MaskDoc.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Adding <i>mask</i> property displays a modal layer behind the popup items.</p>
-    </DocSectionText>
-    <div class="card p-4">
-        <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
-`,
-                options: `
-<template>
-    <div class="card p-4">
-        <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-data() {
-    return {
-        items: [
-            {
-                label: 'Add',
-                icon: 'pi pi-pencil',
-                command: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                }
-            },
-            {
-                label: 'Update',
-                icon: 'pi pi-refresh',
-                command: () => {
-                    this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                }
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-trash',
-                command: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                }
-            },
-            {
-                label: 'Upload',
-                icon: 'pi pi-upload',
-                command: () => {
-                    this.$router.push('/fileupload');
-                }
-            },
-            {
-                label: 'Vue Website',
-                icon: 'pi pi-external-link',
-                command: () => {
-                    window.location.href = 'https://vuejs.org/';
-                }
-            }
-        ]
-    }
-}
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card p-4">
-        <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/QuarterCircleDoc.vue b/apps/labs/doc/speeddial/QuarterCircleDoc.vue
deleted file mode 100644
index ba455cfe3..000000000
--- a/apps/labs/doc/speeddial/QuarterCircleDoc.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Setting <i>type</i> as <i>quarter-circle</i> displays the items at one of four corners of a button based on the <i>direction</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-data() {
-    return {
-        items: [
-            {
-                label: 'Add',
-                icon: 'pi pi-pencil',
-                command: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                }
-            },
-            {
-                label: 'Update',
-                icon: 'pi pi-refresh',
-                command: () => {
-                    this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                }
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-trash',
-                command: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                }
-            },
-            {
-                label: 'Upload',
-                icon: 'pi pi-upload',
-                command: () => {
-                    this.$router.push('/fileupload');
-                }
-            },
-            {
-                label: 'Vue Website',
-                icon: 'pi pi-external-link',
-                command: () => {
-                    window.location.href = 'https://vuejs.org/';
-                }
-            }
-        ]
-    }
-}
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/SemiCircleDoc.vue b/apps/labs/doc/speeddial/SemiCircleDoc.vue
deleted file mode 100644
index 8165512e0..000000000
--- a/apps/labs/doc/speeddial/SemiCircleDoc.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>type</i> is defined as <i>semi-circle</i>, items are displayed in a half-circle around the button.</p>
-    </DocSectionText>
-    <div class="card">
-        <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div style="position: relative; height: 500px">
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card" :style="{ position: 'relative', height: '500px' }">
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/TemplateDoc.vue b/apps/labs/doc/speeddial/TemplateDoc.vue
deleted file mode 100644
index ba29ae75e..000000000
--- a/apps/labs/doc/speeddial/TemplateDoc.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            SpeedDial offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. The button has its own <i>button</i> template, additional slot named <i>icon</i> is provided to embed
-            icon content for default button.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
-                <template #button="{ toggleCallback }">
-                    <Button outlined class="border" @click="toggleCallback">
-                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                                fill="var(--p-primary-color)"
-                            />
-                            <path
-                                d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                                fill="var(--p-text-color)"
-                            />
-                        </svg>
-                    </Button>
-                </template>
-                <template #item="{ item, toggleCallback }">
-                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
-                        <span :class="item.icon" />
-                        <span>
-                            {{ item.label }}
-                        </span>
-                    </div>
-                </template>
-            </SpeedDial>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
-    <template #button="{ toggleCallback }">
-        <Button outlined class="border" @click="toggleCallback">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="..." fill="var(--p-primary-color)" />
-                <path d="..." fill="var(--p-text-color)" />
-            </svg>
-        </Button>
-    </template>
-    <template #item="{ item, toggleCallback }">
-        <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
-            <span :class="item.icon" />
-            <span>
-                {{ item.label }}
-            </span>
-        </div>
-    </template>
-</SpeedDial>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
-                <template #button="{ toggleCallback }">
-                    <Button outlined class="border" @click="toggleCallback">
-                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="..." fill="var(--p-primary-color)" />
-                            <path d="..." fill="var(--p-text-color)" />
-                        </svg>
-                    </Button>
-                </template>
-                <template #item="{ item, toggleCallback }">
-                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
-                        <span :class="item.icon" />
-                        <span>
-                            {{ item.label }}
-                        </span>
-                    </div>
-                </template>
-            </SpeedDial>
-        </div>
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
-                <template #button="{ toggleCallback }">
-                    <Button outlined class="border" @click="toggleCallback">
-                        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="..." fill="var(--p-primary-color)" />
-                            <path d="..." fill="var(--p-text-color)" />
-                        </svg>
-                    </Button>
-                </template>
-                <template #item="{ item, toggleCallback }">
-                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
-                        <span :class="item.icon" />
-                        <span>
-                            {{ item.label }}
-                        </span>
-                    </div>
-                </template>
-            </SpeedDial>
-        </div>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/speeddial/TooltipDoc.vue b/apps/labs/doc/speeddial/TooltipDoc.vue
deleted file mode 100644
index 3e43b9b46..000000000
--- a/apps/labs/doc/speeddial/TooltipDoc.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items display a tooltip on hover when a standalone <PrimeVueNuxtLink to="/tooltip">Tooltip</PrimeVueNuxtLink> is present with a target that matches the items.</p>
-    </DocSectionText>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
-<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
-            <Toast />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/AccessibilityDoc.vue b/apps/labs/doc/splitbutton/AccessibilityDoc.vue
deleted file mode 100644
index 841f2cec1..000000000
--- a/apps/labs/doc/splitbutton/AccessibilityDoc.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            SplitButton component renders two native button elements, main button uses the label property to define <i>aria-label</i> by default which can be customized with <i>buttonProps</i>. Dropdown button requires an explicit definition to
-            describe it using <i>menuButtonProps</i> option and also includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
-        </p>
-
-        <p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the dropdown button.</p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Main Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the button.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the button.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Menu Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">enter</i>
-                                <i class="mb-1">space</i>
-                                <i class="mb-1">down arrow</i>
-                                <i>up arrow</i>
-                            </span>
-                        </td>
-                        <td>Opens the menu and moves focus to the first item.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Menu Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>Closes the popup, then moves focus to the target element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>In nested mode if option is closed, opens the option otherwise moves focus to the first child option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>In nested mode if option is open, closes the option otherwise moves focus to the parent option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/BasicDoc.vue b/apps/labs/doc/splitbutton/BasicDoc.vue
deleted file mode 100644
index a2bfd80e4..000000000
--- a/apps/labs/doc/splitbutton/BasicDoc.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SplitButton label="Save" @click="save" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" @click="save" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <SplitButton label="Save" @click="save" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-                { label: 'Upload', to: '/fileupload' }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <SplitButton label="Save" @click="save" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/DisabledDoc.vue b/apps/labs/doc/splitbutton/DisabledDoc.vue
deleted file mode 100644
index bb1f6ce63..000000000
--- a/apps/labs/doc/splitbutton/DisabledDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SplitButton label="Save" @click="save" :model="items" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" @click="save" :model="items" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <SplitButton label="Save" @click="save" :model="items" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <SplitButton label="Save" @click="save" :model="items" disabled />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/IconsDoc.vue b/apps/labs/doc/splitbutton/IconsDoc.vue
deleted file mode 100644
index 0287d8e25..000000000
--- a/apps/labs/doc/splitbutton/IconsDoc.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The buttons and menuitems have support to display icons.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-power-off',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-power-off',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-power-off',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/ImportDoc.vue b/apps/labs/doc/splitbutton/ImportDoc.vue
deleted file mode 100644
index 4eb903ebf..000000000
--- a/apps/labs/doc/splitbutton/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import SplitButton from 'primevue/splitbutton';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/NestedDoc.vue b/apps/labs/doc/splitbutton/NestedDoc.vue
deleted file mode 100644
index a6093104c..000000000
--- a/apps/labs/doc/splitbutton/NestedDoc.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multi-level menus are supported with a nested menu hierarchy.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SplitButton label="Save" @click="save" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            items: [
-                                {
-                                    label: 'Document',
-                                    icon: 'pi pi-file'
-                                },
-                                {
-                                    label: 'Image',
-                                    icon: 'pi pi-image'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Open',
-                            icon: 'pi pi-folder-open'
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-file-edit',
-                    items: [
-                        {
-                            label: 'Copy',
-                            icon: 'pi pi-copy'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times'
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Slack',
-                            icon: 'pi pi-slack'
-                        },
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" @click="save" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <SplitButton label="Save" @click="save" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            items: [
-                                {
-                                    label: 'Document',
-                                    icon: 'pi pi-file'
-                                },
-                                {
-                                    label: 'Image',
-                                    icon: 'pi pi-image'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Open',
-                            icon: 'pi pi-folder-open'
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-file-edit',
-                    items: [
-                        {
-                            label: 'Copy',
-                            icon: 'pi pi-copy'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times'
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Slack',
-                            icon: 'pi pi-slack'
-                        },
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp'
-                        }
-                    ]
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <SplitButton label="Save" @click="save" :model="items" />
-    </div>
-</template>
-
-<script setup>
-const items = [
-    {
-        label: 'File',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus',
-                items: [
-                    {
-                        label: 'Document',
-                        icon: 'pi pi-file'
-                    },
-                    {
-                        label: 'Image',
-                        icon: 'pi pi-image'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Open',
-                icon: 'pi pi-folder-open'
-            },
-            {
-                label: 'Print',
-                icon: 'pi pi-print'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-file-edit',
-        items: [
-            {
-                label: 'Copy',
-                icon: 'pi pi-copy'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-times'
-            }
-        ]
-    },
-    {
-        label: 'Search',
-        icon: 'pi pi-search'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Share',
-        icon: 'pi pi-share-alt',
-        items: [
-            {
-                label: 'Slack',
-                icon: 'pi pi-slack'
-            },
-            {
-                label: 'Whatsapp',
-                icon: 'pi pi-whatsapp'
-            }
-        ]
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/OutlinedDoc.vue b/apps/labs/doc/splitbutton/OutlinedDoc.vue
deleted file mode 100644
index 79651768c..000000000
--- a/apps/labs/doc/splitbutton/OutlinedDoc.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Outlined buttons display a border without a background initially.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        }
-    },
-    methods: {
-        toast() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/RaisedDoc.vue b/apps/labs/doc/splitbutton/RaisedDoc.vue
deleted file mode 100644
index 6e33f9865..000000000
--- a/apps/labs/doc/splitbutton/RaisedDoc.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Raised buttons display a shadow to indicate elevation.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/RaisedTextDoc.vue b/apps/labs/doc/splitbutton/RaisedTextDoc.vue
deleted file mode 100644
index c74f82479..000000000
--- a/apps/labs/doc/splitbutton/RaisedTextDoc.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Text buttons can be displayed as raised as well for elevation.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/RoundedDoc.vue b/apps/labs/doc/splitbutton/RoundedDoc.vue
deleted file mode 100644
index 5b039dcb7..000000000
--- a/apps/labs/doc/splitbutton/RoundedDoc.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Rounded buttons have a circular border radius.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/SeverityDoc.vue b/apps/labs/doc/splitbutton/SeverityDoc.vue
deleted file mode 100644
index bc69f68d7..000000000
--- a/apps/labs/doc/splitbutton/SeverityDoc.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>severity</i> property defines the variant of a button.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" :model="items" @click="save"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/SizesDoc.vue b/apps/labs/doc/splitbutton/SizesDoc.vue
deleted file mode 100644
index 4e4811fcc..000000000
--- a/apps/labs/doc/splitbutton/SizesDoc.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>SplitButton provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
-    </DocSectionText>
-    <div class="card flex items-center justify-center flex-wrap gap-4">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
-`,
-                options: `
-<template>
-    <div class="card flex items-center justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex items-center justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/TemplateDoc.vue b/apps/labs/doc/splitbutton/TemplateDoc.vue
deleted file mode 100644
index 673e1152b..000000000
--- a/apps/labs/doc/splitbutton/TemplateDoc.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content inside a button is defined as children.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <SplitButton :model="items" @click="save" severity="contrast">
-            <span class="flex items-center font-bold">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
-                <span>PrimeVue</span>
-            </span>
-        </SplitButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton :model="items" @click="save" severity="contrast">
-    <span class="flex items-center font-bold">
-        <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
-        <span>PrimeVue</span>
-    </span>
-</SplitButton>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <SplitButton :model="items" @click="save" severity="contrast">
-            <span class="flex items-center font-bold">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
-                <span>PrimeVue</span>
-            </span>
-        </SplitButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <SplitButton :model="items" @click="save" severity="contrast">
-            <span class="flex items-center font-bold">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
-                <span>PrimeVue</span>
-            </span>
-        </SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitbutton/TextDoc.vue b/apps/labs/doc/splitbutton/TextDoc.vue
deleted file mode 100644
index 7f9084033..000000000
--- a/apps/labs/doc/splitbutton/TextDoc.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Text buttons are displayed as textual elements.</p>
-    </DocSectionText>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save" :model="items" @click="save" text></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-4">
-        <Toast />
-        <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        command: () => {
-            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitter/AccessibilityDoc.vue b/apps/labs/doc/splitter/AccessibilityDoc.vue
deleted file mode 100644
index f5189a7f8..000000000
--- a/apps/labs/doc/splitter/AccessibilityDoc.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.</p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus through the splitter bar.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves a vertical splitter down.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves a vertical splitter up.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>Moves a horizontal splitter to the left.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>Moves a horizontal splitter to the right.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/splitter/HorizontalDoc.vue b/apps/labs/doc/splitter/HorizontalDoc.vue
deleted file mode 100644
index 4833c4a50..000000000
--- a/apps/labs/doc/splitter/HorizontalDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Splitter requires two SplitterPanel components as children which are displayed horizontally by default.</p>
-    </DocSectionText>
-    <div class="card">
-        <Splitter style="height: 300px" class="mb-8">
-            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Splitter style="height: 300px" class="mb-8">
-    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-</Splitter>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px" class="mb-8">
-            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px" class="mb-8">
-            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitter/ImportDoc.vue b/apps/labs/doc/splitter/ImportDoc.vue
deleted file mode 100644
index 785566b50..000000000
--- a/apps/labs/doc/splitter/ImportDoc.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Splitter from 'primevue/splitter';
-import SplitterPanel from 'primevue/splitterpanel';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitter/NestedDoc.vue b/apps/labs/doc/splitter/NestedDoc.vue
deleted file mode 100644
index 53bfa9e35..000000000
--- a/apps/labs/doc/splitter/NestedDoc.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Splitters can be combined to create advanced layouts.</p>
-    </DocSectionText>
-    <div class="card">
-        <Splitter style="height: 300px">
-            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel :size="80">
-                <Splitter layout="vertical">
-                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
-                    <SplitterPanel :size="85">
-                        <Splitter>
-                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
-                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
-                        </Splitter>
-                    </SplitterPanel>
-                </Splitter>
-            </SplitterPanel>
-        </Splitter>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Splitter style="height: 300px">
-    <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
-    <SplitterPanel :size="80">
-        <Splitter layout="vertical">
-            <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
-            <SplitterPanel :size="85">
-                <Splitter>
-                    <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
-                    <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
-                </Splitter>
-            </SplitterPanel>
-        </Splitter>
-    </SplitterPanel>
-</Splitter>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px">
-            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel :size="80">
-                <Splitter layout="vertical">
-                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
-                    <SplitterPanel :size="85">
-                        <Splitter>
-                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
-                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
-                        </Splitter>
-                    </SplitterPanel>
-                </Splitter>
-            </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px">
-            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel :size="80">
-                <Splitter layout="vertical">
-                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
-                    <SplitterPanel :size="85">
-                        <Splitter>
-                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
-                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
-                        </Splitter>
-                    </SplitterPanel>
-                </Splitter>
-            </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitter/SizeDoc.vue b/apps/labs/doc/splitter/SizeDoc.vue
deleted file mode 100644
index 9e4c1e51e..000000000
--- a/apps/labs/doc/splitter/SizeDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Initial dimension of a panel is percentage based and defined using the <i>size</i> property. In addition,<i>minSize</i> is provided to set a minimum value during a resize.</p>
-    </DocSectionText>
-    <div class="card">
-        <Splitter style="height: 300px">
-            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Splitter style="height: 300px">
-    <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
-    <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
-</Splitter>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px">
-            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px">
-            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/splitter/VerticalDoc.vue b/apps/labs/doc/splitter/VerticalDoc.vue
deleted file mode 100644
index 874deaeb2..000000000
--- a/apps/labs/doc/splitter/VerticalDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Panels are displayed as stacked by setting the <i>layout</i> to <i>vertical</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <Splitter style="height: 300px" layout="vertical">
-            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Splitter style="height: 300px" layout="vertical">
-    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-</Splitter>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px" layout="vertical">
-            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px" layout="vertical">
-            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/stepper/AccessibilityDoc.vue b/apps/labs/doc/stepper/AccessibilityDoc.vue
deleted file mode 100644
index 7b844f424..000000000
--- a/apps/labs/doc/stepper/AccessibilityDoc.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Stepper container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Stepper. Each stepper header has a
-            <i>tab</i> role and <i>aria-controls</i> to refer to the corresponding stepper content element. The content element of each stepper has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of the header and
-            <i>aria-labelledby</i> reference to the header as the accessible name.
-        </p>
-
-        <h3>Tab Header Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through the header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused stepper header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused stepper header.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/stepper/HorizontalDoc.vue b/apps/labs/doc/stepper/HorizontalDoc.vue
deleted file mode 100644
index 0897d01ac..000000000
--- a/apps/labs/doc/stepper/HorizontalDoc.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Stepper consists of a combination of <i>StepList</i>, <i>Step</i>, <i>StepPanels</i> and <i>StepPanel</i> components. The <i>value</i> property is essential for associating Step and StepPanel with each other.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Stepper value="1" class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Header I</Step>
-                <Step value="2">Header II</Step>
-                <Step value="3">Header III</Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" value="1">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                    <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="2">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="3">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                    <div class="pt-6">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Stepper value="1">
-    <StepList>
-        <Step value="1">Header I</Step>
-        <Step value="2">Header II</Step>
-        <Step value="3">Header III</Step>
-    </StepList>
-    <StepPanels>
-        <StepPanel v-slot="{ activateCallback }" value="1">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-            </div>
-            <div class="flex pt-6 justify-end">
-                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
-            </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" value="2">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-            </div>
-            <div class="flex pt-6 justify-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
-                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
-            </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" value="3">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-            </div>
-            <div class="pt-6">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
-            </div>
-        </StepPanel>
-    </StepPanels>
-</Stepper>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Stepper value="1" class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Header I</Step>
-                <Step value="2">Header II</Step>
-                <Step value="3">Header III</Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" value="1">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                   <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="2">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="3">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                    <div class="pt-6">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Stepper value="1" class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Header I</Step>
-                <Step value="2">Header II</Step>
-                <Step value="3">Header III</Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" value="1">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                    <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="2">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="3">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                    <div class="pt-6">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/stepper/ImportDoc.vue b/apps/labs/doc/stepper/ImportDoc.vue
deleted file mode 100644
index adbe2f056..000000000
--- a/apps/labs/doc/stepper/ImportDoc.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Stepper from 'primevue/stepper';
-import StepList from 'primevue/steplist';
-import StepPanels from 'primevue/steppanels';
-import StepItem from 'primevue/stepitem';
-import Step from 'primevue/step';
-import StepPanel from 'primevue/steppanel';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/stepper/LinearDoc.vue b/apps/labs/doc/stepper/LinearDoc.vue
deleted file mode 100644
index d3ef33431..000000000
--- a/apps/labs/doc/stepper/LinearDoc.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>linear</i> property is present, current step must be completed in order to move to the next step.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Stepper value="1" linear class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Header I</Step>
-                <Step value="2">Header II</Step>
-                <Step value="3">Header III</Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" value="1">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                    <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="2">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="3">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                    <div class="pt-6">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Stepper value="1" linear>
-    <StepList>
-        <Step value="1">Header I</Step>
-        <Step value="2">Header II</Step>
-        <Step value="3">Header III</Step>
-    </StepList>
-    <StepPanels>
-        <StepPanel v-slot="{ activateCallback }" value="1">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-            </div>
-            <div class="flex pt-6 justify-end">
-                <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
-            </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" value="2">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-            </div>
-            <div class="flex pt-6 justify-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
-                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
-            </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" value="3">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-            </div>
-            <div class="pt-6">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
-            </div>
-        </StepPanel>
-    </StepPanels>
-</Stepper>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Stepper value="1" linear class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Header I</Step>
-                <Step value="2">Header II</Step>
-                <Step value="3">Header III</Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" value="1">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                    <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="2">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="3">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                    <div class="pt-6">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Stepper value="1" linear class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Header I</Step>
-                <Step value="2">Header II</Step>
-                <Step value="3">Header III</Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" value="1">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                    <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="2">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" value="3">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                    <div class="pt-6">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/stepper/StepsOnlyDoc.vue b/apps/labs/doc/stepper/StepsOnlyDoc.vue
deleted file mode 100644
index 4357a0744..000000000
--- a/apps/labs/doc/stepper/StepsOnlyDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Use Stepper with a <i>StepList</i> only for custom requirements where a progress indicator is needed.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Stepper value="1" class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Design</Step>
-                <Step value="2">Development</Step>
-                <Step value="3">QA</Step>
-            </StepList>
-        </Stepper>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Stepper value="1" class="basis-[50rem]">
-    <StepList>
-        <Step value="1">Design</Step>
-        <Step value="2">Development</Step>
-        <Step value="3">QA</Step>
-    </StepList>
-</Stepper>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Stepper value="1" class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Design</Step>
-                <Step value="2">Development</Step>
-                <Step value="3">QA</Step>
-            </StepList>
-        </Stepper>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Stepper value="1" class="basis-[50rem]">
-            <StepList>
-                <Step value="1">Design</Step>
-                <Step value="2">Development</Step>
-                <Step value="3">QA</Step>
-            </StepList>
-        </Stepper>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/stepper/TemplateDoc.vue b/apps/labs/doc/stepper/TemplateDoc.vue
deleted file mode 100644
index 8a2749b63..000000000
--- a/apps/labs/doc/stepper/TemplateDoc.vue
+++ /dev/null
@@ -1,491 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Custom content for a step is defined with the default slot. The optional <i>as</i> property controls the default container element of a step, for example setting it to a <i>button</i> renders a button for the header instead of a div. The
-            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own step.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Stepper v-model:value="activeStep" class="basis-[40rem]">
-            <StepList>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
-                    <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-user" />
-                            </span>
-                        </button>
-                        <Divider />
-                    </div>
-                </Step>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
-                    <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-star" />
-                            </span>
-                        </button>
-                        <Divider />
-                    </div>
-                </Step>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
-                    <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-id-card" />
-                            </span>
-                        </button>
-                    </div>
-                </Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" :value="1">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
-                        <div class="field">
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
-                        </div>
-                        <div class="field">
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
-                        </div>
-                        <div class="field">
-                            <Password v-model="password" placeholder="Password" fluid />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" :value="2">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
-                        <div class="flex flex-wrap justify-center gap-4">
-                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
-                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
-                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
-                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
-                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
-                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
-                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
-                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" :value="3">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
-                        <div class="text-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-start">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            activeStep: 1,
-            name: null,
-            email: null,
-            password: null,
-            option1: false,
-            option2: false,
-            option3: false,
-            option4: false,
-            option5: false,
-            option6: false,
-            option7: false,
-            option8: false,
-            option9: false,
-            option10: false,
-            code: {
-                basic: `
-<Stepper v-model:value="activeStep" class="basis-[40rem]">
-    <StepList>
-        <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
-            <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
-                <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                    <span
-                        :class="[
-                            'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                            { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                        ]"
-                    >
-                        <i class="pi pi-user" />
-                    </span>
-                </button>
-                <Divider />
-            </div>
-        </Step>
-        <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
-            <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
-                <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                    <span
-                        :class="[
-                            'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                            { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                        ]"
-                    >
-                        <i class="pi pi-star" />
-                    </span>
-                </button>
-                <Divider />
-            </div>
-        </Step>
-        <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
-            <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
-                <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                    <span
-                        :class="[
-                            'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                            { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                        ]"
-                    >
-                        <i class="pi pi-id-card" />
-                    </span>
-                </button>
-            </div>
-        </Step>
-    </StepList>
-    <StepPanels>
-        <StepPanel v-slot="{ activateCallback }" :value="1">
-            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
-                <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
-                <div class="field">
-                    <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
-                </div>
-                <div class="field">
-                    <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
-                </div>
-                <div class="field">
-                    <Password v-model="password" placeholder="Password" fluid />
-                </div>
-            </div>
-            <div class="flex pt-6 justify-end">
-                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
-            </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" :value="2">
-            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
-                <div class="flex flex-wrap justify-center gap-4">
-                    <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
-                    <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
-                    <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
-                    <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
-                    <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
-                    <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
-                    <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
-                    <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
-                    <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
-                    <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
-                </div>
-            </div>
-            <div class="flex pt-6 justify-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
-                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
-            </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" :value="3">
-            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
-                <div class="text-center">
-                    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
-                </div>
-            </div>
-            <div class="flex pt-6 justify-start">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
-            </div>
-        </StepPanel>
-    </StepPanels>
-</Stepper>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Stepper v-model:value="activeStep" class="basis-[40rem]">
-            <StepList>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
-                    <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-user" />
-                            </span>
-                        </button>
-                        <Divider />
-                    </div>
-                </Step>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
-                    <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-star" />
-                            </span>
-                        </button>
-                        <Divider />
-                    </div>
-                </Step>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
-                    <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-id-card" />
-                            </span>
-                        </button>
-                    </div>
-                </Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" :value="1">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
-                        <div class="field">
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
-                        </div>
-                        <div class="field">
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
-                        </div>
-                        <div class="field">
-                            <Password v-model="password" placeholder="Password" fluid />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" :value="2">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
-                        <div class="flex flex-wrap justify-center gap-4">
-                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
-                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
-                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
-                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
-                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
-                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
-                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
-                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" :value="3">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
-                        <div class="text-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-start">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            activeStep: 1,
-            name: null,
-            email: null,
-            password: null,
-            option1: false,
-            option2: false,
-            option3: false,
-            option4: false,
-            option5: false,
-            option6: false,
-            option7: false,
-            option8: false,
-            option9: false,
-            option10: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Stepper v-model:value="activeStep" class="basis-[40rem]">
-            <StepList>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
-                    <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-user" />
-                            </span>
-                        </button>
-                        <Divider />
-                    </div>
-                </Step>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
-                    <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-star" />
-                            </span>
-                        </button>
-                        <Divider />
-                    </div>
-                </Step>
-                <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
-                    <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
-                        <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
-                            <span
-                                :class="[
-                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
-                                    { 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
-                                ]"
-                            >
-                                <i class="pi pi-id-card" />
-                            </span>
-                        </button>
-                    </div>
-                </Step>
-            </StepList>
-            <StepPanels>
-                <StepPanel v-slot="{ activateCallback }" :value="1">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
-                        <div class="field">
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
-                        </div>
-                        <div class="field">
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
-                        </div>
-                        <div class="field">
-                            <Password v-model="password" placeholder="Password" fluid />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-end">
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" :value="2">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
-                        <div class="flex flex-wrap justify-center gap-4">
-                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
-                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
-                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
-                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
-                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
-                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
-                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
-                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
-                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
-                    </div>
-                </StepPanel>
-                <StepPanel v-slot="{ activateCallback }" :value="3">
-                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
-                        <div class="text-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
-                        </div>
-                    </div>
-                    <div class="flex pt-6 justify-start">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
-                    </div>
-                </StepPanel>
-            </StepPanels>
-        </Stepper>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const activeStep = ref(1);
-const completed = ref(false);
-const products = ref();
-const name = ref();
-const email = ref();
-const password = ref();
-const option1 = ref(false);
-const option2 = ref(false);
-const option3 = ref(false);
-const option4 = ref(false);
-const option5 = ref(false);
-const option6 = ref(false);
-const option7 = ref(false);
-const option8 = ref(false);
-const option9 = ref(false);
-const option10 = ref(false);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/stepper/VerticalDoc.vue b/apps/labs/doc/stepper/VerticalDoc.vue
deleted file mode 100644
index fff08e9ee..000000000
--- a/apps/labs/doc/stepper/VerticalDoc.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Horizontal layout requires <i>StepItem</i> as a wrapper of <i>Step</i> and <i>StepPanel</i> components.</p>
-    </DocSectionText>
-    <div class="card">
-        <Stepper value="1">
-            <StepItem value="1">
-                <Step>Header I</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                    <div class="py-6">
-                        <Button label="Next" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-            <StepItem value="2">
-                <Step>Header II</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex py-6 gap-2">
-                        <Button label="Back" severity="secondary" @click="activateCallback('1')" />
-                        <Button label="Next" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-            <StepItem value="3">
-                <Step>Header III</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                    <div class="py-6">
-                        <Button label="Back" severity="secondary" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-        </Stepper>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Stepper value="1">
-    <StepItem value="1">
-        <Step>Header I</Step>
-        <StepPanel v-slot="{ activateCallback }">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-            </div>
-             <div class="py-6">
-                <Button label="Next" @click="activateCallback('2')" />
-            </div>
-        </StepPanel>
-    </StepItem>
-    <StepItem value="2">
-        <Step>Header II</Step>
-        <StepPanel v-slot="{ activateCallback }">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-            </div>
-            <div class="flex py-6 gap-2">
-                <Button label="Back" severity="secondary" @click="activateCallback('1')" />
-                <Button label="Next" @click="activateCallback('3')" />
-            </div>
-        </StepPanel>
-    </StepItem>
-    <StepItem value="3">
-        <Step>Header III</Step>
-        <StepPanel v-slot="{ activateCallback }">
-            <div class="flex flex-col h-48">
-                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-            </div>
-             <div class="py-6">
-                <Button label="Back" severity="secondary" @click="activateCallback('2')" />
-            </div>
-        </StepPanel>
-    </StepItem>
-</Stepper>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Stepper value="1">
-            <StepItem value="1">
-                <Step>Header I</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                     <div class="py-6">
-                        <Button label="Next" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-            <StepItem value="2">
-                <Step>Header II</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex py-6 gap-2">
-                        <Button label="Back" severity="secondary" @click="activateCallback('1')" />
-                        <Button label="Next" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-            <StepItem value="3">
-                <Step>Header III</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                     <div class="py-6">
-                        <Button label="Back" severity="secondary" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-        </Stepper>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Stepper value="1">
-            <StepItem value="1">
-                <Step>Header I</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
-                    </div>
-                    <div class="py-6">
-                        <Button label="Next" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-            <StepItem value="2">
-                <Step>Header II</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
-                    </div>
-                    <div class="flex py-6 gap-2">
-                        <Button label="Back" severity="secondary" @click="activateCallback('1')" />
-                        <Button label="Next" @click="activateCallback('3')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-            <StepItem value="3">
-                <Step>Header III</Step>
-                <StepPanel v-slot="{ activateCallback }">
-                    <div class="flex flex-col h-48">
-                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
-                    </div>
-                    <div class="py-6">
-                        <Button label="Back" severity="secondary" @click="activateCallback('2')" />
-                    </div>
-                </StepPanel>
-            </StepItem>
-        </Stepper>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tabs/AccessibilityDoc.vue b/apps/labs/doc/tabs/AccessibilityDoc.vue
deleted file mode 100644
index a6e8cee4b..000000000
--- a/apps/labs/doc/tabs/AccessibilityDoc.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            The tabs container in TabList is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Tabs. Each Tab has a
-            <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding TabPanel. TabPanel has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of Tab and
-            <i>aria-labelledby</i> reference to Tab as the accessible name.
-        </p>
-
-        <h3>Tab Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through the header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused tab header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused tab header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the last header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageUp</i></td>
-                        <td>Moves scroll position to first header.</td>
-                    </tr>
-                    <tr>
-                        <td><i>pageDown</i></td>
-                        <td>Moves scroll position to last header.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/tabs/BasicDoc.vue b/apps/labs/doc/tabs/BasicDoc.vue
deleted file mode 100644
index 23e6e0eb8..000000000
--- a/apps/labs/doc/tabs/BasicDoc.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tabs is defined using <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>TabPanel</i> components. Tab and TabPanel components are associated with their <i>value</i> properties</p>
-    </DocSectionText>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tabs value="0">
-    <TabList>
-        <Tab value="0">Header I</Tab>
-        <Tab value="1">Header II</Tab>
-        <Tab value="2">Header III</Tab>
-    </TabList>
-    <TabPanels>
-        <TabPanel value="0">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </TabPanel>
-        <TabPanel value="1">
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </TabPanel>
-        <TabPanel value="2">
-            <p class="m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </TabPanel>
-    </TabPanels>
-</Tabs>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-    `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tabs/ControlledDoc.vue b/apps/labs/doc/tabs/ControlledDoc.vue
deleted file mode 100644
index 496cd0832..000000000
--- a/apps/labs/doc/tabs/ControlledDoc.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tabs can be controlled programmatically using <i>value</i> property as a model.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
-            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
-            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
-        </div>
-
-        <Tabs v-model:value="value">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '0',
-            code: {
-                basic: `
-<div class="flex mb-2 gap-2 justify-end">
-    <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
-    <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
-    <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
-</div>
-
-<Tabs v-model:value="value">
-    <TabList>
-        <Tab value="0">Header I</Tab>
-        <Tab value="1">Header II</Tab>
-        <Tab value="2">Header III</Tab>
-    </TabList>
-    <TabPanels>
-        <TabPanel value="0">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </TabPanel>
-        <TabPanel value="1">
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </TabPanel>
-        <TabPanel value="2">
-            <p class="m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </TabPanel>
-    </TabPanels>
-</Tabs>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
-            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
-            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
-        </div>
-
-        <Tabs v-model:value="value">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '0'
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
-            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
-            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
-        </div>
-
-        <Tabs v-model:value="value">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('0');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tabs/DisabledDoc.vue b/apps/labs/doc/tabs/DisabledDoc.vue
deleted file mode 100644
index 4fa332251..000000000
--- a/apps/labs/doc/tabs/DisabledDoc.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enabling <i>disabled</i> property of a Tab prevents user interaction.</p>
-    </DocSectionText>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-                <Tab disabled>Header IV</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tabs value="0">
-    <TabList>
-        <Tab value="0">Header I</Tab>
-        <Tab value="1">Header II</Tab>
-        <Tab value="2">Header III</Tab>
-        <Tab disabled>Header IV</Tab>
-    </TabList>
-    <TabPanels>
-        <TabPanel value="0">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </TabPanel>
-        <TabPanel value="1">
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-        </TabPanel>
-        <TabPanel value="2">
-            <p class="m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </TabPanel>
-    </TabPanels>
-</Tabs>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-                <Tab disabled>Header IV</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0">Header I</Tab>
-                <Tab value="1">Header II</Tab>
-                <Tab value="2">Header III</Tab>
-                <Tab disabled>Header IV</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0">
-                    <p class="m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </TabPanel>
-                <TabPanel value="1">
-                    <p class="m-0">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                </TabPanel>
-                <TabPanel value="2">
-                    <p class="m-0">
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tabs/DynamicDoc.vue b/apps/labs/doc/tabs/DynamicDoc.vue
deleted file mode 100644
index b8bd886f0..000000000
--- a/apps/labs/doc/tabs/DynamicDoc.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive on Tab and TabPanel.</p>
-    </DocSectionText>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
-                    <p class="m-0">{{ tab.content }}</p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: [
-                { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
-                { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
-                { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
-            ],
-            code: {
-                basic: `
-<Tabs value="0">
-    <TabList>
-        <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
-    </TabList>
-    <TabPanels>
-        <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
-            <p class="m-0">{{ tab.content }}</p>
-        </TabPanel>
-    </TabPanels>
-</Tabs>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
-                    <p class="m-0">{{ tab.content }}</p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: [
-                { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
-                { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
-                { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
-                    <p class="m-0">{{ tab.content }}</p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const tabs = ref([
-    { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
-    { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
-    { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tabs/ImportDoc.vue b/apps/labs/doc/tabs/ImportDoc.vue
deleted file mode 100644
index 414f593b4..000000000
--- a/apps/labs/doc/tabs/ImportDoc.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Tabs from 'primevue/tabs';
-import TabList from 'primevue/tablist';
-import Tab from 'primevue/tab';
-import TabPanels from 'primevue/tabpanels';
-import TabPanel from 'primevue/tabpanel';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tabs/ScrollableDoc.vue b/apps/labs/doc/tabs/ScrollableDoc.vue
deleted file mode 100644
index 56697026c..000000000
--- a/apps/labs/doc/tabs/ScrollableDoc.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Adding <i>scrollable</i> property displays navigational buttons at each side to scroll between tabs.</p>
-    </DocSectionText>
-    <div class="card">
-        <Tabs value="0" scrollable>
-            <TabList>
-                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
-                    {{ tab.title }}
-                </Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
-                    <p class="m-0">{{ tab.content }}</p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content`, value: `${i}` })),
-            code: {
-                basic: `
-<Tabs value="0" scrollable>
-    <TabList>
-        <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
-            {{ tab.title }}
-        </Tab>
-    </TabList>
-    <TabPanels>
-        <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
-            <p class="m-0">{{ tab.content }}</p>
-        </TabPanel>
-    </TabPanels>
-</Tabs>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Tabs value="0" scrollable>
-            <TabList>
-                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
-                    {{ tab.title }}
-                </Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
-                    <p class="m-0">{{ tab.content }}</p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\`, value: \`\${i}\` }))
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Tabs value="0" scrollable>
-            <TabList>
-                <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
-                    {{ tab.title }}
-                </Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
-                    <p class="m-0">{{ tab.content }}</p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\`, value: \`\${i}\` })));
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tabs/TabMenuDoc.vue b/apps/labs/doc/tabs/TabMenuDoc.vue
deleted file mode 100644
index 306ead932..000000000
--- a/apps/labs/doc/tabs/TabMenuDoc.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like
-            <a href="https://router.vuejs.org/guide/essentials/nested-routes#Nested-Named-Routes" target="_blank" rel="noopener noreferrer">router-view</a>. For the purpose of this demo, <i>router-view</i> is not included.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <Tabs value="/dashboard">
-            <TabList>
-                <Tab v-for="tab in items" :key="tab.label" :value="tab.route" as="div" class="flex items-center gap-2">
-                    <i :class="tab.icon" />
-                    <span>{{ tab.label }}</span>
-                </Tab>
-            </TabList>
-        </Tabs>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
-                { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
-                { route: '/products', label: 'Products', icon: 'pi pi-list' },
-                { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
-            ],
-            code: {
-                basic: `
-<Tabs value="/dashboard">
-    <TabList>
-        <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
-            <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
-                <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
-                    <i :class="tab.icon" />
-                    <span>{{ tab.label }}</span>
-                </a>
-            </router-link>
-        </Tab>
-    </TabList>
-</Tabs>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Tabs value="/dashboard">
-            <TabList>
-                <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
-                    <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
-                        <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
-                            <i :class="tab.icon" />
-                            <span>{{ tab.label }}</span>
-                        </a>
-                    </router-link>
-                </Tab>
-            </TabList>
-        </Tabs>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
-                { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
-                { route: '/products', label: 'Products', icon: 'pi pi-list' },
-                { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Tabs value="/dashboard">
-            <TabList>
-                <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
-                    <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
-                        <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
-                            <i :class="tab.icon" />
-                            <span>{{ tab.label }}</span>
-                        </a>
-                    </router-link>
-                </Tab>
-            </TabList>
-        </Tabs>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
-    { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
-    { route: '/products', label: 'Products', icon: 'pi pi-list' },
-    { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tabs/TemplateDoc.vue b/apps/labs/doc/tabs/TemplateDoc.vue
deleted file mode 100644
index 346ae952f..000000000
--- a/apps/labs/doc/tabs/TemplateDoc.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Custom content for a tab is defined with the default slot. The optional <i>as</i> property controls the default container element of a tab, for example setting it to a <i>div</i> renders a div for the header instead of a button. The
-            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own tab header.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0" as="div" class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                </Tab>
-                <Tab value="1" as="div" class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
-                </Tab>
-                <Tab v-slot="slotProps" value="2" asChild>
-                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
-                        <Badge value="2" />
-                    </div>
-                </Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0" as="p" class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </TabPanel>
-                <TabPanel value="1" as="p" class="m-0">
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </TabPanel>
-                <TabPanel v-slot="slotProps" value="2" asChild>
-                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
-                        <p class="m-0">
-                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
-                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                        </p>
-                    </div>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tabs value="0">
-    <TabList>
-        <Tab value="0" as="div" class="flex items-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-        </Tab>
-        <Tab value="1" as="div" class="flex items-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-            <span class="font-bold whitespace-nowrap">Onyama Limba</span>
-        </Tab>
-        <Tab v-slot="slotProps" value="2" asChild>
-            <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
-                <Badge value="2" />
-            </div>
-        </Tab>
-    </TabList>
-    <TabPanels>
-        <TabPanel value="0" as="p" class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </TabPanel>
-        <TabPanel value="1" as="p" class="m-0">
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </TabPanel>
-        <TabPanel v-slot="slotProps" value="2" asChild>
-            <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
-                <p class="m-0">
-                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
-                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                </p>
-            </div>
-        </TabPanel>
-    </TabPanels>
-</Tabs>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0" as="div" class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                </Tab>
-                <Tab value="1" as="div" class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
-                </Tab>
-                <Tab v-slot="slotProps" value="2" asChild>
-                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
-                        <Badge value="2" />
-                    </div>
-                </Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0" as="p" class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </TabPanel>
-                <TabPanel value="1" as="p" class="m-0">
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </TabPanel>
-                <TabPanel v-slot="slotProps" value="2" asChild>
-                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
-                        <p class="m-0">
-                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
-                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                        </p>
-                    </div>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Tabs value="0">
-            <TabList>
-                <Tab value="0" as="div" class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
-                </Tab>
-                <Tab value="1" as="div" class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
-                </Tab>
-                <Tab v-slot="slotProps" value="2" asChild>
-                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
-                        <Badge value="2" />
-                    </div>
-                </Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="0" as="p" class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </TabPanel>
-                <TabPanel value="1" as="p" class="m-0">
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </TabPanel>
-                <TabPanel v-slot="slotProps" value="2" asChild>
-                    <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
-                        <p class="m-0">
-                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
-                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                        </p>
-                    </div>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tag/AccessibilityDoc.vue b/apps/labs/doc/tag/AccessibilityDoc.vue
deleted file mode 100644
index d04f9df90..000000000
--- a/apps/labs/doc/tag/AccessibilityDoc.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic,
-            <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/tag/BasicDoc.vue b/apps/labs/doc/tag/BasicDoc.vue
deleted file mode 100644
index 81305d50b..000000000
--- a/apps/labs/doc/tag/BasicDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Label of the tag is defined with the <i>value</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Tag value="New"></Tag>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tag value="New"></Tag>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Tag value="New"></Tag>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Tag value="New"></Tag>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tag/IconDoc.vue b/apps/labs/doc/tag/IconDoc.vue
deleted file mode 100644
index 4a7fa14f3..000000000
--- a/apps/labs/doc/tag/IconDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A font icon next to the value can be displayed with the <i>icon</i> property.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Tag icon="pi pi-user" value="Primary"></Tag>
-        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
-        <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
-        <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-        <Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
-        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
-        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tag icon="pi pi-user" value="Primary"></Tag>
-<Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
-<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
-<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-<Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
-<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
-<Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Tag icon="pi pi-user" value="Primary"></Tag>
-        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
-        <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
-        <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-        <Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
-        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
-        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Tag icon="pi pi-user" value="Primary"></Tag>
-        <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
-        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
-        <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-        <Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
-        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
-        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tag/ImportDoc.vue b/apps/labs/doc/tag/ImportDoc.vue
deleted file mode 100644
index 0c02a8505..000000000
--- a/apps/labs/doc/tag/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Tag from 'primevue/tag';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tag/PillDoc.vue b/apps/labs/doc/tag/PillDoc.vue
deleted file mode 100644
index ea8e67f49..000000000
--- a/apps/labs/doc/tag/PillDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enabling <i>rounded</i>, displays a tag as a pill.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Tag value="Primary" rounded></Tag>
-        <Tag severity="secondary" value="Secondary" rounded></Tag>
-        <Tag severity="success" value="Success" rounded></Tag>
-        <Tag severity="info" value="Info" rounded></Tag>
-        <Tag severity="warn" value="Warn" rounded></Tag>
-        <Tag severity="danger" value="Danger" rounded></Tag>
-        <Tag severity="contrast" value="Contrast" rounded></Tag>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tag value="Primary" rounded></Tag>
-<Tag severity="secondary" value="Secondary" rounded></Tag>
-<Tag severity="success" value="Success" rounded></Tag>
-<Tag severity="info" value="Info" rounded></Tag>
-<Tag severity="warn" value="Warn" rounded></Tag>
-<Tag severity="danger" value="Danger" rounded></Tag>
-<Tag severity="contrast" value="Contrast" rounded></Tag>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Tag value="Primary" rounded></Tag>
-        <Tag severity="secondary" value="Secondary" rounded></Tag>
-        <Tag severity="success" value="Success" rounded></Tag>
-        <Tag severity="info" value="Info" rounded></Tag>
-        <Tag severity="warn" value="Warn" rounded></Tag>
-        <Tag severity="danger" value="Danger" rounded></Tag>
-        <Tag severity="contrast" value="Contrast" rounded></Tag>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Tag value="Primary" rounded></Tag>
-        <Tag severity="success" value="Success" rounded></Tag>
-        <Tag severity="secondary" value="Secondary" rounded></Tag>
-        <Tag severity="info" value="Info" rounded></Tag>
-        <Tag severity="warn" value="Warn" rounded></Tag>
-        <Tag severity="danger" value="Danger" rounded></Tag>
-        <Tag severity="contrast" value="Contrast" rounded></Tag>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tag/SeverityDoc.vue b/apps/labs/doc/tag/SeverityDoc.vue
deleted file mode 100644
index 8650d4cdf..000000000
--- a/apps/labs/doc/tag/SeverityDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Severity defines the variant of a tag.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Tag value="Primary"></Tag>
-        <Tag severity="secondary" value="Secondary"></Tag>
-        <Tag severity="success" value="Success"></Tag>
-        <Tag severity="info" value="Info"></Tag>
-        <Tag severity="warn" value="Warn"></Tag>
-        <Tag severity="danger" value="Danger"></Tag>
-        <Tag severity="contrast" value="Contrast"></Tag>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tag value="Primary"></Tag>
-<Tag severity="secondary" value="Secondary"></Tag>
-<Tag severity="success" value="Success"></Tag>
-<Tag severity="info" value="Info"></Tag>
-<Tag severity="warn" value="Warn"></Tag>
-<Tag severity="danger" value="Danger"></Tag>
-<Tag severity="contrast" value="Contrast"></Tag>
-`,
-                options: `
-<template>
-    <div class="flex flex-wrap justify-center gap-2">
-        <Tag value="Primary"></Tag>
-        <Tag severity="secondary" value="Secondary"></Tag>
-        <Tag severity="success" value="Success"></Tag>
-        <Tag severity="info" value="Info"></Tag>
-        <Tag severity="warn" value="Warn"></Tag>
-        <Tag severity="danger" value="Danger"></Tag>
-        <Tag severity="contrast" value="Contrast"></Tag>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="flex flex-wrap justify-center gap-2">
-        <Tag value="Primary"></Tag>
-        <Tag severity="secondary" value="Secondary"></Tag>
-        <Tag severity="success" value="Success"></Tag>
-        <Tag severity="info" value="Info"></Tag>
-        <Tag severity="warn" value="Warn"></Tag>
-        <Tag severity="danger" value="Danger"></Tag>
-        <Tag severity="contrast" value="Contrast"></Tag>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tag/TemplateDoc.vue b/apps/labs/doc/tag/TemplateDoc.vue
deleted file mode 100644
index ebaf00656..000000000
--- a/apps/labs/doc/tag/TemplateDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Children of the component are passed as the content for templating.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
-            <div class="flex items-center gap-2 px-1">
-                <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-                <span class="text-base">Italy</span>
-            </div>
-        </Tag>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
-    <div class="flex items-center gap-2 px-1">
-        <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-        <span class="text-base">Italy</span>
-    </div>
-</Tag>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
-            <div class="flex items-center gap-2 px-1">
-                <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-                <span class="text-base">Italy</span>
-            </div>
-        </Tag>
-    </div>    
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
-            <div class="flex items-center gap-2 px-1">
-                <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-                <span class="text-base">Italy</span>
-            </div>
-        </Tag>
-    </div>    
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/terminal/AccessibilityDoc.vue b/apps/labs/doc/terminal/AccessibilityDoc.vue
deleted file mode 100644
index 861b87cdd..000000000
--- a/apps/labs/doc/terminal/AccessibilityDoc.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Terminal component has an input element that can be described with <i>aria-label</i> or <i>aria-labelledby</i> props. The element that lists the previous commands has <i>aria-live</i> so that changes are received by the screen reader.</p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves focus through the input element.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Executes the command when focus in on the input element.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/terminal/BasicDoc.vue b/apps/labs/doc/terminal/BasicDoc.vue
deleted file mode 100644
index da4f5ad66..000000000
--- a/apps/labs/doc/terminal/BasicDoc.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Commands are processed using an EventBus implementation called <i>TerminalService</i>. Import this service into your component and subscribe to the <i>command</i> event to process the commands by sending replies with the
-            <i>response</i> event.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
-        <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" aria-label="PrimeVue Terminal Service" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-import TerminalService from 'primevue/terminalservice';
-
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Terminal
-    welcomeMessage="Welcome to PrimeVue"
-    prompt="primevue $"
-    aria-label="PrimeVue Terminal Service"
-/>
-`,
-                options: `
-<template>
-    <div>
-        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-        <Terminal
-            welcomeMessage="Welcome to PrimeVue"
-            prompt="primevue $"
-            aria-label="PrimeVue Terminal Service"
-        />
-    </div>
-</template>
-
-<script>
-import TerminalService from "primevue/terminalservice";
-
-export default {
-    methods: {
-        commandHandler(text) {
-            let response;
-            let argsIndex = text.indexOf(' ');
-            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-            switch(command) {
-                case "date":
-                    response = 'Today is ' + new Date().toDateString();
-                    break;
-
-                case "greet":
-                    response = 'Hola ' + text.substring(argsIndex + 1);
-                    break;
-
-                case "random":
-                    response = Math.floor(Math.random() * 100);
-                    break;
-
-                default:
-                    response = "Unknown command: " + command;
-            }
-            
-            TerminalService.emit('response', response);
-        }
-    },
-    mounted() {
-        TerminalService.on('command', this.commandHandler);
-    },
-    beforeUnmount() {
-        TerminalService.off('command', this.commandHandler);
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div>
-        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-        <Terminal
-            welcomeMessage="Welcome to PrimeVue"
-            prompt="primevue $"
-            aria-label="PrimeVue Terminal Service"
-        />
-    </div>
-</template>
-
-<script setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import TerminalService from "primevue/terminalservice";
-
-onMounted(() => {
-    TerminalService.on('command', commandHandler);
-})
-
-onBeforeUnmount(() => {
-    TerminalService.off('command', commandHandler);
-})
-
-const commandHandler = (text) => {
-    let response;
-    let argsIndex = text.indexOf(' ');
-    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-    switch(command) {
-        case "date":
-            response = 'Today is ' + new Date().toDateString();
-            break;
-
-        case "greet":
-            response = 'Hola ' + text.substring(argsIndex + 1);
-            break;
-
-        case "random":
-            response = Math.floor(Math.random() * 100);
-            break;
-
-        default:
-            response = "Unknown command: " + command;
-    }
-    
-    TerminalService.emit('response', response);
-}
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        TerminalService.on('command', this.commandHandler);
-    },
-    beforeUnmount() {
-        TerminalService.off('command', this.commandHandler);
-    },
-    methods: {
-        commandHandler(text) {
-            let response;
-            let argsIndex = text.indexOf(' ');
-            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-            switch (command) {
-                case 'date':
-                    response = 'Today is ' + new Date().toDateString();
-                    break;
-
-                case 'greet':
-                    response = 'Hola ' + text.substring(argsIndex + 1);
-                    break;
-
-                case 'random':
-                    response = Math.floor(Math.random() * 100);
-                    break;
-
-                default:
-                    response = 'Unknown command: ' + command;
-            }
-
-            TerminalService.emit('response', response);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/terminal/ImportDoc.vue b/apps/labs/doc/terminal/ImportDoc.vue
deleted file mode 100644
index ab88b96a2..000000000
--- a/apps/labs/doc/terminal/ImportDoc.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Terminal from 'primevue/terminal';
-import TerminalService from 'primevue/terminalservice'
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/AccessibilityDoc.vue b/apps/labs/doc/textarea/AccessibilityDoc.vue
deleted file mode 100644
index 6554e58cd..000000000
--- a/apps/labs/doc/textarea/AccessibilityDoc.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
-            <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the input.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="address1">Address 1</label>
-<Textarea id="address1" />
-
-<span id="address2">Address 2</span>
-<Textarea aria-labelledby="address2" />
-
-<Textarea aria-label="Address Details"/>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/AutoResizeDoc.vue b/apps/labs/doc/textarea/AutoResizeDoc.vue
deleted file mode 100644
index 1ed5dcaed..000000000
--- a/apps/labs/doc/textarea/AutoResizeDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" autoResize rows="5" cols="30" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Textarea v-model="value" autoResize rows="5" cols="30" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" autoResize rows="5" cols="30" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" autoResize rows="5" cols="30" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/BasicDoc.vue b/apps/labs/doc/textarea/BasicDoc.vue
deleted file mode 100644
index 59c915acc..000000000
--- a/apps/labs/doc/textarea/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Textarea v-model="value" rows="5" cols="30" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/DisabledDoc.vue b/apps/labs/doc/textarea/DisabledDoc.vue
deleted file mode 100644
index fc9c83222..000000000
--- a/apps/labs/doc/textarea/DisabledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" disabled style="resize: none" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'Disabled',
-            code: {
-                basic: `
-<Textarea v-model="value" rows="5" cols="30" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'Disabled'
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('Disabled');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/FilledDoc.vue b/apps/labs/doc/textarea/FilledDoc.vue
deleted file mode 100644
index 160760b69..000000000
--- a/apps/labs/doc/textarea/FilledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" variant="filled" rows="5" cols="30" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Textarea v-model="value" variant="filled" rows="5" cols="30" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" variant="filled" rows="5" cols="30" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" variant="filled" rows="5" cols="30" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/FloatLabelDoc.vue b/apps/labs/doc/textarea/FloatLabelDoc.vue
deleted file mode 100644
index 3ce419f58..000000000
--- a/apps/labs/doc/textarea/FloatLabelDoc.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-stretch gap-4">
-        <FloatLabel>
-            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" class="h-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" class="h-full" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" class="h-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: '',
-            code: {
-                basic: `
-<FloatLabel>
-    <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel variant="in">
-    <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel variant="on">
-    <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: ''
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel>
-            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="in">
-            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel variant="on">
-            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref('');
-const value2 = ref('');
-const value3 = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/FormsDoc.vue b/apps/labs/doc/textarea/FormsDoc.vue
deleted file mode 100644
index a180e651d..000000000
--- a/apps/labs/doc/textarea/FormsDoc.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Textarea integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <Textarea name="address" rows="5" cols="30" style="resize: none" />
-                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                address: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    address: z.string().min(1, { message: 'Address is required.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col gap-1">
-        <Textarea name="address" rows="5" cols="30" style="resize: none" />
-        <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <Textarea name="address" rows="5" cols="30" style="resize: none" />
-                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                address: ''
-            },
-            resolver: zodResolver(
-                z.object({
-                    address: z.string().min(1, { message: 'Address is required.' })
-                })
-            ),
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1">
-                <Textarea name="address" rows="5" cols="30" style="resize: none" />
-                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    address: ''
-});
-const resolver = ref(zodResolver(
-    z.object({
-        address: z.string().min(1, { message: 'Address is required.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/IftaLabelDoc.vue b/apps/labs/doc/textarea/IftaLabelDoc.vue
deleted file mode 100644
index d53e47b34..000000000
--- a/apps/labs/doc/textarea/IftaLabelDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
-            <label for="description">Description</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<IftaLabel>
-    <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
-    <label for="description">Description</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
-            <label for="description">Description</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel>
-            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
-            <label for="description">Description</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/ImportDoc.vue b/apps/labs/doc/textarea/ImportDoc.vue
deleted file mode 100644
index 4759484fb..000000000
--- a/apps/labs/doc/textarea/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Textarea from 'primevue/textarea';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/InvalidDoc.vue b/apps/labs/doc/textarea/InvalidDoc.vue
deleted file mode 100644
index 29a0ae6a4..000000000
--- a/apps/labs/doc/textarea/InvalidDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/textarea/SizesDoc.vue b/apps/labs/doc/textarea/SizesDoc.vue
deleted file mode 100644
index 12a2a820d..000000000
--- a/apps/labs/doc/textarea/SizesDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Textarea provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <Textarea v-model="value2" placeholder="Normal" rows="3" />
-        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
-<Textarea v-model="value2" placeholder="Normal" rows="3" />
-<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <Textarea v-model="value2" placeholder="Normal" rows="3" />
-        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <Textarea v-model="value2" placeholder="Normal" rows="3" />
-        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tieredmenu/AccessibilityDoc.vue b/apps/labs/doc/tieredmenu/AccessibilityDoc.vue
deleted file mode 100644
index 168e804fe..000000000
--- a/apps/labs/doc/tieredmenu/AccessibilityDoc.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            TieredMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
-            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a TieredMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the
-            id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i> and <i>aria-expanded</i> to define the relation between the item and the submenu.
-        </p>
-
-        <p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>Closes the popup, then moves focus to the target element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>If option is closed, opens the option otherwise moves focus to the first child option.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>If option is open, closes the option otherwise moves focus to the parent option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last menuitem within the submenu.</td>
-                    </tr>
-                    <tr>
-                        <td><i>any printable character</i></td>
-                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/tieredmenu/BasicDoc.vue b/apps/labs/doc/tieredmenu/BasicDoc.vue
deleted file mode 100644
index 7673bb460..000000000
--- a/apps/labs/doc/tieredmenu/BasicDoc.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TieredMenu requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            items: [
-                                {
-                                    label: 'Document',
-                                    icon: 'pi pi-file'
-                                },
-                                {
-                                    label: 'Image',
-                                    icon: 'pi pi-image'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Open',
-                            icon: 'pi pi-folder-open'
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-file-edit',
-                    items: [
-                        {
-                            label: 'Copy',
-                            icon: 'pi pi-copy'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times'
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Slack',
-                            icon: 'pi pi-slack'
-                        },
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<TieredMenu :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            items: [
-                                {
-                                    label: 'Document',
-                                    icon: 'pi pi-file'
-                                },
-                                {
-                                    label: 'Image',
-                                    icon: 'pi pi-image'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Open',
-                            icon: 'pi pi-folder-open'
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-file-edit',
-                    items: [
-                        {
-                            label: 'Copy',
-                            icon: 'pi pi-copy'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times'
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Slack',
-                            icon: 'pi pi-slack'
-                        },
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus',
-                items: [
-                    {
-                        label: 'Document',
-                        icon: 'pi pi-file'
-                    },
-                    {
-                        label: 'Image',
-                        icon: 'pi pi-image'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Open',
-                icon: 'pi pi-folder-open'
-            },
-            {
-                label: 'Print',
-                icon: 'pi pi-print'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-file-edit',
-        items: [
-            {
-                label: 'Copy',
-                icon: 'pi pi-copy'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-times'
-            }
-        ]
-    },
-    {
-        label: 'Search',
-        icon: 'pi pi-search'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Share',
-        icon: 'pi pi-share-alt',
-        items: [
-            {
-                label: 'Slack',
-                icon: 'pi pi-slack'
-            },
-            {
-                label: 'Whatsapp',
-                icon: 'pi pi-whatsapp'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tieredmenu/CommandDoc.vue b/apps/labs/doc/tieredmenu/CommandDoc.vue
deleted file mode 100644
index 4d6a755a0..000000000
--- a/apps/labs/doc/tieredmenu/CommandDoc.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print',
-                            command: () => {
-                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Sync',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Import',
-                            icon: 'pi pi-cloud-download',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-cloud-upload',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                            }
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<TieredMenu :model="items" />
-<Toast />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print',
-                            command: () => {
-                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-                    }
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Sync',
-                    icon: 'pi pi-cloud',
-                    items: [
-                        {
-                            label: 'Import',
-                            icon: 'pi pi-cloud-download',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-cloud-upload',
-                            command: () => {
-                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                            }
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus',
-                command: () => {
-                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
-                }
-            },
-            {
-                label: 'Print',
-                icon: 'pi pi-print',
-                command: () => {
-                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
-                }
-            }
-        ]
-    },
-    {
-        label: 'Search',
-        icon: 'pi pi-search',
-        command: () => {
-            toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
-        }
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Sync',
-        icon: 'pi pi-cloud',
-        items: [
-            {
-                label: 'Import',
-                icon: 'pi pi-cloud-download',
-                command: () => {
-                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
-                }
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-cloud-upload',
-                command: () => {
-                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
-                }
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tieredmenu/ImportDoc.vue b/apps/labs/doc/tieredmenu/ImportDoc.vue
deleted file mode 100644
index 44f0298aa..000000000
--- a/apps/labs/doc/tieredmenu/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import TieredMenu from 'primevue/tieredmenu';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tieredmenu/PopupDoc.vue b/apps/labs/doc/tieredmenu/PopupDoc.vue
deleted file mode 100644
index 855059c43..000000000
--- a/apps/labs/doc/tieredmenu/PopupDoc.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Overlay mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> function of the menu ref with an event of the target.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
-        <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            items: [
-                                {
-                                    label: 'Document',
-                                    icon: 'pi pi-file'
-                                },
-                                {
-                                    label: 'Image',
-                                    icon: 'pi pi-image'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Open',
-                            icon: 'pi pi-folder-open'
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-file-edit',
-                    items: [
-                        {
-                            label: 'Copy',
-                            icon: 'pi pi-copy'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times'
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Slack',
-                            icon: 'pi pi-slack'
-                        },
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
-<TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
-        <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            items: [
-                                {
-                                    label: 'Document',
-                                    icon: 'pi pi-file'
-                                },
-                                {
-                                    label: 'Image',
-                                    icon: 'pi pi-image'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Open',
-                            icon: 'pi pi-folder-open'
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-file-edit',
-                    items: [
-                        {
-                            label: 'Copy',
-                            icon: 'pi pi-copy'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times'
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Slack',
-                            icon: 'pi pi-slack'
-                        },
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp'
-                        }
-                    ]
-                }
-            ]
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
-        <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const menu = ref();
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus',
-                items: [
-                    {
-                        label: 'Document',
-                        icon: 'pi pi-file'
-                    },
-                    {
-                        label: 'Image',
-                        icon: 'pi pi-image'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Open',
-                icon: 'pi pi-folder-open'
-            },
-            {
-                label: 'Print',
-                icon: 'pi pi-print'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-file-edit',
-        items: [
-            {
-                label: 'Copy',
-                icon: 'pi pi-copy'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-times'
-            }
-        ]
-    },
-    {
-        label: 'Search',
-        icon: 'pi pi-search'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Share',
-        icon: 'pi pi-share-alt',
-        items: [
-            {
-                label: 'Slack',
-                icon: 'pi pi-slack'
-            },
-            {
-                label: 'Whatsapp',
-                icon: 'pi pi-whatsapp'
-            }
-        ]
-    }
-]);
-
-const toggle = (event) => {
-    menu.value.toggle(event);
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.menu.toggle(event);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/tieredmenu/RouterDoc.vue b/apps/labs/doc/tieredmenu/RouterDoc.vue
deleted file mode 100644
index 0c94e529f..000000000
--- a/apps/labs/doc/tieredmenu/RouterDoc.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-    <DocSectionCode :code="code" hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router',
-                    icon: 'pi pi-palette',
-                    items: [
-                        {
-                            label: 'Styled',
-                            route: '/slider'
-                        },
-                        {
-                            label: 'Unstyled',
-                            route: '/slider'
-                        }
-                    ]
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    items: [
-                        {
-                            label: 'Vue.js',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Vite.js',
-                            url: 'https://vuejs.org/'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<TieredMenu :model="items">
-    <template #item="{ item, props, hasSubmenu }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                <span :class="item.icon" />
-                <span class="ml-2">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-            <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
-            <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
-        </a>
-    </template>
-</TieredMenu>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Router',
-                    icon: 'pi pi-palette',
-                    items: [
-                        {
-                            label: 'Styled',
-                            route: '/slider'
-                        },
-                        {
-                            label: 'Unstyled',
-                            route: '/slider'
-                        }
-                    ]
-                },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-link',
-                    command: () => {
-                        this.$router.push('/slider');
-                    }
-                },
-                {
-                    label: 'External',
-                    icon: 'pi pi-home',
-                    items: [
-                        {
-                            label: 'Vue.js',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Vite.js',
-                            url: 'https://vuejs.org/'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <span class="ml-2">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Router',
-        icon: 'pi pi-palette',
-        items: [
-            {
-                label: 'Styled',
-                route: '/slider'
-            },
-            {
-                label: 'Unstyled',
-                route: '/slider'
-            }
-        ]
-    },
-    {
-        label: 'Programmatic',
-        icon: 'pi pi-link',
-        command: () => {
-            router.push('/slider');
-        }
-    },
-    {
-        label: 'External',
-        icon: 'pi pi-home',
-        items: [
-            {
-                label: 'Vue.js',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Vite.js',
-                url: 'https://vuejs.org/'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tieredmenu/TemplateDoc.vue b/apps/labs/doc/tieredmenu/TemplateDoc.vue
deleted file mode 100644
index b9c19299e..000000000
--- a/apps/labs/doc/tieredmenu/TemplateDoc.vue
+++ /dev/null
@@ -1,328 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TieredMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            items: [
-                                {
-                                    label: 'Document',
-                                    icon: 'pi pi-file',
-                                    shortcut: '⌘+N'
-                                },
-                                {
-                                    label: 'Image',
-                                    icon: 'pi pi-image',
-                                    shortcut: '⌘+I'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-video',
-                                    shortcut: '⌘+L'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Open',
-                            icon: 'pi pi-folder-open',
-                            shortcut: '⌘+O'
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print',
-                            shortcut: '⌘+P'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-file-edit',
-                    items: [
-                        {
-                            label: 'Copy',
-                            icon: 'pi pi-copy',
-                            shortcut: '⌘+C'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times',
-                            shortcut: '⌘+D'
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search',
-                    shortcut: '⌘+S'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Slack',
-                            icon: 'pi pi-slack',
-                            badge: 2
-                        },
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp',
-                            badge: 3
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<TieredMenu :model="items">
-    <template #item="{ item, props, hasSubmenu }">
-        <a v-ripple class="flex items-center" v-bind="props.action">
-            <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
-            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
-        </a>
-    </template>
-</TieredMenu>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-plus',
-                            items: [
-                                {
-                                    label: 'Document',
-                                    icon: 'pi pi-file',
-                                    shortcut: '⌘+N'
-                                },
-                                {
-                                    label: 'Image',
-                                    icon: 'pi pi-image',
-                                    shortcut: '⌘+I'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-video',
-                                    shortcut: '⌘+L'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Open',
-                            icon: 'pi pi-folder-open',
-                            shortcut: '⌘+O'
-                        },
-                        {
-                            label: 'Print',
-                            icon: 'pi pi-print',
-                            shortcut: '⌘+P'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-file-edit',
-                    items: [
-                        {
-                            label: 'Copy',
-                            icon: 'pi pi-copy',
-                            shortcut: '⌘+C'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times',
-                            shortcut: '⌘+D'
-                        }
-                    ]
-                },
-                {
-                    label: 'Search',
-                    icon: 'pi pi-search',
-                    shortcut: '⌘+S'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Share',
-                    icon: 'pi pi-share-alt',
-                    items: [
-                        {
-                            label: 'Slack',
-                            icon: 'pi pi-slack',
-                            badge: 2
-                        },
-                        {
-                            label: 'Whatsapp',
-                            icon: 'pi pi-whatsapp',
-                            badge: 3
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <a v-ripple class="flex items-center" v-bind="props.action">
-                    <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
-                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-plus',
-                items: [
-                    {
-                        label: 'Document',
-                        icon: 'pi pi-file',
-                        shortcut: '⌘+N'
-                    },
-                    {
-                        label: 'Image',
-                        icon: 'pi pi-image',
-                        shortcut: '⌘+I'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-video',
-                        shortcut: '⌘+L'
-                    }
-                ]
-            },
-            {
-                label: 'Open',
-                icon: 'pi pi-folder-open',
-                shortcut: '⌘+O'
-            },
-            {
-                label: 'Print',
-                icon: 'pi pi-print',
-                shortcut: '⌘+P'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-file-edit',
-        items: [
-            {
-                label: 'Copy',
-                icon: 'pi pi-copy',
-                shortcut: '⌘+C'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-times',
-                shortcut: '⌘+D'
-            }
-        ]
-    },
-    {
-        label: 'Search',
-        icon: 'pi pi-search',
-        shortcut: '⌘+S'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Share',
-        icon: 'pi pi-share-alt',
-        items: [
-            {
-                label: 'Slack',
-                icon: 'pi pi-slack',
-                badge: 2
-            },
-            {
-                label: 'Whatsapp',
-                icon: 'pi pi-whatsapp',
-                badge: 3
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/timeline/AccessibilityDoc.vue b/apps/labs/doc/timeline/AccessibilityDoc.vue
deleted file mode 100644
index 00bdb5414..000000000
--- a/apps/labs/doc/timeline/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/timeline/AlignmentDoc.vue b/apps/labs/doc/timeline/AlignmentDoc.vue
deleted file mode 100644
index c27ba3d73..000000000
--- a/apps/labs/doc/timeline/AlignmentDoc.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Content location relative the line is defined with the <i>align</i> property.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-12">
-        <Timeline :value="events" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" align="right" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" align="alternate" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-            ],
-            code: {
-                basic: `
-<Timeline :value="events" class="w-full md:w-80">
-    <template #content="slotProps">
-        {{ slotProps.item.status }}
-    </template>
-</Timeline>
-
-<Timeline :value="events" align="right" class="w-full md:w-80">
-    <template #content="slotProps">
-        {{ slotProps.item.status }}
-    </template>
-</Timeline>
-
-<Timeline :value="events" align="alternate" class="w-full md:w-80">
-    <template #content="slotProps">
-        {{ slotProps.item.status }}
-    </template>
-</Timeline>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-12">
-        <Timeline :value="events" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" align="right" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" align="alternate" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-12">
-        <Timeline :value="events" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" align="right" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" align="alternate" class="w-full md:w-80">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const events = ref([
-    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/timeline/BasicDoc.vue b/apps/labs/doc/timeline/BasicDoc.vue
deleted file mode 100644
index 5b470d764..000000000
--- a/apps/labs/doc/timeline/BasicDoc.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Timeline requires a <i>value</i> for the collection of events and <i>content</i> slot that receives an object as a parameter to return content.</p>
-    </DocSectionText>
-    <div class="card">
-        <Timeline :value="events">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-            ],
-            code: {
-                basic: `
-<Timeline :value="events">
-    <template #content="slotProps">
-        {{ slotProps.item.status }}
-    </template>
-</Timeline>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Timeline :value="events">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Timeline :value="events">
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const events = ref([
-    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/timeline/HorizontalDoc.vue b/apps/labs/doc/timeline/HorizontalDoc.vue
deleted file mode 100644
index 530ec6419..000000000
--- a/apps/labs/doc/timeline/HorizontalDoc.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TimeLine orientation is controlled with the <i>layout</i> property, default is <i>vertical</i> having <i>horizontal</i> as the alternative.</p>
-    </DocSectionText>
-    <div class="card flex flex-col gap-4">
-        <Timeline :value="events" layout="horizontal" align="top">
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" layout="horizontal" align="bottom">
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" layout="horizontal" align="alternate">
-            <template #opposite> &nbsp; </template>
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: ['2020', '2021', '2022', '2023'],
-            code: {
-                basic: `
-<Timeline :value="events" layout="horizontal" align="top">
-    <template #content="slotProps">
-        {{ slotProps.item }}
-    </template>
-</Timeline>
-
-<Timeline :value="events" layout="horizontal" align="bottom">
-    <template #content="slotProps">
-        {{ slotProps.item }}
-    </template>
-</Timeline>
-
-<Timeline :value="events" layout="horizontal" align="alternate">
-    <template #opposite> &nbsp; </template>
-    <template #content="slotProps">
-        {{ slotProps.item }}
-    </template>
-</Timeline>
-`,
-                options: `
-<template>
-    <div class="card flex flex-col gap-4">
-        <Timeline :value="events" layout="horizontal" align="top">
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" layout="horizontal" align="bottom">
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" layout="horizontal" align="alternate">
-            <template #opposite> &nbsp; </template>
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: ['2020', '2021', '2022', '2023']
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col gap-4">
-        <Timeline :value="events" layout="horizontal" align="top">
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" layout="horizontal" align="bottom">
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" layout="horizontal" align="alternate">
-            <template #opposite> &nbsp; </template>
-            <template #content="slotProps">
-                {{ slotProps.item }}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const events = ref(['2020', '2021', '2022', '2023']);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/timeline/ImportDoc.vue b/apps/labs/doc/timeline/ImportDoc.vue
deleted file mode 100644
index 0bc532b09..000000000
--- a/apps/labs/doc/timeline/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Timeline from 'primevue/timeline';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/timeline/OppositeDoc.vue b/apps/labs/doc/timeline/OppositeDoc.vue
deleted file mode 100644
index b3af07467..000000000
--- a/apps/labs/doc/timeline/OppositeDoc.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Additional content at the other side of the line can be provided with the <i>opposite</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <Timeline :value="events">
-            <template #opposite="slotProps">
-                <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
-            </template>
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-            ],
-            code: {
-                basic: `
-<Timeline :value="events">
-    <template #opposite="slotProps">
-        <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
-    </template>
-    <template #content="slotProps">
-        {{slotProps.item.status}}
-    </template>
-</Timeline>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Timeline :value="events">
-            <template #opposite="slotProps">
-                <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
-            </template>
-            <template #content="slotProps">
-                {{slotProps.item.status}}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Timeline :value="events">
-            <template #opposite="slotProps">
-                <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
-            </template>
-            <template #content="slotProps">
-                {{slotProps.item.status}}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const events = ref([
-    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/timeline/TemplateDoc.vue b/apps/labs/doc/timeline/TemplateDoc.vue
deleted file mode 100644
index fdbcaf4b6..000000000
--- a/apps/labs/doc/timeline/TemplateDoc.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Sample implementation with custom content and styled markers.</p>
-    </DocSectionText>
-    <div class="card">
-        <Timeline :value="events" align="alternate" class="customized-timeline">
-            <template #marker="slotProps">
-                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
-                    <i :class="slotProps.item.icon"></i>
-                </span>
-            </template>
-            <template #content="slotProps">
-                <Card class="mt-4">
-                    <template #title>
-                        {{ slotProps.item.status }}
-                    </template>
-                    <template #subtitle>
-                        {{ slotProps.item.date }}
-                    </template>
-                    <template #content>
-                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
-                            neque quas!
-                        </p>
-                        <Button label="Read more" text></Button>
-                    </template>
-                </Card>
-            </template>
-        </Timeline>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-            ],
-            code: {
-                basic: `
-<Timeline :value="events" align="alternate" class="customized-timeline">
-    <template #marker="slotProps">
-        <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
-            <i :class="slotProps.item.icon"></i>
-        </span>
-    </template>
-    <template #content="slotProps">
-        <Card class="mt-4">
-            <template #title>
-                {{ slotProps.item.status }}
-            </template>
-            <template #subtitle>
-                {{ slotProps.item.date }}
-            </template>
-            <template #content>
-                <img v-if="slotProps.item.image" :src="\`/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
-                    neque quas!
-                </p>
-                <Button label="Read more" text></Button>
-            </template>
-        </Card>
-    </template>
-</Timeline>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Timeline :value="events" align="alternate" class="customized-timeline">
-            <template #marker="slotProps">
-                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
-                    <i :class="slotProps.item.icon"></i>
-                </span>
-            </template>
-            <template #content="slotProps">
-                <Card class="mt-4">
-                    <template #title>
-                        {{ slotProps.item.status }}
-                    </template>
-                    <template #subtitle>
-                        {{ slotProps.item.date }}
-                    </template>
-                    <template #content>
-                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
-                            neque quas!
-                        </p>
-                        <Button label="Read more" text></Button>
-                    </template>
-                </Card>
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-            ]
-        };
-    }
-};
-<\/script>
-
-<style lang="scss" scoped>
-@media screen and (max-width: 960px) {
-    ::v-deep(.customized-timeline) {
-        .p-timeline-event:nth-child(even) {
-            flex-direction: row;
-
-            .p-timeline-event-content {
-                text-align: left;
-            }
-        }
-
-        .p-timeline-event-opposite {
-            flex: 0;
-        }
-    }
-}
-</style>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Timeline :value="events" align="alternate" class="customized-timeline">
-            <template #marker="slotProps">
-                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
-                    <i :class="slotProps.item.icon"></i>
-                </span>
-            </template>
-            <template #content="slotProps">
-                <Card class="mt-4">
-                    <template #title>
-                        {{ slotProps.item.status }}
-                    </template>
-                    <template #subtitle>
-                        {{ slotProps.item.date }}
-                    </template>
-                    <template #content>
-                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
-                            neque quas!
-                        </p>
-                        <Button label="Read more" text></Button>
-                    </template>
-                </Card>
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const events = ref([
-    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
-    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-]);
-
-<\/script>
-
-<style lang="scss" scoped>
-@media screen and (max-width: 960px) {
-    ::v-deep(.customized-timeline) {
-        .p-timeline-event:nth-child(even) {
-            flex-direction: row;
-
-            .p-timeline-event-content {
-                text-align: left;
-            }
-        }
-
-        .p-timeline-event-opposite {
-            flex: 0;
-        }
-    }
-}
-</style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-@media screen and (max-width: 960px) {
-    ::v-deep(.customized-timeline) {
-        .p-timeline-event:nth-child(even) {
-            flex-direction: row !important;
-
-            .p-timeline-event-content {
-                text-align: left !important;
-            }
-        }
-
-        .p-timeline-event-opposite {
-            flex: 0;
-        }
-    }
-}
-</style>
diff --git a/apps/labs/doc/toast/AccessibilityDoc.vue b/apps/labs/doc/toast/AccessibilityDoc.vue
deleted file mode 100644
index 83732b240..000000000
--- a/apps/labs/doc/toast/AccessibilityDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Toast component use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true".</p>
-
-        <p>
-            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <a href="https://primevue.org/configuration/#locale" target="_blank" rel="noopener noreferrer">locale</a> API by default, you
-            may use <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
-        </p>
-
-        <h3>Close Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Closes the message.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Closes the message.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<ConfirmDialog id="confirm" />
-
-<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
-
-`
-            },
-            code2: {
-                basic: `
-<script setup>
-const confirm = useConfirm();
-const isVisible = ref(false);
-
-const openDialog = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        onShow: () => {
-            isVisible.value = true;
-        },
-        onHide: () => {
-            isVisible.value = false;
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/BasicDoc.vue b/apps/labs/doc/toast/BasicDoc.vue
deleted file mode 100644
index c9176531e..000000000
--- a/apps/labs/doc/toast/BasicDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface that defines properties such as severity, summary and
-            detail.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Show" @click="show()" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Toast />
-<Button label="Show" @click="show()" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <Button label="Show" @click="show()" />
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        show() {
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <Button label="Show" @click="show()" />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const show = () => {
-    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        show() {
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/HeadlessDoc.vue b/apps/labs/doc/toast/HeadlessDoc.vue
deleted file mode 100644
index b1650b38e..000000000
--- a/apps/labs/doc/toast/HeadlessDoc.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire toast UI instead of the default elements.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Toast position="top-center" group="headless" @close="visible = false">
-            <template #container="{ message, closeCallback }">
-                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
-                    <div class="flex items-center gap-5">
-                        <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
-                        <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
-                    </div>
-                    <div class="flex flex-col gap-2">
-                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
-                        <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
-                    </div>
-                    <div class="flex gap-4 mb-4 justify-end">
-                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
-                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
-                    </div>
-                </section>
-            </template>
-        </Toast>
-        <Button @click="show" label="View" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            progress: 0,
-            interval: null,
-            code: {
-                basic: `
-<Toast position="top-center" group="headless" @close="visible = false">
-    <template #container="{ message, closeCallback }">
-        <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
-            <div class="flex items-center gap-5">
-                <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
-                <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
-            </div>
-            <div class="flex flex-col gap-2">
-                <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
-                <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
-            </div>
-            <div class="flex gap-4 mb-4 justify-end">
-                <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
-                <Button label="Cancel" size="small" @click="closeCallback"></Button>
-            </div>
-        </section>
-    </template>
-</Toast>
-<Button @click="show" label="View" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast position="top-center" group="headless" @close="visible = false">
-            <template #container="{ message, closeCallback }">
-                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
-                    <div class="flex items-center gap-5">
-                        <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
-                        <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
-                    </div>
-                    <div class="flex flex-col gap-2">
-                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
-                        <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
-                    </div>
-                    <div class="flex gap-4 mb-4 justify-end">
-                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
-                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
-                    </div>
-                </section>
-            </template>
-        </Toast>
-        <Button @click="show" label="View" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            progress: 0,
-            interval: null
-        }
-    },
-    beforeUnmount() {
-        if (this.interval) {
-            clearInterval(this.interval);
-        }
-    },
-    methods: {
-        show() {
-            if (!this.visible) {
-                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg rounded-2xl' });
-                this.visible = true;
-                this.progress = 0;
-
-                if (this.interval) {
-                    clearInterval(this.interval);
-                }
-
-                this.interval = setInterval(() => {
-                    if (this.progress <= 100) {
-                        this.progress = this.progress + 20;
-                    }
-
-                    if (this.progress >= 100) {
-                        this.progress = 100;
-                        clearInterval(this.interval);
-                    }
-                }, 1000);
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast position="top-center" group="headless" @close="visible = false">
-            <template #container="{ message, closeCallback }">
-                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
-                    <div class="flex items-center gap-5">
-                        <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
-                        <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
-                    </div>
-                    <div class="flex flex-col gap-2">
-                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
-                        <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
-                    </div>
-                    <div class="flex gap-4 mb-4 justify-end">
-                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
-                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
-                    </div>
-                </section>
-            </template>
-        </Toast>
-        <Button @click="show" label="View" />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-import { ref, onUnmounted } from 'vue';
-const toast = useToast();
-const visible = ref(false);
-const progress = ref(0);
-const interval = ref();
-
-onUnmounted(() => {
-    if (interval.value) {
-        clearInterval(interval.value);
-    }
-})
-
-const show = () => {
-    if (!visible.value) {
-        toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg rounded-2xl' });
-        visible.value = true;
-        progress.value = 0;
-
-        if (interval.value) {
-            clearInterval(interval.value);
-        }
-
-        interval.value = setInterval(() => {
-            if (progress.value <= 100) {
-                progress.value = progress.value + 20;
-            }
-
-            if (progress.value >= 100) {
-                progress.value = 100;
-                clearInterval(interval.value);
-            }
-        }, 1000);
-    }
-};
-<\/script>
-`
-            }
-        };
-    },
-    beforeUnmount() {
-        if (this.interval) {
-            clearInterval(this.interval);
-        }
-    },
-    methods: {
-        show() {
-            if (!this.visible) {
-                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg rounded-2xl' });
-                this.visible = true;
-                this.progress = 0;
-
-                if (this.interval) {
-                    clearInterval(this.interval);
-                }
-
-                this.interval = setInterval(() => {
-                    if (this.progress <= 100) {
-                        this.progress = this.progress + 20;
-                    }
-
-                    if (this.progress >= 100) {
-                        this.progress = 100;
-                        clearInterval(this.interval);
-                    }
-                }, 1000);
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/ImportDoc.vue b/apps/labs/doc/toast/ImportDoc.vue
deleted file mode 100644
index 554940f0b..000000000
--- a/apps/labs/doc/toast/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Toast from 'primevue/toast';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/MultipleDoc.vue b/apps/labs/doc/toast/MultipleDoc.vue
deleted file mode 100644
index 7919142a9..000000000
--- a/apps/labs/doc/toast/MultipleDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multiple messages are displayed by passing an array to the <i>show</i> method.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Multiple" @click="showMultiple()" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Toast />
-<Button label="Multiple" @click="showMultiple()" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <Button label="Multiple" @click="showMultiple()" />
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        showMultiple() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
-            this.$toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content', life: 3100 });
-            this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <Button label="Multiple" @click="showMultiple()" />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const showMultiple = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
-    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
-    toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content', life: 3100 });
-    toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        showMultiple() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
-            this.$toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content', life: 3100 });
-            this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/PositionDoc.vue b/apps/labs/doc/toast/PositionDoc.vue
deleted file mode 100644
index 0443d37c8..000000000
--- a/apps/labs/doc/toast/PositionDoc.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A message can be targeted to a certain Toast component by matching the <i>group</i> keys whereas location is customized with the <i>position</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-2">
-            <Button label="Top Left" @click="showTopLeft" />
-            <Button label="Bottom Left" @click="showBottomLeft" />
-            <Button label="Bottom Right" @click="showBottomRight" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Toast position="top-left" group="tl" />
-<Toast position="bottom-left" group="bl" />
-<Toast position="bottom-right" group="br" />
-
-<Button label="Top Left" @click="showTopLeft" />
-<Button label="Bottom Left" @click="showBottomLeft" />
-<Button label="Bottom Right" @click="showBottomRight" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast position="top-left" group="tl" />
-        <Toast position="bottom-left" group="bl" />
-        <Toast position="bottom-right" group="br" />
-
-        <div class="flex flex-wrap gap-2">
-            <Button label="Top Left" @click="showTopLeft" />
-            <Button label="Bottom Left" @click="showBottomLeft" />
-            <Button label="Bottom Right" @click="showBottomRight" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        showTopLeft() {
-            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000 });
-        },
-        showBottomLeft() {
-            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', group: 'bl', life: 3000 });
-        },
-        showBottomRight() {
-            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', group: 'br', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast position="top-left" group="tl" />
-        <Toast position="bottom-left" group="bl" />
-        <Toast position="bottom-right" group="br" />
-
-        <div class="flex flex-wrap gap-2">
-            <Button label="Top Left" @click="showTopLeft" />
-            <Button label="Bottom Left" @click="showBottomLeft" />
-            <Button label="Bottom Right" @click="showBottomRight" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const showTopLeft = () => {
-    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000 });
-};
-
-const showBottomLeft = () => {
-    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', group: 'bl', life: 3000 });
-};
-
-const showBottomRight = () => {
-    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', group: 'br', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        showTopLeft() {
-            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000 });
-        },
-        showBottomLeft() {
-            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', group: 'bl', life: 3000 });
-        },
-        showBottomRight() {
-            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', group: 'br', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/SeverityDoc.vue b/apps/labs/doc/toast/SeverityDoc.vue
deleted file mode 100644
index 13db6d749..000000000
--- a/apps/labs/doc/toast/SeverityDoc.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>severity</i> option specifies the type of the message.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-2">
-            <Button label="Success" severity="success" @click="showSuccess" />
-            <Button label="Info" severity="info" @click="showInfo" />
-            <Button label="Warn" severity="warn" @click="showWarn" />
-            <Button label="Error" severity="danger" @click="showError" />
-            <Button label="Secondary" severity="secondary" @click="showSecondary" />
-            <Button label="Contrast" severity="contrast" @click="showContrast" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Toast />
-<Button label="Success" severity="success" @click="showSuccess" />
-<Button label="Info" severity="info" @click="showInfo" />
-<Button label="Warn" severity="warn" @click="showWarn" />
-<Button label="Error" severity="danger" @click="showError" />
-<Button label="Secondary" severity="secondary" @click="showSecondary" />
-<Button label="Contrast" severity="contrast" @click="showContrast" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <div class="flex flex-wrap gap-2">
-            <Button label="Success" severity="success" @click="showSuccess" />
-            <Button label="Info" severity="info" @click="showInfo" />
-            <Button label="Warn" severity="warn" @click="showWarn" />
-            <Button label="Error" severity="danger" @click="showError" />
-            <Button label="Secondary" severity="secondary" @click="showSecondary" />
-            <Button label="Contrast" severity="contrast" @click="showContrast" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        showSuccess() {
-            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
-        },
-        showInfo() {
-            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
-        },
-        showWarn() {
-            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
-        },
-        showError() {
-            this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
-        },
-        showSecondary() {
-            this.$toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
-        },
-        showContrast() {
-            this.$toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <div class="flex flex-wrap gap-2">
-            <Button label="Success" severity="success" @click="showSuccess" />
-            <Button label="Info" severity="info" @click="showInfo" />
-            <Button label="Warn" severity="warn" @click="showWarn" />
-            <Button label="Error" severity="danger" @click="showError" />
-            <Button label="Secondary" severity="secondary" @click="showSecondary" />
-            <Button label="Contrast" severity="contrast" @click="showContrast" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const showSuccess = () => {
-    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
-};
-
-const showInfo = () => {
-    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
-};
-
-const showWarn = () => {
-    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
-};
-
-const showError = () => {
-    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
-};
-
-const showSecondary = () => {
-    toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
-};
-
-const showContrast = () => {
-    toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        showSuccess() {
-            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
-        },
-        showInfo() {
-            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
-        },
-        showWarn() {
-            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
-        },
-        showError() {
-            this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
-        },
-        showSecondary() {
-            this.$toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
-        },
-        showContrast() {
-            this.$toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/StickyDoc.vue b/apps/labs/doc/toast/StickyDoc.vue
deleted file mode 100644
index fb149ac5c..000000000
--- a/apps/labs/doc/toast/StickyDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A message disappears after the number of milliseconds defined in the <i>life</i> option. Omit the <i>life</i> option to make the message sticky.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-2">
-            <Button @click="showSticky" label="Sticky" />
-            <Button label="Clear" severity="secondary" @click="clear()" />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Toast />
-<Button @click="showSticky" label="Sticky" />
-<Button label="Clear" severity="secondary" @click="clear()" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <div class="flex flex-wrap gap-2">
-            <Button @click="showSticky" label="Sticky" />
-            <Button label="Clear" severity="secondary" @click="clear()" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        showSticky() {
-            this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
-        },
-        clear() {
-            this.$toast.removeAllGroups();
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <div class="flex flex-wrap gap-2">
-            <Button @click="showSticky" label="Sticky" />
-            <Button label="Clear" severity="secondary" @click="clear()" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const showSticky = () => {
-    toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
-}
-
-const clear = () => {
-    toast.removeAllGroups();
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        showSticky() {
-            this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content' });
-        },
-        clear() {
-            this.$toast.removeAllGroups();
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/TemplateDoc.vue b/apps/labs/doc/toast/TemplateDoc.vue
deleted file mode 100644
index 83e5f3252..000000000
--- a/apps/labs/doc/toast/TemplateDoc.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content inside a message is defined with the <i>message</i> template.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Toast position="bottom-center" group="bc" @close="onClose">
-            <template #message="slotProps">
-                <div class="flex flex-col items-start flex-auto">
-                    <div class="flex items-center gap-2">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold">Amy Elsner</span>
-                    </div>
-                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
-                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
-                </div>
-            </template>
-        </Toast>
-        <Button @click="showTemplate" label="View" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Toast position="bottom-center" group="bc" @close="onClose">
-    <template #message="slotProps">
-        <div class="flex flex-col items-start flex-auto">
-            <div class="flex items-center gap-2">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold">Amy Elsner</span>
-            </div>
-            <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
-            <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
-        </div>
-    </template>
-</Toast>
-<Button @click="showTemplate" label="View" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Toast position="bottom-center" group="bc" @close="onClose">
-            <template #message="slotProps">
-                <div class="flex flex-col items-start flex-auto">
-                    <div class="flex items-center gap-2">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold">Amy Elsner</span>
-                    </div>
-                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
-                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
-                </div>
-            </template>
-        </Toast>
-        <Button @click="showTemplate" label="View" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        }
-    },
-    methods: {
-        showTemplate() {
-            if (!this.visible) {
-                this.$toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
-                this.visible = true;
-            }
-        },
-        onReply() {
-            this.$toast.removeGroup('bc');
-            this.visible = false;
-        },
-        onClose() {
-            this.visible = false;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast position="bottom-center" group="bc" @close="onClose">
-            <template #message="slotProps">
-                <div class="flex flex-col items-start flex-auto">
-                    <div class="flex items-center gap-2">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold">Amy Elsner</span>
-                    </div>
-                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
-                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
-                </div>
-            </template>
-        </Toast>
-        <Button @click="showTemplate" label="View" />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-import { ref } from 'vue';
-const toast = useToast();
-const visible = ref(false);
-
-const showTemplate = () => {
-    if (!visible.value) {
-        toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
-        visible.value = true;
-    } 
-};
-
-const onReply = () => {
-    toast.removeGroup('bc');
-    visible.value = false;
-}
-
-const onClose = () => {
-    visible.value = false;
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        showTemplate() {
-            if (!this.visible) {
-                this.$toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
-                this.visible = true;
-            }
-        },
-        onReply() {
-            this.$toast.removeGroup('bc');
-            this.visible = false;
-        },
-        onClose() {
-            this.visible = false;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/toast/ToastServiceDoc.vue b/apps/labs/doc/toast/ToastServiceDoc.vue
deleted file mode 100644
index 9b4c2e04a..000000000
--- a/apps/labs/doc/toast/ToastServiceDoc.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Toast component is controlled via the <i>ToastService</i> that needs to be installed as an application plugin.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-    <div class="doc-section-description">
-        <p>The service is available with the <i>useToast</i> function for Composition API or using the <i>$toast</i> property of the application for Options API.</p>
-    </div>
-    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-import {createApp} from 'vue';
-import ToastService from 'primevue/toastservice';
-
-const app = createApp(App);
-app.use(ToastService);
-`
-            },
-            code2: {
-                basic: `
-import { useToast } from 'primevue/usetoast';
-
-const toast = useToast();
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/AccessibilityDoc.vue b/apps/labs/doc/togglebutton/AccessibilityDoc.vue
deleted file mode 100644
index e98beb7a7..000000000
--- a/apps/labs/doc/togglebutton/AccessibilityDoc.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            ToggleButton component uses a native button element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is
-            highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
-            does not change related to state.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Keyboard Support</h3>
-        <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the button.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the checked state.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="rememberme">Remember Me</span>
-<ToggleButton aria-labelledby="rememberme" />
-
-<ToggleButton aria-label="Remember Me" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/BasicDoc.vue b/apps/labs/doc/togglebutton/BasicDoc.vue
deleted file mode 100644
index 1e72a9b8c..000000000
--- a/apps/labs/doc/togglebutton/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ToggleButton is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleButton v-model="checked" onLabel="On" offLabel="Off" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/CustomizedDoc.vue b/apps/labs/doc/togglebutton/CustomizedDoc.vue
deleted file mode 100644
index 662ff9d55..000000000
--- a/apps/labs/doc/togglebutton/CustomizedDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
-    offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
-            offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
-            offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/DisabledDoc.vue b/apps/labs/doc/togglebutton/DisabledDoc.vue
deleted file mode 100644
index c048aaa45..000000000
--- a/apps/labs/doc/togglebutton/DisabledDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" aria-label="Confirmation" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
-    class="w-full sm:w-40" aria-label="Confirmation" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
-            class="w-full sm:w-40" aria-label="Confirmation" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
-            class="w-full sm:w-40" aria-label="Confirmation" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/FormsDoc.vue b/apps/labs/doc/togglebutton/FormsDoc.vue
deleted file mode 100644
index db411a861..000000000
--- a/apps/labs/doc/togglebutton/FormsDoc.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ToggleButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-1">
-                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
-                <Message v-if="$form.consent?.invalid" severity="error" size="small" variant="simple">{{ $form.consent.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                consent: false
-            },
-            resolver: zodResolver(
-                z.object({
-                    consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col items-center gap-1">
-        <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
-        <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-1">
-                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
-                <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                consent: false
-            },
-            resolver: zodResolver(
-                z.object({
-                    consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
-                })
-            ),
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col items-center gap-1">
-                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
-                <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    consent: false
-});
-
-const resolver = ref(zodResolver(
-    z.object({
-        consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/ImportDoc.vue b/apps/labs/doc/togglebutton/ImportDoc.vue
deleted file mode 100644
index c4aede4dd..000000000
--- a/apps/labs/doc/togglebutton/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ToggleButton from 'primevue/togglebutton';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/InvalidDoc.vue b/apps/labs/doc/togglebutton/InvalidDoc.vue
deleted file mode 100644
index ffedaa463..000000000
--- a/apps/labs/doc/togglebutton/InvalidDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/SizesDoc.vue b/apps/labs/doc/togglebutton/SizesDoc.vue
deleted file mode 100644
index 7544fc7f4..000000000
--- a/apps/labs/doc/togglebutton/SizesDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ToggleButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
-        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
-        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: false,
-            value2: false,
-            value3: false,
-            code: {
-                basic: `
-<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
-<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
-<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
-        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
-        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value1: false,
-            value2: false,
-            value3: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
-        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
-        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(false);
-const value2 = ref(false);
-const value3 = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/AccessibilityDoc.vue b/apps/labs/doc/toggleswitch/AccessibilityDoc.vue
deleted file mode 100644
index af92ea041..000000000
--- a/apps/labs/doc/toggleswitch/AccessibilityDoc.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            ToggleSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with
-            <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
-        </p>
-
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the switch.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Toggles the checked state.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<label for="switch1">Remember Me</label>
-<ToggleSwitch inputId="switch1" />
-
-<span id="switch2">Remember Me</span>
-<ToggleSwitch aria-labelledby="switch2" />
-
-<ToggleSwitch aria-label="Remember Me" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/BasicDoc.vue b/apps/labs/doc/toggleswitch/BasicDoc.vue
deleted file mode 100644
index a4ccf41ea..000000000
--- a/apps/labs/doc/toggleswitch/BasicDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ToggleSwitch is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleSwitch v-model="checked" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/DisabledDoc.vue b/apps/labs/doc/toggleswitch/DisabledDoc.vue
deleted file mode 100644
index eaecb5be0..000000000
--- a/apps/labs/doc/toggleswitch/DisabledDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" disabled />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleSwitch v-model="checked" disabled />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" disabled />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" disabled />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/FormsDoc.vue b/apps/labs/doc/toggleswitch/FormsDoc.vue
deleted file mode 100644
index 106eff1a4..000000000
--- a/apps/labs/doc/toggleswitch/FormsDoc.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ToggleSwitch integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
-            <div class="flex flex-col items-center gap-2">
-                <ToggleSwitch name="activation" />
-                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                activation: false
-            },
-            resolver: zodResolver(
-                z.object({
-                    activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
-                })
-            ),
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
-    <div class="flex flex-col items-center gap-2">
-        <ToggleSwitch name="activation" />
-        <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
-            <div class="flex flex-col items-center gap-2">
-                <ToggleSwitch name="activation" />
-                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                activation: false
-            },
-            resolver: zodResolver(
-                z.object({
-                    activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
-                })
-            ),
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
-            <div class="flex flex-col items-center gap-2">
-                <ToggleSwitch name="activation" />
-                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-
-const toast = useToast();
-const initialValues = ref({
-    activation: false
-});
-const resolver = ref(zodResolver(
-    z.object({
-        activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
-    })
-));
-<\/script>
-        `
-            }
-        };
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/ImportDoc.vue b/apps/labs/doc/toggleswitch/ImportDoc.vue
deleted file mode 100644
index bedc30c65..000000000
--- a/apps/labs/doc/toggleswitch/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import ToggleSwitch from 'primevue/toggleswitch';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/InvalidDoc.vue b/apps/labs/doc/toggleswitch/InvalidDoc.vue
deleted file mode 100644
index 626d86720..000000000
--- a/apps/labs/doc/toggleswitch/InvalidDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" :invalid="!checked" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleSwitch v-model="checked" :invalid="!checked" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" :invalid="!checked" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" :invalid="!checked" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/PreselectionDoc.vue b/apps/labs/doc/toggleswitch/PreselectionDoc.vue
deleted file mode 100644
index 1c3412d02..000000000
--- a/apps/labs/doc/toggleswitch/PreselectionDoc.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Enabling <i>checked</i> property displays the component as active initially.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: true,
-            code: {
-                basic: `
-<ToggleSwitch v-model="checked" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: true
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(true);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/TemplateDoc.vue b/apps/labs/doc/toggleswitch/TemplateDoc.vue
deleted file mode 100644
index 9055fa083..000000000
--- a/apps/labs/doc/toggleswitch/TemplateDoc.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>handle</i> slot is available to display custom content.</p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-4">
-        <ToggleSwitch v-model="checked">
-            <template #handle="{ checked }">
-                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
-            </template>
-        </ToggleSwitch>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleSwitch v-model="checked">
-    <template #handle="{ checked }">
-        <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
-    </template>
-</ToggleSwitch>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked">
-            <template #handle="{ checked }">
-                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
-            </template>
-        </ToggleSwitch>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleSwitch v-model="checked">
-            <template #handle="{ checked }">
-                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
-            </template>
-        </ToggleSwitch>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toolbar/AccessibilityDoc.vue b/apps/labs/doc/toolbar/AccessibilityDoc.vue
deleted file mode 100644
index 7f0dffa18..000000000
--- a/apps/labs/doc/toolbar/AccessibilityDoc.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Toolbar uses <i>toolbar</i> role to the root element, <i>aria-orientation</i> is not included as it defaults to "horizontal". Any valid attribute is passed to the root element so you may add additional properties like
-            <i>aria-labelledby</i> to define the element if required.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/toolbar/BasicDoc.vue b/apps/labs/doc/toolbar/BasicDoc.vue
deleted file mode 100644
index e6d941a3c..000000000
--- a/apps/labs/doc/toolbar/BasicDoc.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> properties to place content at these sections.</p>
-    </DocSectionText>
-    <div class="card">
-        <Toolbar>
-            <template #start>
-                <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
-                <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
-                <Button icon="pi pi-upload" severity="secondary" text />
-            </template>
-
-            <template #center>
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-search" />
-                    </InputIcon>
-                    <InputText placeholder="Search" />
-                </IconField>
-            </template>
-
-            <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
-        </Toolbar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times'
-                }
-            ],
-            code: {
-                basic: `
-<Toolbar>
-    <template #start>
-        <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
-        <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
-        <Button icon="pi pi-upload" severity="secondary" text />
-    </template>
-
-    <template #center>
-        <IconField>
-            <InputIcon>
-                <i class="pi pi-search" />
-            </InputIcon>
-            <InputText placeholder="Search" />
-        </IconField>
-    </template>
-
-    <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
-</Toolbar>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toolbar>
-            <template #start>
-                <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
-                <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
-                <Button icon="pi pi-upload" severity="secondary" text />
-            </template>
-
-            <template #center>
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-search" />
-                    </InputIcon>
-                    <InputText placeholder="Search" />
-                </IconField>
-            </template>
-
-            <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
-        </Toolbar>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh'
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toolbar>
-            <template #start>
-                <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
-                <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
-                <Button icon="pi pi-upload" severity="secondary" text />
-            </template>
-
-            <template #center>
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-search" />
-                    </InputIcon>
-                    <InputText placeholder="Search" />
-                </IconField>
-            </template>
-
-            <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
-        </Toolbar>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref([
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh'
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times'
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toolbar/CustomDoc.vue b/apps/labs/doc/toolbar/CustomDoc.vue
deleted file mode 100644
index 418b26c3f..000000000
--- a/apps/labs/doc/toolbar/CustomDoc.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A customized toolbar with navigation bar functionality.</p>
-    </DocSectionText>
-    <div class="card">
-        <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
-            <template #start>
-                <div class="flex items-center gap-2">
-                    <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-text-color)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="transparent"
-                        />
-                    </svg>
-                    <Button label="Files" text plain />
-                    <Button label="Edit" text plain />
-                    <Button label="View" text plain />
-                </div>
-            </template>
-
-            <template #end>
-                <div class="flex items-center gap-2">
-                    <Button label="Share" severity="contrast" size="small" />
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
-                </div>
-            </template>
-        </Toolbar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
-    <template #start>
-        <div class="flex items-center gap-2">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="..." fill="var(--p-text-color)" />
-                <path d="..." fill="transparent" />
-            </svg>
-            <Button label="Files" text plain />
-            <Button label="Edit" text plain />
-            <Button label="View" text plain />
-        </div>
-    </template>
-
-    <template #end>
-        <div class="flex items-center gap-2">
-            <Button label="Share" severity="contrast" size="small" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
-        </div>
-    </template>
-</Toolbar>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
-            <template #start>
-                <div class="flex items-center gap-2">
-                    <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-text-color)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="transparent"
-                        />
-                    </svg>
-                    <Button label="Files" text plain />
-                    <Button label="Edit" text plain />
-                    <Button label="View" text plain />
-                </div>
-            </template>
-
-            <template #end>
-                <div class="flex items-center gap-2">
-                    <Button label="Share" severity="contrast" size="small" />
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
-                </div>
-            </template>
-        </Toolbar>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
-            <template #start>
-                <div class="flex items-center gap-2">
-                    <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
-                        <path
-                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--p-text-color)"
-                        />
-                        <path
-                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="transparent"
-                        />
-                    </svg>
-                    <Button label="Files" text plain />
-                    <Button label="Edit" text plain />
-                    <Button label="View" text plain />
-                </div>
-            </template>
-
-            <template #end>
-                <div class="flex items-center gap-2">
-                    <Button label="Share" severity="contrast" size="small" />
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
-                </div>
-            </template>
-        </Toolbar>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toolbar/ImportDoc.vue b/apps/labs/doc/toolbar/ImportDoc.vue
deleted file mode 100644
index 963fcbf0d..000000000
--- a/apps/labs/doc/toolbar/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Toolbar from 'primevue/toolbar';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tooltip/AccessibilityDoc.vue b/apps/labs/doc/tooltip/AccessibilityDoc.vue
deleted file mode 100644
index 2cdbc1e71..000000000
--- a/apps/labs/doc/tooltip/AccessibilityDoc.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>Tooltip component uses <i>tooltip</i> role and when it becomes visible the generated id of the tooltip is defined as the <i>aria-describedby</i> of the target.</p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>escape</i>
-                        </td>
-                        <td>Closes the tooltip when focus is on the target.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/tooltip/AutoHideDoc.vue b/apps/labs/doc/tooltip/AutoHideDoc.vue
deleted file mode 100644
index ab27de8bb..000000000
--- a/apps/labs/doc/tooltip/AutoHideDoc.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to customize this behavior so that tooltip stays open when the cursor is on the tooltip.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tooltip/CustomDoc.vue b/apps/labs/doc/tooltip/CustomDoc.vue
deleted file mode 100644
index 264ece90c..000000000
--- a/apps/labs/doc/tooltip/CustomDoc.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A tooltip sample with a custom style and content.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center">
-        <Button
-            v-tooltip.bottom="{
-                value: 'PrimeVue Rocks',
-                pt: {
-                    arrow: {
-                        style: {
-                            borderBottomColor: 'var(--p-primary-color)'
-                        }
-                    },
-                    text: '!bg-primary !text-primary-contrast !font-medium'
-                }
-            }"
-            severity="secondary"
-            label="Button"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button
-    v-tooltip.bottom="{
-        value: 'PrimeVue Rocks',
-        pt: {
-            arrow: {
-                style: {
-                    borderBottomColor: 'var(--p-primary-color)'
-                }
-            },
-            text: '!bg-primary !text-primary-contrast !font-medium'
-        }
-    }"
-    label="Button"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center">
-        <Button
-            v-tooltip.bottom="{
-                value: 'PrimeVue Rocks',
-                pt: {
-                    arrow: {
-                        style: {
-                            borderBottomColor: 'var(--p-primary-color)'
-                        }
-                    },
-                    text: '!bg-primary !text-primary-contrast !font-medium'
-                }
-            }"
-            severity="secondary"
-            label="Button"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center">
-        <Button
-            v-tooltip.bottom="{
-                value: 'PrimeVue Rocks',
-                pt: {
-                    arrow: {
-                        style: {
-                            borderBottomColor: 'var(--p-primary-color)'
-                        }
-                    },
-                    text: '!bg-primary !text-primary-contrast !font-medium'
-                }
-            }"
-            severity="secondary"
-            label="Button"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tooltip/DelayDoc.vue b/apps/labs/doc/tooltip/DelayDoc.vue
deleted file mode 100644
index 06e6a43e0..000000000
--- a/apps/labs/doc/tooltip/DelayDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Delays to the enter and leave events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center">
-        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center">
-        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center">
-        <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tooltip/EventDoc.vue b/apps/labs/doc/tooltip/EventDoc.vue
deleted file mode 100644
index 7a90e5555..000000000
--- a/apps/labs/doc/tooltip/EventDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Event to display the tooltip is defined as a modifier, default event is hover.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center">
-        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center">
-        <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tooltip/ImportDoc.vue b/apps/labs/doc/tooltip/ImportDoc.vue
deleted file mode 100644
index d46f41a90..000000000
--- a/apps/labs/doc/tooltip/ImportDoc.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Tooltip from 'primevue/tooltip';
-
-app.directive('tooltip', Tooltip);
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tooltip/PositionDoc.vue b/apps/labs/doc/tooltip/PositionDoc.vue
deleted file mode 100644
index ff97c21d0..000000000
--- a/apps/labs/doc/tooltip/PositionDoc.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>There are four choices to position the tooltip, default value is <i>right</i> and alternatives are <i>top</i>, <i>bottom</i>, <i>left</i>.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
-        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
-        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
-        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
-<InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
-<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
-<InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
-        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
-        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
-        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
-        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
-        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
-        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/AccessibilityDoc.vue b/apps/labs/doc/tree/AccessibilityDoc.vue
deleted file mode 100644
index 3937308c6..000000000
--- a/apps/labs/doc/tree/AccessibilityDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The root list element has a <i>tree</i> role whereas each list item has a <i>treeitem</i> role along with <i>aria-label</i>,
-            <i>aria-selected</i> and <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. The container element of a treenode has the <i>group</i> role. Checkbox and toggle icons are
-            hidden from screen readers as their parent element with <i>treeitem</i> role and attributes are used instead for readers and keyboard support. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated
-            implicitly and added to each treeitem.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>
-                            Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
-                            page tab sequence.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>
-                            Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
-                            page tab sequence.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Selects the focused treenode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Selects the focused treenode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next treenode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous treenode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/tree/BasicDoc.vue b/apps/labs/doc/tree/BasicDoc.vue
deleted file mode 100644
index 325bd1d00..000000000
--- a/apps/labs/doc/tree/BasicDoc.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-const nodes = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/ControlledDoc.vue b/apps/labs/doc/tree/ControlledDoc.vue
deleted file mode 100644
index dc31eb2db..000000000
--- a/apps/labs/doc/tree/ControlledDoc.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that
-            <i>expandedKeys</i> also supports two-way binding with the v-model directive.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap gap-2 mb-6">
-            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-        </div>
-        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            expandedKeys: {},
-            code: {
-                basic: `
-<div class="flex flex-wrap gap-2 mb-6">
-    <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-    <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-</div>
-<Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-2 mb-6">
-            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-        </div>
-        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            expandedKeys: {}
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        expandAll() {
-            for (let node of this.nodes) {
-                this.expandNode(node);
-            }
-
-            this.expandedKeys = { ...this.expandedKeys };
-        },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            if (node.children && node.children.length) {
-                this.expandedKeys[node.key] = true;
-
-                for (let child of node.children) {
-                    this.expandNode(child);
-                }
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-2 mb-6">
-            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-        </div>
-        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-const nodes = ref(null);
-const expandedKeys = ref({});
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-
-const expandAll = () => {
-    for (let node of nodes.value) {
-        expandNode(node);
-    }
-
-    expandedKeys.value = { ...expandedKeys.value };
-};
-
-const collapseAll = () => {
-    expandedKeys.value = {};
-};
-
-const expandNode = (node) => {
-    if (node.children && node.children.length) {
-        expandedKeys.value[node.key] = true;
-
-        for (let child of node.children) {
-            expandNode(child);
-        }
-    }
-};
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        expandAll() {
-            for (let node of this.nodes) {
-                this.expandNode(node);
-            }
-
-            this.expandedKeys = { ...this.expandedKeys };
-        },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            if (node.children && node.children.length) {
-                this.expandedKeys[node.key] = true;
-
-                for (let child of node.children) {
-                    this.expandNode(child);
-                }
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/EventsDoc.vue b/apps/labs/doc/tree/EventsDoc.vue
deleted file mode 100644
index 52517471b..000000000
--- a/apps/labs/doc/tree/EventsDoc.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>An event is provided for each type of user interaction such as expand, collapse and selection.</p>
-    </DocSectionText>
-    <div class="card">
-        <Tree
-            v-model:selectionKeys="selectedKey"
-            :value="nodes"
-            selectionMode="single"
-            :metaKeySelection="false"
-            @nodeSelect="onNodeSelect"
-            @nodeUnselect="onNodeUnselect"
-            @nodeExpand="onNodeExpand"
-            @nodeCollapse="onNodeCollapse"
-            class="w-full md:w-[30rem]"
-        ></Tree>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            code: {
-                basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
-    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
-            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onNodeSelect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-        },
-        onNodeUnselect(node) {
-            this.$toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.label, life: 3000 });
-        },
-        onNodeExpand(node) {
-            this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
-        },
-        onNodeCollapse(node) {
-            this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
-            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-import { useToast } from "primevue/usetoast";
-
-const nodes = ref(null);
-const selectedKey = ref(null);
-const toast = useToast();
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-
-const onNodeSelect = (node) => {
-    toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-};
-
-const onNodeUnselect = (node) => {
-    toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.label, life: 3000 });
-};
-
-const onNodeExpand = (node) => {
-    toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
-};
-
-const onNodeCollapse (node) => {
-    toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
-};
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onNodeSelect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-        },
-        onNodeUnselect(node) {
-            this.$toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.label, life: 3000 });
-        },
-        onNodeExpand(node) {
-            this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
-        },
-        onNodeCollapse(node) {
-            this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/FilterDoc.vue b/apps/labs/doc/tree/FilterDoc.vue
deleted file mode 100644
index c8a2bf8d4..000000000
--- a/apps/labs/doc/tree/FilterDoc.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Filtering is enabled by adding the <i>filter</i> property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
-            <i>filterBy</i> property. In addition <i>filterMode</i> specifies the filtering strategy. In <i>lenient</i> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On
-            the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants.
-        </p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
-        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-export default {
-    data() {
-        return {
-            nodes: null,
-            expandedKeys: {},
-            code: {
-                basic: `
-<Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
-<Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
-        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-export default {
-    data() {
-        return {
-            nodes: null,
-            expandedKeys: {}
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then(data => this.nodes = data);
-    },
-    methods: {
-        expandAll() {
-            for (let node of this.nodes) {
-                this.expandNode(node);
-            }
-
-            this.expandedKeys = { ...this.expandedKeys };
-        },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            this.expandedKeys[node.key] = true;
-
-            if (node.children && node.children.length) {
-                for (let child of node.children) {
-                    this.expandNode(child);
-                }
-            }
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
-        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-const nodes = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then(data => nodes.value = data);
-});
-
-const expandedKeys = ref({});
-
-const expandAll = () => {
-    for (let node of nodes.value) {
-        expandNode(node);
-    }
-
-    expandedKeys.value = { ...expandedKeys.value };
-};
-
-const collapseAll = () => {
-    expandedKeys.value = {};
-};
-
-const expandNode = (node) => {
-    expandedKeys.value[node.key] = true;
-
-    if (node.children && node.children.length) {
-        for (let child of node.children) {
-            expandNode(child);
-        }
-    }
-};
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/ImportDoc.vue b/apps/labs/doc/tree/ImportDoc.vue
deleted file mode 100644
index 0d82a40de..000000000
--- a/apps/labs/doc/tree/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Tree from 'primevue/tree';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/LazyDoc.vue b/apps/labs/doc/tree/LazyDoc.vue
deleted file mode 100644
index 95916cc45..000000000
--- a/apps/labs/doc/tree/LazyDoc.vue
+++ /dev/null
@@ -1,392 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using <i>loading</i> property and <i>node-expand</i> method. Default value of <i>loadingMode</i> is <i>mask</i> and also
-            <i>icon</i> is available.
-        </p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
-            <label class="font-bold block mb-2">Mask Mode</label>
-            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
-        </div>
-        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
-            <label class="font-bold block mb-2">Icon Mode</label>
-            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            nodes2: null,
-            loading: false,
-            code: {
-                basic: `
-<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
-<Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
-            <label class="font-bold block mb-2">Mask Mode</label>
-            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
-        </div>
-        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
-            <label class="font-bold block mb-2">Icon Mode</label>
-            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            nodes2: null,
-            loading: false
-        };
-    },
-    mounted() {
-        this.loading = true;
-        this.nodes2 = this.initiateNodes2();
-
-        setTimeout(() => {
-            this.nodes = this.initiateNodes();
-            this.loading = false;
-            this.nodes2.map((node) => (node.loading = false));
-        }, 2000);
-    },
-    methods: {
-        onNodeExpand(node) {
-            if (!node.children) {
-                this.loading = true;
-
-                setTimeout(() => {
-                    let _node = { ...node };
-
-                    _node.children = [];
-
-                    for (let i = 0; i < 3; i++) {
-                        _node.children.push({
-                            key: node.key + '-' + i,
-                            label: 'Lazy ' + node.label + '-' + i
-                        });
-                    }
-
-                    let _nodes = { ...this.nodes };
-                    _nodes[parseInt(node.key, 10)] = _node;
-
-                    this.nodes = _nodes;
-                    this.loading = false;
-                }, 500);
-            }
-        },
-        onNodeExpand2(node) {
-            if (!node.children) {
-                node.loading = true;
-
-                setTimeout(() => {
-                    let _node = { ...node };
-
-                    _node.children = [];
-
-                    for (let i = 0; i < 3; i++) {
-                        _node.children.push({
-                            key: node.key + '-' + i,
-                            label: 'Lazy ' + node.label + '-' + i
-                        });
-                    }
-
-                    let _nodes = { ...this.nodes2 };
-
-                    _nodes[parseInt(node.key, 10)] = { ..._node, loading: false };
-
-                    this.nodes2 = _nodes;
-                }, 500);
-            }
-        },
-        initiateNodes() {
-            return [
-                {
-                    key: '0',
-                    label: 'Node 0',
-                    leaf: false
-                },
-                {
-                    key: '1',
-                    label: 'Node 1',
-                    leaf: false
-                },
-                {
-                    key: '2',
-                    label: 'Node 2',
-                    leaf: false
-                }
-            ];
-        },
-        initiateNodes2() {
-            return [
-                {
-                    key: '0',
-                    label: 'Node 0',
-                    leaf: false,
-                    loading: true
-                },
-                {
-                    key: '1',
-                    label: 'Node 1',
-                    leaf: false,
-                    loading: true
-                },
-                {
-                    key: '2',
-                    label: 'Node 2',
-                    leaf: false,
-                    loading: true
-                }
-            ];
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
-            <label class="font-bold block mb-2">Mask Mode</label>
-            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
-        </div>
-        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
-            <label class="font-bold block mb-2">Icon Mode</label>
-            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-
-const nodes = ref(null);
-const nodes2 = ref(null);
-const loading = ref(false);
-
-onMounted(() => {
-    loading.value = true;
-    nodes2.value = initiateNodes2();
-
-    setTimeout(() => {
-        nodes.value = initiateNodes();
-        loading.value = false;
-        nodes2.value.map((node) => (node.loading = false));
-    }, 2000);
-});
-
-const onNodeExpand = (node) => {
-    if (!node.children) {
-        loading.value = true;
-
-        setTimeout(() => {
-            let _node = { ...node };
-
-            _node.children = [];
-
-            for (let i = 0; i < 3; i++) {
-                _node.children.push({
-                    key: node.key + '-' + i,
-                    label: 'Lazy ' + node.label + '-' + i
-                });
-            }
-
-            let _nodes = { ...nodes.value };
-            _nodes[parseInt(node.key, 10)] = _node;
-
-            nodes.value = _nodes;
-            loading.value = false;
-        }, 500);
-    }
-};
-
-const onNodeExpand2 = (node) => {
-    if (!node.children) {
-        node.loading = true;
-
-        setTimeout(() => {
-            let _node = { ...node };
-
-            _node.children = [];
-
-            for (let i = 0; i < 3; i++) {
-                _node.children.push({
-                    key: node.key + '-' + i,
-                    label: 'Lazy ' + node.label + '-' + i
-                });
-            }
-
-            let _nodes = { ...nodes2.value };
-
-            _nodes[parseInt(node.key, 10)] = { ..._node, loading: false };
-
-            nodes2.value = _nodes;
-        }, 500);
-    }
-};
-
-const initiateNodes = () => {
-    return [
-        {
-            key: '0',
-            label: 'Node 0',
-            leaf: false
-        },
-        {
-            key: '1',
-            label: 'Node 1',
-            leaf: false
-        },
-        {
-            key: '2',
-            label: 'Node 2',
-            leaf: false
-        }
-    ];
-};
-
-const initiateNodes2 = () => {
-    return [
-        {
-            key: '0',
-            label: 'Node 0',
-            leaf: false,
-            loading: true
-        },
-        {
-            key: '1',
-            label: 'Node 1',
-            leaf: false,
-            loading: true
-        },
-        {
-            key: '2',
-            label: 'Node 2',
-            leaf: false,
-            loading: true
-        }
-    ];
-};
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.loading = true;
-        this.nodes2 = this.initiateNodes2();
-
-        setTimeout(() => {
-            this.nodes = this.initiateNodes();
-            this.loading = false;
-            this.nodes2.map((node) => (node.loading = false));
-        }, 2000);
-    },
-    methods: {
-        onNodeExpand(node) {
-            if (!node.children) {
-                this.loading = true;
-
-                setTimeout(() => {
-                    let _node = { ...node };
-
-                    _node.children = [];
-
-                    for (let i = 0; i < 3; i++) {
-                        _node.children.push({
-                            key: node.key + '-' + i,
-                            label: 'Lazy ' + node.label + '-' + i
-                        });
-                    }
-
-                    let _nodes = { ...this.nodes };
-
-                    _nodes[parseInt(node.key, 10)] = _node;
-
-                    this.nodes = _nodes;
-                    this.loading = false;
-                }, 500);
-            }
-        },
-        onNodeExpand2(node) {
-            if (!node.children) {
-                node.loading = true;
-
-                setTimeout(() => {
-                    let _node = { ...node };
-
-                    _node.children = [];
-
-                    for (let i = 0; i < 3; i++) {
-                        _node.children.push({
-                            key: node.key + '-' + i,
-                            label: 'Lazy ' + node.label + '-' + i
-                        });
-                    }
-
-                    let _nodes = { ...this.nodes2 };
-
-                    _nodes[parseInt(node.key, 10)] = { ..._node, loading: false };
-
-                    this.nodes2 = _nodes;
-                }, 500);
-            }
-        },
-        initiateNodes() {
-            return [
-                {
-                    key: '0',
-                    label: 'Node 0',
-                    leaf: false
-                },
-                {
-                    key: '1',
-                    label: 'Node 1',
-                    leaf: false
-                },
-                {
-                    key: '2',
-                    label: 'Node 2',
-                    leaf: false
-                }
-            ];
-        },
-        initiateNodes2() {
-            return [
-                {
-                    key: '0',
-                    label: 'Node 0',
-                    leaf: false,
-                    loading: true
-                },
-                {
-                    key: '1',
-                    label: 'Node 1',
-                    leaf: false,
-                    loading: true
-                },
-                {
-                    key: '2',
-                    label: 'Node 2',
-                    leaf: false,
-                    loading: true
-                }
-            ];
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/TemplateDoc.vue b/apps/labs/doc/tree/TemplateDoc.vue
deleted file mode 100644
index f89a4f43c..000000000
--- a/apps/labs/doc/tree/TemplateDoc.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p>
-    </DocSectionText>
-    <div class="card">
-        <Tree :value="nodes" class="w-full md:w-[30rem]">
-            <template #default="slotProps">
-                <b>{{ slotProps.node.label }}</b>
-            </template>
-            <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
-            </template>
-        </Tree>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: [
-                {
-                    key: '0',
-                    label: 'Introduction',
-                    children: [
-                        { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
-                        { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
-                        { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
-                        { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
-                    ]
-                },
-                {
-                    key: '1',
-                    label: 'Components In-Depth',
-                    children: [
-                        { key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/guide/components/registration.html#component-registration', type: 'url' },
-                        { key: '1-1', label: 'Props', data: 'https://vuejs.org/guide/components/props.html#props', type: 'url' },
-                        { key: '1-2', label: 'Components Events', data: 'https://vuejs.org/guide/components/events.html#component-events', type: 'url' },
-                        { key: '1-3', label: 'Slots', data: 'https://vuejs.org/guide/components/slots.html#slots', type: 'url' }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Tree :value="nodes" class="w-full md:w-[30rem]">
-    <template #default="slotProps">
-        <b>{{ slotProps.node.label }}</b>
-    </template>
-    <template #url="slotProps">
-        <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
-    </template>
-</Tree>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Tree :value="nodes" class="w-full md:w-[30rem]">
-            <template #default="slotProps">
-                <b>{{ slotProps.node.label }}</b>
-            </template>
-            <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
-            </template>
-        </Tree>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: [
-                {
-                    key: '0',
-                    label: 'Introduction',
-                    children: [
-                        { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
-                        { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
-                        { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
-                        { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
-                    ]
-                },
-                {
-                    key: '1',
-                    label: 'Components In-Depth',
-                    children: [
-                        { key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/guide/components/registration.html#component-registration', type: 'url' },
-                        { key: '1-1', label: 'Props', data: 'https://vuejs.org/guide/components/props.html#props', type: 'url' },
-                        { key: '1-2', label: 'Components Events', data: 'https://vuejs.org/guide/components/events.html#component-events', type: 'url' },
-                        { key: '1-3', label: 'Slots', data: 'https://vuejs.org/guide/components/slots.html#slots', type: 'url' }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Tree :value="nodes" class="w-full md:w-[30rem]">
-            <template #default="slotProps">
-                <b>{{ slotProps.node.label }}</b>
-            </template>
-            <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
-            </template>
-        </Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const nodes = ref([
-    {
-        key: '0',
-        label: 'Introduction',
-        children: [
-            { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
-            { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
-            { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
-                { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
-        ]
-    },
-    {
-        key: '1',
-        label: 'Components In-Depth',
-        children: [
-            { key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/guide/components/registration.html#component-registration', type: 'url' },
-            { key: '1-1', label: 'Props', data: 'https://vuejs.org/guide/components/props.html#props', type: 'url' },
-            { key: '1-2', label: 'Components Events', data: 'https://vuejs.org/guide/components/events.html#component-events', type: 'url' },
-            { key: '1-3', label: 'Slots', data: 'https://vuejs.org/guide/components/slots.html#slots', type: 'url' }
-        ]
-    }
-]);
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Introduction',
-    children: [
-        { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
-        { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
-        { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
-        { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
-    ]
-},
-{
-    key: '1',
-    label: 'Components In-Depth',
-    children: [
-        { key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/guide/components/registration.html#component-registration', type: 'url' },
-        { key: '1-1', label: 'Props', data: 'https://vuejs.org/guide/components/props.html#props', type: 'url' },
-        { key: '1-2', label: 'Components Events', data: 'https://vuejs.org/guide/components/events.html#component-events', type: 'url' },
-        { key: '1-3', label: 'Slots', data: 'https://vuejs.org/guide/components/slots.html#slots', type: 'url' }
-    ]
-},
-...`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/selection/CheckboxDoc.vue b/apps/labs/doc/tree/selection/CheckboxDoc.vue
deleted file mode 100644
index ac69506d0..000000000
--- a/apps/labs/doc/tree/selection/CheckboxDoc.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
-        <p>
-            In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node object to indicate
-            selection.
-        </p>
-    </DocSectionText>
-    <div class="card">
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            code: {
-                basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onNodeSelect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-        },
-        onNodeUnselect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-import { useToast } from "primevue/usetoast";
-
-const nodes = ref(null);
-const selectedKey = ref(null);
-const toast = useToast();
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-
-const onNodeSelect = (node) => {
-    toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-};
-
-const onNodeUnselect = (node) => {
-    toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
-};
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onNodeSelect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-        },
-        onNodeUnselect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/selection/MultipleDoc.vue b/apps/labs/doc/tree/selection/MultipleDoc.vue
deleted file mode 100644
index e02fd4bc5..000000000
--- a/apps/labs/doc/tree/selection/MultipleDoc.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is not necessary to add to existing selections. When the optional
-            <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new node requires meta key to be present. Note that in touch enabled devices, Tree always ignores metaKey.
-        </p>
-        <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex items-center mb-6 gap-2">
-            <ToggleSwitch v-model="checked" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            checked: false,
-            nodes: null,
-            selectedKey: null,
-            code: {
-                basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes"
-    selectionMode="multiple" :metaKeySelection="checked"></Tree>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex items-center mb-6 gap-2">
-            <ToggleSwitch v-model="checked" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            checked: false,
-            nodes: null,
-            selectedKey: null
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex items-center mb-6 gap-2">
-            <ToggleSwitch v-model="checked" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-const nodes = ref(null);
-const selectedKey = ref(null);
-const checked = ref(false);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/tree/selection/SingleDoc.vue b/apps/labs/doc/tree/selection/SingleDoc.vue
deleted file mode 100644
index 6ebc73094..000000000
--- a/apps/labs/doc/tree/selection/SingleDoc.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
-    </DocSectionText>
-    <div class="card">
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            code: {
-                basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onNodeSelect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-        },
-        onNodeUnselect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-import { useToast } from "primevue/usetoast";
-
-const nodes = ref(null);
-const selectedKey = ref(null);
-const toast = useToast();
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-
-const onNodeSelect = (node) => {
-    toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-};
-
-const onNodeUnselect = (node) => {
-    toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
-};
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onNodeSelect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.label, life: 3000 });
-        },
-        onNodeUnselect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/AccessibilityDoc.vue b/apps/labs/doc/treeselect/AccessibilityDoc.vue
deleted file mode 100644
index 7667de90e..000000000
--- a/apps/labs/doc/treeselect/AccessibilityDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The treeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The
-            relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
-        </p>
-        <p>
-            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
-            <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. Checkbox and toggle icons are hidden from screen readers as their parent element with <i>treeitem</i> role and attributes
-            are used instead for readers and keyboard support. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each
-            treeitem.
-        </p>
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
-
-        <h3>Closed State Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the treeselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Popup Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><i>tab</i></td>
-                        <td>Moves focus to the next focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous focusable element in the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td><i>enter</i></td>
-                        <td>Selects the focused option, closes the popup if selection mode is single.</td>
-                    </tr>
-                    <tr>
-                        <td><i>space</i></td>
-                        <td>Selects the focused option, closes the popup if selection mode is single.</td>
-                    </tr>
-                    <tr>
-                        <td><i>escape</i></td>
-                        <td>Closes the popup, moves focus to the treeselect element.</td>
-                    </tr>
-                    <tr>
-                        <td><i>down arrow</i></td>
-                        <td>Moves focus to the next treenode.</td>
-                    </tr>
-                    <tr>
-                        <td><i>up arrow</i></td>
-                        <td>Moves focus to the previous treenode.</td>
-                    </tr>
-                    <tr>
-                        <td><i>right arrow</i></td>
-                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
-                    </tr>
-                    <tr>
-                        <td><i>left arrow</i></td>
-                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<span id="dd1">Options</span>
-<TreeSelect aria-labelledby="dd1" />
-
-<TreeSelect aria-label="Options" />
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/BasicDoc.vue b/apps/labs/doc/treeselect/BasicDoc.vue
deleted file mode 100644
index 87b8dd5e6..000000000
--- a/apps/labs/doc/treeselect/BasicDoc.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            TreeSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Internally <PrimeVueNuxtLink to="/tree">Tree</PrimeVueNuxtLink> component is used so the options model is based on
-            TreeNode API.
-        </p>
-        <p>In single selection mode, value binding should be the <i>key</i> value of a node.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/CheckboxDoc.vue b/apps/labs/doc/treeselect/CheckboxDoc.vue
deleted file mode 100644
index 425f963d1..000000000
--- a/apps/labs/doc/treeselect/CheckboxDoc.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
-        <p>
-            In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node object to indicate
-            selection.
-        </p>
-    </DocSectionText>
-    <DocSectionCode :code="activeNodes" hideToggleCode importCode hideStackBlitz v-bind="$attrs" />
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Items" class="md:w-80 w-full" />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            activeNodes: {
-                basic: `
-{
-    '0-0': {
-        partialChecked: false,
-        checked: true
-    }
-}
-`
-            },
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/ClearIconDoc.vue b/apps/labs/doc/treeselect/ClearIconDoc.vue
deleted file mode 100644
index dd361db2d..000000000
--- a/apps/labs/doc/treeselect/ClearIconDoc.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the TreeSelect.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" showClear :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/DisabledDoc.vue b/apps/labs/doc/treeselect/DisabledDoc.vue
deleted file mode 100644
index 449283924..000000000
--- a/apps/labs/doc/treeselect/DisabledDoc.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/FilledDoc.vue b/apps/labs/doc/treeselect/FilledDoc.vue
deleted file mode 100644
index 40f92741d..000000000
--- a/apps/labs/doc/treeselect/FilledDoc.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/FilterDoc.vue b/apps/labs/doc/treeselect/FilterDoc.vue
deleted file mode 100644
index 38faef2a2..000000000
--- a/apps/labs/doc/treeselect/FilterDoc.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Filtering is enabled by adding the <i>filter</i> property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
-            <i>filterBy</i> property. In addition <i>filterMode</i> specifies the filtering strategy. In <i>lenient</i> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On
-            the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants.
-        </p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-        <TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-<TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-        <TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-        <TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/FloatLabelDoc.vue b/apps/labs/doc/treeselect/FloatLabelDoc.vue
deleted file mode 100644
index a9b6d660a..000000000
--- a/apps/labs/doc/treeselect/FloatLabelDoc.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-80">
-            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="in">
-            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="on">
-            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            value1: null,
-            value2: null,
-            value3: null,
-            code: {
-                basic: `
-<FloatLabel class="w-full md:w-80">
-    <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
-    <label for="over_label">Over Label</label>
-</FloatLabel>
-
-<FloatLabel class="w-full md:w-80" variant="in">
-    <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
-    <label for="in_label">In Label</label>
-</FloatLabel>
-
-<FloatLabel class="w-full md:w-80" variant="on">
-    <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
-    <label for="on_label">On Label</label>
-</FloatLabel>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-80">
-            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="in">
-            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="on">
-            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            value1: null,
-            value2: null,
-            value3: null
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <FloatLabel class="w-full md:w-80">
-            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
-            <label for="over_label">Over Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="in">
-            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
-            <label for="in_label">In Label</label>
-        </FloatLabel>
-
-        <FloatLabel class="w-full md:w-80" variant="on">
-            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
-            <label for="on_label">On Label</label>
-        </FloatLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/FormsDoc.vue b/apps/labs/doc/treeselect/FormsDoc.vue
deleted file mode 100644
index cb809e1f2..000000000
--- a/apps/labs/doc/treeselect/FormsDoc.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TreeSelect is used with the <i>v-model</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
-            <div class="flex flex-col gap-1">
-                <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                node: null
-            },
-            resolver: zodResolver(
-                z.object({
-                    node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
-                })
-            ),
-            nodes: null,
-            code: {
-                basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
-    <div class="flex flex-col gap-1">
-        <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-        <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
-    </div>
-    <Button type="submit" severity="secondary" label="Submit" />
-</Form>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
-            <div class="flex flex-col gap-1">
-                <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script>
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            initialValues: {
-                node: null
-            },
-            resolver: zodResolver(
-                z.object({
-                    node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
-                })
-            ),
-            nodes: null,
-        }
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
-            <div class="flex flex-col gap-1">
-                <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
-            </div>
-            <Button type="submit" severity="secondary" label="Submit" />
-        </Form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { useToast } from "primevue/usetoast";
-import { z } from 'zod';
-import { NodeService } from '/service/NodeService';
-
-const toast = useToast();
-const initialValues = ref({
-    node: null
-});
-const resolver = ref(zodResolver(
-    z.object({
-        node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
-    })
-));
-
-const onFormSubmit = ({ valid }) => {
-    if (valid) {
-        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-    }
-};
-<\/script>
-        `
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onFormSubmit({ valid }) {
-            if (valid) {
-                this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
-            }
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/IftaLabelDoc.vue b/apps/labs/doc/treeselect/IftaLabelDoc.vue
deleted file mode 100644
index 065be229c..000000000
--- a/apps/labs/doc/treeselect/IftaLabelDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
-            <label for="t_file">File</label>
-        </IftaLabel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            code: {
-                basic: `
-<IftaLabel class="w-full md:w-80">
-    <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
-    <label for="t_file">File</label>
-</IftaLabel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
-            <label for="t_file">File</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <IftaLabel class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
-            <label for="t_file">File</label>
-        </IftaLabel>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/ImportDoc.vue b/apps/labs/doc/treeselect/ImportDoc.vue
deleted file mode 100644
index 14ccf5097..000000000
--- a/apps/labs/doc/treeselect/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import TreeSelect from 'primevue/treeselect';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/InvalidDoc.vue b/apps/labs/doc/treeselect/InvalidDoc.vue
deleted file mode 100644
index e90eec608..000000000
--- a/apps/labs/doc/treeselect/InvalidDoc.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
-        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue1: {},
-            selectedValue2: {},
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
-<TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
-        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue1: {},
-            selectedValue2: {},
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
-        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue1 = ref({});
-const selectedValue2 = ref({});
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/LazyDoc.vue b/apps/labs/doc/treeselect/LazyDoc.vue
deleted file mode 100644
index 054997ad6..000000000
--- a/apps/labs/doc/treeselect/LazyDoc.vue
+++ /dev/null
@@ -1,358 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using <i>loading</i> property and <i>node-expand</i> method. Default value of <i>loadingMode</i> is <i>mask</i> and also
-            <i>icon</i> is available.
-        </p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
-        <TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            nodes2: null,
-            loading: false,
-            selectedValue: null,
-            selectedValue2: null,
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
-<TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
-        <TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            nodes2: null,
-            loading: false,
-            selectedValue: null,
-            selectedValue2: null,
-        }
-    },
-    mounted() {
-        this.loading = true;
-        this.nodes2 = this.initiateNodes2();
-
-        setTimeout(() => {
-            this.nodes = this.initiateNodes();
-            this.loading = false;
-            this.nodes2.map((node) => (node.loading = false));
-        }, 2000);
-    },
-    methods: {
-        onNodeExpand(node) {
-            if (!node.children) {
-                this.loading = true;
-
-                setTimeout(() => {
-                    let _node = { ...node };
-
-                    _node.children = [];
-
-                    for (let i = 0; i < 3; i++) {
-                        _node.children.push({
-                            key: node.key + '-' + i,
-                            label: 'Lazy ' + node.label + '-' + i
-                        });
-                    }
-
-                    this.nodes[parseInt(node.key, 10)] = _node;
-                    this.loading = false;
-                }, 500);
-            }
-        },
-        onNodeExpand2(node) {
-            if (!node.children) {
-                node.loading = true;
-
-                setTimeout(() => {
-                    let _node = { ...node };
-
-                    _node.children = [];
-
-                    for (let i = 0; i < 3; i++) {
-                        _node.children.push({
-                            key: node.key + '-' + i,
-                            label: 'Lazy ' + node.label + '-' + i
-                        });
-                    }
-
-                    this.nodes2[parseInt(node.key, 10)] = { ..._node, loading: false };
-                }, 500);
-            }
-        },
-        initiateNodes() {
-            return [
-                {
-                    key: '0',
-                    label: 'Node 0',
-                    leaf: false
-                },
-                {
-                    key: '1',
-                    label: 'Node 1',
-                    leaf: false
-                },
-                {
-                    key: '2',
-                    label: 'Node 2',
-                    leaf: false
-                }
-            ];
-        },
-        initiateNodes2() {
-            return [
-                {
-                    key: '0',
-                    label: 'Node 0',
-                    leaf: false,
-                    loading: true
-                },
-                {
-                    key: '1',
-                    label: 'Node 1',
-                    leaf: false,
-                    loading: true
-                },
-                {
-                    key: '2',
-                    label: 'Node 2',
-                    leaf: false,
-                    loading: true
-                }
-            ];
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center items-end gap-4">
-        <TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
-        <TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-
-const nodes = ref(null);
-const nodes2 = ref(null);
-const selectedValue = ref(null);
-const selectedValue2 = ref(null);
-const loading = ref(false);
-
-onMounted(() => {
-    loading.value = true;
-    nodes2.value = initiateNodes2();
-
-    setTimeout(() => {
-        nodes.value = initiateNodes();
-        loading.value = false;
-        nodes2.value.map((node) => (node.loading = false));
-    }, 2000);
-});
-
-const onNodeExpand = (node) => {
-    if (!node.children) {
-        loading.value = true;
-
-        setTimeout(() => {
-            let _node = { ...node };
-
-            _node.children = [];
-
-            for (let i = 0; i < 3; i++) {
-                _node.children.push({
-                    key: node.key + '-' + i,
-                    label: 'Lazy ' + node.label + '-' + i
-                });
-            }
-
-            nodes.value[parseInt(node.key, 10)] = _node;
-            loading.value = false;
-        }, 500);
-    }
-};
-
-const onNodeExpand2 = (node) => {
-    if (!node.children) {
-        node.loading = true;
-
-        setTimeout(() => {
-            let _node = { ...node };
-
-            _node.children = [];
-
-            for (let i = 0; i < 3; i++) {
-                _node.children.push({
-                    key: node.key + '-' + i,
-                    label: 'Lazy ' + node.label + '-' + i
-                });
-            }
-
-            nodes2.value[parseInt(node.key, 10)] = { ..._node, loading: false };
-        }, 500);
-    }
-};
-
-const initiateNodes = () => {
-    return [
-        {
-            key: '0',
-            label: 'Node 0',
-            leaf: false
-        },
-        {
-            key: '1',
-            label: 'Node 1',
-            leaf: false
-        },
-        {
-            key: '2',
-            label: 'Node 2',
-            leaf: false
-        }
-    ];
-};
-
-const initiateNodes2 = () => {
-    return [
-        {
-            key: '0',
-            label: 'Node 0',
-            leaf: false,
-            loading: true
-        },
-        {
-            key: '1',
-            label: 'Node 1',
-            leaf: false,
-            loading: true
-        },
-        {
-            key: '2',
-            label: 'Node 2',
-            leaf: false,
-            loading: true
-        }
-    ];
-};
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.loading = true;
-        this.nodes2 = this.initiateNodes2();
-
-        setTimeout(() => {
-            this.nodes = this.initiateNodes();
-            this.loading = false;
-            this.nodes2.map((node) => (node.loading = false));
-        }, 2000);
-    },
-    methods: {
-        onNodeExpand(node) {
-            if (!node.children) {
-                this.loading = true;
-
-                setTimeout(() => {
-                    let _node = { ...node };
-
-                    _node.children = [];
-
-                    for (let i = 0; i < 3; i++) {
-                        _node.children.push({
-                            key: node.key + '-' + i,
-                            label: 'Lazy ' + node.label + '-' + i
-                        });
-                    }
-
-                    this.nodes[parseInt(node.key, 10)] = _node;
-                    this.loading = false;
-                }, 500);
-            }
-        },
-        onNodeExpand2(node) {
-            if (!node.children) {
-                node.loading = true;
-
-                setTimeout(() => {
-                    let _node = { ...node };
-
-                    _node.children = [];
-
-                    for (let i = 0; i < 3; i++) {
-                        _node.children.push({
-                            key: node.key + '-' + i,
-                            label: 'Lazy ' + node.label + '-' + i
-                        });
-                    }
-
-                    this.nodes2[parseInt(node.key, 10)] = { ..._node, loading: false };
-                }, 500);
-            }
-        },
-        initiateNodes() {
-            return [
-                {
-                    key: '0',
-                    label: 'Node 0',
-                    leaf: false
-                },
-                {
-                    key: '1',
-                    label: 'Node 1',
-                    leaf: false
-                },
-                {
-                    key: '2',
-                    label: 'Node 2',
-                    leaf: false
-                }
-            ];
-        },
-        initiateNodes2() {
-            return [
-                {
-                    key: '0',
-                    label: 'Node 0',
-                    leaf: false,
-                    loading: true
-                },
-                {
-                    key: '1',
-                    label: 'Node 1',
-                    leaf: false,
-                    loading: true
-                },
-                {
-                    key: '2',
-                    label: 'Node 2',
-                    leaf: false,
-                    loading: true
-                }
-            ];
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/MultipleDoc.vue b/apps/labs/doc/treeselect/MultipleDoc.vue
deleted file mode 100644
index e99bda7bb..000000000
--- a/apps/labs/doc/treeselect/MultipleDoc.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is not necessary to add to existing selections. When the optional
-            <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new node requires meta key to be present. Note that in touch enabled devices, TreeSelect always ignores metaKey.
-        </p>
-        <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
-    </DocSectionText>
-    <DocSectionCode :code="activeNodes" hideToggleCode importCode hideStackBlitz v-bind="$attrs" />
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            activeNodes: {
-                basic: `
-{
-    '0-0': true,
-    '0-1-0': true
-}
-`
-            },
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/SizesDoc.vue b/apps/labs/doc/treeselect/SizesDoc.vue
deleted file mode 100644
index 7c6981700..000000000
--- a/apps/labs/doc/treeselect/SizesDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TreeSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
-        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
-        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            nodes: null,
-            code: {
-                basic: `
-<TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
-<TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
-<TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
-        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
-        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            value1: null,
-            value2: null,
-            value3: null,
-            nodes: null
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
-        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
-        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const nodes = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treeselect/TemplateDoc.vue b/apps/labs/doc/treeselect/TemplateDoc.vue
deleted file mode 100644
index 786851b70..000000000
--- a/apps/labs/doc/treeselect/TemplateDoc.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TreeSelect offers multiple slots for customization through templating.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
-            <template #dropdownicon>
-                <i class="pi pi-search" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Files</div>
-            </template>
-            <template #footer>
-                <div class="px-3 pt-1 pb-2 flex justify-between">
-                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
-                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </TreeSelect>
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
-    <template #dropdownicon>
-        <i class="pi pi-search" />
-    </template>
-    <template #header>
-        <div class="font-medium px-3 py-2">Available Files</div>
-    </template>
-    <template #footer>
-        <div class="px-3 pt-1 pb-2 flex justify-between">
-            <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
-            <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
-        </div>
-    </template>
-</TreeSelect>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
-            <template #dropdownicon>
-                <i class="pi pi-search" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Files</div>
-            </template>
-            <template #footer>
-                <div class="px-3 pt-1 pb-2 flex justify-between">
-                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
-                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </TreeSelect>
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
-            <template #dropdownicon>
-                <i class="pi pi-search" />
-            </template>
-            <template #header>
-                <div class="font-medium px-3 py-2">Available Files</div>
-            </template>
-            <template #footer>
-                <div class="px-3 pt-1 pb-2 flex justify-between">
-                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
-                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
-                </div>
-            </template>
-        </TreeSelect>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/AccessibilityDoc.vue b/apps/labs/doc/treetable/AccessibilityDoc.vue
deleted file mode 100644
index c98490b02..000000000
--- a/apps/labs/doc/treetable/AccessibilityDoc.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            DataTable uses a <i>treegrid</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table for
-            readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers utilizer
-            <i>aria-sort</i> attribute either set to "ascending" or "descending".
-        </p>
-
-        <p>Row elements manage <i>aria-expanded</i> for state along with <i>aria-posinset</i>, <i>aria-setsize</i> and <i>aria-level</i> attribute to define the hierachy.</p>
-
-        <p>When selection is enabled, <i>aria-selected</i> is set to true on a row. In checkbox mode, TreeTable component uses a hidden native checkbox element.</p>
-
-        <p>Editable cells use custom templating so you need to manage aria roles and attributes manually if required.</p>
-
-        <p>Paginator is a standalone component used inside the DataTable, refer to the <PrimeVueNuxtLink to="/paginator">paginator</PrimeVueNuxtLink> for more information about the accessibility features.</p>
-
-        <h3>Sortable Headers Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Moves through the headers.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Sorts the column.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Sorts the column.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>
-                            Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
-                            page tab sequence.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td><i>shift</i> + <i>tab</i></td>
-                        <td>
-                            Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
-                            page tab sequence.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Selects the focused treenode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Selects the focused treenode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>down arrow</i>
-                        </td>
-                        <td>Moves focus to the next treenode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>up arrow</i>
-                        </td>
-                        <td>Moves focus to the previous treenode.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first same-level node.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last same-level node.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/treetable/BasicDoc.vue b/apps/labs/doc/treetable/BasicDoc.vue
deleted file mode 100644
index 0089b701b..000000000
--- a/apps/labs/doc/treetable/BasicDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TreeTable requires a collection of <i>TreeNode</i> instances as a <i>value</i> and <i>Column</i> components as children for the representation. The column with the element to toggle a node should have <i>expander</i> enabled.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/ColumnToggleDoc.vue b/apps/labs/doc/treetable/ColumnToggleDoc.vue
deleted file mode 100644
index 52b85d73b..000000000
--- a/apps/labs/doc/treetable/ColumnToggleDoc.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-                <template #header>
-                    <div style="text-align: left">
-                        <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip" />
-                    </div>
-                </template>
-                <Column field="name" header="Name" :expander="true"></Column>
-                <Column v-for="col of selectedColumns" :key="col.field" :field="col.field" :header="col.header"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedColumns: null,
-            columns: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" tableStyle="min-width: 50rem">
-    <template #header>
-        <div style="text-align:left">
-            <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
-        </div>
-    </template>
-    <Column field="name" header="Name" :expander="true"></Column>
-    <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <template #header>
-                <div style="text-align:left">
-                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
-                </div>
-            </template>
-            <Column field="name" header="Name" :expander="true"></Column>
-            <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedColumns: null,
-            columns: null,
-        }
-    },
-    created() {
-        this.columns = [
-            { field: 'size', header: 'Size' },
-            { field: 'type', header: 'Type' }
-        ];
-
-        this.selectedColumns = this.columns;
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onToggle(value) {
-            this.selectedColumns = this.columns.filter(col => value.includes(col));
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <template #header>
-                <div style="text-align:left">
-                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
-                </div>
-            </template>
-            <Column field="name" header="Name" :expander="true"></Column>
-            <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const columns = ref([
-    {field: 'size', header: 'Size'},
-    {field: 'type', header: 'Type'}
-]);
-const nodes = ref();
-const selectedColumns = ref(columns.value);
-const onToggle = (val) => {
-    selectedColumns.value = columns.value.filter(col => val.includes(col));
-};
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    created() {
-        this.columns = [
-            { field: 'size', header: 'Size' },
-            { field: 'type', header: 'Type' }
-        ];
-
-        this.selectedColumns = this.columns;
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        },
-        onToggle(value) {
-            this.selectedColumns = this.columns.filter((col) => value.includes(col));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/ContextMenuDoc.vue b/apps/labs/doc/treetable/ContextMenuDoc.vue
deleted file mode 100644
index 4fbd32f6e..000000000
--- a/apps/labs/doc/treetable/ContextMenuDoc.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            TreeTable has exclusive integration with ContextMenu using the <i>contextMenu</i> event to open a menu on right click alont with <i>contextMenuSelection</i> property and <i>row-contextmenu</i> event to control the selection via the menu.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
-            <TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedNode: null,
-            menuModel: [
-                { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewNode(this.selectedNode) },
-                { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteNode(this.selectedNode) }
-            ],
-            code: {
-                basic: `
-<ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
-<TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
-        <TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-        <Toast />
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedNode: null,
-            menuModel: [
-                { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewNode(this.selectedNode) },
-                { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteNode(this.selectedNode) }
-            ]
-        }
-    },
-    methods: {
-        onRowContextMenu(event) {
-            this.$refs.cm.show(event.originalEvent);
-        },
-        viewNode(node) {
-            this.$toast.add({ severity: 'info', summary: 'Node Selected', detail: node.data.name, life: 3000 });
-        },
-        deleteNode(node) {
-            this.nodes = this.filterNodes(this.nodes, node.key);
-            this.$toast.add({ severity: 'error', summary: 'Node Deleted', detail: node.data.name, life: 3000 });
-            this.selectedNode = null;
-        },
-        filterNodes(nodes, keyToRemove) {
-            return nodes
-                .map((node) => {
-                    if (node.key === keyToRemove) {
-                        return null;
-                    }
-
-                    if (node.children) {
-                        const filteredChildren = this.filterNodes(node.children, keyToRemove);
-
-                        return { ...node, children: filteredChildren };
-                    }
-
-                    return node;
-                })
-                .filter((node) => node !== null);
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
-        <TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const cm = ref();
-const toast = useToast();
-const nodes = ref();
-const selectedNode = ref();
-const menuModel = ref(
-    [
-        { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewNode(this.selectedNode) },
-        { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteNode(this.selectedNode) }
-    ]
-);
-
-const onRowContextMenu = (event) => {
-    cm.value.show(event.originalEvent);
-};
-
-const viewNode = (product) => {
-    toast.add({severity: 'info', summary: 'Node Selected', detail: node.data.name, life: 3000});
-};
-
-const deleteProduct = (node) => {
-    nodes.value = filterNodes(nodes.value, node.key);
-    toast.add({severity: 'error', summary: 'Node Deleted', detail: node.data.name, life: 3000});
-    selectedProduct.value = null;
-};
-
-const filterNodes = (nodeList, keyToRemove) => {
-    return nodes
-        .map((node) => {
-            if (node.key === keyToRemove) {
-                return null;
-            }
-
-            if (node.children) {
-                const filteredChildren = filterNodes(node.children, keyToRemove);
-
-                return { ...node, children: filteredChildren };
-            }
-
-            return node;
-        })
-        .filter((node) => node !== null);
-}
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        },
-        onRowContextMenu(event) {
-            this.$refs.cm.show(event.originalEvent);
-        },
-        viewNode(node) {
-            this.$toast.add({ severity: 'info', summary: 'Node Selected', detail: node.data.name, life: 3000 });
-        },
-        deleteNode(node) {
-            this.nodes = this.filterNodes(this.nodes, node.key);
-            this.$toast.add({ severity: 'error', summary: 'Node Deleted', detail: node.data.name, life: 3000 });
-            this.selectedNode = null;
-        },
-        filterNodes(nodes, keyToRemove) {
-            return nodes
-                .map((node) => {
-                    if (node.key === keyToRemove) {
-                        return null;
-                    }
-
-                    if (node.children) {
-                        const filteredChildren = this.filterNodes(node.children, keyToRemove);
-
-                        return { ...node, children: filteredChildren };
-                    }
-
-                    return node;
-                })
-                .filter((node) => node !== null);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/ControlledDoc.vue b/apps/labs/doc/treetable/ControlledDoc.vue
deleted file mode 100644
index 68bf18bf4..000000000
--- a/apps/labs/doc/treetable/ControlledDoc.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Expansion state is controlled with <i>expandedKeys</i> property. The <i>expandedKeys</i> should be an object whose keys refer to the node key and values represent the expanded state e.g. <i>&#123;'0-0': true&#125;</i>.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <Button @click="toggleApplications" label="Toggle Applications" />
-            <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            expandedKeys: {},
-            code: {
-                basic: `
-<Button @click="toggleApplications" label="Toggle Applications" />
-<TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Button @click="toggleApplications" label="Toggle Applications" />
-        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            expandedKeys: {}
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        toggleApplications() {
-            let _expandedKeys = { ...this.expandedKeys };
-
-            if (_expandedKeys['0']) delete _expandedKeys['0'];
-            else _expandedKeys['0'] = true;
-
-            this.expandedKeys = _expandedKeys;
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Button @click="toggleApplications" label="Toggle Applications" />
-        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-const expandedKeys = ref({});
-const toggleApplications = () => {
-    let _expandedKeys = { ...expandedKeys.value };
-
-    if (_expandedKeys['0']) delete _expandedKeys['0'];
-    else _expandedKeys['0'] = true;
-
-    expandedKeys.value = _expandedKeys;
-}
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        },
-        toggleApplications() {
-            let _expandedKeys = { ...this.expandedKeys };
-
-            if (_expandedKeys['0']) delete _expandedKeys['0'];
-            else _expandedKeys['0'] = true;
-
-            this.expandedKeys = _expandedKeys;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/DynamicColumnsDoc.vue b/apps/labs/doc/treetable/DynamicColumnsDoc.vue
deleted file mode 100644
index c05eb61d6..000000000
--- a/apps/labs/doc/treetable/DynamicColumnsDoc.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Columns can be created programmatically.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            columns: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" tableStyle="min-width: 50rem">
-    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            columns: null
-        }
-    },
-    created() {
-        this.columns = [
-            { field: 'name', header: 'Name', expander: true },
-            { field: 'size', header: 'Size' },
-            { field: 'type', header: 'Type' }
-        ];
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-const columns = ref([
-    { field: 'name', header: 'Name', expander: true },
-    { field: 'size', header: 'Size' },
-    { field: 'type', header: 'Type' }
-]);
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    created() {
-        this.columns = [
-            { field: 'name', header: 'Name', expander: true },
-            { field: 'size', header: 'Size' },
-            { field: 'type', header: 'Type' }
-        ];
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/FilterDoc.vue b/apps/labs/doc/treetable/FilterDoc.vue
deleted file mode 100644
index 74c5c1e7e..000000000
--- a/apps/labs/doc/treetable/FilterDoc.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Filtering is enabled by adding the <i>filter</i> property to a Column. The <i>filterMode</i> specifies the filtering strategy, in <i>lenient</i> mode when the query matches a node, children of the node are not searched further as all
-            descendants of the node are included. On the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants. A general filled called <i>globalFilter</i> is also provided to search all columns that
-            support filtering.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex justify-center mb-6">
-                <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
-            </div>
-            <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
-                <template #header>
-                    <div class="flex justify-end">
-                        <IconField>
-                            <InputIcon class="pi pi-search" />
-                            <InputText v-model="filters['global']" placeholder="Global Search" />
-                        </IconField>
-                    </div>
-                </template>
-                <Column field="name" header="Name" expander style="min-width: 12rem">
-                    <template #filter>
-                        <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
-                    </template>
-                </Column>
-                <Column field="size" header="Size" style="min-width: 12rem">
-                    <template #filter>
-                        <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
-                    </template>
-                </Column>
-                <Column field="type" header="Type" style="min-width: 12rem">
-                    <template #filter>
-                        <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
-                    </template>
-                </Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            filters: {},
-            filterMode: { label: 'Lenient', value: 'lenient' },
-            filterOptions: [
-                { label: 'Lenient', value: 'lenient' },
-                { label: 'Strict', value: 'strict' }
-            ],
-            code: {
-                basic: `
-<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
-<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
-    <template #header>
-        <div class="flex justify-end">
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText v-model="filters['global']" placeholder="Global Search" />
-            </IconField>
-        </div>
-    </template>
-    <Column field="name" header="Name" expander style="min-width: 12rem">
-        <template #filter>
-            <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
-        </template>
-    </Column>
-    <Column field="size" header="Size" style="min-width: 12rem">
-        <template #filter>
-            <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
-        </template>
-    </Column>
-    <Column field="type" header="Type" style="min-width: 12rem">
-        <template #filter>
-            <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
-        </template>
-    </Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex justify-center mb-6">
-            <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
-        </div>
-        <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
-            <template #header>
-                <div class="flex justify-end">
-                    <IconField>
-                        <InputIcon class="pi pi-search" />
-                        <InputText v-model="filters['global']" placeholder="Global Search" />
-                    </IconField>
-                </div>
-            </template>
-            <Column field="name" header="Name" expander style="min-width: 12rem">
-                <template #filter>
-                    <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
-                </template>
-            </Column>
-            <Column field="size" header="Size" style="min-width: 12rem">
-                <template #filter>
-                    <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
-                </template>
-            </Column>
-            <Column field="type" header="Type" style="min-width: 12rem">
-                <template #filter>
-                    <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
-                </template>
-            </Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            filters: {},
-            filterMode: { label: 'Lenient', value: 'lenient' },
-            filterOptions: [
-                { label: 'Lenient', value: 'lenient' },
-                { label: 'Strict', value: 'strict' }
-            ]
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex justify-center mb-6">
-            <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
-        </div>
-        <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
-            <template #header>
-                <div class="flex justify-end">
-                    <IconField>
-                        <InputIcon class="pi pi-search" />
-                        <InputText v-model="filters['global']" placeholder="Global Search" />
-                    </IconField>
-                </div>
-            </template>
-            <Column field="name" header="Name" expander style="min-width: 12rem">
-                <template #filter>
-                    <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
-                </template>
-            </Column>
-            <Column field="size" header="Size" style="min-width: 12rem">
-                <template #filter>
-                    <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
-                </template>
-            </Column>
-            <Column field="type" header="Type" style="min-width: 12rem">
-                <template #filter>
-                    <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
-                </template>
-            </Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-const filters = ref({});
-const filterMode = ref({ label: 'Lenient', value: 'lenient' });
-const filterOptions = ref([
-    { label: 'Lenient', value: 'lenient' },
-    { label: 'Strict', value: 'strict' }
-]);
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/ImportDoc.vue b/apps/labs/doc/treetable/ImportDoc.vue
deleted file mode 100644
index 709138a2a..000000000
--- a/apps/labs/doc/treetable/ImportDoc.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import TreeTable from 'primevue/treetable';
-import Column from 'primevue/column';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/LazyLoadDoc.vue b/apps/labs/doc/treetable/LazyLoadDoc.vue
deleted file mode 100644
index 07e044876..000000000
--- a/apps/labs/doc/treetable/LazyLoadDoc.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime <i>paging</i>, <i>sorting</i> and <i>filtering</i> occurs. Sample below
-            imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
-        </p>
-        <p>
-            Enabling the <i>lazy</i> property and assigning the logical number of rows to <i>totalRecords</i> by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually records
-            of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
-        </p>
-        <p>In addition, only the root elements should be loaded, children can be loaded on demand using <i>nodeExpand</i> callback.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            rows: 10,
-            loading: false,
-            totalRecords: 0,
-            code: {
-                basic: `
-<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
-    @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
-            @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            rows: 10,
-            loading: false,
-            totalRecords: 0
-        };
-    },
-    mounted() {
-        this.loading = true;
-
-        setTimeout(() => {
-            this.loading = false;
-            this.nodes = this.loadNodes(0, this.rows);
-            this.totalRecords = 1000;
-        }, 1000);
-    },
-    methods: {
-        onExpand(node) {
-            if (!node.children) {
-                this.loading = true;
-
-                setTimeout(() => {
-                    let lazyNode = { ...node };
-
-                    lazyNode.children = [
-                        {
-                            data: {
-                                name: lazyNode.data.name + ' - 0',
-                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                                type: 'File'
-                            }
-                        },
-                        {
-                            data: {
-                                name: lazyNode.data.name + ' - 1',
-                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                                type: 'File'
-                            }
-                        }
-                    ];
-
-                    let nodes = this.nodes.map((n) => {
-                        if (n.key === node.key) {
-                            n = lazyNode;
-                        }
-
-                        return n;
-                    });
-
-                    this.loading = false;
-                    this.nodes = nodes;
-                }, 250);
-            }
-        },
-        onPage(event) {
-            this.loading = true;
-
-            //imitate delay of a backend call
-            setTimeout(() => {
-                this.loading = false;
-                this.nodes = this.loadNodes(event.first, this.rows);
-            }, 1000);
-        },
-        loadNodes(first, rows) {
-            let nodes = [];
-
-            for (let i = 0; i < rows; i++) {
-                let node = {
-                    key: first + i,
-                    data: {
-                        name: 'Item ' + (first + i),
-                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                        type: 'Type ' + (first + i)
-                    },
-                    leaf: false
-                };
-
-                nodes.push(node);
-            }
-
-            return nodes;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div>
-        <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
-            @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" :expander="true"></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-
-onMounted(() => {
-    loading.value = true;
-
-    setTimeout(() => {
-        loading.value = false;
-        nodes.value = loadNodes(0, rows.value);
-        totalRecords.value = 1000;
-    }, 1000);
-});
-
-const nodes = ref();
-const rows = ref(10);
-const loading = ref(false);
-const totalRecords = ref(0);
-const onExpand = (node) => {
-    if (!node.children) {
-        loading.value = true;
-
-        setTimeout(() => {
-            let lazyNode = {...node};
-
-            lazyNode.children = [
-                {
-                    data: {
-                        name: lazyNode.data.name + ' - 0',
-                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                        type: 'File'
-                    },
-                },
-                {
-                    data: {
-                        name: lazyNode.data.name + ' - 1',
-                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                        type: 'File'
-                    }
-                }
-            ];
-
-            let newNodes = nodes.value.map(n => {
-                if (n.key === node.key) {
-                    n = lazyNode;
-                }
-
-                return n;
-            });
-
-            loading.value = false;
-            nodes.value = newNodes;
-        }, 250);
-    }
-};
-const onPage = (event) => {
-    loading.value = true;
-
-    //imitate delay of a backend call
-    setTimeout(() => {
-        loading.value = false;
-        nodes.value = loadNodes(event.first, rows.value);
-    }, 1000);
-};
-const loadNodes = (first, rows) => {
-    let nodes = [];
-
-    for(let i = 0; i < rows; i++) {
-        let node = {
-            key: (first + i),
-            data: {
-                name: 'Item ' + (first + i),
-                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                type: 'Type ' + (first + i)
-            },
-            leaf: false
-        };
-
-        nodes.push(node);
-    }
-
-    return nodes;
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            this.loading = true;
-
-            setTimeout(() => {
-                this.loading = false;
-                this.nodes = this.loadNodes(0, this.rows);
-                this.totalRecords = 1000;
-            }, 1000);
-        },
-
-        onExpand(node) {
-            if (!node.children) {
-                this.loading = true;
-
-                setTimeout(() => {
-                    let lazyNode = { ...node };
-
-                    lazyNode.children = [
-                        {
-                            data: {
-                                name: lazyNode.data.name + ' - 0',
-                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                                type: 'File'
-                            }
-                        },
-                        {
-                            data: {
-                                name: lazyNode.data.name + ' - 1',
-                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                                type: 'File'
-                            }
-                        }
-                    ];
-
-                    let nodes = this.nodes.map((n) => {
-                        if (n.key === node.key) {
-                            n = lazyNode;
-                        }
-
-                        return n;
-                    });
-
-                    this.loading = false;
-                    this.nodes = nodes;
-                }, 250);
-            }
-        },
-        onPage(event) {
-            this.loading = true;
-
-            //imitate delay of a backend call
-            setTimeout(() => {
-                this.loading = false;
-                this.nodes = this.loadNodes(event.first, this.rows);
-            }, 1000);
-        },
-        loadNodes(first, rows) {
-            let nodes = [];
-
-            for (let i = 0; i < rows; i++) {
-                let node = {
-                    key: first + i,
-                    data: {
-                        name: 'Item ' + (first + i),
-                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                        type: 'Type ' + (first + i)
-                    },
-                    leaf: false
-                };
-
-                nodes.push(node);
-            }
-
-            return nodes;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/SizeDoc.vue b/apps/labs/doc/treetable/SizeDoc.vue
deleted file mode 100644
index f496ab229..000000000
--- a/apps/labs/doc/treetable/SizeDoc.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex justify-center mb-6">
-                <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
-            </div>
-            <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            size: { label: 'Normal', value: 'normal' },
-            sizeOptions: [
-                { label: 'Small', value: 'small' },
-                { label: 'Normal', value: 'normal' },
-                { label: 'Large', value: 'large' }
-            ],
-            code: {
-                basic: `
-<TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            size: { label: 'Normal', value: 'normal' },
-            sizeOptions: [
-                { label: 'Small', value: 'small', class: 'sm' },
-                { label: 'Normal', value: 'normal' },
-                { label: 'Large', value: 'large', class: 'lg' }
-            ]
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-const size = ref({ label: 'Normal', value: 'normal' });
-const sizeOptions = ref([
-    { label: 'Small', value: 'small', class: 'sm' },
-    { label: 'Normal', value: 'normal' },
-    { label: 'Large', value: 'large', class: 'lg' }
-]);
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/TemplateDoc.vue b/apps/labs/doc/treetable/TemplateDoc.vue
deleted file mode 100644
index 484e6999c..000000000
--- a/apps/labs/doc/treetable/TemplateDoc.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content at <i>header</i> and <i>footer</i> slots are supported via templating.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-                <template #header>
-                    <div class="text-xl font-bold">File Viewer</div>
-                </template>
-                <Column field="name" header="Name" expander style="width: 250px"></Column>
-                <Column field="size" header="Size" style="width: 150px"></Column>
-                <Column field="type" header="Type" style="width: 150px"></Column>
-                <Column style="width: 10rem">
-                    <template #body>
-                        <div class="flex flex-wrap gap-2">
-                            <Button type="button" icon="pi pi-search" rounded />
-                            <Button type="button" icon="pi pi-pencil" rounded severity="success" />
-                        </div>
-                    </template>
-                </Column>
-                <template #footer>
-                    <div class="flex justify-start">
-                        <Button icon="pi pi-refresh" label="Reload" severity="warn" />
-                    </div>
-                </template>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" tableStyle="min-width: 50rem">
-    <template #header>
-        <div class="text-xl font-bold">File Viewer</div>
-    </template>
-    <Column field="name" header="Name" expander style="width: 250px"></Column>
-    <Column field="size" header="Size" style="width: 150px"></Column>
-    <Column field="type" header="Type" style="width: 150px"></Column>
-    <Column style="width: 10rem">
-        <template #body>
-            <div class="flex flex-wrap gap-2">
-                <Button type="button" icon="pi pi-search" rounded />
-                <Button type="button" icon="pi pi-pencil" rounded severity="success" />
-            </div>
-        </template>
-    </Column>
-    <template #footer>
-        <div class="flex justify-start">
-            <Button icon="pi pi-refresh" label="Reload" severity="warn" />
-        </div>
-    </template>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <template #header>
-                <div class="text-xl font-bold">File Viewer</div>
-            </template>
-            <Column field="name" header="Name" expander style="width: 250px"></Column>
-            <Column field="size" header="Size" style="width: 150px"></Column>
-            <Column field="type" header="Type" style="width: 150px"></Column>
-            <Column style="width: 10rem">
-                <template #body>
-                    <div class="flex flex-wrap gap-2">
-                        <Button type="button" icon="pi pi-search" rounded/>
-                        <Button type="button" icon="pi pi-pencil" rounded severity="success" />
-                    </div>
-                </template>
-            </Column>
-            <template #footer>
-                <div class="flex justify-start">
-                    <Button icon="pi pi-refresh" label="Reload" severity="warn" />
-                </div>
-            </template>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <template #header>
-                <div class="text-xl font-bold">File Viewer</div>
-            </template>
-            <Column field="name" header="Name" expander style="width: 250px"></Column>
-            <Column field="size" header="Size" style="width: 150px"></Column>
-            <Column field="type" header="Type" style="width: 150px"></Column>
-            <Column style="width: 10rem">
-                <template #body>
-                    <div class="flex flex-wrap gap-2">
-                        <Button type="button" icon="pi pi-search" rounded/>
-                        <Button type="button" icon="pi pi-pencil" rounded severity="success" />
-                    </div>
-                </template>
-            </Column>
-            <template #footer>
-                <div class="flex justify-start">
-                    <Button icon="pi pi-refresh" label="Reload" severity="warn" />
-                </div>
-            </template>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/pagination/PaginationBasicDoc.vue b/apps/labs/doc/treetable/pagination/PaginationBasicDoc.vue
deleted file mode 100644
index 0ad73bfcb..000000000
--- a/apps/labs/doc/treetable/pagination/PaginationBasicDoc.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    created() {
-        let files = [];
-
-        for (let i = 0; i < 50; i++) {
-            let node = {
-                key: i,
-                data: {
-                    name: 'Item ' + i,
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + i
-                },
-                children: [
-                    {
-                        key: i + ' - 0',
-                        data: {
-                            name: 'Item ' + i + ' - 0',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'Type ' + i
-                        }
-                    }
-                ]
-            };
-
-            files.push(node);
-        }
-
-        this.nodes = files;
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const nodes = ref();
-
-let files = [];
-for (let i = 0; i < 50; i++) {
-    let node = {
-        key: i,
-        data: {
-            name: 'Item ' + i,
-            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-            type: 'Type ' + i
-        },
-        children: [
-            {
-                key: i + ' - 0',
-                data: {
-                    name: 'Item ' + i + ' - 0',
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + i
-                }
-            }
-        ]
-    };
-
-    files.push(node);
-}
-
-nodes.value = files;
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            let files = [];
-
-            for (let i = 0; i < 50; i++) {
-                let node = {
-                    key: i,
-                    data: {
-                        name: 'Item ' + i,
-                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                        type: 'Type ' + i
-                    },
-                    children: [
-                        {
-                            key: i + ' - 0',
-                            data: {
-                                name: 'Item ' + i + ' - 0',
-                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                                type: 'Type ' + i
-                            }
-                        }
-                    ]
-                };
-
-                files.push(node);
-            }
-
-            this.nodes = files;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/pagination/PaginationHeadlessDoc.vue b/apps/labs/doc/treetable/pagination/PaginationHeadlessDoc.vue
deleted file mode 100644
index cef671a7c..000000000
--- a/apps/labs/doc/treetable/pagination/PaginationHeadlessDoc.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-                <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                    <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                        <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                        <div class="text-color font-medium">
-                            <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                            <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                        </div>
-                        <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                    </div>
-                </template>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-    <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-        <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-            <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-            <div class="text-color font-medium">
-                <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-            </div>
-            <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-        </div>
-    </template>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                    <div class="text-color font-medium">
-                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                    </div>
-                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                </div>
-            </template>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    created() {
-        let files = [];
-
-        for (let i = 0; i < 50; i++) {
-            let node = {
-                key: i,
-                data: {
-                    name: 'Item ' + i,
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + i
-                },
-                children: [
-                    {
-                        key: i + ' - 0',
-                        data: {
-                            name: 'Item ' + i + ' - 0',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'Type ' + i
-                        }
-                    }
-                ]
-            };
-
-            files.push(node);
-        }
-
-        this.nodes = files;
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
-                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
-                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
-                    <div class="text-color font-medium">
-                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
-                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
-                    </div>
-                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
-                </div>
-            </template>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const nodes = ref();
-
-let files = [];
-for (let i = 0; i < 50; i++) {
-    let node = {
-        key: i,
-        data: {
-            name: 'Item ' + i,
-            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-            type: 'Type ' + i
-        },
-        children: [
-            {
-                key: i + ' - 0',
-                data: {
-                    name: 'Item ' + i + ' - 0',
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + i
-                }
-            }
-        ]
-    };
-
-    files.push(node);
-}
-
-nodes.value = files;
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            let files = [];
-
-            for (let i = 0; i < 50; i++) {
-                let node = {
-                    key: i,
-                    data: {
-                        name: 'Item ' + i,
-                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                        type: 'Type ' + i
-                    },
-                    children: [
-                        {
-                            key: i + ' - 0',
-                            data: {
-                                name: 'Item ' + i + ' - 0',
-                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                                type: 'Type ' + i
-                            }
-                        }
-                    ]
-                };
-
-                files.push(node);
-            }
-
-            this.nodes = files;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/pagination/PaginationTemplateDoc.vue b/apps/labs/doc/treetable/pagination/PaginationTemplateDoc.vue
deleted file mode 100644
index ffd68eea1..000000000
--- a/apps/labs/doc/treetable/pagination/PaginationTemplateDoc.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Paginator UI is customized using the <i>paginatorTemplate</i> property. Each element can also be customized further with your own UI to replace the default one, refer to the
-            <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable
-                :value="nodes"
-                :paginator="true"
-                :rows="5"
-                :rowsPerPageOptions="[5, 10, 25, 50]"
-                paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-                currentPageReportTemplate="{first} to {last} of {totalRecords}"
-                tableStyle="min-width: 50rem"
-            >
-                <template #paginatorstart>
-                    <Button type="button" icon="pi pi-refresh" text />
-                </template>
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-                <template #paginatorend>
-                    <Button type="button" icon="pi pi-download" text />
-                </template>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable
-    :value="nodes"
-    :paginator="true"
-    :rows="5"
-    :rowsPerPageOptions="[5, 10, 25, 50]"
-    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-    currentPageReportTemplate="{first} to {last} of {totalRecords}"
-    tableStyle="min-width: 50rem"
->
-    <template #paginatorstart>
-        <Button type="button" icon="pi pi-refresh" text />
-    </template>
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-    <template #paginatorend>
-        <Button type="button" icon="pi pi-download" text />
-    </template>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable
-            :value="nodes"
-            :paginator="true"
-            :rows="5"
-            :rowsPerPageOptions="[5, 10, 25, 50]"
-            paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-            currentPageReportTemplate="{first} to {last} of {totalRecords}"
-            tableStyle="min-width: 50rem"
-        >
-            <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" text />
-            </template>
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-            <template #paginatorend>
-                <Button type="button" icon="pi pi-download" text />
-            </template>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    created() {
-        let files = [];
-
-        for (let i = 0; i < 50; i++) {
-            let node = {
-                key: i,
-                data: {
-                    name: 'Item ' + i,
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + i
-                },
-                children: [
-                    {
-                        key: i + ' - 0',
-                        data: {
-                            name: 'Item ' + i + ' - 0',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'Type ' + i
-                        }
-                    }
-                ]
-            };
-
-            files.push(node);
-        }
-
-        this.nodes = files;
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable
-            :value="nodes"
-            :paginator="true"
-            :rows="5"
-            :rowsPerPageOptions="[5, 10, 25, 50]"
-            paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-            currentPageReportTemplate="{first} to {last} of {totalRecords}"
-            tableStyle="min-width: 50rem"
-        >
-            <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" text />
-            </template>
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-            <template #paginatorend>
-                <Button type="button" icon="pi pi-download" text />
-            </template>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const nodes = ref();
-
-let files = [];
-for (let i = 0; i < 50; i++) {
-    let node = {
-        key: i,
-        data: {
-            name: 'Item ' + i,
-            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-            type: 'Type ' + i
-        },
-        children: [
-            {
-                key: i + ' - 0',
-                data: {
-                    name: 'Item ' + i + ' - 0',
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + i
-                }
-            }
-        ]
-    };
-
-    files.push(node);
-}
-
-nodes.value = files;
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            let files = [];
-
-            for (let i = 0; i < 50; i++) {
-                let node = {
-                    key: i,
-                    data: {
-                        name: 'Item ' + i,
-                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                        type: 'Type ' + i
-                    },
-                    children: [
-                        {
-                            key: i + ' - 0',
-                            data: {
-                                name: 'Item ' + i + ' - 0',
-                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                                type: 'Type ' + i
-                            }
-                        }
-                    ]
-                };
-
-                files.push(node);
-            }
-
-            this.nodes = files;
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/resize/ExpandModeDoc.vue b/apps/labs/doc/treetable/resize/ExpandModeDoc.vue
deleted file mode 100644
index d60f52844..000000000
--- a/apps/labs/doc/treetable/resize/ExpandModeDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/resize/FitModeDoc.vue b/apps/labs/doc/treetable/resize/FitModeDoc.vue
deleted file mode 100644
index 418fcd872..000000000
--- a/apps/labs/doc/treetable/resize/FitModeDoc.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Columns can be resized with drag and drop when <i>resizableColumns</i> is enabled. Default resize mode is <i>fit</i>
-            that does not change the overall table width.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/scroll/FlexibleScrollDoc.vue b/apps/labs/doc/treetable/scroll/FlexibleScrollDoc.vue
deleted file mode 100644
index cc9d82a96..000000000
--- a/apps/labs/doc/treetable/scroll/FlexibleScrollDoc.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data viewport
-            adjusts itself according to the size changes.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card flex justify-center">
-            <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
-
-            <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-                <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
-                    <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
-                    <Column field="size" header="Size" style="min-width: 200px"></Column>
-                    <Column field="type" header="Type" style="min-width: 200px"></Column>
-                </TreeTable>
-                <template #footer>
-                    <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
-                </template>
-            </Dialog>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            dialogVisible: false,
-            code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
-<Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-    <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
-        <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
-        <Column field="size" header="Size" style="min-width: 200px"></Column>
-        <Column field="type" header="Type" style="min-width: 200px"></Column>
-    </TreeTable>
-    <template #footer>
-        <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
-    </template>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
-        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-            <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
-                <Column field="size" header="Size" style="min-width: 200px"></Column>
-                <Column field="type" header="Type" style="min-width: 200px"></Column>
-            </TreeTable>
-            <template #footer>
-                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
-            </template>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            dialogVisible: false
-        };
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
-        <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-            <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
-                <Column field="size" header="Size" style="min-width: 200px"></Column>
-                <Column field="type" header="Type" style="min-width: 200px"></Column>
-            </TreeTable>
-            <template #footer>
-                <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
-            </template>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-});
-
-const nodes = ref();
-const dialogVisible = ref(false);
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/scroll/FrozenColumnsDoc.vue b/apps/labs/doc/treetable/scroll/FrozenColumnsDoc.vue
deleted file mode 100644
index 1e7aa1274..000000000
--- a/apps/labs/doc/treetable/scroll/FrozenColumnsDoc.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" scrollable scrollHeight="300px">
-                <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
-                <Column field="size" header="Size" style="min-width: 200px"></Column>
-                <Column field="type" header="Type 2" style="min-width: 200px"></Column>
-                <Column field="size" header="Size 2" style="min-width: 200px"></Column>
-                <Column field="type" header="Type 3" style="min-width: 200px"></Column>
-                <Column field="size" header="Size 3" style="min-width: 200px"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="300px">
-    <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
-    <Column field="size" header="Size" style="min-width: 200px"></Column>
-    <Column field="type" header="Type 2" style="min-width: 200px"></Column>
-    <Column field="size" header="Size 2" style="min-width: 200px"></Column>
-    <Column field="type" header="Type 3" style="min-width: 200px"></Column>
-    <Column field="size" header="Size 3" style="min-width: 200px"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="300px">
-            <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
-            <Column field="size" header="Size" style="min-width: 200px"></Column>
-            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
-            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
-            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
-            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="300px">
-            <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
-            <Column field="size" header="Size" style="min-width: 200px"></Column>
-            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
-            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
-            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
-            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/scroll/HorizontalScrollDoc.vue b/apps/labs/doc/treetable/scroll/HorizontalScrollDoc.vue
deleted file mode 100644
index 23b710777..000000000
--- a/apps/labs/doc/treetable/scroll/HorizontalScrollDoc.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Horizontal scrollbar is displayed when table width exceeds the parent width.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" scrollable scrollHeight="300px">
-                <Column field="name" header="Name" expander style="min-width: 250px"></Column>
-                <Column field="size" header="Size" style="min-width: 200px"></Column>
-                <Column field="type" header="Type 2" style="min-width: 200px"></Column>
-                <Column field="size" header="Size 2" style="min-width: 200px"></Column>
-                <Column field="type" header="Type 3" style="min-width: 200px"></Column>
-                <Column field="size" header="Size 3" style="min-width: 200px"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="300px">
-    <Column field="name" header="Name" expander style="min-width: 250px"></Column>
-    <Column field="size" header="Size" style="min-width: 200px"></Column>
-    <Column field="type" header="Type 2" style="min-width: 200px"></Column>
-    <Column field="size" header="Size 2" style="min-width: 200px"></Column>
-    <Column field="type" header="Type 3" style="min-width: 200px"></Column>
-    <Column field="size" header="Size 3" style="min-width: 200px"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="300px">
-            <Column field="name" header="Name" expander style="min-width: 250px"></Column>
-            <Column field="size" header="Size" style="min-width: 200px"></Column>
-            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
-            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
-            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
-            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="300px">
-            <Column field="name" header="Name" expander style="min-width: 250px"></Column>
-            <Column field="size" header="Size" style="min-width: 200px"></Column>
-            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
-            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
-            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
-            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/scroll/VerticalScrollDoc.vue b/apps/labs/doc/treetable/scroll/VerticalScrollDoc.vue
deleted file mode 100644
index f814eeac8..000000000
--- a/apps/labs/doc/treetable/scroll/VerticalScrollDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/apps/labs/doc/treetable/selection/CheckboxRowSelectionDoc.vue
deleted file mode 100644
index 51b54eb2c..000000000
--- a/apps/labs/doc/treetable/selection/CheckboxRowSelectionDoc.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
-        <p>
-            In checkbox selection mode, value binding should be a key-value pair where key (or the dataKey) is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.
-        </p>
-    </DocSectionText>
-    <DocSectionCode :code="introCode" hideToggleCode importCode hideStackBlitz />
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            introCode: {
-                basic: `
-{
-    '0-0': {
-        partialChecked: false,
-        checked: true
-    }
-}
-`
-            },
-            code: {
-                basic: `
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-const selectedKey = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/apps/labs/doc/treetable/selection/MultipleRowsSelectionDoc.vue
deleted file mode 100644
index f76e9876b..000000000
--- a/apps/labs/doc/treetable/selection/MultipleRowsSelectionDoc.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is not necessary to add to existing selections. When the optional
-            <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new node requires meta key to be present. Note that in touch enabled devices, TreeTable always ignores metaKey.
-        </p>
-        <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex justify-center items-center mb-6 gap-2">
-                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-                <label for="input-metakey">MetaKey</label>
-            </div>
-            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            metaKey: true,
-            code: {
-                basic: `
-<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex justify-center items-center mb-6 gap-2">
-            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            metaKey: true
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex justify-center items-center mb-6 gap-2">
-            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-const selectedKey = ref();
-const metaKey = ref(true);
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/selection/RowSelectionEventsDoc.vue b/apps/labs/doc/treetable/selection/RowSelectionEventsDoc.vue
deleted file mode 100644
index e3b131eb8..000000000
--- a/apps/labs/doc/treetable/selection/RowSelectionEventsDoc.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TreeTable provides <i>nodeSelect</i> and <i>nodeUnselect</i> events to listen selection events.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            code: {
-                basic: `
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-        <Toast />
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    },
-    methods: {
-        onNodeSelect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 });
-        },
-        onNodeUnselect(node) {
-            this.$toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.data.name, life: 3000 });
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast'
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-const selectedKey = ref();
-const toast = useToast();
-const onNodeSelect = (node) => {
-    toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 });
-};
-const onNodeUnselect = (node) => {
-    toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.data.name, life: 3000 });
-};
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        },
-        onNodeSelect(node) {
-            this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 });
-        },
-        onNodeUnselect(node) {
-            this.$toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.data.name, life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/selection/SingleRowSelectionDoc.vue b/apps/labs/doc/treetable/selection/SingleRowSelectionDoc.vue
deleted file mode 100644
index 7a0f7d700..000000000
--- a/apps/labs/doc/treetable/selection/SingleRowSelectionDoc.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
-        <p>
-            By default, metaKey press (e.g. <i>⌘</i>) is necessary to unselect a node however this can be configured with disabling the <i>metaKeySelection</i> property. In touch enabled devices this option has no effect and behavior is same as
-            setting it to false.
-        </p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <div class="flex justify-center items-center mb-6 gap-2">
-                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-                <label for="input-metakey">MetaKey</label>
-            </div>
-            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" expander style="width: 34%"></Column>
-                <Column field="size" header="Size" style="width: 33%"></Column>
-                <Column field="type" header="Type" style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            metaKey: true,
-            code: {
-                basic: `
-<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" expander style="width: 34%"></Column>
-    <Column field="size" header="Size" style="width: 33%"></Column>
-    <Column field="type" header="Type" style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex justify-center items-center mb-6 gap-2">
-            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedKey: null,
-            metaKey: true
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex justify-center items-center mb-6 gap-2">
-            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
-        </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" expander style="width: 34%"></Column>
-            <Column field="size" header="Size" style="width: 33%"></Column>
-            <Column field="type" header="Type" style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-const selectedKey = ref();
-const metaKey = ref(true);
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/sort/MultipleColumnsDoc.vue b/apps/labs/doc/treetable/sort/MultipleColumnsDoc.vue
deleted file mode 100644
index a4d43fbb2..000000000
--- a/apps/labs/doc/treetable/sort/MultipleColumnsDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-                <Column field="size" header="Size" sortable style="width: 33%"></Column>
-                <Column field="type" header="Type" sortable style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-    <Column field="size" header="Size" sortable style="width: 33%"></Column>
-    <Column field="type" header="Type" sortable style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-            <Column field="size" header="Size" sortable style="width: 33%"></Column>
-            <Column field="type" header="Type" sortable style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-            <Column field="size" header="Size" sortable style="width: 33%"></Column>
-            <Column field="type" header="Type" sortable style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/sort/RemovableSortDoc.vue b/apps/labs/doc/treetable/sort/RemovableSortDoc.vue
deleted file mode 100644
index cf789134a..000000000
--- a/apps/labs/doc/treetable/sort/RemovableSortDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>removableSort</i> is present, the third click removes the sorting from the column.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-                <Column field="size" header="Size" sortable style="width: 33%"></Column>
-                <Column field="type" header="Type" sortable style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-    <Column field="size" header="Size" sortable style="width: 33%"></Column>
-    <Column field="type" header="Type" sortable style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-            <Column field="size" header="Size" sortable style="width: 33%"></Column>
-            <Column field="type" header="Type" sortable style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-            <Column field="size" header="Size" sortable style="width: 33%"></Column>
-            <Column field="type" header="Type" sortable style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/treetable/sort/SingleColumnDoc.vue b/apps/labs/doc/treetable/sort/SingleColumnDoc.vue
deleted file mode 100644
index df6f9353e..000000000
--- a/apps/labs/doc/treetable/sort/SingleColumnDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Sorting on a column is enabled by adding the <i>sortable</i> property.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-                <Column field="size" header="Size" sortable style="width: 33%"></Column>
-                <Column field="type" header="Type" sortable style="width: 33%"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" tableStyle="min-width: 50rem">
-    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-    <Column field="size" header="Size" sortable style="width: 33%"></Column>
-    <Column field="type" header="Type" sortable style="width: 33%"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-            <Column field="size" header="Size" sortable style="width: 33%"></Column>
-            <Column field="type" header="Type" sortable style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
-            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
-            <Column field="size" header="Size" sortable style="width: 33%"></Column>
-            <Column field="type" header="Type" sortable style="width: 33%"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/virtualscroller/AccessibilityDoc.vue b/apps/labs/doc/virtualscroller/AccessibilityDoc.vue
deleted file mode 100644
index 18486ae47..000000000
--- a/apps/labs/doc/virtualscroller/AccessibilityDoc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>VirtualScroller has no specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element.</p>
-
-        <h3>Keyboard Support</h3>
-        <p>Component does not include any built-in interactive elements.</p>
-    </DocSectionText>
-</template>
diff --git a/apps/labs/doc/virtualscroller/BasicDoc.vue b/apps/labs/doc/virtualscroller/BasicDoc.vue
deleted file mode 100644
index a144d1bfa..000000000
--- a/apps/labs/doc/virtualscroller/BasicDoc.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            VirtualScroller requires <i>items</i> as the data to display, <i>itemSize</i> for the dimensions of an item and <i>item</i> template are required on component. In addition, an initial array is required based on the total number of items
-            to display. Size of the viewport is configured using <i>scrollWidth</i>, <i>scrollHeight</i> properties directly or with CSS <i>width</i> and <i>height</i> styles.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null,
-            code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-    </template>
-</VirtualScroller>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null
-        };
-    },
-    created() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
-    }
-};
-</script>
diff --git a/apps/labs/doc/virtualscroller/DelayDoc.vue b/apps/labs/doc/virtualscroller/DelayDoc.vue
deleted file mode 100644
index 70921ce5d..000000000
--- a/apps/labs/doc/virtualscroller/DelayDoc.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>delay</i> property adds a threshold to wait in milliseconds during scrolling for render optimization.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <div>
-            <span class="font-bold block mb-2">No Delay</span>
-            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">150ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">500ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null,
-            code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-    </template>
-</VirtualScroller>
-
-<VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-    </template>
-</VirtualScroller>
-
-<VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-    </template>
-</VirtualScroller>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <div>
-            <span class="font-bold block mb-2">No Delay</span>
-            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">150ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">500ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null
-        };
-    },
-    mounted() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <div>
-            <span class="font-bold block mb-2">No Delay</span>
-            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">150ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">500ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
-    }
-};
-</script>
diff --git a/apps/labs/doc/virtualscroller/GridDoc.vue b/apps/labs/doc/virtualscroller/GridDoc.vue
deleted file mode 100644
index 8255f56d6..000000000
--- a/apps/labs/doc/virtualscroller/GridDoc.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Scrolling can be enabled vertically and horizontally when <i>orientation</i> is set as <i>both</i>. In this mode, <i>itemSize</i> should be an array where first value is the height of an item and second is the width.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
-                    <template v-for="(el, index) of item" :key="index">
-                        <div style="width: 100px">{{ el }}</div>
-                    </template>
-                </div>
-            </template>
-        </VirtualScroller>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null,
-            code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
-            <template v-for="(el, index) of item" :key="index">
-                <div style="width: 100px">{{ el }}</div>
-            </template>
-        </div>
-    </template>
-</VirtualScroller>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
-                    <template v-for="(el, index) of item" :key="index">
-                        <div style="width: 100px">{{ el }}</div>
-                    </template>
-                </div>
-            </template>
-        </VirtualScroller>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null
-        };
-    },
-    created() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
-                    <template v-for="(el, index) of item" :key="index">
-                        <div style="width: 100px">{{ el }}</div>
-                    </template>
-                </div>
-            </template>
-        </VirtualScroller>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => `Item #${i}_${j}`));
-    }
-};
-</script>
diff --git a/apps/labs/doc/virtualscroller/HorizontalDoc.vue b/apps/labs/doc/virtualscroller/HorizontalDoc.vue
deleted file mode 100644
index 1d09d6eff..000000000
--- a/apps/labs/doc/virtualscroller/HorizontalDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Setting <i>orientation</i> to <i>horizontal</i> enables scrolling horizontally. In this case, the <i>itemSize</i> should refer to the width of an item.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null,
-            code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
-    </template>
-</VirtualScroller>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null
-        };
-    },
-    created() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
-    }
-};
-</script>
diff --git a/apps/labs/doc/virtualscroller/ImportDoc.vue b/apps/labs/doc/virtualscroller/ImportDoc.vue
deleted file mode 100644
index 69dfeb1ee..000000000
--- a/apps/labs/doc/virtualscroller/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import VirtualScroller from 'primevue/virtualscroller';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/virtualscroller/LazyDoc.vue b/apps/labs/doc/virtualscroller/LazyDoc.vue
deleted file mode 100644
index feb6d4815..000000000
--- a/apps/labs/doc/virtualscroller/LazyDoc.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded on demand. To implement lazy loading, enable the <i>lazy</i>property and implement <i>onLazyLoad</i> callback to return
-            data.
-        </p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            lazyItems: null,
-            lazyLoading: false,
-            loadLazyTimeout: null,
-            code: {
-                basic: `
-<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-    </template>
-</VirtualScroller>
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            lazyItems: null,
-            lazyLoading: false,
-            loadLazyTimeout: null
-        };
-    },
-    mounted() {
-        this.lazyItems = Array.from({ length: 100000 });
-    },
-    methods: {
-        onLazyLoad(event) {
-            this.lazyLoading = true;
-
-            if (this.loadLazyTimeout) {
-                clearTimeout(this.loadLazyTimeout);
-            }
-
-            //imitate delay of a backend call
-            this.loadLazyTimeout = setTimeout(() => {
-                const { first, last } = event;
-                const lazyItems = [...this.lazyItems];
-
-                for (let i = first; i < last; i++) {
-                    lazyItems[i] = \`Item #\${i}\`;
-                }
-
-                this.lazyItems = lazyItems;
-                this.lazyLoading = false;
-
-            }, Math.random() * 1000 + 250);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const lazyItems = ref(Array.from({ length: 10000 }));
-const lazyLoading = ref(false);
-const loadLazyTimeout = ref();
-const onLazyLoad = (event) => {
-    lazyLoading.value = true;
-
-    if (loadLazyTimeout.value) {
-        clearTimeout(loadLazyTimeout.value);
-    }
-
-    //imitate delay of a backend call
-    loadLazyTimeout.value = setTimeout(() => {
-        const { first, last } = event;
-        const _lazyItems = [...lazyItems.value];
-
-        for (let i = first; i < last; i++) {
-            _lazyItems[i] = \`Item #\${i}\`;
-        }
-
-        lazyItems.value = _lazyItems;
-        lazyLoading.value = false;
-
-    }, Math.random() * 1000 + 250);
-};
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.lazyItems = Array.from({ length: 100000 });
-    },
-    methods: {
-        onLazyLoad(event) {
-            this.lazyLoading = true;
-
-            if (this.loadLazyTimeout) {
-                clearTimeout(this.loadLazyTimeout);
-            }
-
-            //imitate delay of a backend call
-            this.loadLazyTimeout = setTimeout(() => {
-                const { first, last } = event;
-                const lazyItems = [...this.lazyItems];
-
-                for (let i = first; i < last; i++) {
-                    lazyItems[i] = `Item #${i}`;
-                }
-
-                this.lazyItems = lazyItems;
-                this.lazyLoading = false;
-            }, Math.random() * 1000 + 250);
-        }
-    }
-};
-</script>
diff --git a/apps/labs/doc/virtualscroller/LoadingDoc.vue b/apps/labs/doc/virtualscroller/LoadingDoc.vue
deleted file mode 100644
index f8df4d6b5..000000000
--- a/apps/labs/doc/virtualscroller/LoadingDoc.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Busy state is enabled by adding <i>showLoader</i> property which blocks the UI with a modal by default. Alternatively, <i>loader</i> template can be used to customize items e.g. with
-            <PrimeVueNuxtLink to="/skeleton">Skeleton</PrimeVueNuxtLink>.
-        </p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <div>
-            <span class="font-bold block mb-2">Modal</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">Skeleton</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-                <template v-slot:loader="{ options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
-                        <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
-                    </div>
-                </template>
-            </VirtualScroller>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null,
-            code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-    </template>
-</VirtualScroller>
-
-<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-    <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-    </template>
-    <template v-slot:loader="{ options }">
-        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
-            <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
-        </div>
-    </template>
-</VirtualScroller>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <div>
-            <span class="font-bold block mb-2">Modal</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">Skeleton</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-                <template v-slot:loader="{ options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
-                        <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
-                    </div>
-                </template>
-            </VirtualScroller>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null
-        };
-    },
-    mounted() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-8">
-        <div>
-            <span class="font-bold block mb-2">Modal</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-            </VirtualScroller>
-        </div>
-        <div>
-            <span class="font-bold block mb-2">Skeleton</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
-                <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
-                </template>
-                <template v-slot:loader="{ options }">
-                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
-                        <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
-                    </div>
-                </template>
-            </VirtualScroller>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
-    }
-};
-</script>
diff --git a/apps/labs/pages/accordion/index.vue b/apps/labs/pages/accordion/index.vue
deleted file mode 100755
index 28a3999fd..000000000
--- a/apps/labs/pages/accordion/index.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/accordion/#api" ptLink="/accordion/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/accordion/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/accordion/BasicDoc.vue';
-import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
-import Disabled from '@/doc/accordion/DisabledDoc.vue';
-import DynamicDoc from '@/doc/accordion/DynamicDoc.vue';
-import ImportDoc from '@/doc/accordion/ImportDoc.vue';
-import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
-import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: Disabled
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'accordion'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/autocomplete/index.vue b/apps/labs/pages/autocomplete/index.vue
deleted file mode 100755
index 6bb7a71a0..000000000
--- a/apps/labs/pages/autocomplete/index.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue AutoComplete Component"
-        header="AutoComplete"
-        description="AutoComplete is an input component that provides real-time suggestions when being typed."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/autocomplete/#api"
-        ptLink="/autocomplete/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/autocomplete/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/autocomplete/BasicDoc.vue';
-import DisabledDoc from '@/doc/autocomplete/DisabledDoc.vue';
-import DropdownDoc from '@/doc/autocomplete/DropdownDoc.vue';
-import FilledDoc from '@/doc/autocomplete/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/autocomplete/FloatLabelDoc.vue';
-import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue';
-import FormsDoc from '@/doc/autocomplete/FormsDoc.vue';
-import GroupDoc from '@/doc/autocomplete/GroupDoc.vue';
-import IftaLabelDoc from '@/doc/autocomplete/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/autocomplete/ImportDoc.vue';
-import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue';
-import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue';
-import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc.vue';
-import SizesDoc from '@/doc/autocomplete/SizesDoc.vue';
-import TemplateDoc from '@/doc/autocomplete/TemplateDoc.vue';
-import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'dropdown',
-                    label: 'Dropdown',
-                    component: DropdownDoc
-                },
-                {
-                    id: 'objects',
-                    label: 'Objects',
-                    component: ObjectsDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'forceselection',
-                    label: 'Force Selection',
-                    component: ForceSelectionDoc
-                },
-                {
-                    id: 'virtualscroll',
-                    label: 'Virtual Scroll',
-                    component: VirtualScrollDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'autocomplete'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/avatar/index.vue b/apps/labs/pages/avatar/index.vue
deleted file mode 100755
index 518291015..000000000
--- a/apps/labs/pages/avatar/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/avatar/#api" ptLink="/avatar/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/avatar/AccessibilityDoc';
-import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
-import IconDoc from '@/doc/avatar/IconDoc.vue';
-import ImageDoc from '@/doc/avatar/ImageDoc.vue';
-import ImportDoc from '@/doc/avatar/ImportDoc.vue';
-import LabelDoc from '@/doc/avatar/LabelDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'label',
-                    label: 'Label',
-                    component: LabelDoc
-                },
-                {
-                    id: 'icon',
-                    label: 'Icon',
-                    component: IconDoc
-                },
-                {
-                    id: 'image',
-                    label: 'Image',
-                    component: ImageDoc
-                },
-                {
-                    id: 'avatargroup',
-                    label: 'AvatarGroup',
-                    component: AvatarGroupDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'avatar'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/badge/index.vue b/apps/labs/pages/badge/index.vue
deleted file mode 100755
index cd87650fc..000000000
--- a/apps/labs/pages/badge/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/badge/#api" ptLink="/badge/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/badge/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/badge/BasicDoc.vue';
-import ButtonDoc from '@/doc/badge/ButtonDoc.vue';
-import ImportDoc from '@/doc/badge/ImportDoc.vue';
-import OverlayDoc from '@/doc/badge/OverlayDoc.vue';
-import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
-import SizeDoc from '@/doc/badge/SizeDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'severity',
-                    label: 'Severity',
-                    component: SeverityDoc
-                },
-                {
-                    id: 'size',
-                    label: 'Size',
-                    component: SizeDoc
-                },
-                {
-                    id: 'overlay',
-                    label: 'Overlay',
-                    component: OverlayDoc
-                },
-                {
-                    id: 'button',
-                    label: 'Button',
-                    component: ButtonDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: ['badge', 'directives.badge']
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/blockui/index.vue b/apps/labs/pages/blockui/index.vue
deleted file mode 100644
index 8d53b0389..000000000
--- a/apps/labs/pages/blockui/index.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/blockui/#api" ptLink="/blockui/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/blockui/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/blockui/BasicDoc.vue';
-import DocumentDoc from '@/doc/blockui/DocumentDoc.vue';
-import ImportDoc from '@/doc/blockui/ImportDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'document',
-                    label: 'Document',
-                    component: DocumentDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'blockui'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/breadcrumb/index.vue b/apps/labs/pages/breadcrumb/index.vue
deleted file mode 100755
index e61febf79..000000000
--- a/apps/labs/pages/breadcrumb/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocComponent title="Vue Breadcrumb Component" header="Breadcrumb" description="Breadcrumb provides contextual information about page hierarchy." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/breadcrumb/#api" ptLink="/breadcrumb/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/breadcrumb/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/breadcrumb/BasicDoc.vue';
-import ImportDoc from '@/doc/breadcrumb/ImportDoc.vue';
-import RouterDoc from '@/doc/breadcrumb/RouterDoc.vue';
-import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'breadcrumb'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/button/index.vue b/apps/labs/pages/button/index.vue
deleted file mode 100755
index a838f8610..000000000
--- a/apps/labs/pages/button/index.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <DocComponent title="Vue Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/button/#api" ptLink="/button/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/button/AccessibilityDoc.vue';
-import BadgeDoc from '@/doc/button/BadgeDoc.vue';
-import BasicDoc from '@/doc/button/BasicDoc.vue';
-import ButtonGroupDoc from '@/doc/button/ButtonGroupDoc.vue';
-import DisabledDoc from '@/doc/button/DisabledDoc.vue';
-import HeadlessDoc from '@/doc/button/HeadlessDoc.vue';
-import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
-import IconsDoc from '@/doc/button/IconsDoc.vue';
-import ImportDoc from '@/doc/button/ImportDoc.vue';
-import LinkDoc from '@/doc/button/LinkDoc.vue';
-import LoadingDoc from '@/doc/button/LoadingDoc.vue';
-import OutlinedDoc from '@/doc/button/OutlinedDoc.vue';
-import RaisedDoc from '@/doc/button/RaisedDoc.vue';
-import RaisedTextDoc from '@/doc/button/RaisedTextDoc.vue';
-import RoundedDoc from '@/doc/button/RoundedDoc.vue';
-import SeverityDoc from '@/doc/button/SeverityDoc.vue';
-import SizesDoc from '@/doc/button/SizesDoc.vue';
-import TemplateDoc from '@/doc/button/TemplateDoc.vue';
-import TextDoc from '@/doc/button/TextDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'icons',
-                    label: 'Icons',
-                    component: IconsDoc
-                },
-                {
-                    id: 'loading',
-                    label: 'Loading',
-                    component: LoadingDoc
-                },
-                {
-                    id: 'link',
-                    label: 'Link',
-                    component: LinkDoc
-                },
-                {
-                    id: 'severity',
-                    label: 'Severity',
-                    component: SeverityDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'raised',
-                    label: 'Raised',
-                    component: RaisedDoc
-                },
-                {
-                    id: 'rounded',
-                    label: 'Rounded',
-                    component: RoundedDoc
-                },
-                {
-                    id: 'text',
-                    label: 'Text',
-                    component: TextDoc
-                },
-                {
-                    id: 'raisedtext',
-                    label: 'Raised Text',
-                    component: RaisedTextDoc
-                },
-                {
-                    id: 'outlined',
-                    label: 'Outlined',
-                    component: OutlinedDoc
-                },
-                {
-                    id: 'icononly',
-                    label: 'Icon Only',
-                    component: IconOnlyDoc
-                },
-                {
-                    id: 'badge',
-                    label: 'Badge',
-                    component: BadgeDoc
-                },
-                {
-                    id: 'buttongroup',
-                    label: 'Button Group',
-                    component: ButtonGroupDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'headless',
-                    label: 'Headless',
-                    component: HeadlessDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'button'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/card/index.vue b/apps/labs/pages/card/index.vue
deleted file mode 100755
index ac424c508..000000000
--- a/apps/labs/pages/card/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/card/#api" ptLink="/card/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/card/AccessibilityDoc.vue';
-import AdvancedDoc from '@/doc/card/AdvancedDoc.vue';
-import BasicDoc from '@/doc/card/BasicDoc.vue';
-import ImportDoc from '@/doc/card/ImportDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'advanced',
-                    label: 'Advanced',
-                    component: AdvancedDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'card'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/carousel/index.vue b/apps/labs/pages/carousel/index.vue
deleted file mode 100755
index 289a85e0c..000000000
--- a/apps/labs/pages/carousel/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocComponent title="Vue Carousel Component" header="Carousel" description="Carousel is a content slider featuring various customization options." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/carousel/#api" ptLink="/carousel/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/carousel/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/carousel/BasicDoc.vue';
-import CircularDoc from '@/doc/carousel/CircularDoc.vue';
-import ImportDoc from '@/doc/carousel/ImportDoc.vue';
-import ResponsiveDoc from '@/doc/carousel/ResponsiveDoc.vue';
-import VerticalDoc from '@/doc/carousel/VerticalDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'circular',
-                    label: 'Circular',
-                    component: CircularDoc
-                },
-                {
-                    id: 'responsive',
-                    label: 'Responsive',
-                    component: ResponsiveDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'carousel'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/cascadeselect/index.vue b/apps/labs/pages/cascadeselect/index.vue
deleted file mode 100755
index 186af8e39..000000000
--- a/apps/labs/pages/cascadeselect/index.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue CascadeSelect Component"
-        header="CascadeSelect"
-        description="CascadeSelect is a form component to select a value from a nested structure of options."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/cascadeselect/#api"
-        ptLink="/cascadeselect/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue';
-import ClearIconDoc from '@/doc/cascadeselect/ClearIconDoc.vue';
-import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue';
-import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/cascadeselect/FormsDoc.vue';
-import IftaLabelDoc from '@/doc/cascadeselect/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue';
-import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue';
-import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue';
-import SizesDoc from '@/doc/cascadeselect/SizesDoc.vue';
-import TemplateDoc from '@/doc/cascadeselect/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'loadingstate',
-                    label: 'Loading State',
-                    component: LoadingStateDoc
-                },
-                {
-                    id: 'clearicon',
-                    label: 'Clear Icon',
-                    component: ClearIconDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'cascadeselect'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/checkbox/index.vue b/apps/labs/pages/checkbox/index.vue
deleted file mode 100755
index 3be41342f..000000000
--- a/apps/labs/pages/checkbox/index.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/checkbox/#api" ptLink="/checkbox/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/checkbox/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/checkbox/BasicDoc.vue';
-import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue';
-import DynamicDoc from '@/doc/checkbox/DynamicDoc.vue';
-import FilledDoc from '@/doc/checkbox/FilledDoc.vue';
-import FormsDoc from '@/doc/checkbox/FormsDoc.vue';
-import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
-import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
-import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
-import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
-import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'indeterminate',
-                    label: 'Indeterminate',
-                    component: IndeterminateDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'checkbox'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/chip/index.vue b/apps/labs/pages/chip/index.vue
deleted file mode 100755
index 34bcec043..000000000
--- a/apps/labs/pages/chip/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/chip/#api" ptLink="/chip/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/chip/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/chip/BasicDoc.vue';
-import IconDoc from '@/doc/chip/IconDoc.vue';
-import ImageDoc from '@/doc/chip/ImageDoc.vue';
-import ImportDoc from '@/doc/chip/ImportDoc.vue';
-import TemplateDoc from '@/doc/chip/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'icon',
-                    label: 'Icon',
-                    component: IconDoc
-                },
-                {
-                    id: 'image',
-                    label: 'Image',
-                    component: ImageDoc
-                },
-                {
-                    id: 'templatedoc',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'chip'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/colorpicker/index.vue b/apps/labs/pages/colorpicker/index.vue
deleted file mode 100755
index baa3c3487..000000000
--- a/apps/labs/pages/colorpicker/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocComponent title="Vue ColorPicker Component" header="ColorPicker" description="ColorPicker is an input component to select a color." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/colorpicker/#api" ptLink="/colorpicker/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/colorpicker/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/colorpicker/BasicDoc.vue';
-import DisabledDoc from '@/doc/colorpicker/DisabledDoc.vue';
-import FormatDoc from '@/doc/colorpicker/FormatDoc.vue';
-import FormsDoc from '@/doc/colorpicker/FormsDoc.vue';
-import ImportDoc from '@/doc/colorpicker/ImportDoc.vue';
-import InlineDoc from '@/doc/colorpicker/InlineDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'inline',
-                    label: 'Inline',
-                    component: InlineDoc
-                },
-                {
-                    id: 'format',
-                    label: 'Format',
-                    component: FormatDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'colorpicker'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/confirmdialog/index.vue b/apps/labs/pages/confirmdialog/index.vue
deleted file mode 100755
index 6c00523cc..000000000
--- a/apps/labs/pages/confirmdialog/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Confirmation Dialog Component"
-        header="ConfirmDialog"
-        description="ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/confirmdialog/#api"
-        ptLink="/confirmdialog/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/confirmdialog/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue';
-import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue';
-import HeadlessDoc from '@/doc/confirmdialog/HeadlessDoc.vue';
-import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
-import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
-import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'confirmation-service',
-                    label: 'Service',
-                    component: ConfirmationServiceDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'position',
-                    label: 'Position',
-                    component: PositionDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'headless',
-                    label: 'Headless',
-                    component: HeadlessDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'dialog'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/confirmpopup/index.vue b/apps/labs/pages/confirmpopup/index.vue
deleted file mode 100755
index 89cd06c56..000000000
--- a/apps/labs/pages/confirmpopup/index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Confirmation Popup Component"
-        header="ConfirmPopup"
-        description="ConfirmPopup displays a confirmation overlay displayed relatively to its target."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/confirmpopup/#api"
-        ptLink="/confirmpopup/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/confirmpopup/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/confirmpopup/BasicDoc.vue';
-import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vue';
-import HeadlessDoc from '@/doc/confirmpopup/HeadlessDoc.vue';
-import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
-import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'confirmation-service',
-                    label: 'Service',
-                    component: ConfirmationServiceDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'headless',
-                    label: 'Headless',
-                    component: HeadlessDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'confirmpopup'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/contextmenu/index.vue b/apps/labs/pages/contextmenu/index.vue
deleted file mode 100755
index 92419bd59..000000000
--- a/apps/labs/pages/contextmenu/index.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue ContextMenu Component"
-        header="ContextMenu"
-        description="ContextMenu displays an overlay menu to display actions related to an element."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/contextmenu/#api"
-        ptLink="/contextmenu/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/contextmenu/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/contextmenu/BasicDoc.vue';
-import CommandDoc from '@/doc/contextmenu/CommandDoc.vue';
-import DataTableDoc from '@/doc/contextmenu/DataTableDoc.vue';
-import DocumentDoc from '@/doc/contextmenu/DocumentDoc.vue';
-import ImportDoc from '@/doc/contextmenu/ImportDoc.vue';
-import RouterDoc from '@/doc/contextmenu/RouterDoc.vue';
-import TemplateDoc from '@/doc/contextmenu/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'document',
-                    label: 'Document',
-                    component: DocumentDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'command',
-                    label: 'Command',
-                    component: CommandDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'datatable',
-                    label: 'DataTable',
-                    component: DataTableDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'contextmenu'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/datatable/index.vue b/apps/labs/pages/datatable/index.vue
deleted file mode 100755
index b5302edd4..000000000
--- a/apps/labs/pages/datatable/index.vue
+++ /dev/null
@@ -1,366 +0,0 @@
-<template>
-    <DocComponent title="Vue DataTable Component" header="DataTable" description="DataTable displays data in tabular format." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/datatable/#api" ptLink="/datatable/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/datatable/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/datatable/BasicDoc.vue';
-import ColumnGroupDoc from '@/doc/datatable/ColumnGroupDoc.vue';
-import ColumnToggleDoc from '@/doc/datatable/ColumnToggleDoc.vue';
-import ConditionalStyleDoc from '@/doc/datatable/ConditionalStyleDoc.vue';
-import ContextMenuDoc from '@/doc/datatable/ContextMenuDoc.vue';
-import DynamicColumnsDoc from '@/doc/datatable/DynamicColumnsDoc.vue';
-import ExportDoc from '@/doc/datatable/ExportDoc.vue';
-import GridLinesDoc from '@/doc/datatable/GridLinesDoc.vue';
-import ImportDoc from '@/doc/datatable/ImportDoc.vue';
-// import LazyLoadDoc from '@/doc/datatable/LazyLoadDoc.vue';
-import ReorderDoc from '@/doc/datatable/ReorderDoc.vue';
-import RowExpansionDoc from '@/doc/datatable/RowExpansionDoc.vue';
-import SizeDoc from '@/doc/datatable/SizeDoc.vue';
-import StatefulDoc from '@/doc/datatable/StatefulDoc.vue';
-import StripedRowsDoc from '@/doc/datatable/StripedRowsDoc.vue';
-import TemplateDoc from '@/doc/datatable/TemplateDoc.vue';
-import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc.vue';
-import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc.vue';
-import CellEditDoc from '@/doc/datatable/edit/CellEditDoc.vue';
-import RowEditDoc from '@/doc/datatable/edit/RowEditDoc.vue';
-import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc.vue';
-import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc.vue';
-import PaginationBasicDoc from '@/doc/datatable/pagination/PaginationBasicDoc.vue';
-import PaginationHeadlessDoc from '@/doc/datatable/pagination/PaginationHeadlessDoc.vue';
-import PaginationTemplateDoc from '@/doc/datatable/pagination/PaginationTemplateDoc.vue';
-import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue';
-import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue';
-import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue';
-import CheckboxRowSelectionDoc from '@/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue';
-import ColumnRowSelectionDoc from '@/doc/datatable/rowselection/ColumnRowSelectionDoc.vue';
-import MultipleRowsSelectionDoc from '@/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue';
-import RadioButtonRowSelectionDoc from '@/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue';
-import RowSelectEventsDoc from '@/doc/datatable/rowselection/RowSelectEventsDoc.vue';
-import SingleRowSelectionDoc from '@/doc/datatable/rowselection/SingleRowSelectionDoc.vue';
-import CustomersDoc from '@/doc/datatable/samples/CustomersDoc.vue';
-import ProductsDoc from '@/doc/datatable/samples/ProductsDoc.vue';
-import FlexibleScrollDoc from '@/doc/datatable/scroll/FlexibleScrollDoc.vue';
-import FrozenColumnsDoc from '@/doc/datatable/scroll/FrozenColumnsDoc.vue';
-import FrozenRowsDoc from '@/doc/datatable/scroll/FrozenRowsDoc.vue';
-import HorizontalScrollDoc from '@/doc/datatable/scroll/HorizontalScrollDoc.vue';
-import VerticalScrollDoc from '@/doc/datatable/scroll/VerticalScrollDoc.vue';
-import MultipleColumnsDoc from '@/doc/datatable/sort/MultipleColumnsDoc.vue';
-import PresortDoc from '@/doc/datatable/sort/PresortDoc.vue';
-import RemovableSortDoc from '@/doc/datatable/sort/RemovableSortDoc.vue';
-import SingleColumnDoc from '@/doc/datatable/sort/SingleColumnDoc.vue';
-import LazyVirtualScrollDoc from '@/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue';
-import PreloadVirtualScrollDoc from '@/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'dynamic_columns',
-                    label: 'Dynamic Columns',
-                    component: DynamicColumnsDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'size',
-                    label: 'Size',
-                    component: SizeDoc
-                },
-                {
-                    id: 'gridlines',
-                    label: 'Grid Lines',
-                    component: GridLinesDoc
-                },
-                {
-                    id: 'striped',
-                    label: 'Striped Rows',
-                    component: StripedRowsDoc
-                },
-                {
-                    id: 'pagination',
-                    label: 'Pagination',
-                    children: [
-                        {
-                            id: 'paginator_basic',
-                            label: 'Basic',
-                            component: PaginationBasicDoc
-                        },
-                        {
-                            id: 'paginator_template',
-                            label: 'Template',
-                            component: PaginationTemplateDoc
-                        },
-                        {
-                            id: 'paginator_headless',
-                            label: 'Headless',
-                            component: PaginationHeadlessDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'sort',
-                    label: 'Sort',
-                    children: [
-                        {
-                            id: 'single_sort',
-                            label: 'Single Column',
-                            component: SingleColumnDoc
-                        },
-                        {
-                            id: 'multiple_sort',
-                            label: 'Multiple Columns',
-                            component: MultipleColumnsDoc
-                        },
-                        {
-                            id: 'pre_sort',
-                            label: 'Presort',
-                            component: PresortDoc
-                        },
-                        {
-                            id: 'removable_sort',
-                            label: 'Removable',
-                            component: RemovableSortDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'filter',
-                    label: 'Filter',
-                    children: [
-                        {
-                            id: 'basic_filter',
-                            label: 'Basic',
-                            component: BasicFilterDoc
-                        },
-                        {
-                            id: 'advanced_filter',
-                            label: 'Advanced',
-                            component: AdvancedFilterDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'row_selection',
-                    label: 'Row Selection',
-                    children: [
-                        {
-                            id: 'single_row_selection',
-                            label: 'Single',
-                            component: SingleRowSelectionDoc
-                        },
-                        {
-                            id: 'multiple_rows_selection',
-                            label: 'Multiple',
-                            component: MultipleRowsSelectionDoc
-                        },
-                        {
-                            id: 'radiobutton_row_selection',
-                            label: 'RadioButton',
-                            component: RadioButtonRowSelectionDoc
-                        },
-                        {
-                            id: 'checkbox_row_selection',
-                            label: 'Checkbox',
-                            component: CheckboxRowSelectionDoc
-                        },
-                        {
-                            id: 'column_row_selection',
-                            label: 'Column',
-                            component: ColumnRowSelectionDoc
-                        },
-                        {
-                            id: 'row_selection_events',
-                            label: 'Events',
-                            component: RowSelectEventsDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'row_expansion',
-                    label: 'Row Expansion',
-                    component: RowExpansionDoc
-                },
-                {
-                    id: 'edit',
-                    label: 'Edit',
-                    children: [
-                        {
-                            id: 'cell_edit',
-                            label: 'Cell',
-                            component: CellEditDoc
-                        },
-                        {
-                            id: 'row_edit',
-                            label: 'Row',
-                            component: RowEditDoc
-                        }
-                    ]
-                },
-                // {
-                //     id: 'lazy_load',
-                //     label: 'Lazy Load',
-                //     component: LazyLoadDoc
-                // },
-                {
-                    id: 'scroll',
-                    label: 'Scroll',
-                    children: [
-                        {
-                            id: 'vertical_scroll',
-                            label: 'Vertical',
-                            component: VerticalScrollDoc
-                        },
-                        {
-                            id: 'flex_scroll',
-                            label: 'Flexible',
-                            component: FlexibleScrollDoc
-                        },
-                        {
-                            id: 'horizontal_scroll',
-                            label: 'Horizontal',
-                            component: HorizontalScrollDoc
-                        },
-                        {
-                            id: 'frozen_rows',
-                            label: 'Frozen Rows',
-                            component: FrozenRowsDoc
-                        },
-                        {
-                            id: 'frozen_columns',
-                            label: 'Frozen Columns',
-                            component: FrozenColumnsDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'virtualscroll',
-                    label: 'Virtual Scroll',
-                    children: [
-                        {
-                            id: 'preload_virtualscroll',
-                            label: 'Preload',
-                            component: PreloadVirtualScrollDoc
-                        },
-                        {
-                            id: 'lazy_virtualscroll',
-                            label: 'Lazy',
-                            component: LazyVirtualScrollDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'column_group',
-                    label: 'Column Group',
-                    component: ColumnGroupDoc
-                },
-                {
-                    id: 'row_group',
-                    label: 'Row Group',
-                    children: [
-                        {
-                            id: 'rowgroup_subheader',
-                            label: 'Subheader',
-                            component: SubHeaderRowGroupDoc
-                        },
-                        {
-                            id: 'rowgroup_expandable',
-                            label: 'Expandable',
-                            component: ExpandableRowGroupDoc
-                        },
-                        {
-                            id: 'rowgroup_rowspan',
-                            label: 'RowSpan',
-                            component: RowSpanRowGroupDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'conditional_style',
-                    label: 'Conditional Style',
-                    component: ConditionalStyleDoc
-                },
-                {
-                    id: 'column_resize',
-                    label: 'Column Resize',
-                    children: [
-                        {
-                            id: 'resize_fitmode',
-                            label: 'Fit Mode',
-                            component: FitModeDoc
-                        },
-                        {
-                            id: 'resize_expandmode',
-                            label: 'Expand Mode',
-                            component: ExpandModeDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'reorder',
-                    label: 'Reorder',
-                    component: ReorderDoc
-                },
-                {
-                    id: 'column_toggle',
-                    label: 'Column Toggle',
-                    component: ColumnToggleDoc
-                },
-                {
-                    id: 'export',
-                    label: 'Export',
-                    component: ExportDoc
-                },
-                {
-                    id: 'contextmenu',
-                    label: 'Context Menu',
-                    component: ContextMenuDoc
-                },
-                {
-                    id: 'stateful',
-                    label: 'Stateful',
-                    component: StatefulDoc
-                },
-                {
-                    id: 'samples',
-                    label: 'Samples',
-                    children: [
-                        {
-                            id: 'customers',
-                            label: 'Customers',
-                            component: CustomersDoc
-                        },
-                        {
-                            id: 'dtproducts',
-                            label: 'Products',
-                            component: ProductsDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'datatable'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/dataview/index.vue b/apps/labs/pages/dataview/index.vue
deleted file mode 100755
index b8c8f757e..000000000
--- a/apps/labs/pages/dataview/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue DataView Component"
-        header="DataView"
-        description="DataView displays data in grid or list layout with pagination and sorting features."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/dataview/#api"
-        ptLink="/dataview/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/dataview/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/dataview/BasicDoc.vue';
-import ImportDoc from '@/doc/dataview/ImportDoc.vue';
-import LayoutDoc from '@/doc/dataview/LayoutDoc.vue';
-import LoadingDoc from '@/doc/dataview/LoadingDoc.vue';
-import PaginationDoc from '@/doc/dataview/PaginationDoc.vue';
-import SortingDoc from '@/doc/dataview/SortingDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'pagination',
-                    label: 'Pagination',
-                    component: PaginationDoc
-                },
-                {
-                    id: 'sorting',
-                    label: 'Sorting',
-                    component: SortingDoc
-                },
-                {
-                    id: 'layout',
-                    label: 'Layout',
-                    component: LayoutDoc
-                },
-                {
-                    id: 'loading',
-                    label: 'Loading',
-                    component: LoadingDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: ['dataview']
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/datepicker/index.vue b/apps/labs/pages/datepicker/index.vue
deleted file mode 100755
index 55f1455d0..000000000
--- a/apps/labs/pages/datepicker/index.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-    <DocComponent title="Vue DatePicker Component" header="DatePicker" description="DatePicker is a form component to work with dates." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/datepicker/#api" ptLink="/datepicker/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/datepicker/AccessibilityDoc';
-import BasicDoc from '@/doc/datepicker/BasicDoc.vue';
-import ButtonBarDoc from '@/doc/datepicker/ButtonBarDoc.vue';
-import DateTemplateDoc from '@/doc/datepicker/DateTemplateDoc.vue';
-import DisabledDoc from '@/doc/datepicker/DisabledDoc.vue';
-import FilledDoc from '@/doc/datepicker/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/datepicker/FloatLabelDoc.vue';
-import FormatDoc from '@/doc/datepicker/FormatDoc.vue';
-import FormsDoc from '@/doc/datepicker/FormsDoc.vue';
-import IconDoc from '@/doc/datepicker/IconDoc.vue';
-import IftaLabelDoc from '@/doc/datepicker/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/datepicker/ImportDoc.vue';
-import InlineDoc from '@/doc/datepicker/InlineDoc.vue';
-import InvalidDoc from '@/doc/datepicker/InvalidDoc.vue';
-import LocaleDoc from '@/doc/datepicker/LocaleDoc.vue';
-import MinMaxDoc from '@/doc/datepicker/MinMaxDoc.vue';
-import MonthPickerDoc from '@/doc/datepicker/MonthPickerDoc.vue';
-import MultipleDoc from '@/doc/datepicker/MultipleDoc.vue';
-import MultipleMonthsDoc from '@/doc/datepicker/MultipleMonthsDoc.vue';
-import RangeDoc from '@/doc/datepicker/RangeDoc.vue';
-import SizesDoc from '@/doc/datepicker/SizesDoc.vue';
-import TimeDoc from '@/doc/datepicker/TimeDoc.vue';
-import YearPickerDoc from '@/doc/datepicker/YearPickerDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'format',
-                    label: 'Format',
-                    component: FormatDoc
-                },
-                {
-                    id: 'locale',
-                    label: 'Locale',
-                    component: LocaleDoc
-                },
-                {
-                    id: 'icon',
-                    label: 'Icon',
-                    component: IconDoc
-                },
-                {
-                    id: 'minmax',
-                    label: 'Min / Max',
-                    component: MinMaxDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'range',
-                    label: 'Range',
-                    component: RangeDoc
-                },
-                {
-                    id: 'button',
-                    label: 'Button Bar',
-                    component: ButtonBarDoc
-                },
-                {
-                    id: 'time',
-                    label: 'Time',
-                    component: TimeDoc
-                },
-                {
-                    id: 'monthpicker',
-                    label: 'Month Picker',
-                    component: MonthPickerDoc
-                },
-                {
-                    id: 'yearpicker',
-                    label: 'Year Picker',
-                    component: YearPickerDoc
-                },
-                {
-                    id: 'multiplemonths',
-                    label: 'Multiple Months',
-                    component: MultipleMonthsDoc
-                },
-                {
-                    id: 'datetemplate',
-                    label: 'Date Template',
-                    component: DateTemplateDoc
-                },
-                {
-                    id: 'inline',
-                    label: 'Inline',
-                    component: InlineDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'datepicker'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/deferredcontent/index.vue b/apps/labs/pages/deferredcontent/index.vue
deleted file mode 100644
index 33738c036..000000000
--- a/apps/labs/pages/deferredcontent/index.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Deferred Content Component"
-        header="DeferredContent"
-        description="DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/deferredcontent/#api"
-        ptLink="/deferredcontent/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/deferredcontent/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/deferredcontent/BasicDoc.vue';
-import DataTableDoc from '@/doc/deferredcontent/DataTableDoc.vue';
-import ImportDoc from '@/doc/deferredcontent/ImportDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'datatable',
-                    label: 'DataTable',
-                    component: DataTableDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'deferred'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/dialog/index.vue b/apps/labs/pages/dialog/index.vue
deleted file mode 100755
index 96c3e46a5..000000000
--- a/apps/labs/pages/dialog/index.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/dialog/#api" ptLink="/dialog/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/dialog/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/dialog/BasicDoc.vue';
-import HeadlessDoc from '@/doc/dialog/HeadlessDoc.vue';
-import ImportDoc from '@/doc/dialog/ImportDoc.vue';
-import LongContentDoc from '@/doc/dialog/LongContentDoc.vue';
-import MaximizableDoc from '@/doc/dialog/MaximizableDoc.vue';
-import PositionDoc from '@/doc/dialog/PositionDoc.vue';
-import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc.vue';
-import TemplateDoc from '@/doc/dialog/TemplateDoc.vue';
-import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'position',
-                    label: 'Position',
-                    component: PositionDoc
-                },
-                {
-                    id: 'maximizable',
-                    label: 'Maximizable',
-                    component: MaximizableDoc
-                },
-                {
-                    id: 'longcontent',
-                    label: 'Long Content',
-                    component: LongContentDoc
-                },
-                {
-                    id: 'modal',
-                    label: 'Without Modal',
-                    component: WithoutModalDoc
-                },
-                {
-                    id: 'responsive',
-                    label: 'Responsive',
-                    component: ResponsiveDoc
-                },
-                {
-                    id: 'headless',
-                    label: 'Headless',
-                    component: HeadlessDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'dialog'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/divider/index.vue b/apps/labs/pages/divider/index.vue
deleted file mode 100755
index 703439596..000000000
--- a/apps/labs/pages/divider/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/divider/#api" ptLink="/divider/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/divider/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/divider/BasicDoc.vue';
-import ContentDoc from '@/doc/divider/ContentDoc.vue';
-import ImportDoc from '@/doc/divider/ImportDoc.vue';
-import LoginDoc from '@/doc/divider/LoginDoc.vue';
-import TypeDoc from '@/doc/divider/TypeDoc.vue';
-import VerticalDoc from '@/doc/divider/VerticalDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'type',
-                    label: 'Type',
-                    component: TypeDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'content',
-                    label: 'Content',
-                    component: ContentDoc
-                },
-                {
-                    id: 'login',
-                    label: 'Login',
-                    component: LoginDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'divider'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/dock/index.vue b/apps/labs/pages/dock/index.vue
deleted file mode 100755
index 3d8afbcd5..000000000
--- a/apps/labs/pages/dock/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocComponent title="Vue Dock Component" header="Dock" description="Dock is a navigation component consisting of menuitems." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/dock/#api" ptLink="/dock/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/dock/AccessibilityDoc.vue';
-import AdvancedDoc from '@/doc/dock/AdvancedDoc.vue';
-import BasicDoc from '@/doc/dock/BasicDoc.vue';
-import ImportDoc from '@/doc/dock/ImportDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'advance',
-                    label: 'Advanced',
-                    component: AdvancedDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'dock'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/drawer/index.vue b/apps/labs/pages/drawer/index.vue
deleted file mode 100755
index c99cb2701..000000000
--- a/apps/labs/pages/drawer/index.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocComponent title="Vue Drawer Component" header="Drawer" description="Drawer is a container component displayed as an overlay." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/drawer/#api" ptLink="/drawer/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/drawer/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/drawer/BasicDoc.vue';
-import FullScreenDoc from '@/doc/drawer/FullScreenDoc.vue';
-import HeadlessDoc from '@/doc/drawer/HeadlessDoc.vue';
-import ImportDoc from '@/doc/drawer/ImportDoc.vue';
-import PositionDoc from '@/doc/drawer/PositionDoc.vue';
-import SizeDoc from '@/doc/drawer/SizeDoc.vue';
-import TemplateDoc from '@/doc/drawer/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'position',
-                    label: 'Position',
-                    component: PositionDoc
-                },
-                {
-                    id: 'size',
-                    label: 'Size',
-                    component: SizeDoc
-                },
-                {
-                    id: 'fullscreen',
-                    label: 'Full Screen',
-                    component: FullScreenDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'headless',
-                    label: 'Headless',
-                    component: HeadlessDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'drawer'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/dynamicdialog/index.vue b/apps/labs/pages/dynamicdialog/index.vue
deleted file mode 100755
index 65ac8f206..000000000
--- a/apps/labs/pages/dynamicdialog/index.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Dynamic Dialog Component"
-        header="Dynamic Dialog"
-        description="Dialogs can be created dynamically with any component as the content using a DialogService."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/dynamicdialog/#api"
-        ptLink="/dynamicdialog/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/dynamicdialog/AccessibilityDoc.vue';
-import CloseDialogDoc from '@/doc/dynamicdialog/CloseDialogDoc.vue';
-import CustomizationDoc from '@/doc/dynamicdialog/CustomizationDoc.vue';
-import DialogServiceDoc from '@/doc/dynamicdialog/DialogServiceDoc.vue';
-import EventsDoc from '@/doc/dynamicdialog/EventsDoc.vue';
-import ExampleDoc from '@/doc/dynamicdialog/ExampleDoc.vue';
-import ImportDoc from '@/doc/dynamicdialog/ImportDoc.vue';
-import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc.vue';
-import PassingDataDoc from '@/doc/dynamicdialog/PassingDataDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'dialogservice',
-                    label: 'Dialog Service',
-                    component: DialogServiceDoc
-                },
-                {
-                    id: 'open',
-                    label: 'Open',
-                    component: OpenDialogDoc
-                },
-                {
-                    id: 'customization',
-                    label: 'Customization',
-                    component: CustomizationDoc
-                },
-                {
-                    id: 'close',
-                    label: 'Close',
-                    component: CloseDialogDoc
-                },
-                {
-                    id: 'passingdata',
-                    label: 'Passing Data',
-                    component: PassingDataDoc
-                },
-                {
-                    id: 'events',
-                    label: 'Events',
-                    component: EventsDoc
-                },
-                {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'dialog'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/fieldset/index.vue b/apps/labs/pages/fieldset/index.vue
deleted file mode 100755
index 174cc4811..000000000
--- a/apps/labs/pages/fieldset/index.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/fieldset/#api" ptLink="/fieldset/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/fieldset/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/fieldset/BasicDoc.vue';
-import ImportDoc from '@/doc/fieldset/ImportDoc.vue';
-import TemplateDoc from '@/doc/fieldset/TemplateDoc.vue';
-import ToggleableDoc from '@/doc/fieldset/ToggleableDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'toggleable',
-                    label: 'Toggleable',
-                    component: ToggleableDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'fieldset'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/fileupload/index.vue b/apps/labs/pages/fileupload/index.vue
deleted file mode 100644
index 2bc261bd0..000000000
--- a/apps/labs/pages/fileupload/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue File Upload Component"
-        header="File Upload"
-        description="FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/fileupload/#api"
-        ptLink="/fileupload/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/fileupload/AccessibilityDoc.vue';
-import AdvancedDoc from '@/doc/fileupload/AdvancedDoc.vue';
-import AutoDoc from '@/doc/fileupload/AutoDoc.vue';
-import BasicDoc from '@/doc/fileupload/BasicDoc.vue';
-import CustomUploadDoc from '@/doc/fileupload/CustomUploadDoc.vue';
-import ImportDoc from '@/doc/fileupload/ImportDoc.vue';
-import TemplateDoc from '@/doc/fileupload/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'auto',
-                    label: 'Auto',
-                    component: AutoDoc
-                },
-                {
-                    id: 'advanced',
-                    label: 'Advanced',
-                    component: AdvancedDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'custom-upload',
-                    label: 'Custom Upload',
-                    component: CustomUploadDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'fileupload'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/floatlabel/index.vue b/apps/labs/pages/floatlabel/index.vue
deleted file mode 100644
index 77a0fd27b..000000000
--- a/apps/labs/pages/floatlabel/index.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/floatlabel/#api" ptLink="/floatlabel/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/floatlabel/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/floatlabel/BasicDoc.vue';
-import ImportDoc from '@/doc/floatlabel/ImportDoc.vue';
-import InvalidDoc from '@/doc/floatlabel/InvalidDoc.vue';
-import VariantsDoc from '@/doc/floatlabel/VariantsDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'variants',
-                    label: 'Variants',
-                    component: VariantsDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'floatlabel'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/fluid/index.vue b/apps/labs/pages/fluid/index.vue
deleted file mode 100644
index 0db53435d..000000000
--- a/apps/labs/pages/fluid/index.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Fluid Component"
-        header="Fluid"
-        description="Fluid is a layout component to make descendant components span full width of their container."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/fluid/#api"
-        ptLink="/fluid/#pt"
-    />
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/fluid/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/fluid/BasicDoc.vue';
-import ImportDoc from '@/doc/fluid/ImportDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'fluid'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/galleria/index.vue b/apps/labs/pages/galleria/index.vue
deleted file mode 100755
index 292bc280d..000000000
--- a/apps/labs/pages/galleria/index.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-    <DocComponent title="Vue Gallery Component" header="Gallery" description="Galleria is a content gallery component." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/galleria/#api" ptLink="/galleria/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/galleria/AccessibilityDoc.vue';
-import AdvancedDoc from '@/doc/galleria/AdvancedDoc.vue';
-import AutoPlayDoc from '@/doc/galleria/AutoPlayDoc.vue';
-import BasicDoc from '@/doc/galleria/BasicDoc.vue';
-import CaptionDoc from '@/doc/galleria/CaptionDoc.vue';
-import ControlledDoc from '@/doc/galleria/ControlledDoc.vue';
-import ImportDoc from '@/doc/galleria/ImportDoc.vue';
-import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc.vue';
-import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc.vue';
-import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc.vue';
-import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc.vue';
-import WithoutThumbnailsDoc from '@/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue';
-import ClickEventDoc from '@/doc/galleria/indicator/ClickEventDoc.vue';
-import HoverEventDoc from '@/doc/galleria/indicator/HoverEventDoc.vue';
-import PositionDoc from '@/doc/galleria/indicator/PositionDoc.vue';
-import TemplateDoc from '@/doc/galleria/indicator/TemplateDoc.vue';
-import HoverDoc from '@/doc/galleria/navigator/HoverDoc.vue';
-import IndicatorsDoc from '@/doc/galleria/navigator/IndicatorsDoc.vue';
-import ItemThumbnailsDoc from '@/doc/galleria/navigator/ItemThumbnailsDoc.vue';
-import ItemWithoutThumbnailsDoc from '@/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'indicator',
-                    label: 'Indicator',
-                    description: 'Indicators allow quick navigation between the items.',
-                    children: [
-                        {
-                            id: 'indicatorbasic',
-                            label: 'Click Event',
-                            component: ClickEventDoc
-                        },
-                        {
-                            id: 'indicatorhoverevent',
-                            label: 'Hover Event',
-                            component: HoverEventDoc
-                        },
-                        {
-                            id: 'indicatorposition',
-                            label: 'Position',
-                            component: PositionDoc
-                        },
-                        {
-                            id: 'indicatortemplate',
-                            label: 'Template',
-                            component: TemplateDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'thumbnail',
-                    label: 'Thumbnail',
-                    component: ThumbnailDoc
-                },
-                {
-                    id: 'responsive',
-                    label: 'Responsive',
-                    component: ResponsiveDoc
-                },
-                {
-                    id: 'fullscreen',
-                    label: 'Full Screen',
-                    description: 'In fullscreen mode content covers the whole page over a modal layer.',
-                    children: [
-                        {
-                            id: 'fullscreenwiththumbnail',
-                            label: 'With Thumbnails',
-                            component: WithThumbnailsDoc
-                        },
-                        {
-                            id: 'fullscreenwithoutthumnails',
-                            label: 'Without Thumbnails',
-                            component: WithoutThumbnailsDoc
-                        },
-                        {
-                            id: 'fullscreencustom',
-                            label: 'Custom Content',
-                            component: CustomContentDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'navigator',
-                    label: 'Navigator',
-                    description: 'Navigators are used to move back and forth between the images.',
-                    children: [
-                        {
-                            id: 'itemthumbnails',
-                            label: 'With Thumbnails',
-                            component: ItemThumbnailsDoc
-                        },
-                        {
-                            id: 'itemwithouthumbnails',
-                            label: 'Without Thumbnails',
-                            component: ItemWithoutThumbnailsDoc
-                        },
-                        {
-                            id: 'itemhover',
-                            label: 'Display on Hover',
-                            component: HoverDoc
-                        },
-                        {
-                            id: 'indicators',
-                            label: 'With Indicators',
-                            component: IndicatorsDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'autoplay',
-                    label: 'AutoPlay',
-                    component: AutoPlayDoc
-                },
-                {
-                    id: 'caption',
-                    label: 'Caption',
-                    component: CaptionDoc
-                },
-                {
-                    id: 'advanced',
-                    label: 'Advanced',
-                    component: AdvancedDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'galleria'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/iconfield/index.vue b/apps/labs/pages/iconfield/index.vue
deleted file mode 100644
index 1e1ea5723..000000000
--- a/apps/labs/pages/iconfield/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocComponent title="Vue IconField" header="IconField" description="IconField wraps an input and an icon." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/iconfield/#api" ptLink="/iconfield/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/iconfield/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/iconfield/BasicDoc.vue';
-import FloatLabelDoc from '@/doc/iconfield/FloatLabelDoc.vue';
-import IftaLabelDoc from '@/doc/iconfield/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/iconfield/ImportDoc.vue';
-import SizesDoc from '@/doc/iconfield/SizesDoc.vue';
-import TemplateDoc from '@/doc/iconfield/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'iconfield'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/icons/index.vue b/apps/labs/pages/icons/index.vue
old mode 100755
new mode 100644
index e9750a0f2..17d8a42ef
--- a/apps/labs/pages/icons/index.vue
+++ b/apps/labs/pages/icons/index.vue
@@ -1,18 +1,15 @@
 <template>
     <div>
         <Head>
-            <Title>Vue Icon Library - PrimeVue</Title>
-            <Meta name="description" content="PrimeIcons is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating." />
+            <Title>Icons - Plex</Title>
+            <Meta name="description" content="Plex components can be used with any icon library using the templating features." />
         </Head>
 
         <div class="doc">
             <div class="doc-main">
                 <div class="doc-intro">
                     <h1>Icons</h1>
-                    <p>
-                        <a href="https://github.com/primefaces/primeicons"> PrimeIcons </a>
-                        is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating.
-                    </p>
+                    <p>Plex components can be used with any icon library using the templating features.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>
@@ -22,64 +19,40 @@
 </template>
 
 <script>
-import BasicDoc from '@/doc/icons/BasicDoc.vue';
-import ColorDoc from '@/doc/icons/ColorDoc.vue';
-import ConstantsDoc from '@/doc/icons/ConstantsDoc.vue';
-import DownloadDoc from '@/doc/icons/DownloadDoc.vue';
-import FigmaDoc from '@/doc/icons/FigmaDoc.vue';
-import ImportDoc from '@/doc/icons/ImportDoc.vue';
-import ListDoc from '@/doc/icons/ListDoc.vue';
-import SizeDoc from '@/doc/icons/SizeDoc.vue';
-import SpinDoc from '@/doc/icons/SpinDoc.vue';
+import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
+import ImageDoc from '@/doc/icons/ImageDoc.vue';
+import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
+import SVGDoc from '@/doc/icons/SVGDoc.vue';
+import VideoDoc from '@/doc/icons/VideoDoc.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'download',
-                    label: 'Download',
-                    component: DownloadDoc
+                    id: 'material',
+                    label: 'Material',
+                    component: MaterialDoc
                 },
                 {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
+                    id: 'fontawesome',
+                    label: 'FontAwesome',
+                    component: FontAwesomeDoc
                 },
                 {
-                    id: 'figma',
-                    label: 'Figma',
-                    component: FigmaDoc
+                    id: 'svg',
+                    label: 'SVG',
+                    component: SVGDoc
                 },
                 {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
                 },
                 {
-                    id: 'size',
-                    label: 'Size',
-                    component: SizeDoc
-                },
-                {
-                    id: 'color',
-                    label: 'Color',
-                    component: ColorDoc
-                },
-                {
-                    id: 'spin',
-                    label: 'Spin',
-                    component: SpinDoc
-                },
-                {
-                    id: 'constants',
-                    label: 'Constants',
-                    component: ConstantsDoc
-                },
-                {
-                    id: 'list',
-                    label: 'List',
-                    component: ListDoc
+                    id: 'video',
+                    label: 'Video Tutorial',
+                    component: VideoDoc
                 }
             ]
         };
diff --git a/apps/labs/pages/iftalabel/index.vue b/apps/labs/pages/iftalabel/index.vue
deleted file mode 100644
index d1998c157..000000000
--- a/apps/labs/pages/iftalabel/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocComponent title="Vue Ifta Label" header="IftaLabel" description="IftaLabel is used to create infield top aligned labels" :componentDocs="docs" :presetDoc="presetDoc" apiLink="/iftalabel/#api" ptLink="/iftalabel/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/iftalabel/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/iftalabel/BasicDoc.vue';
-import ImportDoc from '@/doc/iftalabel/ImportDoc.vue';
-import InvalidDoc from '@/doc/iftalabel/InvalidDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'iftalabel'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/image/index.vue b/apps/labs/pages/image/index.vue
deleted file mode 100755
index 3f3218779..000000000
--- a/apps/labs/pages/image/index.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/image/#api" ptLink="/image/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/image/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/image/BasicDoc.vue';
-import ImportDoc from '@/doc/image/ImportDoc.vue';
-import PreviewDoc from '@/doc/image/PreviewDoc.vue';
-import TemplateDoc from '@/doc/image/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'preview',
-                    label: 'Preview',
-                    component: PreviewDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'image'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/imagecompare/index.vue b/apps/labs/pages/imagecompare/index.vue
deleted file mode 100644
index 52070aa38..000000000
--- a/apps/labs/pages/imagecompare/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocComponent title="Vue ImageCompare Component" header="ImageCompare" description="Compare two images side by side with a slider." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/imagecompare/#api" ptLink="/imagecompare/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/imagecompare/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/imagecompare/BasicDoc.vue';
-import ImportDoc from '@/doc/imagecompare/ImportDoc.vue';
-import ResponsiveDoc from '@/doc/imagecompare/ResponsiveDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'responsive',
-                    label: 'Responsive',
-                    component: ResponsiveDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'imagecompare'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/index.vue b/apps/labs/pages/index.vue
index ce23326b0..72e34166b 100644
--- a/apps/labs/pages/index.vue
+++ b/apps/labs/pages/index.vue
@@ -2,7 +2,7 @@
     <div :class="landingClass">
         <AppNews />
         <AppTopBar :showMenuButton="false" />
-        <HeroSection />
+        <h1>Hello World</h1>
     </div>
 </template>
 
@@ -13,8 +13,6 @@ definePageMeta({
 </script>
 
 <script>
-import HeroSection from '/components/landing/HeroSection.vue';
-
 export default {
     layout: 'custom',
     props: {
@@ -23,24 +21,10 @@ export default {
             default: null
         }
     },
-    mounted() {
-        let afId = this.$route.query['af_id'];
-
-        if (afId) {
-            let today = new Date();
-            let expire = new Date();
-
-            expire.setTime(today.getTime() + 3600000 * 24 * 7);
-            document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
-        }
-    },
     computed: {
         landingClass() {
             return ['landing bg-surface-0 dark:bg-surface-900', { 'layout-news-active': this.$appState?.newsActive, 'layout-ripple-disabled': this.$primevue.config.ripple === false }];
         }
-    },
-    components: {
-        HeroSection
     }
 };
 </script>
diff --git a/apps/labs/pages/inplace/index.vue b/apps/labs/pages/inplace/index.vue
deleted file mode 100644
index 40b5ffe87..000000000
--- a/apps/labs/pages/inplace/index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Inplace"
-        header="Inplace"
-        description="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/inplace/#api"
-        ptLink="/inplace/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/inplace/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/inplace/BasicDoc.vue';
-import ImageDoc from '@/doc/inplace/ImageDoc.vue';
-import ImportDoc from '@/doc/inplace/ImportDoc.vue';
-import InputDoc from '@/doc/inplace/InputDoc.vue';
-import LazyDoc from '@/doc/inplace/LazyDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'input',
-                    label: 'Input',
-                    component: InputDoc
-                },
-                {
-                    id: 'image',
-                    label: 'Image',
-                    component: ImageDoc
-                },
-                {
-                    id: 'lazy',
-                    label: 'Lazy',
-                    component: LazyDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'inplace'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/inputgroup/index.vue b/apps/labs/pages/inputgroup/index.vue
deleted file mode 100755
index e33c5ca41..000000000
--- a/apps/labs/pages/inputgroup/index.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue InputGroup Component"
-        header="InputGroup"
-        description="Text, icon, buttons and other content can be grouped next to an input."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/inputgroup/#api"
-        ptLink="/inputgroup/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/inputgroup/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/inputgroup/BasicDoc.vue';
-import ButtonDoc from '@/doc/inputgroup/ButtonDoc.vue';
-import CheckboxDoc from '@/doc/inputgroup/CheckboxDoc.vue';
-import FloatLabelDoc from '@/doc/inputgroup/FloatLabelDoc.vue';
-import IftaLabelDoc from '@/doc/inputgroup/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/inputgroup/ImportDoc.vue';
-import MultipleDoc from '@/doc/inputgroup/MultipleDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'button',
-                    label: 'Button',
-                    component: ButtonDoc
-                },
-                {
-                    id: 'checkbox',
-                    label: 'Checkbox & Radio',
-                    component: CheckboxDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'inputgroup'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/inputmask/index.vue b/apps/labs/pages/inputmask/index.vue
deleted file mode 100755
index 008dea9a3..000000000
--- a/apps/labs/pages/inputmask/index.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Mask Component"
-        header="InputMask"
-        description="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/inputmask/#api"
-        ptLink="/inputmask/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
-import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
-import FilledDoc from '@/doc/inputmask/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/inputmask/FormsDoc.vue';
-import IftaLabelDoc from '@/doc/inputmask/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
-import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
-import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
-import OptionalDoc from '@/doc/inputmask/OptionalDoc.vue';
-import SizesDoc from '@/doc/inputmask/SizesDoc.vue';
-import SlotCharDoc from '@/doc/inputmask/SlotCharDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'mask',
-                    label: 'Mask',
-                    component: MaskDoc
-                },
-                {
-                    id: 'optional',
-                    label: 'Optional',
-                    component: OptionalDoc
-                },
-                {
-                    id: 'slotchar',
-                    label: 'SlotChar',
-                    component: SlotCharDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'inputmask'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/inputnumber/index.vue b/apps/labs/pages/inputnumber/index.vue
deleted file mode 100755
index ef615a918..000000000
--- a/apps/labs/pages/inputnumber/index.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an extension to standard input element." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/inputnumber/#api" ptLink="/inputnumber/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/inputnumber/AccessibilityDoc.vue';
-import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
-import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
-import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
-import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/inputnumber/FormsDoc.vue';
-import IftaLabelDoc from '@/doc/inputnumber/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
-import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
-import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
-import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
-import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
-import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
-import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'numerals',
-                    label: 'Numerals',
-                    component: NumeralsDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'locale',
-                    label: 'Locale',
-                    component: LocaleDoc
-                },
-                {
-                    id: 'currency',
-                    label: 'Currency',
-                    component: CurrencyDoc
-                },
-                {
-                    id: 'prefixsuffix',
-                    label: 'Prefix & Suffix',
-                    component: PrefixSuffixDoc
-                },
-                {
-                    id: 'buttons',
-                    label: 'Buttons',
-                    component: ButtonsDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'inputnumber'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/inputotp/index.vue b/apps/labs/pages/inputotp/index.vue
deleted file mode 100644
index c6547efc3..000000000
--- a/apps/labs/pages/inputotp/index.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <DocComponent title="Vue Otp Input Component" header="InputOtp" description="Input Otp is used to enter one time passwords." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/inputotp/#api" ptLink="/inputotp/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
-import FilledDoc from '@/doc/inputotp/FilledDoc.vue';
-import FormsDoc from '@/doc/inputotp/FormsDoc.vue';
-import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
-import IntegerOnlyDoc from '@/doc/inputotp/IntegerOnlyDoc.vue';
-import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
-import SampleDoc from '@/doc/inputotp/SampleDoc.vue';
-import SizesDoc from '@/doc/inputotp/SizesDoc.vue';
-import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'mask',
-                    label: 'Mask',
-                    component: MaskDoc
-                },
-                {
-                    id: 'integeronly',
-                    label: 'Integer Only',
-                    component: IntegerOnlyDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'sample',
-                    label: 'Sample',
-                    component: SampleDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'inputotp'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/inputtext/index.vue b/apps/labs/pages/inputtext/index.vue
old mode 100755
new mode 100644
index ceaeec684..c2019f7c2
--- a/apps/labs/pages/inputtext/index.vue
+++ b/apps/labs/pages/inputtext/index.vue
@@ -1,84 +1,46 @@
 <template>
-    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/inputtext/#api" ptLink="/inputtext/#pt" />
+    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element with theming." :componentDocs="docs" />
 </template>
 
-<script>
-import AccessibilityDoc from '@/doc/inputtext/AccessibilityDoc.vue';
+<script setup>
 import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
-import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/inputtext/FormsDoc.vue';
-import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
-import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue';
+/*import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';*/
 import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
 import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'helptext',
-                    label: 'Help Text',
-                    component: HelpTextDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'inputtext'
-            }
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    }/*,
+    {
+        id: 'helptext',
+        label: 'Help Text',
+        component: HelpTextDoc
+    },*/,
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
     }
-};
+]);
 </script>
diff --git a/apps/labs/pages/customicons/index.vue b/apps/labs/pages/introduction/index.vue
similarity index 88%
rename from apps/labs/pages/customicons/index.vue
rename to apps/labs/pages/introduction/index.vue
index e66e77ec8..337bdbd75 100644
--- a/apps/labs/pages/customicons/index.vue
+++ b/apps/labs/pages/introduction/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <Head>
-            <Title>Tailwind CSS | Vue Icon Library</Title>
-            <Meta name="description" content="Tailwind CSS based PrimeVue components can be used with any icon library using the templating features." />
+            <Title>Vue Icon Library - PrimeVue</Title>
+            <Meta name="description" content="PrimeVue components can be used with any icon library using the templating features." />
         </Head>
 
         <div class="doc">
diff --git a/apps/labs/pages/knob/index.vue b/apps/labs/pages/knob/index.vue
deleted file mode 100755
index febff1cf4..000000000
--- a/apps/labs/pages/knob/index.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-    <DocComponent title="Vue Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/knob/#api" ptLink="/knob/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/knob/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/knob/BasicDoc.vue';
-import ColorDoc from '@/doc/knob/ColorDoc.vue';
-import DisabledDoc from '@/doc/knob/DisabledDoc.vue';
-import FormsDoc from '@/doc/knob/FormsDoc.vue';
-import ImportDoc from '@/doc/knob/ImportDoc.vue';
-import MinMaxDoc from '@/doc/knob/MinMaxDoc.vue';
-import ReactiveDoc from '@/doc/knob/ReactiveDoc.vue';
-import ReadOnlyDoc from '@/doc/knob/ReadOnlyDoc.vue';
-import SizeDoc from '@/doc/knob/SizeDoc.vue';
-import StepDoc from '@/doc/knob/StepDoc.vue';
-import StrokeDoc from '@/doc/knob/StrokeDoc.vue';
-import TemplateDoc from '@/doc/knob/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'minmax',
-                    label: 'Min/Max',
-                    component: MinMaxDoc
-                },
-                {
-                    id: 'step',
-                    label: 'Step',
-                    component: StepDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'stroke',
-                    label: 'Stroke',
-                    component: StrokeDoc
-                },
-                {
-                    id: 'size',
-                    label: 'Size',
-                    component: SizeDoc
-                },
-                {
-                    id: 'color',
-                    label: 'Color',
-                    component: ColorDoc
-                },
-                {
-                    id: 'reactive',
-                    label: 'Reactive',
-                    component: ReactiveDoc
-                },
-                {
-                    id: 'readonly',
-                    label: 'ReadOnly',
-                    component: ReadOnlyDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'knob'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/listbox/index.vue b/apps/labs/pages/listbox/index.vue
deleted file mode 100755
index e9c299416..000000000
--- a/apps/labs/pages/listbox/index.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <DocComponent title="Vue Listbox Component" header="Listbox" description="Listbox is used to select one or more values from a list of items." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/listbox/#api" ptLink="/listbox/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/listbox/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/listbox/BasicDoc.vue';
-import CheckmarkDoc from '@/doc/listbox/CheckmarkDoc.vue';
-import DisabledDoc from '@/doc/listbox/DisabledDoc.vue';
-import FilterDoc from '@/doc/listbox/FilterDoc.vue';
-import FormsDoc from '@/doc/listbox/FormsDoc.vue';
-import GroupDoc from '@/doc/listbox/GroupDoc.vue';
-import ImportDoc from '@/doc/listbox/ImportDoc.vue';
-import InvalidDoc from '@/doc/listbox/InvalidDoc.vue';
-import MultipleDoc from '@/doc/listbox/MultipleDoc.vue';
-import TemplateDoc from '@/doc/listbox/TemplateDoc.vue';
-import VirtualScrollDoc from '@/doc/listbox/VirtualScrollDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'checkmark',
-                    label: 'Checkmark',
-                    component: CheckmarkDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'filter',
-                    label: 'Filter',
-                    component: FilterDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'virtualscroll',
-                    label: 'Virtual Scroll',
-                    component: VirtualScrollDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'listbox'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/megamenu/index.vue b/apps/labs/pages/megamenu/index.vue
deleted file mode 100755
index ceb876288..000000000
--- a/apps/labs/pages/megamenu/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue MegaMenu Component"
-        header="MegaMenu"
-        description="MegaMenu is a navigation component that displays submenus and content in columns."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/megamenu/#api"
-        ptLink="/megamenu/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/megamenu/BasicDoc.vue';
-import CommandDoc from '@/doc/megamenu/CommandDoc.vue';
-import ImportDoc from '@/doc/megamenu/ImportDoc.vue';
-import RouterDoc from '@/doc/megamenu/RouterDoc.vue';
-import TemplateDoc from '@/doc/megamenu/TemplateDoc.vue';
-import VerticalDoc from '@/doc/megamenu/VerticalDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'Vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'command',
-                    label: 'Command',
-                    component: CommandDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'megamenu'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/menu/index.vue b/apps/labs/pages/menu/index.vue
deleted file mode 100755
index 7dd74c0e3..000000000
--- a/apps/labs/pages/menu/index.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocComponent title="Vue Menu Component" header="Menu" description="Menu displays a list of items in vertical orientation." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/menu/#api" ptLink="/menu/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/menu/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/menu/BasicDoc.vue';
-import CommandDoc from '@/doc/menu/CommandDoc.vue';
-import GroupDoc from '@/doc/menu/GroupDoc.vue';
-import ImportDoc from '@/doc/menu/ImportDoc.vue';
-import PopupDoc from '@/doc/menu/PopupDoc.vue';
-import RouterDoc from '@/doc/menu/RouterDoc.vue';
-import TemplateDoc from '@/doc/menu/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'popup',
-                    label: 'Popup',
-                    component: PopupDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'command',
-                    label: 'Command',
-                    component: CommandDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'menu'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/menubar/index.vue b/apps/labs/pages/menubar/index.vue
deleted file mode 100755
index 9a16fc854..000000000
--- a/apps/labs/pages/menubar/index.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <DocComponent title="Vue Navbar Component" header="Menubar" description="Menubar also known as Navbar, is a horizontal menu component." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/menubar/#api" ptLink="/menubar/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/menubar/BasicDoc.vue';
-import AdvancedDoc from '@/doc/menubar/AdvancedDoc.vue';
-import CommandDoc from '@/doc/menubar/CommandDoc.vue';
-import ImportDoc from '@/doc/menubar/ImportDoc.vue';
-import RouterDoc from '@/doc/menubar/RouterDoc.vue';
-import TemplateDoc from '@/doc/menubar/TemplateDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'advanced',
-                    label: 'Advanced',
-                    component: AdvancedDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'command',
-                    label: 'Command',
-                    component: CommandDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'menubar'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/message/index.vue b/apps/labs/pages/message/index.vue
deleted file mode 100755
index 42ae9ce21..000000000
--- a/apps/labs/pages/message/index.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <DocComponent title="Vue Message Component" header="Message" description="Message component is used to display inline messages." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/message/#api" ptLink="/message/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/message/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/message/BasicDoc.vue';
-import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
-import DynamicDoc from '@/doc/message/DynamicDoc.vue';
-import FormsDoc from '@/doc/message/FormsDoc.vue';
-import IconDoc from '@/doc/message/IconDoc.vue';
-import ImportDoc from '@/doc/message/ImportDoc.vue';
-import LifeDoc from '@/doc/message/LifeDoc.vue';
-import OutlinedDoc from '@/doc/message/OutlinedDoc.vue';
-import SeverityDoc from '@/doc/message/SeverityDoc.vue';
-import SimpleDoc from '@/doc/message/SimpleDoc.vue';
-import SizesDoc from '@/doc/message/SizesDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'severity',
-                    label: 'Severity',
-                    component: SeverityDoc
-                },
-                {
-                    id: 'icon',
-                    label: 'Icon',
-                    component: IconDoc
-                },
-                {
-                    id: 'outlined',
-                    label: 'Outlined',
-                    component: OutlinedDoc
-                },
-                {
-                    id: 'simple',
-                    label: 'Simple',
-                    component: SimpleDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'closable',
-                    label: 'Closable',
-                    component: ClosabledDoc
-                },
-                {
-                    id: 'life',
-                    label: 'Life',
-                    component: LifeDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'message'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/metergroup/index.vue b/apps/labs/pages/metergroup/index.vue
deleted file mode 100644
index 4e8f545cd..000000000
--- a/apps/labs/pages/metergroup/index.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocComponent title="Vue MeterGroup Component" header="MeterGroup" description="MeterGroup displays scalar measurements within a known range." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/metergroup/#api" ptLink="/metergroup/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
-import IconDoc from '@/doc/metergroup/IconDoc.vue';
-import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
-import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
-import MinMaxDoc from '@/doc/metergroup/MinMaxDoc.vue';
-import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
-import TemplateDoc from '@/doc/metergroup/TemplateDoc.vue';
-import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'icon',
-                    label: 'Icon',
-                    component: IconDoc
-                },
-                {
-                    id: 'label',
-                    label: 'Label',
-                    component: LabelDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'minmax',
-                    label: 'Min-Max',
-                    component: MinMaxDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'metergroup'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/multiselect/index.vue b/apps/labs/pages/multiselect/index.vue
deleted file mode 100755
index 2a3ef8bf4..000000000
--- a/apps/labs/pages/multiselect/index.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue MultiSelect Component"
-        header="MultiSelect"
-        description="MultiSelect is used to select multiple items from a collection."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/multiselect/#api"
-        ptLink="/multiselect/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/multiselect/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/multiselect/BasicDoc.vue';
-import ChipsDoc from '@/doc/multiselect/ChipsDoc.vue';
-import ClearIconDoc from '@/doc/multiselect/ClearIconDoc.vue';
-import DisabledDoc from '@/doc/multiselect/DisabledDoc.vue';
-import FilledDoc from '@/doc/multiselect/FilledDoc.vue';
-import FilterDoc from '@/doc/multiselect/FilterDoc.vue';
-import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/multiselect/FormsDoc.vue';
-import GroupDoc from '@/doc/multiselect/GroupDoc.vue';
-import IftaLabelDoc from '@/doc/multiselect/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/multiselect/ImportDoc.vue';
-import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue';
-import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue';
-import SizesDoc from '@/doc/multiselect/SizesDoc.vue';
-import TemplateDoc from '@/doc/multiselect/TemplateDoc.vue';
-import VirtualScrollDoc from '@/doc/multiselect/VirtualScrollDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'chips',
-                    label: 'Chips',
-                    component: ChipsDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'filter',
-                    label: 'Filter',
-                    component: FilterDoc
-                },
-                {
-                    id: 'clearicon',
-                    label: 'Clear Icon',
-                    component: ClearIconDoc
-                },
-                {
-                    id: 'loadingstate',
-                    label: 'Loading State',
-                    component: LoadingStateDoc
-                },
-                {
-                    id: 'virtualscroll',
-                    label: 'VirtualScroll',
-                    component: VirtualScrollDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'multiselect'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/orderlist/index.vue b/apps/labs/pages/orderlist/index.vue
deleted file mode 100755
index e16b12d79..000000000
--- a/apps/labs/pages/orderlist/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocComponent title="Vue OrderList Component" header="OrderList" description="OrderList is used to sort a collection." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/orderlist/#api" ptLink="/orderlist/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/orderlist/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/orderlist/BasicDoc.vue';
-import ImportDoc from '@/doc/orderlist/ImportDoc.vue';
-import TemplateDoc from '@/doc/orderlist/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'orderlist'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/organizationchart/index.vue b/apps/labs/pages/organizationchart/index.vue
deleted file mode 100755
index 9e825213a..000000000
--- a/apps/labs/pages/organizationchart/index.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Organization Chart Component"
-        header="OrganizationChart"
-        description="OrganizationChart visualizes hierarchical organization data."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/organizationchart/#api"
-        ptLink="/organizationchart/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/organizationchart/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/organizationchart/BasicDoc.vue';
-import ColoredDoc from '@/doc/organizationchart/ColoredDoc.vue';
-import ImportDoc from '@/doc/organizationchart/ImportDoc.vue';
-import SelectionDoc from '@/doc/organizationchart/SelectionDoc.vue';
-import TemplateDoc from '@/doc/organizationchart/TemplateDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'selection',
-                    label: 'Selection',
-                    component: SelectionDoc
-                },
-                {
-                    id: 'colored',
-                    label: 'Colored',
-                    component: ColoredDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'organizationchart'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/paginator/index.vue b/apps/labs/pages/paginator/index.vue
deleted file mode 100755
index 6de5e36c2..000000000
--- a/apps/labs/pages/paginator/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Paginator Component"
-        header="Paginator"
-        description="Paginator displays data in paged format and provides navigation between pages."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/paginator/#api"
-        ptLink="/paginator/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/paginator/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/paginator/BasicDoc.vue';
-import CurrentPageReportDoc from '@/doc/paginator/CurrentPageReportDoc.vue';
-import CustomContentDoc from '@/doc/paginator/CustomContentDoc.vue';
-import HeadlessDoc from '@/doc/paginator/HeadlessDoc.vue';
-import ImportDoc from '@/doc/paginator/ImportDoc.vue';
-import TemplateDoc from '@/doc/paginator/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'currentpagereport',
-                    label: 'Current Page Report',
-                    component: CurrentPageReportDoc
-                },
-                {
-                    id: 'customcontent',
-                    label: 'Custom Content',
-                    component: CustomContentDoc
-                },
-                {
-                    id: 'headless',
-                    label: 'Headless',
-                    component: HeadlessDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'paginator'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/panel/index.vue b/apps/labs/pages/panel/index.vue
deleted file mode 100755
index aeec3a831..000000000
--- a/apps/labs/pages/panel/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/panel/#api" ptLink="/panel/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/panel/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/panel/BasicDoc.vue';
-import ImportDoc from '@/doc/panel/ImportDoc.vue';
-import TemplateDoc from '@/doc/panel/TemplateDoc.vue';
-import ToggleableDoc from '@/doc/panel/ToggleableDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'toggleable',
-                    label: 'Toggleable',
-                    component: ToggleableDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'panel'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/panelmenu/index.vue b/apps/labs/pages/panelmenu/index.vue
deleted file mode 100755
index 49c658b0b..000000000
--- a/apps/labs/pages/panelmenu/index.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocComponent title="Vue PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/panelmenu/#api" ptLink="/panelmenu/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/panelmenu/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/panelmenu/BasicDoc.vue';
-import CommandDoc from '@/doc/panelmenu/CommandDoc.vue';
-import ControlledDoc from '@/doc/panelmenu/ControlledDoc.vue';
-import ImportDoc from '@/doc/panelmenu/ImportDoc.vue';
-import MultipleDoc from '@/doc/panelmenu/MultipleDoc.vue';
-import RouterDoc from '@/doc/panelmenu/RouterDoc.vue';
-import TemplateDoc from '@/doc/panelmenu/TemplateDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'command',
-                    label: 'Command',
-                    component: CommandDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'panelmenu'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/password/index.vue b/apps/labs/pages/password/index.vue
deleted file mode 100755
index 96d4c4806..000000000
--- a/apps/labs/pages/password/index.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-    <DocComponent title="Vue Password Component" header="Password" description="Password displays strength indicator for password fields." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/password/#api" ptLink="/password/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/password/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/password/BasicDoc.vue';
-import DisabledDoc from '@/doc/password/DisabledDoc.vue';
-import FilledDoc from '@/doc/password/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/password/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/password/FormsDoc.vue';
-import IftaLabelDoc from '@/doc/password/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/password/ImportDoc.vue';
-import InvalidDoc from '@/doc/password/InvalidDoc.vue';
-import LocaleDoc from '@/doc/password/LocaleDoc.vue';
-import MeterDoc from '@/doc/password/MeterDoc.vue';
-import SizesDoc from '@/doc/password/SizesDoc.vue';
-import TemplateDoc from '@/doc/password/TemplateDoc.vue';
-import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'meter',
-                    label: 'Meter',
-                    component: MeterDoc
-                },
-                {
-                    id: 'locale',
-                    label: 'Locale',
-                    component: LocaleDoc
-                },
-                {
-                    id: 'togglemask',
-                    label: 'ToggleMask',
-                    component: ToggleMaskDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'password'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/picklist/index.vue b/apps/labs/pages/picklist/index.vue
deleted file mode 100755
index 482dca542..000000000
--- a/apps/labs/pages/picklist/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocComponent title="Vue PickList Component" header="PickList" description="PickList is used to reorder items between different lists." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/picklist/#api" ptLink="/picklist/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/picklist/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/picklist/BasicDoc.vue';
-import ImportDoc from '@/doc/picklist/ImportDoc.vue';
-import TemplateDoc from '@/doc/picklist/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'picklist'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/popover/index.vue b/apps/labs/pages/popover/index.vue
deleted file mode 100755
index d8fd81181..000000000
--- a/apps/labs/pages/popover/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Popover Component"
-        header="Popover"
-        description="Popover, also known as Popover, is a container component that can overlay other components on page."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/popover/#api"
-        ptLink="/popover/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/popover/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/popover/BasicDoc.vue';
-import DataTableDoc from '@/doc/popover/DataTableDoc.vue';
-import ImportDoc from '@/doc/popover/ImportDoc.vue';
-import SelectDataDoc from '@/doc/popover/SelectDataDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'selectdata',
-                    label: 'Select Data',
-                    component: SelectDataDoc
-                },
-                {
-                    id: 'datatable',
-                    label: 'DataTable',
-                    component: DataTableDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'popover'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/progressbar/index.vue b/apps/labs/pages/progressbar/index.vue
deleted file mode 100755
index 615a7634a..000000000
--- a/apps/labs/pages/progressbar/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/progressbar/#api" ptLink="/progressbar/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/progressbar/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/progressbar/BasicDoc.vue';
-import DynamicDoc from '@/doc/progressbar/DynamicDoc.vue';
-import ImportDoc from '@/doc/progressbar/ImportDoc.vue';
-import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc.vue';
-import TemplateDoc from '@/doc/progressbar/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'indeterminate',
-                    label: 'Indeterminate',
-                    component: IndeterminateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'progressbar'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/progressspinner/index.vue b/apps/labs/pages/progressspinner/index.vue
deleted file mode 100644
index bd5c4e9ae..000000000
--- a/apps/labs/pages/progressspinner/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocComponent title="Vue ProgressSpinner Component" header="ProgressSpinner" description="ProgressBar is a process status indicator." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/progressspinner/#api" ptLink="/progressspinner/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/progressspinner/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/progressspinner/BasicDoc.vue';
-import CustomDoc from '@/doc/progressspinner/CustomDoc.vue';
-import ImportDoc from '@/doc/progressspinner/ImportDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'custom',
-                    label: 'Custom',
-                    component: CustomDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'progressspinner'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/radiobutton/index.vue b/apps/labs/pages/radiobutton/index.vue
deleted file mode 100755
index 672786f72..000000000
--- a/apps/labs/pages/radiobutton/index.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue RadioButton Component"
-        header="RadioButton"
-        description="RadioButton is an extension to standard radio button element with theming."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/radiobutton/#api"
-        ptLink="/radiobutton/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue';
-import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
-import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
-import FilledDoc from '@/doc/radiobutton/FilledDoc.vue';
-import FormsDoc from '@/doc/radiobutton/FormsDoc.vue';
-import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
-import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
-import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
-import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'radiobutton'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/rating/index.vue b/apps/labs/pages/rating/index.vue
deleted file mode 100755
index cacacff02..000000000
--- a/apps/labs/pages/rating/index.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/rating/#api" ptLink="/rating/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/rating/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/rating/BasicDoc.vue';
-import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
-import FormsDoc from '@/doc/rating/FormsDoc.vue';
-import ImportDoc from '@/doc/rating/ImportDoc.vue';
-import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
-import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
-import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'numberofstars',
-                    label: 'Number of Stars',
-                    component: NumberOfStarsDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'readonly',
-                    label: 'ReadOnly',
-                    component: ReadOnlyDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'rating'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/ripple/index.vue b/apps/labs/pages/ripple/index.vue
deleted file mode 100755
index 1028bf0de..000000000
--- a/apps/labs/pages/ripple/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocComponent title="Vue Ripple Component" header="Ripple" description="Ripple directive adds ripple effect to the host element." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/ripple/#api" ptLink="/ripple/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/ripple/AccessibilityDoc.vue';
-import ConfigurationDoc from '@/doc/ripple/ConfigurationDoc.vue';
-import DefaultDoc from '@/doc/ripple/DefaultDoc.vue';
-import ImportDoc from '@/doc/ripple/ImportDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'configuration',
-                    label: 'Configuration',
-                    component: ConfigurationDoc
-                },
-                {
-                    id: 'default',
-                    label: 'Default',
-                    component: DefaultDoc
-                },
-                /*-{
-                    id: 'custom',
-                    label: 'Custom',
-                    component: CustomDoc
-                },*/
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'directives.ripple'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/scrollpanel/index.vue b/apps/labs/pages/scrollpanel/index.vue
deleted file mode 100644
index 3759a7c10..000000000
--- a/apps/labs/pages/scrollpanel/index.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue ScrollPanel Component"
-        header="ScrollPanel"
-        description="ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/scrollpanel/#api"
-        ptLink="/scrollpanel/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/scrollpanel/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/scrollpanel/BasicDoc.vue';
-import CustomDoc from '@/doc/scrollpanel/CustomDoc.vue';
-import ImportDoc from '@/doc/scrollpanel/ImportDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'custom',
-                    label: 'Custom',
-                    component: CustomDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'scrollpanel'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/scrolltop/index.vue b/apps/labs/pages/scrolltop/index.vue
deleted file mode 100644
index c89618fef..000000000
--- a/apps/labs/pages/scrolltop/index.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue ScrollTop Component"
-        header="ScrollTop"
-        description="ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/scrolltop/#api"
-        ptLink="/scrolltop/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/scrolltop/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/scrolltop/BasicDoc.vue';
-import ElementDoc from '@/doc/scrolltop/ElementDoc.vue';
-import ImportDoc from '@/doc/scrolltop/ImportDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'element',
-                    label: 'Element',
-                    component: ElementDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'scrolltop'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/select/index.vue b/apps/labs/pages/select/index.vue
deleted file mode 100755
index cbf45b4cf..000000000
--- a/apps/labs/pages/select/index.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <DocComponent title="Vue Select Component" header="Select" description="Select is used to choose an item from a collection of options." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/select/#api" ptLink="/select/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/select/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/select/BasicDoc.vue';
-import CheckmarkDoc from '@/doc/select/CheckmarkDoc.vue';
-import ClearIconDoc from '@/doc/select/ClearIconDoc.vue';
-import DisabledDoc from '@/doc/select/DisabledDoc.vue';
-import EditableDoc from '@/doc/select/EditableDoc.vue';
-import FilledDoc from '@/doc/select/FilledDoc.vue';
-import FilterDoc from '@/doc/select/FilterDoc.vue';
-import FloatLabelDoc from '@/doc/select/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/select/FormsDoc.vue';
-import GroupDoc from '@/doc/select/GroupDoc.vue';
-import IftaLabelDoc from '@/doc/select/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/select/ImportDoc.vue';
-import InvalidDoc from '@/doc/select/InvalidDoc.vue';
-import LazyVirtualScrollDoc from '@/doc/select/LazyVirtualScrollDoc.vue';
-import LoadingStateDoc from '@/doc/select/LoadingStateDoc.vue';
-import SizesDoc from '@/doc/select/SizesDoc.vue';
-import TemplateDoc from '@/doc/select/TemplateDoc.vue';
-import VirtualScrollDoc from '@/doc/select/VirtualScrollDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'checkmark',
-                    label: 'Checkmark',
-                    component: CheckmarkDoc
-                },
-                {
-                    id: 'editable',
-                    label: 'Editable',
-                    component: EditableDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'filter',
-                    label: 'Filter',
-                    component: FilterDoc
-                },
-                {
-                    id: 'clearicon',
-                    label: 'Clear Icon',
-                    component: ClearIconDoc
-                },
-                {
-                    id: 'loadingstate',
-                    label: 'Loading State',
-                    component: LoadingStateDoc
-                },
-                {
-                    id: 'virtualscroll',
-                    label: 'Virtual Scroll',
-                    component: VirtualScrollDoc
-                },
-                {
-                    id: 'lazyvirtualscroll',
-                    label: 'Lazy Virtual Scroll',
-                    component: LazyVirtualScrollDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'select'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/selectbutton/index.vue b/apps/labs/pages/selectbutton/index.vue
deleted file mode 100755
index 0327a84d2..000000000
--- a/apps/labs/pages/selectbutton/index.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue SelectButton Component"
-        header="SelectButton"
-        description="SelectButton is used to choose single or multiple items from a list using buttons."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/selectbutton/#api"
-        ptLink="/selectbutton/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
-import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
-import FormsDoc from '@/doc/selectbutton/FormsDoc.vue';
-import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
-import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
-import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
-import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
-import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'selectbutton'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/skeleton/index.vue b/apps/labs/pages/skeleton/index.vue
deleted file mode 100644
index 65e01d651..000000000
--- a/apps/labs/pages/skeleton/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/skeleton/#api" ptLink="/skeleton/#pt" />
-</template>
-
-<script>
-import Accessibility from '@/doc/skeleton/AccessibilityDoc.vue';
-import CardDoc from '@/doc/skeleton/CardDoc.vue';
-import DataTableDoc from '@/doc/skeleton/DataTableDoc.vue';
-import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
-import ListDoc from '@/doc/skeleton/ListDoc.vue';
-import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'shapes',
-                    label: 'Shapes',
-                    component: ShapesDoc
-                },
-                {
-                    id: 'card',
-                    label: 'Card',
-                    component: CardDoc
-                },
-                {
-                    id: 'list',
-                    label: 'List',
-                    component: ListDoc
-                },
-                {
-                    id: 'datatable',
-                    label: 'DataTable',
-                    component: DataTableDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: Accessibility
-                }
-            ],
-            presetDoc: {
-                key: 'skeleton'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/slider/index.vue b/apps/labs/pages/slider/index.vue
deleted file mode 100755
index 6d2e7c189..000000000
--- a/apps/labs/pages/slider/index.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/slider/#api" ptLink="/slider/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/slider/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/slider/BasicDoc.vue';
-import FormsDoc from '@/doc/slider/FormsDoc.vue';
-import ImportDoc from '@/doc/slider/ImportDoc.vue';
-import InputDoc from '@/doc/slider/InputDoc.vue';
-import RangeDoc from '@/doc/slider/RangeDoc.vue';
-import StepDoc from '@/doc/slider/StepDoc.vue';
-import VerticalDoc from '@/doc/slider/VerticalDoc.vue';
-import FilterDoc from '../../doc/slider/FilterDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'input',
-                    label: 'Input',
-                    component: InputDoc
-                },
-                {
-                    id: 'step',
-                    label: 'Step',
-                    component: StepDoc
-                },
-                {
-                    id: 'range',
-                    label: 'Range',
-                    component: RangeDoc
-                },
-                {
-                    id: 'filter',
-                    label: 'Filter',
-                    component: FilterDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'slider'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/speeddial/index.vue b/apps/labs/pages/speeddial/index.vue
deleted file mode 100644
index e1ca0fe10..000000000
--- a/apps/labs/pages/speeddial/index.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Speed Dial Component"
-        header="Speed Dial"
-        description="When pressed, a floating action button can display multiple primary actions that can be performed on a page."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/speeddial/#api"
-        ptLink="/speeddial/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/speeddial/AccessibilityDoc.vue';
-import CircleDoc from '@/doc/speeddial/CircleDoc.vue';
-import ImportDoc from '@/doc/speeddial/ImportDoc.vue';
-import LinearDoc from '@/doc/speeddial/LinearDoc.vue';
-import MaskDoc from '@/doc/speeddial/MaskDoc.vue';
-import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue';
-import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue';
-import TemplateDoc from '@/doc/speeddial/TemplateDoc.vue';
-import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                { id: 'import', label: 'Import', component: ImportDoc },
-                { id: 'linear', label: 'Linear', component: LinearDoc },
-                { id: 'circle', label: 'Circle', component: CircleDoc },
-                { id: 'semi-circle', label: 'Semi Circle', component: SemiCircleDoc },
-                { id: 'quarter-circle', label: 'Quarter Circle', component: QuarterCircleDoc },
-                { id: 'tooltip', label: 'Tooltip', component: TooltipDoc },
-                { id: 'mask', label: 'Mask', component: MaskDoc },
-                { id: 'template', label: 'Template', component: TemplateDoc },
-                { id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
-            ],
-            presetDoc: {
-                key: 'speeddial'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/splitbutton/index.vue b/apps/labs/pages/splitbutton/index.vue
deleted file mode 100755
index 9ae2652f1..000000000
--- a/apps/labs/pages/splitbutton/index.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue SplitButton Component"
-        header="SplitButton"
-        description="SplitButton groups a set of commands in an overlay with a default command."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/splitbutton/#api"
-        ptLink="/splitbutton/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/splitbutton/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/splitbutton/BasicDoc.vue';
-import DisabledDoc from '@/doc/splitbutton/DisabledDoc.vue';
-import IconsDoc from '@/doc/splitbutton/IconsDoc.vue';
-import ImportDoc from '@/doc/splitbutton/ImportDoc.vue';
-import NestedDoc from '@/doc/splitbutton/NestedDoc.vue';
-import OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue';
-import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue';
-import RaisedTextDoc from '@/doc/splitbutton/RaisedTextDoc.vue';
-import RoundedDoc from '@/doc/splitbutton/RoundedDoc.vue';
-import SeverityDoc from '@/doc/splitbutton/SeverityDoc.vue';
-import SizesDoc from '@/doc/splitbutton/SizesDoc.vue';
-import TemplateDoc from '@/doc/splitbutton/TemplateDoc.vue';
-import TextDoc from '@/doc/splitbutton/TextDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'icons',
-                    label: 'Icons',
-                    component: IconsDoc
-                },
-                {
-                    id: 'nested',
-                    label: 'Nested',
-                    component: NestedDoc
-                },
-                {
-                    id: 'severity',
-                    label: 'Severity',
-                    component: SeverityDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'raised',
-                    label: 'Raised',
-                    component: RaisedDoc
-                },
-                {
-                    id: 'rounded',
-                    label: 'Rounded',
-                    component: RoundedDoc
-                },
-                {
-                    id: 'text',
-                    label: 'Text',
-                    component: TextDoc
-                },
-                {
-                    id: 'raisedtext',
-                    label: 'Raised Text',
-                    component: RaisedTextDoc
-                },
-                {
-                    id: 'outlined',
-                    label: 'Outlined',
-                    component: OutlinedDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'splitbutton'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/splitter/index.vue b/apps/labs/pages/splitter/index.vue
deleted file mode 100644
index 4a615979e..000000000
--- a/apps/labs/pages/splitter/index.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-    <DocComponent title="Vue Splitter Component" header="Splitter" description="Splitter is utilized to separate and resize panels." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/splitter/#api" ptLink="/splitter/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/splitter/AccessibilityDoc.vue';
-import HorizontalDoc from '@/doc/splitter/HorizontalDoc.vue';
-import ImportDoc from '@/doc/splitter/ImportDoc.vue';
-import NestedDoc from '@/doc/splitter/NestedDoc.vue';
-import SizeDoc from '@/doc/splitter/SizeDoc.vue';
-import VerticalDoc from '@/doc/splitter/VerticalDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'horizontal',
-                    label: 'Horizontal',
-                    component: HorizontalDoc
-                },
-                {
-                    id: 'size',
-                    label: 'Size',
-                    component: SizeDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'nested',
-                    label: 'Nested',
-                    component: NestedDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: ['splitter', 'splitterpanel']
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/stepper/index.vue b/apps/labs/pages/stepper/index.vue
deleted file mode 100644
index a678e6352..000000000
--- a/apps/labs/pages/stepper/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Stepper Component"
-        header="Stepper"
-        description="The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/stepper/#api"
-        ptLink="/stepper/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
-import HorizontalDoc from '@/doc/stepper/HorizontalDoc.vue';
-import ImportDoc from '@/doc/stepper/ImportDoc.vue';
-import LinearDoc from '@/doc/stepper/LinearDoc.vue';
-import StepsOnlyDoc from '@/doc/stepper/StepsOnlyDoc.vue';
-import TemplateDoc from '@/doc/stepper/TemplateDoc.vue';
-import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'horizontal',
-                    label: 'Horizontal',
-                    component: HorizontalDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'linear',
-                    label: 'Linear',
-                    component: LinearDoc
-                },
-                {
-                    id: 'stepsonly',
-                    label: 'Steps Only',
-                    component: StepsOnlyDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: ['stepper', 'steppanels', 'steplist', 'stepitem', 'step']
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/tabs/index.vue b/apps/labs/pages/tabs/index.vue
deleted file mode 100755
index 4de636005..000000000
--- a/apps/labs/pages/tabs/index.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <DocComponent title="Vue Tabs Component" header="Tabs" description="Tabs is a container component to group content with tabs." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tabs/#api" ptLink="/tabs/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/tabs/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/tabs/BasicDoc.vue';
-import ControlledDoc from '@/doc/tabs/ControlledDoc.vue';
-import DisabledDoc from '@/doc/tabs/DisabledDoc.vue';
-import DynamicDoc from '@/doc/tabs/DynamicDoc.vue';
-import ImportDoc from '@/doc/tabs/ImportDoc.vue';
-import ScrollableDoc from '@/doc/tabs/ScrollableDoc.vue';
-import TabMenuDoc from '@/doc/tabs/TabMenuDoc.vue';
-import TemplateDoc from '@/doc/tabs/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'scrollable',
-                    label: 'Scrollable',
-                    component: ScrollableDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'tabmenu',
-                    label: 'Tab Menu',
-                    component: TabMenuDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: ['tabs', 'tablist', 'tabpanels', 'tabpanel', 'tab']
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/tag/index.vue b/apps/labs/pages/tag/index.vue
deleted file mode 100755
index bea757fef..000000000
--- a/apps/labs/pages/tag/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tag/#api" ptLink="/tag/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/tag/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/tag/BasicDoc.vue';
-import IconDoc from '@/doc/tag/IconDoc.vue';
-import ImportDoc from '@/doc/tag/ImportDoc.vue';
-import PillDoc from '@/doc/tag/PillDoc.vue';
-import SeverityDoc from '@/doc/tag/SeverityDoc.vue';
-import TemplateDoc from '@/doc/tag/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'severity',
-                    label: 'Severity',
-                    component: SeverityDoc
-                },
-                {
-                    id: 'pill',
-                    label: 'Pill',
-                    component: PillDoc
-                },
-                {
-                    id: 'icons',
-                    label: 'Icon',
-                    component: IconDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'tag'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/terminal/index.vue b/apps/labs/pages/terminal/index.vue
deleted file mode 100755
index 77254aaf4..000000000
--- a/apps/labs/pages/terminal/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/terminal/#api" ptLink="/terminal/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/terminal/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/terminal/BasicDoc.vue';
-import ImportDoc from '@/doc/terminal/ImportDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'terminal'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/textarea/index.vue b/apps/labs/pages/textarea/index.vue
deleted file mode 100755
index 2ea0d2962..000000000
--- a/apps/labs/pages/textarea/index.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Textarea Component"
-        header="Textarea"
-        description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/textarea/#api"
-        ptLink="/textarea/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/textarea/AccessibilityDoc.vue';
-import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc.vue';
-import BasicDoc from '@/doc/textarea/BasicDoc.vue';
-import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
-import FilledDoc from '@/doc/textarea/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/textarea/FormsDoc.vue';
-import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/textarea/ImportDoc.vue';
-import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
-import SizesDoc from '@/doc/textarea/SizesDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'auto-resize',
-                    label: 'Auto Resize',
-                    component: AutoResizeDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'textarea'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/tieredmenu/index.vue b/apps/labs/pages/tieredmenu/index.vue
deleted file mode 100755
index 9c524d2a5..000000000
--- a/apps/labs/pages/tieredmenu/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocComponent title="Vue TieredMenu Component" header="TieredMenu" description="TieredMenu displays submenus in nested overlays." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tieredmenu/#api" ptLink="/tieredmenu/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/tieredmenu/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/tieredmenu/BasicDoc.vue';
-import CommandDoc from '@/doc/tieredmenu/CommandDoc.vue';
-import ImportDoc from '@/doc/tieredmenu/ImportDoc.vue';
-import PopupDoc from '@/doc/tieredmenu/PopupDoc.vue';
-import RouterDoc from '@/doc/tieredmenu/RouterDoc.vue';
-import TemplateDoc from '@/doc/tieredmenu/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'popup',
-                    label: 'Popup',
-                    component: PopupDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'command',
-                    label: 'Command',
-                    component: CommandDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'tieredmenu'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/timeline/index.vue b/apps/labs/pages/timeline/index.vue
deleted file mode 100644
index b29518f64..000000000
--- a/apps/labs/pages/timeline/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocComponent title="Vue Timeline Component" header="Timeline" description="Timeline visualizes a series of chained events." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/timeline/#api" ptLink="/timeline/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/timeline/AccessibilityDoc.vue';
-import AlignmentDoc from '@/doc/timeline/AlignmentDoc.vue';
-import BasicDoc from '@/doc/timeline/BasicDoc.vue';
-import HorizontalDoc from '@/doc/timeline/HorizontalDoc.vue';
-import ImportDoc from '@/doc/timeline/ImportDoc.vue';
-import OppositeDoc from '@/doc/timeline/OppositeDoc.vue';
-import TemplateDoc from '@/doc/timeline/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'alignment',
-                    label: 'Alignment',
-                    component: AlignmentDoc
-                },
-                {
-                    id: 'opposite',
-                    label: 'Opposite',
-                    component: OppositeDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'horizontal',
-                    label: 'Horizontal',
-                    component: HorizontalDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'timeline'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/toast/index.vue b/apps/labs/pages/toast/index.vue
deleted file mode 100755
index 8a96bda52..000000000
--- a/apps/labs/pages/toast/index.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocComponent title="Vue Toast Component" header="Toast" description="Toast is used to display messages in an overlay." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/toast/#api" ptLink="/toast/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/toast/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/toast/BasicDoc.vue';
-import HeadlessDoc from '@/doc/toast/HeadlessDoc.vue';
-import ImportDoc from '@/doc/toast/ImportDoc.vue';
-import MultipleDoc from '@/doc/toast/MultipleDoc.vue';
-import PositionDoc from '@/doc/toast/PositionDoc.vue';
-import SeverityDoc from '@/doc/toast/SeverityDoc.vue';
-import StickyDoc from '@/doc/toast/StickyDoc.vue';
-import TemplateDoc from '@/doc/toast/TemplateDoc.vue';
-import ToastServiceDoc from '@/doc/toast/ToastServiceDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'toast-service',
-                    label: 'Toast Service',
-                    component: ToastServiceDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'severity',
-                    label: 'Severity',
-                    component: SeverityDoc
-                },
-                {
-                    id: 'position',
-                    label: 'Position',
-                    component: PositionDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'sticky',
-                    label: 'Sticky',
-                    component: StickyDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'headless',
-                    label: 'Headless',
-                    component: HeadlessDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'toast'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/togglebutton/index.vue b/apps/labs/pages/togglebutton/index.vue
deleted file mode 100755
index 1f4c2d503..000000000
--- a/apps/labs/pages/togglebutton/index.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue ToggleButton Component"
-        header="ToggleButton"
-        description="ToggleButton is used to select a boolean value using a button."
-        :componentDocs="docs"
-        :presetDoc="presetDoc"
-        apiLink="/togglebutton/#api"
-        ptLink="/togglebutton/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/togglebutton/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
-import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
-import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
-import FormsDoc from '@/doc/togglebutton/FormsDoc.vue';
-import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
-import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
-import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'customized',
-                    label: 'Customized',
-                    component: CustomizedDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'togglebutton'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/toggleswitch/index.vue b/apps/labs/pages/toggleswitch/index.vue
deleted file mode 100755
index 079e4b646..000000000
--- a/apps/labs/pages/toggleswitch/index.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocComponent title="Vue ToggleSwitch Component" header="ToggleSwitch" description="ToggleSwitch is used to select a boolean value." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/toggleswitch/#api" ptLink="/toggleswitch/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/toggleswitch/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/toggleswitch/BasicDoc.vue';
-import DisabledDoc from '@/doc/toggleswitch/DisabledDoc.vue';
-import FormsDoc from '@/doc/toggleswitch/FormsDoc.vue';
-import ImportDoc from '@/doc/toggleswitch/ImportDoc.vue';
-import InvalidDoc from '@/doc/toggleswitch/InvalidDoc.vue';
-import PreselectionDoc from '@/doc/toggleswitch/PreselectionDoc.vue';
-import TemplateDoc from '@/doc/toggleswitch/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'preselection',
-                    label: 'Preselection',
-                    component: PreselectionDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'toggleswitch'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/toolbar/index.vue b/apps/labs/pages/toolbar/index.vue
deleted file mode 100755
index f5b5141da..000000000
--- a/apps/labs/pages/toolbar/index.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/toolbar/#api" ptLink="/toolbar/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/toolbar/BasicDoc.vue';
-import CustomDoc from '@/doc/toolbar/CustomDoc.vue';
-import ImportDoc from '@/doc/toolbar/ImportDoc.vue';
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'custom',
-                    label: 'Custom',
-                    component: CustomDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'toolbar'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/tooltip/index.vue b/apps/labs/pages/tooltip/index.vue
deleted file mode 100755
index 81682c1c1..000000000
--- a/apps/labs/pages/tooltip/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <DocComponent title="Vue Tooltip Component" header="Tooltip" description="Tooltip directive provides advisory information for a component." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tooltip/#api" ptLink="/tooltip/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/tooltip/AccessibilityDoc.vue';
-import AutoHideDoc from '@/doc/tooltip/AutoHideDoc.vue';
-import CustomDoc from '@/doc/tooltip/CustomDoc.vue';
-import DelayDoc from '@/doc/tooltip/DelayDoc.vue';
-import EventDoc from '@/doc/tooltip/EventDoc.vue';
-import ImportDoc from '@/doc/tooltip/ImportDoc.vue';
-import PositionDoc from '@/doc/tooltip/PositionDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'position',
-                    label: 'Position',
-                    component: PositionDoc
-                },
-                {
-                    id: 'event',
-                    label: 'Event',
-                    component: EventDoc
-                },
-                {
-                    id: 'autohide',
-                    label: 'Auto Hide',
-                    component: AutoHideDoc
-                },
-                {
-                    id: 'delay',
-                    label: 'Delay',
-                    component: DelayDoc
-                },
-                {
-                    id: 'custom',
-                    label: 'Custom',
-                    component: CustomDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'directives.tooltip'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/tree/index.vue b/apps/labs/pages/tree/index.vue
deleted file mode 100755
index 7a792ea3b..000000000
--- a/apps/labs/pages/tree/index.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/tree/#api" ptLink="/tree/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/tree/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/tree/BasicDoc.vue';
-import ControlledDoc from '@/doc/tree/ControlledDoc.vue';
-import EventsDoc from '@/doc/tree/EventsDoc.vue';
-import FilterDoc from '@/doc/tree/FilterDoc.vue';
-import ImportDoc from '@/doc/tree/ImportDoc.vue';
-import LazyDoc from '@/doc/tree/LazyDoc.vue';
-import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
-import CheckboxDoc from '@/doc/tree/selection/CheckboxDoc.vue';
-import MultipleDoc from '@/doc/tree/selection/MultipleDoc.vue';
-import SingleDoc from '@/doc/tree/selection/SingleDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'selection',
-                    label: 'Selection',
-                    children: [
-                        {
-                            id: 'single',
-                            label: 'Single',
-                            component: SingleDoc
-                        },
-                        {
-                            id: 'multiple',
-                            label: 'Multiple',
-                            component: MultipleDoc
-                        },
-                        {
-                            id: 'checkbox',
-                            label: 'Checkbox',
-                            component: CheckboxDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'events',
-                    label: 'Events',
-                    component: EventsDoc
-                },
-                {
-                    id: 'lazy',
-                    label: 'Lazy',
-                    component: LazyDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'filter',
-                    label: 'Filter',
-                    component: FilterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'tree'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/treeselect/index.vue b/apps/labs/pages/treeselect/index.vue
deleted file mode 100755
index 88488ce67..000000000
--- a/apps/labs/pages/treeselect/index.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-    <DocComponent title="Vue TreeSelect Component" header="TreeSelect" description="TreeSelect is a form component to choose from hierarchical data." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/treeselect/#api" ptLink="/treeselect/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/treeselect/BasicDoc.vue';
-import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
-import ClearIconDoc from '@/doc/treeselect/ClearIconDoc.vue';
-import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
-import FilledDoc from '@/doc/treeselect/FilledDoc.vue';
-import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
-import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
-import FormsDoc from '@/doc/treeselect/FormsDoc.vue';
-import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue';
-import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
-import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
-import LazyDoc from '@/doc/treeselect/LazyDoc.vue';
-import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue';
-import SizesDoc from '@/doc/treeselect/SizesDoc.vue';
-import TemplateDoc from '@/doc/treeselect/TemplateDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'checkbox',
-                    label: 'Checkbox',
-                    component: CheckboxDoc
-                },
-                {
-                    id: 'lazy',
-                    label: 'Lazy',
-                    component: LazyDoc
-                },
-                {
-                    id: 'filter',
-                    label: 'Filter',
-                    component: FilterDoc
-                },
-                {
-                    id: 'clearicon',
-                    label: 'Clear Icon',
-                    component: ClearIconDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'floatlabel',
-                    label: 'Float Label',
-                    component: FloatLabelDoc
-                },
-                {
-                    id: 'iftalabel',
-                    label: 'Ifta Label',
-                    component: IftaLabelDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'treeselect'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/treetable/index.vue b/apps/labs/pages/treetable/index.vue
deleted file mode 100755
index dd7cae52b..000000000
--- a/apps/labs/pages/treetable/index.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<template>
-    <DocComponent title="Vue TreeTable Component" header="TreeTable" description="TreeTable is used to display hierarchical data in tabular format." :componentDocs="docs" :presetDoc="presetDoc" apiLink="/treetable/#api" ptLink="/treetable/#pt" />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/treetable/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/treetable/BasicDoc.vue';
-import ColumnToggleDoc from '@/doc/treetable/ColumnToggleDoc.vue';
-import ContextMenuDoc from '@/doc/treetable/ContextMenuDoc.vue';
-import ControlledDoc from '@/doc/treetable/ControlledDoc.vue';
-import DynamicColumnsDoc from '@/doc/treetable/DynamicColumnsDoc.vue';
-import FilterDoc from '@/doc/treetable/FilterDoc.vue';
-import ImportDoc from '@/doc/treetable/ImportDoc.vue';
-import LazyLoadDoc from '@/doc/treetable/LazyLoadDoc.vue';
-import SizeDoc from '@/doc/treetable/SizeDoc.vue';
-import TemplateDoc from '@/doc/treetable/TemplateDoc.vue';
-import PaginationBasicDoc from '@/doc/treetable/pagination/PaginationBasicDoc.vue';
-import PaginationHeadlessDoc from '@/doc/treetable/pagination/PaginationHeadlessDoc.vue';
-import PaginationTemplateDoc from '@/doc/treetable/pagination/PaginationTemplateDoc.vue';
-import ExpandModeDoc from '@/doc/treetable/resize/ExpandModeDoc.vue';
-import FitModeDoc from '@/doc/treetable/resize/FitModeDoc.vue';
-import FlexibleScrollDoc from '@/doc/treetable/scroll/FlexibleScrollDoc.vue';
-import FrozenColumnsDoc from '@/doc/treetable/scroll/FrozenColumnsDoc.vue';
-import HorizontalScrollDoc from '@/doc/treetable/scroll/HorizontalScrollDoc.vue';
-import VerticalScrollDoc from '@/doc/treetable/scroll/VerticalScrollDoc.vue';
-import CheckboxRowSelectionDoc from '@/doc/treetable/selection/CheckboxRowSelectionDoc.vue';
-import MultipleRowsSelectionDoc from '@/doc/treetable/selection/MultipleRowsSelectionDoc.vue';
-import RowSelectionEventsDoc from '@/doc/treetable/selection/RowSelectionEventsDoc.vue';
-import SingleRowSelectionDoc from '@/doc/treetable/selection/SingleRowSelectionDoc.vue';
-import MultipleColumnsDoc from '@/doc/treetable/sort/MultipleColumnsDoc.vue';
-import RemovableSortDoc from '@/doc/treetable/sort/RemovableSortDoc.vue';
-import SingleColumnDoc from '@/doc/treetable/sort/SingleColumnDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'dynamic_columns',
-                    label: 'Dynamic Columns',
-                    component: DynamicColumnsDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'size',
-                    label: 'Size',
-                    component: SizeDoc
-                },
-                {
-                    id: 'pagination',
-                    label: 'Pagination',
-                    children: [
-                        {
-                            id: 'paginator_basic',
-                            label: 'Basic',
-                            component: PaginationBasicDoc
-                        },
-                        {
-                            id: 'paginator_template',
-                            label: 'Template',
-                            component: PaginationTemplateDoc
-                        },
-                        {
-                            id: 'paginator_headless',
-                            label: 'Headless',
-                            component: PaginationHeadlessDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'sort',
-                    label: 'Sort',
-                    children: [
-                        {
-                            id: 'single_sort',
-                            label: 'Single Column',
-                            component: SingleColumnDoc
-                        },
-                        {
-                            id: 'multiple_sort',
-                            label: 'Multiple Columns',
-                            component: MultipleColumnsDoc
-                        },
-                        {
-                            id: 'removable_sort',
-                            label: 'Removable Sort',
-                            component: RemovableSortDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'filter',
-                    label: 'Filter',
-                    component: FilterDoc
-                },
-                {
-                    id: 'selection',
-                    label: 'Selection',
-                    children: [
-                        {
-                            id: 'single_row_selection',
-                            label: 'Single',
-                            component: SingleRowSelectionDoc
-                        },
-                        {
-                            id: 'multiple_rows_selection',
-                            label: 'Multiple',
-                            component: MultipleRowsSelectionDoc
-                        },
-                        {
-                            id: 'checkbox_row_selection',
-                            label: 'Checkbox',
-                            component: CheckboxRowSelectionDoc
-                        },
-                        {
-                            id: 'row_selection_events',
-                            label: 'Events',
-                            component: RowSelectionEventsDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'lazy_load',
-                    label: 'Lazy Load',
-                    component: LazyLoadDoc
-                },
-                {
-                    id: 'scroll',
-                    label: 'Scroll',
-                    children: [
-                        {
-                            id: 'vertical_scroll',
-                            label: 'Vertical',
-                            component: VerticalScrollDoc
-                        },
-                        {
-                            id: 'flex_scroll',
-                            label: 'Flexible',
-                            component: FlexibleScrollDoc
-                        },
-                        {
-                            id: 'horizontal_scroll',
-                            label: 'Horizontal',
-                            component: HorizontalScrollDoc
-                        },
-                        {
-                            id: 'frozen_columns',
-                            label: 'Frozen Columns',
-                            component: FrozenColumnsDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'column_resize',
-                    label: 'Column Resize',
-                    children: [
-                        {
-                            id: 'resize_fitmode',
-                            label: 'Fit Mode',
-                            component: FitModeDoc
-                        },
-                        {
-                            id: 'resize_expandmode',
-                            label: 'Expand Mode',
-                            component: ExpandModeDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'column_toggle',
-                    label: 'Column Toggle',
-                    component: ColumnToggleDoc
-                },
-                {
-                    id: 'contextmenu',
-                    label: 'ContextMenu',
-                    component: ContextMenuDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            presetDoc: {
-                key: 'treetable'
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/labs/pages/virtualscroller/index.vue b/apps/labs/pages/virtualscroller/index.vue
deleted file mode 100644
index 7c5bde4c3..000000000
--- a/apps/labs/pages/virtualscroller/index.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Virtual Scroller Component"
-        header="VirtualScroller"
-        description="VirtualScroller is a performant approach to render large amounts of data efficiently."
-        :componentDocs="docs"
-        apiLink="/virtualscroller/#api"
-        ptLink="/virtualscroller/#pt"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/virtualscroller/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/virtualscroller/BasicDoc.vue';
-import DelayDoc from '@/doc/virtualscroller/DelayDoc.vue';
-import GridDoc from '@/doc/virtualscroller/GridDoc.vue';
-import HorizontalDoc from '@/doc/virtualscroller/HorizontalDoc.vue';
-import ImportDoc from '@/doc/virtualscroller/ImportDoc.vue';
-import LazyDoc from '@/doc/virtualscroller/LazyDoc.vue';
-import LoadingDoc from '@/doc/virtualscroller/LoadingDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'horizontal',
-                    label: 'Horizontal',
-                    component: HorizontalDoc
-                },
-                {
-                    id: 'grid',
-                    label: 'Grid',
-                    component: GridDoc
-                },
-                {
-                    id: 'delay',
-                    label: 'Delay',
-                    component: DelayDoc
-                },
-                {
-                    id: 'loading',
-                    label: 'Loading',
-                    component: LoadingDoc
-                },
-                {
-                    id: 'lazy',
-                    label: 'Lazy',
-                    component: LazyDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/labs/plex/inputtext/index.vue b/apps/labs/plex/inputtext/index.vue
new file mode 100644
index 000000000..3e3fd4968
--- /dev/null
+++ b/apps/labs/plex/inputtext/index.vue
@@ -0,0 +1,26 @@
+<template>
+    <InputText unstyled :pt="theme" />
+</template>
+
+<script setup>
+import InputText from 'primevue/inputtext';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `appearance-none rounded-md outline-none
+        bg-surface-0 dark:bg-surface-950
+        text-surface-700 dark:text-surface-0
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        disabled:bg-surface-200 disabled:text-surface-500 
+        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
+        px-3 py-2 p-fluid:w-full
+        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
+        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
+        transition-colors duration-200`
+});
+</script>
diff --git a/apps/labs/plugins/app.js b/apps/labs/plugins/app.js
index 0c7c42a2a..ed852f24a 100644
--- a/apps/labs/plugins/app.js
+++ b/apps/labs/plugins/app.js
@@ -1,5 +1,6 @@
 import DeferredDemo from '@/components/demo/DeferredDemo.vue';
 import CodeHighlight from '@/directives/CodeHighlight';
+import { reactive } from 'vue';
 
 const $appStatePlugin = {
     install: (app) => {
diff --git a/apps/labs/public/demo/data/icons.json b/apps/labs/public/demo/data/icons.json
deleted file mode 100644
index 3b6817c55..000000000
--- a/apps/labs/public/demo/data/icons.json
+++ /dev/null
@@ -1 +0,0 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M959.977 394.711c0-24.979-9.774-48.87-27.693-66.789l-236.207-236.207c-36.923-36.923-96.655-36.923-133.578 0l-470.781 470.781c-17.919 17.919-27.693 41.81-27.693 66.789s9.774 48.87 27.693 66.789l236.207 236.207c18.462 18.462 42.356 27.693 66.789 27.693 2.173 0 4.887 0 7.060-0.543 1.084 0 1.63 0 2.714 0h433.859c22.263 0 40.725-18.462 40.725-40.725s-18.462-40.725-40.725-40.725h-323.088l416.482-416.482c17.919-17.919 27.693-41.81 27.693-66.789zM149.275 638.521c-3.257-3.257-3.8-7.060-3.8-9.231s0-5.972 3.8-9.231l206.341-206.341 254.669 254.669-206.341 206.341c-4.887 4.887-13.032 4.887-18.462 0l-236.207-236.75zM874.725 404.486l-206.341 206.341-254.669-254.669 206.341-206.341c4.887-4.887 13.032-4.887 18.462 0l236.207 236.75c3.257 3.257 3.8 7.060 3.8 9.231s0 5.972-3.8 9.231z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["eraser"]},"attrs":[{}],"properties":{"order":333,"id":261,"name":"eraser","prevSize":80,"code":59908},"setIdx":0,"setId":1,"iconIdx":0},{"icon":{"paths":["M496 128.019c-247.028 0-447.979 200.95-447.979 447.979s200.95 447.979 447.979 447.979 447.979-200.95 447.979-447.979-200.95-447.979-447.979-447.979zM496 927.979c-193.911 0-351.983-158.073-351.983-351.983s158.073-351.983 351.983-351.983 351.983 158.073 351.983 351.983-158.073 351.983-351.983 351.983zM288.011 48.023c0-26.238 21.759-47.998 47.998-47.998h319.984c26.238 0 47.998 21.759 47.998 47.998s-21.759 47.998-47.998 47.998h-319.984c-26.238 0-47.998-21.759-47.998-47.998zM543.998 384.007v191.991c0 26.238-21.759 47.998-47.998 47.998s-47.998-21.759-47.998-47.998v-191.991c0-26.238 21.759-47.998 47.998-47.998s47.998 21.759 47.998 47.998zM962.538 273.291c-9.6 9.6-21.759 14.080-33.918 14.080s-24.318-4.48-33.918-14.080l-95.995-95.995c-18.559-18.559-18.559-49.277 0-67.837s49.277-18.559 67.837 0l95.995 95.995c18.559 18.559 18.559 49.277 0 67.837z"],"attrs":[{}],"grid":16,"tags":["stopwatch"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":332,"id":260,"name":"stopwatch","prevSize":80,"code":59905},"setIdx":0,"setId":1,"iconIdx":1},{"icon":{"paths":["M626.347 1024c-27.876 0-54.044-13.084-75.663-24.463-13.653-6.827-30.151-15.36-38.684-15.36s-25.6 8.533-38.684 15.36c-27.307 14.223-61.44 31.289-97.849 21.617-37.547-9.671-58.027-42.667-75.093-68.836-7.396-11.947-17.636-27.876-24.463-31.857s-25.031-4.551-40.391-5.689c-30.72-1.707-68.836-3.413-96.143-30.151-27.307-27.876-29.013-65.991-30.72-96.711-0.569-14.791-1.707-33.564-5.689-40.391-3.413-6.257-19.911-16.497-31.289-23.893-26.169-17.067-58.596-38.116-68.836-75.093-9.671-36.409 7.396-70.543 21.617-97.849 6.827-13.653 15.36-30.151 15.36-38.684s-8.533-25.6-15.36-38.684c-14.223-27.307-31.289-61.44-21.617-97.849 9.671-37.547 42.667-58.027 68.836-75.093 11.947-7.396 27.876-17.636 31.857-24.463s4.551-25.031 5.689-40.391c1.707-30.72 3.413-68.836 30.151-96.143 27.876-27.307 65.991-29.013 96.711-30.72 14.791-0.569 33.564-1.707 40.391-5.689 6.257-3.413 16.497-19.911 23.893-31.289 17.067-26.169 38.116-58.596 75.093-68.836 36.409-9.671 70.543 7.396 97.849 21.617 13.653 6.827 30.151 15.36 38.684 15.36s25.6-8.533 38.684-15.36c27.307-13.653 61.44-31.289 97.849-21.617 37.547 9.671 58.027 42.667 75.093 68.836 7.396 11.947 17.636 27.876 24.463 31.857s25.031 4.551 40.391 5.689c30.72 1.707 68.836 3.413 96.143 30.151 27.307 27.876 29.013 65.991 30.72 96.711 0.569 14.791 1.707 33.564 5.689 40.391 3.413 6.257 19.911 16.497 31.289 23.893 26.169 17.067 58.596 38.116 68.836 75.093 9.671 36.409-7.396 70.543-21.617 97.849-6.827 13.653-15.36 30.151-15.36 38.684s8.533 25.6 15.36 38.684c14.223 27.307 31.289 61.44 21.617 97.849-9.671 37.547-42.667 58.027-68.836 75.093-11.947 7.396-27.876 17.636-31.857 24.463s-4.551 25.031-5.689 40.391c-1.707 30.72-3.413 68.836-30.151 96.143-27.876 27.307-65.991 29.013-96.711 30.72-14.791 0.569-33.564 1.707-40.391 5.689-6.257 3.413-16.497 19.911-23.893 31.289-17.067 26.169-38.116 58.596-75.093 68.836-7.396 2.276-14.791 2.844-22.187 2.844zM398.223 85.333s0 0-0.569 0c-5.689 2.276-18.773 21.617-25.031 32.427-13.653 21.049-29.013 44.943-53.476 59.164-25.031 14.223-53.476 15.929-79.076 17.067-12.516 0.569-35.84 1.707-40.96 5.689-3.413 4.551-4.551 27.307-5.12 39.823-1.137 25.6-2.844 54.044-17.067 78.507s-38.116 39.823-59.164 53.476c-10.809 6.827-30.151 19.343-32.427 25.6-0.569 6.257 9.103 25.6 14.791 36.977 11.377 22.756 25.031 48.356 25.031 77.369s-13.084 54.613-25.031 77.369c-5.689 11.377-15.929 30.72-14.791 36.977 2.276 5.689 21.617 18.773 32.427 25.031 21.049 13.653 44.943 29.013 59.164 53.476 14.223 25.031 15.929 53.476 17.067 79.076 0.569 12.516 1.707 35.84 5.689 40.96 4.551 3.413 27.307 4.551 39.823 5.12 25.6 1.137 54.044 2.844 78.507 17.067s39.823 38.116 53.476 59.164c6.827 10.809 19.343 30.151 25.6 32.427 5.689 1.707 25.6-9.103 36.977-14.791 22.756-11.377 48.356-25.031 77.369-25.031s54.613 13.084 77.369 25.031c11.377 5.689 29.583 16.497 36.977 14.791 5.689-2.276 18.773-21.617 25.031-32.427 13.653-21.049 29.013-44.943 53.476-59.164 25.031-14.223 53.476-15.929 79.076-17.067 12.516-0.569 35.84-1.707 40.96-5.689 3.413-4.551 4.551-27.307 5.12-39.823 1.137-25.6 2.844-54.044 17.067-78.507s38.116-39.823 59.164-53.476c10.809-6.827 30.151-19.343 32.427-25.6 0.569-6.257-9.103-25.6-14.791-36.977-11.377-22.756-25.031-48.356-25.031-77.369s13.084-54.613 25.031-77.369c5.689-11.377 15.36-30.72 14.791-36.977-2.276-6.257-22.187-18.773-32.427-25.6-21.049-13.653-44.943-29.013-59.164-53.476-14.223-25.031-15.929-53.476-17.067-79.076-0.569-12.516-1.707-35.84-5.689-40.96-4.551-3.413-27.307-4.551-39.823-5.12-25.6-1.137-54.044-2.844-78.507-17.067s-39.823-38.116-53.476-59.164c-6.827-10.809-19.343-30.151-25.6-32.427-5.689-1.707-25.6 9.103-36.977 14.791-22.756 11.377-48.356 25.031-77.369 25.031s-54.613-13.084-77.369-25.031c-11.377-5.689-29.583-14.791-36.409-14.791zM938.667 397.084s0 0 0 0v0zM426.097 711.68v0c-11.377 0-22.187-4.551-30.151-12.516l-142.791-142.791c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l112.64 112.64 283.876-283.876c16.497-16.497 43.804-16.497 60.303 0s16.497 43.804 0 60.303l-314.027 314.027c-7.964 7.964-18.773 12.516-30.151 12.516z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["verified"]},"attrs":[{}],"properties":{"order":331,"id":259,"name":"verified","prevSize":80,"code":59906},"setIdx":0,"setId":1,"iconIdx":2},{"icon":{"paths":["M799.19 390.096l-121.904 121.904 121.904 121.904c15.924 15.924 15.924 42.282 0 58.207-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081l-121.904-121.904-121.904 121.904c-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081c-15.924-15.924-15.924-42.282 0-58.207l121.904-121.904-121.904-121.904c-15.924-15.924-15.924-42.282 0-58.207s42.282-15.924 58.207 0l121.904 121.904 121.904-121.904c15.924-15.924 42.282-15.924 58.207 0s15.924 42.282 0 58.207zM1023.778 237.441v549.119c0 52.715-42.831 96.096-96.096 96.096h-655.098c-33.497 0-63.697-17.023-81.27-45.028l-180.66-289.385c-13.728-21.965-13.728-50.518 0-73.033l180.66-288.837c17.571-28.005 48.323-45.028 81.27-45.028h655.648c52.715 0 96.096 43.381 96.096 96.096zM941.41 237.441c0-7.687-6.040-13.728-13.728-13.728h-655.098c-4.942 0-9.335 2.197-11.531 6.589l-176.267 281.698 176.267 281.698c2.745 3.844 7.139 6.589 11.531 6.589h655.648c7.687 0 13.728-6.040 13.728-13.728v-549.119z"],"attrs":[{}],"grid":16,"tags":["delete-left"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":330,"id":258,"name":"delete-left","prevSize":80,"code":59907},"setIdx":0,"setId":1,"iconIdx":3},{"icon":{"paths":["M877.707 936.219h-38.619c-22.234-79.578-90.695-277.351-257.457-424.219 166.762-146.867 235.222-344.642 257.457-424.219h38.619c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885h-731.412c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h38.619c22.234 79.578 90.695 277.351 257.457 424.219-166.762 146.867-235.222 344.642-257.457 424.219h-38.619c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h731.412c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885zM276.778 87.781h469.859c-26.331 83.089-93.621 248.679-235.222 367.462-141.601-119.366-208.891-284.373-235.222-367.462zM512 568.758c141.601 119.366 208.891 284.373 235.222 367.462h-470.444c26.331-83.089 93.621-248.681 235.222-367.462z"],"attrs":[{}],"grid":16,"tags":["hourglass"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":329,"id":257,"name":"hourglass","prevSize":80,"code":59902},"setIdx":0,"setId":1,"iconIdx":4},{"icon":{"paths":["M816.58 221.265h-110.756v-41.534c0-53.163-43.749-96.912-96.912-96.912h-512.247c-53.163 0-96.912 43.749-96.912 96.912v498.402c0 53.163 43.749 96.912 96.912 96.912h15.506c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h85.836c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h15.506c53.163 0 96.912-43.749 96.912-96.912v-249.201c0-114.633-93.035-207.668-207.668-207.668zM82.82 678.134v-498.402c0-7.752 6.091-13.845 13.845-13.845h512.247c7.752 0 13.845 6.091 13.845 13.845v439.701s-2.768 3.323-4.43 4.43c-8.307 7.2-16.059 14.952-23.259 23.259-2.216 2.768-4.43 4.984-6.091 7.752-8.307 11.629-16.059 23.259-21.043 36.55h-110.756s0 0 0-0.554c0 0 0 0 0 0-3.877-9.414-9.414-18.829-14.952-27.136-1.661-2.216-3.323-4.43-4.984-7.2-4.43-6.645-9.414-12.184-14.952-18.275-2.216-2.216-3.877-4.43-6.091-6.645-7.2-6.645-14.398-12.737-22.152-18.275-1.107-0.554-1.661-1.661-2.768-2.216-8.307-5.538-17.168-9.968-26.027-14.398-3.323-1.661-6.645-2.768-9.968-3.877-7.2-2.768-13.845-4.984-21.043-6.645-3.323-0.554-6.645-1.661-9.968-2.216-10.522-2.216-21.597-3.323-32.673-3.323s-21.597 1.107-32.673 3.323c-3.323 0.554-6.645 1.661-9.968 2.216-7.2 1.661-14.398 3.877-21.043 6.645-3.323 1.107-6.645 2.216-9.968 3.877-8.861 3.877-17.721 8.861-26.027 14.398-1.107 0.554-1.661 1.107-2.768 2.216-7.752 5.538-15.506 11.629-22.152 18.275-2.216 2.216-4.43 4.43-6.091 6.645-5.538 5.538-10.522 11.629-14.952 18.275-1.661 2.216-3.323 4.43-4.984 7.2-5.538 8.861-10.522 17.721-14.952 27.136 0 0 0 0 0 0s0 0 0 0.554h-27.689c-7.752 0-13.845-6.091-13.845-13.845zM290.487 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 2.216-9.968 6.091-19.382 11.075-27.689 0.554-1.661 1.661-2.768 2.216-4.43 4.984-7.752 11.075-14.952 18.275-21.043 1.661-1.107 2.768-2.216 4.43-3.323 7.2-5.538 15.506-10.522 24.366-13.845 1.107 0 2.768-1.107 4.43-1.107 9.414-3.323 19.936-5.538 30.458-5.538s20.49 2.216 30.458 5.538c1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM733.513 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 1.661-6.645 3.323-13.291 6.091-19.382 0 0 0-0.554 0-1.107 2.768-5.538 5.538-11.075 9.414-16.059 0.554-1.107 1.661-1.661 2.216-2.768 3.323-4.43 6.645-8.307 10.522-12.184 1.107-1.107 2.216-1.661 3.323-2.768 3.877-3.323 8.307-6.645 12.737-9.414 1.107-0.554 2.768-1.661 4.43-2.216 4.984-2.768 10.522-4.984 16.059-6.645 2.216-0.554 4.43-1.661 7.2-2.216 7.2-1.661 14.952-2.768 22.705-2.768 10.522 0 20.49 2.216 30.458 5.538 1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM705.823 470.466v-166.134h110.756c68.669 0 124.601 55.931 124.601 124.601v41.534h-235.356z"],"attrs":[{}],"grid":16,"tags":["truck"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":328,"id":256,"name":"truck","prevSize":80,"code":59904},"setIdx":0,"setId":1,"iconIdx":5},{"icon":{"paths":["M168.104 1023.75v0c-44.45 0-86.559-17.546-118.726-49.128-65.505-65.505-65.505-171.363 0-236.867l322.256-322.256c-29.242-113.462 2.34-235.698 85.389-318.747 83.634-83.634 206.454-116.387 320.502-85.389 15.206 4.094 26.904 15.791 30.997 30.997s0 30.997-11.113 42.11l-143.29 143.29 30.413 111.707 111.707 30.413 143.29-143.29c11.113-11.113 27.488-15.206 42.11-11.113 15.206 4.094 26.904 15.791 30.997 30.997 30.997 114.047-1.169 236.867-85.389 320.502-83.050 83.050-205.285 114.633-318.747 85.389l-322.256 322.256c-31.582 31.582-73.692 49.128-118.142 49.128zM668.742 89.148c-56.146 4.678-109.369 29.242-150.308 70.183-66.674 66.674-88.314 164.345-56.146 254.413 5.849 15.791 1.755 33.922-10.527 45.619l-340.973 340.973c-30.997 30.997-30.997 81.88 0 112.878 15.206 15.206 35.091 23.395 56.732 23.395v0c21.055 0 41.524-8.188 56.146-23.395l340.973-340.973c12.282-12.282 29.828-15.791 45.619-10.527 90.069 31.582 187.739 10.527 254.413-56.146 40.941-40.941 64.919-94.162 70.183-150.308l-95.332 95.332c-11.113 11.113-27.488 15.206-42.695 11.113l-160.252-43.864c-15.206-4.094-26.904-15.791-30.997-30.997l-43.864-160.252c-4.094-15.206 0-31.582 11.113-42.695l95.332-95.332z"],"attrs":[{}],"grid":16,"tags":["wrench"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":325,"id":255,"name":"wrench","prevSize":80,"code":59903},"setIdx":0,"setId":1,"iconIdx":6},{"icon":{"paths":["M495.693 730.292h32.612c77.849 0 140.443-64.699 140.443-144.651v-389.243c0-79.953-63.121-144.651-140.443-144.651h-32.612c-77.849 0-140.443 64.699-140.443 144.651v388.718c0 79.953 63.121 144.651 140.443 144.651zM434.151 196.397c0-36.294 27.877-65.751 61.542-65.751h32.612c34.19 0 61.542 29.456 61.542 65.751v388.718c0 36.294-27.877 65.751-61.542 65.751h-32.612c-34.19 0-61.542-29.456-61.542-65.751v-388.718zM814.452 374.712v222.5c0 147.807-116.773 267.736-263.003 275.101v99.941c0 21.566-17.885 39.45-39.45 39.45s-39.45-17.885-39.45-39.45v-99.941c-146.229-7.364-263.002-127.293-263.002-275.101v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45v222.5c0 108.883 88.896 197.779 198.304 197.779h51.023c109.409 0 198.304-88.896 198.304-197.779v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microphone"]},"attrs":[{}],"properties":{"order":323,"id":254,"name":"microphone","prevSize":80,"code":59898},"setIdx":0,"setId":1,"iconIdx":7},{"icon":{"paths":["M906.87 28.172h-85.757c-64.638 0-117.117 52.479-117.117 117.117v28.799l-607.985 130.557v-32.639c0-26.239-21.76-47.999-47.999-47.999s-47.999 21.76-47.999 47.999v447.99c0 26.239 21.76 47.999 47.999 47.999s47.999-21.76 47.999-47.999v-40.319l607.985 130.557v28.799c0 64.638 52.479 117.117 117.117 117.117h85.757c64.638 0 117.117-52.479 117.117-117.117v-693.744c0-64.638-52.479-117.117-117.117-117.117zM96.011 581.118v-178.556l607.985-130.557v439.669l-607.985-130.557zM927.989 839.033c0 11.52-9.6 21.119-21.119 21.119h-85.757c-11.52 0-21.119-9.6-21.119-21.119v-693.744c0-11.52 9.6-21.119 21.119-21.119h85.757c11.52 0 21.119 9.6 21.119 21.119v693.744zM574.079 872.311c-23.68 74.238-92.158 124.156-170.876 124.156-98.558 0-179.196-79.359-179.196-175.995 0-7.039 0-14.719 1.279-21.76 3.199-26.239 27.52-44.799 53.759-41.598s44.799 26.879 41.598 53.118c0 3.199 0 6.4 0 9.6 0 44.159 37.12 79.998 83.198 79.998 36.479 0 68.478-23.039 79.359-56.958 7.68-25.6 35.2-39.679 60.159-31.36 25.6 7.68 39.040 35.2 31.36 60.159z"],"attrs":[{}],"grid":16,"tags":["megaphone"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":322,"id":253,"name":"megaphone","prevSize":80,"code":59899},"setIdx":0,"setId":1,"iconIdx":8},{"icon":{"paths":["M1023.949 776.232c0 27.083-22.46 49.543-49.543 49.543h-805.246l80.59 80.59c19.156 19.156 19.156 50.864 0 70.022-9.909 9.909-22.46 14.533-35.010 14.533s-25.101-4.625-35.010-14.533l-165.145-165.145c-4.625-4.625-7.927-9.909-10.57-15.854-5.284-11.89-5.284-25.763 0-37.653 2.643-5.945 5.945-11.229 10.57-15.854l165.145-165.145c19.156-19.156 50.864-19.156 70.022 0s19.156 50.864 0 70.022l-80.59 80.59h805.246c27.083 0 49.543 22.46 49.543 49.543zM49.594 297.311h805.246l-80.59 80.59c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l165.145-165.145c4.625-4.625 7.927-9.909 10.57-15.854 5.284-11.89 5.284-25.763 0-37.653-2.643-5.945-5.945-11.229-10.57-15.854l-165.145-165.145c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l80.59 80.59h-805.246c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-right-arrow-left"]},"attrs":[{}],"properties":{"order":321,"id":252,"name":"arrow-right-arrow-left","prevSize":80,"code":59900},"setIdx":0,"setId":1,"iconIdx":9},{"icon":{"paths":["M609.223 618.817c-17.27 69.72-134.322 31.981-172.7 22.386l30.702-123.449c38.378 9.594 159.908 28.143 141.997 101.061zM509.441 348.895l-28.143 111.935c31.981 7.676 129.844 40.297 145.835-23.027 15.991-65.882-85.71-81.233-117.692-88.909zM1008.351 635.449c-68.44 273.76-346.039 440.703-620.44 372.904-273.76-68.44-441.343-346.039-372.904-619.8 68.44-274.4 346.039-440.703 620.44-372.904 273.76 68.44 441.343 346.039 372.904 619.8zM343.778 597.71c-2.559 7.035-9.594 17.27-25.586 13.432-2.559 0-40.937-10.235-40.937-10.235l-28.143 63.963 72.918 17.91c14.072 3.838 26.864 7.035 40.297 10.873l-23.027 92.747 55.648 14.072 23.027-92.106c15.351 4.478 30.062 7.676 44.774 11.513l-23.027 91.466 56.288 14.072 23.027-92.747c95.944 17.91 168.222 10.873 198.285-76.115 24.305-69.72-1.279-110.017-51.81-136.241 36.459-8.316 63.963-32.621 71.639-82.512 10.235-67.801-41.575-104.899-112.574-128.565l23.027-92.747-56.288-14.072-22.386 89.547c-14.711-3.838-30.062-7.035-45.413-10.873l22.386-90.188-55.648-14.072-23.027 92.106c-12.153-2.559-24.305-5.757-35.819-8.316l-77.395-19.829-14.711 60.126s40.937 9.594 40.937 10.235c22.386 5.757 26.224 20.468 26.224 32.621l-63.323 252.653z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bitcoin"]},"attrs":[{}],"properties":{"order":320,"id":251,"name":"bitcoin","prevSize":80,"code":59901},"setIdx":0,"setId":1,"iconIdx":10},{"icon":{"paths":["M290.603 885.606h-83.024c-38.191 0-69.186-30.995-69.186-69.186v-664.188c0-38.191 30.995-69.186 69.186-69.186h207.559v262.908c0 22.693 18.819 41.512 41.512 41.512h265.675c5.535 16.051 20.48 27.674 38.745 27.674 22.693 0 41.512-18.819 41.512-41.512v-27.674c0-5.535-1.107-11.069-3.321-16.051s-4.981-9.409-8.856-13.284l-304.42-304.42c-3.875-3.875-8.302-6.642-13.284-8.856s-10.517-3.321-16.051-3.321h-249.071c-84.13 0-152.209 68.079-152.209 152.209v664.188c0 84.13 68.079 152.209 152.209 152.209h83.024c22.693 0 41.512-18.819 41.512-41.512s-18.819-41.512-41.512-41.512zM498.162 141.715l162.726 162.726h-162.726v-162.726zM933.206 477.13c-21.032-21.032-52.029-33.763-84.13-34.316-33.209-1.66-64.758 11.069-85.791 32.655l-353.68 354.234c-7.196 7.196-11.069 16.051-12.177 26.014l-9.963 123.429c-1.107 12.177 3.321 24.353 12.177 32.655 7.748 7.748 18.265 12.177 29.335 12.177 1.107 0 2.214 0 3.875 0l124.535-11.623c9.409-1.107 18.819-4.981 25.461-12.177l353.68-354.234c44.279-43.726 42.618-122.875-3.321-168.814zM877.858 587.275l-343.164 343.717-60.331 5.535 4.427-58.67 343.164-343.717c5.535-5.535 15.498-7.748 25.461-8.302 11.069 0 21.032 3.875 27.121 9.963 13.284 12.73 14.944 39.851 3.321 51.475z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-edit"]},"attrs":[{}],"properties":{"order":319,"id":250,"name":"file-edit","prevSize":80,"code":59894},"setIdx":0,"setId":1,"iconIdx":11},{"icon":{"paths":["M1021.466 949.618l-177.541-496.402c-12.469-32.659-40.377-52.846-72.441-52.846s-59.379 20.189-73.035 54.035l-176.948 495.215c-8.313 23.158 3.563 48.691 26.72 57.003s48.691-3.563 57.003-26.72l36.814-102.724h258.296l36.814 102.724c6.531 18.408 23.752 29.689 42.158 29.689 4.75 0 10.094-0.594 14.845-2.376 23.158-8.313 35.033-33.846 26.72-57.003zM674.697 787.515l97.38-272.547 97.38 272.547h-194.761zM523.282 265.579c-134.195 211.981-255.327 340.238-402.585 425.743-7.125 4.157-14.845 5.938-21.97 5.938-15.438 0-30.283-7.72-38.595-21.97-12.469-21.376-5.344-48.691 16.032-60.566 124.694-72.441 226.826-176.354 341.425-348.55h-373.489c-24.345 0-44.534-20.189-44.534-44.534s20.189-44.534 44.534-44.534h222.669v-117.569c0-24.345 20.189-44.534 44.534-44.534s44.534 20.189 44.534 44.534v117.569h222.669c24.345 0 44.534 20.189 44.534 44.534s-20.189 44.534-44.534 44.534h-55.816zM525.657 697.26c-7.72 0-15.438-1.781-22.563-5.938-38.595-22.563-76.004-47.502-111.038-73.63-19.595-14.845-23.752-42.752-8.907-62.347s42.752-23.752 62.347-8.907c32.064 24.345 67.097 46.909 102.724 67.691 21.376 12.469 28.502 39.784 16.032 61.16-8.313 14.251-23.158 21.97-38.595 21.97z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["language"]},"attrs":[{}],"properties":{"order":318,"id":249,"name":"language","prevSize":80,"code":59895},"setIdx":0,"setId":1,"iconIdx":12},{"icon":{"paths":["M696.881 725.324c-23.323 0-42.665 19.342-42.665 42.665v85.33c0 39.252-31.856 71.108-71.108 71.108h-426.648c-39.252 0-71.108-31.856-71.108-71.108v-682.637c0-39.252 31.856-71.108 71.108-71.108h184.881v270.211c0 23.323 19.342 42.665 42.665 42.665h270.211v71.108c0 23.323 19.342 42.665 42.665 42.665s42.665-19.342 42.665-42.665v-113.772c0-11.377-4.55-22.186-12.515-30.149l-312.876-312.876c-7.964-7.964-18.773-12.515-30.149-12.515h-227.546c-86.467 0-156.437 69.97-156.437 156.437v682.637c0 86.467 69.97 156.437 156.437 156.437h426.648c86.467 0 156.437-69.97 156.437-156.437v-85.33c0-23.323-19.342-42.665-42.665-42.665zM426.67 159.872l167.246 167.246h-167.246v-167.246zM1020.565 642.27c-2.276 5.12-5.12 9.67-9.102 13.653l-170.659 170.659c-8.533 8.533-19.342 12.515-30.149 12.515s-21.616-3.982-30.149-12.515c-16.497-16.497-16.497-43.802 0-60.3l97.845-97.845h-494.343c-23.323 0-42.665-19.342-42.665-42.665s19.342-42.665 42.665-42.665h494.343l-97.845-97.845c-16.497-16.497-16.497-43.802 0-60.3s43.802-16.497 60.3 0l170.659 170.659c3.982 3.982 6.826 8.533 9.102 13.653 4.55 10.24 4.55 22.186 0 32.425z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-export"]},"attrs":[{}],"properties":{"order":317,"id":248,"name":"file-export","prevSize":80,"code":59896},"setIdx":0,"setId":1,"iconIdx":13},{"icon":{"paths":["M537.031 668.444h-494.364c-23.324 0-42.667-19.343-42.667-42.667s19.343-42.667 42.667-42.667h494.364l-97.849-97.849c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l170.667 170.667c3.983 3.983 6.827 8.533 9.103 13.653 4.551 10.24 4.551 22.187 0 32.427-2.276 5.12-5.12 9.671-9.103 13.653l-170.667 170.667c-8.533 8.533-19.343 12.516-30.151 12.516s-21.617-3.983-30.151-12.516c-16.497-16.497-16.497-43.804 0-60.303l97.849-97.849zM1024 369.777v483.556c0 86.471-69.973 156.444-156.444 156.444h-426.667c-86.471 0-156.444-69.973-156.444-156.444v-56.889c0-23.324 19.343-42.667 42.667-42.667s42.667 19.343 42.667 42.667v56.889c0 39.253 31.857 71.111 71.111 71.111h426.667c39.253 0 71.111-31.857 71.111-71.111v-440.889h-270.223c-23.324 0-42.667-19.343-42.667-42.667v-270.223h-184.889c-39.253 0-71.111 31.857-71.111 71.111v284.444c0 23.324-19.343 42.667-42.667 42.667s-42.667-19.343-42.667-42.667v-284.444c0-86.471 69.973-156.444 156.444-156.444h227.556c11.377 0 22.187 4.551 30.151 12.516l312.889 312.889c7.964 7.964 12.516 18.773 12.516 30.151zM711.111 327.111h167.253l-167.253-167.253v167.253z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-import"]},"attrs":[{}],"properties":{"order":316,"id":247,"name":"file-import","prevSize":80,"code":59897},"setIdx":0,"setId":1,"iconIdx":14},{"icon":{"paths":["M894.076 334.712l-321.811-321.811c-8.191-8.191-19.309-12.873-31.010-12.873h-263.299c-88.936 0-160.905 71.968-160.905 160.905v702.132c0 88.936 71.968 160.905 160.905 160.905h468.087c88.936 0 160.905-71.968 160.905-160.905v-497.344c0-11.702-4.68-22.819-12.873-31.010zM585.138 149.817l172.022 172.022h-172.022v-172.022zM746.044 936.204h-468.087c-40.373 0-73.138-32.766-73.138-73.138v-702.132c0-40.373 32.766-73.138 73.138-73.138h219.416v277.928c0 23.989 19.894 43.883 43.883 43.883h277.928v453.46c0 40.373-32.766 73.138-73.138 73.138zM758.916 554.128l-87.766 292.554c-5.266 17.553-21.65 30.426-40.373 31.010-0.586 0-1.17 0-1.755 0-18.139 0-33.937-11.118-40.958-27.5l-76.065-190.745-76.065 190.745c-7.021 17.553-23.989 28.671-42.713 27.5-18.723-0.586-34.521-13.457-40.373-31.010l-87.766-292.554c-7.021-23.405 6.436-47.979 29.255-54.415 23.405-7.021 47.394 6.436 54.415 29.255l51.49 172.022 70.213-176.118c13.457-33.351 68.458-33.351 81.331 0l70.213 176.118 51.49-172.022c7.021-23.405 31.596-36.276 54.415-29.255 23.405 7.021 36.276 31.596 29.255 54.415z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-word"]},"attrs":[{}],"properties":{"order":311,"id":246,"name":"file-word","prevSize":80,"code":59889},"setIdx":0,"setId":1,"iconIdx":15},{"icon":{"paths":["M950.832 263.329h-81.915c23.405-28.085 38.032-63.192 38.032-102.395 0-88.936-71.968-160.905-160.905-160.905-98.298 0-184.895 52.074-234.044 129.309-49.149-77.234-135.746-129.309-234.044-129.309-88.936 0-160.905 71.968-160.905 160.905 0 39.203 14.628 74.309 38.032 102.395h-81.915c-40.373 0-73.138 32.766-73.138 73.138v146.278c0 35.107 25.16 63.192 58.511 70.213v397.874c0 40.373 32.766 73.138 73.138 73.138h760.643c40.373 0 73.138-32.766 73.138-73.138v-397.874c33.351-7.021 58.511-35.107 58.511-70.213v-146.278c0-40.373-32.766-73.138-73.138-73.138zM936.204 468.117h-380.321v-117.021h380.321v117.021zM746.044 87.796c40.373 0 73.138 32.766 73.138 73.138s-32.766 73.138-73.138 73.138h-184.895c19.894-83.67 95.373-146.278 184.895-146.278zM277.956 87.796c89.522 0 165.001 62.606 184.895 146.278h-184.895c-40.373 0-73.138-32.766-73.138-73.138s32.766-73.138 73.138-73.138zM87.796 351.095h380.321v117.021h-380.321v-117.021zM146.306 555.883h321.811v380.321h-321.811v-380.321zM877.694 936.204h-321.811v-380.321h321.811v380.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["gift"]},"attrs":[{}],"properties":{"order":312,"id":245,"name":"gift","prevSize":80,"code":59890},"setIdx":0,"setId":1,"iconIdx":16},{"icon":{"paths":["M417.791 482.743c0-23.991 19.896-43.886 43.886-43.886h73.143v-73.143c0-23.991 19.896-43.886 43.886-43.886s43.886 19.896 43.886 43.886v73.143h73.143c23.991 0 43.886 19.896 43.886 43.886s-19.896 43.886-43.886 43.886h-73.143v73.143c0 23.991-19.896 43.886-43.886 43.886s-43.886-19.896-43.886-43.886v-73.143h-73.143c-23.991 0-43.886-19.896-43.886-43.886zM468.114 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM848.461 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM1022.836 259.215l-117.029 468.119c-4.681 19.31-22.235 33.354-42.716 33.354h-585.15c-21.065 0-39.205-15.213-43.301-36.279l-110.593-607.385h-80.165c-23.991 0-43.886-19.896-43.886-43.886s19.896-43.886 43.886-43.886h117.029c21.065 0 39.205 15.213 43.301 36.279l25.162 139.266h750.746c13.458 0 26.332 6.436 34.523 16.969s11.118 24.576 8.192 37.45zM923.945 292.569h-678.773l69.048 380.347h514.346l94.794-380.347z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-plus"]},"attrs":[{}],"properties":{"order":313,"id":244,"name":"cart-plus","prevSize":80,"code":59891},"setIdx":0,"setId":1,"iconIdx":17},{"icon":{"paths":["M1023.898 103.121v369.207c0 56.948-46.711 103.659-103.659 103.659h-103.019v-575.886h103.019c57.589 0 103.659 46.071 103.659 103.019zM85.844 79.445l-84.463 479.905c-10.238 58.868 34.553 112.617 94.702 112.617h305.86v223.955c0 70.386 57.589 127.974 127.335 127.974h5.759c25.595 0 48.631-15.357 58.868-39.033l174.685-408.879v-575.886s-588.683 0-588.683 0c-46.711 0-86.383 33.274-94.702 79.345z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-down-fill"]},"attrs":[{}],"properties":{"order":314,"id":243,"name":"thumbs-down-fill","prevSize":80,"code":59892},"setIdx":0,"setId":1,"iconIdx":18},{"icon":{"paths":["M207.428 448.014v575.872h-103.017c-57.587 0-103.657-46.070-103.657-103.017v-369.198c0-56.947 46.71-103.657 103.657-103.657h103.017zM927.907 352.035h-305.852v-223.95c0-70.384-57.587-127.971-127.332-127.971h-5.759c-25.595 0-48.63 15.357-58.866 39.032l-174.681 408.869v575.872s588.668 0 588.668 0c46.71 0 86.381-33.273 94.699-79.343l84.461-479.893c10.238-58.866-34.552-112.614-94.699-112.614z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-up-fill"]},"attrs":[{}],"properties":{"order":315,"id":242,"name":"thumbs-up-fill","prevSize":80,"code":59893},"setIdx":0,"setId":1,"iconIdx":19},{"icon":{"paths":["M1020.467 528.967c-2.341 5.266-5.266 9.946-9.362 14.042l-146.281 146.281c-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873c-16.967-16.967-16.967-45.053 0-62.024l71.384-71.384h-318.304v318.304l71.384-71.384c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-146.281 146.281c-4.096 4.096-8.774 7.021-14.042 9.362s-11.117 3.513-16.967 3.513-11.701-1.17-16.967-3.513c-5.266-2.341-9.946-5.266-14.042-9.362l-146.281-146.281c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l71.384 71.384v-318.304h-318.304l71.384 71.384c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-146.281-146.281c-4.096-4.096-7.021-8.774-9.362-14.042-4.681-10.532-4.681-22.82 0-33.35 2.341-5.266 5.266-9.946 9.362-14.042l146.281-146.281c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-71.384 71.384h318.304v-318.889l-71.384 71.384c-16.967 16.967-45.053 16.967-62.024 0s-16.967-45.053 0-62.024l146.281-146.281c4.096-4.096 8.774-7.021 14.042-9.362 10.532-4.681 22.82-4.681 33.35 0 5.266 2.341 9.946 5.266 14.042 9.362l146.281 146.281c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-71.384-71.384v318.304h318.304l-71.384-71.384c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l146.281 146.281c4.096 4.096 7.021 8.774 9.362 14.042 4.681 10.532 4.681 22.82 0 33.35z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-alt"]},"attrs":[{}],"properties":{"order":310,"id":241,"name":"arrows-alt","prevSize":80,"code":59888},"setIdx":0,"setId":1,"iconIdx":20},{"icon":{"paths":["M695.789 315.083h-367.579c-14.704 0-26.255-11.553-26.255-26.255v-78.767c0-14.704 11.553-26.255 26.255-26.255h367.579c14.704 0 26.255 11.553 26.255 26.255v78.767c0 14.704-11.553 26.255-26.255 26.255zM722.045 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-210.045c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h210.045c14.704 0 26.255-11.553 26.255-26.255zM892.706 905.834v-787.668c0-65.114-53.036-118.15-118.15-118.15h-525.113c-65.114 0-118.15 53.036-118.15 118.15v787.668c0 65.114 53.036 118.15 118.15 118.15h525.113c65.114 0 118.15-53.036 118.15-118.15zM774.556 78.782c21.529 0 39.383 17.854 39.383 39.383v787.668c0 21.529-17.854 39.383-39.383 39.383h-525.113c-21.529 0-39.383-17.854-39.383-39.383v-787.668c0-21.529 17.854-39.383 39.383-39.383h525.113z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["calculator"]},"attrs":[{}],"properties":{"order":308,"id":240,"name":"calculator","prevSize":80,"code":59887},"setIdx":0,"setId":1,"iconIdx":21},{"icon":{"paths":["M117.634 249.75l80.59-80.59v375.869c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-375.869l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0z","M906.366 774.25l-80.59 80.59v-375.869c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v375.869l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M976.388 117.634c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0l-80.59 80.59v-78.608c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v177.695l-679.075 679.075c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l80.59-80.59v78.608c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-177.695l679.075-679.075z"],"attrs":[{},{},{}],"grid":16,"tags":["sort-alt-slash"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":306,"id":239,"name":"sort-alt-slash","prevSize":80,"code":59886},"setIdx":0,"setId":1,"iconIdx":22},{"icon":{"paths":["M1020.451 495.033c-2.348-5.441-5.502-10.097-9.37-14.051l-234.032-234.032c-8.033-8.604-19.443-13.967-32.105-13.967-24.235 0-43.882 19.647-43.882 43.882 0 12.663 5.363 24.072 13.941 32.081l0.026 0.023 159.147 159.147h-724.353l159.147-159.147c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-234.040 234.040c-3.859 3.945-7.014 8.601-9.247 13.748l-0.114 0.295c-2.222 5-3.515 10.833-3.515 16.967s1.293 11.968 3.623 17.242l-0.108-0.273c2.348 5.441 5.502 10.097 9.37 14.051l234.032 234.032c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0c7.929-7.939 12.834-18.902 12.834-31.010s-4.904-23.071-12.834-31.011v0l-159.147-159.147h724.353l-159.147 159.147c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l234.040-234.040c3.859-3.945 7.014-8.601 9.247-13.748l0.114-0.295c2.222-5 3.515-10.833 3.515-16.967s-1.293-11.968-3.623-17.242l0.108 0.273z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-h"]},"attrs":[{}],"properties":{"order":305,"id":238,"name":"arrows-h","prevSize":80,"code":59884},"setIdx":0,"setId":1,"iconIdx":23},{"icon":{"paths":["M528.967 1020.451c5.441-2.348 10.097-5.502 14.051-9.37l234.032-234.032c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-159.147 159.147v-724.353l159.147 159.147c7.815 7.297 18.343 11.777 29.915 11.777 24.235 0 43.882-19.647 43.882-43.882 0-11.574-4.48-22.1-11.802-29.942l0.023 0.026-234.040-234.040c-3.945-3.859-8.601-7.014-13.748-9.247l-0.295-0.114c-5-2.222-10.833-3.515-16.967-3.515s-11.968 1.293-17.242 3.623l0.273-0.108c-5.441 2.348-10.097 5.502-14.051 9.37l-234.032 234.032c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l159.147-159.147v724.353l-159.147-159.147c-7.939-7.929-18.902-12.834-31.010-12.834s-23.071 4.904-31.011 12.834v0c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0l234.040 234.040c3.945 3.859 8.601 7.014 13.748 9.247l0.295 0.114c5 2.222 10.833 3.515 16.967 3.515s11.968-1.293 17.242-3.623l-0.273 0.108z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-v"]},"attrs":[{}],"properties":{"order":304,"id":237,"name":"arrows-v","prevSize":80,"code":59885},"setIdx":0,"setId":1,"iconIdx":24},{"icon":{"paths":["M836.060 936.086h-552.19l116.989-164.955c5.016-7 8.065-15.709 8.189-25.123v-190.138h190.108c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0h-191.863v-190.108c-0.156-2.816-0.245-6.11-0.245-9.427 0-99.824 80.924-180.749 180.749-180.749 1.732 0 3.459 0.025 5.178 0.073l-0.254-0.005c3.537-0.243 7.666-0.381 11.827-0.381 101.439 0 183.673 82.233 183.673 183.673 0 5.695-0.259 11.328-0.766 16.89l0.052-0.716v58.495c0 24.229 19.642 43.871 43.871 43.871s43.871-19.642 43.871-43.871v0-58.495c0.352-5.164 0.553-11.193 0.553-17.269 0-149.252-120.994-270.246-270.246-270.246-4.515 0-9.003 0.111-13.464 0.329l0.628-0.025c-1.804-0.044-3.929-0.069-6.060-0.069-147.637 0-267.321 119.684-267.321 267.321 0 3.728 0.077 7.436 0.228 11.127l-0.018-0.528v190.108h-131.613c-24.229 0-43.871 19.642-43.871 43.871s19.642 43.871 43.871 43.871v0h131.613v175.484l-155.595 223.45c-3.958 6.515-6.3 14.39-6.3 22.813s2.343 16.298 6.411 23.010l-0.111-0.197c7.358 14.007 21.805 23.398 38.447 23.398 0.056 0 0.112 0 0.169 0h633.489c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pound"]},"attrs":[{}],"properties":{"order":303,"id":236,"name":"pound","prevSize":80,"code":59883},"setIdx":0,"setId":1,"iconIdx":25},{"icon":{"paths":["M727.036 469.12l-70.398-16 55.038 78.078v242.556l187.516-156.157v-265.595l-86.398 30.719-85.758 86.398z","M289.285 469.12l-86.398-86.398-85.758-30.719v265.595l187.516 156.157v-242.556l55.038-78.078-70.398 16z","M586.238 476.8h-156.157l-39.040-23.68-62.718 94.078v351.993l46.72 69.759 55.038 55.038h156.157l55.038-55.038 46.72-69.759v-351.993l-62.718-94.078-39.040 23.68z","M711.676 922.231l101.117-101.758v-101.117l-101.117 85.758v117.118z","M202.886 820.473l101.758 101.758v-117.118l-101.758-85.758v101.117z","M453.122 445.442h39.679v-445.431h-86.398l-62.079 147.837-282.234-23.040 47.359 195.836 335.993 124.797h7.68z","M671.997 147.848l-62.079-147.837h-86.398v447.991h52.479l335.993-127.997 47.999-191.996z","M852.474 109.449l-110.078-109.438h-109.438l55.038 124.797 164.476-15.36z","M382.722 0.011h-109.438l-109.438 109.438 164.476 15.36 54.399-124.797z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["prime"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":307,"id":235,"name":"prime","prevSize":80,"code":59882},"setIdx":0,"setId":1,"iconIdx":26},{"icon":{"paths":["M589.605 64.373v-18.004c-0.345-25.576-20.987-46.218-46.53-46.563h-0.033c-300.373 1.794-543.179 245.708-543.179 546.331 0 98.823 26.237 191.517 72.126 271.496l-1.409-2.663c8.24 13.842 23.126 22.972 40.145 22.972 0.074 0 0.148 0 0.221 0h-0.012c8.464-0.017 16.386-2.321 23.186-6.325l-0.215 0.116 18.004-9.313c88.223 122.529 230.468 201.375 391.129 201.375 265.391 0 480.531-215.14 480.531-480.531 0-248.992-189.376-453.753-431.953-478.105l-2.014-0.163zM496.478 95.416v420.93l-365.676 209.844c-24.009-53.406-37.995-115.765-37.995-181.391 0-232.603 175.709-424.166 401.636-449.201l2.036-0.183zM543.042 931.068c-126.56-0.365-238.867-61.070-309.71-154.848l-0.712-0.982 333.392-191.84c14.165-7.849 23.596-22.711 23.596-39.775 0-0.204-0.001-0.407-0.004-0.611v0.031-384.921c192.214 25.131 339.099 187.876 339.099 384.928 0 213.47-172.379 386.677-385.534 388.018h-0.128z"],"attrs":[{}],"grid":16,"tags":["chart-pie"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":301,"id":234,"name":"chart-pie","prevSize":80,"code":59881},"setIdx":0,"setId":1,"iconIdx":27},{"icon":{"paths":["M399.361 614.401c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2c28.276 0 51.199 22.923 51.199 51.2v0c0 28.276-22.923 51.2-51.199 51.2v0zM1023.999 512c0 282.77-229.23 512-512 512s-512-229.23-512-512c0-282.77 229.23-512 512-512v0c282.769 0 512 229.23 512 512v0zM750.721 426.88c-18.359 1.113-34.69 8.976-46.715 21.114l-0.006 0.006c-49.923-33.418-111.167-53.62-177.080-54.397l-0.199-0.001 35.84-161.921 114.56 25.601c-0.003 0.191-0.005 0.416-0.005 0.641 0 27.924 22.636 50.56 50.56 50.56 0.002 0 0.003 0 0.005 0v0c28.355-0.361 51.2-23.43 51.2-51.836 0-0.001 0-0.003 0-0.004v0c0.016-0.492 0.027-1.071 0.027-1.653 0-27.924-22.637-50.56-50.561-50.56-20.408 0-37.99 12.090-45.978 29.498l-0.129 0.315-128-28.16c-0.688-0.138-1.481-0.217-2.292-0.217-5.656 0-10.412 3.862-11.77 9.093l-0.018 0.084-39.679 178.56c-66.101 0.974-127.301 21.143-178.501 55.164l1.221-0.764c-12.464-12.858-29.895-20.838-49.191-20.838-37.821 0-68.48 30.66-68.48 68.48 0 26.584 15.148 49.632 37.286 60.978l0.386 0.18c-0.468 4.795-0.733 10.366-0.733 16.001s0.267 11.205 0.787 16.701l-0.054-0.702c0 108.16 122.239 196.48 272.64 196.48s272.64-88.32 272.64-196.48c0-0.084 0-0.183 0-0.282 0-11.484-1.399-22.639-4.039-33.308l0.2 0.95c20.889-11.994 34.732-34.174 34.732-59.588 0-36.756-28.957-66.749-65.302-68.408l-0.15-0.006zM608.64 666.88c-27.226 17.349-60.409 27.649-96 27.649s-68.773-10.302-96.732-28.086l0.732 0.435c-2.268-2.080-5.305-3.355-8.64-3.355s-6.372 1.275-8.649 3.365l0.009-0.009c-2.426 2.23-3.939 5.418-3.939 8.959s1.514 6.729 3.93 8.952l0.009 0.008c31.918 21.918 71.391 35.004 113.921 35.004s82.002-13.086 114.611-35.451l-0.692 0.447c2.426-2.231 3.939-5.418 3.939-8.959s-1.514-6.729-3.93-8.952l-0.009-0.007c-2.337-2.457-5.63-3.984-9.28-3.984s-6.943 1.527-9.274 3.978l-0.005 0.006zM624.639 512c-28.277 0-51.2 22.923-51.2 51.2s22.923 51.2 51.2 51.2c28.276 0 51.199-22.923 51.199-51.2v0c0-28.277-22.923-51.2-51.199-51.2v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["reddit"]},"attrs":[{}],"properties":{"order":299,"id":233,"name":"reddit","prevSize":80,"code":59880},"setIdx":0,"setId":1,"iconIdx":28},{"icon":{"paths":["M367.461 188.397c-7.939-7.93-18.905-12.836-31.014-12.836s-23.074 4.905-31.015 12.836v0l-292.589 292.589c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0l292.589 292.589c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0l-261.574-261.574 261.574-261.574c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z","M1011.156 480.986l-292.589-292.589c-7.817-7.298-18.345-11.779-29.92-11.779-24.239 0-43.889 19.649-43.889 43.889 0 11.575 4.481 22.104 11.803 29.946l-0.023-0.027 261.574 261.574-261.574 261.574c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0l292.589-292.589c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["code"]},"attrs":[{},{}],"properties":{"order":298,"id":232,"name":"code","prevSize":80,"code":59879},"setIdx":0,"setId":1,"iconIdx":29},{"icon":{"paths":["M936.767 0.034c-27.214 0.367-49.178 22.331-49.545 49.509v160.562l-55.49-55.49c-86.69-87.405-206.835-141.515-339.617-141.515-209.345 0-387.277 134.501-452.092 321.801l-1.011 3.36c-2.53 5.71-4.002 12.369-4.002 19.374 0 21.825 14.301 40.308 34.044 46.591l0.347 0.094c2.483 0.454 5.34 0.712 8.257 0.712s5.775-0.259 8.55-0.756l-0.293 0.043c21.606-0.226 39.922-14.066 46.794-33.339l0.108-0.351c19.528-56.988 50.528-105.653 90.48-145.309l0.022-0.022c68.806-68.546 163.72-110.925 268.534-110.925s199.729 42.378 268.547 110.936l55.478 55.478h-159.205c-27.363 0-49.545 22.182-49.545 49.545s22.182 49.545 49.545 49.545v0h280.095c0.198 0.003 0.432 0.005 0.666 0.005 26.997 0 48.884-21.887 48.884-48.884 0-0.234-0.002-0.468-0.005-0.7v0.036-280.755c0-27.363-22.182-49.545-49.545-49.545v0z","M953.281 622.981c-5.442-2.202-11.755-3.479-18.366-3.479-22.122 0-40.903 14.308-47.591 34.174l-0.104 0.355c-19.528 56.988-50.528 105.653-90.48 145.309l-0.022 0.022c-68.806 68.546-163.72 110.925-268.534 110.925s-199.729-42.378-268.547-110.936l-55.478-55.478h163.169c27.363 0 49.545-22.182 49.545-49.545s-22.182-49.545-49.545-49.545v0h-280.095c-0.198-0.003-0.432-0.005-0.666-0.005-26.997 0-48.884 21.887-48.884 48.884 0 0.234 0.002 0.468 0.005 0.7v-0.036 280.095c0 27.363 22.182 49.545 49.545 49.545s49.545-22.182 49.545-49.545v0-160.526l55.49 55.49c86.69 87.405 206.835 141.515 339.617 141.515 209.345 0 387.277-134.501 452.092-321.801l1.011-3.36c1.72-4.786 2.714-10.307 2.714-16.060 0-21.835-14.317-40.328-34.076-46.602l-0.347-0.094z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sync"]},"attrs":[{},{}],"properties":{"order":297,"id":231,"name":"sync","prevSize":80,"code":59878},"setIdx":0,"setId":1,"iconIdx":30},{"icon":{"paths":["M950.857 292.571h-175.543v-29.257c0-145.425-117.889-263.314-263.314-263.314s-263.314 117.889-263.314 263.314v0 29.257h-175.543c-40.395 0-73.142 32.747-73.142 73.142v0 497.372c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-497.372c0-40.395-32.747-73.142-73.142-73.142v0zM336.457 263.315c0-96.949 78.594-175.543 175.543-175.543s175.543 78.594 175.543 175.543v0 29.257h-351.086zM936.228 863.086c0 40.395-32.747 73.142-73.142 73.142v0h-702.171c-40.395 0-73.142-32.747-73.142-73.142v0-482.743h160.914v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h351.086v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h160.914z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shopping-bag"]},"attrs":[{}],"properties":{"order":296,"id":230,"name":"shopping-bag","prevSize":80,"code":59877},"setIdx":0,"setId":1,"iconIdx":31},{"icon":{"paths":["M1023.969 301.19v-180.695c0-33.265-26.967-60.232-60.232-60.232v0h-903.474c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0h903.474c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0zM963.737 903.505h-903.474v-180.695h903.474zM963.737 602.347h-903.474v-180.695h903.474zM963.737 301.19h-903.474v-180.695h903.474z","M210.842 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["server"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":295,"id":229,"name":"server","prevSize":80,"code":59876},"setIdx":0,"setId":1,"iconIdx":32},{"icon":{"paths":["M926.005 99.103c-121.161-57.959-262.777-93.948-412.236-99.026l-1.769-0.048c-151.228 5.125-292.843 41.116-420.425 101.823l6.42-2.75c-32.977 15.76-55.351 48.848-55.351 87.164 0 0.296 0.001 0.59 0.004 0.885v-0.045 649.789c-0.003 0.249-0.004 0.545-0.004 0.839 0 38.315 22.376 71.404 54.773 86.914l0.58 0.25c121.161 57.959 262.777 93.948 412.236 99.026l1.769 0.048c151.228-5.125 292.843-41.116 420.425-101.823l-6.42 2.75c32.977-15.76 55.351-48.848 55.351-87.164 0-0.296-0.001-0.59-0.004-0.885v0.045-649.789c0.003-0.249 0.004-0.545 0.004-0.839 0-38.315-22.376-71.404-54.773-86.914l-0.58-0.25zM899.438 541.888c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-213.644c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618zM132.864 174.375c110.92-53.263 240.582-86.42 377.448-91.277l1.688-0.048c138.75 5.006 268.584 38.151 385.604 93.859l-5.915-2.535c4.63 2.445 7.734 7.224 7.748 12.728v48.156c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-49.813c0.619-4.997 3.823-9.121 8.213-11.035l0.090-0.035zM891.136 849.625c-110.92 53.263-240.582 86.42-377.448 91.277l-1.688 0.048c-138.75-5.006-268.584-38.151-385.604-93.859l5.915 2.535c-4.63-2.445-7.734-7.224-7.748-12.728v-204.238c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618v204.235c0 0.014 0 0.031 0 0.048 0 5.64-3.374 10.492-8.214 12.647l-0.088 0.035z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["database"]},"attrs":[{}],"properties":{"order":294,"id":228,"name":"database","prevSize":80,"code":59875},"setIdx":0,"setId":1,"iconIdx":33},{"icon":{"paths":["M984.598 262.573h-157.533l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-45.159 180.113h-338.696l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-47.26 180.113h-179.062c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-85.593 341.321h-176.962c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h338.696l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h181.163c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0h-157.533l85.593-341.321h176.962c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0zM722.044 341.339l-85.593 341.321h-334.495l85.593-341.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["hashtag"]},"attrs":[{}],"properties":{"order":293,"id":227,"name":"hashtag","prevSize":80,"code":59874},"setIdx":0,"setId":1,"iconIdx":34},{"icon":{"paths":["M731.351 0.181h-438.702c-88.839 0-160.857 72.018-160.857 160.857v0 818.91c-0.001 0.096-0.001 0.21-0.001 0.324 0 24.229 19.642 43.87 43.87 43.87 9.418 0 18.143-2.968 25.291-8.020l-0.137 0.092 311.186-217.011 311.186 217.011c6.914 4.763 15.47 7.606 24.689 7.606 0.163 0 0.325-0.001 0.488-0.003h-0.025c7.45-0.092 14.477-1.807 20.773-4.808l-0.3 0.129c13.96-7.76 23.279-22.374 23.398-39.173v-818.927c0-88.839-72.018-160.857-160.857-160.857v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bookmark-fill"]},"attrs":[{}],"properties":{"order":290,"id":226,"name":"bookmark-fill","prevSize":80,"code":59871},"setIdx":0,"setId":1,"iconIdx":35},{"icon":{"paths":["M1004.095 24.725c-7.747-14.706-22.885-24.586-40.34-24.695h-903.493c-17.471 0.11-32.608 9.989-40.236 24.445l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.173 0 10.136 3.43 19.471 9.191 26.908l-0.075-0.1 322.241 440.294v466.797c0.335 24.813 20.361 44.839 45.141 45.174h240.96c24.813-0.335 44.839-20.361 45.174-45.141v-466.83l322.241-440.294c5.688-7.337 9.117-16.671 9.117-26.808 0-7.369-1.813-14.314-5.016-20.414l0.116 0.241z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["filter-fill"]},"attrs":[{}],"properties":{"order":289,"id":225,"name":"filter-fill","prevSize":80,"code":59872},"setIdx":0,"setId":1,"iconIdx":36},{"icon":{"paths":["M940.27 142.985v0c-52.342-52.898-124.95-85.655-205.208-85.655-0.25 0-0.502 0-0.752 0.001h0.039c-0.212 0-0.462-0.001-0.714-0.001-80.258 0-152.867 32.757-205.183 85.63l-0.025 0.025-16.427 17.013-16.427-16.427c-52.551-52.546-125.148-85.046-205.334-85.046s-152.783 32.5-205.336 85.047v0c-51.85 52.868-83.852 125.364-83.852 205.334s32.002 152.468 83.898 205.382l-0.045-0.047 397.176 398.35c7.96 7.95 18.953 12.869 31.093 12.869s23.133-4.917 31.094-12.869v0l397.176-398.35c51.673-52.835 83.555-125.21 83.555-205.032 0-80.411-32.354-153.263-84.754-206.251l0.026 0.026z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["heart-fill"]},"attrs":[{}],"properties":{"order":288,"id":224,"name":"heart-fill","prevSize":80,"code":59873},"setIdx":0,"setId":1,"iconIdx":37},{"icon":{"paths":["M944.92 71.496c-6.851-4.781-15.351-7.639-24.52-7.639-5.664 0-11.074 1.091-16.029 3.074l0.291-0.103c-63.404 28.272-136.947 48.827-213.986 57.993l-3.642 0.353c-50.961-13.852-95.595-33.813-136.214-59.541l2.021 1.195c-50.241-31.546-108.991-55.111-171.832-67.168l-3.203-0.511c-75.265-7.001-254.385 51.927-291.724 64.179-17.436 6.017-29.741 22.283-29.756 41.423v874.010c0 24.167 19.592 43.759 43.759 43.759s43.759-19.592 43.759-43.759v0-341.902c65.742-24.141 142.134-41.68 221.425-49.3l3.786-0.294c53.070 13.251 99.74 33.289 142.139 59.564l-2.111-1.218c47.311 29.399 102.324 52.182 160.994 65.266l3.539 0.663h13.419c91.412-12.072 174.279-35.196 251.871-68.295l-6.238 2.366c16.429-6.638 27.841-22.387 28.006-40.821v-497.12c0.056-0.823 0.088-1.785 0.088-2.753 0-13.438-6.14-25.443-15.767-33.361l-0.075-0.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag-fill"]},"attrs":[{}],"properties":{"order":287,"id":223,"name":"flag-fill","prevSize":80,"code":59870},"setIdx":0,"setId":1,"iconIdx":38},{"icon":{"paths":["M512 1023.989c-282.763 0-511.989-229.226-511.989-511.989s229.226-511.989 511.989-511.989c282.763 0 511.989 229.226 511.989 511.989v0c0 282.763-229.226 511.989-511.989 511.989v0zM512 85.343c-235.636 0-426.657 191.021-426.657 426.657s191.021 426.657 426.657 426.657c235.636 0 426.657-191.021 426.657-426.657v0c0-235.636-191.021-426.657-426.657-426.657v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle"]},"attrs":[{}],"properties":{"order":286,"id":222,"name":"circle","prevSize":80,"code":59868},"setIdx":0,"setId":1,"iconIdx":39},{"icon":{"paths":["M1023.989 512c0 282.763-229.226 511.989-511.989 511.989s-511.989-229.226-511.989-511.989c0-282.763 229.226-511.989 511.989-511.989s511.989 229.226 511.989 511.989z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle-fill"]},"attrs":[{}],"properties":{"order":285,"id":221,"name":"circle-fill","prevSize":80,"code":59869},"setIdx":0,"setId":1,"iconIdx":40},{"icon":{"paths":["M462.875 1024.834c-1.947 0.372-4.188 0.585-6.478 0.585s-4.531-0.213-6.702-0.62l0.224 0.035c-18.586-5.739-31.857-22.766-31.857-42.893 0-0.292 0.003-0.585 0.009-0.876l-0.001 0.044v-5.938l48.584-342.789h-234.284c-0.011 0-0.024 0-0.038 0-16.55 0-30.926-9.309-38.177-22.979l-0.114-0.234c-3.963-6.646-6.305-14.655-6.305-23.213s2.342-16.567 6.421-23.424l-0.116 0.211 107.965-188.4 221.328-351.967c7.563-12.608 21.158-20.914 36.694-20.914 4.633 0 9.094 0.739 13.272 2.105l-0.301-0.085c18.586 5.739 31.857 22.766 31.857 42.893 0 0.292-0.003 0.585-0.009 0.876l0.001-0.044v5.938l-48.584 342.789h234.824c0.011 0 0.024 0 0.038 0 16.55 0 30.926 9.309 38.177 22.979l0.114 0.234c3.963 6.646 6.305 14.655 6.305 23.213s-2.342 16.567-6.421 23.424l0.116-0.211-107.965 188.4-221.328 351.967c-7.762 11.483-20.733 18.931-35.445 18.931-0.634 0-1.265-0.014-1.893-0.042l0.090 0.003zM434.265 959.516v0zM292.291 549.248h215.931c24.812 0.302 44.809 20.488 44.809 45.342 0 0.191-0.001 0.382-0.004 0.572v-0.029 5.938l-31.849 223.488 134.957-215.931 77.735-133.876h-215.931c-24.812-0.302-44.809-20.488-44.809-45.342 0-0.191 0.001-0.382 0.004-0.572v0.029-5.938l31.849-223.488-134.957 215.931zM589.735 63.945v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bolt"]},"attrs":[{}],"properties":{"order":284,"id":220,"name":"bolt","prevSize":80,"code":59867},"setIdx":0,"setId":1,"iconIdx":41},{"icon":{"paths":["M876.353 155.475c-91.36-90.984-217.374-147.233-356.525-147.233s-265.163 56.249-356.542 147.25l-72.854 72.854v-175.251c0-24.945-20.222-45.168-45.168-45.168s-45.168 20.222-45.168 45.168v0 285.461c0 0.001 0 0.003 0 0.004 0 25.067 20.15 45.426 45.135 45.766h286.096c24.945 0 45.168-20.222 45.168-45.168s-20.222-45.168-45.168-45.168v0h-180.671l76.485-74.678c74.952-74.805 178.417-121.062 292.688-121.062s217.736 46.257 292.695 121.070l-0.007-0.007c372.786 402.897-180.671 958.161-585.375 585.375-8.171-8.161-19.456-13.21-31.918-13.21s-23.747 5.048-31.92 13.21v0c-8.309 8.103-13.464 19.409-13.464 31.918s5.155 23.815 13.454 31.91l0.010 0.008c91.243 91.243 217.293 147.678 356.525 147.678 278.462 0 504.201-225.739 504.201-504.201 0-139.231-56.434-265.282-147.678-356.525v0z","M512 256.049c-24.81 0.335-44.833 20.358-45.168 45.135v210.815c0.011 12.468 5.073 23.753 13.248 31.918v0l152.367 148.753c8.084 8.182 19.304 13.25 31.708 13.25 0.073 0 0.148 0 0.222 0h-0.011c21.988-3.292 38.658-22.048 38.658-44.696 0-10.97-3.91-21.026-10.413-28.851l0.059 0.073-137.31-137.31v-193.921c-0.294-24.201-19.326-43.864-43.245-45.162l-0.116-0.006z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["history"]},"attrs":[{},{}],"properties":{"order":283,"id":219,"name":"history","prevSize":80,"code":59866},"setIdx":0,"setId":1,"iconIdx":42},{"icon":{"paths":["M1022.811 776.474s0-4.096 0-6.436v-516.077c-0.023-7.052-1.751-13.696-4.793-19.546l0.112 0.237c-4.397-9.329-11.736-16.668-20.801-20.952l-0.263-0.112-468.096-209.474c-5.326-2.478-11.563-3.924-18.139-3.924s-12.811 1.445-18.411 4.037l0.272-0.112-468.096 209.474c-14.982 7.661-25.187 22.762-25.744 40.299l-0.001 0.074v516.077c0.941 17.495 11.005 32.44 25.487 40.246l0.258 0.128 468.096 209.474c5.306 2.591 11.546 4.105 18.139 4.105s12.832-1.514 18.389-4.214l-0.251 0.11 468.096-209.474c13.538-6.306 23.285-18.763 25.711-33.677l0.034-0.259zM86.616 321.251l380.328 170.856v420.117l-380.328-170.27zM554.714 492.105l380.328-170.856v420.702l-380.328 170.27zM512 91.883l361.019 162.079-361.019 161.493-361.019-161.493z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["box"]},"attrs":[{}],"properties":{"order":282,"id":218,"name":"box","prevSize":80,"code":59865},"setIdx":0,"setId":1,"iconIdx":43},{"icon":{"paths":["M512 0.027c-282.755 0-511.973 229.218-511.973 511.973v0c-0.022 1.75-0.034 3.816-0.034 5.886 0 279.524 226.599 506.123 506.123 506.123 2.069 0 4.135-0.012 6.199-0.037l-0.313 0.003c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0c-1.399 0.016-3.053 0.026-4.708 0.026-231.698 0-419.526-187.828-419.526-419.526 0-1.655 0.010-3.308 0.029-4.959l-0.003 0.251c0.333-234.15 190.058-423.874 424.174-424.206h0.032c281.439 0 424.206 142.768 424.206 424.206v80.745c0.187 2.116 0.292 4.578 0.292 7.064 0 47.18-38.247 85.426-85.426 85.426s-85.426-38.247-85.426-85.426c0-2.486 0.106-4.948 0.314-7.381l-0.022 0.317v-292.556c0-24.236-19.647-43.883-43.883-43.883s-43.883 19.647-43.883 43.883v0 19.894c-44.051-38.526-102.099-62.022-165.637-62.022-0.188 0-0.377 0-0.565 0h0.029c-140.246 0-253.938 113.692-253.938 253.938s113.692 253.938 253.938 253.938v0c75.633-0.27 143.364-33.87 189.31-86.869l0.266-0.313c30.329 52.256 86.021 86.836 149.789 86.836 95.329 0 172.609-77.279 172.609-172.609 0-0.084 0-0.169 0-0.252v0.014-80.745c0-330.003-181.969-511.973-511.973-511.973zM512 678.171c-91.774 0-166.171-74.397-166.171-166.171s74.397-166.171 166.171-166.171c91.774 0 166.171 74.397 166.171 166.171v0c-0.332 91.641-74.532 165.841-166.14 166.171h-0.032z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["at"]},"attrs":[{}],"properties":{"order":281,"id":217,"name":"at","prevSize":80,"code":59864},"setIdx":0,"setId":1,"iconIdx":44},{"icon":{"paths":["M273.927 128.663c-27.857 0-50.44 22.582-50.44 50.44s22.582 50.44 50.44 50.44v0h449.244l-579.714 579.714c-9.89 9.234-16.053 22.349-16.053 36.904 0 27.857 22.582 50.44 50.44 50.44 14.555 0 27.668-6.164 36.874-16.025l0.028-0.030 579.714-579.714v449.244c0 27.857 22.582 50.44 50.44 50.44s50.44-22.582 50.44-50.44v0-570.97c-0.038-7.053-1.518-13.753-4.16-19.829l0.126 0.327c-7.47-17.225-23.668-29.376-42.86-30.924l-0.182-0.011z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-right"]},"attrs":[{}],"properties":{"order":309,"id":216,"name":"arrow-up-right","prevSize":80,"code":59860},"setIdx":0,"setId":1,"iconIdx":45},{"icon":{"paths":["M128.665 750.071c0 27.856 22.582 50.438 50.438 50.438s50.438-22.582 50.438-50.438v0-449.241l579.71 579.71c9.233 9.89 22.348 16.053 36.903 16.053 27.856 0 50.438-22.582 50.438-50.438 0-14.555-6.164-27.668-16.025-36.874l-0.030-0.028-579.71-579.71h449.241c27.856 0 50.438-22.582 50.438-50.438s-22.582-50.438-50.438-50.438v0h-570.968c-7.053 0.038-13.753 1.518-19.829 4.16l0.327-0.126c-18.183 7.953-30.702 25.689-30.935 46.373v0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-left"]},"attrs":[{}],"properties":{"order":278,"id":215,"name":"arrow-up-left","prevSize":80,"code":59861},"setIdx":0,"setId":1,"iconIdx":46},{"icon":{"paths":["M749.048 893.688c27.738 0 50.223-22.484 50.223-50.223s-22.484-50.223-50.223-50.223v0h-447.31l577.218-577.218c9.846-9.194 15.985-22.253 15.985-36.744 0-27.738-22.484-50.223-50.223-50.223-14.491 0-27.549 6.138-36.714 15.954l-0.028 0.030-577.218 577.218v-447.31c0-27.738-22.484-50.223-50.223-50.223s-50.223 22.484-50.223 50.223v0 571.861c0.038 7.024 1.513 13.694 4.144 19.745l-0.126-0.325c7.919 18.102 25.578 30.57 46.174 30.801h0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-left"]},"attrs":[{}],"properties":{"order":279,"id":214,"name":"arrow-down-left","prevSize":80,"code":59862},"setIdx":0,"setId":1,"iconIdx":47},{"icon":{"paths":["M896.598 273.145c0-27.949-22.657-50.606-50.606-50.606s-50.606 22.657-50.606 50.606v0 450.722l-581.62-581.62c-9.013-8.416-21.152-13.58-34.498-13.58-27.949 0-50.606 22.657-50.606 50.606 0 13.348 5.166 25.486 13.61 34.529l-0.028-0.030 581.62 581.62h-450.722c-27.949 0-50.606 22.657-50.606 50.606s22.657 50.606 50.606 50.606v0h576.221c7.076-0.039 13.797-1.525 19.894-4.175l-0.328 0.126c15.905-8.356 26.772-24.403 27.661-43.066l0.006-0.114z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-right"]},"attrs":[{}],"properties":{"order":280,"id":213,"name":"arrow-down-right","prevSize":80,"code":59863},"setIdx":0,"setId":1,"iconIdx":48},{"icon":{"paths":["M512 0.011c-282.764 0-511.989 229.225-511.989 511.989s229.225 511.989 511.989 511.989c282.764 0 511.989-229.225 511.989-511.989v0c0-282.764-229.225-511.989-511.989-511.989v0zM763.515 350.723l-83.838 396.152c-6.4 28.159-23.040 34.559-46.72 21.76l-127.997-94.719-63.999 59.519c-5.961 7.732-15.19 12.694-25.582 12.799h-0.016l8.959-127.997 236.796-214.395c10.879-8.959 0-14.080-15.36-5.119l-290.555 182.396-127.997-39.679c-27.52-8.32-28.159-27.52 5.76-40.319l493.43-191.996c24.319-7.039 44.8 7.039 37.12 41.599z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["telegram"]},"attrs":[{}],"properties":{"order":276,"id":212,"name":"telegram","prevSize":80,"code":59859},"setIdx":0,"setId":1,"iconIdx":49},{"icon":{"paths":["M512 1023.991c-282.764 0-511.991-229.227-511.991-511.991s229.227-511.991 511.991-511.991c282.764 0 511.991 229.227 511.991 511.991v0c0 282.764-229.227 511.991-511.991 511.991v0zM512 85.341c-235.637 0-426.659 191.022-426.659 426.659s191.022 426.659 426.659 426.659c235.637 0 426.659-191.022 426.659-426.659v0c0-235.637-191.022-426.659-426.659-426.659v0z","M369.78 284.448h284.439c47.127 0 85.332 38.205 85.332 85.332v284.439c0 47.127-38.205 85.332-85.332 85.332h-284.439c-47.127 0-85.332-38.205-85.332-85.332v-284.439c0-47.127 38.205-85.332 85.332-85.332z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["stop-circle"]},"attrs":[{},{}],"properties":{"order":275,"id":211,"name":"stop-circle","prevSize":80,"code":59858},"setIdx":0,"setId":1,"iconIdx":50},{"icon":{"paths":["M842.308 1023.979h-660.618c-100.333 0-181.669-81.336-181.669-181.669v0-660.618c0-100.333 81.336-181.669 181.669-181.669v0h660.618c100.333 0 181.669 81.336 181.669 181.669v0 660.618c0 100.333-81.336 181.669-181.669 181.669v0zM181.692 99.114c-45.606 0-82.577 36.971-82.577 82.577v0 660.618c0 45.606 36.971 82.577 82.577 82.577v0h660.618c45.606 0 82.577-36.971 82.577-82.577v0-660.618c0-45.606-36.971-82.577-82.577-82.577v0z"],"attrs":[{}],"grid":16,"tags":["stop"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":274,"id":210,"name":"stop","prevSize":80,"code":59857},"setIdx":0,"setId":1,"iconIdx":51},{"icon":{"paths":["M870.378 148.502c-91.041-91.707-217.17-148.474-356.557-148.474-0.64 0-1.281 0.001-1.92 0.003h0.099c-280.418 0.282-507.634 227.671-507.634 508.129 0 93.024 24.997 180.211 68.642 255.208l-1.302-2.422-71.676 263.024 268.784-70.395c69.896 39.602 153.381 63.238 242.321 63.995l0.223 0.001c0.006 0 0.012 0 0.019 0 281.177 0 509.412-226.669 511.947-507.248l0.001-0.241c-0.978-141.618-59.303-269.426-152.883-361.512l-0.067-0.066zM512 929.894c-0.081 0-0.178 0-0.274 0-79.234 0-153.358-21.884-216.656-59.938l1.903 1.060-15.359-9.599-159.35 42.237 42.237-155.511-10.24-16c-39.739-63.209-63.313-140.066-63.313-222.43 0-233.27 189.104-422.374 422.374-422.374 115.76 0 220.644 46.569 296.938 121.995l-0.040-0.039c77.623 75.954 126.276 181.243 127.989 297.901l0.003 0.321c-2.173 233.734-192.155 422.374-426.196 422.374-0.006 0-0.012 0-0.018 0h0.001zM743.026 613.754c-12.799-6.4-74.875-37.118-86.395-40.958s-20.478-6.4-28.798 6.4c-13.451 18.342-26.668 34.402-40.702 49.701l0.384-0.424c-7.039 8.959-14.719 9.599-27.519 0-73.887-29.731-133.426-82.24-171.269-148.708l-0.882-1.681c-13.439-22.398 12.799-21.119 37.118-69.116 1.722-3.252 2.733-7.107 2.733-11.2s-1.011-7.948-2.796-11.332l0.064 0.132c0-6.4-28.798-69.116-39.038-94.074s-20.478-21.119-28.798-21.759h-24.958c-13.577 0.214-25.68 6.352-33.865 15.937l-0.052 0.063c-26.196 25.492-42.447 61.088-42.447 100.48 0 2.698 0.076 5.38 0.226 8.041l-0.016-0.369c4.318 50.122 23.15 95.162 52.219 131.69l-0.382-0.498c54.892 81.39 128.004 146.508 213.743 190.496l3.204 1.492c35.584 21.122 78.444 33.605 124.218 33.605 9.899 0 19.661-0.583 29.254-1.719l-1.162 0.112c36.419-7.408 66.636-29.449 84.793-59.581l0.322-0.576c5.793-12.526 9.172-27.184 9.172-42.632 0-6.192-0.543-12.256-1.582-18.147l0.091 0.624c-5.76-6.4-14.080-9.599-26.878-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["whatsapp"]},"attrs":[{}],"properties":{"order":273,"id":209,"name":"whatsapp","prevSize":80,"code":59856},"setIdx":0,"setId":1,"iconIdx":52},{"icon":{"paths":["M365.722 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M877.694 936.204h-29.255v-892.294c-0.325-24.104-19.779-43.558-43.852-43.883h-585.142c-24.104 0.325-43.558 19.779-43.883 43.852v892.325h-29.255c-24.236 0-43.883 19.647-43.883 43.883s19.647 43.883 43.883 43.883v0h731.387c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0zM760.671 936.204h-307.183v-131.65c0-16.157-13.098-29.255-29.255-29.255v0h-58.511c-16.157 0-29.255 13.098-29.255 29.255v0 131.65h-73.138v-848.41h497.344z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["building"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":272,"id":208,"name":"building","prevSize":80,"code":59855},"setIdx":0,"setId":1,"iconIdx":53},{"icon":{"paths":["M561.547 0.023v462.433h462.433v-462.433zM924.887 363.362h-264.247v-264.247h264.247z","M0.023 462.454h462.433v-462.433h-462.433zM99.116 99.116h264.247v264.247h-264.247z","M0.023 1023.98h462.433v-462.433h-462.433zM99.116 660.64h264.247v264.247h-264.247z","M561.547 561.547h115.609v115.609h-115.609v-115.609z","M792.764 561.547h115.609v115.609h-115.609v-115.609z","M677.156 677.156h115.609v115.609h-115.609v-115.609z","M908.371 677.156h115.609v115.609h-115.609v-115.609z","M561.547 792.764h115.609v115.609h-115.609v-115.609z","M792.764 792.764h115.609v115.609h-115.609v-115.609z","M677.156 908.371h115.609v115.609h-115.609v-115.609z","M908.371 908.371h115.609v115.609h-115.609v-115.609z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["qrcode"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":271,"id":207,"name":"qrcode","prevSize":80,"code":59854},"setIdx":0,"setId":1,"iconIdx":54},{"icon":{"paths":["M966.767 407.505l-107.415-291.887c-13.941-40.405-51.44-68.998-95.682-69.469h-502.102c-43.76 0.101-81.048 27.7-95.509 66.429l-0.231 0.706-107.415 291.887c-34.342 16.711-57.732 51.084-58.377 90.984l-0.001 0.085v262.699c-0.012 0.59-0.019 1.285-0.019 1.983 0 35.143 17.95 66.093 45.181 84.184l0.372 0.233s0 3.503 0 3.503v116.754c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-102.161h583.775v102.161c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-116.754s0 0 0-3.503c26.927-18.415 44.367-48.984 44.367-83.626 0-0.155 0-0.308-0.001-0.462v0.023-262.699c-0.415-39.752-23.34-74.055-56.62-90.799l-0.59-0.27zM935.826 761.273c0 8.060-6.535 14.595-14.595 14.595v0h-817.284c-8.060 0-14.595-6.535-14.595-14.595v0-262.699c0-8.060 6.535-14.595 14.595-14.595v0h817.284c8.060 0 14.595 6.535 14.595 14.595v0zM248.14 143.055c2.145-5.454 7.332-9.259 13.417-9.341h502.055c6.095 0.082 11.281 3.887 13.392 9.241l0.034 0.099 81.728 224.169h-692.357z","M366.646 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z","M833.667 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["car"]},"attrs":[{},{},{}],"properties":{"order":270,"id":206,"name":"car","prevSize":80,"code":59853},"setIdx":0,"setId":1,"iconIdx":55},{"icon":{"paths":["M512 249.365c-145.049 0-262.635 117.585-262.635 262.635s117.585 262.635 262.635 262.635c145.049 0 262.635-117.585 262.635-262.635v0c0-0.191 0.002-0.416 0.002-0.641 0-144.695-117.299-261.995-261.995-261.995-0.225 0-0.45 0-0.676 0.002h0.035zM512 683.033c-94.459 0-171.033-76.575-171.033-171.033s76.575-171.033 171.033-171.033c94.459 0 171.033 76.575 171.033 171.033v0c0 94.459-76.575 171.033-171.033 171.033v0zM847.020 238.475c0 35.378-28.68 64.058-64.058 64.058s-64.058-28.68-64.058-64.058c0-35.378 28.68-64.058 64.058-64.058v0c35.378 0 64.058 28.68 64.058 64.058v0zM1020.615 302.532c0.053-2.1 0.083-4.576 0.083-7.056 0-80.466-31.5-153.574-82.841-207.667l0.125 0.132c-54.19-52.344-128.080-84.599-209.504-84.599-1.79 0-3.575 0.015-5.357 0.047l0.267-0.003c-83.275-3.843-339.503-3.843-422.778 0-1.952-0.045-4.253-0.071-6.559-0.071-80.622 0-153.889 31.489-208.175 82.838l0.141-0.134c-51.217 53.961-82.717 127.069-82.717 207.535 0 2.482 0.030 4.956 0.090 7.423l-0.008-0.366c-3.843 83.275-3.843 339.503 0 422.778-0.053 2.1-0.083 4.576-0.083 7.056 0 80.466 31.5 153.574 82.841 207.667l-0.125-0.132c54.143 51.217 127.412 82.705 208.032 82.705 2.306 0 4.608-0.026 6.902-0.077l-0.342 0.006c84.556 5.124 338.223 5.124 422.778 0 2.1 0.053 4.576 0.083 7.056 0.083 80.466 0 153.574-31.5 207.667-82.841l-0.132 0.125c51.217-53.961 82.717-127.069 82.717-207.535 0-2.482-0.030-4.956-0.090-7.423l0.008 0.366c3.843-83.275 3.843-339.503 0-422.778zM911.718 814.991c-17.965 44.669-52.697 79.402-96.206 96.954l-1.162 0.414c-68.692 14.541-147.62 22.867-228.491 22.867-25.987 0-51.772-0.86-77.33-2.552l3.471 0.185c-22.061 1.512-47.813 2.374-73.767 2.374-80.681 0-159.416-8.328-235.394-24.172l7.451 1.3c-44.669-17.965-79.402-52.697-96.954-96.206l-0.414-1.162c-26.904-67.901-21.139-228.044-21.139-302.351s-5.765-235.091 21.139-302.351c17.48-45.144 52.371-80.244 96.218-97.607l1.149-0.401c68.527-14.544 147.262-22.873 227.943-22.873 25.954 0 51.706 0.862 77.231 2.558l-3.464-0.185c22.086-1.509 47.872-2.368 73.859-2.368 80.871 0 159.799 8.326 235.971 24.167l-7.48-1.3c44.669 17.965 79.402 52.697 96.954 96.206l0.414 1.162c26.904 67.901 20.498 228.044 20.498 302.351s6.406 235.091-20.498 302.351z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["instagram"]},"attrs":[{}],"properties":{"order":268,"id":205,"name":"instagram","prevSize":80,"code":59852},"setIdx":0,"setId":1,"iconIdx":56},{"icon":{"paths":["M942.030 0.060h-854.301c-1.171-0.058-2.544-0.091-3.924-0.091-44.98 0-81.687 35.426-83.74 79.897l-0.007 0.184v856.22c1.381 47.853 39.817 86.288 87.54 87.666l0.129 0.003h854.301c45.688-2.098 81.934-39.649 81.934-85.666 0-0.705-0.009-1.408-0.025-2.109l0.001 0.103v-856.22c0.007-0.4 0.012-0.873 0.012-1.345 0-43.471-35.24-78.711-78.711-78.711-1.129 0-2.253 0.024-3.37 0.070l0.159-0.006zM320.022 853.72h-149.102v-456.266h149.102zM248.991 328.342v0c-0.784 0.028-1.705 0.046-2.629 0.046-41.704 0-75.512-33.808-75.512-75.512 0-1.141 0.025-2.277 0.075-3.406l-0.006 0.16c-0.046-0.985-0.072-2.14-0.072-3.301 0-41.704 33.808-75.512 75.512-75.512 1.375 0 2.743 0.037 4.101 0.109l-0.189-0.007c0.784-0.028 1.705-0.046 2.629-0.046 41.704 0 75.512 33.808 75.512 75.512 0 1.141-0.025 2.277-0.075 3.406l0.006-0.16c0.046 0.985 0.072 2.14 0.072 3.301 0 41.704-33.808 75.512-75.512 75.512-1.375 0-2.743-0.037-4.101-0.109l0.189 0.007zM853.72 853.72h-149.743v-249.571c0-59.513-21.118-100.469-74.231-100.469-34.5 0.309-63.758 22.412-74.697 53.194l-0.174 0.559c-3.36 9.138-5.302 19.69-5.302 30.697 0 2.034 0.066 4.051 0.196 6.052l-0.013-0.271v259.81h-147.182v-456.266h147.182v63.993c25.685-46.508 74.423-77.484 130.396-77.484 1.402 0 2.8 0.019 4.194 0.058l-0.205-0.004c96.629 0 169.581 63.993 169.581 200.297z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["linkedin"]},"attrs":[{}],"properties":{"order":266,"id":204,"name":"linkedin","prevSize":80,"code":59851},"setIdx":0,"setId":1,"iconIdx":57},{"icon":{"paths":["M998.721 25.279c-15.31-15.206-36.405-24.601-59.695-24.601-9.365 0-18.373 1.518-26.795 4.325l0.597-0.173-854.831 285.138c-34.333 11.124-58.722 42.818-58.722 80.21 0 32.269 18.165 60.295 44.829 74.41l0.459 0.221 354.67 175.29 175.29 355.84c14.186 27.601 42.466 46.16 75.080 46.16 0.106 0 0.207 0 0.309 0h5.827c34.71-2.632 63.306-26.111 73.46-57.839l0.162-0.591 289.228-852.494c2.939-8.121 4.642-17.492 4.642-27.261 0-22.937-9.373-43.685-24.499-58.622l-0.010-0.010zM94.226 370.599l746.151-248.912-414.27 414.27zM653.984 929.774l-165.94-331.884 414.27-414.27z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["send"]},"attrs":[{}],"properties":{"order":263,"id":203,"name":"send","prevSize":80,"code":59850},"setIdx":0,"setId":1,"iconIdx":58},{"icon":{"paths":["M215.050 647.037c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517c0-59.379 48.138-107.517 107.517-107.517v0h107.517zM269.445 647.037c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0zM376.963 215.050c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517c59.379 0 107.517 48.138 107.517 107.517v0 107.517zM376.963 269.445c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517h-269.434c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517v0zM808.95 376.963c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517c0 59.379-48.138 107.517-107.517 107.517v0h-107.517v-107.517zM754.555 376.963c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0-269.434c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434zM647.037 808.95c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517c-59.379 0-107.517-48.138-107.517-107.517v0-107.517zM647.037 754.555c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517h269.434c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["slack"]},"attrs":[{}],"properties":{"order":262,"id":202,"name":"slack","prevSize":80,"code":59849},"setIdx":0,"setId":1,"iconIdx":59},{"icon":{"paths":["M517.309 1022.789c-22.691-0.029-45.007-1.526-66.885-4.41l2.595 0.278c-233.58-31.279-416.401-214.099-447.387-445.014l-0.291-2.662c-2.859-20.354-4.49-43.869-4.49-67.761 0-246.048 172.971-451.698 403.948-501.981l3.392-0.62c4.828-1.146 10.369-1.803 16.065-1.803 24.13 0 45.508 11.78 58.7 29.904l0.144 0.209c8.716 12.084 13.937 27.19 13.937 43.519 0 14.447-4.091 27.937-11.173 39.378l0.187-0.321c-26.726 45.102-42.523 99.41-42.523 157.408 0 16.683 1.308 33.056 3.823 49.030l-0.228-1.77c21.13 133.311 125.031 237.216 256.587 258.114l1.758 0.228c14.358 2.386 30.902 3.749 47.766 3.749 57.921 0 112.086-16.086 158.27-44.036l-1.366 0.768c10.914-6.566 24.086-10.453 38.167-10.453 16.715 0 32.146 5.473 44.609 14.724l-0.202-0.143c18.334 13.090 30.142 34.293 30.142 58.257 0 5.696-0.669 11.235-1.926 16.546l0.097-0.484c-49.878 235.319-255.888 409.342-502.54 409.342-0.413 0-0.822 0-1.235-0.001h0.064zM394.034 99.12c-178.936 53.807-307.056 217.078-307.056 410.275 0 236.171 191.454 427.623 427.623 427.623 193.197 0 356.468-128.116 409.491-304.027l0.784-3.028c-50.869 25.361-110.807 40.205-174.212 40.205-197.518 0-361.392-144.047-392.301-332.818l-0.31-2.3c-2.962-18.244-4.655-39.278-4.655-60.703 0-63.794 15.005-124.084 41.678-177.535l-1.042 2.307z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["moon"]},"attrs":[{}],"properties":{"order":261,"id":201,"name":"moon","prevSize":80,"code":59847},"setIdx":0,"setId":1,"iconIdx":60},{"icon":{"paths":["M512 806.395c-162.589 0-294.395-131.804-294.395-294.395s131.804-294.395 294.395-294.395c162.589 0 294.395 131.804 294.395 294.395v0c-0.29 162.471-131.922 294.103-294.366 294.395h-0.028zM512 294.404c-120.176 0-217.596 97.422-217.596 217.596s97.422 217.596 217.596 217.596c120.176 0 217.596-97.422 217.596-217.596v0c-0.29-120.058-97.538-217.306-217.567-217.596h-0.028z","M512 153.605c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M512 1023.99c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M985.591 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M115.206 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M230.404 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043-55.808-51.2c-7.14-7.14-11.557-17.006-11.557-27.903 0-21.794 17.667-39.461 39.461-39.461 10.897 0 20.763 4.417 27.903 11.557v0l51.2 55.808c6.068 6.763 9.778 15.747 9.778 25.599s-3.711 18.837-9.81 25.635l0.031-0.035c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M847.867 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003-52.736-55.808c-2.366-4.842-3.748-10.533-3.748-16.548 0-21.206 17.191-38.399 38.399-38.399 6.016 0 11.709 1.383 16.778 3.85l-0.227-0.099 55.808 51.2c6.939 6.946 11.231 16.541 11.231 27.135s-4.291 20.189-11.231 27.136v0c-6.701 7.568-16.317 12.423-27.072 12.798l-0.065 0.001z","M793.596 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043c-6.068-6.763-9.778-15.747-9.778-25.599s3.711-18.837 9.81-25.635l-0.031 0.035 51.2-55.808c7.14-7.14 17.006-11.557 27.903-11.557 21.794 0 39.461 17.667 39.461 39.461 0 10.897-4.417 20.763-11.557 27.903v0l-55.808 51.2c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M176.133 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003c-6.939-6.946-11.231-16.541-11.231-27.135s4.291-20.189 11.231-27.136v0l55.808-52.736c4.842-2.366 10.533-3.748 16.548-3.748 21.206 0 38.399 17.191 38.399 38.399 0 6.016-1.383 11.709-3.85 16.778l0.099-0.227-51.2 55.808c-6.876 6.978-16.43 11.301-26.992 11.301-0.591 0-1.178-0.014-1.761-0.042l0.082 0.003z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sun"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":260,"id":200,"name":"sun","prevSize":80,"code":59848},"setIdx":0,"setId":1,"iconIdx":61},{"icon":{"paths":["M1002.843 264.979c-11.885-44.735-46.258-79.32-89.974-91.303l-0.899-0.211c-108.991-13.585-235.136-21.338-363.093-21.338-12.967 0-25.913 0.079-38.842 0.238l1.964-0.020c-10.965-0.138-23.912-0.217-36.878-0.217-127.957 0-254.101 7.753-377.993 22.812l14.9-1.475c-44.618 12.192-78.989 46.777-90.67 90.619l-0.202 0.895c-13.45 71.849-21.144 154.515-21.144 238.976 0 2.83 0.010 5.654 0.025 8.48l-0.001-0.435c-0.015 2.515-0.025 5.487-0.025 8.463 0 84.76 7.694 167.728 22.419 248.235l-1.273-8.397c12.473 43.944 46.687 77.735 89.978 89.387l0.896 0.205c108.991 13.585 235.136 21.338 363.093 21.338 12.967 0 25.913-0.079 38.842-0.238l-1.964 0.020c10.965 0.138 23.912 0.217 36.878 0.217 127.957 0 254.101-7.753 377.993-22.812l-14.9 1.475c44.184-11.858 78.4-45.649 90.654-88.691l0.222-0.902c13.451-72.109 21.145-155.075 21.145-239.836 0-2.976-0.010-5.952-0.030-8.921l0.002 0.458c0.014-2.39 0.024-5.216 0.024-8.045 0-84.461-7.694-167.123-22.415-247.326l1.272 8.351zM407.049 664.948v-304.617l268.139 151.669-268.139 152.31z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["youtube"]},"attrs":[{}],"properties":{"order":245,"id":199,"name":"youtube","prevSize":80,"code":59845},"setIdx":0,"setId":1,"iconIdx":62},{"icon":{"paths":["M921.584 0.020h-819.169c-56.554 0-102.397 45.843-102.397 102.397v0 819.169c0 56.554 45.843 102.397 102.397 102.397h819.169c56.554 0 102.397-45.843 102.397-102.397v0-819.169c0-56.554-45.843-102.397-102.397-102.397v0zM861.428 339.846q-5.119 108.157-150.396 296.31c-100.477 127.996-186.234 195.834-255.991 195.834-43.518 0-79.358-39.678-109.437-119.677-58.239-213.112-83.198-337.908-127.996-337.908-22.288 9.156-41.514 20.78-58.626 34.868l0.387-0.309-34.559-44.799c85.118-74.878 166.394-158.075 217.592-162.554s90.237 33.919 105.597 118.396c47.358 300.15 68.477 345.588 154.236 209.272 23.167-31.534 40.499-68.894 49.548-109.38l0.37-1.973c8.32-76.157-58.878-71.038-104.956-51.198q53.118-179.195 206.712-174.714 113.917 3.84 107.517 147.835z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["vimeo"]},"attrs":[{}],"properties":{"order":246,"id":198,"name":"vimeo","prevSize":80,"code":59846},"setIdx":0,"setId":1,"iconIdx":63},{"icon":{"paths":["M945.168 71.244c-6.854-4.784-15.36-7.644-24.533-7.644-5.667 0-11.082 1.091-16.037 3.075l0.291-0.101c-63.362 27.754-136.884 48.272-213.777 57.97l-3.973 0.411c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525c-107.474 9.724-206.538 32.466-299.99 66.82l8.098-2.606c-17.445 6.019-29.758 22.294-29.774 41.446v874.511c0 24.18 19.602 43.782 43.782 43.782s43.782-19.602 43.782-43.782v0-341.516c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662h13.426c91.375-11.776 174.319-34.938 251.841-68.29l-6.068 2.323c16.532-6.508 28.021-22.337 28.021-40.848 0-0.004 0-0.013 0-0.017v0.001-496.801c0.058-0.822 0.086-1.787 0.086-2.754 0-13.445-6.144-25.457-15.776-33.379l-0.076-0.061zM876.865 575.050c-55.28 23.59-119.414 40.863-186.43 48.723l-3.3 0.316c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525h-11.676c-81.373 7.491-156.277 24.016-227.356 48.724l6.685-2.021v-408.651c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662c72.593-2.928 140.796-18.315 203.651-44.065l-3.998 1.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag"]},"attrs":[{}],"properties":{"order":247,"id":197,"name":"flag","prevSize":80,"code":59844},"setIdx":0,"setId":1,"iconIdx":64},{"icon":{"paths":["M921.328 234.242h-14.62v-131.569c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032c-2.11-0.402-4.538-0.635-7.018-0.635s-4.909 0.229-7.26 0.672l0.242-0.037-695.856 233.902h-15.789l-9.939 3.508h-8.187l-9.357 5.263-7.018 9.939-8.187 7.018-6.432 5.85-7.018 8.771c-1.843 1.659-3.402 3.587-4.62 5.733l-0.060 0.112c-1.923 2.94-3.872 6.386-5.601 9.962l-0.245 0.564-3.508 6.432c-1.391 3.423-2.79 7.711-3.925 12.107l-0.165 0.758c0.126 0.965 0.196 2.083 0.196 3.216s-0.070 2.252-0.21 3.346l0.014-0.13c-0.288 2.979-0.451 6.443-0.451 9.939s0.164 6.961 0.485 10.379l-0.033-0.436v584.754c0.266 54.991 43.614 99.77 98.010 102.322l0.229 0.010h818.656c56.383-0.331 102.001-45.949 102.333-102.301v-584.786c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032zM809.056 88.637c5.781 2.176 9.84 7.618 9.939 14.021v131.582h-446.167zM935.946 921.328c0 8.075-6.545 14.62-14.62 14.62v0h-818.656c-8.075 0-14.62-6.545-14.62-14.62v0-584.754c0-8.075 6.545-14.62 14.62-14.62v0h818.656c8.075 0 14.62 6.545 14.62 14.62v0z","M848.233 628.95c0 40.368-32.724 73.092-73.092 73.092s-73.092-32.724-73.092-73.092c0-40.368 32.724-73.092 73.092-73.092s73.092 32.724 73.092 73.092z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["wallet"]},"attrs":[{},{}],"properties":{"order":248,"id":196,"name":"wallet","prevSize":80,"code":59843},"setIdx":0,"setId":1,"iconIdx":65},{"icon":{"paths":["M974.245 49.171c-15.932-10.721-35.555-17.111-56.669-17.111-14.627 0-28.534 3.067-41.12 8.59l0.658-0.257-208.887 89.524-277.931-117.023c-10.185-4.441-22.051-7.024-34.522-7.024s-24.338 2.583-35.094 7.244l0.571-0.221-255.112 107.663c-39.245 17.382-66.129 55.99-66.129 100.873 0 0.535 0.003 1.071 0.012 1.601l-0.001-0.081v658.259c-0.001 0.193-0.001 0.422-0.001 0.65 0 38.606 19.576 72.638 49.339 92.718l0.396 0.252c15.932 10.721 35.555 17.111 56.669 17.111 14.627 0 28.534-3.067 41.12-8.59l-0.658 0.257 208.887-89.524 277.931 117.023c9.959 4.44 21.578 7.024 33.803 7.024 0.254 0 0.506-0.001 0.759-0.002h-0.037c12.47-0.016 24.335-2.597 35.099-7.244l-0.579 0.222 255.112-109.419c39.245-17.382 66.129-55.99 66.129-100.873 0-0.535-0.003-1.071-0.012-1.601l0.001 0.081v-656.503c0.001-0.193 0.001-0.422 0.001-0.65 0-38.606-19.576-72.638-49.339-92.718l-0.396-0.252zM399.657 107.683l224.685 95.96v709.749l-224.685-95.96zM112.365 902.859c-2.099 1.232-4.621 1.96-7.312 1.96s-5.216-0.728-7.384-1.996l0.067 0.036c-6.069-4.287-9.983-11.275-9.983-19.174 0-0.459 0.014-0.915 0.041-1.366l-0.002 0.063v-659.428c-0.001-0.106-0.002-0.225-0.002-0.349 0-9.66 5.999-17.916 14.475-21.246l0.156-0.052 209.473-90.694v706.823zM936.211 801.048c0.016 0.329 0.027 0.713 0.027 1.097 0 8.996-5.204 16.772-12.765 20.489l-0.133 0.060-211.228 90.694v-706.823l199.525-85.427c2.099-1.232 4.621-1.96 7.312-1.96s5.216 0.728 7.384 1.996l-0.067-0.036c6.069 4.287 9.983 11.275 9.983 19.174 0 0.459-0.014 0.915-0.041 1.366l0.002-0.063z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["map"]},"attrs":[{}],"properties":{"order":249,"id":195,"name":"map","prevSize":80,"code":59842},"setIdx":0,"setId":1,"iconIdx":66},{"icon":{"paths":["M232.89 877.709c-0.229 0.001-0.5 0.001-0.772 0.001-64.296 0-122.536-25.926-164.839-67.892l0.014 0.014c-41.67-44.195-67.28-103.927-67.28-169.644 0-70.104 29.144-133.401 75.978-178.432l0.081-0.077 220.011-221.767c46.236-47.686 110.48-77.679 181.734-78.989l0.242-0.003c64.887 0.446 123.436 27.23 165.557 70.178l0.036 0.036c42.26 44.485 68.256 104.777 68.256 171.139 0 70.733-29.531 134.567-76.936 179.85l-0.095 0.091-73.728 73.728c-8.035 8.605-19.444 13.968-32.108 13.968-24.236 0-43.886-19.648-43.886-43.886 0-12.665 5.363-24.073 13.943-32.084l0.025-0.023 71.384-76.068c31.073-29.214 50.426-70.586 50.426-116.481 0-41.8-16.055-79.851-42.334-108.318l0.099 0.109c-28.323-24.799-65.659-39.923-106.527-39.923-45.364 0-86.377 18.637-115.797 48.671l-0.027 0.027-218.256 221.181c-30.617 29.25-49.65 70.402-49.65 115.998 0 41.161 15.51 78.698 41.005 107.085l-0.133-0.148c26.409 26.109 62.734 42.236 102.824 42.236 5.002 0 9.944-0.251 14.816-0.741l-0.615 0.049c1.28-0.135 2.767-0.212 4.272-0.212 22.546 0 41.068 17.231 43.113 39.245l0.012 0.171c0.136 1.297 0.214 2.802 0.214 4.324 0 22.665-17.181 41.315-39.226 43.641l-0.191 0.015z","M545.938 863.081c-64.887-0.446-123.436-27.23-165.557-70.178l-0.036-0.036c-42.26-44.485-68.256-104.777-68.256-171.139 0-70.733 29.531-134.567 76.936-179.85l0.095-0.091 73.728-73.728c8.035-8.605 19.444-13.968 32.108-13.968 24.236 0 43.886 19.648 43.886 43.886 0 12.665-5.363 24.073-13.943 32.084l-0.025 0.023-71.384 76.068c-31.073 29.214-50.426 70.586-50.426 116.481 0 41.8 16.055 79.851 42.334 108.318l-0.099-0.109c28.323 24.799 65.659 39.923 106.527 39.923 45.364 0 86.377-18.637 115.797-48.671l0.027-0.027 220.596-221.181c29.874-29.148 48.402-69.807 48.402-114.793 0-41.733-15.944-79.74-42.074-108.264l0.109 0.122c-26.409-26.109-62.734-42.236-102.824-42.236-5.002 0-9.944 0.251-14.816 0.741l0.615-0.049c-1.28 0.135-2.767 0.212-4.272 0.212-22.546 0-41.068-17.231-43.113-39.245l-0.012-0.171c-0.136-1.297-0.214-2.802-0.214-4.324 0-22.665 17.181-41.315 39.226-43.641l0.191-0.015c7.239-0.795 15.632-1.247 24.131-1.247 63.452 0 121.008 25.25 163.166 66.25l-0.054-0.053c41.67 44.195 67.28 103.927 67.28 169.644 0 70.104-29.144 133.401-75.978 178.432l-0.081 0.077-220.011 221.767c-46.236 47.686-110.48 77.679-181.734 78.989l-0.242 0.003z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["link"]},"attrs":[{},{}],"properties":{"order":250,"id":194,"name":"link","prevSize":80,"code":59841},"setIdx":0,"setId":1,"iconIdx":67},{"icon":{"paths":["M921.589 117.040h-819.178c-56.419 0.331-102.067 45.977-102.398 102.366v585.16c0.331 56.419 45.977 102.067 102.366 102.398h819.209c56.419-0.331 102.067-45.977 102.398-102.366v-585.16c-0.331-56.419-45.977-102.067-102.366-102.398h-0.033zM102.411 204.808h819.178c8.080 0 14.628 6.551 14.628 14.628v0 131.653h-848.434v-131.653c0-8.080 6.551-14.628 14.628-14.628v0zM921.589 819.192h-819.178c-8.080 0-14.628-6.551-14.628-14.628v0-365.705h848.434v365.705c0 8.080-6.551 14.628-14.628 14.628v0z","M336.461 570.514h-117.025c-32.315 0-58.514 26.197-58.514 58.514s26.197 58.514 58.514 58.514v0h117.025c32.315 0 58.514-26.197 58.514-58.514s-26.197-58.514-58.514-58.514v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["credit-card"]},"attrs":[{},{}],"properties":{"order":251,"id":193,"name":"credit-card","prevSize":80,"code":59839},"setIdx":0,"setId":1,"iconIdx":68},{"icon":{"paths":["M867.007 182.851c-66.261-30.706-136.831-53.332-211.172-66.261-9.158 16.161-19.933 38.248-26.935 56.025-78.651-11.852-156.763-11.852-233.798 0-7.541-17.777-18.316-39.864-27.474-56.025-74.341 12.929-144.911 35.555-211.172 66.261-133.599 201.475-169.692 398.104-151.915 591.499 88.886 66.261 174.541 106.125 259.118 132.522 21.010-28.551 39.326-59.257 55.487-91.042-30.706-11.313-59.796-25.858-87.27-42.558 7.541-5.387 14.545-11.313 21.549-16.7 168.615 78.651 351.236 78.651 517.696 0 7.004 5.925 14.006 11.313 21.549 16.7-27.474 16.7-57.103 30.706-87.27 42.558 16.161 31.783 34.478 62.489 55.487 91.042 84.577-26.397 170.769-66.261 259.118-132.522 21.010-224.64-36.094-419.113-151.915-591.499zM341.769 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508zM681.692 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508z"],"attrs":[{}],"grid":16,"tags":["discord"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":252,"id":192,"name":"discord","prevSize":80,"code":59840},"setIdx":0,"setId":1,"iconIdx":69},{"icon":{"paths":["M71.252 1019.529c-0.094 0-0.205 0-0.308 0-18.338 0-34.928-7.49-46.876-19.583l-0.004-0.004c-12.065-12.080-19.533-28.766-19.533-47.194s7.46-35.107 19.533-47.195v0l881.496-881.496c12.224-13.091 29.586-21.252 48.86-21.252 36.88 0 66.781 29.901 66.781 66.781 0 19.267-8.161 36.636-21.215 48.818l-0.036 0.034-881.496 881.496c-11.952 12.097-28.542 19.587-46.879 19.587-0.11 0-0.221 0-0.324 0h0.016z","M200.36 400.703c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM200.36 133.579c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z","M823.64 1023.979c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM823.64 756.859c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["percentage"]},"attrs":[{},{},{}],"properties":{"order":253,"id":191,"name":"percentage","prevSize":80,"code":59838},"setIdx":0,"setId":1,"iconIdx":70},{"icon":{"paths":["M634.635 1025.058h-8.795c-278.481-6.291-501.825-233.529-501.825-512.936 0-143.581 58.979-273.384 154.031-366.506l0.087-0.085c90.386-89.279 214.664-144.424 351.826-144.424 4.737 0 9.461 0.066 14.166 0.197l-0.694-0.015c137.202 2.016 261.047 57.579 351.895 146.67l-0.082-0.081c7.946 7.955 12.862 18.943 12.862 31.077s-4.914 23.121-12.862 31.078v0c-7.955 7.946-18.943 12.862-31.077 12.862s-23.121-4.914-31.078-12.862v0c-76.784-75.59-182.227-122.264-298.57-122.264-235.104 0-425.69 190.589-425.69 425.69s190.589 425.69 425.69 425.69c110.943 0 211.975-42.441 287.744-111.973l-0.312 0.283 12.901-12.313c8.295-7.915 19.557-12.787 31.955-12.787s23.661 4.872 31.975 12.806l-0.018-0.018c8.518 7.555 13.858 18.529 13.858 30.751 0 10.778-4.154 20.587-10.95 27.911l0.023-0.026-2.931 2.931-17.003 16.418c-90.306 81.848-210.707 131.947-342.808 131.947-1.515 0-3.029-0.007-4.542-0.019l0.232 0.001z","M869.176 468.024h-820.891c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h820.891c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z","M781.223 643.928h-732.939c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h732.939c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["euro"]},"attrs":[{},{},{}],"properties":{"order":233,"id":190,"name":"euro","prevSize":80,"code":59837},"setIdx":0,"setId":1,"iconIdx":71},{"icon":{"paths":["M921.533 0.085h-716.682c-1.243-0.037-2.704-0.062-4.171-0.062-76.892 0-139.525 61.042-142.084 137.312l-0.005 0.236v725.456c3.196 89.572 76.578 160.974 166.638 160.974 1.887 0 3.764-0.032 5.636-0.094l-0.273 0.005h690.939c24.1-0.324 43.553-19.777 43.877-43.845v-936.102c-0.324-24.1-19.777-43.553-43.845-43.877h-0.032zM877.652 936.158h-647.059c-1.635 0.122-3.546 0.19-5.469 0.19-41.629 0-75.733-32.206-78.764-73.058l-0.015-0.26c3.043-41.116 37.15-73.322 78.779-73.322 1.923 0 3.834 0.068 5.723 0.205l-0.254-0.015h647.059zM877.652 702.141h-647.059c-30.908 0.035-59.934 8.052-85.138 22.102l0.893-0.458v-586.214c2.714-28.081 26.19-49.857 54.753-49.857 1.322 0 2.628 0.047 3.925 0.14l-0.175-0.011h672.802z","M321.859 321.859h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z","M321.859 526.626h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["book"]},"attrs":[{},{},{}],"properties":{"order":232,"id":189,"name":"book","prevSize":80,"code":59834},"setIdx":0,"setId":1,"iconIdx":72},{"icon":{"paths":["M512 1023.233c-5.884-0.076-11.5-1.139-16.713-3.034l0.353 0.112c-294.424-132.986-495.622-424.049-495.622-762.108 0-25.218 1.12-50.181 3.311-74.828l-0.228 3.185c1.091-20.259 15.977-36.738 35.376-40.276l0.266-0.038c170.071-26.272 323.191-75.689 464.402-145.534l-9.257 4.14c5.319-2.475 11.548-3.917 18.114-3.917s12.794 1.442 18.385 4.030l-0.271-0.112c131.953 65.702 285.069 115.119 446.231 140.248l8.916 1.146c19.665 3.576 34.547 20.055 35.634 40.204l0.003 0.11c1.964 21.462 3.084 46.42 3.084 71.642 0 338.056-201.194 629.119-490.377 759.984l-5.245 2.124c-4.86 1.783-10.476 2.845-16.326 2.921h-0.034zM88.991 226.293c-0.817 12.916-1.282 28.011-1.282 43.216 0 292.016 171.793 543.905 419.826 660.115l4.464 1.881c252.498-118.092 424.293-369.981 424.293-661.997 0-15.204-0.465-30.297-1.384-45.268l0.1 2.056c-158.673-27.438-300.659-73.974-432.589-137.992l9.58 4.192c-122.352 59.822-264.337 106.359-413.369 132.403l-9.639 1.394z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shield"]},"attrs":[{}],"properties":{"order":231,"id":188,"name":"shield","prevSize":80,"code":59833},"setIdx":0,"setId":1,"iconIdx":73},{"icon":{"paths":["M330.174 602.273c-7.682 42.896-39.055 245.207-48.017 302.191 0 4.482 0 5.762-7.042 5.762h-167.743c-0.080 0.001-0.175 0.001-0.271 0.001-15.204 0-27.532-12.324-27.532-27.532 0-1.356 0.097-2.688 0.287-3.989l-0.017 0.147 131.888-839.984c3.692-21.668 21.877-38.101 44.080-39.052l0.096-0.002c342.523 0 371.334-8.323 459.046 26.251 135.089 52.499 147.892 179.266 99.235 316.915s-163.261 201.671-315.635 203.593c-97.314 0-156.215-15.364-169.663 55.059zM883.334 277.035c-3.841-3.2-5.121-3.841-6.402 0-5.355 29.455-12.228 55.051-20.948 79.774l1.103-3.586c-89.632 256.095-338.682 234.965-460.326 234.965-0.779-0.096-1.678-0.148-2.591-0.148-11.979 0-21.761 9.396-22.379 21.221l-0.002 0.053c-50.578 320.115-64.022 384.138-64.022 384.138-0.348 1.539-0.545 3.309-0.545 5.121 0 13.404 10.837 24.274 24.228 24.326h143.414c19.695-0.387 35.904-14.834 39.022-33.697l0.032-0.236c0-12.164 0 14.084 32.653-206.154 10.243-49.297 32.013-44.176 64.022-44.176 159.417 0 284.262-64.022 320.115-256.095 6.318-18.661 9.965-40.158 9.965-62.502 0-57.89-24.469-110.067-63.632-146.751l-0.111-0.101z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["paypal"]},"attrs":[{}],"properties":{"order":229,"id":186,"name":"paypal","prevSize":80,"code":59835},"setIdx":0,"setId":1,"iconIdx":74},{"icon":{"paths":["M590.061 298.931c-114.531 3.839-397.983 35.193-397.983 268.094 0 250.818 326.32 261.056 433.175 99.176 33.603 38.347 68.51 73.249 105.572 105.755l1.281 1.101 133.727-127.968s-76.142-58.226-76.142-120.93v-335.917c0-57.586-57.586-188.114-264.895-188.114s-319.921 127.968-319.921 238.663l174.038 17.277c14.203-60.869 64.928-106.62 127.331-113.199l0.637-0.053c95.977 0 83.181 67.824 83.181 158.042zM590.061 497.283c0 182.995-198.352 155.482-198.352 39.029s119.010-127.968 198.352-131.807zM909.983 870.953c-103.709 94.959-242.457 153.142-394.795 153.142-5.62 0-11.222-0.080-16.805-0.238l0.821 0.018c-195.949-7.842-370.074-95.152-492.135-230.369l-0.545-0.613c-15.997-17.277 0-25.596 12.797-18.556 172.759 101.736 443.413 268.735 876.588 69.103 19.837-8.319 33.91 4.48 15.357 27.515zM1004.041 876.072c-11.535 27.968-28.737 51.536-50.314 70.185l-0.235 0.197c-12.797 10.238-22.395 6.399-15.357-8.319s46.068-106.215 30.074-127.968-87.020-9.598-113.251-7.038-30.714 4.48-32.634 0 51.186-35.829 88.3-40.309 96.617 0 108.772 13.437c1.186 7.461 1.861 16.066 1.861 24.83 0 26.848-6.362 52.211-17.654 74.664l0.435-0.957z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["amazon"]},"attrs":[{}],"properties":{"order":240,"id":185,"name":"amazon","prevSize":80,"code":59836},"setIdx":0,"setId":1,"iconIdx":75},{"icon":{"paths":["M886.693 1024.275h-13.467c-160.026-17.856-304.577-71.747-429.374-153.346l3.746 2.3c-119.858-77.12-218.914-175.988-293.94-291.862l-2.302-3.793c-79.488-121.374-133.409-266.357-150.654-422.398l-0.396-4.402c-0.449-4.129-0.705-8.915-0.705-13.764 0-33.499 12.23-64.138 32.468-87.698l-0.148 0.178c22.748-27.565 55.792-45.921 93.167-49.141l0.507-0.035h152.22c68.811 0.070 125.838 50.433 136.308 116.306l0.101 0.786c6.186 45.698 17.046 86.978 32.301 126.063l-1.274-3.701c5.445 14.293 8.602 30.826 8.602 48.093 0 38.102-15.36 72.621-40.225 97.697l-35.702 35.702c57.148 89.292 131.053 162.822 217.85 217.845l2.869 1.699 35.713-35.126c25.068-24.854 59.584-40.214 97.686-40.214 17.267 0 33.797 3.154 49.045 8.917l-0.956-0.318c35.315 13.822 76.581 24.675 119.402 30.688l2.96 0.339c66.678 10.304 117.132 67.286 117.132 136.053 0 1.155-0.014 2.306-0.044 3.455l0.002-0.171v140.51c0 0 0 0.001 0 0.001 0 76.101-61.525 137.836-137.551 138.165h-0.032zM277.818 87.541h-139.923c-14.387 0.979-27.011 7.794-35.649 18.070l-0.063 0.079c-7.402 8.481-11.91 19.649-11.91 31.87 0 1.557 0.075 3.102 0.218 4.622l-0.015-0.194c15.36 145.534 63.692 277.249 137.347 391.045l-2.107-3.473c70.038 108.811 159.916 198.686 265.265 266.637l3.46 2.091c110.418 72.299 242.202 121.557 384.020 137.782l4.14 0.385c0.876 0.051 1.901 0.082 2.931 0.082 14.116 0 26.923-5.614 36.306-14.733l-0.013 0.013c8.993-9.216 14.563-21.807 14.638-35.698v-139.938c0.005-0.32 0.012-0.7 0.012-1.075 0-25.332-18.708-46.298-43.066-49.826l-0.272-0.033c-53.039-7.261-100.842-19.551-146.288-36.646l4.608 1.52c-5.299-2.044-11.429-3.227-17.839-3.227-13.78 0-26.284 5.472-35.452 14.364l0.014-0.013-58.546 58.546c-8.012 7.814-18.974 12.637-31.061 12.637-7.941 0-15.396-2.080-21.853-5.726l0.223 0.115c-125.62-71.885-227.060-173.136-297.132-294.748l-2.038-3.837c-3.709-6.254-5.9-13.781-5.9-21.824 0-12.079 4.944-23.005 12.918-30.863l58.55-58.55c8.886-8.986 14.38-21.346 14.38-34.991 0-6.364-1.195-12.447-3.371-18.038l0.116 0.338c-15.651-40.876-27.948-88.685-34.741-138.244l-0.385-3.437c-3.034-25.502-24.528-45.088-50.597-45.088-0.323 0-0.646 0.002-0.971 0.011l0.048-0.001z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["phone"]},"attrs":[{}],"properties":{"order":227,"id":184,"name":"phone","prevSize":80,"code":59832},"setIdx":0,"setId":1,"iconIdx":76},{"icon":{"paths":["M1004.108 24.712c-7.747-14.706-22.886-24.587-40.341-24.696h-421.65c-24.95 0-45.175 20.226-45.175 45.175s20.226 45.175 45.175 45.175v0h331.285l-111.431 154.198c-5.421 7.322-8.676 16.532-8.676 26.503 0 24.752 20.065 44.816 44.816 44.816 14.78 0 27.892-7.156 36.054-18.191l0.086-0.121 165.641-225.875c5.688-7.337 9.117-16.671 9.117-26.809 0-7.369-1.813-14.314-5.016-20.415l0.116 0.241z","M310.219 13.266s0 0-3.011 0c-3.291-2.852-7.063-5.273-11.155-7.112l-0.289-0.116c-3.885-1.54-8.385-2.612-13.079-3l-0.172-0.011h-222.261c-17.471 0.11-32.609 9.989-40.237 24.446l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.174 0 10.136 3.43 19.472 9.191 26.909l-0.075-0.1 322.25 437.295v466.81c0.335 24.814 20.362 44.84 45.142 45.175h240.967c24.814-0.335 44.84-20.362 45.175-45.142v-466.843l3.614-5.421 220.455 218.045c8.085 8.184 19.307 13.251 31.713 13.251 0.073 0 0.148 0 0.222 0h-0.011c0.137 0.001 0.299 0.003 0.462 0.003 12.327 0 23.47-5.072 31.455-13.244l0.008-0.008c8.162-8.172 13.212-19.46 13.212-31.923s-5.048-23.751-13.212-31.925v0zM596.326 470.439c-5.634 7.174-9.035 16.335-9.035 26.291 0 0.075 0 0.15 0 0.224v-0.011 436.692h-150.584v-436.692c0-0.064 0-0.138 0-0.212 0-9.955-3.401-19.117-9.105-26.384l0.071 0.093-277.075-380.073h109.624l355.98 352.366z"],"attrs":[{},{}],"grid":16,"tags":["filter-slash"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":226,"id":183,"name":"filter-slash","prevSize":80,"code":59831},"setIdx":0,"setId":1,"iconIdx":77},{"icon":{"paths":["M1023.989 515.199c-3.553-280.043-231.4-505.695-511.951-505.695-282.764 0-511.989 229.225-511.989 511.989 0 254.507 185.702 465.641 428.999 505.297l2.953 0.397v-362.872h-127.997v-149.116h127.997v-113.278c-0.721-6.073-1.134-13.108-1.134-20.239 0-100.028 81.088-181.117 181.117-181.117 4.227 0 8.421 0.145 12.576 0.43l-0.561-0.031c40.895 0.576 80.479 4.278 119.075 10.879l-4.516-0.639v127.997h-63.999c-2.79-0.372-6.015-0.583-9.289-0.583-41 0-74.238 33.238-74.238 74.238 0 2.458 0.12 4.89 0.352 7.287l-0.024-0.304v96.638h142.077l-23.040 149.116h-118.397v358.392c246.274-40.033 432-251.177 432-505.702 0-1.084-0.003-2.169-0.010-3.253l0.001 0.166z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["facebook"]},"attrs":[{}],"properties":{"order":223,"id":182,"name":"facebook","prevSize":80,"code":59828},"setIdx":0,"setId":1,"iconIdx":78},{"icon":{"paths":["M342.537 824.066c0 4.477-4.477 7.674-10.871 7.674s-11.511 0-11.511-7.674 5.115-7.674 10.871-7.674 11.511 3.197 11.511 7.674zM278.59 814.474c0 4.477 0 9.592 8.952 10.871 1.214 0.597 2.642 0.946 4.152 0.946 3.78 0 7.050-2.187 8.614-5.366l0.025-0.057c0-4.477 0-8.952-8.952-10.871s-11.511 0-12.789 4.477zM369.395 811.277c-5.755 0-9.592 5.115-8.952 10.232s5.755 7.034 12.151 5.755 9.592-5.755 8.952-10.232-5.755-6.395-12.151-5.755zM505.605 0.416c-1.401-0.013-3.056-0.022-4.712-0.022-276.536 0-500.713 224.177-500.713 500.713 0 5.405 0.085 10.79 0.256 16.152l-0.019-0.784c-0.043 2.548-0.069 5.556-0.069 8.569 0 228.113 144.076 422.574 346.195 497.35l3.671 1.189c26.218 4.477 35.81-12.151 35.81-25.58s0-85.69 0-127.896c0 0-144.523 31.974-175.218-63.949 0 0-23.021-63.949-56.913-77.378 0 0-47.321-33.253 3.197-32.614 34.33 4.756 63.049 25.238 79.017 53.815l0.277 0.541c18.278 35.272 54.506 58.959 96.268 58.959 20.145 0 39.003-5.513 55.146-15.109l-0.498 0.274c2.59-27.799 14.547-52.403 32.64-71.009l-0.027 0.027c-115.106-13.429-231.491-30.055-231.491-234.050-0.145-2.57-0.228-5.577-0.228-8.605 0-45.473 18.687-86.583 48.8-116.067l0.028-0.028c-6.646-19.325-10.482-41.593-10.482-64.756 0-28.316 5.734-55.295 16.103-79.836l-0.505 1.347c43.484-14.069 142.605 56.913 142.605 56.913 38.806-11.37 83.386-17.912 129.495-17.912s90.69 6.541 132.864 18.747l-3.369-0.835s99.119-70.982 142.605-56.913c10.054 23.11 15.902 50.029 15.902 78.316 0 23.246-3.951 45.569-11.215 66.335l0.429-1.407c32.709 30.551 53.097 73.938 53.097 122.086 0 0.919-0.007 1.836-0.022 2.75l0.001-0.138c0 204.633-121.502 220.621-236.608 234.050 20.129 22.501 32.432 52.369 32.432 85.111 0 3.805-0.166 7.572-0.492 11.293l0.034-0.483c0 71.622 0 159.871 0 177.137-0.001 0.076-0.001 0.166-0.001 0.258 0 14.833 12.025 26.858 26.858 26.858 3.209 0 6.287-0.564 9.141-1.596l-0.187 0.058c204.623-75.025 347.995-268.129 347.995-494.721 0-3.906-0.042-7.803-0.127-11.688l0.010 0.579c0.012-1.343 0.019-2.929 0.019-4.517 0-282.54-229.044-511.584-511.584-511.584-2.256 0-4.508 0.015-6.757 0.043l0.342-0.003zM201.213 730.062s0 7.034 0 10.871c1.389 1.394 3.312 2.257 5.436 2.257s4.047-0.863 5.436-2.257v0s0-7.034 0-11.511-8.314-1.918-10.871 0.64zM178.831 712.796s0 6.395 4.477 8.314c1.064 1.308 2.674 2.137 4.477 2.137s3.413-0.829 4.468-2.127l0.009-0.010s0-6.395-4.477-8.314-7.674-1.918-8.952 0zM242.778 788.256s0 8.952 0 13.429 10.871 5.115 13.429 0 0-8.952 0-13.429-8.314-3.197-10.871 0zM219.118 756.92s0 7.674 0 12.789 8.952 7.034 12.151 5.115c1.56-1.787 2.512-4.14 2.512-6.715s-0.952-4.928-2.522-6.727l0.010 0.012c-3.197-5.115-8.314-7.034-12.151-4.477z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["github"]},"attrs":[{}],"properties":{"order":222,"id":181,"name":"github","prevSize":80,"code":59829},"setIdx":0,"setId":1,"iconIdx":79},{"icon":{"paths":["M916.838 305.187c0 8.789 0 18.096 0 26.886 0.007 1.078 0.011 2.355 0.011 3.631 0 325.813-264.124 589.936-589.936 589.936-1.276 0-2.552-0.004-3.827-0.012l0.196 0.001c-0.51 0.001-1.114 0.002-1.717 0.002-118.435 0-228.719-34.901-321.128-94.979l2.284 1.392c17.062 0 33.091 0 51.704 0 0.002 0 0.005 0 0.007 0 97.98 0 188.092-33.688 259.382-90.114l-0.874 0.667c-91.316-0.843-168.422-60.74-195.032-143.307l-0.407-1.464c11.773 1.974 25.336 3.103 39.164 3.103 0.228 0 0.456 0 0.683-0.001h-0.035c19.516-0.144 38.393-2.587 56.462-7.070l-1.657 0.348c-95.075-19.916-165.451-103.058-165.451-202.636 0-0.015 0-0.030 0-0.046v0.002c27.158 15.264 59.356 24.854 93.652 26.353l0.448 0.016c-57.044-38.132-94.103-102.278-94.103-175.078 0-0.433 0.001-0.865 0.004-1.298v0.067c0.070-38.098 10.43-73.76 28.447-104.376l-0.527 0.968c103.206 126.555 255.913 209.348 428.158 218.642l1.498 0.064c-3.124-14.226-4.998-30.628-5.17-47.438l-0.001-0.128c-0.065-1.95-0.103-4.241-0.103-6.541 0-114.221 92.594-206.813 206.813-206.813 61.722 0 117.127 27.038 155.021 69.915l0.191 0.222c49.972-10.236 94.309-28.167 134.131-52.719l-1.769 1.015c-16.162 49.068-48.731 89.016-91.083 114.259l-0.949 0.523c44.586-4.928 85.337-16.248 123.076-33.095l-2.607 1.040c-28.94 41.915-63.161 77.617-102.256 107.223l-1.151 0.837z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["twitter"]},"attrs":[{}],"properties":{"order":221,"id":180,"name":"twitter","prevSize":80,"code":59830},"setIdx":0,"setId":1,"iconIdx":80},{"icon":{"paths":["M795.402 3.99c-18.498-7.266-39.637-3.303-54.171 10.57l-443.93 443.93v-408.918c0-27.085-22.461-49.546-49.546-49.546s-49.546 22.461-49.546 49.546v924.854c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-408.918l443.93 443.93c9.248 9.248 22.461 14.534 35.012 14.534 6.607 0 12.552-1.321 19.157-3.964 18.498-7.927 30.389-25.764 30.389-45.582v-924.854c0-19.818-11.891-38.316-30.389-45.582zM726.699 854.857l-342.857-342.857 342.857-342.857v685.713z"],"attrs":[{}],"tags":["step-backward-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":211,"id":0,"name":"step-backward-alt","prevSize":80,"code":59820},"setIdx":0,"setId":1,"iconIdx":81},{"icon":{"paths":["M776.245 0.027c-27.085 0-49.546 22.461-49.546 49.546v408.918l-443.93-443.93c-13.873-13.873-35.673-18.498-54.171-10.57s-30.389 25.764-30.389 45.582v924.854c0 19.818 11.891 38.316 30.389 45.582 5.945 2.643 12.552 3.964 19.157 3.964 13.212 0 25.764-5.284 35.012-14.534l443.93-443.93v408.918c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-924.854c0-27.085-22.461-49.546-49.546-49.546zM297.301 854.857v-685.713l342.857 342.857-342.857 342.857z"],"attrs":[{}],"tags":["step-forward-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":210,"id":1,"name":"step-forward-alt","prevSize":80,"code":59821},"setIdx":0,"setId":1,"iconIdx":82},{"icon":{"paths":["M1009.943 479.818l-437.090-409.59c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v366.875l-425.388-399.058c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v819.178c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l425.388-399.058v366.875c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l437.090-409.59c8.777-8.191 14.043-19.895 14.043-32.182s-5.266-23.99-14.043-32.182zM87.783 820.362v-616.725l328.842 308.362-328.842 308.362zM586.896 820.362v-616.725l328.842 308.362-328.842 308.362z"],"attrs":[{}],"tags":["forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":259,"id":2,"name":"forward","prevSize":80,"code":59822},"setIdx":0,"setId":1,"iconIdx":83},{"icon":{"paths":["M997.655 62.036c-15.798-7.022-34.522-3.511-47.395 8.191l-425.388 399.058v-366.875c0-17.554-10.532-33.352-26.331-40.374s-34.522-3.511-47.395 8.191l-437.090 409.59c-8.777 8.191-14.043 19.895-14.043 32.182s5.266 23.99 14.043 32.182l437.090 409.59c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-366.875l425.388 399.058c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-819.178c0-17.554-10.532-33.352-26.331-40.374zM437.104 820.362l-328.842-308.362 328.842-308.362v616.725zM936.217 820.362l-328.842-308.362 328.842-308.362v616.725z"],"attrs":[{}],"tags":["backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":254,"id":3,"name":"backward","prevSize":80,"code":59823},"setIdx":0,"setId":1,"iconIdx":84},{"icon":{"paths":["M997.071 62.036c-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-17.554-10.532-33.938-26.916-40.374-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-23.99-19.895-43.885-43.885-43.885s-43.885 19.895-43.885 43.885v819.178c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-819.178c0-17.554-10.532-33.938-26.916-40.374zM468.115 815.681l-303.681-303.681 303.681-303.681v607.362zM936.217 815.681l-303.681-303.681 303.681-303.681v607.362z"],"attrs":[{}],"tags":["fast-backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":207,"id":4,"name":"fast-backward","prevSize":80,"code":59824},"setIdx":0,"setId":1,"iconIdx":85},{"icon":{"paths":["M980.102 58.526c-23.99 0-43.885 19.895-43.885 43.885v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v819.178c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-819.178c0-23.99-19.895-43.885-43.885-43.885zM87.783 815.681v-607.362l303.681 303.681-303.681 303.681zM555.885 815.681v-607.362l303.681 303.681-303.681 303.681z"],"attrs":[{}],"tags":["fast-forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":206,"id":5,"name":"fast-forward","prevSize":80,"code":59825},"setIdx":0,"setId":1,"iconIdx":86},{"icon":{"paths":["M313.813 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z","M710.187 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["pause"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":205,"id":6,"name":"pause","prevSize":80,"code":59826},"setIdx":0,"setId":1,"iconIdx":87},{"icon":{"paths":["M280.358 1024.923c-6.942-0.037-13.534-1.495-19.514-4.095l0.321 0.124c-18.014-7.505-30.445-24.968-30.445-45.335 0-0.116 0-0.233 0.002-0.349v0.019-926.568c1.044-26.589 22.852-47.75 49.602-47.75 12.752 0 24.381 4.809 33.173 12.712l-0.045-0.040 463.285 463.285c8.969 8.98 14.517 21.381 14.517 35.077s-5.547 26.097-14.517 35.078v0l-463.285 463.285c-8.576 8.44-20.14 13.868-32.964 14.555l-0.127 0.006zM329.996 168.508v686.985l343.492-343.492z"],"attrs":[{}],"tags":["play"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":204,"id":7,"name":"play","prevSize":80,"code":59827},"setIdx":0,"setId":1,"iconIdx":88},{"icon":{"paths":["M736.143 262.827l-277.617 113.777c-38.623 15.541-68.655 45.573-83.837 83.191l-0.359 1.004-113.777 277.617c-0.848 2.097-1.341 4.529-1.341 7.076 0 8.091 4.968 15.023 12.020 17.908l0.129 0.047c2.113 0.807 4.557 1.275 7.111 1.275s4.997-0.467 7.252-1.321l-0.141 0.047 277.617-113.777c38.623-15.541 68.655-45.573 83.837-83.191l0.359-1.004 113.777-277.617c0.848-2.097 1.341-4.529 1.341-7.076 0-8.091-4.968-15.023-12.020-17.908l-0.129-0.047c-2.113-0.807-4.557-1.275-7.111-1.275s-4.997 0.467-7.252 1.321l0.141-0.047zM512 568.889c-31.419 0-56.889-25.471-56.889-56.889s25.471-56.889 56.889-56.889c31.419 0 56.889 25.471 56.889 56.889v0c0 31.419-25.471 56.889-56.889 56.889v0z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{}],"tags":["compass"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":203,"id":8,"name":"compass","prevSize":80,"code":59819},"setIdx":0,"setId":1,"iconIdx":89},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-585.157c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v585.157c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM102.412 204.809c-8.079 0-14.629 6.55-14.629 14.629v0 585.126c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-585.126c0-8.079-6.55-14.629-14.629-14.629v0z","M336.462 497.371c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0zM336.462 351.091c-16.158 0-29.256 13.098-29.256 29.256s13.098 29.256 29.256 29.256c16.158 0 29.256-13.098 29.256-29.256v0c0-16.158-13.098-29.256-29.256-29.256v0z","M512 731.422c-24.105-0.325-43.559-19.78-43.884-43.853v-0.032c0-39.788-9.947-73.14-131.653-73.14s-131.653 33.352-131.653 73.14c0 24.237-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0c0-160.909 165.005-160.909 219.422-160.909s219.422 0 219.422 160.909c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032z","M804.562 438.86h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M746.051 614.397h-117.025c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h117.025c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{},{}],"tags":["id-card"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":202,"id":9,"name":"id-card","prevSize":80,"code":59818},"setIdx":0,"setId":1,"iconIdx":90},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-146.313c0.325-24.105 19.78-43.559 43.853-43.884h0.032c56.552 0 102.397-45.844 102.397-102.397s-45.844-102.397-102.397-102.397v0c-24.105-0.325-43.559-19.78-43.884-43.853v-146.313c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v146.313c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032c-56.552 0-102.397 45.844-102.397 102.397s45.844 102.397 102.397 102.397v0c24.105 0.325 43.559 19.78 43.884 43.853v146.313c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM87.785 696.9v107.664c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-107.664c-84.233-20.753-145.724-95.646-145.724-184.9s61.489-164.147 144.417-184.627l1.306-0.273v-107.664c0-8.079-6.55-14.629-14.629-14.629v0h-819.175c-8.079 0-14.629 6.55-14.629 14.629v0 107.664c84.233 20.753 145.724 95.646 145.724 184.9s-61.489 164.147-144.417 184.627l-1.306 0.273z"],"attrs":[{}],"tags":["ticket"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":201,"id":10,"name":"ticket","prevSize":80,"code":59817},"setIdx":0,"setId":1,"iconIdx":91},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file-o","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":200,"id":11,"name":"file-o","prevSize":80,"code":59816},"setIdx":0,"setId":1,"iconIdx":92},{"icon":{"paths":["M680.456 749.159c-0.386 0.011-0.839 0.017-1.294 0.017-27.363 0-49.546-22.183-49.546-49.546 0-13.679 5.543-26.064 14.506-35.029v0l258.959-256.978-258.959-256.978c-8.952-8.963-14.491-21.342-14.491-35.012s5.537-26.049 14.491-35.013v0c8.963-8.952 21.342-14.491 35.012-14.491s26.049 5.537 35.013 14.491v0l294.632 291.991c8.952 8.963 14.491 21.342 14.491 35.012s-5.537 26.049-14.491 35.013v0l-294.632 291.991c-8.452 8.957-20.405 14.534-33.659 14.534-0.011 0-0.023 0-0.034 0h0.002z","M49.571 957.913c-27.215-0.367-49.179-22.331-49.546-49.51v-500.779c0.367-27.215 22.331-49.179 49.51-49.546h924.892c27.363 0 49.546 22.183 49.546 49.546s-22.183 49.546-49.546 49.546v0h-875.31v451.197c-0.367 27.215-22.331 49.179-49.51 49.546h-0.036z"],"attrs":[{},{}],"tags":["reply"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":199,"id":12,"name":"reply","prevSize":80,"code":59815},"setIdx":0,"setId":1,"iconIdx":93},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M441.707 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-121.77-121.77c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l121.767-122.873c7.51-7.501 17.881-12.141 29.334-12.141s21.825 4.639 29.335 12.141v0c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0l-94.092 92.985 94.092 92.985c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M705.718 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-110.726h-345.927c-22.926 0-41.511-18.585-41.511-41.511s18.585-41.511 41.511-41.511v0h387.438c22.801 0.307 41.204 18.71 41.511 41.481v154.451c-1.483 21.852-19.449 39.046-41.487 39.297h-0.025z"],"attrs":[{},{},{}],"tags":["directions-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":195,"id":13,"name":"directions-alt","prevSize":80,"code":59813},"setIdx":0,"setId":1,"iconIdx":94},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M582.293 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-0.004-0.004c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l94.092-92.985-94.092-92.985c-8.139-7.599-13.212-18.392-13.212-30.371 0-22.926 18.585-41.511 41.511-41.511 11.979 0 22.771 5.073 30.347 13.188l0.022 0.025 121.767 122.319c7.668 7.537 12.42 18.020 12.42 29.612s-4.752 22.075-12.413 29.605l-0.006 0.005-121.767 121.767c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M318.282 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-154.451c0.307-22.801 18.71-41.204 41.481-41.511h387.468c22.926 0 41.511 18.585 41.511 41.511s-18.585 41.511-41.511 41.511v0h-345.927v110.696c0.021 0.497 0.032 1.078 0.032 1.663 0 23.049-18.537 41.768-41.516 42.061h-0.027z"],"attrs":[{},{},{}],"tags":["directions"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":196,"id":14,"name":"directions","prevSize":80,"code":59814},"setIdx":0,"setId":1,"iconIdx":95},{"icon":{"paths":["M992.966 368.647c-25.16-29.841-61.437-46.809-100.641-46.809h-235.803v-160.907c0-88.937-71.969-160.907-165.589-160.907-40.959 0-77.821 24.575-94.203 62.607l-148.619 346.974h-109.417c-76.65 0-138.673 62.023-138.673 138.673v337.613c0 76.066 62.607 138.087 138.673 138.087h676.396c63.778 0 118.194-45.639 129.31-108.832l77.235-438.838c6.436-38.618-4.096-77.821-29.255-107.662zM138.696 936.209c-28.086 0-50.905-22.82-50.905-50.32v-337.613c0-28.086 22.82-50.905 50.905-50.905h94.203v438.838h-94.203zM858.39 899.933c-3.511 21.064-21.65 36.277-43.298 36.277h-493.839v-473.945l156.226-365.699c2.341-5.266 7.607-9.362 18.723-9.362 40.373 0 72.555 32.766 72.555 73.139v248.674h323.57c13.457 0 25.16 5.266 33.352 15.213s11.702 22.82 9.362 36.277l-77.235 438.838z"],"attrs":[{}],"tags":["thumbs-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":191,"id":15,"name":"thumbs-up","prevSize":80,"code":59811},"setIdx":0,"setId":1,"iconIdx":96},{"icon":{"paths":["M885.271 0.068h-676.92c-63.773 0-118.184 45.635-129.299 108.822l-76.643 438.799c-6.435 38.614 4.096 77.814 28.669 107.652 25.158 29.838 61.432 46.805 100.632 46.805h235.782v160.892c0 88.929 71.963 160.892 165.574 160.892 40.955 0 77.814-24.573 94.195-62.602l148.606-346.943h109.992c76.643 0 138.66-62.017 138.66-138.66v-337.583c0-76.059-62.017-138.075-138.66-138.075zM702.731 561.731l-156.212 365.666c-2.341 5.266-7.606 9.361-18.722 9.361-40.369 0-72.549-32.763-72.549-73.133v-248.652h-323.541c-13.456 0-25.158-5.266-33.349-15.211-8.776-9.946-11.701-22.818-9.361-36.274l76.643-438.799c3.51-21.062 21.648-36.274 43.294-36.274h493.795v473.317zM936.172 475.726c0 28.083-22.818 50.901-50.901 50.901h-94.195v-438.799h94.195c28.083 0 50.901 22.818 50.901 50.315v337.583z"],"attrs":[{}],"tags":["thumbs-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":258,"id":16,"name":"thumbs-down","prevSize":80,"code":59812},"setIdx":0,"setId":1,"iconIdx":97},{"icon":{"paths":["M272.871 1023.949c-0.183 0.003-0.398 0.003-0.613 0.003-13.694 0-26.089-5.555-35.058-14.536v0l-165.145-167.127c-8.952-8.963-14.49-21.341-14.49-35.010s5.536-26.047 14.49-35.012v0c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l132.101 132.101 132.115-132.115c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l-0.014-0.014c8.952 8.963 14.49 21.341 14.49 35.010s-5.536 26.047-14.49 35.012v0l-165.145 165.145c-9.003 10.201-22.109 16.602-36.709 16.602-1.030 0-2.051-0.033-3.065-0.094l0.139 0.006z","M272.871 1023.949c-0.002 0-0.003 0-0.005 0-27.495 0-49.827-22.103-50.2-49.508v-924.845c0.373-27.441 22.705-49.543 50.2-49.543 0.002 0 0.003 0 0.005 0v0c27.077 0.373 48.882 22.409 48.882 49.539 0 0.002 0 0.003 0 0.005v0 924.81c0 0.002 0 0.003 0 0.005 0 27.13-21.807 49.167-48.848 49.539h-0.036z","M850.216 990.919c-27.077-0.373-48.882-22.409-48.882-49.539 0-0.002 0-0.003 0-0.005v0-268.195l-25.763 14.533c-6.952 3.915-15.262 6.222-24.111 6.222-27.515 0-49.821-22.305-49.821-49.821 0-18.667 10.266-34.936 25.459-43.468l0.251-0.13 43.598-23.781c12.816-9.446 28.919-15.117 46.348-15.117 12.457 0 24.238 2.898 34.704 8.055l-0.461-0.206c29.13 13.962 48.887 43.216 48.887 77.083 0 0.303-0.002 0.608-0.005 0.91v-0.046 293.958c-0.373 27.441-22.705 49.543-50.2 49.543-0.002 0-0.003 0-0.005 0v0z","M817.187 330.341c-81.802-0.375-147.969-66.775-147.969-148.629 0-82.086 66.545-148.63 148.63-148.63s148.629 66.543 148.63 148.629v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.722-66.249 147.969-147.969 147.969-0.464 0-0.929-0.002-1.393-0.006h0.071zM817.187 132.168c-27.362 0-49.543 22.182-49.543 49.543s22.182 49.543 49.543 49.543v0c27.362 0 49.543-22.182 49.543-49.543s-22.182-49.543-49.543-49.543v0z","M783.498 462.457h-32.369c-27.362 0-49.543-22.182-49.543-49.543s22.182-49.543 49.543-49.543v0h32.369c43.854-0.949 79.426-35.145 82.556-78.334l0.015-0.274c0-19.156 0-42.278 0-70.022v-33.028c0-0.002 0-0.003 0-0.005 0-27.13 21.807-49.167 48.848-49.539h0.036c0.002 0 0.003 0 0.005 0 27.495 0 49.827 22.103 50.2 49.508v33.064c0 29.726 0 54.168 0 75.306-6.052 95.91-84.883 171.519-181.572 172.411h-0.088z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":255,"id":17,"name":"sort-numeric-down-alt","prevSize":80,"code":59798},"setIdx":0,"setId":1,"iconIdx":98},{"icon":{"paths":["M438.010 264.266c-14.187-0.375-26.837-6.658-35.632-16.47l-0.042-0.046-132.124-132.124-132.124 132.124c-8.829 7.573-20.392 12.184-33.031 12.184s-24.204-4.609-33.099-12.241l0.068 0.057c-7.83-8.725-12.617-20.319-12.617-33.031s4.787-24.306 12.658-33.077l-0.040 0.046 165.156-165.156c9.138-8.838 21.605-14.283 35.344-14.283s26.204 5.445 35.358 14.297l165.142 165.142c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.632 7.819-20.139 12.603-32.763 12.603-0.791 0-1.578-0.019-2.36-0.056l0.11 0.005z","M272.855 1023.983c-0.002 0-0.003 0-0.005 0-27.497 0-49.83-22.104-50.203-49.511v-924.907c0.373-27.443 22.706-49.547 50.203-49.547 0.002 0 0.003 0 0.005 0v0c27.079 0.373 48.886 22.411 48.886 49.542 0 0.002 0 0.003 0 0.005v0 924.872c0 0.002 0 0.003 0 0.005 0 27.131-21.808 49.17-48.852 49.542h-0.036z","M850.238 990.951c-27.079-0.373-48.886-22.411-48.886-49.542 0-0.002 0-0.003 0-0.005v0-268.213l-25.764 14.534c-6.952 3.916-15.263 6.223-24.112 6.223-27.517 0-49.824-22.307-49.824-49.824 0-18.668 10.267-34.938 25.461-43.471l0.251-0.13 43.601-23.782c12.817-9.446 28.921-15.118 46.351-15.118 12.458 0 24.239 2.898 34.706 8.056l-0.461-0.206c29.132 13.963 48.89 43.219 48.89 77.089 0 0.303-0.002 0.608-0.005 0.91v-0.046 293.978c-0.373 27.443-22.706 49.547-50.203 49.547-0.002 0-0.003 0-0.005 0v0z","M817.208 330.329c-81.808-0.375-147.979-66.78-147.979-148.639 0-82.091 66.549-148.64 148.64-148.64s148.639 66.547 148.64 148.639v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.727-66.253 147.979-147.979 147.979-0.465 0-0.929-0.002-1.394-0.006h0.071zM817.208 132.142c-27.364 0-49.547 22.183-49.547 49.547s22.183 49.547 49.547 49.547v0c27.364 0 49.547-22.183 49.547-49.547s-22.183-49.547-49.547-49.547v0z","M783.516 462.453h-32.371c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h32.371c43.857-0.949 79.431-35.147 82.562-78.34l0.015-0.274c0-19.158 0-42.28 0-70.027v-33.031c0-0.002 0-0.003 0-0.005 0-27.131 21.808-49.17 48.852-49.542h0.036c0.002 0 0.003 0 0.005 0 27.497 0 49.83 22.104 50.203 49.511v33.066c0 29.728 0 54.172 0 75.311-6.052 95.916-84.889 171.531-181.584 172.423h-0.088z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":182,"id":18,"name":"sort-numeric-up-alt","prevSize":80,"code":59799},"setIdx":0,"setId":1,"iconIdx":99},{"icon":{"paths":["M394.416 774.25l-80.59 80.59v-805.246c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v805.246l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 12.552-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M971.763 924.862l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416s54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416zM761.038 807.94l31.708-88.517 31.708 88.517h-63.416z","M632.886 415.556c12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517z"],"attrs":[{},{},{}],"tags":["sort-alpha-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":183,"id":19,"name":"sort-alpha-down-alt","prevSize":80,"code":59800},"setIdx":0,"setId":1,"iconIdx":100},{"icon":{"paths":["M299.293 14.584c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0l80.59-80.59v805.246c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-805.246l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145z","M971.763 924.862l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416s54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416zM761.038 807.94l31.708-88.517 31.708 88.517h-63.416z","M632.886 415.556c12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517z"],"attrs":[{},{},{}],"tags":["sort-alpha-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":184,"id":20,"name":"sort-alpha-up-alt","prevSize":80,"code":59801},"setIdx":0,"setId":1,"iconIdx":101},{"icon":{"paths":["M272.871 1023.949c-0.183 0.003-0.398 0.003-0.613 0.003-13.694 0-26.089-5.555-35.058-14.536v0l-165.145-167.127c-8.952-8.963-14.49-21.341-14.49-35.010s5.536-26.047 14.49-35.012v0c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l132.101 132.101 132.115-132.115c9.138-8.837 21.604-14.282 35.341-14.282s26.202 5.445 35.355 14.296l-0.014-0.014c8.952 8.963 14.49 21.341 14.49 35.010s-5.536 26.047-14.49 35.012v0l-165.145 165.145c-9.003 10.201-22.109 16.602-36.709 16.602-1.030 0-2.051-0.033-3.065-0.094l0.139 0.006z","M272.871 1023.949c-0.002 0-0.003 0-0.005 0-27.495 0-49.827-22.103-50.2-49.508v-924.845c0.373-27.441 22.705-49.543 50.2-49.543 0.002 0 0.003 0 0.005 0v0c27.077 0.373 48.882 22.409 48.882 49.539 0 0.002 0 0.003 0 0.005v0 924.81c0 0.002 0 0.003 0 0.005 0 27.13-21.807 49.167-48.848 49.539h-0.036z","M850.216 462.457c-27.077-0.373-48.882-22.409-48.882-49.539 0-0.002 0-0.003 0-0.005v0-268.195l-25.101 14.533c-6.952 3.915-15.262 6.222-24.111 6.222-27.515 0-49.821-22.305-49.821-49.821 0-18.667 10.266-34.936 25.459-43.468l0.251-0.13 42.937-22.46c12.816-9.446 28.919-15.117 46.348-15.117 12.457 0 24.238 2.898 34.704 8.055l-0.461-0.206c29.13 13.962 48.887 43.216 48.887 77.083 0 0.303-0.002 0.608-0.005 0.91v-0.046 292.636c-0.373 27.441-22.705 49.543-50.2 49.543-0.002 0-0.003 0-0.005 0v0z","M817.187 858.804c-81.802-0.375-147.969-66.775-147.969-148.629 0-82.086 66.545-148.63 148.63-148.63s148.629 66.543 148.63 148.629v0c0.002 0.198 0.002 0.432 0.002 0.666 0 81.722-66.249 147.969-147.969 147.969-0.464 0-0.929-0.002-1.393-0.006h0.071zM817.187 660.63c-27.362 0-49.543 22.182-49.543 49.543s22.182 49.543 49.543 49.543v0c27.362 0 49.543-22.182 49.543-49.543s-22.182-49.543-49.543-49.543v0z","M783.498 990.919h-32.369c-27.362 0-49.543-22.182-49.543-49.543s22.182-49.543 49.543-49.543v0h32.369c43.854-0.949 79.426-35.145 82.556-78.334l0.015-0.274c0-19.156 0-42.278 0-70.022v-33.028c0-0.002 0-0.003 0-0.005 0-27.13 21.807-49.167 48.848-49.539h0.036c0.002 0 0.003 0 0.005 0 27.495 0 49.827 22.103 50.2 49.508v33.064c0 29.726 0 54.168 0 75.306-6.373 95.766-85.015 171.188-181.539 172.409l-0.121 0.002z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":185,"id":21,"name":"sort-numeric-down","prevSize":80,"code":59802},"setIdx":0,"setId":1,"iconIdx":102},{"icon":{"paths":["M429.424 264.27c-12.552 0-25.103-4.625-35.012-14.534l-130.14-130.14-130.14 130.14c-19.157 19.157-50.867 19.157-70.025 0s-19.157-50.867 0-70.025l165.154-165.154c19.157-19.157 50.867-19.157 70.025 0l165.154 165.154c19.157 19.157 19.157 50.867 0 70.025-9.909 9.909-22.461 14.534-35.012 14.534z","M264.27 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z","M842.306 462.454c-27.085 0-49.546-22.461-49.546-49.546v-268.209l-25.764 13.873c-24.443 13.212-54.171 4.625-67.382-19.157s-4.625-54.171 19.157-67.382l42.939-23.782c23.782-17.175 54.171-19.818 80.594-7.927 29.728 13.873 48.885 44.262 48.885 78.612v293.973c0 27.085-22.461 49.546-49.546 49.546z","M809.275 858.821c-81.916 0-148.638-66.721-148.638-148.638s66.721-148.638 148.638-148.638 148.638 66.721 148.638 148.638-66.721 148.638-148.638 148.638zM809.275 660.638c-27.085 0-49.546 22.461-49.546 49.546s22.461 49.546 49.546 49.546 49.546-22.461 49.546-49.546-22.461-49.546-49.546-49.546z","M774.923 990.943h-31.709c-27.085 0-49.546-22.461-49.546-49.546s22.461-49.546 49.546-49.546h31.709c42.939 0 80.594-35.673 82.576-78.612 0.661-19.157 0.661-42.28 0.661-70.025v-33.030c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v33.030c0 29.728 0 54.171-1.321 75.31-4.625 95.128-86.54 172.42-181.668 172.42z"],"attrs":[{},{},{},{},{}],"tags":["sort-numeric-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":186,"id":22,"name":"sort-numeric-up","prevSize":80,"code":59803},"setIdx":0,"setId":1,"iconIdx":103},{"icon":{"paths":["M394.416 774.25l-80.59 80.59v-805.246c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v805.246l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M644.115 459.814c25.763 9.248 54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416zM824.453 279.476h-63.416l31.708-88.517 31.708 88.517z","M952.607 608.444c-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517 12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178z"],"attrs":[{},{},{}],"tags":["sort-alpha-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":187,"id":23,"name":"sort-alpha-down","prevSize":80,"code":59804},"setIdx":0,"setId":1,"iconIdx":104},{"icon":{"paths":["M299.293 14.584c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0l80.59-80.59v805.246c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-805.246l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145z","M644.115 459.814c25.763 9.248 54.168-3.963 63.416-29.726l18.497-51.525h134.097l18.497 51.525c7.266 20.478 26.424 33.028 46.901 33.028 5.284 0 11.229-0.661 16.515-2.643 25.763-9.248 38.974-37.653 29.726-63.416l-112.959-316.417c-11.229-28.405-36.992-46.901-66.058-46.901s-54.828 18.497-66.058 48.223l-112.298 315.096c-9.248 25.763 3.963 54.168 29.726 63.416zM824.453 279.476h-63.416l31.708-88.517 31.708 88.517z","M952.607 608.444c-12.552-29.065-38.974-46.901-69.361-46.901h-205.44c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543h157.878l-186.944 194.871c-22.46 23.781-28.405 58.131-15.854 88.517 12.552 29.065 38.974 46.901 69.361 46.901h206.762c27.083 0 49.543-22.46 49.543-49.543s-22.46-49.543-49.543-49.543h-157.878l186.283-193.549c22.46-23.781 29.065-58.791 15.854-89.178z"],"attrs":[{},{},{}],"tags":["sort-alpha-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":188,"id":24,"name":"sort-alpha-up","prevSize":80,"code":59805},"setIdx":0,"setId":1,"iconIdx":105},{"icon":{"paths":["M412.908 264.27c-12.552 0-25.103-4.625-35.012-14.534l-130.14-130.14-130.14 130.14c-19.157 19.157-50.867 19.157-70.025 0s-19.157-50.867 0-70.025l165.154-165.154c19.157-19.157 50.867-19.157 70.025 0l165.154 165.154c19.157 19.157 19.157 50.867 0 70.025-9.909 9.909-22.461 14.534-35.012 14.534z","M247.755 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z","M776.245 1023.975c-12.552 0-25.103-4.625-35.012-14.534l-165.154-165.154c-19.157-19.157-19.157-50.867 0-70.025s50.867-19.157 70.025 0l130.14 130.14 130.14-130.14c19.157-19.157 50.867-19.157 70.025 0s19.157 50.867 0 70.025l-165.154 165.154c-9.909 9.909-22.461 14.534-35.012 14.534z","M776.245 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z"],"attrs":[{},{},{},{}],"tags":["sort-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":189,"id":25,"name":"sort-alt","prevSize":80,"code":59806},"setIdx":0,"setId":1,"iconIdx":106},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":190,"id":26,"name":"sort-amount-up","prevSize":80,"code":59807},"setIdx":0,"setId":1,"iconIdx":107},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":180,"id":27,"name":"sort-amount-down","prevSize":80,"code":59808},"setIdx":0,"setId":1,"iconIdx":108},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":179,"id":28,"name":"sort-amount-down-alt","prevSize":80,"code":59809},"setIdx":0,"setId":1,"iconIdx":109},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":178,"id":29,"name":"sort-amount-up-alt","prevSize":80,"code":59810},"setIdx":0,"setId":1,"iconIdx":110},{"icon":{"paths":["M516.624 0.063s-4.624 0-7.266 0c-250.354 0-468.339 184.297-507.973 432.008-5.284 33.028 3.963 67.377 26.423 93.139 21.799 25.762 52.844 40.295 85.874 40.295h3.963c114.938 0 201.471 28.405 256.958 83.892 56.148 56.148 83.892 144.002 83.231 260.922 0 33.028 14.533 64.075 39.634 85.874 21.137 18.496 48.222 28.405 75.304 27.744 5.945 0 11.89 0 17.835-1.321 250.354-40.295 435.971-261.583 432.669-515.239-3.963-275.455-231.196-503.349-507.312-507.312zM575.414 924.852c-3.963 0-9.247-0.661-13.211-3.963-1.982-1.982-5.284-5.284-5.284-9.908 0.661-144.663-36.991-256.299-112.295-331.603-74.643-74.643-184.958-112.956-326.978-112.956h-3.963c-5.284 0-8.588-3.302-10.57-5.284-1.321-1.982-5.284-6.606-3.963-13.211 32.368-199.489 208.077-348.777 410.209-348.777 1.982 0 3.963 0 5.945 0v0c218.647 3.302 406.246 190.242 409.548 409.548 2.643 204.775-147.306 383.786-348.777 416.154zM375.925 315.152c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM575.414 231.921c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM642.13 315.152c0-36.331 29.725-66.716 66.716-66.716s66.716 29.725 66.716 66.716-29.725 66.716-66.716 66.716-66.716-29.725-66.716-66.716zM858.134 514.643c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM774.903 714.132c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716z"],"attrs":[{}],"tags":["palette"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":257,"id":30,"name":"palette","prevSize":80,"code":59797},"setIdx":0,"setId":1,"iconIdx":111},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["undo"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":256,"id":31,"name":"undo","prevSize":80,"code":59796},"setIdx":0,"setId":1,"iconIdx":112},{"icon":{"paths":["M921.582 789.931h-819.163c-56.418-0.33-102.065-45.976-102.396-102.364v-585.149c0.33-56.418 45.976-102.065 102.364-102.396h819.194c56.418 0.33 102.065 45.976 102.396 102.364v585.149c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 87.791c-8.079 0-14.628 6.55-14.628 14.628v0 585.117c0 8.079 6.55 14.628 14.628 14.628v0h819.163c8.079 0 14.628-6.55 14.628-14.628v0-585.117c0-8.079-6.55-14.628-14.628-14.628v0z","M687.535 1023.977h-175.535c-24.105-0.325-43.559-19.779-43.884-43.852v-234.079c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 190.163h131.651c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M512 1023.977h-175.535c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.535c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["desktop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":175,"id":32,"name":"desktop","prevSize":80,"code":59795},"setIdx":0,"setId":1,"iconIdx":113},{"icon":{"paths":["M809.27 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M809.27 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M908.36 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M214.73 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M214.73 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M313.82 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M512 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M512 693.665c-27.214-0.367-49.178-22.331-49.545-49.509v-594.576c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 594.541c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M611.090 693.665h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-v"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":174,"id":33,"name":"sliders-v","prevSize":80,"code":59793},"setIdx":0,"setId":1,"iconIdx":114},{"icon":{"paths":["M974.421 264.275h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 264.275h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 363.365c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 858.815h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 858.815h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 957.906c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 561.545h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 561.545h-594.541c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h594.541c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 660.635c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-h"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":173,"id":34,"name":"sliders-h","prevSize":80,"code":59794},"setIdx":0,"setId":1,"iconIdx":115},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M438.902 628.957c-24.091-0.325-43.534-19.768-43.859-43.827v-292.424c0-24.222 19.636-43.859 43.859-43.859s43.859 19.636 43.859 43.859v0 292.393c-0.325 24.091-19.768 43.534-43.827 43.859h-0.032z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{},{}],"tags":["search-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":172,"id":35,"name":"search-plus","prevSize":80,"code":59791},"setIdx":0,"setId":1,"iconIdx":116},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c-0.332 243.061-197.282 440.011-440.311 440.344h-0.033zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{}],"tags":["search-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":171,"id":36,"name":"search-minus","prevSize":80,"code":59792},"setIdx":0,"setId":1,"iconIdx":117},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M656.524 506.734c-7.496-5.775-17.020-9.255-27.356-9.255-13.907 0-26.344 6.301-34.608 16.205l-0.059 0.071-82.501 103.566-82.501-105.321c-8.353-9.812-20.716-15.996-34.521-15.996-24.992 0-45.251 20.259-45.251 45.251 0 11.185 4.058 21.422 10.782 29.32l-0.053-0.064 93.034 117.023-93.034 117.023c-5.992 7.47-9.615 17.061-9.615 27.5 0 24.376 19.76 44.136 44.136 44.136 13.937 0 26.366-6.461 34.454-16.55l0.067-0.086 82.501-101.81 82.501 105.321c8.276 9.979 20.653 16.31 34.509 16.384h0.012c1.085 0.096 2.348 0.149 3.622 0.149 24.236 0 43.884-19.648 43.884-43.884 0-12.183-4.964-23.206-12.981-31.157l-0.003-0.003-93.034-117.023 95.374-117.023c5.757-7.489 9.225-16.998 9.225-27.316 0-14.937-7.268-28.175-18.461-36.373l-0.126-0.088z"],"attrs":[{},{}],"tags":["file-excel"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":170,"id":37,"name":"file-excel","prevSize":80,"code":59790},"setIdx":0,"setId":1,"iconIdx":118},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M599.182 678.758c-35.612-22.599-62.527-56.14-76.26-95.834l-0.389-1.295c8.513-24.598 13.428-52.947 13.428-82.444 0-12.194-0.841-24.192-2.466-35.938l0.154 1.359c-3.892-22.255-23.068-38.954-46.145-38.954-18.984 0-35.328 11.301-42.673 27.543l-0.119 0.295c-1.82 12.259-2.859 26.407-2.859 40.798 0 35.745 6.41 69.992 18.145 101.654l-0.657-2.026c-26.663 62.22-51.535 112.192-78.718 160.691l4.409-8.561c-41.543 23.405-98.3 58.512-107.076 98.885-7.021 32.766 54.416 117.023 159.151-65.534 38.752-15.060 86.483-29.549 135.472-40.728l7.296-1.4c33.675 19.598 73.544 32.44 116.101 35.636l0.922 0.056c0.37 0.010 0.806 0.016 1.244 0.016 26.499 0 47.98-21.481 47.98-47.98 0-12.689-4.926-24.228-12.97-32.809l0.025 0.026c-24.575-25.16-97.714-18.139-133.992-13.457zM319.497 854.293c16.89-28.581 38.169-52.658 63.208-72.128l0.569-0.426c-39.787 63.193-63.778 74.31-63.778 73.139zM490.35 455.829c15.213 0 14.043 67.289 3.511 85.427-4.439-14.87-6.994-31.954-6.994-49.637 0-12.459 1.269-24.62 3.683-36.365l-0.199 1.16zM439.445 741.365c17.504-31.081 34.829-68.095 49.5-106.424l1.99-5.919c15.998 29.397 37.215 53.976 62.634 73.317l0.558 0.407c-44.504 11.253-82.688 24.668-119.265 41.035l4.582-1.832zM714.451 730.833s-10.532 12.873-77.821-16.384c73.139-4.68 85.427 12.287 77.821 16.968z"],"attrs":[{},{}],"tags":["file-pdf"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":169,"id":38,"name":"file-pdf","prevSize":80,"code":59789},"setIdx":0,"setId":1,"iconIdx":119},{"icon":{"paths":["M863.086 1024h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h518.437c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-518.437c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-451.145c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 451.145c0 88.87-72.044 160.914-160.914 160.914v0z","M424.229 702.172c-11.709-0.922-21.992-6.372-29.216-14.581l-0.041-0.048-175.543-175.543c-2.703-5.532-4.284-12.038-4.284-18.913 0-24.237 19.648-43.886 43.886-43.886 6.875 0 13.381 1.581 19.174 4.4l-0.261-0.114 144.531 144.531 499.127-495.616c5.532-2.703 12.038-4.284 18.913-4.284 24.237 0 43.886 19.648 43.886 43.886 0 6.875-1.581 13.381-4.4 19.174l0.114-0.261-526.629 526.629c-7.264 8.256-17.547 13.707-29.107 14.619l-0.151 0.010z"],"attrs":[{},{}],"tags":["check-square"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":168,"id":39,"name":"check-square","prevSize":80,"code":59788},"setIdx":0,"setId":1,"iconIdx":120},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M636.121 682.666c-0.064 0-0.141 0-0.217 0-12.783 0-24.345-5.222-32.671-13.649l-153.295-153.295-153.29 153.29c-8.289 7.74-19.456 12.492-31.731 12.492-25.706 0-46.545-20.839-46.545-46.545 0-12.276 4.752-23.441 12.518-31.759l-0.025 0.028 186.182-186.182c8.42-8.41 20.049-13.613 32.892-13.613s24.471 5.201 32.893 13.613v0l153.29 153.29 215.35-215.35c8.289-7.74 19.456-12.492 31.731-12.492 25.706 0 46.545 20.839 46.545 46.545 0 12.276-4.752 23.441-12.518 31.759l0.025-0.028-248.243 248.243c-8.33 8.432-19.892 13.654-32.675 13.654-0.076 0-0.153 0-0.228 0h0.012z","M915.393 626.192c-25.567-0.345-46.201-20.979-46.545-46.512v-176.285h-170.666c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h217.212c25.567 0.345 46.201 20.979 46.545 46.512v222.831c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["chart-line"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":167,"id":40,"name":"chart-line","prevSize":80,"code":59787},"setIdx":0,"setId":1,"iconIdx":121},{"icon":{"paths":["M431.778 504.757c-115.379 0-208.912-93.532-208.912-208.912s93.532-208.912 208.912-208.912c115.379 0 208.912 93.532 208.912 208.912v0c-0.316 115.251-93.66 208.596-208.881 208.912h-0.030zM431.778 170.499c-69.227 0-125.347 56.12-125.347 125.347s56.12 125.347 125.347 125.347c69.227 0 125.347-56.12 125.347-125.347v0c0-69.227-56.12-125.347-125.347-125.347v0z","M41.809 894.726c-23.076 0-41.782-18.707-41.782-41.782v0c0-264.622 302.504-264.622 431.751-264.622 40.111 0 75.766 0 108.076 3.9 21.638 1.734 38.542 19.721 38.542 41.657 0 1.025-0.037 2.041-0.11 3.046l0.008-0.134c-2.011 21.692-20.122 38.543-42.169 38.543-1.041 0-2.072-0.038-3.093-0.111l0.137 0.008c-30.083 0-63.509-3.343-101.391-3.343-288.576 0-348.186 72.423-348.186 181.057 0.003 0.167 0.004 0.364 0.004 0.561 0 22.767-18.457 41.225-41.225 41.225-0.197 0-0.394-0.001-0.59-0.004h0.030z","M549.326 937.066c-11.533-0.010-21.972-4.693-29.526-12.255v0c-7.671-7.32-12.439-17.622-12.439-29.037 0-1.349 0.067-2.683 0.197-3.998l-0.013 0.166 8.914-106.963c0.738-10.242 5.062-19.352 11.708-26.194l-0.009 0.010 307.518-307.518c20.408-18.948 47.843-30.576 77.993-30.576s57.585 11.627 78.066 30.642l-0.072-0.067c19.978 20.131 32.325 47.862 32.325 78.475 0 0.614-0.005 1.227-0.014 1.838l0.001-0.093c0.008 0.488 0.013 1.065 0.013 1.643 0 28.208-11.272 53.784-29.557 72.47l-307.499 307.499c-6.609 6.771-15.516 11.272-25.457 12.242l-0.17 0.013-108.076 10.028zM657.402 885.256v0zM598.35 806.705l-3.343 42.34 43.454-3.9 296.932-296.932c3.138-3.741 5.043-8.607 5.043-13.917 0-0.396-0.010-0.789-0.031-1.178l0.003 0.055c-0.022-8.097-2.969-15.5-7.838-21.216l0.038 0.046c-5.22-3.914-11.806-6.267-18.942-6.267s-13.722 2.354-19.024 6.327l0.082-0.059z"],"attrs":[{},{},{}],"tags":["user-edit"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":166,"id":41,"name":"user-edit","prevSize":80,"code":59786},"setIdx":0,"setId":1,"iconIdx":122},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 568.889c-23.436-0.316-42.351-19.231-42.667-42.636v-199.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 199.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 739.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["exclamation-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":165,"id":42,"name":"exclamation-circle","prevSize":80,"code":59785},"setIdx":0,"setId":1,"iconIdx":123},{"icon":{"paths":["M897.818 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M126.182 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M229.321 342.011v407.465c0 37.624 30.5 68.122 68.122 68.122v0h43.293v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0 0-144.522h103.139v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-144.522h43.293c37.624 0 68.122-30.5 68.122-68.122v0-407.465z","M787.039 257.334c-19.494-64.041-60.923-116.427-115.35-149.595l-1.159-0.657-9.55-5.73-10.187-5.093 11.46-19.737 33.743-63.667c0.321-0.883 0.507-1.901 0.507-2.963 0-2.96-1.443-5.584-3.665-7.206l-0.025-0.018h-4.457c-3.404 0.157-6.379 1.864-8.255 4.426l-0.021 0.030-34.38 59.21-10.823 19.737-10.187-4.457-10.823-3.82c-30.354-10.882-65.375-17.173-101.867-17.173s-71.511 6.291-104.038 17.846l2.171-0.673-10.187 3.82-10.823 4.457-10.823-19.737-34.38-63.667c-1.592-2.804-4.559-4.665-7.958-4.665-5.038 0-9.122 4.084-9.122 9.122 0 1.637 0.431 3.174 1.186 4.502l-0.024-0.045 33.743 63.667 11.46 19.737-10.187 5.093-9.55 5.73c-55.806 33.938-97.174 86.897-115.417 149.695l-0.455 1.831c-4.717 15.122-7.703 32.57-8.27 50.627l-0.007 0.307h565.357c-0.686-18.4-3.432-35.851-8.017-52.541l0.378 1.609zM384.668 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0zM639.332 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0z"],"attrs":[{},{},{},{}],"tags":["android"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":164,"id":43,"name":"android","prevSize":80,"code":59781},"setIdx":0,"setId":1,"iconIdx":124},{"icon":{"paths":["M1008.591 433.288l-5.759-22.397h-476.114v202.221h284.773c-32.683 123.892-143.735 213.758-275.775 213.758-1.138 0-2.275-0.006-3.409-0.019l0.172 0.001c-86.669-0.738-165.327-34.432-224.185-89.141l0.207 0.19c-58.421-57.606-94.785-137.451-95.35-225.791v-0.106c1.039-88.017 36.49-167.558 93.495-225.963l-0.064 0.066c57.221-54.292 134.738-87.683 220.053-87.683 0.93 0 1.86 0.004 2.788 0.012l-0.142-0.001c73.95 0.586 141.235 28.652 192.25 74.471l-0.268-0.238 140.787-144.626c-88.734-79.432-206.552-127.99-335.711-127.99-0.54 0-1.080 0.001-1.62 0.003h0.084c-0.919-0.006-2.007-0.009-3.094-0.009-142.761 0-272.106 57.428-366.198 150.443l0.049-0.049c-90.236 93.627-145.825 221.183-145.825 361.724 0 137.597 53.284 262.749 140.344 355.947l-0.279-0.301c96.859 96.51 230.481 156.177 378.041 156.177 2.082 0 4.162-0.012 6.238-0.036l-0.316 0.003c1.053 0.009 2.296 0.013 3.543 0.013 134.433 0 255.872-55.642 342.541-145.151l0.123-0.127c82.61-90.584 133.206-211.608 133.206-344.45 0-3.543-0.036-7.076-0.108-10.602l0.009 0.526c0.105-4.284 0.163-9.328 0.163-14.387 0-26.957-1.687-53.521-4.962-79.591l0.318 3.106z"],"attrs":[{}],"tags":["google"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":163,"id":44,"name":"google","prevSize":80,"code":59782},"setIdx":0,"setId":1,"iconIdx":125},{"icon":{"paths":["M800.988 541.411c-0.025-1.227-0.040-2.673-0.040-4.124 0-81.14 45.665-151.616 112.697-187.127l1.149-0.554c-43.688-60.224-112.883-99.642-191.399-102.285l-0.408-0.010c-81.199-6.394-169.43 47.312-202.037 47.312s-113.166-44.755-174.544-44.755c-127.87 0-262.775 101.657-262.775 304.332 0.671 66.632 12.562 130.276 33.869 189.424l-1.262-4.011c28.131 81.837 133.625 287.070 243.594 283.874 57.542 0 98.461-40.919 173.266-40.919s109.97 40.919 174.544 40.919c110.608 0 206.511-188.61 234.004-272.365-83.223-34.69-140.659-115.384-140.659-209.49 0-0.076 0-0.154 0-0.231v0.012zM673.117 166.109c33.682-37.846 54.259-88 54.259-142.959 0-7.972-0.433-15.844-1.277-23.592l0.085 0.959c-61.9 6.974-115.875 36.341-154.514 79.679l-0.211 0.24c-37.077 39.007-59.884 91.883-59.884 150.086 0 4.782 0.154 9.526 0.457 14.231l-0.033-0.641c1.605 0.048 3.493 0.075 5.387 0.075 63.128 0 119.134-30.497 154.087-77.563l0.366-0.514z"],"attrs":[{}],"tags":["apple"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":162,"id":45,"name":"apple","prevSize":80,"code":59783},"setIdx":0,"setId":1,"iconIdx":126},{"icon":{"paths":["M0.001 0.001h480v480h-480zM543.999 0.001h480v480h-480zM0.001 543.999h480v480h-480zM543.999 543.999h480v480h-480z"],"attrs":[{}],"tags":["microsoft"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":161,"id":46,"name":"microsoft","prevSize":80,"code":59784},"setIdx":0,"setId":1,"iconIdx":127},{"icon":{"paths":["M512 966.541c-12.142-0.011-23.132-4.94-31.084-12.902v0l-397.063-398.237c-51.836-52.853-83.828-125.328-83.828-205.276s31.993-152.425 83.874-205.324l-0.045 0.047c52.537-52.531 125.112-85.022 205.276-85.022s152.739 32.491 205.277 85.023v0l17.595 15.249 16.423-16.423c52.328-52.883 124.914-85.631 205.15-85.631 0.25 0 0.502 0 0.752 0.001h-0.038c0.384-0.001 0.839-0.003 1.294-0.003 79.947 0 152.3 32.511 204.559 85.034l0.012 0.012c51.836 52.853 83.828 125.328 83.828 205.276s-31.993 152.425-83.874 205.324l0.045-0.047-397.063 398.237c-7.714 8.616-18.706 14.16-30.998 14.66l-0.087 0.003zM289.714 145.434c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l0.010-0.010c-36.735 36.902-59.445 87.793-59.445 143.987s22.71 107.086 59.452 143.994l-0.007-0.007 365.979 368.325 365.392-367.151c36.877-36.837 59.687-87.747 59.687-143.987s-22.81-107.15-59.686-143.985l-0.001-0.001c-36.111-36.238-86.066-58.659-141.257-58.659-0.65 0-1.3 0.003-1.949 0.010l0.099-0.001c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l-47.497 47.497c-8.080 7.677-19.030 12.4-31.084 12.4s-23.006-4.723-31.104-12.418l0.019 0.018-47.507-47.507c-36.581-36.947-87.314-59.823-143.391-59.823-0.107 0-0.213 0-0.32 0h0.016z"],"attrs":[{}],"tags":["heart"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":160,"id":47,"name":"heart","prevSize":80,"code":59780},"setIdx":0,"setId":1,"iconIdx":128},{"icon":{"paths":["M746.047 0.023h-468.093c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h468.125c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM760.674 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-468.093c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h468.093c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["mobile"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":159,"id":48,"name":"mobile","prevSize":80,"code":59778},"setIdx":0,"setId":1,"iconIdx":129},{"icon":{"paths":["M863.070 0.023h-702.14c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h702.172c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM877.699 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-702.14c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h702.14c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["tablet"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":220,"id":49,"name":"tablet","prevSize":80,"code":59779},"setIdx":0,"setId":1,"iconIdx":130},{"icon":{"paths":["M687.134 672.539c-0.215 0-0.469 0.001-0.724 0.001-92.498 0-176.242-37.479-236.875-98.078l0.001 0.001c-61.305-61.014-99.243-145.459-99.243-238.766 0-186.032 150.809-336.841 336.841-336.841s336.841 150.809 336.841 336.841c0 186.032-150.808 336.84-336.84 336.841v0zM687.134 88.761c-136.764 0.345-247.499 111.293-247.499 248.106 0 68.362 27.648 130.267 72.373 175.141l-0.007-0.007c44.929 45.079 107.076 72.972 175.74 72.972 137.026 0 248.106-111.081 248.106-248.106s-111.081-248.106-248.106-248.106c-0.213 0-0.427 0-0.639 0.001h0.033z","M74.166 993.618c-11.682-0.919-21.941-6.357-29.147-14.547l-0.041-0.048c-6.919-7.71-11.15-17.955-11.15-29.188s4.231-21.479 11.185-29.23l-0.036 0.041 377.122-377.705c7.941-7.869 18.873-12.731 30.94-12.731 24.281 0 43.963 19.683 43.963 43.963 0 12.213-4.98 23.263-13.020 31.229l-0.003 0.003-380.624 373.619c-7.248 8.237-17.507 13.675-29.039 14.585l-0.151 0.010z","M278.488 1022.806c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-7.28-7.798-11.75-18.301-11.75-29.848 0-24.181 19.603-43.783 43.783-43.783 11.548 0 22.050 4.47 29.874 11.775l-0.026-0.023 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z","M395.245 906.051c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-8.584-8.015-13.935-19.399-13.935-32.033 0-24.181 19.603-43.783 43.783-43.783 12.634 0 24.018 5.351 32.008 13.909l0.023 0.026 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{},{},{}],"tags":["key"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":219,"id":50,"name":"key","prevSize":80,"code":59777},"setIdx":0,"setId":1,"iconIdx":131},{"icon":{"paths":["M468.112 906.989c0 48.569-39.207 87.775-87.775 87.775s-87.775-39.207-87.775-87.775 39.207-87.775 87.775-87.775 87.775 39.207 87.775 87.775zM760.696 819.214c-48.569 0-87.775 39.207-87.775 87.775s39.207 87.775 87.775 87.775 87.775-39.207 87.775-87.775-39.207-87.775-87.775-87.775zM1022.852 259.207l-117.033 468.135c-4.681 19.311-22.236 33.355-42.718 33.355h-585.169c-21.066 0-39.207-15.214-43.302-36.28l-110.597-607.405h-80.168c-23.991 0-43.888-19.896-43.888-43.888s19.896-43.888 43.888-43.888h117.033c21.066 0 39.207 15.214 43.302 36.28l25.163 139.271h750.771c13.458 0 26.333 6.436 34.525 16.969s11.119 24.577 8.192 37.451zM923.958 292.562h-678.795l69.050 380.359h514.363l95.383-380.359z"],"attrs":[{}],"tags":["shopping-cart"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":156,"id":51,"name":"shopping-cart","prevSize":80,"code":59776},"setIdx":0,"setId":1,"iconIdx":132},{"icon":{"paths":["M46.723 830.79c-0.231 0.004-0.504 0.007-0.777 0.007-24.867 0-45.027-20.159-45.027-45.027 0-5.382 0.944-10.545 2.676-15.329l-0.098 0.314 75.044-247.348c-14.665-39.037-23.418-84.145-24.012-131.219l-0.003-0.259c0-0.259-0.001-0.566-0.001-0.874 0-54.129 11.264-105.629 31.575-152.281l-0.955 2.464c60.427-141.25 198.214-238.423 358.696-238.423 106.632 0 203.244 42.901 273.517 112.384l-0.037-0.035c34.184 34.714 62.103 75.715 81.849 121.093l1 2.581c19.107 44.313 30.22 95.904 30.22 150.090s-11.112 105.775-31.182 152.616l0.962-2.526c-20.746 47.959-48.666 88.96-82.9 123.725l0.051-0.051c-70.377 70.256-167.536 113.703-274.844 113.703-48.549 0-95.021-8.893-137.875-25.139l2.675 0.889-247.348 76.845c-3.958 1.137-8.504 1.794-13.204 1.801h-0.004zM442.359 91.749c-0.253-0.001-0.554-0.001-0.856-0.001-41.547 0-81.081 8.613-116.916 24.15l1.904-0.734c-71.28 30.615-127.108 85.859-157.736 154.781l-0.758 1.912c-14.788 34.299-23.39 74.229-23.39 116.169s8.602 81.87 24.134 118.125l-0.744-1.956c1.7 4.555 2.682 9.817 2.682 15.309s-0.984 10.754-2.783 15.621l0.101-0.312-55.232 180.107 180.107-55.232c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101c34.014 14.517 73.588 22.957 115.132 22.957 122.867 0 228.493-73.819 274.946-179.525l0.754-1.926c13.056-32.416 20.631-70.004 20.631-109.36 0-163.117-130.105-295.846-292.2-300.074l-0.391-0.008z","M977.277 1022.304c-1.984 0.28-4.275 0.439-6.603 0.439s-4.621-0.16-6.864-0.469l0.26 0.030-247.348-75.044c-40.428 15.733-87.225 24.849-136.153 24.849-158.064 0-293.904-95.147-353.373-231.291l-0.967-2.482c-2.862-5.665-4.539-12.349-4.539-19.423 0-18.267 11.175-33.923 27.063-40.506l0.291-0.107c5.517-2.599 11.984-4.116 18.806-4.116 18.319 0 34.084 10.94 41.115 26.643l0.114 0.286c15.121 35.516 35.349 65.946 60.152 91.977l-0.117-0.122c54.202 53.624 128.774 86.753 211.084 86.753 41.688 0 81.392-8.499 117.473-23.857l-1.963 0.743c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101 180.107 55.232-55.232-180.107c-1.7-4.555-2.682-9.817-2.682-15.309s0.984-10.754 2.783-15.621l-0.101 0.312c14.803-33.932 23.415-73.467 23.415-115.014 0-0.301 0-0.602-0.001-0.902v0.046c0.001-0.319 0.001-0.697 0.001-1.075 0-81.912-33.275-156.053-87.045-209.642l-0.008-0.008c-12.456-15.658-25.63-29.595-39.895-42.336l-0.328-0.288c-13.187-8.012-21.861-22.298-21.861-38.61 0-24.867 20.159-45.027 45.027-45.027 10.297 0 19.786 3.456 27.372 9.273l-0.107-0.079c22.529 14.653 42.156 30.276 60.175 47.561l-0.139-0.132c34.393 34.592 62.347 75.63 81.881 121.138l0.968 2.536c19.357 44.266 30.62 95.849 30.62 150.064 0 0.431-0.001 0.863-0.003 1.293v-0.066c-0.136 48.508-8.929 94.919-24.912 137.831l0.898-2.751 75.044 247.348c1.634 4.472 2.578 9.633 2.578 15.015 0 24.867-20.159 45.027-45.027 45.027-0.273 0-0.546-0.003-0.818-0.007h0.041z"],"attrs":[{},{}],"tags":["comments"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":155,"id":52,"name":"comments","prevSize":80,"code":59774},"setIdx":0,"setId":1,"iconIdx":133},{"icon":{"paths":["M89.22 977.058c-0.217 0.004-0.473 0.007-0.729 0.007-23.349 0-42.278-18.929-42.278-42.278 0-5.053 0.887-9.901 2.513-14.393l-0.093 0.294 90.193-295.946c-18.558-46.704-29.318-100.819-29.318-157.447 0-0.732 0.001-1.463 0.006-2.195v0.113c0-0.201 0-0.439 0-0.677 0-62.834 12.85-122.668 36.068-177.015l-1.118 2.942c23.991-55.124 56.28-102.224 95.856-142.080l-0.026 0.026c39.776-39.941 87.133-72.3 139.735-94.736l2.882-1.092c51.475-22.443 111.446-35.5 174.466-35.5s122.993 13.057 177.355 36.615l-2.889-1.115c161.557 70.486 272.594 228.494 273.398 412.529v0.103c-0.378 123.676-50.484 235.576-131.361 316.819l0.016-0.016c-39.83 39.549-86.93 71.841-139.11 94.681l-2.944 1.149c-51.439 22.133-111.317 35.003-174.201 35.003-57.536 0-112.557-10.776-163.152-30.417l3.076 1.050-295.946 90.193c-3.604 1.586-7.788 2.774-12.162 3.355l-0.239 0.026zM557.097 103.314c-149.484 0.668-277.735 90.884-333.925 219.741l-0.917 2.358c-17.678 41.648-27.953 90.087-27.953 140.927s10.274 99.278 28.861 143.354l-0.909-2.427c1.596 4.277 2.518 9.218 2.518 14.374s-0.923 10.098-2.613 14.668l0.095-0.293-69.336 235.065 233.938-71.027c4.277-1.596 9.218-2.518 14.374-2.518s10.098 0.923 14.668 2.613l-0.293-0.095c41.635 17.765 90.074 28.091 140.927 28.091s99.291-10.328 143.335-28.999l-2.408 0.907c131.638-56.462 222.168-184.951 222.168-334.586 0-51.2-10.598-99.924-29.723-144.098l0.907 2.35c-56.972-130.557-184.848-220.199-333.686-220.41h-0.028z"],"attrs":[{}],"tags":["comment"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":154,"id":53,"name":"comment","prevSize":80,"code":59775},"setIdx":0,"setId":1,"iconIdx":134},{"icon":{"paths":["M921.588 175.553h-219.422v-73.14c-4.292-57.542-52.035-102.602-110.299-102.602-2.366 0-4.715 0.074-7.043 0.221l0.318-0.016h-146.282c-2.010-0.13-4.36-0.204-6.725-0.204-58.266 0-106.007 45.060-110.277 102.234l-0.022 0.368v73.14h-219.422c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM409.603 102.412c0-4.681 11.118-14.629 29.256-14.629h146.282c18.139 0 29.256 9.947 29.256 14.629v73.14h-204.793zM102.412 263.322h819.175c8.079 0 14.629 6.55 14.629 14.629v0 190.166h-848.432v-190.166c0-8.079 6.55-14.629 14.629-14.629v0zM321.834 555.884h380.331v87.769h-380.331zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-307.191h146.282v131.653c0.325 24.105 19.78 43.559 43.853 43.884h468.131c24.105-0.325 43.559-19.78 43.884-43.853v-131.685h146.282v307.191c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["briefcase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":153,"id":54,"name":"briefcase","prevSize":80,"code":59773},"setIdx":0,"setId":1,"iconIdx":135},{"icon":{"paths":["M983.875 747.107c-4.979 0-116.724-19.915-116.724-345.747 0-230.128-133.873-373.406-355.151-373.406s-355.151 143.278-355.151 373.406c0 331.917-115.617 345.747-115.065 345.747-22.914 0-41.49 18.576-41.49 41.49s18.576 41.49 41.49 41.49v0h267.193c19.311 95.868 102.854 167.053 203.023 167.053s183.711-71.186 202.798-165.727l0.223-1.325h267.746c22.914 0 41.49-18.576 41.49-41.49s-18.576-41.49-41.49-41.49v0zM512 913.065c-53.673-0.105-99.33-34.318-116.453-82.114l-0.271-0.865h233.448c-17.395 48.661-63.050 82.874-116.711 82.979h-0.013zM166.807 747.107c39.83-60.299 73.022-165.958 73.022-345.747s99.575-290.427 272.172-290.427 272.172 105.66 272.172 290.427 33.192 285.448 73.022 345.747z"],"attrs":[{}],"tags":["bell"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":218,"id":55,"name":"bell","prevSize":80,"code":59772},"setIdx":0,"setId":1,"iconIdx":136},{"icon":{"paths":["M333.040 1023.149c-0.395 0.001-0.861 0.003-1.328 0.003-89.93 0-171.755-34.697-232.82-91.434l0.214 0.196c-60.481-56.047-98.213-135.906-98.213-224.578s37.732-168.531 98.016-224.397l0.197-0.181 442.138-417.574c43.713-40.007 102.187-64.52 166.387-64.52s122.673 24.512 166.573 64.688l-0.186-0.169c46.303 43.075 75.506 103.992 76.611 171.742l0.003 0.2c0.003 0.343 0.003 0.748 0.003 1.154 0 58.355-24.702 110.942-64.219 147.873l-0.117 0.107-442.723 418.16c-25.698 23.896-60.263 38.561-98.253 38.561s-72.555-14.665-98.342-38.643l0.089 0.082c-25.889-23.908-42.047-58.024-42.047-95.913s16.158-72.005 41.958-95.834l0.088-0.081 409.387-385.408c7.935-7.925 18.894-12.829 30.996-12.829s23.061 4.902 30.997 12.829v0c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-409.387 385.408c-8.981 7.868-14.621 19.359-14.621 32.167s5.64 24.299 14.572 32.124l0.049 0.042c10.156 8.727 23.465 14.040 38.014 14.040s27.858-5.313 38.092-14.105l-0.078 0.066 442.723-416.989c21.667-21.246 35.097-50.823 35.097-83.538 0-0.444-0.003-0.888-0.007-1.331v0.067c-1.049-42.681-19.73-80.802-49.009-107.504l-0.118-0.107c-27.771-25.797-65.112-41.627-106.148-41.627s-78.377 15.83-106.245 41.716l0.097-0.090-440.383 416.989c-43.561 40.015-70.766 97.247-70.766 160.83s27.203 120.815 70.608 160.688l0.158 0.143c45.833 42.805 107.572 69.087 175.451 69.087s129.619-26.282 175.601-69.225l-0.149 0.137 438.043-414.651c7.869-8.069 18.849-13.075 30.996-13.075s23.127 5.006 30.988 13.066l0.008 0.010c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-441.552 416.405c-60.773 56.558-142.541 91.272-232.414 91.272-1.768 0-3.534-0.014-5.296-0.040l0.267 0.003z"],"attrs":[{}],"tags":["paperclip"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":151,"id":56,"name":"paperclip","prevSize":80,"code":59771},"setIdx":0,"setId":1,"iconIdx":137},{"icon":{"paths":["M833.7 643.604c-62.907 0.233-118.56 31.082-152.865 78.411l-0.38 0.551-309.417-152.076c5.76-17.446 9.17-37.537 9.358-58.398v-0.093c-0.189-20.954-3.597-41.044-9.755-59.892l0.396 1.402 309.417-152.076c34.79 46.82 89.928 76.825 152.074 76.825 104.34 0 188.925-84.585 188.925-188.925s-84.585-188.925-188.925-188.925c-104.34 0-188.925 84.585-188.925 188.925 0 0.34 0.001 0.68 0.003 1.020v-0.052c0.152 10.439 1.209 20.53 3.098 30.325l-0.173-1.080-319.945 160.849c-34.095-36.053-82.261-58.491-135.669-58.491-0.217 0-0.432 0-0.647 0.001h0.033c-104.986 0-190.096 85.108-190.096 190.096s85.108 190.096 190.096 190.096v0c0.182 0 0.399 0.001 0.614 0.001 53.408 0 101.575-22.439 135.587-58.404l0.082-0.088 319.945 160.849c-1.751 8.911-2.81 19.209-2.924 29.734l-0.001 0.096c0 104.986 85.108 190.096 190.096 190.096s190.096-85.108 190.096-190.096c0-104.986-85.108-190.096-190.096-190.096v0zM833.7 87.942c56.531 0 102.359 45.827 102.359 102.359s-45.827 102.359-102.359 102.359c-56.531 0-102.359-45.827-102.359-102.359v0c0.33-56.398 45.96-102.029 102.328-102.359h0.032zM190.3 614.359c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032zM833.7 936.058c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032z"],"attrs":[{}],"tags":["share-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":150,"id":57,"name":"share-alt","prevSize":80,"code":59770},"setIdx":0,"setId":1,"iconIdx":138},{"icon":{"paths":["M921.588 58.527h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v702.182c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-702.182c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM102.412 146.296h819.175c8.079 0 14.629 6.55 14.629 14.629v0 90.11l-424.215 211.815-424.215-211.815v-90.11c0-8.079 6.55-14.629 14.629-14.629v0zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-514.325l404.322 202.454c5.795 2.962 12.643 4.698 19.895 4.698s14.098-1.736 20.147-4.815l-0.252 0.117 404.322-202.454v514.325c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["envelope"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":217,"id":58,"name":"envelope","prevSize":80,"code":59769},"setIdx":0,"setId":1,"iconIdx":139},{"icon":{"paths":["M710.11 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.124 19.673-11.546 36.649-28.101 44.774l-0.296 0.132c-5.939 2.921-12.928 4.629-20.316 4.629-0.288 0-0.574-0.003-0.859-0.008h0.043zM99.27 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z","M915.484 735.204c-11.19-0.147-21.49-3.841-29.859-10.006l0.142 0.101c-12.083-9.132-19.811-23.475-19.811-39.622 0-11.206 3.721-21.543 9.995-29.84l-0.090 0.124c30.292-39.484 48.545-89.591 48.545-143.96s-18.251-104.477-48.961-144.528l0.418 0.566c-6.185-8.174-9.906-18.511-9.906-29.717 0-27.353 22.174-49.528 49.528-49.528 16.148 0 30.49 7.728 39.532 19.687l0.090 0.124c42.965 55.728 68.862 126.535 68.862 203.393s-25.897 147.666-69.442 204.176l0.58-0.783c-9.257 11.932-23.523 19.596-39.586 19.811h-0.036z"],"attrs":[{},{}],"tags":["volume-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":148,"id":59,"name":"volume-down","prevSize":80,"code":59766},"setIdx":0,"setId":1,"iconIdx":140},{"icon":{"paths":["M565.883 929.593c-9.559-0.164-18.337-3.376-25.438-8.703l0.112 0.081-258.099-206.91h-255.405c-22.198-0.299-40.113-18.215-40.412-40.383v-323.327c0.299-22.198 18.215-40.113 40.383-40.412h255.434l258.099-206.91c6.865-5.557 15.703-8.921 25.326-8.921 22.319 0 40.412 18.093 40.412 40.412 0 0.105 0 0.21-0.001 0.316v-0.016 754.361c-0.101 16.052-9.421 29.904-22.929 36.534l-0.241 0.107c-4.846 2.383-10.549 3.777-16.577 3.777-0.235 0-0.469-0.003-0.701-0.006h0.035zM67.466 633.237h229.002c9.573 0.042 18.381 3.277 25.424 8.695l-0.099-0.073 203.677 161.649v-584.629l-203.677 161.649c-6.785 5.918-15.568 9.703-25.217 10.233l-0.107 0.005h-229.002z","M860.084 839.070c-10.094-0.015-19.331-3.681-26.461-9.747l0.058 0.048c-8.624-7.36-14.057-18.239-14.057-30.387 0-10.3 3.905-19.687 10.315-26.762l-0.030 0.034c61.742-68.722 99.501-160.079 99.501-260.255s-37.758-191.532-99.818-260.614l0.318 0.36c-6.378-7.12-10.277-16.575-10.277-26.941 0-22.34 18.111-40.451 40.451-40.451 11.975 0 22.734 5.203 30.141 13.472l0.034 0.038c74.659 82.7 120.339 192.814 120.339 313.599s-45.68 230.898-120.705 314.010l0.366-0.412c-7.167 8.586-17.874 14.010-29.847 14.010-0.115 0-0.23 0-0.345-0.001h0.018z","M733.459 694.124c-9.131-0.12-17.535-3.134-24.364-8.165l0.116 0.082c-9.859-7.451-16.165-19.154-16.165-32.33 0-9.143 3.036-17.578 8.156-24.348l-0.073 0.101c24.717-32.217 39.61-73.102 39.61-117.464s-14.892-85.248-39.95-117.928l0.341 0.462c-5.046-6.669-8.082-15.104-8.082-24.247 0-22.319 18.093-40.412 40.412-40.412 13.176 0 24.879 6.306 32.257 16.064l0.073 0.101c35.058 45.471 56.188 103.247 56.188 165.959s-21.131 120.489-56.662 166.598l0.474-0.639c-7.553 9.736-19.193 15.989-32.301 16.165h-0.029z"],"attrs":[{},{},{}],"tags":["volume-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":147,"id":60,"name":"volume-up","prevSize":80,"code":59767},"setIdx":0,"setId":1,"iconIdx":141},{"icon":{"paths":["M842.183 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.153 19.495-11.255 36.364-27.452 44.771l-0.283 0.133c-6.264 2.921-13.598 4.625-21.331 4.625-0.163 0-0.323 0-0.486-0.002h0.025zM231.344 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z"],"attrs":[{}],"tags":["volume-off"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":146,"id":61,"name":"volume-off","prevSize":80,"code":59768},"setIdx":0,"setId":1,"iconIdx":142},{"icon":{"paths":["M974.421 561.545h-924.841c-27.344-0.025-49.502-22.198-49.502-49.545 0-13.671 5.537-26.048 14.49-35.013v0l462.421-462.421c8.963-8.952 21.342-14.49 35.011-14.49s26.048 5.537 35.013 14.49v0l462.421 462.421c8.952 8.963 14.49 21.342 14.49 35.011 0 27.347-22.157 49.52-49.499 49.545h-0.003zM169.148 462.455h685.704l-342.852-342.852z","M908.36 1023.966h-792.721c-63.696-0.373-115.233-51.908-115.606-115.57v-132.155c0.373-63.696 51.908-115.233 115.57-115.606h792.757c63.696 0.373 115.233 51.908 115.606 115.57v132.155c-0.373 63.696-51.908 115.233-115.57 115.606h-0.036zM115.64 759.725c-9.121 0-16.516 7.395-16.516 16.516v0 132.12c0 9.121 7.395 16.516 16.516 16.516v0h792.721c9.121 0 16.516-7.395 16.516-16.516v0-132.12c0-9.121-7.395-16.516-16.516-16.516v0z"],"attrs":[{},{}],"tags":["eject"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":145,"id":62,"name":"eject","prevSize":80,"code":59765},"setIdx":0,"setId":1,"iconIdx":143},{"icon":{"paths":["M921.588 117.040h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM936.215 219.438v97.715h-12.288c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-7.607c-7.377-1.502-13.839-3.52-20.003-6.11l0.694 0.259h-7.022c-8.645-4.243-16.008-9.735-22.196-16.341l-0.038-0.041c-16.923-16.712-27.426-39.89-27.5-65.521v-0.014c0.016-8.559 1.299-16.812 3.668-24.592l-0.158 0.601h98.887c0.004 0 0.008 0 0.012 0 7.873 0 14.294 6.219 14.615 14.014l0.001 0.029zM102.412 204.809h98.887c2.212 7.178 3.494 15.431 3.511 23.981v0.010c-0.074 25.645-10.578 48.823-27.491 65.525l-0.010 0.010c-6.348 6.456-13.68 11.92-21.756 16.155l-0.479 0.229h-7.607c-5.25 2.652-11.34 4.689-17.749 5.795l-0.389 0.056h-8.191c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-12.288v-97.131c0-8.079 6.55-14.629 14.629-14.629v0zM87.785 804.562v-97.715h12.288c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h7.607c7.229 1.166 13.718 3.206 19.76 6.041l-0.451-0.191h7.022c8.556 4.464 15.886 9.927 22.223 16.372l0.012 0.012c16.923 16.712 27.426 39.89 27.5 65.521v0.014c-0.016 8.559-1.299 16.812-3.668 24.592l0.158-0.601h-98.887c-0.004 0-0.008 0-0.012 0-7.873 0-14.294-6.219-14.615-14.014l-0.001-0.029zM290.823 819.191c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549c0.004-0.481 0.007-1.050 0.007-1.62 0-49.382-20.391-94-53.213-125.896l-0.041-0.040c-8.427-8.529-17.825-16.067-28.024-22.443l-0.647-0.377-9.947-6.436c-5.625-3.003-12.567-6.153-19.707-8.903l-1.358-0.459-11.702-4.681c-8.77-2.704-19.269-4.96-30.044-6.336l-0.968-0.101c-2.719-0.288-5.875-0.451-9.069-0.451s-6.35 0.165-9.458 0.484l0.389-0.033h-29.256v-210.060h49.736c9.036-1.557 16.909-3.588 24.522-6.182l-1.116 0.331 12.873-4.096c9.915-3.42 18.418-7.374 26.429-12.074l-0.683 0.37 9.362-5.266c11.406-7.555 21.355-15.646 30.453-24.6l-0.026 0.025c32.863-31.937 53.254-76.555 53.254-125.937 0-0.569-0.003-1.138-0.008-1.707v0.086c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549h442.355c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549c-0.004 0.481-0.007 1.050-0.007 1.62 0 49.382 20.391 94 53.213 125.896l0.041 0.040c8.973 9.14 18.943 17.251 29.747 24.168l0.679 0.407 9.362 5.266c7.327 4.329 15.83 8.282 24.727 11.392l1.018 0.31 12.873 4.096c6.721 2.133 14.826 3.972 23.141 5.166l0.85 0.1h49.151v208.304h-29.256c-2.719-0.277-5.876-0.435-9.069-0.435s-6.351 0.158-9.463 0.466l0.394-0.032c-11.742 1.477-22.241 3.733-32.391 6.794l1.38-0.358-11.702 4.681c-9.096 3.533-16.61 7.072-23.848 11.051l1.029-0.518-9.947 6.436c-10.846 6.753-20.244 14.291-28.657 22.805l-0.015 0.015c-32.863 31.937-53.254 76.555-53.254 125.937 0 0.569 0.003 1.138 0.008 1.707v-0.086c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549zM921.588 819.191h-98.887c-2.212-7.178-3.494-15.431-3.511-23.981v-0.010c0.074-25.645 10.578-48.823 27.491-65.525l0.010-0.010c6.226-6.647 13.589-12.14 21.793-16.186l0.443-0.197h7.022c5.388-2.223 11.845-4.236 18.507-5.704l0.802-0.148h7.607c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h12.288v97.131c0 8.079-6.55 14.629-14.629 14.629v0z","M512 307.207c-113.105 0-204.793 91.69-204.793 204.793s91.69 204.793 204.793 204.793c113.105 0 204.793-91.69 204.793-204.793v0c0-113.105-91.69-204.793-204.793-204.793v0zM512 629.025c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0z"],"attrs":[{},{}],"tags":["money-bill"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":144,"id":63,"name":"money-bill","prevSize":80,"code":59764},"setIdx":0,"setId":1,"iconIdx":144},{"icon":{"paths":["M871.768 55.371h-553.491c-84.063 0-152.209 68.147-152.209 152.209v0 13.838h-13.838c-84.063 0-152.209 68.147-152.209 152.209v0 442.792c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-13.838h13.838c84.063 0 152.209-68.147 152.209-152.209v0-442.792c0-84.063-68.147-152.209-152.209-152.209v0zM249.092 207.58c0-38.21 30.976-69.186 69.186-69.186v0h553.491c38.21 0 69.186 30.976 69.186 69.186v0 343.163l-125.642-105.716c-7.15-6.241-16.567-10.047-26.872-10.047-12.495 0-23.684 5.595-31.196 14.418l-0.048 0.058-59.223 69.74-221.396-214.755c-6.965-8.265-17.229-13.559-28.735-13.836l-0.047-0.001c-11.963 0.464-22.566 5.925-29.844 14.338l-0.044 0.052-168.814 200.917zM318.279 719.559c-38.21 0-69.186-30.976-69.186-69.186v0-16.605l203.131-239.108 191.508 187.633-116.233 137.265zM774.908 816.42c0 38.21-30.976 69.186-69.186 69.186v0h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-442.792c0-38.21 30.976-69.186 69.186-69.186v0h13.838v345.932c0 84.063 68.147 152.209 152.209 152.209v0h456.629zM871.768 719.559h-235.233l157.191-184.866 145.567 123.429c-3.487 34.553-32.362 61.315-67.514 61.437h-0.013z"],"attrs":[{}],"tags":["images"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":143,"id":64,"name":"images","prevSize":80,"code":59763},"setIdx":0,"setId":1,"iconIdx":145},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM160.914 146.285h702.171c40.395 0 73.142 32.747 73.142 73.142v0 479.232l-159.158-159.158c-7.493-7.993-18.119-12.974-29.908-12.974-1.007 0-2.005 0.036-2.992 0.108l0.133-0.008c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-75.483 90.697-269.166-269.166c-7.488-7.945-18.081-12.89-29.83-12.89-0.416 0-0.831 0.007-1.244 0.018l0.060-0.001c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-216.503 258.048v-405.504c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-42.716l251.612-301.934 241.079 241.079-147.456 175.543h-272.091c-0.003 0-0.005 0-0.010 0-39.984 0-72.475-32.083-73.133-71.911l-0.001-0.062zM863.086 877.715h-315.977l201.874-242.249 184.32 184.32c-6.765 33.136-35.591 57.744-70.197 57.929h-0.021z"],"attrs":[{}],"tags":["image"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":142,"id":65,"name":"image","prevSize":80,"code":59762},"setIdx":0,"setId":1,"iconIdx":146},{"icon":{"paths":["M863.075 1023.984h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.762 0.162 3.81 0.255 5.881 0.255 34.275 0 62.615-25.405 67.22-58.41l0.041-0.357v-729.651c-4.645-33.363-32.986-58.768-67.261-58.768-2.069 0-4.118 0.093-6.141 0.274l0.261-0.019h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.958-0.089 4.255-0.14 6.565-0.14 83.099 0 150.872 65.615 154.335 147.863l0.011 0.313v726.14c-3.472 82.56-71.246 148.176-154.344 148.176-2.309 0-4.606-0.051-6.89-0.151l0.325 0.011z","M453.487 789.935c-0.060 0-0.133 0-0.204 0-12.052 0-22.953-4.923-30.803-12.869l-0.004-0.004c-7.929-7.939-12.835-18.903-12.835-31.011s4.904-23.072 12.835-31.013v0l203.038-203.038-203.038-203.038c-7.297-7.816-11.777-18.344-11.777-29.917 0-24.237 19.648-43.884 43.884-43.884 11.575 0 22.101 4.48 29.943 11.802l-0.026-0.023 234.051 234.051c7.929 7.939 12.835 18.903 12.835 31.011s-4.904 23.072-12.835 31.013v0l-234.051 234.051c-7.854 7.95-18.755 12.873-30.807 12.873-0.071 0-0.144 0-0.215 0h0.011z","M687.538 555.884h-643.638c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h643.638c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["sign-in"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":141,"id":66,"name":"sign-in","prevSize":80,"code":59760},"setIdx":0,"setId":1,"iconIdx":147},{"icon":{"paths":["M336.515 1023.832h-175.485c-1.958 0.089-4.254 0.14-6.563 0.14-83.075 0-150.827-65.596-154.289-147.819l-0.011-0.313v-727.679c3.471-82.536 71.225-148.132 154.298-148.132 2.309 0 4.605 0.051 6.888 0.151l-0.325-0.011h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0h-175.485c-1.762-0.162-3.809-0.255-5.879-0.255-34.265 0-62.596 25.397-67.2 58.393l-0.041 0.356v729.434c4.644 33.353 32.976 58.751 67.241 58.751 2.069 0 4.117-0.093 6.139-0.274l-0.26 0.019h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z","M745.981 789.852c-0.060 0-0.133 0-0.204 0-12.048 0-22.946-4.922-30.794-12.865l-0.004-0.004c-7.927-7.937-12.831-18.898-12.831-31.002s4.903-23.065 12.831-31.003v0l202.978-202.978-202.978-202.978c-8.602-8.031-13.963-19.438-13.963-32.097 0-24.229 19.642-43.871 43.871-43.871 12.66 0 24.066 5.362 32.073 13.937l0.023 0.026 233.981 233.981c7.927 7.937 12.831 18.898 12.831 31.002s-4.903 23.065-12.831 31.003v0l-233.981 233.981c-7.852 7.948-18.75 12.869-30.798 12.869-0.071 0-0.144 0-0.215 0h0.011z","M979.961 555.871h-643.446c-24.229 0-43.871-19.642-43.871-43.871s19.642-43.871 43.871-43.871v0h643.446c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z"],"attrs":[{},{},{}],"tags":["sign-out"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":140,"id":67,"name":"sign-out","prevSize":80,"code":59761},"setIdx":0,"setId":1,"iconIdx":148},{"icon":{"paths":["M823.892 558.055c-0.046 0-0.1 0-0.154 0-10.973 0-20.961-4.21-28.44-11.103l0.029 0.026c-74.352-66.801-173.194-107.653-281.576-107.653s-207.224 40.851-281.966 107.996l0.389-0.344c-7.699 6.911-17.932 11.137-29.152 11.137-12.958 0-24.6-5.638-32.606-14.593l-0.037-0.042c-6.617-7.695-10.645-17.782-10.645-28.809 0-13.081 5.67-24.84 14.685-32.949l0.041-0.036c89.475-80.776 208.611-130.198 339.291-130.198s249.814 49.422 339.736 130.594l-0.445-0.396c9.056 8.146 14.726 19.904 14.726 32.986 0 11.028-4.029 21.114-10.694 28.868l0.049-0.059c-8.339 8.889-20.122 14.46-33.209 14.575h-0.020z","M978.379 395.406c-11.486-0.060-21.927-4.48-29.763-11.688l0.031 0.029c-113.494-108.335-267.577-175.003-437.231-175.003s-323.736 66.669-437.478 175.238l0.247-0.234c-8.074 9.555-20.065 15.58-33.462 15.58-24.147 0-43.723-19.576-43.723-43.723 0-14.862 7.414-27.991 18.746-35.891l0.142-0.094c128.857-122.252 303.412-197.437 495.528-197.437s366.671 75.186 495.847 197.738l-0.318-0.301c8.63 8.010 14.013 19.416 14.013 32.079 0 23.746-18.928 43.070-42.521 43.707l-0.059 0.001z","M359.26 724.203c-14.255 0-26.917-6.822-34.899-17.38l-0.079-0.109c-5.603-7.207-8.984-16.384-8.984-26.351 0-14.271 6.93-26.924 17.608-34.778l0.12-0.083c49.111-37.883 111.521-60.719 179.265-60.719s130.154 22.836 179.953 61.23l-0.689-0.51c10.667 8.061 17.489 20.723 17.489 34.978 0 9.892-3.285 19.018-8.824 26.343l0.079-0.109c-8.18 10.541-20.853 17.261-35.095 17.261-9.821 0-18.895-3.195-26.241-8.603l0.123 0.086c-34.771-26.697-78.905-42.783-126.797-42.783s-92.026 16.086-127.294 43.149l0.497-0.366c-7.262 5.353-16.355 8.615-26.202 8.745h-0.031z","M512 905.508c-24.147 0-43.723-19.576-43.723-43.723s19.576-43.723 43.723-43.723v0 0c24.147 0 43.723 19.576 43.723 43.723s-19.576 43.723-43.723 43.723v0z"],"attrs":[{},{},{},{}],"tags":["wifi"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":139,"id":68,"name":"wifi","prevSize":80,"code":59759},"setIdx":0,"setId":1,"iconIdx":149},{"icon":{"paths":["M590.766 393.851h-157.532c-50.632-0.297-91.598-41.261-91.894-91.866v-157.56c0.297-50.632 41.261-91.598 91.866-91.894h157.56c50.632 0.297 91.598 41.261 91.894 91.866v157.56c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM433.234 131.298c-7.25 0-13.128 5.878-13.128 13.128v0 157.532c0 7.25 5.878 13.128 13.128 13.128v0h157.532c7.25 0 13.128-5.878 13.128-13.128v0-157.532c0-7.25-5.878-13.128-13.128-13.128v0z","M196.936 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM91.915 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M564.511 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM459.489 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M932.085 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM827.064 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M879.575 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-105.049c0-7.25-5.878-13.128-13.128-13.128v0h-630.129c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 21.751-17.633 39.383-39.383 39.383s-39.383-17.633-39.383-39.383v0-105.021c0.297-50.632 41.261-91.598 91.866-91.894h630.157c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z","M512 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-315.093c0-21.751 17.633-39.383 39.383-39.383s39.383 17.633 39.383 39.383v0 315.064c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z"],"attrs":[{},{},{},{},{},{}],"tags":["sitemap"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":138,"id":69,"name":"sitemap","prevSize":80,"code":59758},"setIdx":0,"setId":1,"iconIdx":150},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M263.757 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M480.97 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M698.182 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M915.393 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{},{},{}],"tags":["chart-bar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":137,"id":70,"name":"chart-bar","prevSize":80,"code":59757},"setIdx":0,"setId":1,"iconIdx":151},{"icon":{"paths":["M863.086 936.228h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-351.086c0-88.87 72.044-160.914 160.914-160.914v0h35.109l69.047-102.4c29.412-43.303 78.425-71.379 133.997-71.387h225.866c55.573 0.008 104.587 28.085 133.636 70.825l0.361 0.562 69.047 102.4h35.109c88.87 0 160.914 72.044 160.914 160.914v0 351.086c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 351.086c-40.395 0-73.142 32.747-73.142 73.142v0 351.086c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-351.086c0-40.395-32.747-73.142-73.142-73.142v0h-58.515c-15.035-0.029-28.294-7.614-36.181-19.159l-0.097-0.151-80.75-123.466c-12.764-19.278-34.075-32.011-58.402-32.765l-0.111-0.003h-229.961c-24.44 0.758-45.751 13.489-58.346 32.499l-0.167 0.269-84.846 123.466c-7.986 11.696-21.243 19.281-36.274 19.31h-0.004z","M512 760.685c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 468.114c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["camera"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":136,"id":71,"name":"camera","prevSize":80,"code":59756},"setIdx":0,"setId":1,"iconIdx":152},{"icon":{"paths":["M512 1023.977c-24.105-0.325-43.559-19.779-43.884-43.852v-936.219c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 936.187c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M599.768 906.954h-380.325c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h380.325c3.954 0.373 8.548 0.587 13.193 0.587 76.308 0 139.186-57.511 147.651-131.554l0.063-0.684c-8.529-74.727-71.406-132.238-147.714-132.238-4.645 0-9.24 0.213-13.775 0.629l0.583-0.044h-175.535c-4.502 0.309-9.759 0.484-15.056 0.484-124.284 0-225.944-96.875-233.585-219.234l-0.033-0.671c7.676-123.029 109.334-219.903 233.619-219.903 5.298 0 10.553 0.176 15.762 0.522l-0.706-0.037h321.815c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0h-321.815c-3.954-0.373-8.548-0.587-13.193-0.587-76.308 0-139.186 57.511-147.651 131.554l-0.063 0.684c8.529 74.727 71.406 132.238 147.714 132.238 4.645 0 9.24-0.213 13.775-0.629l-0.583 0.044h175.535c4.502-0.309 9.759-0.484 15.056-0.484 124.284 0 225.944 96.875 233.585 219.234l0.033 0.671c-7.676 123.029-109.334 219.903-233.619 219.903-5.298 0-10.553-0.176-15.762-0.522l0.706 0.037z"],"attrs":[{},{}],"tags":["dollar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":135,"id":72,"name":"dollar","prevSize":80,"code":59755},"setIdx":0,"setId":1,"iconIdx":153},{"icon":{"paths":["M746.049 0.019c-153.498 0-277.933 124.435-277.933 277.933v0 131.652h-307.189c-88.867 0-160.908 72.041-160.908 160.908v0 292.56c0 88.867 72.041 160.908 160.908 160.908v0h409.585c88.867 0 160.908-72.041 160.908-160.908v0-292.56c0-88.867-72.041-160.908-160.908-160.908v0h-14.628v-131.652c0-105.024 85.139-190.165 190.165-190.165s190.165 85.139 190.165 190.165v0c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0c0-153.498-124.435-277.933-277.933-277.933v0zM643.652 570.513v292.56c0 40.394-32.746 73.14-73.14 73.14v0h-409.585c-40.394 0-73.14-32.746-73.14-73.14v0-292.56c0-40.394 32.746-73.14 73.14-73.14v0h409.585c40.394 0 73.14 32.746 73.14 73.14v0z"],"attrs":[{}],"tags":["lock-open"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":134,"id":73,"name":"lock-open","prevSize":80,"code":59754},"setIdx":0,"setId":1,"iconIdx":154},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM936.228 219.429v248.685h-380.342v-321.829h307.2c40.395 0 73.142 32.747 73.142 73.142v0zM160.914 146.285h307.2v321.829h-380.342v-248.685c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-248.685h380.342v321.829h-307.2c-40.395 0-73.142-32.747-73.142-73.142v0zM863.086 877.715h-307.2v-321.829h380.342v248.685c0 40.395-32.747 73.142-73.142 73.142v0z"],"attrs":[{}],"tags":["table"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":133,"id":74,"name":"table","prevSize":80,"code":59753},"setIdx":0,"setId":1,"iconIdx":155},{"icon":{"paths":["M512 1022.599c-0.113 0.001-0.245 0.001-0.378 0.001-8.356 0-16.084-2.691-22.364-7.254l0.11 0.076c-16.56-10.488-405.166-271.583-405.166-588.982 0-236.266 191.533-427.799 427.799-427.799s427.799 191.533 427.799 427.799v0c0 317.399-386.399 578.495-405.166 588.982-6.17 4.487-13.897 7.178-22.254 7.178-0.133 0-0.265-0.001-0.397-0.003h0.021zM512 84.201c-0.329-0.001-0.718-0.001-1.107-0.001-189.346 0-342.951 153.026-343.891 342.151v0.089c0 232.392 264.407 444.91 344.999 503.975 80.591-59.063 344.999-271.583 344.999-503.975-0.939-189.216-154.544-342.241-343.891-342.241-0.389 0-0.779 0.001-1.168 0.003h0.061z","M512 553.4c-83.836 0-151.799-67.963-151.799-151.799s67.963-151.799 151.799-151.799c83.836 0 151.799 67.963 151.799 151.799v0c0 83.836-67.963 151.799-151.799 151.799v0zM512 332.6c-38.107 0-68.999 30.892-68.999 68.999s30.892 68.999 68.999 68.999c38.107 0 68.999-30.892 68.999-68.999v0c0-38.107-30.892-68.999-68.999-68.999v0z"],"attrs":[{},{}],"tags":["map-marker"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":132,"id":75,"name":"map-marker","prevSize":80,"code":59752},"setIdx":0,"setId":1,"iconIdx":156},{"icon":{"paths":["M967.082 560.759h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 268.207h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 853.311h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M56.918 284.46c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c5.935-5.857 13.086-10.5 21.038-13.514l0.416-0.139c7.303-3.084 15.795-4.877 24.704-4.877s17.401 1.792 25.134 5.036l-0.428-0.16c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c11.461 12.002 18.595 28.224 18.853 46.107v0.050c0 0.111 0.002 0.244 0.002 0.376 0 17.859-7.201 34.037-18.859 45.786l0.005-0.005c-6.208 5.511-13.262 10.282-20.899 14.055l-0.555 0.248c-7.082 2.883-15.3 4.556-23.909 4.556-0.28 0-0.559-0.002-0.84-0.005h0.043z","M56.918 577.012c-8.949-0.111-17.424-2.014-25.124-5.363l0.419 0.163c-8.262-3.501-15.357-8.097-21.513-13.706l0.059 0.053c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c6.096-5.555 13.192-10.151 20.966-13.467l0.488-0.186c8.019-3.808 17.424-6.032 27.348-6.032 3.658 0 7.245 0.302 10.739 0.882l-0.379-0.052 11.702 3.901 11.702 5.851c3.642 2.58 6.822 5.141 9.837 7.878l-0.085-0.076c11.672 12.226 18.854 28.826 18.854 47.102 0 0.125 0 0.251-0.002 0.376v-0.020c0 35.905-29.107 65.012-65.012 65.012v0z","M56.918 869.564c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-5.555-6.096-10.151-13.192-13.467-20.966l-0.186-0.488c-3.296-7.27-5.216-15.763-5.216-24.704s1.92-17.436 5.371-25.089l-0.155 0.385c3.501-8.262 8.097-15.357 13.706-21.513l-0.053 0.059c11.733-11.582 27.863-18.736 45.663-18.736 9.098 0 17.76 1.87 25.624 5.245l-0.424-0.162c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c5.555 6.096 10.151 13.192 13.467 20.966l0.186 0.488c3.296 7.27 5.216 15.763 5.216 24.704s-1.92 17.436-5.371 25.089l0.155-0.385c-3.501 8.262-8.097 15.357-13.706 21.513l0.053-0.059c-11.746 11.653-27.923 18.854-45.783 18.854-0.133 0-0.264 0-0.396-0.002h0.020z"],"attrs":[{},{},{},{},{},{}],"tags":["list"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":131,"id":76,"name":"list","prevSize":80,"code":59751},"setIdx":0,"setId":1,"iconIdx":157},{"icon":{"paths":["M1020.3 494.452c-7.019-15.208-167.289-377.277-508.3-377.277-0.14 0-0.306 0-0.472 0-34.241 0-67.586 3.836-99.63 11.102l3.004-0.573c-18.045 5.713-30.896 22.309-30.896 41.908 0 24.228 19.641 43.869 43.869 43.869 2.026 0 4.020-0.137 5.972-0.403l-0.228 0.025c23.536-5.148 50.592-8.127 78.334-8.188h0.045c244.499 0 384.881 239.819 419.391 307.086-23.064 44.686-47.534 82.99-75.058 118.824l1.357-1.84c-5.75 7.348-9.221 16.722-9.221 26.907 0 24.18 19.562 43.79 43.724 43.869h0.007c13.993-0.045 26.437-6.635 34.437-16.866l0.073-0.096c34.924-43.997 66.128-93.737 91.55-146.775l2.039-4.721c2.455-5.422 3.887-11.757 3.887-18.425s-1.431-13.003-4.002-18.713l0.117 0.288z","M192.045 130.044c-7.813-7.295-18.337-11.773-29.907-11.773-24.228 0-43.869 19.641-43.869 43.869 0 11.571 4.479 22.094 11.798 29.933l-0.023-0.026 53.813 53.813c-74.699 68.875-135.393 151.659-178.181 244.402l-1.975 4.776c-2.203 5.093-3.485 11.025-3.485 17.256s1.282 12.161 3.596 17.545l-0.111-0.289c7.019 15.208 167.289 377.277 508.3 377.277 0.681 0.004 1.487 0.005 2.294 0.005 94.711 0 182.793-28.386 256.201-77.116l-1.714 1.069 63.172 63.172c7.936 7.927 18.897 12.83 31.001 12.83s23.064-4.902 31.002-12.83v0c7.927-7.936 12.83-18.897 12.83-31.001s-4.902-23.064-12.83-31.002v0zM416.073 480.999l129.268 129.853c-9.942 3.409-21.397 5.378-33.312 5.378-28.107 0-53.656-10.952-72.612-28.824l0.052 0.049c-18.724-18.468-30.323-44.118-30.323-72.478 0-13.277 2.543-25.962 7.167-37.592l-0.241 0.688zM512 819.086c-245.083 0-384.881-240.404-419.391-307.086 39.962-79.399 91.284-146.975 152.768-203.701l0.481-0.439 104.701 104.701c-17.797 28.341-28.353 62.795-28.353 99.714 0 104.667 84.849 189.516 189.516 189.516 36.919 0 71.373-10.557 100.508-28.817l-0.792 0.463 94.173 94.173c-54.756 32.362-120.666 51.482-191.042 51.482-0.903 0-1.805-0.003-2.708-0.010l0.138 0.001z"],"attrs":[{},{}],"tags":["eye-slash"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":130,"id":77,"name":"eye-slash","prevSize":80,"code":59749},"setIdx":0,"setId":1,"iconIdx":158},{"icon":{"paths":["M512 906.971c-341.139 0-501.467-362.204-508.489-377.417-2.22-5.185-3.511-11.22-3.511-17.554s1.291-12.369 3.623-17.853l-0.112 0.299c7.022-15.213 167.351-377.417 508.489-377.417s501.467 362.204 508.489 377.417c2.22 5.185 3.511 11.22 3.511 17.554s-1.291 12.369-3.623 17.853l0.112-0.299c-7.022 15.213-167.351 377.417-508.489 377.417zM92.453 512c34.523 67.292 175.543 307.2 419.547 307.2s385.024-239.908 419.547-307.2c-34.523-67.292-175.543-307.2-419.547-307.2s-385.024 239.908-419.547 307.2z","M512 702.172c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 409.6c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["eye"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":129,"id":78,"name":"eye","prevSize":80,"code":59750},"setIdx":0,"setId":1,"iconIdx":159},{"icon":{"paths":["M82.761 872.006h-83.078v-609.242c-0.010-0.662-0.017-1.442-0.017-2.225 0-82.317 66.265-149.157 148.363-150.085l0.088-0.001h133.48c0.27-0.006 0.588-0.010 0.906-0.010 12.364 0 23.485 5.331 31.186 13.821l0.031 0.035 147.88 178.895h271.943c0.175-0.001 0.383-0.001 0.591-0.001 82.895 0 150.096 67.2 150.096 150.096 0 1.168-0.013 2.335-0.040 3.497l0.003-0.173v27.692h-83.078v-27.692c0.013-0.495 0.021-1.077 0.021-1.662 0-37.318-30.252-67.57-67.57-67.57-0.008 0-0.014 0-0.022 0h-291.881c-12.686-0.029-24.015-5.815-31.514-14.885l-0.056-0.069-147.88-178.895h-114.094c-36.362 1.219-65.376 30.988-65.376 67.535 0 0.597 0.008 1.192 0.023 1.785l-0.001-0.088z","M795.574 913.546h-754.353c-14.913-0.126-27.961-7.987-35.343-19.762l-0.103-0.177c-3.401-5.891-5.407-12.958-5.407-20.493s2.007-14.601 5.513-20.694l-0.106 0.201 187.203-360.006c7.347-13.219 21.185-22.042 37.092-22.155h752.707c14.913 0.126 27.961 7.987 35.343 19.762l0.103 0.177c3.401 5.891 5.407 12.958 5.407 20.493s-2.007 14.601-5.513 20.694l0.106-0.201-187.203 360.006c-7.071 12.759-20.17 21.423-35.35 22.151l-0.097 0.004zM109.346 830.467h661.305l144.002-276.928h-661.305z"],"attrs":[{},{}],"tags":["folder-open"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":128,"id":79,"name":"folder-open","prevSize":80,"code":59748},"setIdx":0,"setId":1,"iconIdx":160},{"icon":{"paths":["M853.323 961.925h-682.645c-94.253 0-170.661-76.408-170.661-170.661v0-558.528c0-94.253 76.408-170.661 170.661-170.661v0h155.147c0.039 0 0.084 0 0.131 0 13.934 0 26.476 5.965 35.211 15.48l0.032 0.035 171.903 201.070h320.223c0 0 0 0 0.001 0 94.253 0 170.661 76.408 170.661 170.661 0 0.218 0 0.436-0.001 0.655v-0.033 341.323c0 94.253-76.408 170.661-170.661 170.661v0zM170.677 155.163c-42.842 0-77.573 34.731-77.573 77.573v0 558.528c0 42.842 34.731 77.573 77.573 77.573v0h682.645c42.842 0 77.573-34.731 77.573-77.573v0-341.323c0-42.842-34.731-77.573-77.573-77.573v0h-341.323c-14.071-0.131-26.67-6.321-35.33-16.085l-0.044-0.049-171.903-201.070z"],"attrs":[{}],"tags":["folder"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":126,"id":80,"name":"folder","prevSize":80,"code":59747},"setIdx":0,"setId":1,"iconIdx":161},{"icon":{"paths":["M570.515 906.971h-409.6c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h409.6c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 204.8c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h409.6c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M980.114 789.943c-8.437-0.136-16.291-2.51-23.030-6.553l0.21 0.117-292.571-175.543c-12.706-7.831-21.051-21.663-21.065-37.447v-117.029c0.014-15.785 8.359-29.619 20.876-37.34l0.189-0.108 292.571-175.543c6.348-3.861 14.026-6.145 22.235-6.145s15.887 2.285 22.428 6.254l-0.192-0.108c13.334 7.666 22.183 21.811 22.235 38.027v468.122c-0.053 16.223-8.901 30.368-22.022 37.921l-0.213 0.112c-5.841 3.327-12.834 5.288-20.285 5.288-0.48 0-0.959-0.008-1.435-0.025l0.069 0.001zM731.429 545.939l204.8 122.88v-313.636l-204.8 122.88z"],"attrs":[{},{}],"tags":["video"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":125,"id":81,"name":"video","prevSize":80,"code":59746},"setIdx":0,"setId":1,"iconIdx":162},{"icon":{"paths":["M862.966 979.954h-701.931c-88.84 0-160.859-72.019-160.859-160.859v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.014 0.522-0.021 1.138-0.021 1.755 0 40.382 32.736 73.117 73.117 73.117 0.007 0 0.015 0 0.022 0h701.93c40.382 0 73.117-32.736 73.117-73.117v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.991 88.083-72.627 159.104-160.849 159.104-0.004 0-0.007 0-0.011 0h0.001z","M512 702.107c-0.038 0-0.085 0-0.13 0-110.716 0-202.222-82.245-216.757-188.973l-0.126-1.134h-250.94c-0.097 0.001-0.211 0.001-0.326 0.001-24.229 0-43.871-19.642-43.871-43.871 0-8.677 2.52-16.767 6.867-23.575l-0.106 0.177 218.184-350.966c17.362-29.96 49.275-49.789 85.818-49.789 1.293 0 2.582 0.025 3.862 0.074l-0.185-0.005h395.422c40.382 0.115 75.22 23.729 91.572 57.882l0.265 0.613 215.844 347.456c2.498 5.344 3.955 11.604 3.955 18.204 0 23.357-18.253 42.45-41.273 43.795l-0.119 0.005h-250.94c-14.66 107.862-106.167 190.107-216.883 190.107-0.047 0-0.092 0-0.138 0h0.007zM123.014 426.013h213.504c24.229 0 43.871 19.642 43.871 43.871v0 12.869c0 72.687 58.925 131.612 131.612 131.612s131.612-58.925 131.612-131.612v0-12.869c0-24.229 19.642-43.871 43.871-43.871v0h213.504l-175.483-284.282c-4.679-8.189-9.36-11.698-15.208-11.698h-396.006c-5.783 0.148-10.777 3.381-13.412 8.109l-0.041 0.081z"],"attrs":[{},{}],"tags":["inbox"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":124,"id":82,"name":"inbox","prevSize":80,"code":59745},"setIdx":0,"setId":1,"iconIdx":163},{"icon":{"paths":["M804.555 409.605h-14.628v-131.65c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM321.839 277.955c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0 131.65h-380.321zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["lock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":123,"id":83,"name":"lock","prevSize":80,"code":59743},"setIdx":0,"setId":1,"iconIdx":164},{"icon":{"paths":["M804.555 409.605h-482.716v-131.65c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0c0 24.236 19.647 43.883 43.883 43.883s43.883-19.647 43.883-43.883v0c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["unlock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":122,"id":84,"name":"unlock","prevSize":80,"code":59744},"setIdx":0,"setId":1,"iconIdx":165},{"icon":{"paths":["M988.652 422.661l-315.315-315.315c-7.357-7.357-17.342-11.562-27.852-11.562h-606.456c-21.546 0-39.414 17.868-39.414 39.414v414.113c0 10.51 4.204 20.495 11.562 27.852l315.315 314.789c23.123 23.123 53.604 35.735 86.186 35.735v0c32.582 0 63.589-12.613 86.186-35.735l11.562-11.562c2.103 4.204 4.204 8.409 7.883 11.562 23.649 23.649 55.18 35.735 86.186 35.735s62.537-12.087 86.712-35.735l296.922-296.922c47.297-47.297 47.297-124.549 0-172.373zM443.681 836.249c-8.409 8.409-18.919 12.613-30.481 12.613s-22.598-4.73-30.481-12.613l-304.279-303.228v-358.409h358.409l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961l-296.922 296.922zM932.946 539.328l-296.922 296.922c-16.816 16.816-44.67 16.816-61.486 0-3.679-3.679-7.357-5.78-12.087-7.883l233.333-233.333c47.297-47.823 47.297-125.075 0-172.373l-248.048-248.048h80.931l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961zM314.928 328.067c0 36.261-29.429 65.69-65.69 65.69s-65.69-29.429-65.69-65.69 29.429-65.69 65.69-65.69 65.69 29.429 65.69 65.69z"],"attrs":[{}],"tags":["tags"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":121,"id":85,"name":"tags","prevSize":80,"code":59741},"setIdx":0,"setId":1,"iconIdx":166},{"icon":{"paths":["M532.53 1023.985c-37.212 0-74.423-14.115-102.654-42.345l-415.747-415.105c-8.982-8.982-14.115-21.172-14.115-34.004v-484.396c0-26.304 21.814-48.119 48.119-48.119h483.756c12.831 0 25.022 5.132 34.004 14.115l415.747 415.747c55.818 56.46 55.818 148.206 0 204.666 0 0 0 0 0 0l-347.098 347.098c-28.229 28.229-65.442 42.345-102.654 42.345zM96.253 512.642l401.632 400.991c19.248 18.605 50.044 18.605 68.649 0l347.098-347.098c18.605-18.605 18.605-49.402 0-68.649l-401.632-401.632h-415.747v415.747zM947.637 600.539v0zM287.446 367.643c-44.269 0-80.198-35.928-80.198-80.198s35.928-80.198 80.198-80.198 80.198 35.928 80.198 80.198-35.928 80.198-80.198 80.198z"],"attrs":[{}],"tags":["tag"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":120,"id":86,"name":"tag","prevSize":80,"code":59742},"setIdx":0,"setId":1,"iconIdx":167},{"icon":{"paths":["M512 1024.445c-282.822-0.256-511.994-229.587-511.994-512.445 0-141.396 57.267-269.417 149.871-362.133l-0.005 0.005c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c7.716 7.725 12.49 18.395 12.49 30.177s-4.772 22.451-12.49 30.178v0c-83.727 78.173-135.917 189.204-135.917 312.426 0 235.846 191.191 427.037 427.037 427.037 123.22 0 234.253-52.189 312.196-135.668l0.23-0.248c77.442-77.134 125.361-183.857 125.361-301.773s-47.919-224.639-125.347-301.759l-0.015-0.015c-7.716-7.725-12.49-18.395-12.49-30.177s4.772-22.451 12.49-30.178v0c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c92.6 92.711 149.866 220.732 149.866 362.128 0 282.858-229.172 512.187-511.97 512.445h-0.024z","M512 554.704c-23.456-0.316-42.387-19.247-42.704-42.673v-455.537c0-23.584 19.119-42.704 42.704-42.704s42.704 19.119 42.704 42.704v0 455.506c-0.316 23.456-19.247 42.387-42.673 42.704h-0.031z"],"attrs":[{},{}],"tags":["power-off"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":119,"id":87,"name":"power-off","prevSize":80,"code":59740},"setIdx":0,"setId":1,"iconIdx":168},{"icon":{"paths":["M804.571 1024h-585.143c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h438.857c12.114 0.011 23.078 4.929 31.012 12.872v0l263.314 265.070c7.945 7.935 12.863 18.898 12.874 31.011v554.133c0 88.87-72.044 160.914-160.914 160.914v0zM219.429 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h585.143c40.395 0 73.142-32.747 73.142-73.142v0-537.747l-237.568-237.568z","M789.943 980.114h-87.771v-365.715h-380.342v365.715h-87.771v-380.342c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0z","M539.501 321.828h-230.547c-41.436-0.331-74.901-33.998-74.901-75.481 0-0.207 0.001-0.413 0.003-0.619v0.032-201.874h87.771v190.172h204.8v-190.172h87.771v201.874c0.001 0.174 0.003 0.381 0.003 0.587 0 41.483-33.464 75.152-74.869 75.481h-0.032z"],"attrs":[{},{},{}],"tags":["save"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":118,"id":88,"name":"save","prevSize":80,"code":59739},"setIdx":0,"setId":1,"iconIdx":169},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM512 938.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0z","M381.156 267.377c-33.393 33.448-54.044 79.627-54.044 130.628 0 0.076 0 0.152 0 0.228v-0.012c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0c-0.001-0.156-0.001-0.341-0.001-0.525 0-27.345 11.088-52.101 29.015-70.016v0c18.327-17.443 43.181-28.173 70.543-28.173s52.216 10.731 70.585 28.213l-0.043-0.040c18.449 18.085 29.885 43.264 29.885 71.115 0 54.983-44.572 99.556-99.556 99.556-0.307 0-0.613-0.001-0.919-0.004h0.047c-23.436 0.316-42.351 19.231-42.667 42.636v56.92c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-19.343c34.751-8.129 64.687-25.311 88.169-48.916l0.008-0.008c33.387-33.532 54.025-79.777 54.025-130.844s-20.64-97.313-54.032-130.851l0.007 0.007c-34.036-32.508-80.253-52.515-131.144-52.515-50.6 0-96.58 19.779-130.632 52.028l0.087-0.081z","M583.111 753.777c0 39.273-31.837 71.111-71.111 71.111s-71.111-31.837-71.111-71.111c0-39.273 31.837-71.111 71.111-71.111s71.111 31.837 71.111 71.111z"],"attrs":[{},{},{}],"tags":["question-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":117,"id":89,"name":"question-circle","prevSize":80,"code":59737},"setIdx":0,"setId":1,"iconIdx":170},{"icon":{"paths":["M750.032 98.514c-60.88-61-145.050-98.738-238.034-98.738-185.726 0-336.287 150.56-336.287 336.287 0 0.17 0 0.34 0 0.511v-0.026c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0c0-0.174 0-0.378 0-0.584 0-137.598 111.546-249.145 249.145-249.145s249.145 111.546 249.145 249.145c0 137.598-111.546 249.145-249.145 249.145-0.206 0-0.411 0-0.617-0.001h0.032c-24.093 0.325-43.539 19.77-43.864 43.832v117c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0-76.031c165.808-22.845 292.141-163.614 292.141-333.889 0-92.678-37.425-176.615-97.988-237.522l0.016 0.016z","M585.105 950.635c0 40.375-32.73 73.105-73.105 73.105s-73.105-32.73-73.105-73.105c0-40.375 32.73-73.105 73.105-73.105s73.105 32.73 73.105 73.105z"],"attrs":[{},{}],"tags":["question"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":116,"id":90,"name":"question","prevSize":80,"code":59738},"setIdx":0,"setId":1,"iconIdx":171},{"icon":{"paths":["M907.406 301.957l-290.385-290.385c-7.121-7.13-16.959-11.543-27.829-11.553h-129.703c-79.752 0-144.404 64.652-144.404 144.404v0 65.638h-65.638c-79.752 0-144.404 64.652-144.404 144.404v0 525.108c0 79.752 64.652 144.404 144.404 144.404v0h367.575c79.752 0 144.404-64.652 144.404-144.404v0-65.638h13.128c79.752 0 144.404-64.652 144.404-144.404v0-341.319c-0.443-10.296-4.774-19.502-11.552-26.254l-0.001-0.001zM630.149 134.448l154.382 154.382h-154.382zM682.66 879.575c0 36.251-29.387 65.638-65.638 65.638v0h-367.575c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h65.638v380.702c0 79.752 64.652 144.404 144.404 144.404v0h223.17zM774.553 735.17h-315.064c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h91.894v249.426c0.292 21.632 17.751 39.091 39.355 39.383h249.455v301.936c0 36.251-29.387 65.638-65.638 65.638v0z"],"attrs":[{}],"tags":["copy"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":115,"id":91,"name":"copy","prevSize":80,"code":59735},"setIdx":0,"setId":1,"iconIdx":172},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":114,"id":92,"name":"file","prevSize":80,"code":59736},"setIdx":0,"setId":1,"iconIdx":173},{"icon":{"paths":["M629.028 789.943h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h468.114c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M863.086 1024h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-117.028h87.771v117.028c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0h-117.028v-87.771h117.028c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0z"],"attrs":[{},{}],"tags":["clone"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":111,"id":93,"name":"clone","prevSize":80,"code":59733},"setIdx":0,"setId":1,"iconIdx":174},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M619.381 626.023c-7.448-7.637-17.839-12.375-29.336-12.375s-21.888 4.738-29.328 12.366l-0.008 0.009-48.71 48.71-48.71-48.71c-7.393-6.903-17.353-11.141-28.301-11.141-22.927 0-41.514 18.586-41.514 41.514 0 10.949 4.238 20.907 11.165 28.325l-0.022-0.025 48.71 48.71-48.71 48.71c-7.637 7.448-12.375 17.839-12.375 29.336s4.738 21.888 12.366 29.328l0.009 0.008c7.171 7.515 17.264 12.187 28.45 12.187 0.311 0 0.623-0.004 0.933-0.010l-0.047 0.001c0.057 0 0.126 0 0.193 0 11.401 0 21.713-4.657 29.139-12.174l48.714-48.714 48.71 48.71c7.43 7.52 17.742 12.178 29.142 12.178 0.067 0 0.136 0 0.204 0h-0.010c0.263 0.006 0.575 0.010 0.886 0.010 11.185 0 21.278-4.673 28.435-12.173l0.014-0.016c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008-48.71-48.71 48.71-48.71c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008z"],"attrs":[{},{}],"tags":["calendar-times"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":110,"id":94,"name":"calendar-times","prevSize":80,"code":59730},"setIdx":0,"setId":1,"iconIdx":175},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 694.659h-221.406c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h221.406c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":109,"id":95,"name":"calendar-minus","prevSize":80,"code":59731},"setIdx":0,"setId":1,"iconIdx":176},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 691.892h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":108,"id":96,"name":"calendar-plus","prevSize":80,"code":59732},"setIdx":0,"setId":1,"iconIdx":177},{"icon":{"paths":["M614.393 512c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 102.431c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 921.569c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z"],"attrs":[{},{},{}],"tags":["ellipsis-v"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":107,"id":97,"name":"ellipsis-v","prevSize":80,"code":59728},"setIdx":0,"setId":1,"iconIdx":178},{"icon":{"paths":["M614.379 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M1023.886 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M204.868 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z"],"attrs":[{},{},{}],"tags":["ellipsis-h"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":106,"id":98,"name":"ellipsis-h","prevSize":80,"code":59729},"setIdx":0,"setId":1,"iconIdx":179},{"icon":{"paths":["M848.457 1024c-9.363-0.189-18.033-2.998-25.352-7.723l0.191 0.115-311.296-217.088-311.296 217.088c-6.501 4.018-14.382 6.4-22.821 6.4s-16.32-2.381-23.010-6.509l0.189 0.108c-13.4-7.013-22.574-20.486-23.401-36.171l-0.004-0.107v-819.2c0-88.87 72.044-160.914 160.914-160.914v0h438.857c88.87 0 160.914 72.044 160.914 160.914v0 819.2c0 0.048 0 0.104 0 0.159 0 16.646-9.393 31.099-23.169 38.347l-0.237 0.114c-5.911 3.304-12.965 5.254-20.477 5.266h-0.004zM512 702.172c0.137-0.001 0.3-0.003 0.464-0.003 9.223 0 17.782 2.846 24.846 7.706l-0.148-0.096 267.411 186.075v-734.939c0-40.395-32.747-73.142-73.142-73.142v0h-438.857c-40.395 0-73.142 32.747-73.142 73.142v0 734.939l267.411-186.075c6.916-4.764 15.475-7.609 24.698-7.609 0.163 0 0.325 0.001 0.488 0.003h-0.025z"],"attrs":[{}],"tags":["bookmark"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":105,"id":99,"name":"bookmark","prevSize":80,"code":59726},"setIdx":0,"setId":1,"iconIdx":180},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM936.391 469.333h-157.013c-21.309-143.377-80.98-269.999-168.128-372.54l0.875 1.056c174.421 43.539 304.877 189.937 324.104 369.605l0.163 1.879zM330.524 554.667h362.951c-28.064 140.685-92.065 263.297-182.001 361.829l0.527-0.585c-89.411-97.947-153.411-220.56-180.673-356.452l-0.803-4.792zM330.524 469.333c28.064-140.685 92.065-263.297 182.001-361.829l-0.527 0.585c89.411 97.947 153.411 220.56 180.673 356.452l0.803 4.792zM411.876 97.849c-86.273 101.485-145.944 228.107-166.755 367.427l-0.499 4.057h-157.013c19.389-181.548 149.845-327.945 321.319-370.86l2.948-0.625zM87.609 552.96h157.013c21.309 143.377 80.98 269.999 168.128 372.54l-0.875-1.056c-173.937-43.335-304.18-188.936-324.092-367.845l-0.175-1.933zM612.124 924.444c86.273-101.485 145.944-228.107 166.755-367.427l0.499-4.057h157.013c-18.688 182.253-149.359 329.449-321.317 372.565l-2.949 0.627z"],"attrs":[{}],"tags":["globe"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":104,"id":100,"name":"globe","prevSize":80,"code":59727},"setIdx":0,"setId":1,"iconIdx":181},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["replay"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":102,"id":101,"name":"replay","prevSize":80,"code":59725},"setIdx":0,"setId":1,"iconIdx":182},{"icon":{"paths":["M632.463 1023.971h-240.928c-24.813-0.335-44.839-20.361-45.174-45.141v-466.83l-322.241-440.294c-5.688-7.337-9.117-16.671-9.117-26.808 0-7.369 1.813-14.314 5.016-20.414l-0.116 0.241c7.747-14.706 22.885-24.586 40.34-24.695h903.493c17.471 0.11 32.608 9.989 40.236 24.445l0.12 0.25c3.089 5.86 4.901 12.805 4.901 20.173 0 10.136-3.43 19.471-9.191 26.908l0.075-0.1-322.241 440.294v466.797c-0.335 24.813-20.361 44.839-45.141 45.174h-0.032zM436.711 933.623h150.58v-436.68c0-0.064 0-0.138 0-0.212 0-9.955 3.401-19.116 9.105-26.383l-0.071 0.093 277.067-380.063h-722.782l278.271 380.063c5.634 7.174 9.035 16.335 9.035 26.29 0 0.075 0 0.15 0 0.224v-0.011z"],"attrs":[{}],"tags":["filter"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":101,"id":102,"name":"filter","prevSize":80,"code":59724},"setIdx":0,"setId":1,"iconIdx":183},{"icon":{"paths":["M863.086 789.943h-117.028c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886v0h117.028c40.395 0 73.142-32.747 73.142-73.142v0-234.058c0-40.395-32.747-73.142-73.142-73.142v0h-702.171c-40.395 0-73.142 32.747-73.142 73.142v0 234.058c0 40.395 32.747 73.142 73.142 73.142v0h117.028c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-117.028c-88.87 0-160.914-72.044-160.914-160.914v0-234.058c0-88.87 72.044-160.914 160.914-160.914v0h702.171c88.87 0 160.914 72.044 160.914 160.914v0 234.058c0 88.87-72.044 160.914-160.914 160.914v0z","M746.058 321.828c-24.106-0.325-43.561-19.78-43.886-43.854v-190.203h-380.342v190.172c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v0-204.8c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 204.8c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z","M716.8 1024h-409.6c-40.395 0-73.142-32.747-73.142-73.142v0-409.6c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 409.6c0 40.395-32.747 73.142-73.142 73.142v0zM321.828 936.228h380.342v-380.342h-380.342z"],"attrs":[{},{},{}],"tags":["print"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":99,"id":103,"name":"print","prevSize":80,"code":59723},"setIdx":0,"setId":1,"iconIdx":184},{"icon":{"paths":["M980.093 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":98,"id":104,"name":"align-right","prevSize":80,"code":59718},"setIdx":0,"setId":1,"iconIdx":185},{"icon":{"paths":["M624.033 453.952h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 221.761h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 686.143h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M624.033 918.335h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z"],"attrs":[{},{},{},{}],"tags":["align-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":97,"id":105,"name":"align-left","prevSize":80,"code":59719},"setIdx":0,"setId":1,"iconIdx":186},{"icon":{"paths":["M804.558 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M804.558 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["items-center"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":96,"id":106,"name":"items-center","prevSize":80,"code":59720},"setIdx":0,"setId":1,"iconIdx":187},{"icon":{"paths":["M980.093 438.861h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-justify"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":95,"id":107,"name":"align-justify","prevSize":80,"code":59721},"setIdx":0,"setId":1,"iconIdx":188},{"icon":{"paths":["M512 683.439c-94.683 0-171.439-76.755-171.439-171.439s76.755-171.439 171.439-171.439c94.683 0 171.439 76.755 171.439 171.439v0c0 94.683-76.755 171.439-171.439 171.439v0zM512 428.329c-46.211 0-83.671 37.462-83.671 83.671s37.462 83.671 83.671 83.671c46.211 0 83.671-37.462 83.671-83.671v0c0-46.211-37.462-83.671-83.671-83.671v0z","M515.511 1023.977c-71.489-0.329-129.316-58.359-129.316-129.895 0-0.411 0.001-0.823 0.005-1.234v0.063c-0.496-11.009-7.26-20.325-16.788-24.505l-0.181-0.070c-3.653-1.718-7.933-2.721-12.448-2.721-7.858 0-15.007 3.038-20.337 8.003l0.018-0.016c-23.441 23.268-55.642 37.739-91.222 38.032h-0.056c-0.252 0.001-0.55 0.003-0.848 0.003-35.579 0-67.876-14.051-91.644-36.906l0.043 0.041c-23.515-23.508-38.058-55.987-38.058-91.864s14.545-68.356 38.058-91.864v0c5.876-5.37 9.547-13.066 9.547-21.622 0-3.145-0.496-6.173-1.414-9.011l0.058 0.207c-5.723-9.782-16.134-16.274-28.071-16.384h-0.015c-71.692-0.291-129.966-57.335-132.231-128.518l-0.005-0.208c0.332-71.488 58.36-129.312 129.895-129.312 0.206 0 0.413 0 0.618 0.001h-0.032c11.009-0.496 20.325-7.26 24.505-16.788l0.070-0.181c1.718-3.653 2.721-7.933 2.721-12.448 0-7.858-3.038-15.007-8.003-20.337l0.016 0.018c-23.268-23.441-37.739-55.642-38.032-91.222v-0.056c-0.012-0.671-0.019-1.462-0.019-2.255 0-35.137 14.077-66.986 36.901-90.213l-0.018 0.019c23.508-23.515 55.987-38.058 91.864-38.058s68.356 14.545 91.864 38.058v0c6.075 5.789 14.317 9.35 23.391 9.35 3.125 0 6.153-0.422 9.028-1.214l-0.239 0.056c10.177-5.653 17.174-15.957 18.131-27.962l0.008-0.123c0-0.019 0-0.041 0-0.063 0-71.915 57.154-130.481 128.518-132.752l0.208-0.005c71.237 0.66 128.732 58.56 128.732 129.89 0 0.413-0.001 0.826-0.005 1.238v-0.063c0.477 11.185 6.924 20.76 16.218 25.665l0.166 0.080c2.998 1.135 6.465 1.792 10.084 1.792 7.909 0 15.084-3.138 20.35-8.236l-0.008 0.007c23.441-23.268 55.642-37.739 91.222-38.032h0.056c1.163-0.038 2.53-0.062 3.903-0.062 34.624 0 65.95 14.12 88.535 36.914l0.010 0.010c23.515 23.508 38.058 55.987 38.058 91.864s-14.545 68.356-38.058 91.864v0c-4.99 5.871-8.027 13.54-8.027 21.916 0 3.667 0.581 7.197 1.657 10.505l-0.067-0.24c5.653 10.177 15.957 17.174 27.962 18.131l0.123 0.008c71.192 0.937 128.814 57.74 131.062 128.518l0.005 0.208c-0.66 71.237-58.56 128.732-129.89 128.732-0.413 0-0.826-0.001-1.238-0.005h0.063c-11.185 0.477-20.76 6.924-25.665 16.218l-0.080 0.166c-1.135 2.998-1.792 6.465-1.792 10.084 0 7.909 3.138 15.084 8.236 20.35l-0.007-0.008c23.268 23.441 37.739 55.642 38.032 91.222v0.056c0.012 0.671 0.019 1.462 0.019 2.255 0 35.137-14.077 66.986-36.901 90.213l0.018-0.019c-23.508 23.515-55.987 38.058-91.864 38.058s-68.356-14.545-91.864-38.058v0c-5.258-5.092-12.433-8.23-20.341-8.23-3.62 0-7.086 0.657-10.287 1.86l0.202-0.066c-9.782 5.723-16.274 16.134-16.384 28.071v0.015c-0.937 71.192-57.74 128.814-128.518 131.062l-0.208 0.005zM356.944 777.643c0.372-0.004 0.812-0.007 1.252-0.007 15.867 0 30.927 3.45 44.471 9.643l-0.669-0.274c41.82 17.762 70.846 58.017 71.967 105.181l0.003 0.14c-0.003 0.185-0.004 0.402-0.004 0.62 0 23.297 18.4 42.297 41.461 43.26l0.088 0.003c23.005-1.873 40.964-21.005 40.964-44.331 0-0.254-0.003-0.509-0.007-0.761v0.038c0.3-47.575 28.116-88.582 68.322-107.933l0.723-0.313c13.278-5.676 28.727-8.976 44.947-8.976 32.246 0 61.445 13.042 82.611 34.139l-0.003-0.003c7.488 7.488 17.831 12.119 29.255 12.119 22.85 0 41.374-18.524 41.374-41.374 0-11.425-4.631-21.769-12.119-29.255v0c-20.848-21.12-33.725-50.154-33.725-82.193 0-16.378 3.364-31.971 9.44-46.123l-0.291 0.761c18.745-40.97 59.339-68.943 106.478-69.044h0.014c0.185 0.003 0.403 0.004 0.621 0.004 22.975 0 41.712-18.138 42.674-40.875l0.003-0.088c-1.57-22.953-20.575-40.976-43.788-40.976-0.446 0-0.889 0.007-1.332 0.019l0.064-0.001c-47.872-1.343-88.773-29.867-107.929-70.632l-0.317-0.752c-5.566-13.342-8.8-28.841-8.8-45.097 0-32.536 12.954-62.046 33.987-83.655l-0.026 0.027c7.488-7.488 12.119-17.831 12.119-29.255 0-22.85-18.524-41.374-41.374-41.374-11.425 0-21.769 4.631-29.255 12.119v0c-20.824 19.383-48.841 31.278-79.638 31.278-63.284 0-114.836-50.233-116.956-113.001l-0.005-0.195c0.003-0.185 0.004-0.403 0.004-0.621 0-22.975-18.138-41.712-40.875-42.674l-0.088-0.003c-22.953 1.57-40.976 20.575-40.976 43.788 0 0.446 0.007 0.889 0.019 1.332l-0.001-0.064c-1.343 47.872-29.867 88.773-70.632 107.929l-0.752 0.317c-13.342 5.566-28.841 8.8-45.097 8.8-32.536 0-62.046-12.954-83.655-33.987l0.027 0.026c-7.488-7.488-17.831-12.119-29.255-12.119-22.85 0-41.374 18.524-41.374 41.374 0 11.425 4.631 21.769 12.119 29.255v0c20.603 21.075 33.316 49.942 33.316 81.777 0 16.537-3.43 32.274-9.617 46.535l0.292-0.757c-17.762 41.82-58.017 70.846-105.181 71.967l-0.14 0.003c-0.185-0.003-0.402-0.004-0.62-0.004-23.297 0-42.297 18.4-43.26 41.461l-0.003 0.088c1.873 23.005 21.005 40.964 44.331 40.964 0.254 0 0.509-0.003 0.761-0.007h-0.038c47.575 0.3 88.582 28.116 107.933 68.322l0.313 0.723c5.676 13.278 8.976 28.727 8.976 44.947 0 32.246-13.042 61.445-34.139 82.611l0.003-0.003c-7.488 7.488-12.119 17.831-12.119 29.255 0 22.85 18.524 41.374 41.374 41.374 11.425 0 21.769-4.631 29.255-12.119v0c21.423-20.481 50.464-33.15 82.462-33.352h0.040zM825.038 639.555v0z"],"attrs":[{},{}],"tags":["cog"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":94,"id":108,"name":"cog","prevSize":80,"code":59722},"setIdx":0,"setId":1,"iconIdx":189},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 177.736 8.28 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-206.991 0-206.991-213.062-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M512 908.319c-0.057 0-0.125 0-0.193 0-11.369 0-21.653-4.644-29.058-12.14l-156.213-156.213c-6.884-7.373-11.11-17.304-11.11-28.222 0-22.863 18.535-41.398 41.398-41.398 10.919 0 20.849 4.226 28.246 11.134l-0.025-0.022 126.954 126.954 126.954-126.954c7.373-6.884 17.304-11.11 28.222-11.11 22.863 0 41.398 18.535 41.398 41.398 0 10.919-4.226 20.849-11.134 28.246l0.022-0.025-156.209 158.416c-7.128 6.219-16.515 10.011-26.787 10.011-0.868 0-1.73-0.027-2.585-0.080l0.116 0.006z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-download"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":93,"id":109,"name":"cloud-download","prevSize":80,"code":59715},"setIdx":0,"setId":1,"iconIdx":190},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 189.879 41.951 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-137.994 0-206.991-124.194-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M668.209 713.47c-11.406-0.137-21.709-4.745-29.262-12.15l-126.947-126.947-126.954 126.954c-7.373 6.884-17.304 11.11-28.222 11.11-22.863 0-41.398-18.535-41.398-41.398 0-10.919 4.226-20.849 11.134-28.246l-0.022 0.025 156.209-156.209c7.427-7.616 17.79-12.341 29.254-12.341s21.827 4.725 29.246 12.331l0.008 0.009 156.209 156.209c7.48 7.489 12.108 17.832 12.108 29.254s-4.626 21.765-12.108 29.256v0c-7.6 7.307-17.868 11.888-29.205 12.143l-0.049 0.001z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-upload"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":92,"id":110,"name":"cloud-upload","prevSize":80,"code":59716},"setIdx":0,"setId":1,"iconIdx":191},{"icon":{"paths":["M761.085 885.627h-387.465c-206.337-0.017-373.598-167.289-373.598-373.627 0-206.348 167.278-373.627 373.627-373.627 152.926 0 284.392 91.876 342.215 223.439l0.939 2.397c13.246-2.68 28.531-4.285 44.166-4.428l0.115-0.001c141.466 8.944 253.978 121.457 262.882 262.11l0.042 0.813c0 145.209-117.715 262.923-262.923 262.923v0zM373.619 221.401c-160.494 0-290.599 130.105-290.599 290.599s130.105 290.599 290.599 290.599v0h387.465c99.226-0.314 179.581-80.668 179.895-179.864v-0.030c-8.504-95.738-84.157-171.391-179.139-179.84l-0.755-0.054c-19.989 0.459-38.949 4.276-56.529 10.907l1.178-0.389c-4.752 1.958-10.27 3.095-16.052 3.095s-11.3-1.136-16.34-3.199l0.288 0.104c-9.801-5.017-17.16-13.636-20.404-24.069l-0.077-0.287c-36.721-121.012-147.288-207.574-278.073-207.574-0.511 0-1.022 0.001-1.533 0.004h0.079z"],"attrs":[{}],"tags":["cloud"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":91,"id":111,"name":"cloud","prevSize":80,"code":59717},"setIdx":0,"setId":1,"iconIdx":192},{"icon":{"paths":["M45.313 1022.421c-0.136 0.001-0.296 0.003-0.456 0.003-11.964 0-22.806-4.803-30.702-12.588l0.006 0.006c-8.248-8.149-13.356-19.461-13.356-31.966 0-1.401 0.065-2.787 0.19-4.155l-0.013 0.176 18.572-230.049c0.852-11.108 5.734-20.935 13.169-28.147l662.6-662.6c34.079-31.973 80.059-51.615 130.628-51.615 2.096 0 4.186 0.034 6.267 0.101l-0.303-0.008c52.335 0.418 99.758 21.108 134.873 54.592l-0.079-0.074c34.783 35.688 56.235 84.513 56.235 138.348 0 50.427-18.822 96.457-49.825 131.448l0.181-0.208-663.188 665.585c-7.185 7.16-16.72 11.966-27.348 13.161l-0.211 0.020-233.044 20.968zM105.22 767.211l-12.581 164.15 164.15-14.978 653.004-654.202c15.132-17.82 24.333-41.087 24.333-66.503 0-56.908-46.133-103.043-103.043-103.043-0.341 0-0.681 0.001-1.021 0.006h0.052c-1.828-0.124-3.962-0.194-6.112-0.194-25.163 0-48.075 9.635-65.249 25.419l0.069-0.063zM727.071 84.852v0z"],"attrs":[{}],"tags":["pencil"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":90,"id":112,"name":"pencil","prevSize":80,"code":59714},"setIdx":0,"setId":1,"iconIdx":193},{"icon":{"paths":["M617.025 525.129c-108.758 0-196.923-88.165-196.923-196.923s88.165-196.923 196.923-196.923c108.758 0 196.923 88.165 196.923 196.923v0c0 108.758-88.165 196.923-196.923 196.923v0zM617.025 210.052c-65.254 0-118.154 52.9-118.154 118.154s52.9 118.154 118.154 118.154c65.254 0 118.154-52.9 118.154-118.154v0c0-65.254-52.9-118.154-118.154-118.154v0z","M984.615 892.718c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-102.4-55.664-170.667-328.206-170.667s-328.206 68.267-328.206 170.667c0 21.751-17.633 39.385-39.385 39.385s-39.385-17.633-39.385-39.385v0c0-249.436 285.145-249.436 406.975-249.436s406.975 0 406.975 249.436c-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z","M318.753 567.664h-16.804c-80.61-8.022-143.044-75.489-143.044-157.538 0-87.412 70.862-158.273 158.273-158.273 5.362 0 10.663 0.267 15.888 0.788l-0.66-0.053c21.012 0.932 37.694 18.192 37.694 39.348 0 21.751-17.633 39.385-39.385 39.385-2.183 0-4.326-0.177-6.414-0.519l0.228 0.031c-2.281-0.241-4.928-0.378-7.607-0.378-18.98 0-36.35 6.897-49.738 18.321l0.107-0.089c-15.663 12.706-26.198 31.205-28.33 52.186l-0.027 0.326c-0.273 2.455-0.43 5.301-0.43 8.183 0 40.775 31.191 74.267 71.015 77.915l0.306 0.022c2.052 0.186 4.437 0.293 6.848 0.293 15.535 0 30.039-4.409 42.331-12.043l-0.342 0.198c5.898-3.695 13.065-5.886 20.742-5.886 21.812 0 39.494 17.682 39.494 39.494 0 14.133-7.424 26.533-18.586 33.511l-0.166 0.097c-23.058 14.912-51.098 24.022-81.222 24.678l-0.174 0.002z","M39.385 853.333c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-141.785 37.809-236.308 223.179-236.308 21.751 0 39.385 17.633 39.385 39.385s-17.633 39.385-39.385 39.385v0c-123.406 0-144.41 39.385-144.41 157.538-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z"],"attrs":[{},{},{},{}],"tags":["users"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":88,"id":113,"name":"users","prevSize":80,"code":59713},"setIdx":0,"setId":1,"iconIdx":194},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M682.667 554.667h-170.667c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 241.777h128c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["clock"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":87,"id":114,"name":"clock","prevSize":80,"code":59712},"setIdx":0,"setId":1,"iconIdx":195},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{}],"tags":["user-minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":83,"id":115,"name":"user-minus","prevSize":80,"code":59710},"setIdx":0,"setId":1,"iconIdx":196},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M927.518 660.4c-24.454-0.33-44.19-20.066-44.52-44.488v-207.79c0-24.587 19.932-44.52 44.52-44.52s44.52 19.932 44.52 44.52v0 207.758c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{},{}],"tags":["user-plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":86,"id":116,"name":"user-plus","prevSize":80,"code":59711},"setIdx":0,"setId":1,"iconIdx":197},{"icon":{"paths":["M979.856 319.009h-935.714c-24.224 0-43.862-19.638-43.862-43.862s19.638-43.862 43.862-43.862h935.714c24.224 0 43.862 19.638 43.862 43.862s-19.638 43.862-43.862 43.862v0z","M771.66 1023.718h-519.321c-2.865 0.208-6.208 0.328-9.577 0.328-74.752 0-135.856-58.437-140.12-132.119l-0.018-0.377v-613.477c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 613.477c0 23.977 27.486 44.447 58.483 44.447h519.321c32.75 0 58.483-20.468 58.483-44.447v-613.477c0-26.162 21.208-47.37 47.37-47.37s47.37 21.208 47.37 47.37v0 613.477c-4.282 74.060-65.385 132.496-140.136 132.496-3.37 0-6.712-0.119-10.022-0.352l0.445 0.025zM778.678 263.452c-0.175 0.003-0.382 0.004-0.589 0.004-23.9 0-43.276-19.376-43.276-43.276 0-0.207 0.001-0.414 0.004-0.62v0.032-87.138c0-23.977-28.071-44.447-58.483-44.447h-326.915c-32.166 0-58.483 20.468-58.483 44.447v87.138c0 24.224-19.638 43.862-43.862 43.862s-43.862-19.638-43.862-43.862v0-87.138c4.697-74.022 65.883-132.278 140.675-132.278 1.945 0 3.88 0.040 5.806 0.118l-0.276-0.008h325.161c2.174-0.119 4.719-0.188 7.28-0.188 74.82 0 136.023 58.3 140.66 131.951l0.021 0.407v87.138c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M407.901 804.41c-24.092-0.325-43.537-19.769-43.862-43.83v-264.955c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M616.099 804.41c-24.224 0-43.862-19.638-43.862-43.862v0-264.924c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0 0.001 0 0.003 0 0.004 0 24.342-19.568 44.112-43.83 44.443h-0.032z"],"attrs":[{},{},{},{}],"tags":["trash"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":81,"id":117,"name":"trash","prevSize":80,"code":59709},"setIdx":0,"setId":1,"iconIdx":198},{"icon":{"paths":["M863.070 0.023h-702.14c-88.866 0-160.907 72.041-160.907 160.907v0 351.070c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0-351.070c0-40.394 32.746-73.139 73.139-73.139v0h702.14c40.394 0 73.139 32.746 73.139 73.139v0 702.14c0 40.394-32.746 73.139-73.139 73.139v0h-351.070c-24.236 0-43.884 19.648-43.884 43.884s19.648 43.884 43.884 43.884v0h351.070c88.866 0 160.907-72.041 160.907-160.907v0-702.14c0-88.866-72.041-160.907-160.907-160.907v0z","M465.775 581.628c5.003 2.189 10.831 3.478 16.956 3.511h234.059c24.236 0 43.884-19.648 43.884-43.884s-19.648-43.884-43.884-43.884v0h-128.141l188.408-188.408c7.297-7.815 11.777-18.343 11.777-29.916 0-24.236-19.648-43.884-43.884-43.884-11.574 0-22.101 4.48-29.942 11.802l0.026-0.023-188.408 188.408v-128.141c0-24.236-19.648-43.884-43.884-43.884s-43.884 19.648-43.884 43.884v0 234.047c0.033 6.137 1.322 11.965 3.62 17.252l-0.11-0.284c4.316 10.739 12.665 19.089 23.125 23.305l0.28 0.099z","M277.953 643.651h-175.535c-56.418 0.33-102.065 45.976-102.396 102.364v175.567c0.33 56.418 45.976 102.065 102.364 102.396h175.567c56.418-0.33 102.065-45.976 102.396-102.364v-175.567c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM292.581 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-175.535c-8.079 0-14.628-6.55-14.628-14.628v0-175.535c0-8.079 6.55-14.628 14.628-14.628v0h175.535c8.079 0 14.628 6.55 14.628 14.628v0z"],"attrs":[{},{},{}],"tags":["window-minimize"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":80,"id":118,"name":"window-minimize","prevSize":80,"code":59706},"setIdx":0,"setId":1,"iconIdx":199},{"icon":{"paths":["M863.070 1023.977h-351.070c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h351.070c40.394 0 73.139-32.746 73.139-73.139v0-702.14c0-40.394-32.746-73.139-73.139-73.139v0h-702.14c-40.394 0-73.139 32.746-73.139 73.139v0 351.070c0 24.236-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0-351.070c0-88.866 72.041-160.907 160.907-160.907v0h702.14c88.866 0 160.907 72.041 160.907 160.907v0 702.14c0 88.866-72.041 160.907-160.907 160.907v0z","M746.047 555.884c-24.105-0.325-43.559-19.779-43.884-43.852v-190.195h-190.163c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h234.047c24.105 0.325 43.559 19.779 43.884 43.852v234.079c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M482.745 585.139c-11.709-0.922-21.991-6.371-29.214-14.58l-0.041-0.048c-6.935-7.728-11.175-17.996-11.175-29.255s4.24-21.528 11.211-29.297l-0.036 0.041 263.303-263.303c7.815-7.297 18.343-11.777 29.916-11.777 24.236 0 43.884 19.648 43.884 43.884 0 11.574-4.48 22.101-11.802 29.942l0.023-0.026-266.813 259.792c-7.264 8.256-17.547 13.707-29.106 14.619l-0.151 0.010z","M277.953 1023.977h-175.535c-56.418-0.33-102.065-45.976-102.396-102.364v-175.567c0.33-56.418 45.976-102.065 102.364-102.396h175.567c56.418 0.33 102.065 45.976 102.396 102.364v175.567c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 731.419c-8.079 0-14.628 6.55-14.628 14.628v0 175.535c0 8.079 6.55 14.628 14.628 14.628v0h175.535c8.079 0 14.628-6.55 14.628-14.628v0-175.535c0-8.079-6.55-14.628-14.628-14.628v0z"],"attrs":[{},{},{},{}],"tags":["window-maximize"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":79,"id":119,"name":"window-maximize","prevSize":80,"code":59707},"setIdx":0,"setId":1,"iconIdx":200},{"icon":{"paths":["M862.106 1022.571h-700.213c-88.622 0-160.465-71.843-160.465-160.465v0-700.213c0-88.622 71.843-160.465 160.465-160.465v0h350.106c24.17 0 43.763 19.594 43.763 43.763s-19.594 43.763-43.763 43.763v0h-350.106c-40.283 0-72.938 32.656-72.938 72.938v0 700.213c0 40.283 32.656 72.938 72.938 72.938v0h700.213c40.283 0 72.938-32.656 72.938-72.938v0-350.106c0-24.17 19.594-43.763 43.763-43.763s43.763 19.594 43.763 43.763v0 350.106c0 88.622-71.843 160.465-160.465 160.465v0z","M978.808 322.359c-24.038-0.324-43.439-19.725-43.763-43.732v-189.673h-189.641c-24.17 0-43.763-19.594-43.763-43.763s19.594-43.763 43.763-43.763v0h233.405c24.038 0.324 43.439 19.725 43.763 43.732v233.436c-0.324 24.038-19.725 43.439-43.732 43.763h-0.031z","M599.527 468.237c-11.677-0.919-21.931-6.354-29.134-14.54l-0.041-0.048c-6.916-7.706-11.145-17.947-11.145-29.175s4.229-21.469 11.18-29.216l-0.036 0.041 379.281-379.281c8.011-8.58 19.39-13.929 32.018-13.929 24.17 0 43.763 19.594 43.763 43.763 0 12.628-5.349 24.007-13.903 31.994l-0.026 0.023-382.782 375.78c-7.244 8.233-17.498 13.669-29.026 14.579l-0.15 0.010z"],"attrs":[{},{},{}],"tags":["external-link"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":78,"id":120,"name":"external-link","prevSize":80,"code":59708},"setIdx":0,"setId":1,"iconIdx":201},{"icon":{"paths":["M512 1023.452c-234.044 0-423.774-189.73-423.774-423.774s189.73-423.774 423.774-423.774v0h146.13c24.211 0 43.839 19.627 43.839 43.839s-19.627 43.839-43.839 43.839v0h-146.13c-185.621 0-336.097 150.475-336.097 336.097s150.475 336.097 336.097 336.097c185.621 0 336.097-150.475 336.097-336.097v0c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c-0.333 233.911-189.864 423.443-423.743 423.774h-0.032z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-0.004-0.004c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l144.376-144.376-144.376-144.376c-8.595-8.025-13.953-19.423-13.953-32.074 0-24.211 19.627-43.839 43.839-43.839 12.65 0 24.048 5.358 32.049 13.927l0.023 0.026 175.355 175.355c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0l-175.355 175.355c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["refresh"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":77,"id":121,"name":"refresh","prevSize":80,"code":59704},"setIdx":0,"setId":1,"iconIdx":202},{"icon":{"paths":["M512 528.516c-136.816 0-247.725-110.91-247.725-247.725s110.91-247.725 247.725-247.725c136.816 0 247.725 110.91 247.725 247.725v0c0 136.816-110.91 247.725-247.725 247.725v0zM512 132.155c-82.088 0-148.635 66.547-148.635 148.635s66.547 148.635 148.635 148.635c82.088 0 148.635-66.547 148.635-148.635v0c0-82.088-66.547-148.635-148.635-148.635v0z","M974.421 990.935c-27.214-0.367-49.178-22.331-49.545-49.509v-0.036c0-128.817-70.024-214.696-412.876-214.696s-412.876 85.879-412.876 214.696c0 27.363-22.182 49.545-49.545 49.545s-49.545-22.182-49.545-49.545v0c0-313.786 358.706-313.786 511.966-313.786s511.966 0 511.966 313.786c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{}],"tags":["user"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":76,"id":122,"name":"user","prevSize":80,"code":59705},"setIdx":0,"setId":1,"iconIdx":203},{"icon":{"paths":["M980.247 964.701h-936.496c-16.088-0.051-30.159-8.633-37.933-21.458l-0.111-0.198c-3.59-6.323-5.705-13.888-5.705-21.949s2.115-15.627 5.823-22.173l-0.117 0.224 468.247-819.433c8.296-12.379 22.232-20.419 38.044-20.419s29.748 8.039 37.942 20.254l0.104 0.165 468.247 819.433c3.59 6.323 5.705 13.888 5.705 21.949s-2.115 15.627-5.823 22.173l0.117-0.224c-7.885 13.022-21.958 21.606-38.038 21.657h-0.007zM119.257 876.905h785.486l-392.743-687.154z","M512 642.78c-24.113-0.325-43.573-19.786-43.898-43.866v-204.89c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 204.858c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z","M512 818.373c-24.113-0.325-43.573-19.786-43.898-43.866v-29.297c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 29.265c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z"],"attrs":[{},{},{}],"tags":["exclamation-triangle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":75,"id":123,"name":"exclamation-triangle","prevSize":80,"code":59682},"setIdx":0,"setId":1,"iconIdx":204},{"icon":{"paths":["M788.745 110.712h-69.186v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-249.071v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-69.186c-84.063 0-152.209 68.147-152.209 152.209v0 608.839c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-608.839c0-84.063-68.147-152.209-152.209-152.209v0zM235.255 193.735h69.186v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h249.071v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h69.186c38.21 0 69.186 30.976 69.186 69.186v0 152.209h-691.862v-152.209c0-38.21 30.976-69.186 69.186-69.186v0zM788.745 940.947h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-373.606h691.862v373.606c0 38.21-30.976 69.186-69.186 69.186v0z"],"attrs":[{}],"tags":["calendar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":74,"id":124,"name":"calendar","prevSize":80,"code":59687},"setIdx":0,"setId":1,"iconIdx":205},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M625.777 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":73,"id":125,"name":"chevron-circle-left","prevSize":80,"code":59688},"setIdx":0,"setId":1,"iconIdx":206},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":70,"id":126,"name":"chevron-circle-down","prevSize":80,"code":59689},"setIdx":0,"setId":1,"iconIdx":207},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M398.223 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":69,"id":127,"name":"chevron-circle-right","prevSize":80,"code":59690},"setIdx":0,"setId":1,"iconIdx":208},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":68,"id":128,"name":"chevron-circle-up","prevSize":80,"code":59691},"setIdx":0,"setId":1,"iconIdx":209},{"icon":{"paths":["M512 902.549c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-260.364c-5.628-8.568-8.981-19.073-8.981-30.354 0-30.81 24.977-55.792 55.792-55.792 10.145 0 19.649 2.705 27.846 7.433l-0.269-0.143 223.173 223.173 223.173-223.173c7.925-4.589 17.434-7.289 27.577-7.289 30.81 0 55.792 24.977 55.792 55.792 0 11.285-3.353 21.785-9.108 30.566l0.128-0.209-258.132 258.132c-9.737 10.997-23.705 18.053-39.331 18.593l-0.092 0.004z","M512 493.405c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-262.596c-3.437-7.037-5.446-15.305-5.446-24.041 0-30.81 24.977-55.792 55.792-55.792 8.741 0 17.009 2.009 24.377 5.597l-0.329-0.145 223.173 223.173 223.173-223.173c7.037-3.437 15.305-5.446 24.041-5.446 30.81 0 55.792 24.977 55.792 55.792 0 8.741-2.009 17.009-5.597 24.377l0.145-0.329-260.364 260.364c-9.233 10.493-22.31 17.429-37.002 18.583l-0.192 0.012z"],"attrs":[{},{}],"tags":["angle-double-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":67,"id":129,"name":"angle-double-down","prevSize":80,"code":59692},"setIdx":0,"setId":1,"iconIdx":210},{"icon":{"paths":["M436.578 832.544c-0.073 0-0.172 0-0.262 0-15.535 0-29.584-6.348-39.707-16.591l-0.004-0.004-261.716-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l261.716-261.716c8.688-5.708 19.333-9.102 30.778-9.102 31.242 0 56.568 25.327 56.568 56.568 0 10.286-2.746 19.925-7.538 28.233l0.144-0.272-226.267 226.267 226.267 226.267c10.22 10.237 16.542 24.365 16.542 39.973s-6.32 29.742-16.542 39.973v0c-9.854 8.923-22.994 14.389-37.408 14.389-0.902 0-1.8-0.024-2.694-0.065l0.124 0.004z","M851.399 832.544c-15.091-1.188-28.351-8.214-37.656-18.795l-0.055-0.065-263.977-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l263.977-259.453c7.129-3.487 15.515-5.521 24.379-5.521 31.242 0 56.568 25.327 56.568 56.568 0 8.864-2.038 17.25-5.669 24.715l0.144-0.336-226.267 226.267 226.267 226.267c8.942 9.959 14.408 23.201 14.408 37.714s-5.466 27.749-14.45 37.763l0.045-0.055c-9.366 10.641-22.619 17.666-37.517 18.843l-0.193 0.014z"],"attrs":[{},{}],"tags":["angle-double-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":66,"id":130,"name":"angle-double-left","prevSize":80,"code":59693},"setIdx":0,"setId":1,"iconIdx":211},{"icon":{"paths":["M587.102 831.182c-0.073 0-0.171 0-0.259 0-15.47 0-29.463-6.321-39.534-16.519l-0.004-0.004c-10.173-10.194-16.472-24.266-16.472-39.803s6.29-29.611 16.472-39.809v0l225.304-225.304-225.304-225.304c-3.536-7.161-5.605-15.588-5.605-24.492 0-31.111 25.217-56.325 56.325-56.325 10.665 0 20.638 2.967 29.14 8.115l-0.251-0.143 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.83 11.106-23.933 18.225-39.711 18.775l-0.094 0.004z","M174.042 831.182c-15.029-1.181-28.228-8.178-37.495-18.716l-0.053-0.063c-8.9-9.92-14.342-23.099-14.342-37.554s5.442-27.63 14.391-37.603l-0.045 0.053 225.304-225.304-225.304-225.304c-3.467-7.105-5.497-15.45-5.497-24.276 0-31.111 25.217-56.325 56.325-56.325 8.82 0 17.176 2.028 24.609 5.644l-0.339-0.145 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.32 10.596-22.521 17.598-37.357 18.765l-0.192 0.014z"],"attrs":[{},{}],"tags":["angle-double-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":65,"id":131,"name":"angle-double-right","prevSize":80,"code":59694},"setIdx":0,"setId":1,"iconIdx":212},{"icon":{"paths":["M768.744 493.657c-0.079 0-0.163 0-0.259 0-15.11 0-28.77-6.175-38.616-16.135l-220.071-220.071-220.067 220.067c-6.991 3.451-15.223 5.479-23.923 5.479-30.385 0-55.016-24.631-55.016-55.016 0-10.412 2.899-20.155 7.927-28.458l-0.139 0.247 254.542-254.542c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l256.744 256.744c9.943 9.955 16.087 23.695 16.087 38.874s-6.151 28.926-16.087 38.877v0c-9.583 8.683-22.363 13.999-36.378 13.999-0.883 0-1.752-0.019-2.623-0.067l0.127 0.007z","M768.744 897.118c-14.683-1.159-27.57-7.987-36.629-18.283l-0.055-0.060-220.067-220.067-220.067 220.067c-6.935 3.391-15.091 5.371-23.707 5.371-30.385 0-55.016-24.631-55.016-55.016 0-8.623 1.987-16.772 5.515-24.038l-0.139 0.331 256.744-256.744c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l252.342 256.744c8.695 9.691 14.011 22.565 14.011 36.678s-5.316 26.99-14.059 36.726l0.043-0.055c-9.104 10.351-22.001 17.184-36.486 18.331l-0.187 0.012z"],"attrs":[{},{}],"tags":["angle-double-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":64,"id":132,"name":"angle-double-up","prevSize":80,"code":59695},"setIdx":0,"setId":1,"iconIdx":213},{"icon":{"paths":["M512 724.21c-0.086 0-0.192 0-0.293 0-17.487 0-33.3-7.139-44.687-18.671l-0.006-0.006-294.549-297.097c-6.421-9.779-10.246-21.757-10.246-34.639 0-35.163 28.506-63.662 63.662-63.662 11.573 0 22.424 3.091 31.773 8.485l-0.306-0.164 254.656 254.656 254.656-254.656c9.044-5.23 19.894-8.318 31.469-8.318 35.163 0 63.662 28.506 63.662 63.662 0 12.88-3.82 24.863-10.395 34.879l0.149-0.244-297.097 297.097c-10.874 11.029-25.782 18.050-42.325 18.671l-0.112 0.002z"],"attrs":[{}],"tags":["angle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":224,"id":133,"name":"angle-down","prevSize":80,"code":59696},"setIdx":0,"setId":1,"iconIdx":214},{"icon":{"paths":["M645.785 836.904c-0.077 0-0.174 0-0.264 0-15.744 0-29.987-6.434-40.247-16.814l-267.57-267.57c-10.36-10.374-16.768-24.697-16.768-40.517s6.404-30.147 16.768-40.517v0l267.566-265.27c8.804-5.784 19.594-9.224 31.197-9.224 31.667 0 57.335 25.671 57.335 57.335 0 10.424-2.782 20.194-7.64 28.617l0.144-0.274-229.343 229.343 229.343 229.343c10.36 10.374 16.768 24.697 16.768 40.517s-6.404 30.147-16.768 40.517v0c-9.987 9.044-23.307 14.584-37.917 14.584-0.914 0-1.824-0.023-2.732-0.064l0.124 0.004z"],"attrs":[{}],"tags":["angle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":62,"id":134,"name":"angle-left","prevSize":80,"code":59697},"setIdx":0,"setId":1,"iconIdx":215},{"icon":{"paths":["M377.809 837.894c-16.204-0.566-30.605-7.836-40.589-19.11l-0.054-0.059c-10.396-10.404-16.822-24.776-16.822-40.643s6.424-30.235 16.822-40.645v0l230.044-230.044-230.044-230.044c-2.746-6.474-4.334-14.004-4.334-21.905 0-31.765 25.748-57.513 57.513-57.513 10.324 0 20.016 2.723 28.392 7.484l-0.286-0.149 268.384 268.384c10.396 10.406 16.822 24.773 16.822 40.643s-6.424 30.236-16.822 40.645v0l-268.384 263.783c-10.036 11.334-24.433 18.607-40.543 19.164l-0.096 0.006z"],"attrs":[{}],"tags":["angle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":61,"id":135,"name":"angle-right","prevSize":80,"code":59698},"setIdx":0,"setId":1,"iconIdx":216},{"icon":{"paths":["M804.999 721.286c-0.087 0-0.194 0-0.29 0-17.244 0-32.838-7.040-44.069-18.415l-251.149-251.149-251.143 251.143c-7.978 3.94-17.369 6.249-27.304 6.249-34.676 0-62.787-28.109-62.787-62.787 0-11.887 3.305-23 9.042-32.478l-0.157 0.277 292.999-292.999c11.357-11.344 27.043-18.363 44.37-18.363s33.008 7.014 44.37 18.363v0l292.999 292.999c11.344 11.357 18.363 27.043 18.363 44.37s-7.014 33.008-18.363 44.37v0c-11.24 11.41-26.866 18.481-44.134 18.481-0.966 0-1.925-0.024-2.88-0.070l0.133 0.002z"],"attrs":[{}],"tags":["angle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":60,"id":136,"name":"angle-up","prevSize":80,"code":59699},"setIdx":0,"setId":1,"iconIdx":217},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M746.058 321.828c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-203.048-203.048-203.044 203.044c-7.816 7.297-18.344 11.778-29.918 11.778-24.237 0-43.886-19.648-43.886-43.886 0-11.575 4.48-22.102 11.803-29.944l-0.023 0.026 234.058-234.058c7.939-7.93 18.904-12.835 31.012-12.835s23.073 4.904 31.013 12.835v0l234.058 234.058c7.93 7.939 12.835 18.904 12.835 31.012s-4.904 23.073-12.835 31.013v0c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["upload"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":59,"id":137,"name":"upload","prevSize":80,"code":59700},"setIdx":0,"setId":1,"iconIdx":218},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M512 731.429c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-234.062-234.062c-7.297-7.816-11.778-18.344-11.778-29.918 0-24.237 19.648-43.886 43.886-43.886 11.575 0 22.102 4.48 29.944 11.803l-0.026-0.023 203.044 203.044 203.044-203.044c7.816-7.297 18.344-11.778 29.918-11.778 24.237 0 43.886 19.648 43.886 43.886 0 11.575-4.48 22.102-11.803 29.944l0.023-0.026-234.058 234.058c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["download"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":113,"id":138,"name":"download","prevSize":80,"code":59734},"setIdx":0,"setId":1,"iconIdx":219},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM85.333 512c0-0.111 0-0.24 0-0.369 0-102.621 36.521-196.712 97.276-269.985l-0.565 0.701 599.609 599.609c-72.916 60.16-167.308 96.645-270.223 96.645-235.327 0-426.097-190.771-426.097-426.097 0-0.177 0-0.353 0-0.531v0.028zM841.956 781.653l-599.609-599.609c72.855-59.977 167.108-96.344 269.855-96.344 235.327 0 426.097 190.771 426.097 426.097 0 102.747-36.367 197-96.931 270.591l0.587-0.735z"],"attrs":[{}],"tags":["ban"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":58,"id":139,"name":"ban","prevSize":80,"code":59701},"setIdx":0,"setId":1,"iconIdx":220},{"icon":{"paths":["M1021.85 393.483c-4.841-15.030-17.644-26.152-33.316-28.484l-0.227-0.028-303.002-44.165-135.848-274.491c-7.746-12.831-21.614-21.279-37.457-21.279s-29.71 8.447-37.346 21.083l-0.11 0.195-135.848 274.491-303.002 44.165c-15.899 2.36-28.701 13.481-33.462 28.219l-0.081 0.292c-1.397 4-2.204 8.612-2.204 13.413 0 11.571 4.687 22.048 12.267 29.634v0l220.265 213.556-51.991 301.885c-0.38 2.136-0.597 4.594-0.597 7.102 0 14.016 6.787 26.448 17.254 34.186l0.115 0.081c6.76 4.866 15.204 7.783 24.332 7.783 7.263 0 14.096-1.847 20.052-5.097l-0.219 0.11 270.579-142.557 271.137 142.557c5.647 3.156 12.387 5.020 19.564 5.031h0.004c9.211-0.109 17.721-3.021 24.742-7.922l-0.143 0.094c10.582-7.821 17.369-20.251 17.369-34.267 0-2.509-0.218-4.967-0.634-7.356l0.037 0.254-52.551-301.885 219.705-213.556c7.83-7.626 12.687-18.27 12.687-30.050 0-4.646-0.756-9.117-2.151-13.294l0.085 0.296z"],"attrs":[{}],"tags":["star-fill"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":57,"id":140,"name":"star-fill","prevSize":80,"code":59702},"setIdx":0,"setId":1,"iconIdx":221},{"icon":{"paths":["M802.661 1001.092c-7.178-0.012-13.918-1.875-19.772-5.137l0.207 0.106-271.096-142.535-271.096 142.535c-5.737 3.14-12.567 4.986-19.829 4.986-9.126 0-17.571-2.916-24.452-7.867l0.124 0.085c-10.58-7.82-17.366-20.248-17.366-34.262 0-2.509 0.217-4.966 0.634-7.355l-0.037 0.254 52.543-301.84-220.232-213.524c-7.577-7.585-12.265-18.059-12.265-29.629 0-4.8 0.807-9.412 2.291-13.706l-0.089 0.295c4.841-15.028 17.641-26.148 33.311-28.48l0.227-0.028 302.957-44.158 135.828-274.45c7.745-12.829 21.611-21.276 37.451-21.276s29.706 8.446 37.341 21.080l0.11 0.195 135.828 274.45 302.957 44.158c15.896 2.359 28.697 13.479 33.457 28.215l0.081 0.292c1.397 4 2.204 8.611 2.204 13.411 0 11.569-4.686 22.045-12.265 29.63v0l-220.232 213.524 51.984 301.84c0.38 2.135 0.597 4.593 0.597 7.101 0 14.014-6.786 26.444-17.251 34.181l-0.115 0.081c-6.725 4.703-15.021 7.598-23.979 7.824l-0.056 0.001zM512 764.651c7.119 0.088 13.834 1.727 19.85 4.594l-0.287-0.123 215.201 111.792-40.805-239.795c-0.368-2.129-0.579-4.58-0.579-7.081 0-11.813 4.698-22.528 12.328-30.38l-0.010 0.010 174.396-167.689-240.912-35.774c-13.783-2.252-25.168-10.868-31.19-22.677l-0.111-0.241-107.88-217.995-107.88 218.555c-6.135 12.049-17.52 20.666-31.056 22.884l-0.246 0.033-240.912 35.215 174.396 167.689c7.619 7.842 12.317 18.557 12.317 30.37 0 2.501-0.211 4.952-0.614 7.338l0.035-0.257-40.805 241.472 215.201-111.792c5.628-3.296 12.279-5.497 19.381-6.135l0.183-0.013z"],"attrs":[{}],"tags":["star"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":56,"id":141,"name":"star","prevSize":80,"code":59703},"setIdx":0,"setId":1,"iconIdx":222},{"icon":{"paths":["M679.213 992.738c-0.086 0-0.19 0-0.292 0-17.22 0-32.796-7.035-44.013-18.388l-418.039-418.039c-11.33-11.344-18.339-27.010-18.339-44.311s7.007-32.967 18.339-44.313v0l418.033-418.033c11.167-10.427 26.211-16.828 42.747-16.828 34.631 0 62.705 28.074 62.705 62.705 0 16.538-6.402 31.58-16.864 42.785l0.034-0.037-373.722 373.722 373.722 373.722c11.33 11.344 18.339 27.010 18.339 44.311s-7.007 32.967-18.339 44.313v0c-11.222 11.36-26.798 18.394-44.019 18.394-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":16,"id":142,"name":"chevron-left","prevSize":80,"code":59648},"setIdx":0,"setId":1,"iconIdx":223},{"icon":{"paths":["M344.779 992.761c-0.086 0-0.19 0-0.292 0-17.221 0-32.798-7.035-44.016-18.389l-0.006-0.006c-11.331-11.345-18.34-27.011-18.34-44.313s7.008-32.969 18.34-44.315v0l373.739-373.739-373.739-373.739c-10.427-11.167-16.829-26.212-16.829-42.749 0-34.632 28.075-62.708 62.708-62.708 16.539 0 31.582 6.402 42.787 16.865l-0.037-0.034 418.053 418.053c11.331 11.345 18.34 27.011 18.34 44.313s-7.008 32.969-18.34 44.315v0l-418.053 418.053c-11.223 11.36-26.8 18.395-44.021 18.395-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":17,"id":143,"name":"chevron-right","prevSize":80,"code":59649},"setIdx":0,"setId":1,"iconIdx":224},{"icon":{"paths":["M512 774.266c-0.084 0-0.183 0-0.282 0-16.621 0-31.655-6.79-42.481-17.748l-403.49-403.49c-6.608-9.557-10.557-21.395-10.557-34.153 0-33.426 27.098-60.522 60.522-60.522 13.37 0 25.728 4.335 35.742 11.677l-0.17-0.119 360.715 358.295 360.715-358.295c9.294-6.106 20.686-9.741 32.927-9.741 33.426 0 60.522 27.098 60.522 60.522 0 11.002-2.935 21.318-8.065 30.207l0.155-0.294-403.485 403.485c-10.561 11.928-25.717 19.583-42.668 20.171l-0.102 0.002z"],"attrs":[{}],"tags":["chevron-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":18,"id":144,"name":"chevron-down","prevSize":80,"code":59650},"setIdx":0,"setId":1,"iconIdx":225},{"icon":{"paths":["M912.529 772.345c-0.083 0-0.182 0-0.279 0-16.5 0-31.424-6.74-42.17-17.619l-358.079-358.079-358.074 355.671c-9.226 6.061-20.534 9.669-32.685 9.669-33.181 0-60.080-26.899-60.080-60.080 0-10.921 2.914-21.161 8.005-29.985l-0.154 0.291 400.529-400.529c10.869-10.856 25.879-17.571 42.456-17.571s31.587 6.714 42.457 17.571v0l400.529 400.529c10.856 10.869 17.571 25.879 17.571 42.456s-6.714 31.587-17.571 42.457v0c-10.467 9.481-24.421 15.283-39.728 15.283-0.96 0-1.913-0.022-2.862-0.068l0.134 0.005z"],"attrs":[{}],"tags":["chevron-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":19,"id":145,"name":"chevron-up","prevSize":80,"code":59651},"setIdx":0,"setId":1,"iconIdx":226},{"icon":{"paths":["M777.445 959.937c-0.065 0-0.144 0-0.22 0-11.19 0-21.502-3.743-29.759-10.044l0.119 0.088-530.888-398.166c-12.143-9.177-19.908-23.59-19.908-39.817s7.765-30.639 19.784-39.726l0.124-0.091 530.888-398.166c8.229-6.251 18.645-10.014 29.941-10.014 8.203 0 15.94 1.984 22.762 5.498l-0.278-0.131c16.203 8.535 27.088 25.214 27.208 44.445v796.35c-0.121 19.249-11.006 35.927-26.932 44.329l-0.275 0.133c-6.602 3.186-14.334 5.125-22.5 5.309l-0.063 0.002zM329.508 512l398.166 298.625v-597.249z"],"attrs":[{}],"tags":["caret-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":20,"id":146,"name":"caret-left","prevSize":80,"code":59652},"setIdx":0,"setId":1,"iconIdx":227},{"icon":{"paths":["M246.514 960.008c-8.001-0.105-15.52-2.052-22.189-5.441l0.287 0.133c-16.574-8.253-27.783-25.040-27.876-44.458v-796.469c0.092-19.426 11.302-36.213 27.587-44.339l0.287-0.132c6.449-3.33 14.077-5.284 22.158-5.284 11.175 0 21.478 3.731 29.729 10.017l-0.119-0.089 530.972 398.228c12.145 9.177 19.912 23.594 19.912 39.823s-7.766 30.645-19.789 39.733l-0.124 0.091-530.972 398.228c-8.14 6.214-18.456 9.957-29.645 9.957-0.077 0-0.156 0-0.232 0h0.012zM296.292 213.328v597.343l398.228-298.672z"],"attrs":[{}],"tags":["caret-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":21,"id":147,"name":"caret-right","prevSize":80,"code":59653},"setIdx":0,"setId":1,"iconIdx":228},{"icon":{"paths":["M512 808.242c-0.092 0-0.203 0.002-0.311 0.002-15.157 0-28.607-7.307-37.020-18.589l-0.088-0.122-374.2-498.935c-5.874-7.735-9.411-17.522-9.411-28.14 0-7.708 1.865-14.982 5.168-21.391l-0.124 0.263c8.022-15.226 23.696-25.457 41.77-25.57h748.419c18.091 0.116 33.765 10.344 41.662 25.311l0.125 0.259c3.18 6.151 5.044 13.42 5.044 21.131 0 10.614-3.536 20.406-9.494 28.255l0.085-0.116-374.2 498.935c-8.503 11.404-21.951 18.712-37.108 18.712-0.109 0-0.218 0-0.329-0.002h0.017zM231.349 309.307l280.651 374.2 280.651-374.2z"],"attrs":[{}],"tags":["caret-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":22,"id":148,"name":"caret-down","prevSize":80,"code":59654},"setIdx":0,"setId":1,"iconIdx":229},{"icon":{"paths":["M886.087 808.153h-748.175c-18.084-0.115-33.754-10.339-41.649-25.303l-0.125-0.259c-3.18-6.148-5.042-13.416-5.042-21.125 0-10.612 3.535-20.4 9.492-28.247l-0.085 0.116 374.087-498.782c8.871-10.966 22.328-17.919 37.409-17.919s28.537 6.953 37.338 17.828l0.069 0.090 374.087 498.782c5.874 7.732 9.407 17.518 9.407 28.131 0 7.706-1.864 14.977-5.165 21.386l0.123-0.262c-8.019 15.222-23.689 25.45-41.757 25.562h-0.016zM231.436 714.631h561.131l-280.564-374.087z"],"attrs":[{}],"tags":["caret-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":23,"id":149,"name":"caret-up","prevSize":80,"code":59655},"setIdx":0,"setId":1,"iconIdx":230},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["search"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":24,"id":150,"name":"search","prevSize":80,"code":59656},"setIdx":0,"setId":1,"iconIdx":231},{"icon":{"paths":["M367.973 877.709c-12.364-0.429-23.354-5.979-30.973-14.583l-0.039-0.045-292.569-292.569c-12.118-7.943-20.011-21.462-20.011-36.822 0-24.237 19.649-43.886 43.886-43.886 16.258 0 30.454 8.843 38.038 21.983l0.112 0.213 261.556 259.802 612.637-610.884c6.739-4.429 14.999-7.063 23.874-7.063 24.237 0 43.886 19.649 43.886 43.886 0 7.977-2.129 15.457-5.848 21.903l0.112-0.213-643.651 643.651c-7.658 8.649-18.646 14.2-30.94 14.626l-0.073 0.001z"],"attrs":[{}],"tags":["check"],"grid":16,"isMulticolor":false,"isMulticolor2":false,"width":1088},"attrs":[{}],"properties":{"order":25,"id":151,"name":"check","prevSize":80,"code":59657},"setIdx":0,"setId":1,"iconIdx":232},{"icon":{"paths":["M426.842 696.51c-11.361-0.894-21.337-6.182-28.346-14.147l-0.040-0.047-170.317-170.317c-2.623-5.368-4.157-11.68-4.157-18.35 0-23.516 19.064-42.579 42.579-42.579 6.67 0 12.983 1.534 18.603 4.269l-0.253-0.11 140.228 140.228 484.268-480.861c5.368-2.623 11.68-4.157 18.35-4.157 23.516 0 42.579 19.064 42.579 42.579 0 6.67-1.534 12.983-4.269 18.603l0.11-0.253-510.95 510.95c-7.048 8.010-17.025 13.299-28.241 14.184l-0.146 0.009z","M512 1022.95c-191.476-0.317-358.217-105.908-445.47-261.972l-1.328-2.587c-31.938-55.832-53.595-121.525-60.581-191.54l-0.166-2.053c-1.75-15.87-2.746-34.274-2.746-52.91 0-191.528 105.381-358.444 261.324-445.927l2.575-1.327c55.832-31.938 121.525-53.595 191.54-60.581l2.053-0.166c16.139-1.838 34.846-2.885 53.796-2.885 52.724 0 103.554 8.111 151.308 23.156l-3.563-0.969c19.66 4.032 34.236 21.19 34.236 41.754 0 23.516-19.064 42.579-42.579 42.579-5.793 0-11.317-1.158-16.352-3.253l0.282 0.104c-37.278-11.625-80.141-18.322-124.567-18.322-16.116 0-32.026 0.881-47.685 2.599l1.933-0.172c-60.018 6.3-114.675 24.271-163.354 51.622l2.121-1.095c-49.065 27.393-90.495 62.305-124.293 103.695l-0.607 0.765c-59.499 72.093-95.584 165.431-95.584 267.195 0 16.071 0.899 31.933 2.652 47.536l-0.174-1.916c6.3 60.018 24.271 114.675 51.622 163.354l-1.095-2.121c27.393 49.065 62.305 90.495 103.695 124.293l0.765 0.607c72.093 59.499 165.431 95.584 267.195 95.584 16.071 0 31.933-0.899 47.536-2.652l-1.916 0.174c60.018-6.3 114.675-24.271 163.354-51.622l-2.121 1.095c49.065-27.393 90.495-62.305 124.293-103.695l0.607-0.765c59.499-72.093 95.584-165.431 95.584-267.195 0-16.071-0.899-31.933-2.652-47.536l0.174 1.916c-0.129-1.276-0.204-2.758-0.204-4.258 0-24.725 20.044-44.769 44.769-44.769 23.226 0 42.321 17.686 44.551 40.326l0.015 0.185c1.73 15.781 2.716 34.082 2.716 52.613 0 191.743-105.619 358.82-261.851 446.222l-2.584 1.328c-56.511 33.262-123.144 55.912-194.296 63.403l-2.137 0.182c-17.6 0-35.767 0-52.798 0z"],"attrs":[{},{}],"tags":["check-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":26,"id":152,"name":"check-circle","prevSize":80,"code":59658},"setIdx":0,"setId":1,"iconIdx":233},{"icon":{"paths":["M586.932 512l312.455-312.455c10.394-9.708 16.875-23.488 16.875-38.79 0-29.283-23.737-53.020-53.020-53.020-15.299 0-29.084 6.481-38.759 16.841l-0.027 0.029-312.455 312.455-312.455-312.455c-9.444-8.816-22.161-14.228-36.145-14.228-29.283 0-53.020 23.737-53.020 53.020 0 13.985 5.412 26.701 14.261 36.174l-0.027-0.029 312.455 312.455-312.455 312.455c-9.582 9.589-15.504 22.839-15.504 37.468s5.926 27.874 15.504 37.469v0c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0l312.455-312.455 312.455 312.455c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0c9.582-9.589 15.504-22.839 15.504-37.468s-5.926-27.874-15.504-37.469v0z"],"attrs":[{}],"tags":["times"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":265,"id":153,"name":"times","prevSize":80,"code":59659},"setIdx":0,"setId":1,"iconIdx":234},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M341.333 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l341.333-341.333c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-341.333 341.333c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M682.667 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-341.337-341.337c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 341.333 341.333c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{},{}],"tags":["times-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":28,"id":154,"name":"times-circle","prevSize":80,"code":59660},"setIdx":0,"setId":1,"iconIdx":235},{"icon":{"paths":["M559.485 464.515v-395.695c0-26.223-21.257-47.485-47.485-47.485s-47.485 21.257-47.485 47.485v0 395.695h-395.695c-26.223 0-47.485 21.257-47.485 47.485s21.257 47.485 47.485 47.485v0h395.695v395.695c0.352 26.082 21.403 47.133 47.447 47.485h0.033c26.223 0 47.485-21.257 47.485-47.485v0-395.695h395.695c26.223 0 47.485-21.257 47.485-47.485v0c-0.352-26.082-21.403-47.133-47.447-47.485h-0.033z"],"attrs":[{}],"tags":["plus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":35,"id":155,"name":"plus","prevSize":80,"code":59661},"setIdx":0,"setId":1,"iconIdx":236},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["plus-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":36,"id":156,"name":"plus-circle","prevSize":80,"code":59662},"setIdx":0,"setId":1,"iconIdx":237},{"icon":{"paths":["M967.085 568.886h-910.171c-31.417 0-56.886-25.469-56.886-56.886s25.469-56.886 56.886-56.886v0h910.171c31.417 0 56.886 25.469 56.886 56.886s-25.469 56.886-56.886 56.886v0z"],"attrs":[{}],"tags":["minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":41,"id":157,"name":"minus","prevSize":80,"code":59663},"setIdx":0,"setId":1,"iconIdx":238},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["minus-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":42,"id":158,"name":"minus-circle","prevSize":80,"code":59664},"setIdx":0,"setId":1,"iconIdx":239},{"icon":{"paths":["M1024 512c0 282.769-229.231 512-512 512s-512-229.231-512-512c0-282.769 229.231-512 512-512s512 229.231 512 512z"],"attrs":[{}],"tags":["circle-on","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":47,"id":159,"name":"circle-on","prevSize":80,"code":59665},"setIdx":0,"setId":1,"iconIdx":240},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{}],"tags":["circle-off","deprecate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":48,"id":160,"name":"circle-off","prevSize":80,"code":59666},"setIdx":0,"setId":1,"iconIdx":241},{"icon":{"paths":["M512 761.297c-0.059 0-0.133 0-0.206 0-12.080 0-23.010-4.935-30.879-12.901l-410.613-410.613c-7.95-7.958-12.867-18.951-12.867-31.089 0-24.283 19.676-43.971 43.952-43.993h821.216c23.565 0.924 42.321 20.252 42.321 43.961 0 11.301-4.262 21.608-11.268 29.401l0.035-0.040-410.607 410.607c-7.678 8.671-18.694 14.235-31.015 14.662l-0.074 0.003zM207.563 350.691l304.437 304.437 304.437-304.437z"],"attrs":[{}],"tags":["sort-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":51,"id":161,"name":"sort-down","prevSize":80,"code":59667},"setIdx":0,"setId":1,"iconIdx":242},{"icon":{"paths":["M921.888 760.859h-819.773c-0.088 0-0.19 0.002-0.294 0.002-18.019 0-33.47-11-40.004-26.651l-0.105-0.287c-1.856-4.68-2.932-10.103-2.932-15.777 0-11.845 4.689-22.595 12.313-30.495l409.875-409.875c7.945-7.935 18.917-12.844 31.034-12.844s23.089 4.908 31.035 12.844v0l409.888 409.888c7.91 7.94 12.801 18.896 12.801 30.993 0 6.145-1.262 11.997-3.542 17.308l0.108-0.285c-7.032 14.993-22.001 25.192-39.352 25.192-0.369 0-0.739-0.004-1.106-0.013l0.055 0.002zM208.099 673.027h607.804l-303.901-303.901z"],"attrs":[{}],"tags":["sort-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":52,"id":162,"name":"sort-up","prevSize":80,"code":59668},"setIdx":0,"setId":1,"iconIdx":243},{"icon":{"paths":["M841.149 443.428h-658.298c-0.083 0-0.179 0.001-0.275 0.001-16.883 0-31.357-10.305-37.478-24.968l-0.099-0.269c-2.034-4.708-3.217-10.189-3.217-15.949 0-11.333 4.583-21.597 11.994-29.037l329.147-329.147c7.443-7.433 17.723-12.033 29.075-12.033s21.632 4.598 29.076 12.033v0l329.149 329.149c7.411 7.439 11.993 17.704 11.993 29.036 0 5.757-1.183 11.24-3.319 16.216l0.101-0.267c-6.22 14.932-20.695 25.236-37.577 25.236-0.097 0-0.193 0-0.29-0.001h0.015zM282.145 361.141h459.712l-229.855-229.855z","M512 992.009c-0.056 0-0.125 0-0.191 0-11.299 0-21.519-4.615-28.879-12.065l-329.153-329.153c-7.411-7.439-11.993-17.704-11.993-29.036 0-5.757 1.183-11.24 3.319-16.216l-0.101 0.267c6.22-14.932 20.695-25.236 37.577-25.236 0.097 0 0.193 0 0.29 0.001h658.283c0.083 0 0.179-0.001 0.275-0.001 16.883 0 31.357 10.305 37.478 24.968l0.099 0.269c2.034 4.708 3.217 10.189 3.217 15.949 0 11.333-4.583 21.597-11.994 29.037l-329.147 329.147c-7.363 7.453-17.584 12.068-28.883 12.068-0.067 0-0.135 0-0.202 0h0.010zM282.145 662.859l229.855 229.855 229.855-229.855z"],"attrs":[{},{}],"tags":["sort"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":54,"id":163,"name":"sort","prevSize":80,"code":59669},"setIdx":0,"setId":1,"iconIdx":244},{"icon":{"paths":["M776.253 1023.989c-13.652-0.164-25.983-5.679-35.022-14.542l-462.434-462.434c-8.953-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l462.442-462.442c8.959-8.925 21.319-14.443 34.966-14.443 6.933 0 13.536 1.424 19.529 3.996l-0.322-0.122c17.981 7.491 30.389 24.922 30.389 45.252 0 0.116 0 0.233-0.002 0.348v-0.019 924.882c0 0.099 0.002 0.215 0.002 0.331 0 20.33-12.41 37.761-30.067 45.132l-0.324 0.119c-5.648 2.471-12.229 3.927-19.143 3.964h-0.014zM383.839 512l342.867 342.867v-685.734z","M247.747 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.511 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-backward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":29,"id":164,"name":"step-backward","prevSize":80,"code":59670},"setIdx":0,"setId":1,"iconIdx":245},{"icon":{"paths":["M247.747 1023.989c-6.929-0.037-13.509-1.493-19.478-4.087l0.321 0.124c-17.981-7.491-30.389-24.922-30.389-45.252 0-0.116 0-0.231 0.002-0.348v0.019-924.882c0-0.099-0.002-0.215-0.002-0.331 0-20.33 12.41-37.761 30.067-45.132l0.324-0.119c5.67-2.449 12.271-3.874 19.206-3.874 13.649 0 26.007 5.518 34.967 14.444l462.441 462.441c8.953 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-462.442 462.442c-9.030 8.855-21.362 14.37-34.982 14.533h-0.031zM297.295 169.133v685.734l342.867-342.867z","M776.253 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.513 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":30,"id":165,"name":"step-forward","prevSize":80,"code":59671},"setIdx":0,"setId":1,"iconIdx":246},{"icon":{"paths":["M325.818 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M325.818 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["th-large"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":34,"id":166,"name":"th-large","prevSize":80,"code":59672},"setIdx":0,"setId":1,"iconIdx":247},{"icon":{"paths":["M512 1023.983c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 361.361 361.361 361.361-361.361c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":37,"id":167,"name":"arrow-down","prevSize":80,"code":59673},"setIdx":0,"setId":1,"iconIdx":248},{"icon":{"paths":["M445.937 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l396.374-396.374c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-361.361 361.361 361.361 361.361c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":40,"id":168,"name":"arrow-left","prevSize":80,"code":59674},"setIdx":0,"setId":1,"iconIdx":249},{"icon":{"paths":["M578.063 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-0.005-0.005c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l361.361-361.361-361.361-361.361c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":43,"id":169,"name":"arrow-right","prevSize":80,"code":59675},"setIdx":0,"setId":1,"iconIdx":250},{"icon":{"paths":["M908.374 495.484c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-361.366-361.366-361.361 361.361c-8.824 8.239-20.711 13.297-33.777 13.297-27.364 0-49.547-22.183-49.547-49.547 0-13.068 5.058-24.953 13.325-33.806l-0.026 0.029 396.374-396.374c8.963-8.952 21.342-14.491 35.013-14.491s26.049 5.537 35.014 14.491v0l396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":216,"id":170,"name":"arrow-up","prevSize":80,"code":59676},"setIdx":0,"setId":1,"iconIdx":251},{"icon":{"paths":["M974.438 561.547h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 264.265h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 858.829h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{},{}],"tags":["bars"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":215,"id":171,"name":"bars","prevSize":80,"code":59677},"setIdx":0,"setId":1,"iconIdx":252},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":50,"id":172,"name":"arrow-circle-down","prevSize":80,"code":59678},"setIdx":0,"setId":1,"iconIdx":253},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":53,"id":173,"name":"arrow-circle-left","prevSize":80,"code":59679},"setIdx":0,"setId":1,"iconIdx":254},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":55,"id":174,"name":"arrow-circle-right","prevSize":80,"code":59680},"setIdx":0,"setId":1,"iconIdx":255},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":31,"id":175,"name":"arrow-circle-up","prevSize":80,"code":59681},"setIdx":0,"setId":1,"iconIdx":256},{"icon":{"paths":["M512 1023.999c-36.682-0.495-66.288-30.1-66.783-66.735v-623.353c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 623.305c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z","M512 178.087c-36.682-0.495-66.288-30.1-66.783-66.735v-44.569c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 44.521c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z"],"attrs":[{},{}],"tags":["info"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":33,"id":176,"name":"info","prevSize":80,"code":59683},"setIdx":0,"setId":1,"iconIdx":257},{"icon":{"paths":["M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 284.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 355.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{},{}],"tags":["info-circle"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":38,"id":177,"name":"info-circle","prevSize":80,"code":59684},"setIdx":0,"setId":1,"iconIdx":258},{"icon":{"paths":["M980.714 497.352c-0.058 0-0.126 0-0.195 0-9.879 0-18.984-3.304-26.275-8.867l0.106 0.077-442.349-331.615-442.349 331.615c-7.252 5.487-16.423 8.788-26.365 8.788-24.268 0-43.942-19.674-43.942-43.942 0-14.326 6.856-27.052 17.467-35.074l0.11-0.080 468.714-351.536c7.252-5.487 16.423-8.788 26.365-8.788s19.113 3.301 26.475 8.868l-0.11-0.080 468.714 351.536c9.942 8.121 16.239 20.379 16.239 34.109 0 9.129-2.783 17.608-7.548 24.634l0.099-0.154c-7.474 11.934-20.322 19.902-35.068 20.503l-0.085 0.003z","M863.536 966.067h-703.071c-24.136-0.325-43.617-19.805-43.942-43.91v-556.629c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 512.656h615.187v-512.656c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 556.598c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z","M629.178 966.067c-24.136-0.325-43.617-19.805-43.942-43.91v-366.215h-146.474v366.183c0 24.268-19.674 43.942-43.942 43.942s-43.942-19.674-43.942-43.942v0-410.125c0.325-24.136 19.805-43.617 43.91-43.942h234.389c24.136 0.325 43.617 19.805 43.942 43.91v410.157c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z"],"attrs":[{},{},{}],"tags":["home"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":214,"id":178,"name":"home","prevSize":80,"code":59685},"setIdx":0,"setId":1,"iconIdx":259},{"icon":{"paths":["M512 1023.985c-282.573-0.249-511.548-229.377-511.548-511.985 0-282.761 229.224-511.985 511.985-511.985 136.039 0 259.684 53.057 351.374 139.607l-0.248-0.232c7.709 7.718 12.478 18.378 12.478 30.15s-4.768 22.431-12.478 30.151v0c-7.654 7.849-18.334 12.718-30.15 12.718s-22.495-4.869-30.142-12.709l-0.008-0.009c-76.159-71.371-178.876-115.207-291.832-115.207-235.949 0-427.224 191.274-427.224 427.224s191.274 427.224 427.224 427.224c235.845 0 427.056-191.106 427.224-426.913v-0.016c0-23.563 19.102-42.665 42.665-42.665s42.665 19.102 42.665 42.665v0c0 282.761-229.224 511.985-511.985 511.985v0z"],"attrs":[{}],"tags":["spinner"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":44,"id":179,"name":"spinner","prevSize":80,"code":59686},"setIdx":0,"setId":1,"iconIdx":260}],"height":1024,"metadata":{"name":"primeicons","url":"https://github.com/primefaces/primeicons","designer":"","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"pi-","metadata":{"fontFamily":"primeicons","majorVersion":1,"minorVersion":0,"copyright":"PrimeTek Informatics","designer":"","description":"Icon Library for Prime UI Libraries","fontURL":"https://github.com/primefaces/primeicons","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true,"showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true,"includeMetadata":true},"imagePref":{"prefix":"pi-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","height":32,"columns":16,"margin":16,"name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"PrimeIcons":"NTQ3YTNmNDcyNzcwZTk0M2UzYzcxODljOTAyZTYyODEjMSMxNjYyOTc4NjMyIyMjNTU3N2Y2ZGJiZTc3"},"showGrid":true}}
\ No newline at end of file
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
index a872edbaf..89ffa81fb 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/labs/tailwind.config.js
@@ -1,10 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 import PrimeUI from 'tailwindcss-primeui';
+import plugin from 'tailwindcss/plugin';
 
 export default {
     darkMode: ['selector', '[class~="p-dark"]'],
-    content: ['./components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
-    plugins: [PrimeUI],
+    content: ['./components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './plex/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
+    plugins: [PrimeUI, 
+        plugin(function({ addVariant }) {
+            addVariant('p-invalid', '&[data-p~="invalid"]')
+            addVariant('p-small', '&[data-p~="small"]')
+            addVariant('p-large', '&[data-p~="large"]')
+            addVariant('p-fluid', '&[data-p~="fluid"]')
+        })
+    ],
     theme: {
         screens: {
             sm: '576px',
diff --git a/packages/primevue/src/inputtext/InputText.vue b/packages/primevue/src/inputtext/InputText.vue
index ae79a309e..8b9cc14f6 100755
--- a/packages/primevue/src/inputtext/InputText.vue
+++ b/packages/primevue/src/inputtext/InputText.vue
@@ -1,5 +1,5 @@
 <template>
-    <input type="text" :class="cx('root')" :value="d_value" :name="name" :disabled="disabled" :aria-invalid="$invalid || undefined" @input="onInput" v-bind="attrs" />
+    <input type="text" :class="cx('root')" :value="d_value" :name="name" :disabled="disabled" :aria-invalid="$invalid || undefined" :data-p="dataP" @input="onInput" v-bind="attrs" />
 </template>
 
 <script>
@@ -26,6 +26,20 @@ export default {
                 }),
                 this.formField
             );
+        },
+        dataP() {
+            const p = [];
+            if (this.$invalid) {
+                p.push('invalid')
+            }
+            if (this.size) {
+                p.push(this.size)
+            }
+            if (this.$fluid) {
+                p.push('fluid')
+            }
+
+            return p.join(' ');
         }
     }
 };

From 94fe4e59a70a43ef2f29e0f08b6923fad1f28e03 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 15:43:07 +0300
Subject: [PATCH 22/77] Add filled variant support

---
 apps/labs/doc/inputtext/FilledDoc.vue         | 31 +++++++++++++++++++
 apps/labs/pages/inputtext/index.vue           |  8 ++++-
 apps/labs/plex/inputtext/index.vue            |  1 +
 apps/labs/tailwind.config.js                  |  1 +
 packages/primevue/src/inputtext/InputText.vue |  9 ++++--
 5 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 apps/labs/doc/inputtext/FilledDoc.vue

diff --git a/apps/labs/doc/inputtext/FilledDoc.vue b/apps/labs/doc/inputtext/FilledDoc.vue
new file mode 100644
index 000000000..d87e09429
--- /dev/null
+++ b/apps/labs/doc/inputtext/FilledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/inputtext/index.vue b/apps/labs/pages/inputtext/index.vue
index c2019f7c2..865f49824 100644
--- a/apps/labs/pages/inputtext/index.vue
+++ b/apps/labs/pages/inputtext/index.vue
@@ -6,6 +6,7 @@
 import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
 /*import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';*/
+import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
 import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
 import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
@@ -22,11 +23,16 @@ const docs = ref([
         label: 'Basic',
         component: BasicDoc
     },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
     {
         id: 'sizes',
         label: 'Sizes',
         component: SizesDoc
-    }/*,
+    } /*,
     {
         id: 'helptext',
         label: 'Help Text',
diff --git a/apps/labs/plex/inputtext/index.vue b/apps/labs/plex/inputtext/index.vue
index 3e3fd4968..b6d7181ca 100644
--- a/apps/labs/plex/inputtext/index.vue
+++ b/apps/labs/plex/inputtext/index.vue
@@ -9,6 +9,7 @@ import { ref } from 'vue';
 const theme = ref({
     root: `appearance-none rounded-md outline-none
         bg-surface-0 dark:bg-surface-950
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
         placeholder:text-surface-500 dark:placeholder:text-surface-400
         border border-surface-300 dark:border-surface-700 
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
index 89ffa81fb..8197f1998 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/labs/tailwind.config.js
@@ -11,6 +11,7 @@ export default {
             addVariant('p-small', '&[data-p~="small"]')
             addVariant('p-large', '&[data-p~="large"]')
             addVariant('p-fluid', '&[data-p~="fluid"]')
+            addVariant('p-filled', '&[data-p~="filled"]')
         })
     ],
     theme: {
diff --git a/packages/primevue/src/inputtext/InputText.vue b/packages/primevue/src/inputtext/InputText.vue
index 8b9cc14f6..94947853f 100755
--- a/packages/primevue/src/inputtext/InputText.vue
+++ b/packages/primevue/src/inputtext/InputText.vue
@@ -30,13 +30,16 @@ export default {
         dataP() {
             const p = [];
             if (this.$invalid) {
-                p.push('invalid')
+                p.push('invalid');
             }
             if (this.size) {
-                p.push(this.size)
+                p.push(this.size);
             }
             if (this.$fluid) {
-                p.push('fluid')
+                p.push('fluid');
+            }
+            if (this.$variant === 'filled') {
+                p.push('filled');
             }
 
             return p.join(' ');

From 443fd41198ad8785a169c98a1c80a3eccb982bd2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 16:43:27 +0300
Subject: [PATCH 23/77] Use cn for data-p

---
 apps/labs/doc/inputtext/SizesDoc.vue          |  2 +-
 apps/labs/nuxt.config.js                      |  7 +-----
 apps/labs/plex/inputtext/index.vue            |  2 +-
 packages/primevue/src/inputtext/InputText.vue | 22 ++++++-------------
 4 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/apps/labs/doc/inputtext/SizesDoc.vue b/apps/labs/doc/inputtext/SizesDoc.vue
index 0995afe07..49def6632 100644
--- a/apps/labs/doc/inputtext/SizesDoc.vue
+++ b/apps/labs/doc/inputtext/SizesDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
+        <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
         <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
diff --git a/apps/labs/nuxt.config.js b/apps/labs/nuxt.config.js
index 55650365e..f2662526b 100644
--- a/apps/labs/nuxt.config.js
+++ b/apps/labs/nuxt.config.js
@@ -34,15 +34,10 @@ export default defineNuxtConfig({
     runtimeConfig: {
         GITHUB_TOKEN: ''
     },
-    primevue: {
-        options: {
-            theme: 'none'
-        }
-    },
     app: {
         baseURL: baseUrl,
         head: {
-            title: 'Tailwind CSS based Vue UI Component Library',
+            title: 'Plex UI Component Library for Vue.js',
             meta: [
                 { charset: 'utf-8' },
                 { name: 'viewport', content: 'width=device-width, initial-scale=1' },
diff --git a/apps/labs/plex/inputtext/index.vue b/apps/labs/plex/inputtext/index.vue
index b6d7181ca..86f3b398c 100644
--- a/apps/labs/plex/inputtext/index.vue
+++ b/apps/labs/plex/inputtext/index.vue
@@ -22,6 +22,6 @@ const theme = ref({
         px-3 py-2 p-fluid:w-full
         p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
         p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
-        transition-colors duration-200`
+        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]`
 });
 </script>
diff --git a/packages/primevue/src/inputtext/InputText.vue b/packages/primevue/src/inputtext/InputText.vue
index 94947853f..57d82b25a 100755
--- a/packages/primevue/src/inputtext/InputText.vue
+++ b/packages/primevue/src/inputtext/InputText.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils/classnames';
 import { mergeProps } from 'vue';
 import BaseInputText from './BaseInputText.vue';
 
@@ -28,21 +29,12 @@ export default {
             );
         },
         dataP() {
-            const p = [];
-            if (this.$invalid) {
-                p.push('invalid');
-            }
-            if (this.size) {
-                p.push(this.size);
-            }
-            if (this.$fluid) {
-                p.push('fluid');
-            }
-            if (this.$variant === 'filled') {
-                p.push('filled');
-            }
-
-            return p.join(' ');
+            return cn({
+                invalid: this.$invalid,
+                fluid: this.$fluid,
+                filled: this.$variant === 'filled',
+                [this.size]: this.size
+            });
         }
     }
 };

From b1466fd7cdad3fac145e4a8c60d0bc41d398dde2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 17:01:54 +0300
Subject: [PATCH 24/77] Implemented PlexTextarea

---
 apps/labs/assets/data/menu.json             |  4 ++
 apps/labs/doc/inputtext/ImportDoc.vue       |  2 +-
 apps/labs/doc/textarea/AutoResizeDoc.vue    | 31 ++++++++++++
 apps/labs/doc/textarea/BasicDoc.vue         | 31 ++++++++++++
 apps/labs/doc/textarea/DisabledDoc.vue      | 31 ++++++++++++
 apps/labs/doc/textarea/FilledDoc.vue        | 31 ++++++++++++
 apps/labs/doc/textarea/HelpTextDoc.vue      | 31 ++++++++++++
 apps/labs/doc/textarea/ImportDoc.vue        | 16 +++++++
 apps/labs/doc/textarea/InvalidDoc.vue       | 31 ++++++++++++
 apps/labs/doc/textarea/SizesDoc.vue         | 39 ++++++++++++++++
 apps/labs/pages/textarea/index.vue          | 52 +++++++++++++++++++++
 apps/labs/plex/textarea/index.vue           | 27 +++++++++++
 apps/showcase/pages/textarea/index.vue      |  4 +-
 packages/primevue/src/textarea/Textarea.vue | 11 ++++-
 14 files changed, 337 insertions(+), 4 deletions(-)
 create mode 100644 apps/labs/doc/textarea/AutoResizeDoc.vue
 create mode 100644 apps/labs/doc/textarea/BasicDoc.vue
 create mode 100644 apps/labs/doc/textarea/DisabledDoc.vue
 create mode 100644 apps/labs/doc/textarea/FilledDoc.vue
 create mode 100644 apps/labs/doc/textarea/HelpTextDoc.vue
 create mode 100644 apps/labs/doc/textarea/ImportDoc.vue
 create mode 100644 apps/labs/doc/textarea/InvalidDoc.vue
 create mode 100644 apps/labs/doc/textarea/SizesDoc.vue
 create mode 100644 apps/labs/pages/textarea/index.vue
 create mode 100644 apps/labs/plex/textarea/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 0a6588dfa..2b28514fb 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -25,6 +25,10 @@
                 {
                     "name": "InputText",
                     "to": "/inputtext"
+                },
+                {
+                    "name": "Textarea",
+                    "to": "/textarea"
                 }
             ]
         },
diff --git a/apps/labs/doc/inputtext/ImportDoc.vue b/apps/labs/doc/inputtext/ImportDoc.vue
index 435eb2576..a44b8a5ce 100644
--- a/apps/labs/doc/inputtext/ImportDoc.vue
+++ b/apps/labs/doc/inputtext/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import InputText from '@/plex/inputtext';
+import PlexInputText from '@/plex/inputtext';
 `
         };
     }
diff --git a/apps/labs/doc/textarea/AutoResizeDoc.vue b/apps/labs/doc/textarea/AutoResizeDoc.vue
new file mode 100644
index 000000000..5fb9a7bfc
--- /dev/null
+++ b/apps/labs/doc/textarea/AutoResizeDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/BasicDoc.vue b/apps/labs/doc/textarea/BasicDoc.vue
new file mode 100644
index 000000000..fc3cbaaf3
--- /dev/null
+++ b/apps/labs/doc/textarea/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/DisabledDoc.vue b/apps/labs/doc/textarea/DisabledDoc.vue
new file mode 100644
index 000000000..aef513d9c
--- /dev/null
+++ b/apps/labs/doc/textarea/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+     <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/FilledDoc.vue b/apps/labs/doc/textarea/FilledDoc.vue
new file mode 100644
index 000000000..2c57e549b
--- /dev/null
+++ b/apps/labs/doc/textarea/FilledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/HelpTextDoc.vue b/apps/labs/doc/textarea/HelpTextDoc.vue
new file mode 100644
index 000000000..dd00e6884
--- /dev/null
+++ b/apps/labs/doc/textarea/HelpTextDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" type="text" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" type="text" />
+    </div>
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/ImportDoc.vue b/apps/labs/doc/textarea/ImportDoc.vue
new file mode 100644
index 000000000..c6dfc67e2
--- /dev/null
+++ b/apps/labs/doc/textarea/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import PlexTextarea from '@/plex/textarea';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/textarea/InvalidDoc.vue b/apps/labs/doc/textarea/InvalidDoc.vue
new file mode 100644
index 000000000..d815ad4e2
--- /dev/null
+++ b/apps/labs/doc/textarea/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref('');
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/textarea/SizesDoc.vue b/apps/labs/doc/textarea/SizesDoc.vue
new file mode 100644
index 000000000..b2b52b2f5
--- /dev/null
+++ b/apps/labs/doc/textarea/SizesDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
+        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
+<template>
+<div class="card flex flex-col items-center gap-4">
+        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
+        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+</template>
+
+<script setup>
+import PlexTextarea from '@/plex/textarea';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/textarea/index.vue b/apps/labs/pages/textarea/index.vue
new file mode 100644
index 000000000..4fea8233a
--- /dev/null
+++ b/apps/labs/pages/textarea/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <DocComponent title="Vue Textarea Component" header="InputText" description="Textarea adds styling and auto-resize functionality to standard textarea element." :componentDocs="docs" />
+</template>
+
+<script setup>
+import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc.vue';
+import BasicDoc from '@/doc/textarea/BasicDoc.vue';
+import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
+import FilledDoc from '@/doc/textarea/FilledDoc.vue';
+import ImportDoc from '@/doc/textarea/ImportDoc.vue';
+import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
+import SizesDoc from '@/doc/textarea/SizesDoc.vue';
+import { ref } from 'vue';
+
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'auto-resize',
+        label: 'Auto Resize',
+        component: AutoResizeDoc
+    },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
+    }
+]);
+</script>
diff --git a/apps/labs/plex/textarea/index.vue b/apps/labs/plex/textarea/index.vue
new file mode 100644
index 000000000..9e1dd4d5a
--- /dev/null
+++ b/apps/labs/plex/textarea/index.vue
@@ -0,0 +1,27 @@
+<template>
+    <Textarea unstyled :pt="theme" />
+</template>
+
+<script setup>
+import Textarea from 'primevue/textarea';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `appearance-none rounded-md outline-none
+        bg-surface-0 dark:bg-surface-950
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
+        text-surface-700 dark:text-surface-0
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        disabled:bg-surface-200 disabled:text-surface-500 
+        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
+        px-3 py-2 p-fluid:w-full
+        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
+        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
+        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]`
+});
+</script>
diff --git a/apps/showcase/pages/textarea/index.vue b/apps/showcase/pages/textarea/index.vue
index da1de3872..fa6785c46 100755
--- a/apps/showcase/pages/textarea/index.vue
+++ b/apps/showcase/pages/textarea/index.vue
@@ -2,7 +2,7 @@
     <DocComponent
         title="Vue Textarea Component"
         header="Textarea"
-        description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element."
+        description="Textarea adds styling and autoResize functionality to standard textarea element."
         :componentDocs="docs"
         :apiDocs="['Textarea']"
         :ptTabComponent="ptComponent"
@@ -20,9 +20,9 @@ import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/textarea/FormsDoc.vue';
 import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/textarea/ImportDoc.vue';
-import SizesDoc from '@/doc/textarea/SizesDoc.vue';
 import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
 import PTComponent from '@/doc/textarea/pt/index.vue';
+import SizesDoc from '@/doc/textarea/SizesDoc.vue';
 import ThemingDoc from '@/doc/textarea/theming/index.vue';
 
 export default {
diff --git a/packages/primevue/src/textarea/Textarea.vue b/packages/primevue/src/textarea/Textarea.vue
index 7c22d1865..3a6d827d0 100755
--- a/packages/primevue/src/textarea/Textarea.vue
+++ b/packages/primevue/src/textarea/Textarea.vue
@@ -1,8 +1,9 @@
 <template>
-    <textarea :class="cx('root')" :value="d_value" :name="name" :disabled="disabled" :aria-invalid="invalid || undefined" @input="onInput" v-bind="attrs"></textarea>
+    <textarea :class="cx('root')" :value="d_value" :name="name" :disabled="disabled" :aria-invalid="invalid || undefined" :data-p="dataP" @input="onInput" v-bind="attrs"></textarea>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils/classnames';
 import { mergeProps } from 'vue';
 import BaseTextarea from './BaseTextarea.vue';
 
@@ -65,6 +66,14 @@ export default {
                 }),
                 this.formField
             );
+        },
+        dataP() {
+            return cn({
+                invalid: this.$invalid,
+                fluid: this.$fluid,
+                filled: this.$variant === 'filled',
+                [this.size]: this.size
+            });
         }
     }
 };

From fb5fa733fc4299f85760c75e4b2b60a3a5822038 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 17:43:15 +0300
Subject: [PATCH 25/77] Implemented Slider

---
 apps/labs/assets/data/menu.json         |  4 ++
 apps/labs/doc/slider/BasicDoc.vue       | 31 +++++++++++++++
 apps/labs/doc/slider/FilterDoc.vue      | 31 +++++++++++++++
 apps/labs/doc/slider/ImportDoc.vue      | 16 ++++++++
 apps/labs/doc/slider/InputDoc.vue       | 37 ++++++++++++++++++
 apps/labs/doc/slider/RangeDoc.vue       | 31 +++++++++++++++
 apps/labs/doc/slider/StepDoc.vue        | 31 +++++++++++++++
 apps/labs/doc/slider/VerticalDoc.vue    | 31 +++++++++++++++
 apps/labs/pages/slider/index.vue        | 52 +++++++++++++++++++++++++
 apps/labs/pages/textarea/index.vue      |  2 +-
 apps/labs/plex/slider/index.vue         | 31 +++++++++++++++
 apps/labs/tailwind.config.js            | 17 ++++----
 packages/primevue/src/slider/Slider.vue | 13 ++++++-
 13 files changed, 317 insertions(+), 10 deletions(-)
 create mode 100644 apps/labs/doc/slider/BasicDoc.vue
 create mode 100644 apps/labs/doc/slider/FilterDoc.vue
 create mode 100644 apps/labs/doc/slider/ImportDoc.vue
 create mode 100644 apps/labs/doc/slider/InputDoc.vue
 create mode 100644 apps/labs/doc/slider/RangeDoc.vue
 create mode 100644 apps/labs/doc/slider/StepDoc.vue
 create mode 100644 apps/labs/doc/slider/VerticalDoc.vue
 create mode 100644 apps/labs/pages/slider/index.vue
 create mode 100644 apps/labs/plex/slider/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 2b28514fb..4aeb21a31 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -26,6 +26,10 @@
                     "name": "InputText",
                     "to": "/inputtext"
                 },
+                {
+                    "name": "Slider",
+                    "to": "/slider"
+                },
                 {
                     "name": "Textarea",
                     "to": "/textarea"
diff --git a/apps/labs/doc/slider/BasicDoc.vue b/apps/labs/doc/slider/BasicDoc.vue
new file mode 100644
index 000000000..b683f3fef
--- /dev/null
+++ b/apps/labs/doc/slider/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Slider is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" class="w-56" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" class="w-56" />
+    </div>
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/slider/FilterDoc.vue b/apps/labs/doc/slider/FilterDoc.vue
new file mode 100644
index 000000000..3ec51d6a8
--- /dev/null
+++ b/apps/labs/doc/slider/FilterDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Image filter implementation using multiple sliders.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" class="w-56" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" class="w-56" />
+    </div>
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/slider/ImportDoc.vue b/apps/labs/doc/slider/ImportDoc.vue
new file mode 100644
index 000000000..3f28ba385
--- /dev/null
+++ b/apps/labs/doc/slider/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import PlexSlider from '@/plex/slider';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/slider/InputDoc.vue b/apps/labs/doc/slider/InputDoc.vue
new file mode 100644
index 000000000..ef0fa1fc7
--- /dev/null
+++ b/apps/labs/doc/slider/InputDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Slider is connected to an input field using two-way binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="w-56">
+            <PlexInputText v-model.number="value" class="w-full mb-4" />
+            <PlexSlider v-model="value" class="w-full" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(50);
+
+const code = ref(`
+<div class="card flex justify-center">
+    <div class="w-56">
+        <PlexInputText v-model.number="value" class="w-full mb-4" />
+        <PlexSlider v-model="value" class="w-full" />
+    </div>
+</div>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/slider/RangeDoc.vue b/apps/labs/doc/slider/RangeDoc.vue
new file mode 100644
index 000000000..fd1d9d7f7
--- /dev/null
+++ b/apps/labs/doc/slider/RangeDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" range class="w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref([20, 80]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" range class="w-56" />
+    </div>
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref([20, 80]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/slider/StepDoc.vue b/apps/labs/doc/slider/StepDoc.vue
new file mode 100644
index 000000000..8234a958a
--- /dev/null
+++ b/apps/labs/doc/slider/StepDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Size of each movement is defined with the <i>step</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" :step="20" class="w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(20);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" :step="20" class="w-56" />
+    </div>
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(20);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/slider/VerticalDoc.vue b/apps/labs/doc/slider/VerticalDoc.vue
new file mode 100644
index 000000000..8e2fb086a
--- /dev/null
+++ b/apps/labs/doc/slider/VerticalDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Default layout of slider is <i>horizontal</i>, use <i>orientation</i> property for the alternative <i>vertical</i> mode.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" orientation="vertical" class="h-56" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(50);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexSlider v-model="value" orientation="vertical" class="h-56" />
+    </div>
+</template>
+
+<script setup>
+import PlexSlider from '@/plex/slider';
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/slider/index.vue b/apps/labs/pages/slider/index.vue
new file mode 100644
index 000000000..1eadd80bc
--- /dev/null
+++ b/apps/labs/pages/slider/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" />
+</template>
+
+<script setup>
+import BasicDoc from '@/doc/slider/BasicDoc.vue';
+/*import FilterDoc from '@/doc/slider/FilterDoc.vue';*/
+import ImportDoc from '@/doc/slider/ImportDoc.vue';
+import InputDoc from '@/doc/slider/InputDoc.vue';
+import RangeDoc from '@/doc/slider/RangeDoc.vue';
+import StepDoc from '@/doc/slider/StepDoc.vue';
+import VerticalDoc from '@/doc/slider/VerticalDoc.vue';
+import { ref } from 'vue';
+
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'input',
+        label: 'Input',
+        component: InputDoc
+    },
+    {
+        id: 'step',
+        label: 'Step',
+        component: StepDoc
+    },
+    {
+        id: 'range',
+        label: 'Range',
+        component: RangeDoc
+    },
+    /*{
+        id: 'filter',
+        label: 'Filter',
+        component: FilterDoc
+    },*/
+    {
+        id: 'vertical',
+        label: 'Vertical',
+        component: VerticalDoc
+    }
+]);
+</script>
diff --git a/apps/labs/pages/textarea/index.vue b/apps/labs/pages/textarea/index.vue
index 4fea8233a..4271e6959 100644
--- a/apps/labs/pages/textarea/index.vue
+++ b/apps/labs/pages/textarea/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Textarea Component" header="InputText" description="Textarea adds styling and auto-resize functionality to standard textarea element." :componentDocs="docs" />
+    <DocComponent title="Vue Textarea Component" header="Textarea" description="Textarea adds styling and auto-resize functionality to standard textarea element." :componentDocs="docs" />
 </template>
 
 <script setup>
diff --git a/apps/labs/plex/slider/index.vue b/apps/labs/plex/slider/index.vue
new file mode 100644
index 000000000..612d9a65f
--- /dev/null
+++ b/apps/labs/plex/slider/index.vue
@@ -0,0 +1,31 @@
+<template>
+    <Slider unstyled :pt="theme" />
+</template>
+
+<script setup>
+import Slider from 'primevue/slider';
+import { ref } from 'vue';
+
+const handleCommon = `cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px]
+        bg-surface-200 dark:bg-surface-700 rounded-full
+        transition-colors duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        before:w-[16px] before:h-[16px] before:block before:rounded-full
+        before:bg-surface-0 dark:before:bg-surface-950
+        before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)]
+        before:transition-colors before:duration-200
+        p-horizontal:top-1/2 p-horizontal:-mt-[10px] p-horizontal:-ms-[10px]
+        p-vertical:start-1/2 p-vertical:-mb-[10px] p-vertical:-ms-[10px]`;
+
+const theme = ref({
+    root: `relative bg-surface-200 dark:bg-surface-700 rounded-sm
+            p-horizontal:h-[3px] 
+            p-vertical:min-h-[100px] p-vertical:w-[3px]`,
+    range: `block bg-primary rounded-sm
+            p-horizontal:top-0 p-horizontal:start-0 p-horizontal:h-full
+            p-vertical:bottom-0 p-vertical:start-0 p-vertical:w-full`,
+    handle: handleCommon,
+    startHandler: handleCommon,
+    endHandler: handleCommon
+});
+</script>
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
index 8197f1998..186877d26 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/labs/tailwind.config.js
@@ -5,13 +5,16 @@ import plugin from 'tailwindcss/plugin';
 export default {
     darkMode: ['selector', '[class~="p-dark"]'],
     content: ['./components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './plex/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
-    plugins: [PrimeUI, 
-        plugin(function({ addVariant }) {
-            addVariant('p-invalid', '&[data-p~="invalid"]')
-            addVariant('p-small', '&[data-p~="small"]')
-            addVariant('p-large', '&[data-p~="large"]')
-            addVariant('p-fluid', '&[data-p~="fluid"]')
-            addVariant('p-filled', '&[data-p~="filled"]')
+    plugins: [
+        PrimeUI,
+        plugin(function ({ addVariant }) {
+            addVariant('p-invalid', '&[data-p~="invalid"]');
+            addVariant('p-small', '&[data-p~="small"]');
+            addVariant('p-large', '&[data-p~="large"]');
+            addVariant('p-fluid', '&[data-p~="fluid"]');
+            addVariant('p-filled', '&[data-p~="filled"]');
+            addVariant('p-horizontal', '&[data-p~="horizontal"]');
+            addVariant('p-vertical', '&[data-p~="vertical"]');
         })
     ],
     theme: {
diff --git a/packages/primevue/src/slider/Slider.vue b/packages/primevue/src/slider/Slider.vue
index 6f608b68d..2268a2af6 100755
--- a/packages/primevue/src/slider/Slider.vue
+++ b/packages/primevue/src/slider/Slider.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false">
-        <span :class="cx('range')" :style="[sx('range'), rangeStyle()]" v-bind="ptm('range')"></span>
+    <div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false" :data-p="dataP">
+        <span :class="cx('range')" :style="[sx('range'), rangeStyle()]" v-bind="ptm('range')" :data-p="dataP"></span>
         <span
             v-if="!range"
             :class="cx('handle')"
@@ -20,6 +20,7 @@
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
             v-bind="ptm('handle')"
+            :data-p="dataP"
         ></span>
         <span
             v-if="range"
@@ -40,6 +41,7 @@
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
             v-bind="ptm('startHandler')"
+            :data-p="dataP"
         ></span>
         <span
             v-if="range"
@@ -60,11 +62,13 @@
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
             v-bind="ptm('endHandler')"
+            :data-p="dataP"
         ></span>
     </div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils/classnames';
 import { getAttribute, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@primeuix/utils/dom';
 import BaseSlider from './BaseSlider.vue';
 
@@ -359,6 +363,11 @@ export default {
                 if (this.value[1] > this.max) return 100;
                 else return ((this.value[1] - this.min) * 100) / (this.max - this.min);
             } else return 100;
+        },
+        dataP() {
+            return cn({
+                [this.orientation]: this.orientation
+            });
         }
     }
 };

From 4907ed932e9eac0e9c48db8665d7a813b18af77f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 17:45:34 +0300
Subject: [PATCH 26/77] Cleanup unused props, fixed import

---
 apps/labs/doc/inputtext/BasicDoc.vue          | 2 +-
 apps/labs/doc/inputtext/DisabledDoc.vue       | 2 +-
 apps/labs/doc/inputtext/FilledDoc.vue         | 2 +-
 apps/labs/doc/inputtext/HelpTextDoc.vue       | 2 +-
 apps/labs/doc/inputtext/InvalidDoc.vue        | 2 +-
 apps/labs/doc/inputtext/SizesDoc.vue          | 2 +-
 apps/labs/doc/slider/BasicDoc.vue             | 2 +-
 apps/labs/doc/slider/FilterDoc.vue            | 2 +-
 apps/labs/doc/slider/VerticalDoc.vue          | 2 +-
 apps/labs/doc/textarea/AutoResizeDoc.vue      | 2 +-
 apps/labs/doc/textarea/BasicDoc.vue           | 2 +-
 apps/labs/doc/textarea/DisabledDoc.vue        | 2 +-
 apps/labs/doc/textarea/FilledDoc.vue          | 2 +-
 apps/labs/doc/textarea/HelpTextDoc.vue        | 2 +-
 apps/labs/doc/textarea/InvalidDoc.vue         | 2 +-
 apps/labs/doc/textarea/SizesDoc.vue           | 2 +-
 packages/primevue/src/inputtext/InputText.vue | 2 +-
 packages/primevue/src/slider/Slider.vue       | 2 +-
 packages/primevue/src/textarea/Textarea.vue   | 2 +-
 19 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/labs/doc/inputtext/BasicDoc.vue b/apps/labs/doc/inputtext/BasicDoc.vue
index 8afeb5d08..808d8d030 100644
--- a/apps/labs/doc/inputtext/BasicDoc.vue
+++ b/apps/labs/doc/inputtext/BasicDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexInputText v-model="value" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/inputtext/DisabledDoc.vue b/apps/labs/doc/inputtext/DisabledDoc.vue
index c52e9e31a..5f49abbd5 100644
--- a/apps/labs/doc/inputtext/DisabledDoc.vue
+++ b/apps/labs/doc/inputtext/DisabledDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexInputText v-model="value" disabled placeholder="Disabled" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/inputtext/FilledDoc.vue b/apps/labs/doc/inputtext/FilledDoc.vue
index d87e09429..45964821d 100644
--- a/apps/labs/doc/inputtext/FilledDoc.vue
+++ b/apps/labs/doc/inputtext/FilledDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexInputText v-model="value" variant="filled" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/inputtext/HelpTextDoc.vue b/apps/labs/doc/inputtext/HelpTextDoc.vue
index dd00e6884..1fbc2e94f 100644
--- a/apps/labs/doc/inputtext/HelpTextDoc.vue
+++ b/apps/labs/doc/inputtext/HelpTextDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexInputText v-model="value" type="text" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/inputtext/InvalidDoc.vue b/apps/labs/doc/inputtext/InvalidDoc.vue
index a2e5f07dd..0ca50704d 100644
--- a/apps/labs/doc/inputtext/InvalidDoc.vue
+++ b/apps/labs/doc/inputtext/InvalidDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/inputtext/SizesDoc.vue b/apps/labs/doc/inputtext/SizesDoc.vue
index 49def6632..bc1f099da 100644
--- a/apps/labs/doc/inputtext/SizesDoc.vue
+++ b/apps/labs/doc/inputtext/SizesDoc.vue
@@ -7,7 +7,7 @@
         <PlexInputText v-model="value2" type="text" placeholder="Normal" />
         <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/slider/BasicDoc.vue b/apps/labs/doc/slider/BasicDoc.vue
index b683f3fef..ae79d7491 100644
--- a/apps/labs/doc/slider/BasicDoc.vue
+++ b/apps/labs/doc/slider/BasicDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexSlider v-model="value" class="w-56" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/slider/FilterDoc.vue b/apps/labs/doc/slider/FilterDoc.vue
index 3ec51d6a8..7d076a045 100644
--- a/apps/labs/doc/slider/FilterDoc.vue
+++ b/apps/labs/doc/slider/FilterDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexSlider v-model="value" class="w-56" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/slider/VerticalDoc.vue b/apps/labs/doc/slider/VerticalDoc.vue
index 8e2fb086a..cf140da7e 100644
--- a/apps/labs/doc/slider/VerticalDoc.vue
+++ b/apps/labs/doc/slider/VerticalDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexSlider v-model="value" orientation="vertical" class="h-56" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/textarea/AutoResizeDoc.vue b/apps/labs/doc/textarea/AutoResizeDoc.vue
index 5fb9a7bfc..ca27131d0 100644
--- a/apps/labs/doc/textarea/AutoResizeDoc.vue
+++ b/apps/labs/doc/textarea/AutoResizeDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/textarea/BasicDoc.vue b/apps/labs/doc/textarea/BasicDoc.vue
index fc3cbaaf3..f97998330 100644
--- a/apps/labs/doc/textarea/BasicDoc.vue
+++ b/apps/labs/doc/textarea/BasicDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/textarea/DisabledDoc.vue b/apps/labs/doc/textarea/DisabledDoc.vue
index aef513d9c..380915ef1 100644
--- a/apps/labs/doc/textarea/DisabledDoc.vue
+++ b/apps/labs/doc/textarea/DisabledDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/textarea/FilledDoc.vue b/apps/labs/doc/textarea/FilledDoc.vue
index 2c57e549b..0625d2c19 100644
--- a/apps/labs/doc/textarea/FilledDoc.vue
+++ b/apps/labs/doc/textarea/FilledDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/textarea/HelpTextDoc.vue b/apps/labs/doc/textarea/HelpTextDoc.vue
index dd00e6884..1fbc2e94f 100644
--- a/apps/labs/doc/textarea/HelpTextDoc.vue
+++ b/apps/labs/doc/textarea/HelpTextDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexInputText v-model="value" type="text" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/textarea/InvalidDoc.vue b/apps/labs/doc/textarea/InvalidDoc.vue
index d815ad4e2..83596e85b 100644
--- a/apps/labs/doc/textarea/InvalidDoc.vue
+++ b/apps/labs/doc/textarea/InvalidDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/apps/labs/doc/textarea/SizesDoc.vue b/apps/labs/doc/textarea/SizesDoc.vue
index b2b52b2f5..d060672a7 100644
--- a/apps/labs/doc/textarea/SizesDoc.vue
+++ b/apps/labs/doc/textarea/SizesDoc.vue
@@ -7,7 +7,7 @@
         <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
         <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code" />
 </template>
 
 <script setup>
diff --git a/packages/primevue/src/inputtext/InputText.vue b/packages/primevue/src/inputtext/InputText.vue
index 57d82b25a..760f342d5 100755
--- a/packages/primevue/src/inputtext/InputText.vue
+++ b/packages/primevue/src/inputtext/InputText.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { cn } from '@primeuix/utils/classnames';
+import { cn } from '@primeuix/utils';
 import { mergeProps } from 'vue';
 import BaseInputText from './BaseInputText.vue';
 
diff --git a/packages/primevue/src/slider/Slider.vue b/packages/primevue/src/slider/Slider.vue
index 2268a2af6..1c8a70c54 100755
--- a/packages/primevue/src/slider/Slider.vue
+++ b/packages/primevue/src/slider/Slider.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { cn } from '@primeuix/utils/classnames';
+import { cn } from '@primeuix/utils';
 import { getAttribute, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@primeuix/utils/dom';
 import BaseSlider from './BaseSlider.vue';
 
diff --git a/packages/primevue/src/textarea/Textarea.vue b/packages/primevue/src/textarea/Textarea.vue
index 3a6d827d0..0d1bc53d3 100755
--- a/packages/primevue/src/textarea/Textarea.vue
+++ b/packages/primevue/src/textarea/Textarea.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { cn } from '@primeuix/utils/classnames';
+import { cn } from '@primeuix/utils';
 import { mergeProps } from 'vue';
 import BaseTextarea from './BaseTextarea.vue';
 

From b340affb9abe3415e3002047c927405fff21e711 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 18:20:05 +0300
Subject: [PATCH 27/77] Disable autoimport to avoid prefix

---
 apps/labs/doc/inputtext/BasicDoc.vue     |  8 ++++----
 apps/labs/doc/inputtext/DisabledDoc.vue  |  8 ++++----
 apps/labs/doc/inputtext/FilledDoc.vue    |  8 ++++----
 apps/labs/doc/inputtext/HelpTextDoc.vue  |  8 ++++----
 apps/labs/doc/inputtext/ImportDoc.vue    |  2 +-
 apps/labs/doc/inputtext/InvalidDoc.vue   |  8 ++++----
 apps/labs/doc/inputtext/SizesDoc.vue     | 16 ++++++++--------
 apps/labs/doc/slider/BasicDoc.vue        |  8 ++++----
 apps/labs/doc/slider/FilterDoc.vue       |  8 ++++----
 apps/labs/doc/slider/ImportDoc.vue       |  2 +-
 apps/labs/doc/slider/InputDoc.vue        | 16 ++++++++--------
 apps/labs/doc/slider/RangeDoc.vue        |  8 ++++----
 apps/labs/doc/slider/StepDoc.vue         |  8 ++++----
 apps/labs/doc/slider/VerticalDoc.vue     |  8 ++++----
 apps/labs/doc/textarea/AutoResizeDoc.vue |  8 ++++----
 apps/labs/doc/textarea/BasicDoc.vue      |  8 ++++----
 apps/labs/doc/textarea/DisabledDoc.vue   |  8 ++++----
 apps/labs/doc/textarea/FilledDoc.vue     |  8 ++++----
 apps/labs/doc/textarea/HelpTextDoc.vue   |  8 ++++----
 apps/labs/doc/textarea/ImportDoc.vue     |  2 +-
 apps/labs/doc/textarea/InvalidDoc.vue    |  8 ++++----
 apps/labs/doc/textarea/SizesDoc.vue      | 16 ++++++++--------
 apps/labs/nuxt.config.js                 |  3 +++
 23 files changed, 94 insertions(+), 91 deletions(-)

diff --git a/apps/labs/doc/inputtext/BasicDoc.vue b/apps/labs/doc/inputtext/BasicDoc.vue
index 808d8d030..3f5a8af4f 100644
--- a/apps/labs/doc/inputtext/BasicDoc.vue
+++ b/apps/labs/doc/inputtext/BasicDoc.vue
@@ -3,13 +3,13 @@
         <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" />
+        <InputText v-model="value" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" />
+        <InputText v-model="value" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/DisabledDoc.vue b/apps/labs/doc/inputtext/DisabledDoc.vue
index 5f49abbd5..ad9392c47 100644
--- a/apps/labs/doc/inputtext/DisabledDoc.vue
+++ b/apps/labs/doc/inputtext/DisabledDoc.vue
@@ -3,13 +3,13 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" disabled placeholder="Disabled" />
+        <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" disabled placeholder="Disabled" />
+        <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/FilledDoc.vue b/apps/labs/doc/inputtext/FilledDoc.vue
index 45964821d..c5efb8e1d 100644
--- a/apps/labs/doc/inputtext/FilledDoc.vue
+++ b/apps/labs/doc/inputtext/FilledDoc.vue
@@ -3,13 +3,13 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" variant="filled" />
+        <InputText v-model="value" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" variant="filled" />
+        <InputText v-model="value" variant="filled" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/HelpTextDoc.vue b/apps/labs/doc/inputtext/HelpTextDoc.vue
index 1fbc2e94f..5a1def75b 100644
--- a/apps/labs/doc/inputtext/HelpTextDoc.vue
+++ b/apps/labs/doc/inputtext/HelpTextDoc.vue
@@ -3,13 +3,13 @@
         <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/ImportDoc.vue b/apps/labs/doc/inputtext/ImportDoc.vue
index a44b8a5ce..435eb2576 100644
--- a/apps/labs/doc/inputtext/ImportDoc.vue
+++ b/apps/labs/doc/inputtext/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 `
         };
     }
diff --git a/apps/labs/doc/inputtext/InvalidDoc.vue b/apps/labs/doc/inputtext/InvalidDoc.vue
index 0ca50704d..089b7c81d 100644
--- a/apps/labs/doc/inputtext/InvalidDoc.vue
+++ b/apps/labs/doc/inputtext/InvalidDoc.vue
@@ -3,13 +3,13 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
+        <InputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref('');
@@ -17,12 +17,12 @@ const value = ref('');
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
+        <InputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/SizesDoc.vue b/apps/labs/doc/inputtext/SizesDoc.vue
index bc1f099da..ef8d36b51 100644
--- a/apps/labs/doc/inputtext/SizesDoc.vue
+++ b/apps/labs/doc/inputtext/SizesDoc.vue
@@ -3,15 +3,15 @@
         <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <PlexInputText v-model="value2" type="text" placeholder="Normal" />
-        <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -21,14 +21,14 @@ const value3 = ref(null);
 const code = ref(`
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <PlexInputText v-model="value2" type="text" placeholder="Normal" />
-        <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/doc/slider/BasicDoc.vue b/apps/labs/doc/slider/BasicDoc.vue
index ae79d7491..d276012c8 100644
--- a/apps/labs/doc/slider/BasicDoc.vue
+++ b/apps/labs/doc/slider/BasicDoc.vue
@@ -3,13 +3,13 @@
         <p>Slider is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/slider/FilterDoc.vue b/apps/labs/doc/slider/FilterDoc.vue
index 7d076a045..eaaf1124f 100644
--- a/apps/labs/doc/slider/FilterDoc.vue
+++ b/apps/labs/doc/slider/FilterDoc.vue
@@ -3,13 +3,13 @@
         <p>Image filter implementation using multiple sliders.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/slider/ImportDoc.vue b/apps/labs/doc/slider/ImportDoc.vue
index 3f28ba385..e265faeac 100644
--- a/apps/labs/doc/slider/ImportDoc.vue
+++ b/apps/labs/doc/slider/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 `
         };
     }
diff --git a/apps/labs/doc/slider/InputDoc.vue b/apps/labs/doc/slider/InputDoc.vue
index ef0fa1fc7..4e507047e 100644
--- a/apps/labs/doc/slider/InputDoc.vue
+++ b/apps/labs/doc/slider/InputDoc.vue
@@ -4,16 +4,16 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="w-56">
-            <PlexInputText v-model.number="value" class="w-full mb-4" />
-            <PlexSlider v-model="value" class="w-full" />
+            <InputText v-model.number="value" class="w-full mb-4" />
+            <Slider v-model="value" class="w-full" />
         </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
-import PlexSlider from '@/plex/slider';
+import InputText from '@/plex/inputtext';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -21,14 +21,14 @@ const value = ref(50);
 const code = ref(`
 <div class="card flex justify-center">
     <div class="w-56">
-        <PlexInputText v-model.number="value" class="w-full mb-4" />
-        <PlexSlider v-model="value" class="w-full" />
+        <InputText v-model.number="value" class="w-full mb-4" />
+        <Slider v-model="value" class="w-full" />
     </div>
 </div>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
-import PlexSlider from '@/plex/slider';
+import InputText from '@/plex/inputtext';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/labs/doc/slider/RangeDoc.vue b/apps/labs/doc/slider/RangeDoc.vue
index fd1d9d7f7..befae54ee 100644
--- a/apps/labs/doc/slider/RangeDoc.vue
+++ b/apps/labs/doc/slider/RangeDoc.vue
@@ -3,13 +3,13 @@
         <p>When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" range class="w-56" />
+        <Slider v-model="value" range class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref([20, 80]);
@@ -17,12 +17,12 @@ const value = ref([20, 80]);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" range class="w-56" />
+        <Slider v-model="value" range class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref([20, 80]);
diff --git a/apps/labs/doc/slider/StepDoc.vue b/apps/labs/doc/slider/StepDoc.vue
index 8234a958a..909fb6b59 100644
--- a/apps/labs/doc/slider/StepDoc.vue
+++ b/apps/labs/doc/slider/StepDoc.vue
@@ -3,13 +3,13 @@
         <p>Size of each movement is defined with the <i>step</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" :step="20" class="w-56" />
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(20);
@@ -17,12 +17,12 @@ const value = ref(20);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" :step="20" class="w-56" />
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(20);
diff --git a/apps/labs/doc/slider/VerticalDoc.vue b/apps/labs/doc/slider/VerticalDoc.vue
index cf140da7e..146281d0c 100644
--- a/apps/labs/doc/slider/VerticalDoc.vue
+++ b/apps/labs/doc/slider/VerticalDoc.vue
@@ -3,13 +3,13 @@
         <p>Default layout of slider is <i>horizontal</i>, use <i>orientation</i> property for the alternative <i>vertical</i> mode.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" orientation="vertical" class="h-56" />
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -17,12 +17,12 @@ const value = ref(50);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" orientation="vertical" class="h-56" />
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/labs/doc/textarea/AutoResizeDoc.vue b/apps/labs/doc/textarea/AutoResizeDoc.vue
index ca27131d0..de2bc47e0 100644
--- a/apps/labs/doc/textarea/AutoResizeDoc.vue
+++ b/apps/labs/doc/textarea/AutoResizeDoc.vue
@@ -3,13 +3,13 @@
         <p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/BasicDoc.vue b/apps/labs/doc/textarea/BasicDoc.vue
index f97998330..8474194c0 100644
--- a/apps/labs/doc/textarea/BasicDoc.vue
+++ b/apps/labs/doc/textarea/BasicDoc.vue
@@ -3,13 +3,13 @@
         <p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" class="resize-none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" class="resize-none" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/DisabledDoc.vue b/apps/labs/doc/textarea/DisabledDoc.vue
index 380915ef1..1421cd0e6 100644
--- a/apps/labs/doc/textarea/DisabledDoc.vue
+++ b/apps/labs/doc/textarea/DisabledDoc.vue
@@ -3,13 +3,13 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
      <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/FilledDoc.vue b/apps/labs/doc/textarea/FilledDoc.vue
index 0625d2c19..9d4c9382b 100644
--- a/apps/labs/doc/textarea/FilledDoc.vue
+++ b/apps/labs/doc/textarea/FilledDoc.vue
@@ -3,13 +3,13 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+        <Textarea v-model="value" rows="5" cols="30" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+        <Textarea v-model="value" rows="5" cols="30" variant="filled" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/HelpTextDoc.vue b/apps/labs/doc/textarea/HelpTextDoc.vue
index 1fbc2e94f..5a1def75b 100644
--- a/apps/labs/doc/textarea/HelpTextDoc.vue
+++ b/apps/labs/doc/textarea/HelpTextDoc.vue
@@ -3,13 +3,13 @@
         <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/ImportDoc.vue b/apps/labs/doc/textarea/ImportDoc.vue
index c6dfc67e2..d50fe1a9b 100644
--- a/apps/labs/doc/textarea/ImportDoc.vue
+++ b/apps/labs/doc/textarea/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 `
         };
     }
diff --git a/apps/labs/doc/textarea/InvalidDoc.vue b/apps/labs/doc/textarea/InvalidDoc.vue
index 83596e85b..140bc6e9a 100644
--- a/apps/labs/doc/textarea/InvalidDoc.vue
+++ b/apps/labs/doc/textarea/InvalidDoc.vue
@@ -3,13 +3,13 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref('');
@@ -17,12 +17,12 @@ const value = ref('');
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/SizesDoc.vue b/apps/labs/doc/textarea/SizesDoc.vue
index d060672a7..e863109b6 100644
--- a/apps/labs/doc/textarea/SizesDoc.vue
+++ b/apps/labs/doc/textarea/SizesDoc.vue
@@ -3,15 +3,15 @@
         <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
-        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -21,14 +21,14 @@ const value3 = ref(null);
 const code = ref(`
 <template>
 <div class="card flex flex-col items-center gap-4">
-        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
-        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/nuxt.config.js b/apps/labs/nuxt.config.js
index f2662526b..ed3a4ccea 100644
--- a/apps/labs/nuxt.config.js
+++ b/apps/labs/nuxt.config.js
@@ -34,6 +34,9 @@ export default defineNuxtConfig({
     runtimeConfig: {
         GITHUB_TOKEN: ''
     },
+    primevue: {
+        autoImport: false
+    },
     app: {
         baseURL: baseUrl,
         head: {

From b846d84214b979414f2f845c34bad7f83b3d479a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 19:44:31 +0300
Subject: [PATCH 28/77] Implemented ToggleSwitch

---
 apps/labs/assets/data/menu.json               |  4 ++
 apps/labs/doc/toggleswitch/BasicDoc.vue       | 31 +++++++++++++
 apps/labs/doc/toggleswitch/DisabledDoc.vue    | 31 +++++++++++++
 apps/labs/doc/toggleswitch/ImportDoc.vue      | 16 +++++++
 apps/labs/doc/toggleswitch/InvalidDoc.vue     | 31 +++++++++++++
 .../labs/doc/toggleswitch/PreselectionDoc.vue | 31 +++++++++++++
 apps/labs/doc/toggleswitch/TemplateDoc.vue    | 39 ++++++++++++++++
 apps/labs/pages/toggleswitch/index.vue        | 46 +++++++++++++++++++
 apps/labs/plex/toggleswitch/index.vue         | 34 ++++++++++++++
 apps/labs/tailwind.config.js                  |  3 ++
 .../showcase/doc/toggleswitch/TemplateDoc.vue |  2 +-
 .../src/toggleswitch/ToggleSwitch.vue         | 14 ++++--
 12 files changed, 278 insertions(+), 4 deletions(-)
 create mode 100644 apps/labs/doc/toggleswitch/BasicDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/DisabledDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/ImportDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/InvalidDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/PreselectionDoc.vue
 create mode 100644 apps/labs/doc/toggleswitch/TemplateDoc.vue
 create mode 100644 apps/labs/pages/toggleswitch/index.vue
 create mode 100644 apps/labs/plex/toggleswitch/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 4aeb21a31..7fc92241a 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -33,6 +33,10 @@
                 {
                     "name": "Textarea",
                     "to": "/textarea"
+                },
+                {
+                    "name": "ToggleSwitch",
+                    "to": "/toggleswitch"
                 }
             ]
         },
diff --git a/apps/labs/doc/toggleswitch/BasicDoc.vue b/apps/labs/doc/toggleswitch/BasicDoc.vue
new file mode 100644
index 000000000..c797c205a
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleSwitch is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/toggleswitch/DisabledDoc.vue b/apps/labs/doc/toggleswitch/DisabledDoc.vue
new file mode 100644
index 000000000..0c1f9f423
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" disabled />
+    </div>
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/toggleswitch/ImportDoc.vue b/apps/labs/doc/toggleswitch/ImportDoc.vue
new file mode 100644
index 000000000..0024a8afb
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import ToggleSwitch from '@/plex/toggleswitch';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/InvalidDoc.vue b/apps/labs/doc/toggleswitch/InvalidDoc.vue
new file mode 100644
index 000000000..10de39ba3
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" :invalid="!checked" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" :invalid="!checked" />
+    </div>
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/toggleswitch/PreselectionDoc.vue b/apps/labs/doc/toggleswitch/PreselectionDoc.vue
new file mode 100644
index 000000000..5c6b9c69c
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/PreselectionDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>checked</i> property displays the component as active initially.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(true);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked" />
+    </div>
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(true);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/toggleswitch/TemplateDoc.vue b/apps/labs/doc/toggleswitch/TemplateDoc.vue
new file mode 100644
index 000000000..23be940ee
--- /dev/null
+++ b/apps/labs/doc/toggleswitch/TemplateDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>handle</i> slot is available to display custom content.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
+            </template>
+        </ToggleSwitch>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
+            </template>
+        </ToggleSwitch>
+    </div>
+</template>
+
+<script setup>
+import ToggleSwitch from '@/plex/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/toggleswitch/index.vue b/apps/labs/pages/toggleswitch/index.vue
new file mode 100644
index 000000000..89e9e8a33
--- /dev/null
+++ b/apps/labs/pages/toggleswitch/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <DocComponent title="Vue ToggleSwitch Component" header="ToggleSwitch" description="ToggleSwitch is used to select a boolean value." :componentDocs="docs" />
+</template>
+
+<script setup>
+import BasicDoc from '@/doc/toggleswitch/BasicDoc.vue';
+import DisabledDoc from '@/doc/toggleswitch/DisabledDoc.vue';
+import ImportDoc from '@/doc/toggleswitch/ImportDoc.vue';
+import InvalidDoc from '@/doc/toggleswitch/InvalidDoc.vue';
+import PreselectionDoc from '@/doc/toggleswitch/PreselectionDoc.vue';
+import TemplateDoc from '@/doc/toggleswitch/TemplateDoc.vue';
+import { ref } from 'vue';
+
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'preselection',
+        label: 'Preselection',
+        component: PreselectionDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'template',
+        label: 'Template',
+        component: TemplateDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
+    }
+]);
+</script>
diff --git a/apps/labs/plex/toggleswitch/index.vue b/apps/labs/plex/toggleswitch/index.vue
new file mode 100644
index 000000000..50e22ac77
--- /dev/null
+++ b/apps/labs/plex/toggleswitch/index.vue
@@ -0,0 +1,34 @@
+<template>
+    <ToggleSwitch unstyled :pt="theme">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </ToggleSwitch>
+</template>
+
+<script setup>
+import ToggleSwitch from 'primevue/toggleswitch';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `inline-block w-10 h-6`,
+    input: `peer cursor-pointer disabled:cursor-default appearance-none absolute top-0 start-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]`,
+    slider: `inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        bg-surface-300 dark:bg-surface-700
+        border border-transparent
+        transition-colors duration-200
+        peer-enabled:peer-hover:bg-surface-400 dark:peer-enabled:peer-hover:bg-surface-600
+        p-checked:bg-primary peer-enabled:peer-hover:p-checked:bg-primary-emphasis
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-disabled:bg-surface-200 dark:p-disabled:bg-surface-600
+        peer-focus-visible:outline peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary`,
+    handle: `absolute top-1/2 flex justify-center items-center
+        bg-surface-0 dark:bg-surface-400
+        text-surface-500 dark:text-surface-900
+        w-4 h-4 start-1 -mt-2 rounded-full
+        transition-[background,color,left] duration-200
+        p-checked:bg-surface-0 dark:p-checked:bg-surface-900 p-checked:text-primary p-checked:start-5
+        p-disabled:bg-surface-700 dark:p-disabled:bg-surface-900
+}`
+});
+</script>
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
index 186877d26..3c2bc6696 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/labs/tailwind.config.js
@@ -15,6 +15,9 @@ export default {
             addVariant('p-filled', '&[data-p~="filled"]');
             addVariant('p-horizontal', '&[data-p~="horizontal"]');
             addVariant('p-vertical', '&[data-p~="vertical"]');
+            addVariant('p-checked', '&[data-p~="checked"]');
+            addVariant('p-disabled', '&[data-p~="disabled"]');
+            addVariant('p-enabled', '&:not([data-p~="disabled"])');
         })
     ],
     theme: {
diff --git a/apps/showcase/doc/toggleswitch/TemplateDoc.vue b/apps/showcase/doc/toggleswitch/TemplateDoc.vue
index 9055fa083..90cc61303 100644
--- a/apps/showcase/doc/toggleswitch/TemplateDoc.vue
+++ b/apps/showcase/doc/toggleswitch/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>handle</i> slot is available to display custom content.</p>
     </DocSectionText>
-    <div class="card flex justify-center gap-4">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked">
             <template #handle="{ checked }">
                 <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
diff --git a/packages/primevue/src/toggleswitch/ToggleSwitch.vue b/packages/primevue/src/toggleswitch/ToggleSwitch.vue
index 5363ebf06..322cdd95e 100755
--- a/packages/primevue/src/toggleswitch/ToggleSwitch.vue
+++ b/packages/primevue/src/toggleswitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-disabled="disabled">
+    <div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-disabled="disabled" :data-p="dataP">
         <input
             :id="inputId"
             type="checkbox"
@@ -19,8 +19,8 @@
             @change="onChange"
             v-bind="getPTOptions('input')"
         />
-        <div :class="cx('slider')" v-bind="getPTOptions('slider')">
-            <div :class="cx('handle')" v-bind="getPTOptions('handle')">
+        <div :class="cx('slider')" v-bind="getPTOptions('slider')" :data-p="dataP">
+            <div :class="cx('handle')" v-bind="getPTOptions('handle')" :data-p="dataP">
                 <slot name="handle" :checked="checked" />
             </div>
         </div>
@@ -28,6 +28,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseToggleSwitch from './BaseToggleSwitch.vue';
 
 export default {
@@ -65,6 +66,13 @@ export default {
     computed: {
         checked() {
             return this.d_value === this.trueValue;
+        },
+        dataP() {
+            return cn({
+                checked: this.checked,
+                disabled: this.disabled,
+                invalid: this.$invalid
+            });
         }
     }
 };

From 11bd7f029cae9ba715051a5b0204285c4e9f658d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 19:58:47 +0300
Subject: [PATCH 29/77] Implemented InputMask

---
 apps/labs/assets/data/menu.json         |  4 ++
 apps/labs/doc/inputmask/BasicDoc.vue    | 31 ++++++++++++
 apps/labs/doc/inputmask/DisabledDoc.vue | 31 ++++++++++++
 apps/labs/doc/inputmask/FilledDoc.vue   | 31 ++++++++++++
 apps/labs/doc/inputmask/ImportDoc.vue   | 16 +++++++
 apps/labs/doc/inputmask/InvalidDoc.vue  | 31 ++++++++++++
 apps/labs/doc/inputmask/MaskDoc.vue     | 64 +++++++++++++++++++++++++
 apps/labs/doc/inputmask/OptionalDoc.vue | 31 ++++++++++++
 apps/labs/doc/inputmask/SizesDoc.vue    | 39 +++++++++++++++
 apps/labs/doc/inputmask/SlotCharDoc.vue | 31 ++++++++++++
 apps/labs/pages/inputmask/index.vue     | 64 +++++++++++++++++++++++++
 apps/labs/plex/inputmask/index.vue      | 27 +++++++++++
 12 files changed, 400 insertions(+)
 create mode 100644 apps/labs/doc/inputmask/BasicDoc.vue
 create mode 100644 apps/labs/doc/inputmask/DisabledDoc.vue
 create mode 100644 apps/labs/doc/inputmask/FilledDoc.vue
 create mode 100644 apps/labs/doc/inputmask/ImportDoc.vue
 create mode 100644 apps/labs/doc/inputmask/InvalidDoc.vue
 create mode 100644 apps/labs/doc/inputmask/MaskDoc.vue
 create mode 100644 apps/labs/doc/inputmask/OptionalDoc.vue
 create mode 100644 apps/labs/doc/inputmask/SizesDoc.vue
 create mode 100644 apps/labs/doc/inputmask/SlotCharDoc.vue
 create mode 100644 apps/labs/pages/inputmask/index.vue
 create mode 100644 apps/labs/plex/inputmask/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 7fc92241a..3609c7cf9 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -22,6 +22,10 @@
             "name": "Components",
             "icon": "pi pi-compass",
             "children": [
+                {
+                    "name": "InputMask",
+                    "to": "/inputmask"
+                },
                 {
                     "name": "InputText",
                     "to": "/inputtext"
diff --git a/apps/labs/doc/inputmask/BasicDoc.vue b/apps/labs/doc/inputmask/BasicDoc.vue
new file mode 100644
index 000000000..75c33c530
--- /dev/null
+++ b/apps/labs/doc/inputmask/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputmask/DisabledDoc.vue b/apps/labs/doc/inputmask/DisabledDoc.vue
new file mode 100644
index 000000000..7b1f5cd5a
--- /dev/null
+++ b/apps/labs/doc/inputmask/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="99-999999" placeholder="Disabled" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="99-999999" placeholder="Disabled" disabled />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputmask/FilledDoc.vue b/apps/labs/doc/inputmask/FilledDoc.vue
new file mode 100644
index 000000000..6148a9e50
--- /dev/null
+++ b/apps/labs/doc/inputmask/FilledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputmask/ImportDoc.vue b/apps/labs/doc/inputmask/ImportDoc.vue
new file mode 100644
index 000000000..55365b7de
--- /dev/null
+++ b/apps/labs/doc/inputmask/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import InputMask from '@/plex/inputmask';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputmask/InvalidDoc.vue b/apps/labs/doc/inputmask/InvalidDoc.vue
new file mode 100644
index 000000000..ebe18d6dc
--- /dev/null
+++ b/apps/labs/doc/inputmask/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value" mask="99-999999" placeholder="Serial Key" :invalid="!value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value" mask="99-999999" placeholder="Serial Key" :invalid="!value" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputmask/MaskDoc.vue b/apps/labs/doc/inputmask/MaskDoc.vue
new file mode 100644
index 000000000..a2c3af826
--- /dev/null
+++ b/apps/labs/doc/inputmask/MaskDoc.vue
@@ -0,0 +1,64 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Mask format can be a combination of the following definitions; <i>a</i> for alphabetic characters, <i>9</i> for numeric characters and <i>*</i> for alphanumberic characters. In addition, formatting characters like <i>(</i>, <i>)</i> ,
+            <i>-</i> are also accepted.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="ssn" class="font-bold block mb-2">SSN</label>
+            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="phone" class="font-bold block mb-2">Phone</label>
+            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="serial" class="font-bold block mb-2">Serial</label>
+            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="ssn" class="font-bold block mb-2">SSN</label>
+            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="phone" class="font-bold block mb-2">Phone</label>
+            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="serial" class="font-bold block mb-2">Serial</label>
+            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputmask/OptionalDoc.vue b/apps/labs/doc/inputmask/OptionalDoc.vue
new file mode 100644
index 000000000..13ad2bb64
--- /dev/null
+++ b/apps/labs/doc/inputmask/OptionalDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, <i>?</i> is used to mark anything after the question mark optional.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputmask/SizesDoc.vue b/apps/labs/doc/inputmask/SizesDoc.vue
new file mode 100644
index 000000000..af5f663f5
--- /dev/null
+++ b/apps/labs/doc/inputmask/SizesDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputmask/SlotCharDoc.vue b/apps/labs/doc/inputmask/SlotCharDoc.vue
new file mode 100644
index 000000000..1889f087f
--- /dev/null
+++ b/apps/labs/doc/inputmask/SlotCharDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Default placeholder for a mask is underscore that can be customized using <i>slotChar</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" placeholder="mm/dd/yyyy" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" placeholder="mm/dd/yyyy" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/inputmask/index.vue b/apps/labs/pages/inputmask/index.vue
new file mode 100644
index 000000000..f48b1d20a
--- /dev/null
+++ b/apps/labs/pages/inputmask/index.vue
@@ -0,0 +1,64 @@
+<template>
+    <DocComponent title="Vue Mask Component" header="InputMask" description="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone." :componentDocs="docs" />
+</template>
+
+<script setup>
+import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
+import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
+import FilledDoc from '@/doc/inputmask/FilledDoc.vue';
+import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
+import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
+import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
+import OptionalDoc from '@/doc/inputmask/OptionalDoc.vue';
+import SizesDoc from '@/doc/inputmask/SizesDoc.vue';
+import SlotCharDoc from '@/doc/inputmask/SlotCharDoc.vue';
+import { ref } from 'vue';
+
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'mask',
+        label: 'Mask',
+        component: MaskDoc
+    },
+    {
+        id: 'optional',
+        label: 'Optional',
+        component: OptionalDoc
+    },
+    {
+        id: 'slotchar',
+        label: 'SlotChar',
+        component: SlotCharDoc
+    },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
+    }
+]);
+</script>
diff --git a/apps/labs/plex/inputmask/index.vue b/apps/labs/plex/inputmask/index.vue
new file mode 100644
index 000000000..77a350057
--- /dev/null
+++ b/apps/labs/plex/inputmask/index.vue
@@ -0,0 +1,27 @@
+<template>
+    <InputMask unstyled :pt="theme" />
+</template>
+
+<script setup>
+import InputMask from 'primevue/inputmask';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `appearance-none rounded-md outline-none
+        bg-surface-0 dark:bg-surface-950
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
+        text-surface-700 dark:text-surface-0
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        disabled:bg-surface-200 disabled:text-surface-500 
+        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
+        px-3 py-2 p-fluid:w-full
+        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
+        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
+        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]`
+});
+</script>

From ee0e002e26d15b1bbdaae004d57a449c99a9aeec Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 22:45:40 +0300
Subject: [PATCH 30/77] Implemented Timeline

---
 apps/labs/assets/data/menu.json             |  4 +
 apps/labs/doc/timeline/AlignmentDoc.vue     | 73 +++++++++++++++++
 apps/labs/doc/timeline/BasicDoc.vue         | 49 ++++++++++++
 apps/labs/doc/timeline/HorizontalDoc.vue    | 65 +++++++++++++++
 apps/labs/doc/timeline/ImportDoc.vue        | 16 ++++
 apps/labs/doc/timeline/OppositeDoc.vue      | 55 +++++++++++++
 apps/labs/doc/timeline/TemplateDoc.vue      | 89 +++++++++++++++++++++
 apps/labs/pages/timeline/index.vue          | 51 ++++++++++++
 apps/labs/plex/timeline/index.vue           | 43 ++++++++++
 apps/labs/tailwind.config.js                |  5 ++
 packages/primevue/src/timeline/Timeline.vue | 23 ++++--
 11 files changed, 466 insertions(+), 7 deletions(-)
 create mode 100644 apps/labs/doc/timeline/AlignmentDoc.vue
 create mode 100644 apps/labs/doc/timeline/BasicDoc.vue
 create mode 100644 apps/labs/doc/timeline/HorizontalDoc.vue
 create mode 100644 apps/labs/doc/timeline/ImportDoc.vue
 create mode 100644 apps/labs/doc/timeline/OppositeDoc.vue
 create mode 100644 apps/labs/doc/timeline/TemplateDoc.vue
 create mode 100644 apps/labs/pages/timeline/index.vue
 create mode 100644 apps/labs/plex/timeline/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 3609c7cf9..62c10b910 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -38,6 +38,10 @@
                     "name": "Textarea",
                     "to": "/textarea"
                 },
+                {
+                    "name": "Timeline",
+                    "to": "/timeline"
+                },
                 {
                     "name": "ToggleSwitch",
                     "to": "/toggleswitch"
diff --git a/apps/labs/doc/timeline/AlignmentDoc.vue b/apps/labs/doc/timeline/AlignmentDoc.vue
new file mode 100644
index 000000000..507e403b9
--- /dev/null
+++ b/apps/labs/doc/timeline/AlignmentDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Content location relative the line is defined with the <i>align</i> property.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-12">
+        <Timeline :value="events" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="right" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-12">
+        <Timeline :value="events" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="right" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/timeline/BasicDoc.vue b/apps/labs/doc/timeline/BasicDoc.vue
new file mode 100644
index 000000000..5fdd5fd64
--- /dev/null
+++ b/apps/labs/doc/timeline/BasicDoc.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Timeline requires a <i>value</i> for the collection of events and <i>content</i> slot that receives an object as a parameter to return content.</p>
+    </DocSectionText>
+    <div class="card">
+        <Timeline :value="events">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Timeline :value="events">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/timeline/HorizontalDoc.vue b/apps/labs/doc/timeline/HorizontalDoc.vue
new file mode 100644
index 000000000..a8b51b18e
--- /dev/null
+++ b/apps/labs/doc/timeline/HorizontalDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TimeLine orientation is controlled with the <i>layout</i> property, default is <i>vertical</i> having <i>horizontal</i> as the alternative.</p>
+    </DocSectionText>
+    <div class="card flex flex-col gap-4">
+        <Timeline :value="events" layout="horizontal" align="top">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="bottom">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="alternate">
+            <template #opposite> &nbsp; </template>
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref(['2020', '2021', '2022', '2023']);
+
+const code = ref(`
+<template>
+     <div class="card flex flex-col gap-4">
+        <Timeline :value="events" layout="horizontal" align="top">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="bottom">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" layout="horizontal" align="alternate">
+            <template #opposite> &nbsp; </template>
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref(['2020', '2021', '2022', '2023']);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/timeline/ImportDoc.vue b/apps/labs/doc/timeline/ImportDoc.vue
new file mode 100644
index 000000000..58d1d57e4
--- /dev/null
+++ b/apps/labs/doc/timeline/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import Timeline from '@/plex/timeline';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/timeline/OppositeDoc.vue b/apps/labs/doc/timeline/OppositeDoc.vue
new file mode 100644
index 000000000..50533ee31
--- /dev/null
+++ b/apps/labs/doc/timeline/OppositeDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Additional content at the other side of the line can be provided with the <i>opposite</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <Timeline :value="events">
+            <template #opposite="slotProps">
+                <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
+            </template>
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Timeline :value="events">
+            <template #opposite="slotProps">
+                <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
+            </template>
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/timeline/TemplateDoc.vue b/apps/labs/doc/timeline/TemplateDoc.vue
new file mode 100644
index 000000000..dea81ab2b
--- /dev/null
+++ b/apps/labs/doc/timeline/TemplateDoc.vue
@@ -0,0 +1,89 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sample implementation with custom content and styled markers.</p>
+    </DocSectionText>
+    <div class="card">
+        <Timeline :value="events" align="alternate">
+            <template #marker="slotProps">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                    <i :class="slotProps.item.icon"></i>
+                </span>
+            </template>
+            <template #content="slotProps">
+                <Card class="mt-4">
+                    <template #title>
+                        {{ slotProps.item.status }}
+                    </template>
+                    <template #subtitle>
+                        {{ slotProps.item.date }}
+                    </template>
+                    <template #content>
+                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                            neque quas!
+                        </p>
+                        <Button label="Read more" text></Button>
+                    </template>
+                </Card>
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Timeline :value="events" align="alternate">
+            <template #marker="slotProps">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                    <i :class="slotProps.item.icon"></i>
+                </span>
+            </template>
+            <template #content="slotProps">
+                <Card class="mt-4">
+                    <template #title>
+                        {{ slotProps.item.status }}
+                    </template>
+                    <template #subtitle>
+                        {{ slotProps.item.date }}
+                    </template>
+                    <template #content>
+                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                            neque quas!
+                        </p>
+                        <Button label="Read more" text></Button>
+                    </template>
+                </Card>
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import Timeline from '@/plex/timeline';
+import { ref } from 'vue';
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/timeline/index.vue b/apps/labs/pages/timeline/index.vue
new file mode 100644
index 000000000..84922d187
--- /dev/null
+++ b/apps/labs/pages/timeline/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocComponent title="Vue Timeline Component" header="Timeline" description="Timeline visualizes a series of chained events." :componentDocs="docs" />
+</template>
+
+<script>
+import AlignmentDoc from '@/doc/timeline/AlignmentDoc.vue';
+import BasicDoc from '@/doc/timeline/BasicDoc.vue';
+import HorizontalDoc from '@/doc/timeline/HorizontalDoc.vue';
+import ImportDoc from '@/doc/timeline/ImportDoc.vue';
+import OppositeDoc from '@/doc/timeline/OppositeDoc.vue';
+import TemplateDoc from '@/doc/timeline/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'alignment',
+                    label: 'Alignment',
+                    component: AlignmentDoc
+                },
+                {
+                    id: 'opposite',
+                    label: 'Opposite',
+                    component: OppositeDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'horizontal',
+                    label: 'Horizontal',
+                    component: HorizontalDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/timeline/index.vue b/apps/labs/plex/timeline/index.vue
new file mode 100644
index 000000000..28d1f6874
--- /dev/null
+++ b/apps/labs/plex/timeline/index.vue
@@ -0,0 +1,43 @@
+<template>
+    <Timeline unstyled :pt="theme">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Timeline>
+</template>
+
+<script setup>
+import Timeline from 'primevue/timeline';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `flex flex-col flex-grow
+        p-horizontal:flex-row`,
+    event: `group flex relative min-h-20 last:min-h-0
+        p-right:flex-row-reverse
+        p-horizontal:flex-col p-horizontal:flex-1 p-horizontal:last:flex-none
+        p-bottom:flex-col-reverse
+        p-vertical:p-alternate:even:flex-row-reverse
+        p-horizontal:p-alternate:even:flex-col-reverse`,
+    eventOpposite: `flex-1
+        p-left:text-end p-right:text-start 
+        p-vertical:py-0 p-vertical:px-4 p-vertical:leading-none
+        p-vertical:p-alternate:group-odd:text-end  p-vertical:p-alternate:group-even:text-start
+        p-horizontal:py-4 p-horizontal:px-0`,
+    eventSeparator: `flex-none flex flex-col items-center p-horizontal:flex-row`,
+    eventMarker: `inline-flex items-center justify-center relative self-baseline
+        border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem]
+        bg-surface-0 dark:bg-surface-900
+        before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary
+        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
+        p-horizontal:flex-row`,
+    eventConnector: `flex-grow bg-surface-200 dark:bg-surface-700
+        p-vertical:w-[2px]
+        p-horizontal:w-full p-horizontal:h-[2px]`,
+    eventContent: `flex-1
+        p-left:text-start p-right:text-end
+        p-vertical:py-0 p-vertical:px-4 p-vertical:leading-none
+        p-vertical:p-alternate:group-odd:text-start p-vertical:p-alternate:group-even:text-end
+        p-horizontal:py-4 p-horizontal:px-0`
+});
+</script>
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
index 3c2bc6696..a3a608cf7 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/labs/tailwind.config.js
@@ -18,6 +18,11 @@ export default {
             addVariant('p-checked', '&[data-p~="checked"]');
             addVariant('p-disabled', '&[data-p~="disabled"]');
             addVariant('p-enabled', '&:not([data-p~="disabled"])');
+            addVariant('p-left', '&[data-p~="left"]');
+            addVariant('p-right', '&[data-p~="right"]');
+            addVariant('p-top', '&[data-p~="top"]');
+            addVariant('p-bottom', '&[data-p~="bottom"]');
+            addVariant('p-alternate', '&[data-p~="alternate"]');
         })
     ],
     theme: {
diff --git a/packages/primevue/src/timeline/Timeline.vue b/packages/primevue/src/timeline/Timeline.vue
index 680014b9f..3df124ad8 100644
--- a/packages/primevue/src/timeline/Timeline.vue
+++ b/packages/primevue/src/timeline/Timeline.vue
@@ -1,18 +1,18 @@
 <template>
-    <div :class="cx('root')" v-bind="ptmi('root')">
-        <div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)">
-            <div :class="cx('eventOpposite', { index })" v-bind="getPTOptions('eventOpposite', index)">
+    <div :class="cx('root')" v-bind="ptmi('root')" :data-p="dataP">
+        <div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)" :data-p="dataP">
+            <div :class="cx('eventOpposite', { index })" v-bind="getPTOptions('eventOpposite', index)" :data-p="dataP">
                 <slot name="opposite" :item="item" :index="index"></slot>
             </div>
-            <div :class="cx('eventSeparator')" v-bind="getPTOptions('eventSeparator', index)">
+            <div :class="cx('eventSeparator')" v-bind="getPTOptions('eventSeparator', index)" :data-p="dataP">
                 <slot name="marker" :item="item" :index="index">
-                    <div :class="cx('eventMarker')" v-bind="getPTOptions('eventMarker', index)"></div>
+                    <div :class="cx('eventMarker')" v-bind="getPTOptions('eventMarker', index)" :data-p="dataP"></div>
                 </slot>
                 <slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index">
-                    <div :class="cx('eventConnector')" v-bind="getPTOptions('eventConnector', index)"></div>
+                    <div :class="cx('eventConnector')" v-bind="getPTOptions('eventConnector', index)" :data-p="dataP"></div>
                 </slot>
             </div>
-            <div :class="cx('eventContent')" v-bind="getPTOptions('eventContent', index)">
+            <div :class="cx('eventContent')" v-bind="getPTOptions('eventContent', index)" :data-p="dataP">
                 <slot name="content" :item="item" :index="index"></slot>
             </div>
         </div>
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { resolveFieldData } from '@primeuix/utils/object';
 import BaseTimeline from './BaseTimeline.vue';
 
@@ -39,6 +40,14 @@ export default {
                 }
             });
         }
+    },
+    computed: {
+        dataP() {
+            return cn({
+                [this.layout]: this.layout,
+                [this.align]: this.align
+            });
+        }
     }
 };
 </script>

From fbce6895bb97c0d3ce160188c0390a64a0092d1e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 1 Mar 2025 23:47:05 +0300
Subject: [PATCH 31/77] Implemented ToggleButton

---
 apps/labs/assets/data/menu.json               |  4 ++
 apps/labs/doc/togglebutton/BasicDoc.vue       | 31 +++++++++++
 apps/labs/doc/togglebutton/CustomizedDoc.vue  | 31 +++++++++++
 apps/labs/doc/togglebutton/DisabledDoc.vue    | 31 +++++++++++
 apps/labs/doc/togglebutton/ImportDoc.vue      | 16 ++++++
 apps/labs/doc/togglebutton/InvalidDoc.vue     | 31 +++++++++++
 apps/labs/doc/togglebutton/SizesDoc.vue       | 39 ++++++++++++++
 apps/labs/pages/togglebutton/index.vue        | 51 +++++++++++++++++++
 apps/labs/plex/togglebutton/index.vue         | 33 ++++++++++++
 .../src/togglebutton/ToggleButton.vue         | 11 +++-
 10 files changed, 277 insertions(+), 1 deletion(-)
 create mode 100644 apps/labs/doc/togglebutton/BasicDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/CustomizedDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/DisabledDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/ImportDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/InvalidDoc.vue
 create mode 100644 apps/labs/doc/togglebutton/SizesDoc.vue
 create mode 100644 apps/labs/pages/togglebutton/index.vue
 create mode 100644 apps/labs/plex/togglebutton/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 62c10b910..0520cf11f 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -42,6 +42,10 @@
                     "name": "Timeline",
                     "to": "/timeline"
                 },
+                {
+                    "name": "ToggleButton",
+                    "to": "/togglebutton"
+                },
                 {
                     "name": "ToggleSwitch",
                     "to": "/toggleswitch"
diff --git a/apps/labs/doc/togglebutton/BasicDoc.vue b/apps/labs/doc/togglebutton/BasicDoc.vue
new file mode 100644
index 000000000..deea3ea93
--- /dev/null
+++ b/apps/labs/doc/togglebutton/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleButton is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
+    </div>
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/togglebutton/CustomizedDoc.vue b/apps/labs/doc/togglebutton/CustomizedDoc.vue
new file mode 100644
index 000000000..ac3f22dcf
--- /dev/null
+++ b/apps/labs/doc/togglebutton/CustomizedDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
+    </div>
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/togglebutton/DisabledDoc.vue b/apps/labs/doc/togglebutton/DisabledDoc.vue
new file mode 100644
index 000000000..702921bd5
--- /dev/null
+++ b/apps/labs/doc/togglebutton/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/togglebutton/ImportDoc.vue b/apps/labs/doc/togglebutton/ImportDoc.vue
new file mode 100644
index 000000000..0571453f0
--- /dev/null
+++ b/apps/labs/doc/togglebutton/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import ToggleButton from '@/plex/togglebutton';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/InvalidDoc.vue b/apps/labs/doc/togglebutton/InvalidDoc.vue
new file mode 100644
index 000000000..304774a3c
--- /dev/null
+++ b/apps/labs/doc/togglebutton/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
+    </div>
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/togglebutton/SizesDoc.vue b/apps/labs/doc/togglebutton/SizesDoc.vue
new file mode 100644
index 000000000..154f77f91
--- /dev/null
+++ b/apps/labs/doc/togglebutton/SizesDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="checked1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="checked2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="checked3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked1 = ref(false);
+const checked2 = ref(false);
+const checked3 = ref(false);
+
+const code = ref(`
+<template>
+   <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+</template>
+
+<script setup>
+import ToggleButton from '@/plex/togglebutton';
+import { ref } from 'vue';
+
+const checked1 = ref(false);
+const checked2 = ref(false);
+const checked3 = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/togglebutton/index.vue b/apps/labs/pages/togglebutton/index.vue
new file mode 100644
index 000000000..614f2a7ad
--- /dev/null
+++ b/apps/labs/pages/togglebutton/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocComponent title="Vue ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
+import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
+import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
+import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
+import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
+import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'customized',
+                    label: 'Customized',
+                    component: CustomizedDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/togglebutton/index.vue b/apps/labs/plex/togglebutton/index.vue
new file mode 100644
index 000000000..9249021d0
--- /dev/null
+++ b/apps/labs/plex/togglebutton/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <ToggleButton unstyled :pt="theme">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </ToggleButton>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
+        border border-surface-100 dark:border-surface-950 rounded-md
+        bg-surface-100 dark:bg-surface-950
+        text-surface-500 dark:text-surface-400
+        p-checked:text-surface-700 dark:p-checked:text-surface-0
+        text-base font-medium
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        disabled:cursor-default
+        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500
+        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        transition-colors duration-200
+        p-1 p-small:text-sm p-large:text-lg
+    `,
+    content: `relative flex-auto inline-flex items-center justify-center gap-2 py-1 px-3 
+        rounded-md transition-colors duration-200
+        p-checked:bg-surface-0 dark:p-checked:bg-surface-800 p-checked:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]`,
+    icon: ``,
+    label: ``
+});
+</script>
diff --git a/packages/primevue/src/togglebutton/ToggleButton.vue b/packages/primevue/src/togglebutton/ToggleButton.vue
index 1a365a582..65788b8c4 100755
--- a/packages/primevue/src/togglebutton/ToggleButton.vue
+++ b/packages/primevue/src/togglebutton/ToggleButton.vue
@@ -13,8 +13,9 @@
         :aria-labelledby="ariaLabelledby"
         :data-p-checked="active"
         :data-p-disabled="disabled"
+        :data-p="dataP"
     >
-        <span :class="cx('content')" v-bind="getPTOptions('content')">
+        <span :class="cx('content')" v-bind="getPTOptions('content')" :data-p="dataP">
             <slot>
                 <slot name="icon" :value="d_value" :class="cx('icon')">
                     <span v-if="onIcon || offIcon" :class="[cx('icon'), d_value ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
@@ -26,6 +27,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { isNotEmpty } from '@primeuix/utils/object';
 import Ripple from 'primevue/ripple';
 import BaseToggleButton from './BaseToggleButton.vue';
@@ -65,6 +67,13 @@ export default {
         },
         label() {
             return this.hasLabel ? (this.d_value ? this.onLabel : this.offLabel) : '\u00A0';
+        },
+        dataP() {
+            return cn({
+                checked: this.active,
+                invalid: this.$invalid,
+                [this.size]: this.size
+            });
         }
     },
     directives: {

From e21ab4a480c5a3d6c7ade1fa36bcc7b8ce93032b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 2 Mar 2025 00:04:47 +0300
Subject: [PATCH 32/77] Implemented SelectButton

---
 apps/labs/assets/data/menu.json               |  4 ++
 apps/labs/doc/selectbutton/BasicDoc.vue       | 36 ++++++++++++
 apps/labs/doc/selectbutton/DisabledDoc.vue    | 45 +++++++++++++++
 apps/labs/doc/selectbutton/ImportDoc.vue      | 16 ++++++
 apps/labs/doc/selectbutton/InvalidDoc.vue     | 33 +++++++++++
 apps/labs/doc/selectbutton/MultipleDoc.vue    | 41 +++++++++++++
 apps/labs/doc/selectbutton/SizesDoc.vue       | 41 +++++++++++++
 apps/labs/doc/selectbutton/TemplateDoc.vue    | 51 +++++++++++++++++
 apps/labs/pages/selectbutton/index.vue        | 57 +++++++++++++++++++
 apps/labs/plex/selectbutton/index.vue         | 39 +++++++++++++
 apps/labs/plex/togglebutton/index.vue         |  1 +
 .../src/selectbutton/SelectButton.vue         |  8 ++-
 12 files changed, 371 insertions(+), 1 deletion(-)
 create mode 100644 apps/labs/doc/selectbutton/BasicDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/DisabledDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/ImportDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/InvalidDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/MultipleDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/SizesDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/TemplateDoc.vue
 create mode 100644 apps/labs/pages/selectbutton/index.vue
 create mode 100644 apps/labs/plex/selectbutton/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 0520cf11f..82522d674 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -30,6 +30,10 @@
                     "name": "InputText",
                     "to": "/inputtext"
                 },
+                {
+                    "name": "SelectButton",
+                    "to": "/selectbutton"
+                },
                 {
                     "name": "Slider",
                     "to": "/slider"
diff --git a/apps/labs/doc/selectbutton/BasicDoc.vue b/apps/labs/doc/selectbutton/BasicDoc.vue
new file mode 100644
index 000000000..339204562
--- /dev/null
+++ b/apps/labs/doc/selectbutton/BasicDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            SelectButton is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
+            Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref('One Way');
+const options = ref(['One-Way', 'Return']);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref('One Way');
+const options = ref(['One-Way', 'Return']);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/DisabledDoc.vue b/apps/labs/doc/selectbutton/DisabledDoc.vue
new file mode 100644
index 000000000..65d5ea1e1
--- /dev/null
+++ b/apps/labs/doc/selectbutton/DisabledDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the <i>optionDisabled</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SelectButton v-model="value1" :options="options1" disabled />
+        <SelectButton v-model="value2" :options="options2" optionDisabled="constant" optionLabel="name" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value1 = ref('One Way');
+const value2 = ref('One Way');
+const options1 = ref(['Off', 'On']);
+const options2 = ref([
+    { name: 'Option 1', value: 1, constant: false },
+    { name: 'Option 2', value: 2, constant: true }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SelectButton v-model="value1" :options="options1" disabled />
+        <SelectButton v-model="value2" :options="options2" optionDisabled="constant" optionLabel="name" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value1 = ref('One Way');
+const value2 = ref('One Way');
+const options1 = ref(['Off', 'On']);
+const options2 = ref([
+    { name: 'Option 1', value: 1, constant: false },
+    { name: 'Option 2', value: 2, constant: true }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/ImportDoc.vue b/apps/labs/doc/selectbutton/ImportDoc.vue
new file mode 100644
index 000000000..00010e8bf
--- /dev/null
+++ b/apps/labs/doc/selectbutton/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import SelectButton from '@/plex/selectbutton';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/InvalidDoc.vue b/apps/labs/doc/selectbutton/InvalidDoc.vue
new file mode 100644
index 000000000..cf87a6367
--- /dev/null
+++ b/apps/labs/doc/selectbutton/InvalidDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref(['One-Way', 'Return']);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref(['One-Way', 'Return']);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/MultipleDoc.vue b/apps/labs/doc/selectbutton/MultipleDoc.vue
new file mode 100644
index 000000000..137a0abe2
--- /dev/null
+++ b/apps/labs/doc/selectbutton/MultipleDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { name: 'Option 1', value: 1 },
+    { name: 'Option 2', value: 2 },
+    { name: 'Option 3', value: 3 }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { name: 'Option 1', value: 1 },
+    { name: 'Option 2', value: 2 },
+    { name: 'Option 3', value: 3 }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/SizesDoc.vue b/apps/labs/doc/selectbutton/SizesDoc.vue
new file mode 100644
index 000000000..a1dd39730
--- /dev/null
+++ b/apps/labs/doc/selectbutton/SizesDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref('Beginner');
+const value3 = ref('Expert');
+const options = ref(['Beginner', 'Expert']);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref('Beginner');
+const value3 = ref('Expert');
+const options = ref(['Beginner', 'Expert']);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/TemplateDoc.vue b/apps/labs/doc/selectbutton/TemplateDoc.vue
new file mode 100644
index 000000000..ddfae29a9
--- /dev/null
+++ b/apps/labs/doc/selectbutton/TemplateDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+            <template #option="slotProps">
+                <i :class="slotProps.option.icon"></i>
+            </template>
+        </SelectButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { icon: 'pi pi-align-left', value: 'Left' },
+    { icon: 'pi pi-align-right', value: 'Right' },
+    { icon: 'pi pi-align-center', value: 'Center' },
+    { icon: 'pi pi-align-justify', value: 'Justify' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+            <template #option="slotProps">
+                <i :class="slotProps.option.icon"></i>
+            </template>
+        </SelectButton>
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { icon: 'pi pi-align-left', value: 'Left' },
+    { icon: 'pi pi-align-right', value: 'Right' },
+    { icon: 'pi pi-align-center', value: 'Center' },
+    { icon: 'pi pi-align-justify', value: 'Justify' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/selectbutton/index.vue b/apps/labs/pages/selectbutton/index.vue
new file mode 100644
index 000000000..4decbb6d5
--- /dev/null
+++ b/apps/labs/pages/selectbutton/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocComponent title="Vue SelectButton Component" header="SelectButton" description="SelectButton is used to choose single or multiple items from a list using buttons." :componentDocs="docs" :apiDocs="['SelectButton']" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
+import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
+import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
+import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
+import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
+import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
+import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/selectbutton/index.vue b/apps/labs/plex/selectbutton/index.vue
new file mode 100644
index 000000000..a6851f39b
--- /dev/null
+++ b/apps/labs/plex/selectbutton/index.vue
@@ -0,0 +1,39 @@
+<template>
+    <SelectButton unstyled :pt="theme">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </SelectButton>
+</template>
+
+<script setup>
+import SelectButton from 'primevue/selectbutton';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `inline-flex select-none rounded-md
+        p-invalid:outline p-invalid:outline-offset-0 p-invalid:outline-red-400 dark:p-invalid:outline-red-300`,
+    pcToggleButton: {
+        root: `inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
+            border border-surface-100 dark:border-surface-950
+            rounded-none first:rounded-s-md last:rounded-e-md
+            bg-surface-100 dark:bg-surface-950
+            text-surface-500 dark:text-surface-400
+            p-checked:text-surface-700 dark:p-checked:text-surface-0
+            text-base font-medium
+            focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary focus-visible:relative focus-visible:z-10
+            disabled:cursor-default
+            disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500
+            disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400
+            p-invalid:border-red-400 dark:p-invalid:border-red-300
+            transition-colors duration-200
+            p-1 p-small:text-sm p-large:text-lg
+        `,
+        content: `relative flex-auto inline-flex items-center justify-center gap-2 py-1 px-3 
+            rounded-md transition-colors duration-200
+            p-checked:bg-surface-0 dark:p-checked:bg-surface-800 p-checked:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]`,
+        icon: ``,
+        label: ``
+    }
+});
+</script>
diff --git a/apps/labs/plex/togglebutton/index.vue b/apps/labs/plex/togglebutton/index.vue
index 9249021d0..b86f77ee2 100644
--- a/apps/labs/plex/togglebutton/index.vue
+++ b/apps/labs/plex/togglebutton/index.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script setup>
+import ToggleButton from 'primevue/togglebutton';
 import { ref } from 'vue';
 
 const theme = ref({
diff --git a/packages/primevue/src/selectbutton/SelectButton.vue b/packages/primevue/src/selectbutton/SelectButton.vue
index 648142fe8..da25e8ef9 100755
--- a/packages/primevue/src/selectbutton/SelectButton.vue
+++ b/packages/primevue/src/selectbutton/SelectButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
+    <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')" :data-p="dataP">
         <template v-for="(option, index) of options" :key="getOptionRenderKey(option)">
             <ToggleButton
                 :modelValue="isSelected(option)"
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { equals, resolveFieldData } from '@primeuix/utils/object';
 import Ripple from 'primevue/ripple';
 import ToggleButton from 'primevue/togglebutton';
@@ -93,6 +94,11 @@ export default {
     computed: {
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
+        },
+        dataP() {
+            return cn({
+                invalid: this.$invalid
+            });
         }
     },
     directives: {

From 18848a9803b29babb101217c35c74d57894e57e6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 2 Mar 2025 00:47:51 +0300
Subject: [PATCH 33/77] Implemented Checkbox

---
 apps/labs/assets/data/menu.json             |  4 ++
 apps/labs/doc/checkbox/BasicDoc.vue         | 31 +++++++++
 apps/labs/doc/checkbox/DisabledDoc.vue      | 35 +++++++++++
 apps/labs/doc/checkbox/DynamicDoc.vue       | 53 ++++++++++++++++
 apps/labs/doc/checkbox/FilledDoc.vue        | 31 +++++++++
 apps/labs/doc/checkbox/GroupDoc.vue         | 61 ++++++++++++++++++
 apps/labs/doc/checkbox/ImportDoc.vue        | 16 +++++
 apps/labs/doc/checkbox/IndeterminateDoc.vue | 31 +++++++++
 apps/labs/doc/checkbox/InvalidDoc.vue       | 31 +++++++++
 apps/labs/doc/checkbox/SizesDoc.vue         | 53 ++++++++++++++++
 apps/labs/pages/checkbox/index.vue          | 69 +++++++++++++++++++++
 apps/labs/plex/checkbox/index.vue           | 33 ++++++++++
 packages/primevue/src/checkbox/Checkbox.vue | 18 ++++--
 13 files changed, 462 insertions(+), 4 deletions(-)
 create mode 100644 apps/labs/doc/checkbox/BasicDoc.vue
 create mode 100644 apps/labs/doc/checkbox/DisabledDoc.vue
 create mode 100644 apps/labs/doc/checkbox/DynamicDoc.vue
 create mode 100644 apps/labs/doc/checkbox/FilledDoc.vue
 create mode 100644 apps/labs/doc/checkbox/GroupDoc.vue
 create mode 100644 apps/labs/doc/checkbox/ImportDoc.vue
 create mode 100644 apps/labs/doc/checkbox/IndeterminateDoc.vue
 create mode 100644 apps/labs/doc/checkbox/InvalidDoc.vue
 create mode 100644 apps/labs/doc/checkbox/SizesDoc.vue
 create mode 100644 apps/labs/pages/checkbox/index.vue
 create mode 100644 apps/labs/plex/checkbox/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 82522d674..3efd5d9b5 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -22,6 +22,10 @@
             "name": "Components",
             "icon": "pi pi-compass",
             "children": [
+                {
+                    "name": "Checkbox",
+                    "to": "/checkbox"
+                },
                 {
                     "name": "InputMask",
                     "to": "/inputmask"
diff --git a/apps/labs/doc/checkbox/BasicDoc.vue b/apps/labs/doc/checkbox/BasicDoc.vue
new file mode 100644
index 000000000..0fad6a730
--- /dev/null
+++ b/apps/labs/doc/checkbox/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Binary checkbox is used with the <i>v-model</i> for two-way value binding and the <i>binary</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary />
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/checkbox/DisabledDoc.vue b/apps/labs/doc/checkbox/DisabledDoc.vue
new file mode 100644
index 000000000..c98cefe69
--- /dev/null
+++ b/apps/labs/doc/checkbox/DisabledDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked1 = ref(false);
+const checked2 = ref(true);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked1 = ref(false);
+const checked2 = ref(true);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/checkbox/DynamicDoc.vue b/apps/labs/doc/checkbox/DynamicDoc.vue
new file mode 100644
index 000000000..359f50a77
--- /dev/null
+++ b/apps/labs/doc/checkbox/DynamicDoc.vue
@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Checkboxes can be generated using a list of values.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
+                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const selectedCategories = ref(['Marketing']);
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
+                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const selectedCategories = ref(['Marketing']);
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/checkbox/FilledDoc.vue b/apps/labs/doc/checkbox/FilledDoc.vue
new file mode 100644
index 000000000..8ee3d0e1b
--- /dev/null
+++ b/apps/labs/doc/checkbox/FilledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/checkbox/GroupDoc.vue b/apps/labs/doc/checkbox/GroupDoc.vue
new file mode 100644
index 000000000..13bc7d70d
--- /dev/null
+++ b/apps/labs/doc/checkbox/GroupDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple checkboxes can be grouped together.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
+            <label for="ingredient1"> Cheese </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
+            <label for="ingredient2"> Mushroom </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
+            <label for="ingredient3"> Pepper </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
+            <label for="ingredient4"> Onion </label>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const pizza = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
+            <label for="ingredient1"> Cheese </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
+            <label for="ingredient2"> Mushroom </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
+            <label for="ingredient3"> Pepper </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
+            <label for="ingredient4"> Onion </label>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const pizza = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/checkbox/ImportDoc.vue b/apps/labs/doc/checkbox/ImportDoc.vue
new file mode 100644
index 000000000..ddafadc7d
--- /dev/null
+++ b/apps/labs/doc/checkbox/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import Checkbox from '@/plex/checkbox';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/checkbox/IndeterminateDoc.vue b/apps/labs/doc/checkbox/IndeterminateDoc.vue
new file mode 100644
index 000000000..2d8d90f03
--- /dev/null
+++ b/apps/labs/doc/checkbox/IndeterminateDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>indeterminate</i> is present, the checkbox masks the actual value visually.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" indeterminate binary />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" indeterminate binary />
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/checkbox/InvalidDoc.vue b/apps/labs/doc/checkbox/InvalidDoc.vue
new file mode 100644
index 000000000..f484a687c
--- /dev/null
+++ b/apps/labs/doc/checkbox/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" :invalid="!checked" binary />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" :invalid="!checked" binary />
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/checkbox/SizesDoc.vue b/apps/labs/doc/checkbox/SizesDoc.vue
new file mode 100644
index 000000000..71d31eeb5
--- /dev/null
+++ b/apps/labs/doc/checkbox/SizesDoc.vue
@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Checkbox provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+            <label for="size_small" class="text-sm">Small</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+            <label for="size_normal">Normal</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+            <label for="size_large" class="text-lg">Large</label>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const size = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+            <label for="size_small" class="text-sm">Small</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+            <label for="size_normal">Normal</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+            <label for="size_large" class="text-lg">Large</label>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/plex/checkbox';
+import { ref } from 'vue';
+
+const size = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/checkbox/index.vue b/apps/labs/pages/checkbox/index.vue
new file mode 100644
index 000000000..d5ce02e8f
--- /dev/null
+++ b/apps/labs/pages/checkbox/index.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/checkbox/BasicDoc.vue';
+import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue';
+import DynamicDoc from '@/doc/checkbox/DynamicDoc.vue';
+import FilledDoc from '@/doc/checkbox/FilledDoc.vue';
+import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
+import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
+import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
+import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
+import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'indeterminate',
+                    label: 'Indeterminate',
+                    component: IndeterminateDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/checkbox/index.vue b/apps/labs/plex/checkbox/index.vue
new file mode 100644
index 000000000..4e522e80b
--- /dev/null
+++ b/apps/labs/plex/checkbox/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <Checkbox unstyled :pt="theme" />
+</template>
+
+<script setup>
+import Checkbox from 'primevue/checkbox';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `relative inline-flex select-none w-5 h-5 align-bottom
+        p-small:w-4 p-small:h-4
+        p-large:w-6 p-large:h-6`,
+    input: `peer cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
+        border border-transparent rounded-sm`,
+    box: `flex justify-center items-center rounded-sm w-5 h-5
+        border border-surface-300 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-950
+        text-surface-700 dark:text-surface-0
+        peer-enabled:peer-hover:border-surface-400 dark:peer-enabled:peer-hover:border-surface-600
+        p-checked:border-primary p-checked:bg-primary p-checked:text-primary-contrast
+        transition-colors duration-200
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        peer-focus-visible:outline peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
+        p-disabled:bg-surface-200 dark:p-disabled:bg-surface-400 p-disabled:border-surface-300 dark:p-disabled:border-surface-700 p-disabled:text-surface-700 dark:p-disabled:text-surface-400
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        p-small:w-4 p-small:h-4
+        p-large:w-6 p-large:h-6`,
+    icon: `text-sm w-[0.875rem] h-[0.875rem] transition-none
+        p-small:w-3 p-small:h-3
+        p-large:w-4 p-large:h-4`
+});
+</script>
diff --git a/packages/primevue/src/checkbox/Checkbox.vue b/packages/primevue/src/checkbox/Checkbox.vue
index ebeac0ba3..d7ad7bcec 100755
--- a/packages/primevue/src/checkbox/Checkbox.vue
+++ b/packages/primevue/src/checkbox/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-indeterminate="d_indeterminate || undefined" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-indeterminate="d_indeterminate || undefined" :data-p-disabled="disabled" :data-p="dataP">
         <input
             :id="inputId"
             type="checkbox"
@@ -21,16 +21,17 @@
             @change="onChange"
             v-bind="getPTOptions('input')"
         />
-        <div :class="cx('box')" v-bind="getPTOptions('box')">
+        <div :class="cx('box')" v-bind="getPTOptions('box')" :data-p="dataP">
             <slot name="icon" :checked="checked" :indeterminate="d_indeterminate" :class="cx('icon')">
-                <CheckIcon v-if="checked" :class="cx('icon')" v-bind="getPTOptions('icon')" />
-                <MinusIcon v-else-if="d_indeterminate" :class="cx('icon')" v-bind="getPTOptions('icon')" />
+                <CheckIcon v-if="checked" :class="cx('icon')" v-bind="getPTOptions('icon')" :data-p="dataP" />
+                <MinusIcon v-else-if="d_indeterminate" :class="cx('icon')" v-bind="getPTOptions('icon')" :data-p="dataP" />
             </slot>
         </div>
     </div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { contains, equals } from '@primeuix/utils/object';
 import CheckIcon from '@primevue/icons/check';
 import MinusIcon from '@primevue/icons/minus';
@@ -105,6 +106,15 @@ export default {
             const value = this.$pcCheckboxGroup ? this.$pcCheckboxGroup.d_value : this.d_value;
 
             return this.d_indeterminate ? false : this.binary ? value === this.trueValue : contains(this.value, value);
+        },
+        dataP() {
+            return cn({
+                invalid: this.$invalid,
+                checked: this.checked,
+                disabled: this.disabled,
+                filled: this.$variant === 'filled',
+                [this.size]: this.size
+            });
         }
     },
     components: {

From 53ce61a6372ab7ee5234695d6fa4fa2a5f03bf6e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 2 Mar 2025 01:12:11 +0300
Subject: [PATCH 34/77] Implemented RadioButton

---
 apps/labs/assets/data/menu.json               |  4 ++
 apps/labs/doc/radiobutton/DisabledDoc.vue     | 33 ++++++++++
 apps/labs/doc/radiobutton/DynamicDoc.vue      | 53 +++++++++++++++
 apps/labs/doc/radiobutton/FilledDoc.vue       | 31 +++++++++
 apps/labs/doc/radiobutton/GroupDoc.vue        | 65 +++++++++++++++++++
 apps/labs/doc/radiobutton/ImportDoc.vue       | 16 +++++
 apps/labs/doc/radiobutton/InvalidDoc.vue      | 31 +++++++++
 apps/labs/doc/radiobutton/SizesDoc.vue        | 57 ++++++++++++++++
 apps/labs/pages/radiobutton/index.vue         | 57 ++++++++++++++++
 apps/labs/plex/checkbox/index.vue             |  8 +--
 apps/labs/plex/radiobutton/index.vue          | 36 ++++++++++
 apps/showcase/doc/radiobutton/InvalidDoc.vue  |  4 +-
 .../primevue/src/radiobutton/RadioButton.vue  | 16 ++++-
 13 files changed, 402 insertions(+), 9 deletions(-)
 create mode 100644 apps/labs/doc/radiobutton/DisabledDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/DynamicDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/FilledDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/GroupDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/ImportDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/InvalidDoc.vue
 create mode 100644 apps/labs/doc/radiobutton/SizesDoc.vue
 create mode 100644 apps/labs/pages/radiobutton/index.vue
 create mode 100644 apps/labs/plex/radiobutton/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 3efd5d9b5..da40234a4 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -34,6 +34,10 @@
                     "name": "InputText",
                     "to": "/inputtext"
                 },
+                {
+                    "name": "RadioButton",
+                    "to": "/radiobutton"
+                },
                 {
                     "name": "SelectButton",
                     "to": "/selectbutton"
diff --git a/apps/labs/doc/radiobutton/DisabledDoc.vue b/apps/labs/doc/radiobutton/DisabledDoc.vue
new file mode 100644
index 000000000..500680946
--- /dev/null
+++ b/apps/labs/doc/radiobutton/DisabledDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-2">
+        <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const value = ref(2);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center gap-2">
+        <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
+    </div>
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const value = ref(2);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/radiobutton/DynamicDoc.vue b/apps/labs/doc/radiobutton/DynamicDoc.vue
new file mode 100644
index 000000000..9391f05cc
--- /dev/null
+++ b/apps/labs/doc/radiobutton/DynamicDoc.vue
@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>RadioButtons can be generated using a list of values.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
+                <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const selectedCategory = ref('Production');
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
+                <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const selectedCategory = ref('Production');
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/radiobutton/FilledDoc.vue b/apps/labs/doc/radiobutton/FilledDoc.vue
new file mode 100644
index 000000000..f9139a2a0
--- /dev/null
+++ b/apps/labs/doc/radiobutton/FilledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/radiobutton/GroupDoc.vue b/apps/labs/doc/radiobutton/GroupDoc.vue
new file mode 100644
index 000000000..b8abcca8f
--- /dev/null
+++ b/apps/labs/doc/radiobutton/GroupDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>RadioButton is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1">Cheese</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2">Mushroom</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3">Pepper</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4">Onion</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const ingredient = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1">Cheese</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2">Mushroom</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3">Pepper</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4">Onion</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const ingredient = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/radiobutton/ImportDoc.vue b/apps/labs/doc/radiobutton/ImportDoc.vue
new file mode 100644
index 000000000..754a255ae
--- /dev/null
+++ b/apps/labs/doc/radiobutton/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import RadioButton from '@/plex/radiobutton';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/radiobutton/InvalidDoc.vue b/apps/labs/doc/radiobutton/InvalidDoc.vue
new file mode 100644
index 000000000..da24a3dd3
--- /dev/null
+++ b/apps/labs/doc/radiobutton/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" :invalid="value === null" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <RadioButton v-model="value" value="1" :invalid="value === null" />
+    </div>
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const val = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/radiobutton/SizesDoc.vue b/apps/labs/doc/radiobutton/SizesDoc.vue
new file mode 100644
index 000000000..b68f85a5c
--- /dev/null
+++ b/apps/labs/doc/radiobutton/SizesDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>RadioButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+                <label for="size_small" class="text-sm">Small</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+                <label for="size_normal">Normal</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+                <label for="size_large" class="text-lg">Large</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const size = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+                <label for="size_small" class="text-sm">Small</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+                <label for="size_normal">Normal</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+                <label for="size_large" class="text-lg">Large</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import RadioButton from '@/plex/radiobutton';
+import { ref } from 'vue';
+
+const size = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/radiobutton/index.vue b/apps/labs/pages/radiobutton/index.vue
new file mode 100644
index 000000000..474df9c5c
--- /dev/null
+++ b/apps/labs/pages/radiobutton/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" />
+</template>
+
+<script>
+import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
+import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
+import FilledDoc from '@/doc/radiobutton/FilledDoc.vue';
+import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
+import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
+import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
+import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'group',
+                    label: 'Group',
+                    component: GroupDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/checkbox/index.vue b/apps/labs/plex/checkbox/index.vue
index 4e522e80b..20cddbb0e 100644
--- a/apps/labs/plex/checkbox/index.vue
+++ b/apps/labs/plex/checkbox/index.vue
@@ -17,13 +17,13 @@ const theme = ref({
         bg-surface-0 dark:bg-surface-950
         text-surface-700 dark:text-surface-0
         peer-enabled:peer-hover:border-surface-400 dark:peer-enabled:peer-hover:border-surface-600
-        p-checked:border-primary p-checked:bg-primary p-checked:text-primary-contrast
-        transition-colors duration-200
-        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-checked:border-primary p-checked:bg-primary p-checked:text-primary-contrast 
+        peer-enabled:peer-hover:p-checked:bg-primary-emphasis peer-enabled:peer-hover:p-checked:border-primary-emphasis
         peer-focus-visible:outline peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         p-disabled:bg-surface-200 dark:p-disabled:bg-surface-400 p-disabled:border-surface-300 dark:p-disabled:border-surface-700 p-disabled:text-surface-700 dark:p-disabled:text-surface-400
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] transition-colors duration-200
         p-small:w-4 p-small:h-4
         p-large:w-6 p-large:h-6`,
     icon: `text-sm w-[0.875rem] h-[0.875rem] transition-none
diff --git a/apps/labs/plex/radiobutton/index.vue b/apps/labs/plex/radiobutton/index.vue
new file mode 100644
index 000000000..ace71f9ce
--- /dev/null
+++ b/apps/labs/plex/radiobutton/index.vue
@@ -0,0 +1,36 @@
+<template>
+    <RadioButton unstyled :pt="theme" />
+</template>
+
+<script setup>
+import RadioButton from 'primevue/radiobutton';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `relative inline-flex select-none w-5 h-5
+        p-small:w-4 p-small:h-4
+        p-large:w-6 p-large:h-6`,
+    input: `peer cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
+        border border-transparent rounded-full`,
+    box: `flex justify-center items-center rounded-full
+        border border-surface-300 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-950
+        peer-enabled:peer-hover:border-surface-400 dark:peer-enabled:peer-hover:border-surface-600
+        p-checked:border-primary p-checked:bg-primary
+        peer-enabled:peer-hover:p-checked:bg-primary-emphasis peer-enabled:peer-hover:p-checked:border-primary-emphasis
+        peer-focus-visible:outline peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-disabled:bg-surface-200 dark:p-disabled:bg-surface-400 p-disabled:border-surface-300 dark:p-disabled:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] transition-colors duration-200
+        w-5 h-5
+        p-small:w-4 p-small:h-4
+        p-large:w-6 p-large:h-6`,
+    icon: `bg-transparent text-xs w-3 h-3 rounded-full
+        transition-all duration-200 backface-hidden scale-[0.1]
+        p-checked:bg-primary-contrast p-checked:visible p-checked:scale-100
+        p-disabled:bg-surface-700 dark:p-disabled:bg-surface-400
+        p-small:w-2 p-small:h-2
+        p-large:w-4 p-large:h-4`
+});
+</script>
diff --git a/apps/showcase/doc/radiobutton/InvalidDoc.vue b/apps/showcase/doc/radiobutton/InvalidDoc.vue
index ed365a93c..88755229e 100644
--- a/apps/showcase/doc/radiobutton/InvalidDoc.vue
+++ b/apps/showcase/doc/radiobutton/InvalidDoc.vue
@@ -28,7 +28,7 @@ export default {
 export default {
     data() {
         return {
-            val: null
+            value: null
         }
     }
 };
@@ -44,7 +44,7 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const val = ref(null);
+const value = ref(null);
 <\/script>
 `
             }
diff --git a/packages/primevue/src/radiobutton/RadioButton.vue b/packages/primevue/src/radiobutton/RadioButton.vue
index d13a39428..78a55a421 100755
--- a/packages/primevue/src/radiobutton/RadioButton.vue
+++ b/packages/primevue/src/radiobutton/RadioButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-disabled="disabled" :data-p="dataP">
         <input
             :id="inputId"
             type="radio"
@@ -19,13 +19,14 @@
             @change="onChange"
             v-bind="getPTOptions('input')"
         />
-        <div :class="cx('box')" v-bind="getPTOptions('box')">
-            <div :class="cx('icon')" v-bind="getPTOptions('icon')"></div>
+        <div :class="cx('box')" v-bind="getPTOptions('box')" :data-p="dataP">
+            <div :class="cx('icon')" v-bind="getPTOptions('icon')" :data-p="dataP"></div>
         </div>
     </div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { equals } from '@primeuix/utils/object';
 import BaseRadioButton from './BaseRadioButton.vue';
 
@@ -74,6 +75,15 @@ export default {
             const value = this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.d_value : this.d_value;
 
             return value != null && (this.binary ? !!value : equals(value, this.value));
+        },
+        dataP() {
+            return cn({
+                invalid: this.$invalid,
+                checked: this.checked,
+                disabled: this.disabled,
+                filled: this.$variant === 'filled',
+                [this.size]: this.size
+            });
         }
     }
 };

From b88f80b0f50bd2b2d68926a83861841dfbedc2c7 Mon Sep 17 00:00:00 2001
From: Jonathon <jonathon.winter@enco.net.au>
Date: Mon, 3 Mar 2025 15:38:01 +0800
Subject: [PATCH 35/77] make allowEmpty compatible with multiple on
 SelectButton

---
 .../src/selectbutton/SelectButton.vue         | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/primevue/src/selectbutton/SelectButton.vue b/packages/primevue/src/selectbutton/SelectButton.vue
index 648142fe8..7d38243bb 100755
--- a/packages/primevue/src/selectbutton/SelectButton.vue
+++ b/packages/primevue/src/selectbutton/SelectButton.vue
@@ -8,7 +8,7 @@
                 :disabled="disabled || isOptionDisabled(option)"
                 :unstyled="unstyled"
                 :size="size"
-                :readonly="!allowEmpty && isSelected(option)"
+                :readonly="isOptionReadonly(option)"
                 @change="onOptionSelect($event, option, index)"
                 :pt="ptm('pcToggleButton')"
             >
@@ -46,24 +46,34 @@ export default {
         isOptionDisabled(option) {
             return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
         },
+        isOptionReadonly(option) {
+            if (this.allowEmpty) return false;
+
+            let selected = this.isSelected(option);
+
+            if (this.multiple) {
+                return selected && this.d_value.length === 1;
+            } else {
+                return selected;
+            }
+        },
         onOptionSelect(event, option, index) {
-            if (this.disabled || this.isOptionDisabled(option)) {
+            if (this.disabled || this.isOptionDisabled(option) || this.isOptionReadonly(option)) {
                 return;
             }
 
             let selected = this.isSelected(option);
 
-            if (selected && !this.allowEmpty) {
-                return;
-            }
-
             let optionValue = this.getOptionValue(option);
             let newValue;
 
             if (this.multiple) {
-                if (selected) newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));
-                else newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];
+                if (selected) {
+                    newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));
+                    if (!this.allowEmpty && newValue.length === 0) return;
+                } else newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];
             } else {
+                if (selected && !this.allowEmpty) return;
                 newValue = selected ? null : optionValue;
             }
 

From 4f15aba565627afa37c41f81f31ce3854d442404 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 14:00:23 +0300
Subject: [PATCH 36/77] Implemented Rating

---
 apps/labs/assets/data/menu.json           |  4 ++
 apps/labs/doc/rating/BasicDoc.vue         | 31 ++++++++++++++
 apps/labs/doc/rating/DisabledDoc.vue      | 31 ++++++++++++++
 apps/labs/doc/rating/ImportDoc.vue        | 16 +++++++
 apps/labs/doc/rating/NumberOfStarsDoc.vue | 31 ++++++++++++++
 apps/labs/doc/rating/ReadOnlyDoc.vue      | 31 ++++++++++++++
 apps/labs/doc/rating/TemplateDoc.vue      | 45 ++++++++++++++++++++
 apps/labs/pages/rating/index.vue          | 51 +++++++++++++++++++++++
 apps/labs/plex/rating/index.vue           | 19 +++++++++
 apps/labs/tailwind.config.js              |  3 ++
 packages/primevue/src/rating/Rating.vue   | 19 ++++++++-
 11 files changed, 279 insertions(+), 2 deletions(-)
 create mode 100644 apps/labs/doc/rating/BasicDoc.vue
 create mode 100644 apps/labs/doc/rating/DisabledDoc.vue
 create mode 100644 apps/labs/doc/rating/ImportDoc.vue
 create mode 100644 apps/labs/doc/rating/NumberOfStarsDoc.vue
 create mode 100644 apps/labs/doc/rating/ReadOnlyDoc.vue
 create mode 100644 apps/labs/doc/rating/TemplateDoc.vue
 create mode 100644 apps/labs/pages/rating/index.vue
 create mode 100644 apps/labs/plex/rating/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index da40234a4..49dffbe85 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -38,6 +38,10 @@
                     "name": "RadioButton",
                     "to": "/radiobutton"
                 },
+                {
+                    "name": "Rating",
+                    "to": "/rating"
+                },
                 {
                     "name": "SelectButton",
                     "to": "/selectbutton"
diff --git a/apps/labs/doc/rating/BasicDoc.vue b/apps/labs/doc/rating/BasicDoc.vue
new file mode 100644
index 000000000..7919c9d65
--- /dev/null
+++ b/apps/labs/doc/rating/BasicDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Rating is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/rating/DisabledDoc.vue b/apps/labs/doc/rating/DisabledDoc.vue
new file mode 100644
index 000000000..dc267dcc8
--- /dev/null
+++ b/apps/labs/doc/rating/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(3);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" disabled />
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(3);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/rating/ImportDoc.vue b/apps/labs/doc/rating/ImportDoc.vue
new file mode 100644
index 000000000..c7526e53b
--- /dev/null
+++ b/apps/labs/doc/rating/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import Rating from '@/plex/rating';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/rating/NumberOfStarsDoc.vue b/apps/labs/doc/rating/NumberOfStarsDoc.vue
new file mode 100644
index 000000000..787a4e987
--- /dev/null
+++ b/apps/labs/doc/rating/NumberOfStarsDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Number of stars to display is defined with <i>stars</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" :stars="10" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" :stars="10" />
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/rating/ReadOnlyDoc.vue b/apps/labs/doc/rating/ReadOnlyDoc.vue
new file mode 100644
index 000000000..8f6bdab12
--- /dev/null
+++ b/apps/labs/doc/rating/ReadOnlyDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>readOnly</i> present, value cannot be edited.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value" readonly />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(3);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" readonly />
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(3);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/rating/TemplateDoc.vue b/apps/labs/doc/rating/TemplateDoc.vue
new file mode 100644
index 000000000..95c324610
--- /dev/null
+++ b/apps/labs/doc/rating/TemplateDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom icons are used to override the default icons with <i>onicon</i>, <i>officon</i> and <i>cancelicon</i> slots.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Rating v-model="value">
+            <template #onicon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
+            </template>
+            <template #officon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
+            </template>
+        </Rating>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value">
+            <template #onicon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
+            </template>
+            <template #officon>
+                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
+            </template>
+        </Rating>
+    </div>
+</template>
+
+<script setup>
+import Rating from '@/plex/rating';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/rating/index.vue b/apps/labs/pages/rating/index.vue
new file mode 100644
index 000000000..e85b6ec66
--- /dev/null
+++ b/apps/labs/pages/rating/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/rating/BasicDoc.vue';
+import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
+import ImportDoc from '@/doc/rating/ImportDoc.vue';
+import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
+import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
+import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'numberofstars',
+                    label: 'Number of Stars',
+                    component: NumberOfStarsDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'readonly',
+                    label: 'ReadOnly',
+                    component: ReadOnlyDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/rating/index.vue b/apps/labs/plex/rating/index.vue
new file mode 100644
index 000000000..b5e2609f1
--- /dev/null
+++ b/apps/labs/plex/rating/index.vue
@@ -0,0 +1,19 @@
+<template>
+    <Rating unstyled :pt="theme">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Rating>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `relative flex items-center gap-1 p-disabled:opacity-60 p-disabled:pointer-events-none p-readonly:pointer-events-none`,
+    option: `inline-flex items-center cursor-pointer rounded-full
+        p-focus-visible:outline p-focus-visible:outline-1 p-focus-visible:outline-offset-2 p-focus-visible:outline-primary`,
+    onIcon: `text-base w-4 h-4 transition-colors duration-200 text-primary`,
+    offIcon: `text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200`
+});
+</script>
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
index a3a608cf7..8b86ade7e 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/labs/tailwind.config.js
@@ -23,6 +23,9 @@ export default {
             addVariant('p-top', '&[data-p~="top"]');
             addVariant('p-bottom', '&[data-p~="bottom"]');
             addVariant('p-alternate', '&[data-p~="alternate"]');
+            addVariant('p-active', '&[data-p~="active"]');
+            addVariant('p-focus-visible', '&[data-p~="focus-visible"]');
+            addVariant('p-readonly', '&[data-p~="readonly"]');
         })
     ],
     theme: {
diff --git a/packages/primevue/src/rating/Rating.vue b/packages/primevue/src/rating/Rating.vue
index 84c99954a..0bc048ea7 100755
--- a/packages/primevue/src/rating/Rating.vue
+++ b/packages/primevue/src/rating/Rating.vue
@@ -1,7 +1,7 @@
 <template>
-    <div :class="cx('root')" v-bind="ptmi('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')" :data-p="dataP">
         <template v-for="value in stars" :key="value">
-            <div :class="cx('option', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('option', value)" :data-p-active="value <= d_value" :data-p-focused="value === focusedOptionIndex">
+            <div :class="cx('option', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('option', value)" :data-p-active="value <= d_value" :data-p-focused="value === focusedOptionIndex" :data-p="dataOption(value)">
                 <span class="p-hidden-accessible" v-bind="ptm('hiddenOptionInputContainer')" :data-p-hidden-accessible="true">
                     <input
                         type="radio"
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { focus, getFirstFocusableElement } from '@primeuix/utils/dom';
 import BanIcon from '@primevue/icons/ban';
 import StarIcon from '@primevue/icons/star';
@@ -92,11 +93,25 @@ export default {
         },
         starAriaLabel(value) {
             return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
+        },
+        dataOption(value) {
+            return cn({
+                readonly: this.readonly,
+                disabled: this.disabled,
+                active: value <= this.d_value,
+                'focus-visible': value === this.focusedOptionIndex && this.isFocusVisibleItem
+            });
         }
     },
     computed: {
         namex() {
             return this.name || `${this.$attrSelector}_name`;
+        },
+        dataP() {
+            return cn({
+                readonly: this.readonly,
+                disabled: this.disabled
+            });
         }
     },
     components: {

From 75dbcb8e50b06a0acfbc45d10371d3df176a2cf5 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 14:33:44 +0300
Subject: [PATCH 37/77] Implement ptViewMerge as utils

---
 apps/labs/package.json                |   1 +
 apps/labs/plex/checkbox/index.vue     |  11 +-
 apps/labs/plex/inputmask/index.vue    |  13 +-
 apps/labs/plex/inputtext/index.vue    |  13 +-
 apps/labs/plex/radiobutton/index.vue  |   9 +-
 apps/labs/plex/rating/index.vue       |  10 +-
 apps/labs/plex/selectbutton/index.vue |  11 +-
 apps/labs/plex/slider/index.vue       |  11 +-
 apps/labs/plex/textarea/index.vue     |  13 +-
 apps/labs/plex/timeline/index.vue     |  11 +-
 apps/labs/plex/togglebutton/index.vue |  11 +-
 apps/labs/plex/toggleswitch/index.vue |   9 +-
 apps/labs/plex/utils/index.js         |   9 +
 pnpm-lock.yaml                        | 977 +++++++++++++-------------
 14 files changed, 618 insertions(+), 491 deletions(-)
 create mode 100644 apps/labs/plex/utils/index.js

diff --git a/apps/labs/package.json b/apps/labs/package.json
index 4914b23d1..8a7a8f5ae 100644
--- a/apps/labs/package.json
+++ b/apps/labs/package.json
@@ -57,6 +57,7 @@
         "postcss": "^8.4.31",
         "sass": "catalog:app",
         "sass-loader": "catalog:app",
+        "tailwind-merge": "^3.0.2",
         "tailwindcss": "^3",
         "tailwindcss-primeui": "catalog:",
         "typedoc": "0.27.9",
diff --git a/apps/labs/plex/checkbox/index.vue b/apps/labs/plex/checkbox/index.vue
index 20cddbb0e..9273deccf 100644
--- a/apps/labs/plex/checkbox/index.vue
+++ b/apps/labs/plex/checkbox/index.vue
@@ -1,10 +1,17 @@
 <template>
-    <Checkbox unstyled :pt="theme" />
+    <Checkbox
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    />
 </template>
 
 <script setup>
 import Checkbox from 'primevue/checkbox';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `relative inline-flex select-none w-5 h-5 align-bottom
@@ -17,7 +24,7 @@ const theme = ref({
         bg-surface-0 dark:bg-surface-950
         text-surface-700 dark:text-surface-0
         peer-enabled:peer-hover:border-surface-400 dark:peer-enabled:peer-hover:border-surface-600
-        p-checked:border-primary p-checked:bg-primary p-checked:text-primary-contrast 
+        p-checked:border-primary p-checked:bg-primary p-checked:text-primary-contrast
         peer-enabled:peer-hover:p-checked:bg-primary-emphasis peer-enabled:peer-hover:p-checked:border-primary-emphasis
         peer-focus-visible:outline peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary
         p-invalid:border-red-400 dark:p-invalid:border-red-300
diff --git a/apps/labs/plex/inputmask/index.vue b/apps/labs/plex/inputmask/index.vue
index 77a350057..fa2dfcf50 100644
--- a/apps/labs/plex/inputmask/index.vue
+++ b/apps/labs/plex/inputmask/index.vue
@@ -1,10 +1,17 @@
 <template>
-    <InputMask unstyled :pt="theme" />
+    <InputMask
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    />
 </template>
 
 <script setup>
 import InputMask from 'primevue/inputmask';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `appearance-none rounded-md outline-none
@@ -12,10 +19,10 @@ const theme = ref({
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
         placeholder:text-surface-500 dark:placeholder:text-surface-400
-        border border-surface-300 dark:border-surface-700 
+        border border-surface-300 dark:border-surface-700
         enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
         enabled:focus:border-primary
-        disabled:bg-surface-200 disabled:text-surface-500 
+        disabled:bg-surface-200 disabled:text-surface-500
         dark:disabled:bg-surface-700 dark:disabled:text-surface-400
         p-invalid:border-red-400 dark:p-invalid:border-red-300
         p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
diff --git a/apps/labs/plex/inputtext/index.vue b/apps/labs/plex/inputtext/index.vue
index 86f3b398c..61b3bc6ee 100644
--- a/apps/labs/plex/inputtext/index.vue
+++ b/apps/labs/plex/inputtext/index.vue
@@ -1,10 +1,17 @@
 <template>
-    <InputText unstyled :pt="theme" />
+    <InputText
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    />
 </template>
 
 <script setup>
 import InputText from 'primevue/inputtext';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `appearance-none rounded-md outline-none
@@ -12,10 +19,10 @@ const theme = ref({
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
         placeholder:text-surface-500 dark:placeholder:text-surface-400
-        border border-surface-300 dark:border-surface-700 
+        border border-surface-300 dark:border-surface-700
         enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
         enabled:focus:border-primary
-        disabled:bg-surface-200 disabled:text-surface-500 
+        disabled:bg-surface-200 disabled:text-surface-500
         dark:disabled:bg-surface-700 dark:disabled:text-surface-400
         p-invalid:border-red-400 dark:p-invalid:border-red-300
         p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
diff --git a/apps/labs/plex/radiobutton/index.vue b/apps/labs/plex/radiobutton/index.vue
index ace71f9ce..6b025ea33 100644
--- a/apps/labs/plex/radiobutton/index.vue
+++ b/apps/labs/plex/radiobutton/index.vue
@@ -1,10 +1,17 @@
 <template>
-    <RadioButton unstyled :pt="theme" />
+    <RadioButton
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    />
 </template>
 
 <script setup>
 import RadioButton from 'primevue/radiobutton';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `relative inline-flex select-none w-5 h-5
diff --git a/apps/labs/plex/rating/index.vue b/apps/labs/plex/rating/index.vue
index b5e2609f1..3d3b3a690 100644
--- a/apps/labs/plex/rating/index.vue
+++ b/apps/labs/plex/rating/index.vue
@@ -1,5 +1,11 @@
 <template>
-    <Rating unstyled :pt="theme">
+    <Rating
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
         <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps ?? {}" />
         </template>
@@ -7,7 +13,9 @@
 </template>
 
 <script setup>
+import Rating from 'primevue/rating';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `relative flex items-center gap-1 p-disabled:opacity-60 p-disabled:pointer-events-none p-readonly:pointer-events-none`,
diff --git a/apps/labs/plex/selectbutton/index.vue b/apps/labs/plex/selectbutton/index.vue
index a6851f39b..370f1ed5f 100644
--- a/apps/labs/plex/selectbutton/index.vue
+++ b/apps/labs/plex/selectbutton/index.vue
@@ -1,5 +1,11 @@
 <template>
-    <SelectButton unstyled :pt="theme">
+    <SelectButton
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
         <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps ?? {}" />
         </template>
@@ -9,6 +15,7 @@
 <script setup>
 import SelectButton from 'primevue/selectbutton';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `inline-flex select-none rounded-md
@@ -29,7 +36,7 @@ const theme = ref({
             transition-colors duration-200
             p-1 p-small:text-sm p-large:text-lg
         `,
-        content: `relative flex-auto inline-flex items-center justify-center gap-2 py-1 px-3 
+        content: `relative flex-auto inline-flex items-center justify-center gap-2 py-1 px-3
             rounded-md transition-colors duration-200
             p-checked:bg-surface-0 dark:p-checked:bg-surface-800 p-checked:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]`,
         icon: ``,
diff --git a/apps/labs/plex/slider/index.vue b/apps/labs/plex/slider/index.vue
index 612d9a65f..39b6d6987 100644
--- a/apps/labs/plex/slider/index.vue
+++ b/apps/labs/plex/slider/index.vue
@@ -1,10 +1,17 @@
 <template>
-    <Slider unstyled :pt="theme" />
+    <Slider
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    />
 </template>
 
 <script setup>
 import Slider from 'primevue/slider';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const handleCommon = `cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px]
         bg-surface-200 dark:bg-surface-700 rounded-full
@@ -19,7 +26,7 @@ const handleCommon = `cursor-grab touch-none flex items-center justify-center h-
 
 const theme = ref({
     root: `relative bg-surface-200 dark:bg-surface-700 rounded-sm
-            p-horizontal:h-[3px] 
+            p-horizontal:h-[3px]
             p-vertical:min-h-[100px] p-vertical:w-[3px]`,
     range: `block bg-primary rounded-sm
             p-horizontal:top-0 p-horizontal:start-0 p-horizontal:h-full
diff --git a/apps/labs/plex/textarea/index.vue b/apps/labs/plex/textarea/index.vue
index 9e1dd4d5a..c7988f10a 100644
--- a/apps/labs/plex/textarea/index.vue
+++ b/apps/labs/plex/textarea/index.vue
@@ -1,10 +1,17 @@
 <template>
-    <Textarea unstyled :pt="theme" />
+    <Textarea
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    />
 </template>
 
 <script setup>
 import Textarea from 'primevue/textarea';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `appearance-none rounded-md outline-none
@@ -12,10 +19,10 @@ const theme = ref({
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
         placeholder:text-surface-500 dark:placeholder:text-surface-400
-        border border-surface-300 dark:border-surface-700 
+        border border-surface-300 dark:border-surface-700
         enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
         enabled:focus:border-primary
-        disabled:bg-surface-200 disabled:text-surface-500 
+        disabled:bg-surface-200 disabled:text-surface-500
         dark:disabled:bg-surface-700 dark:disabled:text-surface-400
         p-invalid:border-red-400 dark:p-invalid:border-red-300
         p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
diff --git a/apps/labs/plex/timeline/index.vue b/apps/labs/plex/timeline/index.vue
index 28d1f6874..a7398ada7 100644
--- a/apps/labs/plex/timeline/index.vue
+++ b/apps/labs/plex/timeline/index.vue
@@ -1,5 +1,11 @@
 <template>
-    <Timeline unstyled :pt="theme">
+    <Timeline
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
         <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps ?? {}" />
         </template>
@@ -9,6 +15,7 @@
 <script setup>
 import Timeline from 'primevue/timeline';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `flex flex-col flex-grow
@@ -20,7 +27,7 @@ const theme = ref({
         p-vertical:p-alternate:even:flex-row-reverse
         p-horizontal:p-alternate:even:flex-col-reverse`,
     eventOpposite: `flex-1
-        p-left:text-end p-right:text-start 
+        p-left:text-end p-right:text-start
         p-vertical:py-0 p-vertical:px-4 p-vertical:leading-none
         p-vertical:p-alternate:group-odd:text-end  p-vertical:p-alternate:group-even:text-start
         p-horizontal:py-4 p-horizontal:px-0`,
diff --git a/apps/labs/plex/togglebutton/index.vue b/apps/labs/plex/togglebutton/index.vue
index b86f77ee2..2181fdec9 100644
--- a/apps/labs/plex/togglebutton/index.vue
+++ b/apps/labs/plex/togglebutton/index.vue
@@ -1,5 +1,11 @@
 <template>
-    <ToggleButton unstyled :pt="theme">
+    <ToggleButton
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
         <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps ?? {}" />
         </template>
@@ -9,6 +15,7 @@
 <script setup>
 import ToggleButton from 'primevue/togglebutton';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
@@ -25,7 +32,7 @@ const theme = ref({
         transition-colors duration-200
         p-1 p-small:text-sm p-large:text-lg
     `,
-    content: `relative flex-auto inline-flex items-center justify-center gap-2 py-1 px-3 
+    content: `relative flex-auto inline-flex items-center justify-center gap-2 py-1 px-3
         rounded-md transition-colors duration-200
         p-checked:bg-surface-0 dark:p-checked:bg-surface-800 p-checked:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]`,
     icon: ``,
diff --git a/apps/labs/plex/toggleswitch/index.vue b/apps/labs/plex/toggleswitch/index.vue
index 50e22ac77..a7459e045 100644
--- a/apps/labs/plex/toggleswitch/index.vue
+++ b/apps/labs/plex/toggleswitch/index.vue
@@ -1,5 +1,11 @@
 <template>
-    <ToggleSwitch unstyled :pt="theme">
+    <ToggleSwitch
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
         <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps ?? {}" />
         </template>
@@ -9,6 +15,7 @@
 <script setup>
 import ToggleSwitch from 'primevue/toggleswitch';
 import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `inline-block w-10 h-6`,
diff --git a/apps/labs/plex/utils/index.js b/apps/labs/plex/utils/index.js
new file mode 100644
index 000000000..094aa085c
--- /dev/null
+++ b/apps/labs/plex/utils/index.js
@@ -0,0 +1,9 @@
+import { twMerge } from 'tailwind-merge';
+import { mergeProps } from 'vue';
+
+export const ptViewMerge = (globalPTProps = {}, selfPTProps = {}, datasets) => {
+    const { class: globalClass, ...globalRest } = globalPTProps;
+    const { class: selfClass, ...selfRest } = selfPTProps;
+
+    return mergeProps({ class: twMerge(globalClass, selfClass) }, globalRest, selfRest, datasets);
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee0c43890..559ba3e50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,16 +59,16 @@ importers:
         version: 7.26.9(@babel/core@7.26.9)
       '@rollup/plugin-alias':
         specifier: ^5.1.0
-        version: 5.1.1(rollup@4.34.8)
+        version: 5.1.1(rollup@4.34.9)
       '@rollup/plugin-babel':
         specifier: ^6.0.3
-        version: 6.0.4(@babel/core@7.26.9)(rollup@4.34.8)
+        version: 6.0.4(@babel/core@7.26.9)(rollup@4.34.9)
       '@rollup/plugin-node-resolve':
         specifier: ^15.2.3
-        version: 15.3.1(rollup@4.34.8)
+        version: 15.3.1(rollup@4.34.9)
       '@rollup/plugin-terser':
         specifier: ^0.4.4
-        version: 0.4.4(rollup@4.34.8)
+        version: 0.4.4(rollup@4.34.9)
       eslint:
         specifier: ^9.19.0
         version: 9.21.0(jiti@2.4.2)
@@ -77,7 +77,7 @@ importers:
         version: 10.0.2(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: ^5.2.3
-        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.2)
+        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3)
       eslint-plugin-vue:
         specifier: ^9.32.0
         version: 9.32.0(eslint@9.21.0(jiti@2.4.2))
@@ -89,7 +89,7 @@ importers:
         version: 9.15.6
       prettier:
         specifier: ^3.5.2
-        version: 3.5.2
+        version: 3.5.3
       rollup-plugin-postcss:
         specifier: ^4.0.0
         version: 4.0.2(postcss@8.5.3)
@@ -98,7 +98,7 @@ importers:
         version: 6.0.0(@vue/compiler-sfc@3.5.13)
       typescript:
         specifier: ^5.7.3
-        version: 5.7.3
+        version: 5.8.2
 
   apps/labs:
     dependencies:
@@ -134,7 +134,7 @@ importers:
         version: 2.0.2
       valibot:
         specifier: ^0.42.1
-        version: 0.42.1(typescript@5.7.3)
+        version: 0.42.1(typescript@5.8.2)
       yup:
         specifier: 1.4.0
         version: 1.4.0
@@ -153,7 +153,7 @@ importers:
         version: 19.0.0
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0)
       postcss:
         specifier: ^8.4.31
         version: 8.5.3
@@ -163,6 +163,9 @@ importers:
       sass-loader:
         specifier: catalog:app
         version: 8.0.2(sass@1.45.0)(webpack@5.98.0)
+      tailwind-merge:
+        specifier: ^3.0.2
+        version: 3.0.2
       tailwindcss:
         specifier: ^3
         version: 3.4.17
@@ -171,10 +174,10 @@ importers:
         version: 0.5.1(tailwindcss@3.4.17)
       typedoc:
         specifier: 0.27.9
-        version: 0.27.9(typescript@5.7.3)
+        version: 0.27.9(typescript@5.8.2)
       vite:
         specifier: catalog:app
-        version: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+        version: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   apps/showcase:
     dependencies:
@@ -210,7 +213,7 @@ importers:
         version: 2.0.2
       valibot:
         specifier: ^0.42.1
-        version: 0.42.1(typescript@5.7.3)
+        version: 0.42.1(typescript@5.8.2)
       yup:
         specifier: 1.4.0
         version: 1.4.0
@@ -229,7 +232,7 @@ importers:
         version: 19.0.0
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0)
       postcss:
         specifier: ^8.4.31
         version: 8.5.3
@@ -247,10 +250,10 @@ importers:
         version: 0.5.1(tailwindcss@3.4.17)
       typedoc:
         specifier: 0.27.9
-        version: 0.27.9(typescript@5.7.3)
+        version: 0.27.9(typescript@5.8.2)
       vite:
         specifier: catalog:app
-        version: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+        version: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   packages/auto-import-resolver:
     dependencies:
@@ -260,10 +263,10 @@ importers:
     devDependencies:
       tsup:
         specifier: ^8.1.0
-        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
+        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0)
       unplugin-vue-components:
         specifier: ^0.27.0
-        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vue@3.5.13(typescript@5.7.3))
+        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.8.2))
     publishDirectory: dist
 
   packages/core:
@@ -276,7 +279,7 @@ importers:
         version: 0.5.1
       vue:
         specifier: ^3.5.0
-        version: 3.5.13(typescript@5.7.3)
+        version: 3.5.13(typescript@5.8.2)
     publishDirectory: dist
 
   packages/forms:
@@ -306,7 +309,7 @@ importers:
     devDependencies:
       tsup:
         specifier: ^8.1.0
-        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
+        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0)
     publishDirectory: dist
 
   packages/nuxt-module:
@@ -334,41 +337,41 @@ importers:
         version: link:../primevue
       unplugin-vue-components:
         specifier: 28.4.1
-        version: 28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.7.3))
+        version: 28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.8.2))
     devDependencies:
       '@nuxt/devtools':
         specifier: ^2.1.0
-        version: 2.1.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        version: 2.1.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@nuxt/eslint-config':
         specifier: ^1.1.0
-        version: 1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+        version: 1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       '@nuxt/module-builder':
         specifier: ^0.8.4
-        version: 0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.2)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
+        version: 0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.3)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))
       '@nuxt/schema':
         specifier: ^3
         version: 3.15.4
       '@nuxt/test-utils':
         specifier: ^3
-        version: 3.17.0(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+        version: 3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       '@primeuix/themes':
         specifier: 'catalog:'
         version: 1.0.0
       '@types/node':
         specifier: latest
-        version: 22.13.5
+        version: 22.13.8
       changelogen:
         specifier: ^0.6.0
         version: 0.6.0(magicast@0.3.5)
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0)
       vitest:
         specifier: ^3.0.7
-        version: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
+        version: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
       vue-tsc:
         specifier: ~2.1.6
-        version: 2.1.10(typescript@5.7.3)
+        version: 2.1.10(typescript@5.8.2)
 
   packages/primevue:
     dependencies:
@@ -1758,8 +1761,8 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@nuxt/cli@3.22.2':
-    resolution: {integrity: sha512-Xtu3Loe3fVLvOE1/NC/SrE6Buu7Aj6qrnu3hewAfamUyZ7mVUBOsJ5ScUhofSK2L6muGPvS3R1PisuJMFbdexg==}
+  '@nuxt/cli@3.22.3':
+    resolution: {integrity: sha512-UsrTk/QOXxJNfRIi0bk8axPi4/pQxjzHsf6/ZhgmGC2jyrvLFPjwx1TvG/S8zVvjt0pazqQDKM9K3Diym3P4iQ==}
     engines: {node: ^16.10.0 || >=18.0.0}
     hasBin: true
 
@@ -1830,8 +1833,8 @@ packages:
     engines: {node: '>=18.12.0'}
     hasBin: true
 
-  '@nuxt/test-utils@3.17.0':
-    resolution: {integrity: sha512-NfKES2wGXxV8bNec30W0+rjegy7azFxXT7TJZ3SIcg6CxWQiO8Q+Xh743UnoqPw2WF03GNEndovf6AqwIRjNJQ==}
+  '@nuxt/test-utils@3.17.1':
+    resolution: {integrity: sha512-BRHf3TKONqbtAncet9dFw4+J8QT3clEWNsrE1FR9oIRJIRbH2xW9EjXfkF/i1VDzpu89m0IPIzLNuLZ3T+X8oA==}
     engines: {node: ^18.20.5 || ^20.9.0 || ^22.0.0 || >=23.0.0}
     peerDependencies:
       '@cucumber/cucumber': ^10.3.1 || ^11.0.0
@@ -2109,98 +2112,98 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.34.8':
-    resolution: {integrity: sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw==}
+  '@rollup/rollup-android-arm-eabi@4.34.9':
+    resolution: {integrity: sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.34.8':
-    resolution: {integrity: sha512-Gigjz7mNWaOL9wCggvoK3jEIUUbGul656opstjaUSGC3eT0BM7PofdAJaBfPFWWkXNVAXbaQtC99OCg4sJv70Q==}
+  '@rollup/rollup-android-arm64@4.34.9':
+    resolution: {integrity: sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.34.8':
-    resolution: {integrity: sha512-02rVdZ5tgdUNRxIUrFdcMBZQoaPMrxtwSb+/hOfBdqkatYHR3lZ2A2EGyHq2sGOd0Owk80oV3snlDASC24He3Q==}
+  '@rollup/rollup-darwin-arm64@4.34.9':
+    resolution: {integrity: sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.34.8':
-    resolution: {integrity: sha512-qIP/elwR/tq/dYRx3lgwK31jkZvMiD6qUtOycLhTzCvrjbZ3LjQnEM9rNhSGpbLXVJYQ3rq39A6Re0h9tU2ynw==}
+  '@rollup/rollup-darwin-x64@4.34.9':
+    resolution: {integrity: sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.34.8':
-    resolution: {integrity: sha512-IQNVXL9iY6NniYbTaOKdrlVP3XIqazBgJOVkddzJlqnCpRi/yAeSOa8PLcECFSQochzqApIOE1GHNu3pCz+BDA==}
+  '@rollup/rollup-freebsd-arm64@4.34.9':
+    resolution: {integrity: sha512-2lzjQPJbN5UnHm7bHIUKFMulGTQwdvOkouJDpPysJS+QFBGDJqcfh+CxxtG23Ik/9tEvnebQiylYoazFMAgrYw==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.34.8':
-    resolution: {integrity: sha512-TYXcHghgnCqYFiE3FT5QwXtOZqDj5GmaFNTNt3jNC+vh22dc/ukG2cG+pi75QO4kACohZzidsq7yKTKwq/Jq7Q==}
+  '@rollup/rollup-freebsd-x64@4.34.9':
+    resolution: {integrity: sha512-SLl0hi2Ah2H7xQYd6Qaiu01kFPzQ+hqvdYSoOtHYg/zCIFs6t8sV95kaoqjzjFwuYQLtOI0RZre/Ke0nPaQV+g==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.34.8':
-    resolution: {integrity: sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.9':
+    resolution: {integrity: sha512-88I+D3TeKItrw+Y/2ud4Tw0+3CxQ2kLgu3QvrogZ0OfkmX/DEppehus7L3TS2Q4lpB+hYyxhkQiYPJ6Mf5/dPg==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.34.8':
-    resolution: {integrity: sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==}
+  '@rollup/rollup-linux-arm-musleabihf@4.34.9':
+    resolution: {integrity: sha512-3qyfWljSFHi9zH0KgtEPG4cBXHDFhwD8kwg6xLfHQ0IWuH9crp005GfoUUh/6w9/FWGBwEHg3lxK1iHRN1MFlA==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.34.8':
-    resolution: {integrity: sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==}
+  '@rollup/rollup-linux-arm64-gnu@4.34.9':
+    resolution: {integrity: sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.34.8':
-    resolution: {integrity: sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==}
+  '@rollup/rollup-linux-arm64-musl@4.34.9':
+    resolution: {integrity: sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.34.8':
-    resolution: {integrity: sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.9':
+    resolution: {integrity: sha512-dRAgTfDsn0TE0HI6cmo13hemKpVHOEyeciGtvlBTkpx/F65kTvShtY/EVyZEIfxFkV5JJTuQ9tP5HGBS0hfxIg==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
-    resolution: {integrity: sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.9':
+    resolution: {integrity: sha512-PHcNOAEhkoMSQtMf+rJofwisZqaU8iQ8EaSps58f5HYll9EAY5BSErCZ8qBDMVbq88h4UxaNPlbrKqfWP8RfJA==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.34.8':
-    resolution: {integrity: sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==}
+  '@rollup/rollup-linux-riscv64-gnu@4.34.9':
+    resolution: {integrity: sha512-Z2i0Uy5G96KBYKjeQFKbbsB54xFOL5/y1P5wNBsbXB8yE+At3oh0DVMjQVzCJRJSfReiB2tX8T6HUFZ2k8iaKg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.34.8':
-    resolution: {integrity: sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==}
+  '@rollup/rollup-linux-s390x-gnu@4.34.9':
+    resolution: {integrity: sha512-U+5SwTMoeYXoDzJX5dhDTxRltSrIax8KWwfaaYcynuJw8mT33W7oOgz0a+AaXtGuvhzTr2tVKh5UO8GVANTxyQ==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.34.8':
-    resolution: {integrity: sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==}
+  '@rollup/rollup-linux-x64-gnu@4.34.9':
+    resolution: {integrity: sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.34.8':
-    resolution: {integrity: sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==}
+  '@rollup/rollup-linux-x64-musl@4.34.9':
+    resolution: {integrity: sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.34.8':
-    resolution: {integrity: sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.34.9':
+    resolution: {integrity: sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.34.8':
-    resolution: {integrity: sha512-r3NRQrXkHr4uWy5TOjTpTYojR9XmF0j/RYgKCef+Ag46FWUTltm5ziticv8LdNsDMehjJ543x/+TJAek/xBA2w==}
+  '@rollup/rollup-win32-ia32-msvc@4.34.9':
+    resolution: {integrity: sha512-KB48mPtaoHy1AwDNkAJfHXvHp24H0ryZog28spEs0V48l3H1fr4i37tiyHsgKZJnCmvxsbATdZGBpbmxTE3a9w==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.34.8':
-    resolution: {integrity: sha512-U0FaE5O1BCpZSeE6gBl3c5ObhePQSfk9vDRToMmTkbhCOgW4jqvtS5LGyQ76L1fH8sM0keRp4uDTsbjiUyjk0g==}
+  '@rollup/rollup-win32-x64-msvc@4.34.9':
+    resolution: {integrity: sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==}
     cpu: [x64]
     os: [win32]
 
@@ -2227,8 +2230,8 @@ packages:
   '@stackblitz/sdk@1.11.0':
     resolution: {integrity: sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==}
 
-  '@stylistic/eslint-plugin@4.1.0':
-    resolution: {integrity: sha512-bytbL7qiici7yPyEiId0fGPK9kjQbzcPMj2aftPfzTCyJ/CRSKdtI+iVjM0LSGzGxfunflI+MDDU9vyIIeIpoQ==}
+  '@stylistic/eslint-plugin@4.2.0':
+    resolution: {integrity: sha512-8hXezgz7jexGHdo5WN6JBEIPHCSFyyU4vgbxevu4YLVS5vl+sxqAAGyXSzfNDyR6xMNSH5H1x67nsXcYMOHtZA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=9.0.0'
@@ -2268,8 +2271,8 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/node@22.13.5':
-    resolution: {integrity: sha512-+lTU0PxZXn0Dr1NBtC7Y8cR21AJr87dLLU953CWA6pMxxv/UDc7jYAY90upcrie1nRcD6XNG5HOYEDtgW5TxAg==}
+  '@types/node@22.13.8':
+    resolution: {integrity: sha512-G3EfaZS+iOGYWLLRCEAXdWK9my08oHNZ+FHluRiggIYJPOXzhOiDgpVCUHaUvyIC5/fj7C/p637jdzC666AOKQ==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -2671,8 +2674,8 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  ansis@3.16.0:
-    resolution: {integrity: sha512-sU7d/tfZiYrsIAXbdL/CNZld5bCkruzwT5KmqmadCJYxuLxHAOBjidxD5+iLmN/6xEfjcQq1l7OpsiCBlc4LzA==}
+  ansis@3.17.0:
+    resolution: {integrity: sha512-0qWUglt9JEqLFr3w1I1pbrChn1grhaiAR2ocX1PP/flRmxgtwTzPFFFnfIlD6aMOLQZgSuCRlidD70lvx8yhzg==}
     engines: {node: '>=14'}
 
   any-promise@1.3.0:
@@ -2843,6 +2846,14 @@ packages:
       magicast:
         optional: true
 
+  c12@3.0.2:
+    resolution: {integrity: sha512-6Tzk1/TNeI3WBPpK0j/Ss4+gPj3PUJYbWl/MWDJBThFvwNGNkXtd7Cz8BJtD4aRwoGHtzQD0SnxamgUiBH0/Nw==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -3028,8 +3039,8 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
-  core-js-compat@3.40.0:
-    resolution: {integrity: sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==}
+  core-js-compat@3.41.0:
+    resolution: {integrity: sha512-RFsU9LySVue9RTwdDVX/T0e2Y6jRYWXERKElIjpuEOEnxaXffI0X7RUwVzfYLfzuLXSNJDYoRYUAmRUcyln20A==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -3631,13 +3642,16 @@ packages:
     resolution: {integrity: sha512-EHlpxMCpHWSAh1dgS6bVeoLAXGnJNdR93aabr4QCGbzOM73o5XmRfM/e5FUqsw3aagP8S8XEWUWFAxnRBnAF0Q==}
     engines: {node: ^18.19.0 || >=20.5.0}
 
-  expect-type@1.1.0:
-    resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
+  expect-type@1.2.0:
+    resolution: {integrity: sha512-80F22aiJ3GLyVnS/B3HzgR6RelZVumzj9jkL0Rhz4h0xYbNW9PjlQz5h3J/SShErbXBc295vseR4/MIbVmUbeA==}
     engines: {node: '>=12.0.0'}
 
   exsolve@0.4.4:
     resolution: {integrity: sha512-74RiT9i1G0eyFyE9n5f6mdX8+AicZFnhJ0CHB9VrkIl3Sy8vmW49ODbpwevdLswST7fhp3jvfPzD4DArTfjnsA==}
 
+  exsolve@1.0.1:
+    resolution: {integrity: sha512-Smf0iQtkQVJLaph8r/qS8C8SWfQkaq9Q/dFcD44MLbJj6DNhlWefVuaS21SjfqOsBbjVlKtbCj6L9ekXK6EZUg==}
+
   externality@1.0.2:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
 
@@ -3699,8 +3713,8 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  find-up-simple@1.0.0:
-    resolution: {integrity: sha512-q7Us7kcjj2VMePAa02hDAF6d+MzsdsAWEwYyOpwUtlerRBkOEPBCRZrAV4XfcSN8fHAgaD0hP7miwoay6DCprw==}
+  find-up-simple@1.0.1:
+    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
     engines: {node: '>=18'}
 
   find-up@5.0.0:
@@ -4640,8 +4654,8 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  nuxi@3.22.2:
-    resolution: {integrity: sha512-QaxSecieGbh6aTrKC6czb73Lgb/OyV4Y+nXmrS1oAD/e2o2vWQ20uv9fSCBuHjwnAMADLdbKuhAK9EmJpLi0Ag==}
+  nuxi@3.22.3:
+    resolution: {integrity: sha512-JgjiTEu+PUErx+W3x7YWNg4Ii/VrbUzOF2eMZvkrcfqQqU6qli/Tb/XfVynzzVRXJe43/BpE9lNm3Ymxyh3pDg==}
     engines: {node: ^16.10.0 || >=18.0.0}
     hasBin: true
 
@@ -4687,11 +4701,11 @@ packages:
   ofetch@1.4.1:
     resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
 
-  ohash@1.1.4:
-    resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==}
+  ohash@1.1.5:
+    resolution: {integrity: sha512-AtXrG/lMFjPBWj3uhWYFwYVZQqutPYRsv6nnPLTipnC+gJuMFc+WFzf/jx+94Ebray1vxfQfEFDtpIpppOe4xQ==}
 
-  ohash@2.0.6:
-    resolution: {integrity: sha512-y3n0xHnH5RhTNlu5KvoH1cPKNS3ewteDWjvUXkW5+X/iYYe914zGbixMCr//jEjwn/IgMjfOwDPIpDJ0+ld3tw==}
+  ohash@2.0.9:
+    resolution: {integrity: sha512-ljz2sybhXrRpBW9LleuJPP9uxbMKW8qxFz9lLOHW2QEel78rJ1sUgaX2cBNDt49w+JleNSkhYkVOCx6RgkKn0Q==}
 
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
@@ -4749,8 +4763,8 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
-  package-manager-detector@0.2.10:
-    resolution: {integrity: sha512-1wlNZK7HW+UE3eGCcMv3hDaYokhspuIeH6enXSnCL1eEZSVDsy/dYwo/4CczhUsrKLA1SSXB+qce8Glw5DEVtw==}
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
 
   packrup@0.1.2:
     resolution: {integrity: sha512-ZcKU7zrr5GlonoS9cxxrb5HVswGnyj6jQvwFBa6p5VFw7G71VAHcUKL5wyZSU/ECtPM/9gacWxy2KFQKt1gMNA==}
@@ -4868,8 +4882,8 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  pkg-types@2.0.0:
-    resolution: {integrity: sha512-W+831FxieJW1CIAh3JMmHaMhK/SiSeyCqbSWqLjjvbjaPDDY0cRkspIfOx4vLkFNgfxnzSxxGFUiMHMm6QpvYA==}
+  pkg-types@2.0.1:
+    resolution: {integrity: sha512-LdDk/hlFeVBoEZqlkJ2bsxwq5fjKQg7i422zu78IC16CSR2XBe7kYxxBx0mkU8kLX6nh50Zp80lZHveKnsHTpQ==}
 
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
@@ -5307,8 +5321,8 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preact@10.26.3:
-    resolution: {integrity: sha512-OJCfNTdttkOTCbTN+gCnXn/woDqz1dIjvP+gdCoYGP2kKuX6w79FAP8qgY/r7jgAunvqHVVmEOKzKOFWzrXZdw==}
+  preact@10.26.4:
+    resolution: {integrity: sha512-KJhO7LBFTjP71d83trW+Ilnjbo+ySsaAgCfXOXUlmGzJ4ygYPWmysm77yg4emwfmoz3b22yvH5IsVFHbhUaH5w==}
 
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -5318,8 +5332,8 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier@3.5.2:
-    resolution: {integrity: sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==}
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -5373,8 +5387,8 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  quansync@0.2.6:
-    resolution: {integrity: sha512-u3TuxVTuJtkTxKGk5oZ7K2/o+l0/cC6J8SOyaaSnrnroqvcVy7xBxtvBUyd+Xa8cGoCr87XmQj4NR6W+zbqH8w==}
+  quansync@0.2.8:
+    resolution: {integrity: sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA==}
 
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
@@ -5556,8 +5570,8 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rollup@4.34.8:
-    resolution: {integrity: sha512-489gTVMzAYdiZHFVA/ig/iYFllCcWFHMvUHI1rpFmkoUtRlQxqh6/yiNqnYibjMZ2b/+FUQwldG+aLsEt6bglQ==}
+  rollup@4.34.9:
+    resolution: {integrity: sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -5885,6 +5899,9 @@ packages:
     resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
     engines: {node: '>=18'}
 
+  tailwind-merge@3.0.2:
+    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
+
   tailwindcss-primeui@0.5.1:
     resolution: {integrity: sha512-zNqp62N4c+pwBVkVJd8ByvujepVKAMxZBdYy5MzIDi/Zb2p8wTGo4RrQaqLQazm3teOWVmttzZYPH/GlOB3lgw==}
     peerDependencies:
@@ -6075,8 +6092,8 @@ packages:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
 
-  type-fest@4.35.0:
-    resolution: {integrity: sha512-2/AwEFQDFEy30iOLjrvHDIH7e4HEWH+f1Yl1bI5XMqzuoCUqwYCdxachgsgv0og/JdVZUhbfjcJAoHj5L1753A==}
+  type-fest@4.36.0:
+    resolution: {integrity: sha512-3T/PUdKTCnkUmhQU6FFJEHsLwadsRegktX3TNHk+2JJB9HlA8gp1/VXblXVDI93kSnXF2rdPx0GMbHtJIV2LPg==}
     engines: {node: '>=16'}
 
   type-level-regexp@0.1.17:
@@ -6089,8 +6106,8 @@ packages:
     peerDependencies:
       typescript: 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x
 
-  typescript@5.7.3:
-    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+  typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -6602,8 +6619,8 @@ packages:
   vue-bundle-renderer@2.1.1:
     resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
 
-  vue-component-type-helpers@2.2.4:
-    resolution: {integrity: sha512-F66p0XLbAu92BRz6kakHyAcaUSF7HWpWX/THCqL0TxySSj7z/nok5UUMohfNkkCm1pZtawsdzoJ4p1cjNqCx0Q==}
+  vue-component-type-helpers@2.2.8:
+    resolution: {integrity: sha512-4bjIsC284coDO9om4HPA62M7wfsTvcmZyzdfR0aUlFXqq4tXxM1APyXpNVxPC8QazKw9OhmZNHBVDA6ODaZsrA==}
 
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
@@ -6923,7 +6940,7 @@ snapshots:
 
   '@antfu/install-pkg@1.0.0':
     dependencies:
-      package-manager-detector: 0.2.10
+      package-manager-detector: 0.2.11
       tinyexec: 0.3.2
 
   '@antfu/utils@0.7.10': {}
@@ -7568,7 +7585,7 @@ snapshots:
       babel-plugin-polyfill-corejs2: 0.4.12(@babel/core@7.26.9)
       babel-plugin-polyfill-corejs3: 0.11.1(@babel/core@7.26.9)
       babel-plugin-polyfill-regenerator: 0.6.3(@babel/core@7.26.9)
-      core-js-compat: 3.40.0
+      core-js-compat: 3.41.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -7629,7 +7646,7 @@ snapshots:
   '@docsearch/js@3.9.0(@algolia/client-search@5.20.3)(search-insights@2.17.3)':
     dependencies:
       '@docsearch/react': 3.9.0(@algolia/client-search@5.20.3)(search-insights@2.17.3)
-      preact: 10.26.3
+      preact: 10.26.4
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -8085,26 +8102,26 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
-  '@nuxt/cli@3.22.2(magicast@0.3.5)':
+  '@nuxt/cli@3.22.3(magicast@0.3.5)':
     dependencies:
-      c12: 2.0.4(magicast@0.3.5)
+      c12: 3.0.2(magicast@0.3.5)
       chokidar: 4.0.3
       citty: 0.1.6
       clipboardy: 4.0.0
       consola: 3.4.0
       defu: 6.1.4
       fuse.js: 7.1.0
-      giget: 1.2.5
+      giget: 2.0.0
       h3: 1.15.1
       httpxy: 0.1.7
       jiti: 2.4.2
       listhen: 1.9.0
-      nypm: 0.5.4
+      nypm: 0.6.0
       ofetch: 1.4.1
-      ohash: 2.0.6
+      ohash: 2.0.9
       pathe: 2.0.3
       perfect-debounce: 1.0.0
-      pkg-types: 1.3.1
+      pkg-types: 2.0.1
       scule: 1.3.0
       semver: 7.7.1
       std-env: 3.8.0
@@ -8115,32 +8132,32 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 7.2.0
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 7.2.0
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/devtools-kit@2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 9.5.2
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
@@ -8165,17 +8182,17 @@ snapshots:
       execa: 9.5.2
       magicast: 0.3.5
       pathe: 2.0.3
-      pkg-types: 2.0.0
+      pkg-types: 2.0.1
       prompts: 2.4.2
       semver: 7.7.1
 
-  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
@@ -8193,7 +8210,7 @@ snapshots:
       local-pkg: 0.5.1
       magicast: 0.3.5
       nypm: 0.4.1
-      ohash: 1.1.4
+      ohash: 1.1.5
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -8204,9 +8221,9 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.10
       unimport: 3.14.6(rollup@3.29.5)
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       which: 3.0.1
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8216,13 +8233,13 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/devtools@1.7.0(rollup@4.34.8)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
@@ -8240,7 +8257,7 @@ snapshots:
       local-pkg: 0.5.1
       magicast: 0.3.5
       nypm: 0.4.1
-      ohash: 1.1.4
+      ohash: 1.1.5
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -8250,10 +8267,10 @@ snapshots:
       simple-git: 3.27.0
       sirv: 3.0.1
       tinyglobby: 0.2.10
-      unimport: 3.14.6(rollup@4.34.8)
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      unimport: 3.14.6(rollup@4.34.9)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       which: 3.0.1
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8263,12 +8280,12 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/devtools@2.1.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@2.1.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
-      '@nuxt/devtools-kit': 2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-kit': 2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 2.1.1
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@vue/devtools-kit': 7.7.2
       birpc: 2.2.0
       consola: 3.4.0
@@ -8284,18 +8301,18 @@ snapshots:
       local-pkg: 1.1.0
       magicast: 0.3.5
       nypm: 0.6.0
-      ohash: 2.0.6
+      ohash: 2.0.9
       pathe: 2.0.3
       perfect-debounce: 1.0.0
-      pkg-types: 2.0.0
+      pkg-types: 2.0.1
       semver: 7.7.1
       simple-git: 3.27.0
       sirv: 3.0.1
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.12
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       which: 5.0.0
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8304,20 +8321,20 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@nuxt/eslint-config@1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@clack/prompts': 0.10.0
       '@eslint/js': 9.21.0
-      '@nuxt/eslint-plugin': 1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@stylistic/eslint-plugin': 4.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/eslint-plugin': 8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@nuxt/eslint-plugin': 1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@stylistic/eslint-plugin': 4.2.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/eslint-plugin': 8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2))(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       eslint: 9.21.0(jiti@2.4.2)
       eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@2.4.2))
       eslint-flat-config-utils: 2.0.1
       eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@2.4.2))
-      eslint-plugin-import-x: 4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      eslint-plugin-import-x: 4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       eslint-plugin-jsdoc: 50.6.3(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-regexp: 2.7.0(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-unicorn: 57.0.0(eslint@9.21.0(jiti@2.4.2))
@@ -8332,10 +8349,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@nuxt/eslint-plugin@1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       eslint: 9.21.0(jiti@2.4.2)
     transitivePeerDependencies:
       - supports-color
@@ -8353,7 +8370,7 @@ snapshots:
       klona: 2.0.6
       knitwork: 1.2.0
       mlly: 1.7.4
-      ohash: 1.1.4
+      ohash: 1.1.5
       pathe: 2.0.3
       pkg-types: 1.3.1
       scule: 1.3.0
@@ -8367,7 +8384,7 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.2)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))':
+  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.3)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       citty: 0.1.6
@@ -8375,11 +8392,11 @@ snapshots:
       defu: 6.1.4
       magic-regexp: 0.8.0
       mlly: 1.7.4
-      nuxi: 3.22.2
+      nuxi: 3.22.3
       pathe: 1.1.2
       pkg-types: 1.3.1
-      tsconfck: 3.1.5(typescript@5.7.3)
-      unbuild: 2.0.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
+      tsconfck: 3.1.5(typescript@5.8.2)
+      unbuild: 2.0.0(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -8403,7 +8420,7 @@ snapshots:
       git-url-parse: 16.0.1
       is-docker: 3.0.0
       ofetch: 1.4.1
-      package-manager-detector: 0.2.10
+      package-manager-detector: 0.2.11
       parse-git-config: 3.0.0
       pathe: 2.0.3
       rc9: 2.1.2
@@ -8412,11 +8429,11 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/test-utils@3.17.0(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
+  '@nuxt/test-utils@3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
-      c12: 2.0.4(magicast@0.3.5)
+      c12: 3.0.2(magicast@0.3.5)
       consola: 3.4.0
       defu: 6.1.4
       destr: 2.0.3
@@ -8437,12 +8454,12 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
-      vue: 3.5.13(typescript@5.7.3)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vitest-environment-nuxt: 1.0.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      vue: 3.5.13(typescript@5.8.2)
     optionalDependencies:
       '@vue/test-utils': 2.4.6
-      vitest: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
+      vitest: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -8459,12 +8476,12 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@3.29.5)
-      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       autoprefixer: 10.4.20(postcss@8.5.3)
       consola: 3.4.0
       cssnano: 7.0.6(postcss@8.5.3)
@@ -8478,7 +8495,7 @@ snapshots:
       knitwork: 1.2.0
       magic-string: 0.30.17
       mlly: 1.7.4
-      ohash: 1.1.4
+      ohash: 1.1.5
       pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -8488,10 +8505,10 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
-      vue: 3.5.13(typescript@5.7.3)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))
+      vue: 3.5.13(typescript@5.8.2)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
       - '@biomejs/biome'
@@ -8518,12 +8535,12 @@ snapshots:
       - vue-tsc
       - yaml
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.34.8)
-      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@rollup/plugin-replace': 6.0.2(rollup@4.34.9)
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       autoprefixer: 10.4.20(postcss@8.5.3)
       consola: 3.4.0
       cssnano: 7.0.6(postcss@8.5.3)
@@ -8537,20 +8554,20 @@ snapshots:
       knitwork: 1.2.0
       magic-string: 0.30.17
       mlly: 1.7.4
-      ohash: 1.1.4
+      ohash: 1.1.5
       pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
       postcss: 8.5.3
-      rollup-plugin-visualizer: 5.14.0(rollup@4.34.8)
+      rollup-plugin-visualizer: 5.14.0(rollup@4.34.9)
       std-env: 3.8.0
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
-      vue: 3.5.13(typescript@5.7.3)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))
+      vue: 3.5.13(typescript@5.8.2)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
       - '@biomejs/biome'
@@ -8698,17 +8715,17 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.34.8)':
+  '@rollup/plugin-alias@5.1.1(rollup@4.34.9)':
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
-  '@rollup/plugin-babel@6.0.4(@babel/core@7.26.9)(rollup@4.34.8)':
+  '@rollup/plugin-babel@6.0.4(@babel/core@7.26.9)(rollup@4.34.9)':
     dependencies:
       '@babel/core': 7.26.9
       '@babel/helper-module-imports': 7.25.9
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
     transitivePeerDependencies:
       - supports-color
 
@@ -8723,9 +8740,9 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-commonjs@28.0.2(rollup@4.34.8)':
+  '@rollup/plugin-commonjs@28.0.2(rollup@4.34.9)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.4.3(picomatch@4.0.2)
@@ -8733,15 +8750,15 @@ snapshots:
       magic-string: 0.30.17
       picomatch: 4.0.2
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
-  '@rollup/plugin-inject@5.0.5(rollup@4.34.8)':
+  '@rollup/plugin-inject@5.0.5(rollup@4.34.9)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       estree-walker: 2.0.2
       magic-string: 0.30.17
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
   '@rollup/plugin-json@6.1.0(rollup@3.29.5)':
     dependencies:
@@ -8749,11 +8766,11 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-json@6.1.0(rollup@4.34.8)':
+  '@rollup/plugin-json@6.1.0(rollup@4.34.9)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
   '@rollup/plugin-node-resolve@15.3.1(rollup@3.29.5)':
     dependencies:
@@ -8765,15 +8782,15 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-node-resolve@15.3.1(rollup@4.34.8)':
+  '@rollup/plugin-node-resolve@15.3.1(rollup@4.34.9)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.10
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
   '@rollup/plugin-replace@5.0.7(rollup@3.29.5)':
     dependencies:
@@ -8789,20 +8806,20 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-replace@6.0.2(rollup@4.34.8)':
+  '@rollup/plugin-replace@6.0.2(rollup@4.34.9)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       magic-string: 0.30.17
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
-  '@rollup/plugin-terser@0.4.4(rollup@4.34.8)':
+  '@rollup/plugin-terser@0.4.4(rollup@4.34.9)':
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
       terser: 5.39.0
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
   '@rollup/pluginutils@5.1.4(rollup@3.29.5)':
     dependencies:
@@ -8812,69 +8829,69 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/pluginutils@5.1.4(rollup@4.34.8)':
+  '@rollup/pluginutils@5.1.4(rollup@4.34.9)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 4.0.2
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
-  '@rollup/rollup-android-arm-eabi@4.34.8':
+  '@rollup/rollup-android-arm-eabi@4.34.9':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.34.8':
+  '@rollup/rollup-android-arm64@4.34.9':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.34.8':
+  '@rollup/rollup-darwin-arm64@4.34.9':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.34.8':
+  '@rollup/rollup-darwin-x64@4.34.9':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.34.8':
+  '@rollup/rollup-freebsd-arm64@4.34.9':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.34.8':
+  '@rollup/rollup-freebsd-x64@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.34.8':
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.34.8':
+  '@rollup/rollup-linux-arm-musleabihf@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.34.8':
+  '@rollup/rollup-linux-arm64-gnu@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.34.8':
+  '@rollup/rollup-linux-arm64-musl@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.34.8':
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.34.8':
+  '@rollup/rollup-linux-riscv64-gnu@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.34.8':
+  '@rollup/rollup-linux-s390x-gnu@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.34.8':
+  '@rollup/rollup-linux-x64-gnu@4.34.9':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.34.8':
+  '@rollup/rollup-linux-x64-musl@4.34.9':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.34.8':
+  '@rollup/rollup-win32-arm64-msvc@4.34.9':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.34.8':
+  '@rollup/rollup-win32-ia32-msvc@4.34.9':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.34.8':
+  '@rollup/rollup-win32-x64-msvc@4.34.9':
     optional: true
 
   '@sec-ant/readable-stream@0.4.1': {}
@@ -8897,9 +8914,9 @@ snapshots:
 
   '@stackblitz/sdk@1.11.0': {}
 
-  '@stylistic/eslint-plugin@4.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@stylistic/eslint-plugin@4.2.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       eslint: 9.21.0(jiti@2.4.2)
       eslint-visitor-keys: 4.2.0
       espree: 10.3.0
@@ -8939,11 +8956,11 @@ snapshots:
 
   '@types/http-proxy@1.17.16':
     dependencies:
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/node@22.13.5':
+  '@types/node@22.13.8':
     dependencies:
       undici-types: 6.20.0
 
@@ -8955,32 +8972,32 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
-  '@typescript-eslint/eslint-plugin@8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/eslint-plugin@8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2))(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       '@typescript-eslint/scope-manager': 8.25.0
-      '@typescript-eslint/type-utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/type-utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       '@typescript-eslint/visitor-keys': 8.25.0
       eslint: 9.21.0(jiti@2.4.2)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 2.0.1(typescript@5.7.3)
-      typescript: 5.7.3
+      ts-api-utils: 2.0.1(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.25.0
       '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.8.2)
       '@typescript-eslint/visitor-keys': 8.25.0
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.21.0(jiti@2.4.2)
-      typescript: 5.7.3
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
@@ -8989,20 +9006,20 @@ snapshots:
       '@typescript-eslint/types': 8.25.0
       '@typescript-eslint/visitor-keys': 8.25.0
 
-  '@typescript-eslint/type-utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/type-utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.21.0(jiti@2.4.2)
-      ts-api-utils: 2.0.1(typescript@5.7.3)
-      typescript: 5.7.3
+      ts-api-utils: 2.0.1(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@8.25.0': {}
 
-  '@typescript-eslint/typescript-estree@8.25.0(typescript@5.7.3)':
+  '@typescript-eslint/typescript-estree@8.25.0(typescript@5.8.2)':
     dependencies:
       '@typescript-eslint/types': 8.25.0
       '@typescript-eslint/visitor-keys': 8.25.0
@@ -9011,19 +9028,19 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.7.1
-      ts-api-utils: 2.0.1(typescript@5.7.3)
-      typescript: 5.7.3
+      ts-api-utils: 2.0.1(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
       '@typescript-eslint/scope-manager': 8.25.0
       '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.8.2)
       eslint: 9.21.0(jiti@2.4.2)
-      typescript: 5.7.3
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
@@ -9052,18 +9069,18 @@ snapshots:
       '@unhead/schema': 1.11.20
       '@unhead/shared': 1.11.20
 
-  '@unhead/vue@1.11.20(vue@3.5.13(typescript@5.7.3))':
+  '@unhead/vue@1.11.20(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@unhead/schema': 1.11.20
       '@unhead/shared': 1.11.20
       hookable: 5.5.3
       unhead: 1.11.20
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.8.2)
 
-  '@vercel/nft@0.27.10(rollup@4.34.8)':
+  '@vercel/nft@0.27.10(rollup@4.34.9)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.0
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       acorn: 8.14.0
       acorn-import-attributes: 1.9.5(acorn@8.14.0)
       async-sema: 3.1.1
@@ -9079,20 +9096,20 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vue: 3.5.13(typescript@5.7.3)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vue: 3.5.13(typescript@5.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vue: 3.5.13(typescript@5.7.3)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vue: 3.5.13(typescript@5.8.2)
 
   '@vitest/expect@0.29.8':
     dependencies:
@@ -9107,13 +9124,13 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@vitest/spy': 3.0.7
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   '@vitest/pretty-format@3.0.7':
     dependencies:
@@ -9169,7 +9186,7 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
-  '@vue-macros/common@1.16.1(vue@3.5.13(typescript@5.7.3))':
+  '@vue-macros/common@1.16.1(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@vue/compiler-sfc': 3.5.13
       ast-kit: 1.4.0
@@ -9178,7 +9195,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
     optionalDependencies:
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.8.2)
 
   '@vue/babel-helper-vue-transform-on@1.2.5': {}
 
@@ -9247,39 +9264,39 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@vue/devtools-kit': 7.6.8
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 1.1.2
-      vite-hot-client: 0.2.4(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
-      vue: 3.5.13(typescript@5.7.3)
+      vite-hot-client: 0.2.4(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vue: 3.5.13(typescript@5.8.2)
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@vue/devtools-kit': 7.6.8
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 1.1.2
-      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vue: 3.5.13(typescript@5.7.3)
+      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vue: 3.5.13(typescript@5.8.2)
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@vue/devtools-kit': 7.7.2
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 2.0.3
-      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vue: 3.5.13(typescript@5.7.3)
+      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vue: 3.5.13(typescript@5.8.2)
     transitivePeerDependencies:
       - vite
 
@@ -9307,7 +9324,7 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/language-core@2.1.10(typescript@5.7.3)':
+  '@vue/language-core@2.1.10(typescript@5.8.2)':
     dependencies:
       '@volar/language-core': 2.4.11
       '@vue/compiler-dom': 3.5.13
@@ -9318,7 +9335,7 @@ snapshots:
       muggle-string: 0.4.1
       path-browserify: 1.0.1
     optionalDependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
 
   '@vue/reactivity@3.5.13':
     dependencies:
@@ -9336,18 +9353,18 @@ snapshots:
       '@vue/shared': 3.5.13
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.7.3))':
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@vue/compiler-ssr': 3.5.13
       '@vue/shared': 3.5.13
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.8.2)
 
   '@vue/shared@3.5.13': {}
 
   '@vue/test-utils@2.4.6':
     dependencies:
       js-beautify: 1.15.4
-      vue-component-type-helpers: 2.2.4
+      vue-component-type-helpers: 2.2.8
 
   '@webassemblyjs/ast@1.14.1':
     dependencies:
@@ -9533,7 +9550,7 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  ansis@3.16.0: {}
+  ansis@3.17.0: {}
 
   any-promise@1.3.0: {}
 
@@ -9613,7 +9630,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.26.9
       '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.9)
-      core-js-compat: 3.40.0
+      core-js-compat: 3.41.0
     transitivePeerDependencies:
       - supports-color
 
@@ -9696,7 +9713,7 @@ snapshots:
       giget: 1.2.5
       jiti: 2.4.2
       mlly: 1.7.4
-      ohash: 1.1.4
+      ohash: 1.1.5
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -9713,7 +9730,7 @@ snapshots:
       giget: 1.2.5
       jiti: 2.4.2
       mlly: 1.7.4
-      ohash: 2.0.6
+      ohash: 2.0.9
       pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -9730,10 +9747,27 @@ snapshots:
       exsolve: 0.4.4
       giget: 2.0.0
       jiti: 2.4.2
-      ohash: 2.0.6
+      ohash: 2.0.9
       pathe: 2.0.3
       perfect-debounce: 1.0.0
-      pkg-types: 2.0.0
+      pkg-types: 2.0.1
+      rc9: 2.1.2
+    optionalDependencies:
+      magicast: 0.3.5
+
+  c12@3.0.2(magicast@0.3.5):
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.1.8
+      defu: 6.1.4
+      dotenv: 16.4.7
+      exsolve: 1.0.1
+      giget: 2.0.0
+      jiti: 2.4.2
+      ohash: 2.0.9
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.0.1
       rc9: 2.1.2
     optionalDependencies:
       magicast: 0.3.5
@@ -9796,7 +9830,7 @@ snapshots:
       ofetch: 1.4.1
       open: 10.1.0
       pathe: 2.0.3
-      pkg-types: 2.0.0
+      pkg-types: 2.0.1
       scule: 1.3.0
       semver: 7.7.1
       std-env: 3.8.0
@@ -9931,7 +9965,7 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
-  core-js-compat@3.40.0:
+  core-js-compat@3.41.0:
     dependencies:
       browserslist: 4.24.4
 
@@ -10228,7 +10262,7 @@ snapshots:
 
   dot-prop@9.0.0:
     dependencies:
-      type-fest: 4.35.0
+      type-fest: 4.36.0
 
   dotenv@16.4.7: {}
 
@@ -10445,11 +10479,11 @@ snapshots:
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
 
-  eslint-plugin-import-x@4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3):
+  eslint-plugin-import-x@4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2):
     dependencies:
       '@types/doctrine': 0.0.9
       '@typescript-eslint/scope-manager': 8.25.0
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       debug: 4.4.0(supports-color@9.4.0)
       doctrine: 3.0.0
       enhanced-resolve: 5.18.1
@@ -10482,10 +10516,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.2):
+  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3):
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
-      prettier: 3.5.2
+      prettier: 3.5.3
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
@@ -10509,7 +10543,7 @@ snapshots:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
       ci-info: 4.1.0
       clean-regexp: 1.0.0
-      core-js-compat: 3.40.0
+      core-js-compat: 3.41.0
       eslint: 9.21.0(jiti@2.4.2)
       esquery: 1.6.0
       globals: 15.15.0
@@ -10687,10 +10721,12 @@ snapshots:
       strip-final-newline: 4.0.0
       yoctocolors: 2.1.1
 
-  expect-type@1.1.0: {}
+  expect-type@1.2.0: {}
 
   exsolve@0.4.4: {}
 
+  exsolve@1.0.1: {}
+
   externality@1.0.2:
     dependencies:
       enhanced-resolve: 5.18.1
@@ -10746,7 +10782,7 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  find-up-simple@1.0.0: {}
+  find-up-simple@1.0.1: {}
 
   find-up@5.0.0:
     dependencies:
@@ -11068,9 +11104,9 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  impound@0.2.0(rollup@4.34.8):
+  impound@0.2.0(rollup@4.34.9):
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       mlly: 1.7.4
       pathe: 1.1.2
       unenv: 1.10.0
@@ -11206,7 +11242,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -11380,7 +11416,7 @@ snapshots:
     dependencies:
       mlly: 1.7.4
       pkg-types: 1.3.1
-      quansync: 0.2.6
+      quansync: 0.2.8
 
   locate-path@6.0.0:
     dependencies:
@@ -11534,7 +11570,7 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mkdist@1.6.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3)):
+  mkdist@1.6.0(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2)):
     dependencies:
       autoprefixer: 10.4.20(postcss@8.5.3)
       citty: 0.1.6
@@ -11550,8 +11586,8 @@ snapshots:
       semver: 7.7.1
       tinyglobby: 0.2.12
     optionalDependencies:
-      typescript: 5.7.3
-      vue-tsc: 2.1.10(typescript@5.7.3)
+      typescript: 5.8.2
+      vue-tsc: 2.1.10(typescript@5.8.2)
 
   mlly@1.7.4:
     dependencies:
@@ -11586,20 +11622,20 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  nitropack@2.10.4(typescript@5.7.3):
+  nitropack@2.10.4(typescript@5.8.2):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
       '@netlify/functions': 2.8.2
-      '@rollup/plugin-alias': 5.1.1(rollup@4.34.8)
-      '@rollup/plugin-commonjs': 28.0.2(rollup@4.34.8)
-      '@rollup/plugin-inject': 5.0.5(rollup@4.34.8)
-      '@rollup/plugin-json': 6.1.0(rollup@4.34.8)
-      '@rollup/plugin-node-resolve': 15.3.1(rollup@4.34.8)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.34.8)
-      '@rollup/plugin-terser': 0.4.4(rollup@4.34.8)
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/plugin-alias': 5.1.1(rollup@4.34.9)
+      '@rollup/plugin-commonjs': 28.0.2(rollup@4.34.9)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.34.9)
+      '@rollup/plugin-json': 6.1.0(rollup@4.34.9)
+      '@rollup/plugin-node-resolve': 15.3.1(rollup@4.34.9)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.34.9)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.34.9)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       '@types/http-proxy': 1.17.16
-      '@vercel/nft': 0.27.10(rollup@4.34.8)
+      '@vercel/nft': 0.27.10(rollup@4.34.9)
       archiver: 7.0.1
       c12: 2.0.1(magicast@0.3.5)
       chokidar: 3.6.0
@@ -11634,15 +11670,15 @@ snapshots:
       mlly: 1.7.4
       node-fetch-native: 1.6.6
       ofetch: 1.4.1
-      ohash: 1.1.4
-      openapi-typescript: 7.6.1(typescript@5.7.3)
+      ohash: 1.1.5
+      openapi-typescript: 7.6.1(typescript@5.8.2)
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
       pretty-bytes: 6.1.1
       radix3: 1.1.2
-      rollup: 4.34.8
-      rollup-plugin-visualizer: 5.14.0(rollup@4.34.8)
+      rollup: 4.34.9
+      rollup-plugin-visualizer: 5.14.0(rollup@4.34.9)
       scule: 1.3.0
       semver: 7.7.1
       serve-placeholder: 2.0.2
@@ -11652,7 +11688,7 @@ snapshots:
       uncrypto: 0.1.3
       unctx: 2.4.1
       unenv: 1.10.0
-      unimport: 3.14.6(rollup@4.34.8)
+      unimport: 3.14.6(rollup@4.34.9)
       unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
       untyped: 1.5.2
       unwasm: 0.3.9
@@ -11737,21 +11773,21 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxi@3.22.2: {}
+  nuxi@3.22.3: {}
 
-  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0):
     dependencies:
-      '@nuxt/cli': 3.22.2(magicast@0.3.5)
+      '@nuxt/cli': 3.22.3(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))(yaml@2.7.0)
       '@unhead/dom': 1.11.20
       '@unhead/shared': 1.11.20
       '@unhead/ssr': 1.11.20
-      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.7.3))
+      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))
       '@vue/shared': 3.5.13
       acorn: 8.14.0
       c12: 2.0.4(magicast@0.3.5)
@@ -11777,10 +11813,10 @@ snapshots:
       magic-string: 0.30.17
       mlly: 1.7.4
       nanotar: 0.2.0
-      nitropack: 2.10.4(typescript@5.7.3)
+      nitropack: 2.10.4(typescript@5.8.2)
       nypm: 0.5.4
       ofetch: 1.4.1
-      ohash: 1.1.4
+      ohash: 1.1.5
       pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -11798,16 +11834,16 @@ snapshots:
       unhead: 1.11.20
       unimport: 4.1.2
       unplugin: 2.2.0
-      unplugin-vue-router: 0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      unplugin-vue-router: 0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
       unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
       untyped: 1.5.2
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.8.2)
       vue-bundle-renderer: 2.1.1
       vue-devtools-stub: 0.1.0
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -11861,19 +11897,19 @@ snapshots:
       - xml2js
       - yaml
 
-  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0):
     dependencies:
-      '@nuxt/cli': 3.22.2(magicast@0.3.5)
+      '@nuxt/cli': 3.22.3(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@4.34.8)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/devtools': 1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))(yaml@2.7.0)
       '@unhead/dom': 1.11.20
       '@unhead/shared': 1.11.20
       '@unhead/ssr': 1.11.20
-      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.7.3))
+      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))
       '@vue/shared': 3.5.13
       acorn: 8.14.0
       c12: 2.0.4(magicast@0.3.5)
@@ -11892,17 +11928,17 @@ snapshots:
       h3: 1.15.1
       hookable: 5.5.3
       ignore: 7.0.3
-      impound: 0.2.0(rollup@4.34.8)
+      impound: 0.2.0(rollup@4.34.9)
       jiti: 2.4.2
       klona: 2.0.6
       knitwork: 1.2.0
       magic-string: 0.30.17
       mlly: 1.7.4
       nanotar: 0.2.0
-      nitropack: 2.10.4(typescript@5.7.3)
+      nitropack: 2.10.4(typescript@5.8.2)
       nypm: 0.5.4
       ofetch: 1.4.1
-      ohash: 1.1.4
+      ohash: 1.1.5
       pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -11920,16 +11956,16 @@ snapshots:
       unhead: 1.11.20
       unimport: 4.1.2
       unplugin: 2.2.0
-      unplugin-vue-router: 0.11.2(rollup@4.34.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      unplugin-vue-router: 0.11.2(rollup@4.34.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
       unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
       untyped: 1.5.2
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.8.2)
       vue-bundle-renderer: 2.1.1
       vue-devtools-stub: 0.1.0
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -12008,7 +12044,7 @@ snapshots:
       citty: 0.1.6
       consola: 3.4.0
       pathe: 2.0.3
-      pkg-types: 2.0.0
+      pkg-types: 2.0.1
       tinyexec: 0.3.2
 
   object-assign@4.1.1: {}
@@ -12021,9 +12057,9 @@ snapshots:
       node-fetch-native: 1.6.6
       ufo: 1.5.4
 
-  ohash@1.1.4: {}
+  ohash@1.1.5: {}
 
-  ohash@2.0.6: {}
+  ohash@2.0.9: {}
 
   on-finished@2.4.1:
     dependencies:
@@ -12050,14 +12086,14 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  openapi-typescript@7.6.1(typescript@5.7.3):
+  openapi-typescript@7.6.1(typescript@5.8.2):
     dependencies:
       '@redocly/openapi-core': 1.31.3(supports-color@9.4.0)
       ansi-colors: 4.1.3
       change-case: 5.4.4
       parse-json: 8.1.0
       supports-color: 9.4.0
-      typescript: 5.7.3
+      typescript: 5.8.2
       yargs-parser: 21.1.1
 
   optionator@0.9.4:
@@ -12094,9 +12130,9 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
-  package-manager-detector@0.2.10:
+  package-manager-detector@0.2.11:
     dependencies:
-      quansync: 0.2.6
+      quansync: 0.2.8
 
   packrup@0.1.2: {}
 
@@ -12120,7 +12156,7 @@ snapshots:
     dependencies:
       '@babel/code-frame': 7.26.2
       index-to-position: 0.1.2
-      type-fest: 4.35.0
+      type-fest: 4.36.0
 
   parse-ms@4.0.0: {}
 
@@ -12186,9 +12222,10 @@ snapshots:
       mlly: 1.7.4
       pathe: 2.0.3
 
-  pkg-types@2.0.0:
+  pkg-types@2.0.1:
     dependencies:
       confbox: 0.1.8
+      exsolve: 1.0.1
       pathe: 2.0.3
 
   pluralize@8.0.0: {}
@@ -12582,7 +12619,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preact@10.26.3: {}
+  preact@10.26.4: {}
 
   prelude-ls@1.2.1: {}
 
@@ -12590,7 +12627,7 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier@3.5.2: {}
+  prettier@3.5.3: {}
 
   pretty-bytes@6.1.1: {}
 
@@ -12631,7 +12668,7 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  quansync@0.2.6: {}
+  quansync@0.2.8: {}
 
   querystringify@2.2.0: {}
 
@@ -12671,16 +12708,16 @@ snapshots:
 
   read-package-up@11.0.0:
     dependencies:
-      find-up-simple: 1.0.0
+      find-up-simple: 1.0.1
       read-pkg: 9.0.1
-      type-fest: 4.35.0
+      type-fest: 4.36.0
 
   read-pkg@9.0.1:
     dependencies:
       '@types/normalize-package-data': 2.4.4
       normalize-package-data: 6.0.2
       parse-json: 8.1.0
-      type-fest: 4.35.0
+      type-fest: 4.36.0
       unicorn-magic: 0.1.0
 
   readable-stream@2.3.8:
@@ -12781,11 +12818,11 @@ snapshots:
     dependencies:
       glob: 10.4.5
 
-  rollup-plugin-dts@6.1.1(rollup@3.29.5)(typescript@5.7.3):
+  rollup-plugin-dts@6.1.1(rollup@3.29.5)(typescript@5.8.2):
     dependencies:
       magic-string: 0.30.17
       rollup: 3.29.5
-      typescript: 5.7.3
+      typescript: 5.8.2
     optionalDependencies:
       '@babel/code-frame': 7.26.2
 
@@ -12817,14 +12854,14 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  rollup-plugin-visualizer@5.14.0(rollup@4.34.8):
+  rollup-plugin-visualizer@5.14.0(rollup@4.34.9):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.2
       source-map: 0.7.4
       yargs: 17.7.2
     optionalDependencies:
-      rollup: 4.34.8
+      rollup: 4.34.9
 
   rollup-plugin-vue@6.0.0(@vue/compiler-sfc@3.5.13):
     dependencies:
@@ -12843,29 +12880,29 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  rollup@4.34.8:
+  rollup@4.34.9:
     dependencies:
       '@types/estree': 1.0.6
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.34.8
-      '@rollup/rollup-android-arm64': 4.34.8
-      '@rollup/rollup-darwin-arm64': 4.34.8
-      '@rollup/rollup-darwin-x64': 4.34.8
-      '@rollup/rollup-freebsd-arm64': 4.34.8
-      '@rollup/rollup-freebsd-x64': 4.34.8
-      '@rollup/rollup-linux-arm-gnueabihf': 4.34.8
-      '@rollup/rollup-linux-arm-musleabihf': 4.34.8
-      '@rollup/rollup-linux-arm64-gnu': 4.34.8
-      '@rollup/rollup-linux-arm64-musl': 4.34.8
-      '@rollup/rollup-linux-loongarch64-gnu': 4.34.8
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.8
-      '@rollup/rollup-linux-riscv64-gnu': 4.34.8
-      '@rollup/rollup-linux-s390x-gnu': 4.34.8
-      '@rollup/rollup-linux-x64-gnu': 4.34.8
-      '@rollup/rollup-linux-x64-musl': 4.34.8
-      '@rollup/rollup-win32-arm64-msvc': 4.34.8
-      '@rollup/rollup-win32-ia32-msvc': 4.34.8
-      '@rollup/rollup-win32-x64-msvc': 4.34.8
+      '@rollup/rollup-android-arm-eabi': 4.34.9
+      '@rollup/rollup-android-arm64': 4.34.9
+      '@rollup/rollup-darwin-arm64': 4.34.9
+      '@rollup/rollup-darwin-x64': 4.34.9
+      '@rollup/rollup-freebsd-arm64': 4.34.9
+      '@rollup/rollup-freebsd-x64': 4.34.9
+      '@rollup/rollup-linux-arm-gnueabihf': 4.34.9
+      '@rollup/rollup-linux-arm-musleabihf': 4.34.9
+      '@rollup/rollup-linux-arm64-gnu': 4.34.9
+      '@rollup/rollup-linux-arm64-musl': 4.34.9
+      '@rollup/rollup-linux-loongarch64-gnu': 4.34.9
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.9
+      '@rollup/rollup-linux-riscv64-gnu': 4.34.9
+      '@rollup/rollup-linux-s390x-gnu': 4.34.9
+      '@rollup/rollup-linux-x64-gnu': 4.34.9
+      '@rollup/rollup-linux-x64-musl': 4.34.9
+      '@rollup/rollup-win32-arm64-msvc': 4.34.9
+      '@rollup/rollup-win32-ia32-msvc': 4.34.9
+      '@rollup/rollup-win32-x64-msvc': 4.34.9
       fsevents: 2.3.3
 
   run-applescript@7.0.0: {}
@@ -13196,6 +13233,8 @@ snapshots:
 
   system-architecture@0.1.0: {}
 
+  tailwind-merge@3.0.2: {}
+
   tailwindcss-primeui@0.5.1(tailwindcss@3.4.17):
     dependencies:
       tailwindcss: 3.4.17
@@ -13338,19 +13377,19 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
-  ts-api-utils@2.0.1(typescript@5.7.3):
+  ts-api-utils@2.0.1(typescript@5.8.2):
     dependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
 
   ts-interface-checker@0.1.13: {}
 
-  tsconfck@3.1.5(typescript@5.7.3):
+  tsconfck@3.1.5(typescript@5.8.2):
     optionalDependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
 
   tslib@2.8.1: {}
 
-  tsup@8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0):
+  tsup@8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.0)
       cac: 6.7.14
@@ -13362,7 +13401,7 @@ snapshots:
       picocolors: 1.1.1
       postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0)
       resolve-from: 5.0.0
-      rollup: 4.34.8
+      rollup: 4.34.9
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
       tinyexec: 0.3.2
@@ -13370,7 +13409,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       postcss: 8.5.3
-      typescript: 5.7.3
+      typescript: 5.8.2
     transitivePeerDependencies:
       - jiti
       - supports-color
@@ -13389,20 +13428,20 @@ snapshots:
 
   type-fest@2.19.0: {}
 
-  type-fest@4.35.0: {}
+  type-fest@4.36.0: {}
 
   type-level-regexp@0.1.17: {}
 
-  typedoc@0.27.9(typescript@5.7.3):
+  typedoc@0.27.9(typescript@5.8.2):
     dependencies:
       '@gerrit0/mini-shiki': 1.27.2
       lunr: 2.3.9
       markdown-it: 14.1.0
       minimatch: 9.0.5
-      typescript: 5.7.3
+      typescript: 5.8.2
       yaml: 2.7.0
 
-  typescript@5.7.3: {}
+  typescript@5.8.2: {}
 
   uc.micro@2.1.0: {}
 
@@ -13410,7 +13449,7 @@ snapshots:
 
   ultrahtml@1.5.3: {}
 
-  unbuild@2.0.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3)):
+  unbuild@2.0.0(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@3.29.5)
       '@rollup/plugin-commonjs': 25.0.8(rollup@3.29.5)
@@ -13427,17 +13466,17 @@ snapshots:
       hookable: 5.5.3
       jiti: 1.21.7
       magic-string: 0.30.17
-      mkdist: 1.6.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
+      mkdist: 1.6.0(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))
       mlly: 1.7.4
       pathe: 1.1.2
       pkg-types: 1.3.1
       pretty-bytes: 6.1.1
       rollup: 3.29.5
-      rollup-plugin-dts: 6.1.1(rollup@3.29.5)(typescript@5.7.3)
+      rollup-plugin-dts: 6.1.1(rollup@3.29.5)(typescript@5.8.2)
       scule: 1.3.0
       untyped: 1.5.2
     optionalDependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -13503,9 +13542,9 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unimport@3.14.6(rollup@4.34.8):
+  unimport@3.14.6(rollup@4.34.9):
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       acorn: 8.14.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
@@ -13548,10 +13587,10 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       chokidar: 3.6.0
       debug: 4.4.0(supports-color@9.4.0)
       fast-glob: 3.3.3
@@ -13560,7 +13599,7 @@ snapshots:
       minimatch: 9.0.5
       mlly: 1.7.4
       unplugin: 1.16.1
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.8.2)
     optionalDependencies:
       '@babel/parser': 7.26.9
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
@@ -13568,7 +13607,7 @@ snapshots:
       - rollup
       - supports-color
 
-  unplugin-vue-components@28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-components@28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.0(supports-color@9.4.0)
@@ -13578,18 +13617,18 @@ snapshots:
       tinyglobby: 0.2.12
       unplugin: 2.2.0
       unplugin-utils: 0.2.4
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.8.2)
     optionalDependencies:
       '@babel/parser': 7.26.9
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-router@0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-router@0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@babel/types': 7.26.9
       '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
-      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.7.3))
+      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.8.2))
       ast-walker-scope: 0.6.2
       chokidar: 3.6.0
       fast-glob: 3.3.3
@@ -13602,16 +13641,16 @@ snapshots:
       unplugin: 2.1.2
       yaml: 2.7.0
     optionalDependencies:
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
     transitivePeerDependencies:
       - rollup
       - vue
 
-  unplugin-vue-router@0.11.2(rollup@4.34.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-router@0.11.2(rollup@4.34.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@babel/types': 7.26.9
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
-      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.7.3))
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
+      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.8.2))
       ast-walker-scope: 0.6.2
       chokidar: 3.6.0
       fast-glob: 3.3.3
@@ -13624,7 +13663,7 @@ snapshots:
       unplugin: 2.1.2
       yaml: 2.7.0
     optionalDependencies:
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
     transitivePeerDependencies:
       - rollup
       - vue
@@ -13709,41 +13748,41 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  valibot@0.42.1(typescript@5.7.3):
+  valibot@0.42.1(typescript@5.8.2):
     optionalDependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
 
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  vite-dev-rpc@1.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-dev-rpc@1.0.7(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       birpc: 2.2.0
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-hot-client: 2.0.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-hot-client: 2.0.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
 
-  vite-hot-client@0.2.4(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@0.2.4(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-hot-client@0.2.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@0.2.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-hot-client@2.0.4(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@2.0.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-node@0.29.8(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0):
+  vite-node@0.29.8(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
       mlly: 1.7.4
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 4.5.9(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0)
+      vite: 4.5.9(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -13754,13 +13793,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite-node@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
       es-module-lexer: 1.6.0
       pathe: 2.0.3
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -13775,7 +13814,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3)):
+  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2)):
     dependencies:
       '@babel/code-frame': 7.26.2
       ansi-escapes: 4.3.2
@@ -13787,7 +13826,7 @@ snapshots:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.12
@@ -13795,10 +13834,10 @@ snapshots:
     optionalDependencies:
       eslint: 9.21.0(jiti@2.4.2)
       optionator: 0.9.4
-      typescript: 5.7.3
-      vue-tsc: 2.1.10(typescript@5.7.3)
+      typescript: 5.8.2
+      vue-tsc: 2.1.10(typescript@5.8.2)
 
-  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
@@ -13809,17 +13848,17 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.1
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.8)(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.8)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
       debug: 4.4.0(supports-color@9.4.0)
       error-stack-parser-es: 0.1.5
       fs-extra: 11.3.0
@@ -13827,31 +13866,31 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.1
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      ansis: 3.16.0
+      ansis: 3.17.0
       debug: 4.4.0(supports-color@9.4.0)
       error-stack-parser-es: 1.0.5
-      ohash: 2.0.6
+      ohash: 2.0.9
       open: 10.1.0
       perfect-debounce: 1.0.0
       sirv: 3.0.1
       unplugin-utils: 0.2.4
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-dev-rpc: 1.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-dev-rpc: 1.0.7(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-inspector@5.3.1(vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@@ -13862,11 +13901,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.17
-      vite: 6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-inspector@5.3.1(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@@ -13877,50 +13916,50 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.17
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@4.5.9(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0):
+  vite@4.5.9(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       esbuild: 0.18.20
       postcss: 8.5.3
       rollup: 3.29.5
     optionalDependencies:
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
       fsevents: 2.3.3
       sass: 1.45.0
       terser: 5.39.0
 
-  vite@6.0.11(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.24.2
       postcss: 8.5.3
-      rollup: 4.34.8
+      rollup: 4.34.9
     optionalDependencies:
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
       fsevents: 2.3.3
       jiti: 2.4.2
       sass: 1.45.0
       terser: 5.39.0
       yaml: 2.7.0
 
-  vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.0
       postcss: 8.5.3
-      rollup: 4.34.8
+      rollup: 4.34.9
     optionalDependencies:
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
       fsevents: 2.3.3
       jiti: 2.4.2
       sass: 1.45.0
       terser: 5.39.0
       yaml: 2.7.0
 
-  vitest-environment-nuxt@1.0.1(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
+  vitest-environment-nuxt@1.0.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
     dependencies:
-      '@nuxt/test-utils': 3.17.0(@types/node@22.13.5)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      '@nuxt/test-utils': 3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -13951,7 +13990,7 @@ snapshots:
     dependencies:
       '@types/chai': 4.3.20
       '@types/chai-subset': 1.3.5
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
       '@vitest/expect': 0.29.8
       '@vitest/runner': 0.29.8
       '@vitest/spy': 0.29.8
@@ -13970,8 +14009,8 @@ snapshots:
       tinybench: 2.9.0
       tinypool: 0.4.0
       tinyspy: 1.1.1
-      vite: 4.5.9(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0)
-      vite-node: 0.29.8(@types/node@22.13.5)(sass@1.45.0)(terser@5.39.0)
+      vite: 4.5.9(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0)
+      vite-node: 0.29.8(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       jsdom: 19.0.0
@@ -13984,10 +14023,10 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
+  vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       '@vitest/expect': 3.0.7
-      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       '@vitest/pretty-format': 3.0.7
       '@vitest/runner': 3.0.7
       '@vitest/snapshot': 3.0.7
@@ -13995,7 +14034,7 @@ snapshots:
       '@vitest/utils': 3.0.7
       chai: 5.2.0
       debug: 4.4.0(supports-color@9.4.0)
-      expect-type: 1.1.0
+      expect-type: 1.2.0
       magic-string: 0.30.17
       pathe: 2.0.3
       std-env: 3.8.0
@@ -14003,11 +14042,11 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.13.5
+      '@types/node': 22.13.8
     transitivePeerDependencies:
       - jiti
       - less
@@ -14049,7 +14088,7 @@ snapshots:
     dependencies:
       ufo: 1.5.4
 
-  vue-component-type-helpers@2.2.4: {}
+  vue-component-type-helpers@2.2.8: {}
 
   vue-devtools-stub@0.1.0: {}
 
@@ -14066,27 +14105,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)):
+  vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.13(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.8.2)
 
-  vue-tsc@2.1.10(typescript@5.7.3):
+  vue-tsc@2.1.10(typescript@5.8.2):
     dependencies:
       '@volar/typescript': 2.4.11
-      '@vue/language-core': 2.1.10(typescript@5.7.3)
+      '@vue/language-core': 2.1.10(typescript@5.8.2)
       semver: 7.7.1
-      typescript: 5.7.3
+      typescript: 5.8.2
 
-  vue@3.5.13(typescript@5.7.3):
+  vue@3.5.13(typescript@5.8.2):
     dependencies:
       '@vue/compiler-dom': 3.5.13
       '@vue/compiler-sfc': 3.5.13
       '@vue/runtime-dom': 3.5.13
-      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.7.3))
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.8.2))
       '@vue/shared': 3.5.13
     optionalDependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
 
   w3c-hr-time@1.0.2:
     dependencies:

From 912ec920361d00e5040d462f06dd5919f20eadbe Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 15:02:12 +0300
Subject: [PATCH 38/77] Use type module

---
 .../components/doc/codeeditor/templates.js    |  4 +-
 apps/showcase/doc/common/apidoc/index.json    | 20 ++---
 apps/showcase/nuxt.config.js                  |  2 +-
 apps/showcase/package.json                    |  7 +-
 .../{build-apidoc.js => build-apidoc.cjs}     |  0
 apps/showcase/scripts/prebuild.js             | 20 -----
 apps/showcase/scripts/prebuild.mjs            | 25 ++++++
 pnpm-lock.yaml                                | 80 +++++++++++++++----
 8 files changed, 105 insertions(+), 53 deletions(-)
 rename apps/showcase/scripts/{build-apidoc.js => build-apidoc.cjs} (100%)
 delete mode 100644 apps/showcase/scripts/prebuild.js
 create mode 100644 apps/showcase/scripts/prebuild.mjs

diff --git a/apps/showcase/components/doc/codeeditor/templates.js b/apps/showcase/components/doc/codeeditor/templates.js
index b505f4e6f..8683c6da0 100644
--- a/apps/showcase/components/doc/codeeditor/templates.js
+++ b/apps/showcase/components/doc/codeeditor/templates.js
@@ -120,12 +120,12 @@ export default defineConfig({
         },
         'tailwind.config.js': {
             content: `/** @type {import('tailwindcss').Config} */
-const primeui = require('tailwindcss-primeui');
+import PrimeUI from 'tailwindcss-primeui';
 
 export default {
     content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
     darkMode: ['selector', '[class="p-dark"]'],
-    plugins: [primeui]
+    plugins: [PrimeUI]
 };
 `
         },
diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index 69bdbca66..02e752ee7 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -736,7 +736,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "DIV",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -1830,7 +1830,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "DIV",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -2117,7 +2117,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -2418,7 +2418,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "DIV",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -8303,7 +8303,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -64096,7 +64096,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -64869,7 +64869,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -66369,7 +66369,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -67535,7 +67535,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "DIV",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -80007,4 +80007,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js
index d9b7aca78..a0ff8372d 100644
--- a/apps/showcase/nuxt.config.js
+++ b/apps/showcase/nuxt.config.js
@@ -30,7 +30,7 @@ export default defineNuxtConfig({
     vite: {
         optimizeDeps: {
             noDiscovery: true,
-            include: ['quill']
+            include: ['quill', 'yup']
         },
         resolve: {
             dedupe: ['vue', '@primeuix/styles', '@primeuix/themes', '@primeuix/utils'],
diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index 0e69952e5..0808f6594 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -4,6 +4,7 @@
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
+    "type": "module",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -34,8 +35,8 @@
         "generate": "nuxt generate",
         "preview": "nuxt preview",
         "postinstall": "nuxt prepare",
-        "build:prebuild": "node ./scripts/prebuild.js",
-        "build:apidoc": "node ./scripts/build-apidoc.js"
+        "build:prebuild": "node ./scripts/prebuild.mjs",
+        "build:apidoc": "node ./scripts/build-apidoc.cjs"
     },
     "dependencies": {
         "@docsearch/js": "catalog:app",
@@ -62,7 +63,7 @@
         "sass-loader": "catalog:app",
         "tailwindcss": "^3",
         "tailwindcss-primeui": "catalog:",
-        "typedoc": "0.27.9",
+        "typedoc": "0.23.23",
         "vite": "catalog:app"
     }
 }
diff --git a/apps/showcase/scripts/build-apidoc.js b/apps/showcase/scripts/build-apidoc.cjs
similarity index 100%
rename from apps/showcase/scripts/build-apidoc.js
rename to apps/showcase/scripts/build-apidoc.cjs
diff --git a/apps/showcase/scripts/prebuild.js b/apps/showcase/scripts/prebuild.js
deleted file mode 100644
index 340594999..000000000
--- a/apps/showcase/scripts/prebuild.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const rootDir = path.resolve(__dirname, '../');
-const workspaceDir = path.resolve(__dirname, '../../../');
-
-const pkg = path.resolve(rootDir, 'package.json');
-
-const pkgJson = require(pkg);
-const packageJson = require(path.resolve(workspaceDir, 'package.json'));
-
-pkgJson.version = packageJson.version;
-pkgJson.author = packageJson.author;
-pkgJson.homepage = packageJson.homepage;
-pkgJson.license = packageJson.license;
-pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
-pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
-pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
-
-fs.writeFileSync(pkg, JSON.stringify(pkgJson, null, 4));
diff --git a/apps/showcase/scripts/prebuild.mjs b/apps/showcase/scripts/prebuild.mjs
new file mode 100644
index 000000000..b4917ac25
--- /dev/null
+++ b/apps/showcase/scripts/prebuild.mjs
@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const rootDir = path.resolve(__dirname, '../');
+const workspaceDir = path.resolve(__dirname, '../../../');
+
+const pkgPath = path.resolve(rootDir, 'package.json');
+const packageJsonPath = path.resolve(workspaceDir, 'package.json');
+
+const pkgJson = JSON.parse(fs.readFileSync(pkgPath, { encoding: 'utf-8' }));
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf-8' }));
+
+pkgJson.version = packageJson.version;
+pkgJson.author = packageJson.author;
+pkgJson.homepage = packageJson.homepage;
+pkgJson.license = packageJson.license;
+pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
+pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
+pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
+
+fs.writeFileSync(pkgPath, JSON.stringify(pkgJson, null, 4));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 559ba3e50..2c09bd418 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -249,8 +249,8 @@ importers:
         specifier: 'catalog:'
         version: 0.5.1(tailwindcss@3.4.17)
       typedoc:
-        specifier: 0.27.9
-        version: 0.27.9(typescript@5.8.2)
+        specifier: 0.23.23
+        version: 0.23.23(typescript@5.8.2)
       vite:
         specifier: catalog:app
         version: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
@@ -347,7 +347,7 @@ importers:
         version: 1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       '@nuxt/module-builder':
         specifier: ^0.8.4
-        version: 0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.3)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))
+        version: 0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.4)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))
       '@nuxt/schema':
         specifier: ^3
         version: 3.15.4
@@ -1761,8 +1761,8 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@nuxt/cli@3.22.3':
-    resolution: {integrity: sha512-UsrTk/QOXxJNfRIi0bk8axPi4/pQxjzHsf6/ZhgmGC2jyrvLFPjwx1TvG/S8zVvjt0pazqQDKM9K3Diym3P4iQ==}
+  '@nuxt/cli@3.22.4':
+    resolution: {integrity: sha512-y4XsphSpnvFOF7OGrCEHJaI8gp47APWNK7mRbzWMl/xvO9VpKeP9BWuktKNUdZSp4xisy3+8/5v3LPorJmq35w==}
     engines: {node: ^16.10.0 || >=18.0.0}
     hasBin: true
 
@@ -4254,6 +4254,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
@@ -4408,6 +4411,11 @@ packages:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
+  marked@4.3.0:
+    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
+    engines: {node: '>= 12'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4654,8 +4662,8 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  nuxi@3.22.3:
-    resolution: {integrity: sha512-JgjiTEu+PUErx+W3x7YWNg4Ii/VrbUzOF2eMZvkrcfqQqU6qli/Tb/XfVynzzVRXJe43/BpE9lNm3Ymxyh3pDg==}
+  nuxi@3.22.4:
+    resolution: {integrity: sha512-rpVECiC1bNhbU/OI/Oj/HrI0wSq98SUnBPkoCS2qXUCtz70hCz9fD+KVSveJi9uKgBYhYTkbrKzACycsHQF4zw==}
     engines: {node: ^16.10.0 || >=18.0.0}
     hasBin: true
 
@@ -4672,8 +4680,8 @@ packages:
       '@types/node':
         optional: true
 
-  nwsapi@2.2.16:
-    resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
+  nwsapi@2.2.18:
+    resolution: {integrity: sha512-p1TRH/edngVEHVbwqWnxUViEmq5znDvyB+Sik5cmuLpGOIfDf/39zLiq3swPF8Vakqn+gvNiOQAZu8djYlQILA==}
 
   nypm@0.4.1:
     resolution: {integrity: sha512-1b9mihliBh8UCcKtcGRu//G50iHpjxIQVUqkdhPT/SDVE7KdJKoHXLS0heuYTQCx95dFqiyUbXZB9r8ikn+93g==}
@@ -5679,6 +5687,9 @@ packages:
     resolution: {integrity: sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==}
     engines: {node: '>= 0.4'}
 
+  shiki@0.11.1:
+    resolution: {integrity: sha512-EugY9VASFuDqOexOgXR18ZV+TbFrQHeCpEYaXamO+SZlsnT/2LxuLBX25GGtIrwaEVFXUAbUQ601SWE2rMwWHA==}
+
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -6099,6 +6110,13 @@ packages:
   type-level-regexp@0.1.17:
     resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
 
+  typedoc@0.23.23:
+    resolution: {integrity: sha512-cg1YQWj+/BU6wq74iott513U16fbrPCbyYs04PHZgvoKJIc6EY4xNobyDZh4KMfRGW8Yjv6wwIzQyoqopKOUGw==}
+    engines: {node: '>= 14.14'}
+    hasBin: true
+    peerDependencies:
+      typescript: 4.6.x || 4.7.x || 4.8.x || 4.9.x
+
   typedoc@0.27.9:
     resolution: {integrity: sha512-/z585740YHURLl9DN2jCWe6OW7zKYm6VoQ93H0sxZ1cwHQEQrUn5BJrEnkWhfzUdyO+BLGjnKUZ9iz9hKloFDw==}
     engines: {node: '>= 18'}
@@ -6613,6 +6631,12 @@ packages:
     resolution: {integrity: sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==}
     hasBin: true
 
+  vscode-oniguruma@1.7.0:
+    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
+
+  vscode-textmate@6.0.0:
+    resolution: {integrity: sha512-gu73tuZfJgu+mvCSy4UZwd2JXykjK9zAZsfmDeut5dx/1a7FeTk0XwJsSuqQn+cuMCGVbIBfl+s53X4T19DnzQ==}
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
@@ -8102,7 +8126,7 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
-  '@nuxt/cli@3.22.3(magicast@0.3.5)':
+  '@nuxt/cli@3.22.4(magicast@0.3.5)':
     dependencies:
       c12: 3.0.2(magicast@0.3.5)
       chokidar: 4.0.3
@@ -8384,7 +8408,7 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.3)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))':
+  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.4)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       citty: 0.1.6
@@ -8392,7 +8416,7 @@ snapshots:
       defu: 6.1.4
       magic-regexp: 0.8.0
       mlly: 1.7.4
-      nuxi: 3.22.3
+      nuxi: 3.22.4
       pathe: 1.1.2
       pkg-types: 1.3.1
       tsconfck: 3.1.5(typescript@5.8.2)
@@ -11290,7 +11314,7 @@ snapshots:
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.16
+      nwsapi: 2.2.18
       parse5: 6.0.1
       saxes: 5.0.1
       symbol-tree: 3.2.4
@@ -11328,6 +11352,8 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonc-parser@3.3.1: {}
+
   jsonfile@6.1.0:
     dependencies:
       universalify: 2.0.1
@@ -11493,6 +11519,8 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
+  marked@4.3.0: {}
+
   math-intrinsics@1.1.0: {}
 
   mdn-data@2.0.14: {}
@@ -11773,11 +11801,11 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxi@3.22.3: {}
+  nuxi@3.22.4: {}
 
   nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0):
     dependencies:
-      '@nuxt/cli': 3.22.3(magicast@0.3.5)
+      '@nuxt/cli': 3.22.4(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
       '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
@@ -11899,7 +11927,7 @@ snapshots:
 
   nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0):
     dependencies:
-      '@nuxt/cli': 3.22.3(magicast@0.3.5)
+      '@nuxt/cli': 3.22.4(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
       '@nuxt/devtools': 1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
@@ -12019,7 +12047,7 @@ snapshots:
       - xml2js
       - yaml
 
-  nwsapi@2.2.16: {}
+  nwsapi@2.2.18: {}
 
   nypm@0.4.1:
     dependencies:
@@ -13016,6 +13044,12 @@ snapshots:
 
   shell-quote@1.8.2: {}
 
+  shiki@0.11.1:
+    dependencies:
+      jsonc-parser: 3.3.1
+      vscode-oniguruma: 1.7.0
+      vscode-textmate: 6.0.0
+
   siginfo@2.0.0: {}
 
   signal-exit@3.0.7: {}
@@ -13432,6 +13466,14 @@ snapshots:
 
   type-level-regexp@0.1.17: {}
 
+  typedoc@0.23.23(typescript@5.8.2):
+    dependencies:
+      lunr: 2.3.9
+      marked: 4.3.0
+      minimatch: 5.1.6
+      shiki: 0.11.1
+      typescript: 5.8.2
+
   typedoc@0.27.9(typescript@5.8.2):
     dependencies:
       '@gerrit0/mini-shiki': 1.27.2
@@ -14082,6 +14124,10 @@ snapshots:
     dependencies:
       vscode-languageserver-protocol: 3.16.0
 
+  vscode-oniguruma@1.7.0: {}
+
+  vscode-textmate@6.0.0: {}
+
   vscode-uri@3.1.0: {}
 
   vue-bundle-renderer@2.1.1:

From c9563b8987623a252c8a8803e0ab44664f19ed0a Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 15:04:24 +0300
Subject: [PATCH 39/77] Remove unused

---
 apps/showcase/doc/inputnumber/ButtonsDoc.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/showcase/doc/inputnumber/ButtonsDoc.vue b/apps/showcase/doc/inputnumber/ButtonsDoc.vue
index 9fc4ead2d..2a79f8dbc 100644
--- a/apps/showcase/doc/inputnumber/ButtonsDoc.vue
+++ b/apps/showcase/doc/inputnumber/ButtonsDoc.vue
@@ -5,16 +5,16 @@
     <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid disabled />
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid  />
         </div>
 
         <div class="flex-auto">
             <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid disabled />
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid  />
         </div>
         <div class="flex-auto">
             <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid disabled>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid >
                 <template #incrementbuttonicon>
                     <span class="pi pi-plus" />
                 </template>

From bc6cc92a25365438f9a0011d09c67134e4578b20 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Mon, 3 Mar 2025 12:50:58 +0000
Subject: [PATCH 40/77] refactor: rename labs with `volt`

---
 apps/labs/README.md                           |   1 -
 apps/labs/doc/selectbutton/ImportDoc.vue      |  16 -
 apps/labs/doc/timeline/ImportDoc.vue          |  16 -
 apps/labs/doc/togglebutton/ImportDoc.vue      |  16 -
 apps/labs/doc/toggleswitch/ImportDoc.vue      |  16 -
 apps/volt/README.md                           |   1 +
 apps/{labs => volt}/app.vue                   |   0
 apps/{labs => volt}/assets/data/menu.json     |   0
 apps/{labs => volt}/assets/data/news.json     |   0
 apps/{labs => volt}/assets/images/island1.jpg | Bin
 apps/{labs => volt}/assets/images/island2.jpg | Bin
 .../assets/styles/app/_code.scss              |   0
 .../assets/styles/app/_content.scss           |   0
 .../assets/styles/app/_core.scss              |   0
 .../assets/styles/app/_doc.scss               |   0
 .../assets/styles/app/_docsearch.scss         |   0
 .../assets/styles/app/_footer.scss            |   0
 .../assets/styles/app/_glow.scss              |   0
 .../assets/styles/app/_mixins.scss            |   0
 .../assets/styles/app/_news.scss              |   0
 .../assets/styles/app/_responsive.scss        |   0
 .../assets/styles/app/_sidebar.scss           |   0
 .../assets/styles/app/_topbar.scss            |   0
 .../{labs => volt}/assets/styles/app/app.scss |   0
 .../assets/styles/app/landing/_hero.scss      |   0
 .../assets/styles/app/landing/_landing.scss   |   0
 .../assets/styles/app/landing/_main.scss      |   0
 .../styles/app/variables/_variables.scss      |   0
 .../styles/app/variables/app/_dark.scss       |   0
 .../styles/app/variables/app/_light.scss      |   0
 .../app/variables/primevue/_common.scss       |   0
 .../styles/app/variables/primevue/_dark.scss  |   0
 .../styles/app/variables/primevue/_light.scss |   0
 .../assets/styles/demo/flags.css              |   0
 .../assets/styles/primevue/accordion.css      |   0
 .../assets/styles/primevue/autocomplete.css   |   0
 .../assets/styles/primevue/avatar.css         |   0
 .../assets/styles/primevue/badge.css          |   0
 .../assets/styles/primevue/blockui.css        |   0
 .../assets/styles/primevue/breadcrumb.css     |   0
 .../assets/styles/primevue/button.css         |   0
 .../assets/styles/primevue/buttongroup.css    |   0
 .../assets/styles/primevue/card.css           |   0
 .../assets/styles/primevue/carousel.css       |   0
 .../assets/styles/primevue/cascadeselect.css  |   0
 .../assets/styles/primevue/checkbox.css       |   0
 .../assets/styles/primevue/chip.css           |   0
 .../assets/styles/primevue/colorpicker.css    |   0
 .../assets/styles/primevue/common.css         |   0
 .../assets/styles/primevue/confirmdialog.css  |   0
 .../assets/styles/primevue/confirmpopup.css   |   0
 .../assets/styles/primevue/contextmenu.css    |   0
 .../assets/styles/primevue/datatable.css      |   0
 .../assets/styles/primevue/dataview.css       |   0
 .../assets/styles/primevue/datepicker.css     |   0
 .../assets/styles/primevue/dialog.css         |   0
 .../assets/styles/primevue/divider.css        |   0
 .../assets/styles/primevue/dock.css           |   0
 .../assets/styles/primevue/drawer.css         |   0
 .../assets/styles/primevue/fieldset.css       |   0
 .../assets/styles/primevue/fileupload.css     |   0
 .../assets/styles/primevue/floatlabel.css     |   0
 .../assets/styles/primevue/galleria.css       |   0
 .../assets/styles/primevue/iconfield.css      |   0
 .../assets/styles/primevue/iftalabel.css      |   0
 .../assets/styles/primevue/image.css          |   0
 .../assets/styles/primevue/imagecompare.css   |   0
 .../assets/styles/primevue/inplace.css        |   0
 .../assets/styles/primevue/inputgroup.css     |   0
 .../assets/styles/primevue/inputnumber.css    |   0
 .../assets/styles/primevue/inputotp.css       |   0
 .../assets/styles/primevue/inputtext.css      |   0
 .../assets/styles/primevue/knob.css           |   0
 .../assets/styles/primevue/listbox.css        |   0
 .../assets/styles/primevue/megamenu.css       |   0
 .../assets/styles/primevue/menu.css           |   0
 .../assets/styles/primevue/menubar.css        |   0
 .../assets/styles/primevue/message.css        |   0
 .../assets/styles/primevue/metergroup.css     |   0
 .../assets/styles/primevue/multiselect.css    |   0
 .../assets/styles/primevue/orderlist.css      |   0
 .../styles/primevue/organizationchart.css     |   0
 .../assets/styles/primevue/overlaybadge.css   |   0
 .../assets/styles/primevue/paginator.css      |   0
 .../assets/styles/primevue/panel.css          |   0
 .../assets/styles/primevue/panelmenu.css      |   0
 .../assets/styles/primevue/password.css       |   0
 .../assets/styles/primevue/picklist.css       |   0
 .../assets/styles/primevue/popover.css        |   0
 .../assets/styles/primevue/progressbar.css    |   0
 .../styles/primevue/progressspinner.css       |   0
 .../assets/styles/primevue/radiobutton.css    |   0
 .../assets/styles/primevue/rating.css         |   0
 .../assets/styles/primevue/ripple.css         |   0
 .../assets/styles/primevue/scrollpanel.css    |   0
 .../assets/styles/primevue/scrolltop.css      |   0
 .../assets/styles/primevue/select.css         |   0
 .../assets/styles/primevue/selectbutton.css   |   0
 .../assets/styles/primevue/skeleton.css       |   0
 .../assets/styles/primevue/slider.css         |   0
 .../assets/styles/primevue/speeddial.css      |   0
 .../assets/styles/primevue/splitbutton.css    |   0
 .../assets/styles/primevue/splitter.css       |   0
 .../assets/styles/primevue/stepper.css        |   0
 .../assets/styles/primevue/tabs.css           |   0
 .../assets/styles/primevue/tag.css            |   0
 .../assets/styles/primevue/tailwind.css       |   0
 .../assets/styles/primevue/terminal.css       |   0
 .../assets/styles/primevue/textarea.css       |   0
 .../assets/styles/primevue/tieredmenu.css     |   0
 .../assets/styles/primevue/timeline.css       |   0
 .../assets/styles/primevue/toast.css          |   0
 .../assets/styles/primevue/togglebutton.css   |   0
 .../assets/styles/primevue/toggleswitch.css   |   0
 .../assets/styles/primevue/toolbar.css        |   0
 .../assets/styles/primevue/tooltip.css        |   0
 .../assets/styles/primevue/tree.css           |   0
 .../assets/styles/primevue/treeselect.css     |   0
 .../assets/styles/primevue/treetable.css      |   0
 .../{labs => volt}/assets/styles/tailwind.css |   0
 .../components/app/AppConfigurator.vue        |   0
 .../components/app/AppFooter.vue              |   0
 .../{labs => volt}/components/app/AppMenu.vue |   0
 .../components/app/AppMenuItem.vue            |   0
 .../{labs => volt}/components/app/AppNews.vue |   0
 .../components/app/AppTopBar.vue              |   0
 .../components/app/PrimeVueNuxtLink.js        |   0
 .../components/demo/DeferredDemo.vue          |   0
 .../components/doc/DocComponent.vue           |   0
 .../components/doc/DocSectionCode.vue         |   0
 .../components/doc/DocSectionNav.vue          |   0
 .../components/doc/DocSectionText.vue         |   0
 .../components/doc/DocSections.vue            |   0
 .../components/doc/codeeditor/index.js        |   0
 .../components/doc/codeeditor/services.js     |   0
 .../components/doc/codeeditor/templates.js    |   0
 .../directives/CodeHighlight.js               |   0
 apps/{labs => volt}/doc/checkbox/BasicDoc.vue |   4 +-
 .../doc/checkbox/DisabledDoc.vue              |   4 +-
 .../doc/checkbox/DynamicDoc.vue               |   4 +-
 .../{labs => volt}/doc/checkbox/FilledDoc.vue |   4 +-
 apps/{labs => volt}/doc/checkbox/GroupDoc.vue |   4 +-
 .../{labs => volt}/doc/checkbox/ImportDoc.vue |   2 +-
 .../doc/checkbox/IndeterminateDoc.vue         |   4 +-
 .../doc/checkbox/InvalidDoc.vue               |   4 +-
 apps/{labs => volt}/doc/checkbox/SizesDoc.vue |   4 +-
 .../doc/icons/FontAwesomeDoc.vue              |   0
 apps/{labs => volt}/doc/icons/ImageDoc.vue    |   0
 apps/{labs => volt}/doc/icons/MaterialDoc.vue |   0
 apps/{labs => volt}/doc/icons/SVGDoc.vue      |   0
 apps/{labs => volt}/doc/icons/VideoDoc.vue    |   0
 .../{labs => volt}/doc/inputmask/BasicDoc.vue |   4 +-
 .../doc/inputmask/DisabledDoc.vue             |   4 +-
 .../doc/inputmask/FilledDoc.vue               |   4 +-
 .../doc/inputmask/ImportDoc.vue               |   2 +-
 .../doc/inputmask/InvalidDoc.vue              |   4 +-
 apps/{labs => volt}/doc/inputmask/MaskDoc.vue |   4 +-
 .../doc/inputmask/OptionalDoc.vue             |   4 +-
 .../{labs => volt}/doc/inputmask/SizesDoc.vue |   4 +-
 .../doc/inputmask/SlotCharDoc.vue             |   4 +-
 .../{labs => volt}/doc/inputtext/BasicDoc.vue |   4 +-
 .../doc/inputtext/DisabledDoc.vue             |   4 +-
 .../doc/inputtext/FilledDoc.vue               |   4 +-
 .../doc/inputtext}/HelpTextDoc.vue            |   4 +-
 .../doc/inputtext/ImportDoc.vue               |   2 +-
 .../doc/inputtext/InvalidDoc.vue              |   4 +-
 .../{labs => volt}/doc/inputtext/SizesDoc.vue |   4 +-
 .../doc/introduction/ArchitectureDoc.vue      |   2 +-
 .../doc/nuxt/CSSVariablesDoc.vue              |   0
 apps/{labs => volt}/doc/nuxt/DownloadDoc.vue  |   0
 apps/{labs => volt}/doc/nuxt/ExampleDoc.vue   |   0
 .../{labs => volt}/doc/nuxt/NuxtConfigDoc.vue |   0
 apps/{labs => volt}/doc/nuxt/StylesDoc.vue    |   0
 apps/{labs => volt}/doc/nuxt/TailwindDoc.vue  |   0
 .../doc/nuxt/tailwind/ImportStylesDoc.vue     |   0
 .../doc/nuxt/tailwind/PostCSSImportDoc.vue    |   0
 .../doc/nuxt/tailwind/PrimeUIPluginDoc.vue    |   0
 .../doc/radiobutton/DisabledDoc.vue           |   4 +-
 .../doc/radiobutton/DynamicDoc.vue            |   4 +-
 .../doc/radiobutton/FilledDoc.vue             |   4 +-
 .../doc/radiobutton/GroupDoc.vue              |   4 +-
 .../doc/radiobutton/ImportDoc.vue             |   2 +-
 .../doc/radiobutton/InvalidDoc.vue            |   4 +-
 .../doc/radiobutton/SizesDoc.vue              |   4 +-
 apps/{labs => volt}/doc/rating/BasicDoc.vue   |   4 +-
 .../{labs => volt}/doc/rating/DisabledDoc.vue |   4 +-
 .../slider => volt/doc/rating}/ImportDoc.vue  |   2 +-
 .../doc/rating/NumberOfStarsDoc.vue           |   4 +-
 .../{labs => volt}/doc/rating/ReadOnlyDoc.vue |   4 +-
 .../{labs => volt}/doc/rating/TemplateDoc.vue |   4 +-
 .../doc/selectbutton/BasicDoc.vue             |   4 +-
 .../doc/selectbutton/DisabledDoc.vue          |   4 +-
 apps/volt/doc/selectbutton/ImportDoc.vue      |  16 +
 .../doc/selectbutton/InvalidDoc.vue           |   4 +-
 .../doc/selectbutton/MultipleDoc.vue          |   4 +-
 .../doc/selectbutton/SizesDoc.vue             |   4 +-
 .../doc/selectbutton/TemplateDoc.vue          |   4 +-
 apps/{labs => volt}/doc/slider/BasicDoc.vue   |   4 +-
 apps/{labs => volt}/doc/slider/FilterDoc.vue  |   4 +-
 .../rating => volt/doc/slider}/ImportDoc.vue  |   2 +-
 apps/{labs => volt}/doc/slider/InputDoc.vue   |   8 +-
 apps/{labs => volt}/doc/slider/RangeDoc.vue   |   4 +-
 apps/{labs => volt}/doc/slider/StepDoc.vue    |   4 +-
 .../{labs => volt}/doc/slider/VerticalDoc.vue |   4 +-
 .../doc/textarea/AutoResizeDoc.vue            |   4 +-
 apps/{labs => volt}/doc/textarea/BasicDoc.vue |   4 +-
 .../doc/textarea/DisabledDoc.vue              |   4 +-
 .../{labs => volt}/doc/textarea/FilledDoc.vue |   4 +-
 .../doc/textarea}/HelpTextDoc.vue             |   4 +-
 .../{labs => volt}/doc/textarea/ImportDoc.vue |   2 +-
 .../doc/textarea/InvalidDoc.vue               |   4 +-
 apps/{labs => volt}/doc/textarea/SizesDoc.vue |   4 +-
 .../doc/timeline/AlignmentDoc.vue             |   4 +-
 apps/{labs => volt}/doc/timeline/BasicDoc.vue |   4 +-
 .../doc/timeline/HorizontalDoc.vue            |   4 +-
 apps/volt/doc/timeline/ImportDoc.vue          |  16 +
 .../doc/timeline/OppositeDoc.vue              |   4 +-
 .../doc/timeline/TemplateDoc.vue              |   4 +-
 .../doc/togglebutton/BasicDoc.vue             |   4 +-
 .../doc/togglebutton/CustomizedDoc.vue        |   4 +-
 .../doc/togglebutton/DisabledDoc.vue          |   4 +-
 apps/volt/doc/togglebutton/ImportDoc.vue      |  16 +
 .../doc/togglebutton/InvalidDoc.vue           |   4 +-
 .../doc/togglebutton/SizesDoc.vue             |   4 +-
 .../doc/toggleswitch/BasicDoc.vue             |   4 +-
 .../doc/toggleswitch/DisabledDoc.vue          |   4 +-
 apps/volt/doc/toggleswitch/ImportDoc.vue      |  16 +
 .../doc/toggleswitch/InvalidDoc.vue           |   4 +-
 .../doc/toggleswitch/PreselectionDoc.vue      |   4 +-
 .../doc/toggleswitch/TemplateDoc.vue          |   4 +-
 .../doc/vite/CSSVariablesDoc.vue              |   0
 apps/{labs => volt}/doc/vite/DownloadDoc.vue  |   0
 apps/{labs => volt}/doc/vite/ExampleDoc.vue   |   0
 apps/{labs => volt}/doc/vite/PluginDoc.vue    |   0
 apps/{labs => volt}/doc/vite/StylesDoc.vue    |   0
 apps/{labs => volt}/doc/vite/TailwindDoc.vue  |   0
 .../doc/vite/tailwind/ImportStylesDoc.vue     |   0
 .../doc/vite/tailwind/PostCSSImportDoc.vue    |   0
 .../doc/vite/tailwind/PrimeUIPluginDoc.vue    |   0
 apps/{labs => volt}/error.vue                 |   0
 apps/{labs => volt}/layouts/AppEventBus.js    |   0
 apps/{labs => volt}/layouts/custom.vue        |   0
 apps/{labs => volt}/layouts/default.vue       |   0
 .../{labs => volt}/middleware/route.global.js |   0
 apps/{labs => volt}/nuxt.config.js            |   2 +-
 apps/{labs => volt}/package.json              |   4 +-
 apps/{labs => volt}/pages/checkbox/index.vue  |   0
 apps/{labs => volt}/pages/icons/index.vue     |   6 +-
 apps/{labs => volt}/pages/index.vue           |   0
 apps/{labs => volt}/pages/inputmask/index.vue |   0
 apps/{labs => volt}/pages/inputtext/index.vue |   0
 .../pages/introduction/index.vue              |   0
 apps/{labs => volt}/pages/nuxt/index.vue      |   0
 .../pages/radiobutton/index.vue               |   0
 apps/{labs => volt}/pages/rating/index.vue    |   0
 .../pages/selectbutton/index.vue              |   0
 apps/{labs => volt}/pages/slider/index.vue    |   0
 apps/{labs => volt}/pages/textarea/index.vue  |   0
 apps/{labs => volt}/pages/timeline/index.vue  |   0
 .../pages/togglebutton/index.vue              |   0
 .../pages/toggleswitch/index.vue              |   0
 apps/{labs => volt}/pages/vite/index.vue      |   0
 apps/{labs => volt}/plugins/app.js            |   0
 apps/{labs => volt}/public/favicon.ico        | Bin
 apps/{labs => volt}/public/scripts/prism.js   |   0
 .../{labs => volt}/scripts/build-presetdoc.js |   0
 apps/{labs => volt}/scripts/prebuild.js       |   0
 apps/{labs => volt}/service/CarService.js     |   0
 apps/{labs => volt}/service/CountryService.js |   0
 .../{labs => volt}/service/CustomerService.js |   0
 apps/{labs => volt}/service/EventService.js   |   0
 apps/{labs => volt}/service/IconService.js    |   0
 apps/{labs => volt}/service/NodeService.js    |   0
 apps/{labs => volt}/service/PhotoService.js   |   0
 apps/{labs => volt}/service/ProductService.js |   0
 apps/{labs => volt}/tailwind.config.js        |   2 +-
 apps/{labs => volt}/tsconfig.json             |   0
 .../plex => volt/volt}/checkbox/index.vue     |   0
 .../plex => volt/volt}/inputmask/index.vue    |   0
 .../plex => volt/volt}/inputtext/index.vue    |   0
 .../plex => volt/volt}/radiobutton/index.vue  |   0
 .../{labs/plex => volt/volt}/rating/index.vue |   0
 .../plex => volt/volt}/selectbutton/index.vue |   0
 .../{labs/plex => volt/volt}/slider/index.vue |   0
 .../plex => volt/volt}/textarea/index.vue     |   0
 .../plex => volt/volt}/timeline/index.vue     |   0
 .../plex => volt/volt}/togglebutton/index.vue |   0
 .../plex => volt/volt}/toggleswitch/index.vue |   0
 apps/{labs/plex => volt/volt}/utils/index.js  |   0
 package.json                                  |   4 +-
 pnpm-lock.yaml                                | 502 +++++++++---------
 291 files changed, 469 insertions(+), 469 deletions(-)
 delete mode 100644 apps/labs/README.md
 delete mode 100644 apps/labs/doc/selectbutton/ImportDoc.vue
 delete mode 100644 apps/labs/doc/timeline/ImportDoc.vue
 delete mode 100644 apps/labs/doc/togglebutton/ImportDoc.vue
 delete mode 100644 apps/labs/doc/toggleswitch/ImportDoc.vue
 create mode 100644 apps/volt/README.md
 rename apps/{labs => volt}/app.vue (100%)
 rename apps/{labs => volt}/assets/data/menu.json (100%)
 rename apps/{labs => volt}/assets/data/news.json (100%)
 rename apps/{labs => volt}/assets/images/island1.jpg (100%)
 rename apps/{labs => volt}/assets/images/island2.jpg (100%)
 rename apps/{labs => volt}/assets/styles/app/_code.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_content.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_core.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_doc.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_docsearch.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_footer.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_glow.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_mixins.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_news.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_responsive.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_sidebar.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/_topbar.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/app.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/landing/_hero.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/landing/_landing.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/landing/_main.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/variables/_variables.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/variables/app/_dark.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/variables/app/_light.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/variables/primevue/_common.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/variables/primevue/_dark.scss (100%)
 rename apps/{labs => volt}/assets/styles/app/variables/primevue/_light.scss (100%)
 rename apps/{labs => volt}/assets/styles/demo/flags.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/accordion.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/autocomplete.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/avatar.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/badge.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/blockui.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/breadcrumb.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/button.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/buttongroup.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/card.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/carousel.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/cascadeselect.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/checkbox.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/chip.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/colorpicker.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/common.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/confirmdialog.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/confirmpopup.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/contextmenu.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/datatable.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/dataview.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/datepicker.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/dialog.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/divider.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/dock.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/drawer.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/fieldset.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/fileupload.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/floatlabel.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/galleria.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/iconfield.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/iftalabel.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/image.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/imagecompare.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/inplace.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/inputgroup.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/inputnumber.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/inputotp.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/inputtext.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/knob.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/listbox.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/megamenu.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/menu.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/menubar.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/message.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/metergroup.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/multiselect.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/orderlist.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/organizationchart.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/overlaybadge.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/paginator.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/panel.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/panelmenu.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/password.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/picklist.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/popover.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/progressbar.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/progressspinner.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/radiobutton.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/rating.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/ripple.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/scrollpanel.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/scrolltop.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/select.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/selectbutton.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/skeleton.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/slider.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/speeddial.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/splitbutton.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/splitter.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/stepper.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/tabs.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/tag.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/tailwind.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/terminal.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/textarea.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/tieredmenu.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/timeline.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/toast.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/togglebutton.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/toggleswitch.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/toolbar.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/tooltip.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/tree.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/treeselect.css (100%)
 rename apps/{labs => volt}/assets/styles/primevue/treetable.css (100%)
 rename apps/{labs => volt}/assets/styles/tailwind.css (100%)
 rename apps/{labs => volt}/components/app/AppConfigurator.vue (100%)
 rename apps/{labs => volt}/components/app/AppFooter.vue (100%)
 rename apps/{labs => volt}/components/app/AppMenu.vue (100%)
 rename apps/{labs => volt}/components/app/AppMenuItem.vue (100%)
 rename apps/{labs => volt}/components/app/AppNews.vue (100%)
 rename apps/{labs => volt}/components/app/AppTopBar.vue (100%)
 rename apps/{labs => volt}/components/app/PrimeVueNuxtLink.js (100%)
 rename apps/{labs => volt}/components/demo/DeferredDemo.vue (100%)
 rename apps/{labs => volt}/components/doc/DocComponent.vue (100%)
 rename apps/{labs => volt}/components/doc/DocSectionCode.vue (100%)
 rename apps/{labs => volt}/components/doc/DocSectionNav.vue (100%)
 rename apps/{labs => volt}/components/doc/DocSectionText.vue (100%)
 rename apps/{labs => volt}/components/doc/DocSections.vue (100%)
 rename apps/{labs => volt}/components/doc/codeeditor/index.js (100%)
 rename apps/{labs => volt}/components/doc/codeeditor/services.js (100%)
 rename apps/{labs => volt}/components/doc/codeeditor/templates.js (100%)
 rename apps/{labs => volt}/directives/CodeHighlight.js (100%)
 rename apps/{labs => volt}/doc/checkbox/BasicDoc.vue (89%)
 rename apps/{labs => volt}/doc/checkbox/DisabledDoc.vue (91%)
 rename apps/{labs => volt}/doc/checkbox/DynamicDoc.vue (95%)
 rename apps/{labs => volt}/doc/checkbox/FilledDoc.vue (90%)
 rename apps/{labs => volt}/doc/checkbox/GroupDoc.vue (96%)
 rename apps/{labs => volt}/doc/checkbox/ImportDoc.vue (84%)
 rename apps/{labs => volt}/doc/checkbox/IndeterminateDoc.vue (89%)
 rename apps/{labs => volt}/doc/checkbox/InvalidDoc.vue (90%)
 rename apps/{labs => volt}/doc/checkbox/SizesDoc.vue (95%)
 rename apps/{labs => volt}/doc/icons/FontAwesomeDoc.vue (100%)
 rename apps/{labs => volt}/doc/icons/ImageDoc.vue (100%)
 rename apps/{labs => volt}/doc/icons/MaterialDoc.vue (100%)
 rename apps/{labs => volt}/doc/icons/SVGDoc.vue (100%)
 rename apps/{labs => volt}/doc/icons/VideoDoc.vue (100%)
 rename apps/{labs => volt}/doc/inputmask/BasicDoc.vue (89%)
 rename apps/{labs => volt}/doc/inputmask/DisabledDoc.vue (89%)
 rename apps/{labs => volt}/doc/inputmask/FilledDoc.vue (90%)
 rename apps/{labs => volt}/doc/inputmask/ImportDoc.vue (84%)
 rename apps/{labs => volt}/doc/inputmask/InvalidDoc.vue (90%)
 rename apps/{labs => volt}/doc/inputmask/MaskDoc.vue (96%)
 rename apps/{labs => volt}/doc/inputmask/OptionalDoc.vue (91%)
 rename apps/{labs => volt}/doc/inputmask/SizesDoc.vue (93%)
 rename apps/{labs => volt}/doc/inputmask/SlotCharDoc.vue (89%)
 rename apps/{labs => volt}/doc/inputtext/BasicDoc.vue (87%)
 rename apps/{labs => volt}/doc/inputtext/DisabledDoc.vue (88%)
 rename apps/{labs => volt}/doc/inputtext/FilledDoc.vue (89%)
 rename apps/{labs/doc/textarea => volt/doc/inputtext}/HelpTextDoc.vue (88%)
 rename apps/{labs => volt}/doc/inputtext/ImportDoc.vue (84%)
 rename apps/{labs => volt}/doc/inputtext/InvalidDoc.vue (90%)
 rename apps/{labs => volt}/doc/inputtext/SizesDoc.vue (93%)
 rename apps/{labs => volt}/doc/introduction/ArchitectureDoc.vue (60%)
 rename apps/{labs => volt}/doc/nuxt/CSSVariablesDoc.vue (100%)
 rename apps/{labs => volt}/doc/nuxt/DownloadDoc.vue (100%)
 rename apps/{labs => volt}/doc/nuxt/ExampleDoc.vue (100%)
 rename apps/{labs => volt}/doc/nuxt/NuxtConfigDoc.vue (100%)
 rename apps/{labs => volt}/doc/nuxt/StylesDoc.vue (100%)
 rename apps/{labs => volt}/doc/nuxt/TailwindDoc.vue (100%)
 rename apps/{labs => volt}/doc/nuxt/tailwind/ImportStylesDoc.vue (100%)
 rename apps/{labs => volt}/doc/nuxt/tailwind/PostCSSImportDoc.vue (100%)
 rename apps/{labs => volt}/doc/nuxt/tailwind/PrimeUIPluginDoc.vue (100%)
 rename apps/{labs => volt}/doc/radiobutton/DisabledDoc.vue (89%)
 rename apps/{labs => volt}/doc/radiobutton/DynamicDoc.vue (94%)
 rename apps/{labs => volt}/doc/radiobutton/FilledDoc.vue (88%)
 rename apps/{labs => volt}/doc/radiobutton/GroupDoc.vue (96%)
 rename apps/{labs => volt}/doc/radiobutton/ImportDoc.vue (82%)
 rename apps/{labs => volt}/doc/radiobutton/InvalidDoc.vue (89%)
 rename apps/{labs => volt}/doc/radiobutton/SizesDoc.vue (95%)
 rename apps/{labs => volt}/doc/rating/BasicDoc.vue (89%)
 rename apps/{labs => volt}/doc/rating/DisabledDoc.vue (89%)
 rename apps/{labs/doc/slider => volt/doc/rating}/ImportDoc.vue (85%)
 rename apps/{labs => volt}/doc/rating/NumberOfStarsDoc.vue (89%)
 rename apps/{labs => volt}/doc/rating/ReadOnlyDoc.vue (89%)
 rename apps/{labs => volt}/doc/rating/TemplateDoc.vue (95%)
 rename apps/{labs => volt}/doc/selectbutton/BasicDoc.vue (91%)
 rename apps/{labs => volt}/doc/selectbutton/DisabledDoc.vue (93%)
 create mode 100644 apps/volt/doc/selectbutton/ImportDoc.vue
 rename apps/{labs => volt}/doc/selectbutton/InvalidDoc.vue (90%)
 rename apps/{labs => volt}/doc/selectbutton/MultipleDoc.vue (92%)
 rename apps/{labs => volt}/doc/selectbutton/SizesDoc.vue (92%)
 rename apps/{labs => volt}/doc/selectbutton/TemplateDoc.vue (94%)
 rename apps/{labs => volt}/doc/slider/BasicDoc.vue (89%)
 rename apps/{labs => volt}/doc/slider/FilterDoc.vue (89%)
 rename apps/{labs/doc/rating => volt/doc/slider}/ImportDoc.vue (85%)
 rename apps/{labs => volt}/doc/slider/InputDoc.vue (83%)
 rename apps/{labs => volt}/doc/slider/RangeDoc.vue (90%)
 rename apps/{labs => volt}/doc/slider/StepDoc.vue (89%)
 rename apps/{labs => volt}/doc/slider/VerticalDoc.vue (90%)
 rename apps/{labs => volt}/doc/textarea/AutoResizeDoc.vue (89%)
 rename apps/{labs => volt}/doc/textarea/BasicDoc.vue (89%)
 rename apps/{labs => volt}/doc/textarea/DisabledDoc.vue (89%)
 rename apps/{labs => volt}/doc/textarea/FilledDoc.vue (90%)
 rename apps/{labs/doc/inputtext => volt/doc/textarea}/HelpTextDoc.vue (88%)
 rename apps/{labs => volt}/doc/textarea/ImportDoc.vue (84%)
 rename apps/{labs => volt}/doc/textarea/InvalidDoc.vue (91%)
 rename apps/{labs => volt}/doc/textarea/SizesDoc.vue (93%)
 rename apps/{labs => volt}/doc/timeline/AlignmentDoc.vue (96%)
 rename apps/{labs => volt}/doc/timeline/BasicDoc.vue (95%)
 rename apps/{labs => volt}/doc/timeline/HorizontalDoc.vue (96%)
 create mode 100644 apps/volt/doc/timeline/ImportDoc.vue
 rename apps/{labs => volt}/doc/timeline/OppositeDoc.vue (96%)
 rename apps/{labs => volt}/doc/timeline/TemplateDoc.vue (98%)
 rename apps/{labs => volt}/doc/togglebutton/BasicDoc.vue (87%)
 rename apps/{labs => volt}/doc/togglebutton/CustomizedDoc.vue (90%)
 rename apps/{labs => volt}/doc/togglebutton/DisabledDoc.vue (89%)
 create mode 100644 apps/volt/doc/togglebutton/ImportDoc.vue
 rename apps/{labs => volt}/doc/togglebutton/InvalidDoc.vue (90%)
 rename apps/{labs => volt}/doc/togglebutton/SizesDoc.vue (92%)
 rename apps/{labs => volt}/doc/toggleswitch/BasicDoc.vue (86%)
 rename apps/{labs => volt}/doc/toggleswitch/DisabledDoc.vue (86%)
 create mode 100644 apps/volt/doc/toggleswitch/ImportDoc.vue
 rename apps/{labs => volt}/doc/toggleswitch/InvalidDoc.vue (88%)
 rename apps/{labs => volt}/doc/toggleswitch/PreselectionDoc.vue (86%)
 rename apps/{labs => volt}/doc/toggleswitch/TemplateDoc.vue (91%)
 rename apps/{labs => volt}/doc/vite/CSSVariablesDoc.vue (100%)
 rename apps/{labs => volt}/doc/vite/DownloadDoc.vue (100%)
 rename apps/{labs => volt}/doc/vite/ExampleDoc.vue (100%)
 rename apps/{labs => volt}/doc/vite/PluginDoc.vue (100%)
 rename apps/{labs => volt}/doc/vite/StylesDoc.vue (100%)
 rename apps/{labs => volt}/doc/vite/TailwindDoc.vue (100%)
 rename apps/{labs => volt}/doc/vite/tailwind/ImportStylesDoc.vue (100%)
 rename apps/{labs => volt}/doc/vite/tailwind/PostCSSImportDoc.vue (100%)
 rename apps/{labs => volt}/doc/vite/tailwind/PrimeUIPluginDoc.vue (100%)
 rename apps/{labs => volt}/error.vue (100%)
 rename apps/{labs => volt}/layouts/AppEventBus.js (100%)
 rename apps/{labs => volt}/layouts/custom.vue (100%)
 rename apps/{labs => volt}/layouts/default.vue (100%)
 rename apps/{labs => volt}/middleware/route.global.js (100%)
 rename apps/{labs => volt}/nuxt.config.js (98%)
 rename apps/{labs => volt}/package.json (96%)
 rename apps/{labs => volt}/pages/checkbox/index.vue (100%)
 rename apps/{labs => volt}/pages/icons/index.vue (90%)
 rename apps/{labs => volt}/pages/index.vue (100%)
 rename apps/{labs => volt}/pages/inputmask/index.vue (100%)
 rename apps/{labs => volt}/pages/inputtext/index.vue (100%)
 rename apps/{labs => volt}/pages/introduction/index.vue (100%)
 rename apps/{labs => volt}/pages/nuxt/index.vue (100%)
 rename apps/{labs => volt}/pages/radiobutton/index.vue (100%)
 rename apps/{labs => volt}/pages/rating/index.vue (100%)
 rename apps/{labs => volt}/pages/selectbutton/index.vue (100%)
 rename apps/{labs => volt}/pages/slider/index.vue (100%)
 rename apps/{labs => volt}/pages/textarea/index.vue (100%)
 rename apps/{labs => volt}/pages/timeline/index.vue (100%)
 rename apps/{labs => volt}/pages/togglebutton/index.vue (100%)
 rename apps/{labs => volt}/pages/toggleswitch/index.vue (100%)
 rename apps/{labs => volt}/pages/vite/index.vue (100%)
 rename apps/{labs => volt}/plugins/app.js (100%)
 rename apps/{labs => volt}/public/favicon.ico (100%)
 rename apps/{labs => volt}/public/scripts/prism.js (100%)
 rename apps/{labs => volt}/scripts/build-presetdoc.js (100%)
 rename apps/{labs => volt}/scripts/prebuild.js (100%)
 rename apps/{labs => volt}/service/CarService.js (100%)
 rename apps/{labs => volt}/service/CountryService.js (100%)
 rename apps/{labs => volt}/service/CustomerService.js (100%)
 rename apps/{labs => volt}/service/EventService.js (100%)
 rename apps/{labs => volt}/service/IconService.js (100%)
 rename apps/{labs => volt}/service/NodeService.js (100%)
 rename apps/{labs => volt}/service/PhotoService.js (100%)
 rename apps/{labs => volt}/service/ProductService.js (100%)
 rename apps/{labs => volt}/tailwind.config.js (96%)
 rename apps/{labs => volt}/tsconfig.json (100%)
 rename apps/{labs/plex => volt/volt}/checkbox/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/inputmask/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/inputtext/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/radiobutton/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/rating/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/selectbutton/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/slider/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/textarea/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/timeline/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/togglebutton/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/toggleswitch/index.vue (100%)
 rename apps/{labs/plex => volt/volt}/utils/index.js (100%)

diff --git a/apps/labs/README.md b/apps/labs/README.md
deleted file mode 100644
index 21b499c04..000000000
--- a/apps/labs/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# Labs
diff --git a/apps/labs/doc/selectbutton/ImportDoc.vue b/apps/labs/doc/selectbutton/ImportDoc.vue
deleted file mode 100644
index 00010e8bf..000000000
--- a/apps/labs/doc/selectbutton/ImportDoc.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" lang="script" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: `
-import SelectButton from '@/plex/selectbutton';
-`
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/timeline/ImportDoc.vue b/apps/labs/doc/timeline/ImportDoc.vue
deleted file mode 100644
index 58d1d57e4..000000000
--- a/apps/labs/doc/timeline/ImportDoc.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" lang="script" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: `
-import Timeline from '@/plex/timeline';
-`
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/togglebutton/ImportDoc.vue b/apps/labs/doc/togglebutton/ImportDoc.vue
deleted file mode 100644
index 0571453f0..000000000
--- a/apps/labs/doc/togglebutton/ImportDoc.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" lang="script" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: `
-import ToggleButton from '@/plex/togglebutton';
-`
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/toggleswitch/ImportDoc.vue b/apps/labs/doc/toggleswitch/ImportDoc.vue
deleted file mode 100644
index 0024a8afb..000000000
--- a/apps/labs/doc/toggleswitch/ImportDoc.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" lang="script" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: `
-import ToggleSwitch from '@/plex/toggleswitch';
-`
-        };
-    }
-};
-</script>
diff --git a/apps/volt/README.md b/apps/volt/README.md
new file mode 100644
index 000000000..ce474ff5b
--- /dev/null
+++ b/apps/volt/README.md
@@ -0,0 +1 @@
+# Volt
diff --git a/apps/labs/app.vue b/apps/volt/app.vue
similarity index 100%
rename from apps/labs/app.vue
rename to apps/volt/app.vue
diff --git a/apps/labs/assets/data/menu.json b/apps/volt/assets/data/menu.json
similarity index 100%
rename from apps/labs/assets/data/menu.json
rename to apps/volt/assets/data/menu.json
diff --git a/apps/labs/assets/data/news.json b/apps/volt/assets/data/news.json
similarity index 100%
rename from apps/labs/assets/data/news.json
rename to apps/volt/assets/data/news.json
diff --git a/apps/labs/assets/images/island1.jpg b/apps/volt/assets/images/island1.jpg
similarity index 100%
rename from apps/labs/assets/images/island1.jpg
rename to apps/volt/assets/images/island1.jpg
diff --git a/apps/labs/assets/images/island2.jpg b/apps/volt/assets/images/island2.jpg
similarity index 100%
rename from apps/labs/assets/images/island2.jpg
rename to apps/volt/assets/images/island2.jpg
diff --git a/apps/labs/assets/styles/app/_code.scss b/apps/volt/assets/styles/app/_code.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_code.scss
rename to apps/volt/assets/styles/app/_code.scss
diff --git a/apps/labs/assets/styles/app/_content.scss b/apps/volt/assets/styles/app/_content.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_content.scss
rename to apps/volt/assets/styles/app/_content.scss
diff --git a/apps/labs/assets/styles/app/_core.scss b/apps/volt/assets/styles/app/_core.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_core.scss
rename to apps/volt/assets/styles/app/_core.scss
diff --git a/apps/labs/assets/styles/app/_doc.scss b/apps/volt/assets/styles/app/_doc.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_doc.scss
rename to apps/volt/assets/styles/app/_doc.scss
diff --git a/apps/labs/assets/styles/app/_docsearch.scss b/apps/volt/assets/styles/app/_docsearch.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_docsearch.scss
rename to apps/volt/assets/styles/app/_docsearch.scss
diff --git a/apps/labs/assets/styles/app/_footer.scss b/apps/volt/assets/styles/app/_footer.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_footer.scss
rename to apps/volt/assets/styles/app/_footer.scss
diff --git a/apps/labs/assets/styles/app/_glow.scss b/apps/volt/assets/styles/app/_glow.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_glow.scss
rename to apps/volt/assets/styles/app/_glow.scss
diff --git a/apps/labs/assets/styles/app/_mixins.scss b/apps/volt/assets/styles/app/_mixins.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_mixins.scss
rename to apps/volt/assets/styles/app/_mixins.scss
diff --git a/apps/labs/assets/styles/app/_news.scss b/apps/volt/assets/styles/app/_news.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_news.scss
rename to apps/volt/assets/styles/app/_news.scss
diff --git a/apps/labs/assets/styles/app/_responsive.scss b/apps/volt/assets/styles/app/_responsive.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_responsive.scss
rename to apps/volt/assets/styles/app/_responsive.scss
diff --git a/apps/labs/assets/styles/app/_sidebar.scss b/apps/volt/assets/styles/app/_sidebar.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_sidebar.scss
rename to apps/volt/assets/styles/app/_sidebar.scss
diff --git a/apps/labs/assets/styles/app/_topbar.scss b/apps/volt/assets/styles/app/_topbar.scss
similarity index 100%
rename from apps/labs/assets/styles/app/_topbar.scss
rename to apps/volt/assets/styles/app/_topbar.scss
diff --git a/apps/labs/assets/styles/app/app.scss b/apps/volt/assets/styles/app/app.scss
similarity index 100%
rename from apps/labs/assets/styles/app/app.scss
rename to apps/volt/assets/styles/app/app.scss
diff --git a/apps/labs/assets/styles/app/landing/_hero.scss b/apps/volt/assets/styles/app/landing/_hero.scss
similarity index 100%
rename from apps/labs/assets/styles/app/landing/_hero.scss
rename to apps/volt/assets/styles/app/landing/_hero.scss
diff --git a/apps/labs/assets/styles/app/landing/_landing.scss b/apps/volt/assets/styles/app/landing/_landing.scss
similarity index 100%
rename from apps/labs/assets/styles/app/landing/_landing.scss
rename to apps/volt/assets/styles/app/landing/_landing.scss
diff --git a/apps/labs/assets/styles/app/landing/_main.scss b/apps/volt/assets/styles/app/landing/_main.scss
similarity index 100%
rename from apps/labs/assets/styles/app/landing/_main.scss
rename to apps/volt/assets/styles/app/landing/_main.scss
diff --git a/apps/labs/assets/styles/app/variables/_variables.scss b/apps/volt/assets/styles/app/variables/_variables.scss
similarity index 100%
rename from apps/labs/assets/styles/app/variables/_variables.scss
rename to apps/volt/assets/styles/app/variables/_variables.scss
diff --git a/apps/labs/assets/styles/app/variables/app/_dark.scss b/apps/volt/assets/styles/app/variables/app/_dark.scss
similarity index 100%
rename from apps/labs/assets/styles/app/variables/app/_dark.scss
rename to apps/volt/assets/styles/app/variables/app/_dark.scss
diff --git a/apps/labs/assets/styles/app/variables/app/_light.scss b/apps/volt/assets/styles/app/variables/app/_light.scss
similarity index 100%
rename from apps/labs/assets/styles/app/variables/app/_light.scss
rename to apps/volt/assets/styles/app/variables/app/_light.scss
diff --git a/apps/labs/assets/styles/app/variables/primevue/_common.scss b/apps/volt/assets/styles/app/variables/primevue/_common.scss
similarity index 100%
rename from apps/labs/assets/styles/app/variables/primevue/_common.scss
rename to apps/volt/assets/styles/app/variables/primevue/_common.scss
diff --git a/apps/labs/assets/styles/app/variables/primevue/_dark.scss b/apps/volt/assets/styles/app/variables/primevue/_dark.scss
similarity index 100%
rename from apps/labs/assets/styles/app/variables/primevue/_dark.scss
rename to apps/volt/assets/styles/app/variables/primevue/_dark.scss
diff --git a/apps/labs/assets/styles/app/variables/primevue/_light.scss b/apps/volt/assets/styles/app/variables/primevue/_light.scss
similarity index 100%
rename from apps/labs/assets/styles/app/variables/primevue/_light.scss
rename to apps/volt/assets/styles/app/variables/primevue/_light.scss
diff --git a/apps/labs/assets/styles/demo/flags.css b/apps/volt/assets/styles/demo/flags.css
similarity index 100%
rename from apps/labs/assets/styles/demo/flags.css
rename to apps/volt/assets/styles/demo/flags.css
diff --git a/apps/labs/assets/styles/primevue/accordion.css b/apps/volt/assets/styles/primevue/accordion.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/accordion.css
rename to apps/volt/assets/styles/primevue/accordion.css
diff --git a/apps/labs/assets/styles/primevue/autocomplete.css b/apps/volt/assets/styles/primevue/autocomplete.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/autocomplete.css
rename to apps/volt/assets/styles/primevue/autocomplete.css
diff --git a/apps/labs/assets/styles/primevue/avatar.css b/apps/volt/assets/styles/primevue/avatar.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/avatar.css
rename to apps/volt/assets/styles/primevue/avatar.css
diff --git a/apps/labs/assets/styles/primevue/badge.css b/apps/volt/assets/styles/primevue/badge.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/badge.css
rename to apps/volt/assets/styles/primevue/badge.css
diff --git a/apps/labs/assets/styles/primevue/blockui.css b/apps/volt/assets/styles/primevue/blockui.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/blockui.css
rename to apps/volt/assets/styles/primevue/blockui.css
diff --git a/apps/labs/assets/styles/primevue/breadcrumb.css b/apps/volt/assets/styles/primevue/breadcrumb.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/breadcrumb.css
rename to apps/volt/assets/styles/primevue/breadcrumb.css
diff --git a/apps/labs/assets/styles/primevue/button.css b/apps/volt/assets/styles/primevue/button.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/button.css
rename to apps/volt/assets/styles/primevue/button.css
diff --git a/apps/labs/assets/styles/primevue/buttongroup.css b/apps/volt/assets/styles/primevue/buttongroup.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/buttongroup.css
rename to apps/volt/assets/styles/primevue/buttongroup.css
diff --git a/apps/labs/assets/styles/primevue/card.css b/apps/volt/assets/styles/primevue/card.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/card.css
rename to apps/volt/assets/styles/primevue/card.css
diff --git a/apps/labs/assets/styles/primevue/carousel.css b/apps/volt/assets/styles/primevue/carousel.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/carousel.css
rename to apps/volt/assets/styles/primevue/carousel.css
diff --git a/apps/labs/assets/styles/primevue/cascadeselect.css b/apps/volt/assets/styles/primevue/cascadeselect.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/cascadeselect.css
rename to apps/volt/assets/styles/primevue/cascadeselect.css
diff --git a/apps/labs/assets/styles/primevue/checkbox.css b/apps/volt/assets/styles/primevue/checkbox.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/checkbox.css
rename to apps/volt/assets/styles/primevue/checkbox.css
diff --git a/apps/labs/assets/styles/primevue/chip.css b/apps/volt/assets/styles/primevue/chip.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/chip.css
rename to apps/volt/assets/styles/primevue/chip.css
diff --git a/apps/labs/assets/styles/primevue/colorpicker.css b/apps/volt/assets/styles/primevue/colorpicker.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/colorpicker.css
rename to apps/volt/assets/styles/primevue/colorpicker.css
diff --git a/apps/labs/assets/styles/primevue/common.css b/apps/volt/assets/styles/primevue/common.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/common.css
rename to apps/volt/assets/styles/primevue/common.css
diff --git a/apps/labs/assets/styles/primevue/confirmdialog.css b/apps/volt/assets/styles/primevue/confirmdialog.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/confirmdialog.css
rename to apps/volt/assets/styles/primevue/confirmdialog.css
diff --git a/apps/labs/assets/styles/primevue/confirmpopup.css b/apps/volt/assets/styles/primevue/confirmpopup.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/confirmpopup.css
rename to apps/volt/assets/styles/primevue/confirmpopup.css
diff --git a/apps/labs/assets/styles/primevue/contextmenu.css b/apps/volt/assets/styles/primevue/contextmenu.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/contextmenu.css
rename to apps/volt/assets/styles/primevue/contextmenu.css
diff --git a/apps/labs/assets/styles/primevue/datatable.css b/apps/volt/assets/styles/primevue/datatable.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/datatable.css
rename to apps/volt/assets/styles/primevue/datatable.css
diff --git a/apps/labs/assets/styles/primevue/dataview.css b/apps/volt/assets/styles/primevue/dataview.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/dataview.css
rename to apps/volt/assets/styles/primevue/dataview.css
diff --git a/apps/labs/assets/styles/primevue/datepicker.css b/apps/volt/assets/styles/primevue/datepicker.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/datepicker.css
rename to apps/volt/assets/styles/primevue/datepicker.css
diff --git a/apps/labs/assets/styles/primevue/dialog.css b/apps/volt/assets/styles/primevue/dialog.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/dialog.css
rename to apps/volt/assets/styles/primevue/dialog.css
diff --git a/apps/labs/assets/styles/primevue/divider.css b/apps/volt/assets/styles/primevue/divider.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/divider.css
rename to apps/volt/assets/styles/primevue/divider.css
diff --git a/apps/labs/assets/styles/primevue/dock.css b/apps/volt/assets/styles/primevue/dock.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/dock.css
rename to apps/volt/assets/styles/primevue/dock.css
diff --git a/apps/labs/assets/styles/primevue/drawer.css b/apps/volt/assets/styles/primevue/drawer.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/drawer.css
rename to apps/volt/assets/styles/primevue/drawer.css
diff --git a/apps/labs/assets/styles/primevue/fieldset.css b/apps/volt/assets/styles/primevue/fieldset.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/fieldset.css
rename to apps/volt/assets/styles/primevue/fieldset.css
diff --git a/apps/labs/assets/styles/primevue/fileupload.css b/apps/volt/assets/styles/primevue/fileupload.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/fileupload.css
rename to apps/volt/assets/styles/primevue/fileupload.css
diff --git a/apps/labs/assets/styles/primevue/floatlabel.css b/apps/volt/assets/styles/primevue/floatlabel.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/floatlabel.css
rename to apps/volt/assets/styles/primevue/floatlabel.css
diff --git a/apps/labs/assets/styles/primevue/galleria.css b/apps/volt/assets/styles/primevue/galleria.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/galleria.css
rename to apps/volt/assets/styles/primevue/galleria.css
diff --git a/apps/labs/assets/styles/primevue/iconfield.css b/apps/volt/assets/styles/primevue/iconfield.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/iconfield.css
rename to apps/volt/assets/styles/primevue/iconfield.css
diff --git a/apps/labs/assets/styles/primevue/iftalabel.css b/apps/volt/assets/styles/primevue/iftalabel.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/iftalabel.css
rename to apps/volt/assets/styles/primevue/iftalabel.css
diff --git a/apps/labs/assets/styles/primevue/image.css b/apps/volt/assets/styles/primevue/image.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/image.css
rename to apps/volt/assets/styles/primevue/image.css
diff --git a/apps/labs/assets/styles/primevue/imagecompare.css b/apps/volt/assets/styles/primevue/imagecompare.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/imagecompare.css
rename to apps/volt/assets/styles/primevue/imagecompare.css
diff --git a/apps/labs/assets/styles/primevue/inplace.css b/apps/volt/assets/styles/primevue/inplace.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/inplace.css
rename to apps/volt/assets/styles/primevue/inplace.css
diff --git a/apps/labs/assets/styles/primevue/inputgroup.css b/apps/volt/assets/styles/primevue/inputgroup.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/inputgroup.css
rename to apps/volt/assets/styles/primevue/inputgroup.css
diff --git a/apps/labs/assets/styles/primevue/inputnumber.css b/apps/volt/assets/styles/primevue/inputnumber.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/inputnumber.css
rename to apps/volt/assets/styles/primevue/inputnumber.css
diff --git a/apps/labs/assets/styles/primevue/inputotp.css b/apps/volt/assets/styles/primevue/inputotp.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/inputotp.css
rename to apps/volt/assets/styles/primevue/inputotp.css
diff --git a/apps/labs/assets/styles/primevue/inputtext.css b/apps/volt/assets/styles/primevue/inputtext.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/inputtext.css
rename to apps/volt/assets/styles/primevue/inputtext.css
diff --git a/apps/labs/assets/styles/primevue/knob.css b/apps/volt/assets/styles/primevue/knob.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/knob.css
rename to apps/volt/assets/styles/primevue/knob.css
diff --git a/apps/labs/assets/styles/primevue/listbox.css b/apps/volt/assets/styles/primevue/listbox.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/listbox.css
rename to apps/volt/assets/styles/primevue/listbox.css
diff --git a/apps/labs/assets/styles/primevue/megamenu.css b/apps/volt/assets/styles/primevue/megamenu.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/megamenu.css
rename to apps/volt/assets/styles/primevue/megamenu.css
diff --git a/apps/labs/assets/styles/primevue/menu.css b/apps/volt/assets/styles/primevue/menu.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/menu.css
rename to apps/volt/assets/styles/primevue/menu.css
diff --git a/apps/labs/assets/styles/primevue/menubar.css b/apps/volt/assets/styles/primevue/menubar.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/menubar.css
rename to apps/volt/assets/styles/primevue/menubar.css
diff --git a/apps/labs/assets/styles/primevue/message.css b/apps/volt/assets/styles/primevue/message.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/message.css
rename to apps/volt/assets/styles/primevue/message.css
diff --git a/apps/labs/assets/styles/primevue/metergroup.css b/apps/volt/assets/styles/primevue/metergroup.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/metergroup.css
rename to apps/volt/assets/styles/primevue/metergroup.css
diff --git a/apps/labs/assets/styles/primevue/multiselect.css b/apps/volt/assets/styles/primevue/multiselect.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/multiselect.css
rename to apps/volt/assets/styles/primevue/multiselect.css
diff --git a/apps/labs/assets/styles/primevue/orderlist.css b/apps/volt/assets/styles/primevue/orderlist.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/orderlist.css
rename to apps/volt/assets/styles/primevue/orderlist.css
diff --git a/apps/labs/assets/styles/primevue/organizationchart.css b/apps/volt/assets/styles/primevue/organizationchart.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/organizationchart.css
rename to apps/volt/assets/styles/primevue/organizationchart.css
diff --git a/apps/labs/assets/styles/primevue/overlaybadge.css b/apps/volt/assets/styles/primevue/overlaybadge.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/overlaybadge.css
rename to apps/volt/assets/styles/primevue/overlaybadge.css
diff --git a/apps/labs/assets/styles/primevue/paginator.css b/apps/volt/assets/styles/primevue/paginator.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/paginator.css
rename to apps/volt/assets/styles/primevue/paginator.css
diff --git a/apps/labs/assets/styles/primevue/panel.css b/apps/volt/assets/styles/primevue/panel.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/panel.css
rename to apps/volt/assets/styles/primevue/panel.css
diff --git a/apps/labs/assets/styles/primevue/panelmenu.css b/apps/volt/assets/styles/primevue/panelmenu.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/panelmenu.css
rename to apps/volt/assets/styles/primevue/panelmenu.css
diff --git a/apps/labs/assets/styles/primevue/password.css b/apps/volt/assets/styles/primevue/password.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/password.css
rename to apps/volt/assets/styles/primevue/password.css
diff --git a/apps/labs/assets/styles/primevue/picklist.css b/apps/volt/assets/styles/primevue/picklist.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/picklist.css
rename to apps/volt/assets/styles/primevue/picklist.css
diff --git a/apps/labs/assets/styles/primevue/popover.css b/apps/volt/assets/styles/primevue/popover.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/popover.css
rename to apps/volt/assets/styles/primevue/popover.css
diff --git a/apps/labs/assets/styles/primevue/progressbar.css b/apps/volt/assets/styles/primevue/progressbar.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/progressbar.css
rename to apps/volt/assets/styles/primevue/progressbar.css
diff --git a/apps/labs/assets/styles/primevue/progressspinner.css b/apps/volt/assets/styles/primevue/progressspinner.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/progressspinner.css
rename to apps/volt/assets/styles/primevue/progressspinner.css
diff --git a/apps/labs/assets/styles/primevue/radiobutton.css b/apps/volt/assets/styles/primevue/radiobutton.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/radiobutton.css
rename to apps/volt/assets/styles/primevue/radiobutton.css
diff --git a/apps/labs/assets/styles/primevue/rating.css b/apps/volt/assets/styles/primevue/rating.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/rating.css
rename to apps/volt/assets/styles/primevue/rating.css
diff --git a/apps/labs/assets/styles/primevue/ripple.css b/apps/volt/assets/styles/primevue/ripple.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/ripple.css
rename to apps/volt/assets/styles/primevue/ripple.css
diff --git a/apps/labs/assets/styles/primevue/scrollpanel.css b/apps/volt/assets/styles/primevue/scrollpanel.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/scrollpanel.css
rename to apps/volt/assets/styles/primevue/scrollpanel.css
diff --git a/apps/labs/assets/styles/primevue/scrolltop.css b/apps/volt/assets/styles/primevue/scrolltop.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/scrolltop.css
rename to apps/volt/assets/styles/primevue/scrolltop.css
diff --git a/apps/labs/assets/styles/primevue/select.css b/apps/volt/assets/styles/primevue/select.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/select.css
rename to apps/volt/assets/styles/primevue/select.css
diff --git a/apps/labs/assets/styles/primevue/selectbutton.css b/apps/volt/assets/styles/primevue/selectbutton.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/selectbutton.css
rename to apps/volt/assets/styles/primevue/selectbutton.css
diff --git a/apps/labs/assets/styles/primevue/skeleton.css b/apps/volt/assets/styles/primevue/skeleton.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/skeleton.css
rename to apps/volt/assets/styles/primevue/skeleton.css
diff --git a/apps/labs/assets/styles/primevue/slider.css b/apps/volt/assets/styles/primevue/slider.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/slider.css
rename to apps/volt/assets/styles/primevue/slider.css
diff --git a/apps/labs/assets/styles/primevue/speeddial.css b/apps/volt/assets/styles/primevue/speeddial.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/speeddial.css
rename to apps/volt/assets/styles/primevue/speeddial.css
diff --git a/apps/labs/assets/styles/primevue/splitbutton.css b/apps/volt/assets/styles/primevue/splitbutton.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/splitbutton.css
rename to apps/volt/assets/styles/primevue/splitbutton.css
diff --git a/apps/labs/assets/styles/primevue/splitter.css b/apps/volt/assets/styles/primevue/splitter.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/splitter.css
rename to apps/volt/assets/styles/primevue/splitter.css
diff --git a/apps/labs/assets/styles/primevue/stepper.css b/apps/volt/assets/styles/primevue/stepper.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/stepper.css
rename to apps/volt/assets/styles/primevue/stepper.css
diff --git a/apps/labs/assets/styles/primevue/tabs.css b/apps/volt/assets/styles/primevue/tabs.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/tabs.css
rename to apps/volt/assets/styles/primevue/tabs.css
diff --git a/apps/labs/assets/styles/primevue/tag.css b/apps/volt/assets/styles/primevue/tag.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/tag.css
rename to apps/volt/assets/styles/primevue/tag.css
diff --git a/apps/labs/assets/styles/primevue/tailwind.css b/apps/volt/assets/styles/primevue/tailwind.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/tailwind.css
rename to apps/volt/assets/styles/primevue/tailwind.css
diff --git a/apps/labs/assets/styles/primevue/terminal.css b/apps/volt/assets/styles/primevue/terminal.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/terminal.css
rename to apps/volt/assets/styles/primevue/terminal.css
diff --git a/apps/labs/assets/styles/primevue/textarea.css b/apps/volt/assets/styles/primevue/textarea.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/textarea.css
rename to apps/volt/assets/styles/primevue/textarea.css
diff --git a/apps/labs/assets/styles/primevue/tieredmenu.css b/apps/volt/assets/styles/primevue/tieredmenu.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/tieredmenu.css
rename to apps/volt/assets/styles/primevue/tieredmenu.css
diff --git a/apps/labs/assets/styles/primevue/timeline.css b/apps/volt/assets/styles/primevue/timeline.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/timeline.css
rename to apps/volt/assets/styles/primevue/timeline.css
diff --git a/apps/labs/assets/styles/primevue/toast.css b/apps/volt/assets/styles/primevue/toast.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/toast.css
rename to apps/volt/assets/styles/primevue/toast.css
diff --git a/apps/labs/assets/styles/primevue/togglebutton.css b/apps/volt/assets/styles/primevue/togglebutton.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/togglebutton.css
rename to apps/volt/assets/styles/primevue/togglebutton.css
diff --git a/apps/labs/assets/styles/primevue/toggleswitch.css b/apps/volt/assets/styles/primevue/toggleswitch.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/toggleswitch.css
rename to apps/volt/assets/styles/primevue/toggleswitch.css
diff --git a/apps/labs/assets/styles/primevue/toolbar.css b/apps/volt/assets/styles/primevue/toolbar.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/toolbar.css
rename to apps/volt/assets/styles/primevue/toolbar.css
diff --git a/apps/labs/assets/styles/primevue/tooltip.css b/apps/volt/assets/styles/primevue/tooltip.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/tooltip.css
rename to apps/volt/assets/styles/primevue/tooltip.css
diff --git a/apps/labs/assets/styles/primevue/tree.css b/apps/volt/assets/styles/primevue/tree.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/tree.css
rename to apps/volt/assets/styles/primevue/tree.css
diff --git a/apps/labs/assets/styles/primevue/treeselect.css b/apps/volt/assets/styles/primevue/treeselect.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/treeselect.css
rename to apps/volt/assets/styles/primevue/treeselect.css
diff --git a/apps/labs/assets/styles/primevue/treetable.css b/apps/volt/assets/styles/primevue/treetable.css
similarity index 100%
rename from apps/labs/assets/styles/primevue/treetable.css
rename to apps/volt/assets/styles/primevue/treetable.css
diff --git a/apps/labs/assets/styles/tailwind.css b/apps/volt/assets/styles/tailwind.css
similarity index 100%
rename from apps/labs/assets/styles/tailwind.css
rename to apps/volt/assets/styles/tailwind.css
diff --git a/apps/labs/components/app/AppConfigurator.vue b/apps/volt/components/app/AppConfigurator.vue
similarity index 100%
rename from apps/labs/components/app/AppConfigurator.vue
rename to apps/volt/components/app/AppConfigurator.vue
diff --git a/apps/labs/components/app/AppFooter.vue b/apps/volt/components/app/AppFooter.vue
similarity index 100%
rename from apps/labs/components/app/AppFooter.vue
rename to apps/volt/components/app/AppFooter.vue
diff --git a/apps/labs/components/app/AppMenu.vue b/apps/volt/components/app/AppMenu.vue
similarity index 100%
rename from apps/labs/components/app/AppMenu.vue
rename to apps/volt/components/app/AppMenu.vue
diff --git a/apps/labs/components/app/AppMenuItem.vue b/apps/volt/components/app/AppMenuItem.vue
similarity index 100%
rename from apps/labs/components/app/AppMenuItem.vue
rename to apps/volt/components/app/AppMenuItem.vue
diff --git a/apps/labs/components/app/AppNews.vue b/apps/volt/components/app/AppNews.vue
similarity index 100%
rename from apps/labs/components/app/AppNews.vue
rename to apps/volt/components/app/AppNews.vue
diff --git a/apps/labs/components/app/AppTopBar.vue b/apps/volt/components/app/AppTopBar.vue
similarity index 100%
rename from apps/labs/components/app/AppTopBar.vue
rename to apps/volt/components/app/AppTopBar.vue
diff --git a/apps/labs/components/app/PrimeVueNuxtLink.js b/apps/volt/components/app/PrimeVueNuxtLink.js
similarity index 100%
rename from apps/labs/components/app/PrimeVueNuxtLink.js
rename to apps/volt/components/app/PrimeVueNuxtLink.js
diff --git a/apps/labs/components/demo/DeferredDemo.vue b/apps/volt/components/demo/DeferredDemo.vue
similarity index 100%
rename from apps/labs/components/demo/DeferredDemo.vue
rename to apps/volt/components/demo/DeferredDemo.vue
diff --git a/apps/labs/components/doc/DocComponent.vue b/apps/volt/components/doc/DocComponent.vue
similarity index 100%
rename from apps/labs/components/doc/DocComponent.vue
rename to apps/volt/components/doc/DocComponent.vue
diff --git a/apps/labs/components/doc/DocSectionCode.vue b/apps/volt/components/doc/DocSectionCode.vue
similarity index 100%
rename from apps/labs/components/doc/DocSectionCode.vue
rename to apps/volt/components/doc/DocSectionCode.vue
diff --git a/apps/labs/components/doc/DocSectionNav.vue b/apps/volt/components/doc/DocSectionNav.vue
similarity index 100%
rename from apps/labs/components/doc/DocSectionNav.vue
rename to apps/volt/components/doc/DocSectionNav.vue
diff --git a/apps/labs/components/doc/DocSectionText.vue b/apps/volt/components/doc/DocSectionText.vue
similarity index 100%
rename from apps/labs/components/doc/DocSectionText.vue
rename to apps/volt/components/doc/DocSectionText.vue
diff --git a/apps/labs/components/doc/DocSections.vue b/apps/volt/components/doc/DocSections.vue
similarity index 100%
rename from apps/labs/components/doc/DocSections.vue
rename to apps/volt/components/doc/DocSections.vue
diff --git a/apps/labs/components/doc/codeeditor/index.js b/apps/volt/components/doc/codeeditor/index.js
similarity index 100%
rename from apps/labs/components/doc/codeeditor/index.js
rename to apps/volt/components/doc/codeeditor/index.js
diff --git a/apps/labs/components/doc/codeeditor/services.js b/apps/volt/components/doc/codeeditor/services.js
similarity index 100%
rename from apps/labs/components/doc/codeeditor/services.js
rename to apps/volt/components/doc/codeeditor/services.js
diff --git a/apps/labs/components/doc/codeeditor/templates.js b/apps/volt/components/doc/codeeditor/templates.js
similarity index 100%
rename from apps/labs/components/doc/codeeditor/templates.js
rename to apps/volt/components/doc/codeeditor/templates.js
diff --git a/apps/labs/directives/CodeHighlight.js b/apps/volt/directives/CodeHighlight.js
similarity index 100%
rename from apps/labs/directives/CodeHighlight.js
rename to apps/volt/directives/CodeHighlight.js
diff --git a/apps/labs/doc/checkbox/BasicDoc.vue b/apps/volt/doc/checkbox/BasicDoc.vue
similarity index 89%
rename from apps/labs/doc/checkbox/BasicDoc.vue
rename to apps/volt/doc/checkbox/BasicDoc.vue
index 0fad6a730..9d80be97c 100644
--- a/apps/labs/doc/checkbox/BasicDoc.vue
+++ b/apps/volt/doc/checkbox/BasicDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/checkbox/DisabledDoc.vue b/apps/volt/doc/checkbox/DisabledDoc.vue
similarity index 91%
rename from apps/labs/doc/checkbox/DisabledDoc.vue
rename to apps/volt/doc/checkbox/DisabledDoc.vue
index c98cefe69..68220cb7b 100644
--- a/apps/labs/doc/checkbox/DisabledDoc.vue
+++ b/apps/volt/doc/checkbox/DisabledDoc.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked1 = ref(false);
@@ -25,7 +25,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked1 = ref(false);
diff --git a/apps/labs/doc/checkbox/DynamicDoc.vue b/apps/volt/doc/checkbox/DynamicDoc.vue
similarity index 95%
rename from apps/labs/doc/checkbox/DynamicDoc.vue
rename to apps/volt/doc/checkbox/DynamicDoc.vue
index 359f50a77..583ea0693 100644
--- a/apps/labs/doc/checkbox/DynamicDoc.vue
+++ b/apps/volt/doc/checkbox/DynamicDoc.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const selectedCategories = ref(['Marketing']);
@@ -38,7 +38,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const selectedCategories = ref(['Marketing']);
diff --git a/apps/labs/doc/checkbox/FilledDoc.vue b/apps/volt/doc/checkbox/FilledDoc.vue
similarity index 90%
rename from apps/labs/doc/checkbox/FilledDoc.vue
rename to apps/volt/doc/checkbox/FilledDoc.vue
index 8ee3d0e1b..4ff439c9d 100644
--- a/apps/labs/doc/checkbox/FilledDoc.vue
+++ b/apps/volt/doc/checkbox/FilledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/checkbox/GroupDoc.vue b/apps/volt/doc/checkbox/GroupDoc.vue
similarity index 96%
rename from apps/labs/doc/checkbox/GroupDoc.vue
rename to apps/volt/doc/checkbox/GroupDoc.vue
index 13bc7d70d..b7f9d6216 100644
--- a/apps/labs/doc/checkbox/GroupDoc.vue
+++ b/apps/volt/doc/checkbox/GroupDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const pizza = ref(null);
@@ -52,7 +52,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const pizza = ref(null);
diff --git a/apps/labs/doc/checkbox/ImportDoc.vue b/apps/volt/doc/checkbox/ImportDoc.vue
similarity index 84%
rename from apps/labs/doc/checkbox/ImportDoc.vue
rename to apps/volt/doc/checkbox/ImportDoc.vue
index ddafadc7d..2cfbe2497 100644
--- a/apps/labs/doc/checkbox/ImportDoc.vue
+++ b/apps/volt/doc/checkbox/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 `
         };
     }
diff --git a/apps/labs/doc/checkbox/IndeterminateDoc.vue b/apps/volt/doc/checkbox/IndeterminateDoc.vue
similarity index 89%
rename from apps/labs/doc/checkbox/IndeterminateDoc.vue
rename to apps/volt/doc/checkbox/IndeterminateDoc.vue
index 2d8d90f03..e974b2c35 100644
--- a/apps/labs/doc/checkbox/IndeterminateDoc.vue
+++ b/apps/volt/doc/checkbox/IndeterminateDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/checkbox/InvalidDoc.vue b/apps/volt/doc/checkbox/InvalidDoc.vue
similarity index 90%
rename from apps/labs/doc/checkbox/InvalidDoc.vue
rename to apps/volt/doc/checkbox/InvalidDoc.vue
index f484a687c..ccdca26ae 100644
--- a/apps/labs/doc/checkbox/InvalidDoc.vue
+++ b/apps/volt/doc/checkbox/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/checkbox/SizesDoc.vue b/apps/volt/doc/checkbox/SizesDoc.vue
similarity index 95%
rename from apps/labs/doc/checkbox/SizesDoc.vue
rename to apps/volt/doc/checkbox/SizesDoc.vue
index 71d31eeb5..a4dfac20a 100644
--- a/apps/labs/doc/checkbox/SizesDoc.vue
+++ b/apps/volt/doc/checkbox/SizesDoc.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const size = ref(null);
@@ -44,7 +44,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Checkbox from '@/plex/checkbox';
+import Checkbox from '@/volt/checkbox';
 import { ref } from 'vue';
 
 const size = ref(null);
diff --git a/apps/labs/doc/icons/FontAwesomeDoc.vue b/apps/volt/doc/icons/FontAwesomeDoc.vue
similarity index 100%
rename from apps/labs/doc/icons/FontAwesomeDoc.vue
rename to apps/volt/doc/icons/FontAwesomeDoc.vue
diff --git a/apps/labs/doc/icons/ImageDoc.vue b/apps/volt/doc/icons/ImageDoc.vue
similarity index 100%
rename from apps/labs/doc/icons/ImageDoc.vue
rename to apps/volt/doc/icons/ImageDoc.vue
diff --git a/apps/labs/doc/icons/MaterialDoc.vue b/apps/volt/doc/icons/MaterialDoc.vue
similarity index 100%
rename from apps/labs/doc/icons/MaterialDoc.vue
rename to apps/volt/doc/icons/MaterialDoc.vue
diff --git a/apps/labs/doc/icons/SVGDoc.vue b/apps/volt/doc/icons/SVGDoc.vue
similarity index 100%
rename from apps/labs/doc/icons/SVGDoc.vue
rename to apps/volt/doc/icons/SVGDoc.vue
diff --git a/apps/labs/doc/icons/VideoDoc.vue b/apps/volt/doc/icons/VideoDoc.vue
similarity index 100%
rename from apps/labs/doc/icons/VideoDoc.vue
rename to apps/volt/doc/icons/VideoDoc.vue
diff --git a/apps/labs/doc/inputmask/BasicDoc.vue b/apps/volt/doc/inputmask/BasicDoc.vue
similarity index 89%
rename from apps/labs/doc/inputmask/BasicDoc.vue
rename to apps/volt/doc/inputmask/BasicDoc.vue
index 75c33c530..5b2668538 100644
--- a/apps/labs/doc/inputmask/BasicDoc.vue
+++ b/apps/volt/doc/inputmask/BasicDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputmask/DisabledDoc.vue b/apps/volt/doc/inputmask/DisabledDoc.vue
similarity index 89%
rename from apps/labs/doc/inputmask/DisabledDoc.vue
rename to apps/volt/doc/inputmask/DisabledDoc.vue
index 7b1f5cd5a..294b9dffb 100644
--- a/apps/labs/doc/inputmask/DisabledDoc.vue
+++ b/apps/volt/doc/inputmask/DisabledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputmask/FilledDoc.vue b/apps/volt/doc/inputmask/FilledDoc.vue
similarity index 90%
rename from apps/labs/doc/inputmask/FilledDoc.vue
rename to apps/volt/doc/inputmask/FilledDoc.vue
index 6148a9e50..24026517e 100644
--- a/apps/labs/doc/inputmask/FilledDoc.vue
+++ b/apps/volt/doc/inputmask/FilledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputmask/ImportDoc.vue b/apps/volt/doc/inputmask/ImportDoc.vue
similarity index 84%
rename from apps/labs/doc/inputmask/ImportDoc.vue
rename to apps/volt/doc/inputmask/ImportDoc.vue
index 55365b7de..59d8318a7 100644
--- a/apps/labs/doc/inputmask/ImportDoc.vue
+++ b/apps/volt/doc/inputmask/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 `
         };
     }
diff --git a/apps/labs/doc/inputmask/InvalidDoc.vue b/apps/volt/doc/inputmask/InvalidDoc.vue
similarity index 90%
rename from apps/labs/doc/inputmask/InvalidDoc.vue
rename to apps/volt/doc/inputmask/InvalidDoc.vue
index ebe18d6dc..9f0648a11 100644
--- a/apps/labs/doc/inputmask/InvalidDoc.vue
+++ b/apps/volt/doc/inputmask/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputmask/MaskDoc.vue b/apps/volt/doc/inputmask/MaskDoc.vue
similarity index 96%
rename from apps/labs/doc/inputmask/MaskDoc.vue
rename to apps/volt/doc/inputmask/MaskDoc.vue
index a2c3af826..71fe87223 100644
--- a/apps/labs/doc/inputmask/MaskDoc.vue
+++ b/apps/volt/doc/inputmask/MaskDoc.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -53,7 +53,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/doc/inputmask/OptionalDoc.vue b/apps/volt/doc/inputmask/OptionalDoc.vue
similarity index 91%
rename from apps/labs/doc/inputmask/OptionalDoc.vue
rename to apps/volt/doc/inputmask/OptionalDoc.vue
index 13ad2bb64..fc69c1825 100644
--- a/apps/labs/doc/inputmask/OptionalDoc.vue
+++ b/apps/volt/doc/inputmask/OptionalDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputmask/SizesDoc.vue b/apps/volt/doc/inputmask/SizesDoc.vue
similarity index 93%
rename from apps/labs/doc/inputmask/SizesDoc.vue
rename to apps/volt/doc/inputmask/SizesDoc.vue
index af5f663f5..e7044a290 100644
--- a/apps/labs/doc/inputmask/SizesDoc.vue
+++ b/apps/volt/doc/inputmask/SizesDoc.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -28,7 +28,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/doc/inputmask/SlotCharDoc.vue b/apps/volt/doc/inputmask/SlotCharDoc.vue
similarity index 89%
rename from apps/labs/doc/inputmask/SlotCharDoc.vue
rename to apps/volt/doc/inputmask/SlotCharDoc.vue
index 1889f087f..b98bfb43c 100644
--- a/apps/labs/doc/inputmask/SlotCharDoc.vue
+++ b/apps/volt/doc/inputmask/SlotCharDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputMask from '@/plex/inputmask';
+import InputMask from '@/volt/inputmask';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/BasicDoc.vue b/apps/volt/doc/inputtext/BasicDoc.vue
similarity index 87%
rename from apps/labs/doc/inputtext/BasicDoc.vue
rename to apps/volt/doc/inputtext/BasicDoc.vue
index 3f5a8af4f..14398eed8 100644
--- a/apps/labs/doc/inputtext/BasicDoc.vue
+++ b/apps/volt/doc/inputtext/BasicDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/DisabledDoc.vue b/apps/volt/doc/inputtext/DisabledDoc.vue
similarity index 88%
rename from apps/labs/doc/inputtext/DisabledDoc.vue
rename to apps/volt/doc/inputtext/DisabledDoc.vue
index ad9392c47..c6417204e 100644
--- a/apps/labs/doc/inputtext/DisabledDoc.vue
+++ b/apps/volt/doc/inputtext/DisabledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/FilledDoc.vue b/apps/volt/doc/inputtext/FilledDoc.vue
similarity index 89%
rename from apps/labs/doc/inputtext/FilledDoc.vue
rename to apps/volt/doc/inputtext/FilledDoc.vue
index c5efb8e1d..811da0309 100644
--- a/apps/labs/doc/inputtext/FilledDoc.vue
+++ b/apps/volt/doc/inputtext/FilledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/HelpTextDoc.vue b/apps/volt/doc/inputtext/HelpTextDoc.vue
similarity index 88%
rename from apps/labs/doc/textarea/HelpTextDoc.vue
rename to apps/volt/doc/inputtext/HelpTextDoc.vue
index 5a1def75b..5e41700c5 100644
--- a/apps/labs/doc/textarea/HelpTextDoc.vue
+++ b/apps/volt/doc/inputtext/HelpTextDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/ImportDoc.vue b/apps/volt/doc/inputtext/ImportDoc.vue
similarity index 84%
rename from apps/labs/doc/inputtext/ImportDoc.vue
rename to apps/volt/doc/inputtext/ImportDoc.vue
index 435eb2576..bc79b15e3 100644
--- a/apps/labs/doc/inputtext/ImportDoc.vue
+++ b/apps/volt/doc/inputtext/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 `
         };
     }
diff --git a/apps/labs/doc/inputtext/InvalidDoc.vue b/apps/volt/doc/inputtext/InvalidDoc.vue
similarity index 90%
rename from apps/labs/doc/inputtext/InvalidDoc.vue
rename to apps/volt/doc/inputtext/InvalidDoc.vue
index 089b7c81d..50152b146 100644
--- a/apps/labs/doc/inputtext/InvalidDoc.vue
+++ b/apps/volt/doc/inputtext/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref('');
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/SizesDoc.vue b/apps/volt/doc/inputtext/SizesDoc.vue
similarity index 93%
rename from apps/labs/doc/inputtext/SizesDoc.vue
rename to apps/volt/doc/inputtext/SizesDoc.vue
index ef8d36b51..dc556c96d 100644
--- a/apps/labs/doc/inputtext/SizesDoc.vue
+++ b/apps/volt/doc/inputtext/SizesDoc.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -28,7 +28,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/doc/introduction/ArchitectureDoc.vue b/apps/volt/doc/introduction/ArchitectureDoc.vue
similarity index 60%
rename from apps/labs/doc/introduction/ArchitectureDoc.vue
rename to apps/volt/doc/introduction/ArchitectureDoc.vue
index d7ce94f33..dcbfe5d07 100644
--- a/apps/labs/doc/introduction/ArchitectureDoc.vue
+++ b/apps/volt/doc/introduction/ArchitectureDoc.vue
@@ -1,5 +1,5 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Plex is a spin-off library in the Prime UI ecosystem, that operates on the code ownership model. Plex leverages the flexibility of Unstyled PrimeVue and the utility-first framework of Tailwind CSS for enhanced functionality.</p>
+        <p>Volt is a spin-off library in the Prime UI ecosystem, that operates on the code ownership model. Volt leverages the flexibility of Unstyled PrimeVue and the utility-first framework of Tailwind CSS for enhanced functionality.</p>
     </DocSectionText>
 </template>
diff --git a/apps/labs/doc/nuxt/CSSVariablesDoc.vue b/apps/volt/doc/nuxt/CSSVariablesDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/CSSVariablesDoc.vue
rename to apps/volt/doc/nuxt/CSSVariablesDoc.vue
diff --git a/apps/labs/doc/nuxt/DownloadDoc.vue b/apps/volt/doc/nuxt/DownloadDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/DownloadDoc.vue
rename to apps/volt/doc/nuxt/DownloadDoc.vue
diff --git a/apps/labs/doc/nuxt/ExampleDoc.vue b/apps/volt/doc/nuxt/ExampleDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/ExampleDoc.vue
rename to apps/volt/doc/nuxt/ExampleDoc.vue
diff --git a/apps/labs/doc/nuxt/NuxtConfigDoc.vue b/apps/volt/doc/nuxt/NuxtConfigDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/NuxtConfigDoc.vue
rename to apps/volt/doc/nuxt/NuxtConfigDoc.vue
diff --git a/apps/labs/doc/nuxt/StylesDoc.vue b/apps/volt/doc/nuxt/StylesDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/StylesDoc.vue
rename to apps/volt/doc/nuxt/StylesDoc.vue
diff --git a/apps/labs/doc/nuxt/TailwindDoc.vue b/apps/volt/doc/nuxt/TailwindDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/TailwindDoc.vue
rename to apps/volt/doc/nuxt/TailwindDoc.vue
diff --git a/apps/labs/doc/nuxt/tailwind/ImportStylesDoc.vue b/apps/volt/doc/nuxt/tailwind/ImportStylesDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/tailwind/ImportStylesDoc.vue
rename to apps/volt/doc/nuxt/tailwind/ImportStylesDoc.vue
diff --git a/apps/labs/doc/nuxt/tailwind/PostCSSImportDoc.vue b/apps/volt/doc/nuxt/tailwind/PostCSSImportDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/tailwind/PostCSSImportDoc.vue
rename to apps/volt/doc/nuxt/tailwind/PostCSSImportDoc.vue
diff --git a/apps/labs/doc/nuxt/tailwind/PrimeUIPluginDoc.vue b/apps/volt/doc/nuxt/tailwind/PrimeUIPluginDoc.vue
similarity index 100%
rename from apps/labs/doc/nuxt/tailwind/PrimeUIPluginDoc.vue
rename to apps/volt/doc/nuxt/tailwind/PrimeUIPluginDoc.vue
diff --git a/apps/labs/doc/radiobutton/DisabledDoc.vue b/apps/volt/doc/radiobutton/DisabledDoc.vue
similarity index 89%
rename from apps/labs/doc/radiobutton/DisabledDoc.vue
rename to apps/volt/doc/radiobutton/DisabledDoc.vue
index 500680946..80fe6abc0 100644
--- a/apps/labs/doc/radiobutton/DisabledDoc.vue
+++ b/apps/volt/doc/radiobutton/DisabledDoc.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const value = ref(2);
@@ -24,7 +24,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const value = ref(2);
diff --git a/apps/labs/doc/radiobutton/DynamicDoc.vue b/apps/volt/doc/radiobutton/DynamicDoc.vue
similarity index 94%
rename from apps/labs/doc/radiobutton/DynamicDoc.vue
rename to apps/volt/doc/radiobutton/DynamicDoc.vue
index 9391f05cc..4302f0341 100644
--- a/apps/labs/doc/radiobutton/DynamicDoc.vue
+++ b/apps/volt/doc/radiobutton/DynamicDoc.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const selectedCategory = ref('Production');
@@ -38,7 +38,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const selectedCategory = ref('Production');
diff --git a/apps/labs/doc/radiobutton/FilledDoc.vue b/apps/volt/doc/radiobutton/FilledDoc.vue
similarity index 88%
rename from apps/labs/doc/radiobutton/FilledDoc.vue
rename to apps/volt/doc/radiobutton/FilledDoc.vue
index f9139a2a0..827085be0 100644
--- a/apps/labs/doc/radiobutton/FilledDoc.vue
+++ b/apps/volt/doc/radiobutton/FilledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/radiobutton/GroupDoc.vue b/apps/volt/doc/radiobutton/GroupDoc.vue
similarity index 96%
rename from apps/labs/doc/radiobutton/GroupDoc.vue
rename to apps/volt/doc/radiobutton/GroupDoc.vue
index b8abcca8f..ecab192e8 100644
--- a/apps/labs/doc/radiobutton/GroupDoc.vue
+++ b/apps/volt/doc/radiobutton/GroupDoc.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const ingredient = ref(null);
@@ -56,7 +56,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const ingredient = ref(null);
diff --git a/apps/labs/doc/radiobutton/ImportDoc.vue b/apps/volt/doc/radiobutton/ImportDoc.vue
similarity index 82%
rename from apps/labs/doc/radiobutton/ImportDoc.vue
rename to apps/volt/doc/radiobutton/ImportDoc.vue
index 754a255ae..e43156047 100644
--- a/apps/labs/doc/radiobutton/ImportDoc.vue
+++ b/apps/volt/doc/radiobutton/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 `
         };
     }
diff --git a/apps/labs/doc/radiobutton/InvalidDoc.vue b/apps/volt/doc/radiobutton/InvalidDoc.vue
similarity index 89%
rename from apps/labs/doc/radiobutton/InvalidDoc.vue
rename to apps/volt/doc/radiobutton/InvalidDoc.vue
index da24a3dd3..5464abd30 100644
--- a/apps/labs/doc/radiobutton/InvalidDoc.vue
+++ b/apps/volt/doc/radiobutton/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const val = ref(null);
diff --git a/apps/labs/doc/radiobutton/SizesDoc.vue b/apps/volt/doc/radiobutton/SizesDoc.vue
similarity index 95%
rename from apps/labs/doc/radiobutton/SizesDoc.vue
rename to apps/volt/doc/radiobutton/SizesDoc.vue
index b68f85a5c..ae92d1c22 100644
--- a/apps/labs/doc/radiobutton/SizesDoc.vue
+++ b/apps/volt/doc/radiobutton/SizesDoc.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const size = ref(null);
@@ -48,7 +48,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import RadioButton from '@/plex/radiobutton';
+import RadioButton from '@/volt/radiobutton';
 import { ref } from 'vue';
 
 const size = ref(null);
diff --git a/apps/labs/doc/rating/BasicDoc.vue b/apps/volt/doc/rating/BasicDoc.vue
similarity index 89%
rename from apps/labs/doc/rating/BasicDoc.vue
rename to apps/volt/doc/rating/BasicDoc.vue
index 7919c9d65..263c7143c 100644
--- a/apps/labs/doc/rating/BasicDoc.vue
+++ b/apps/volt/doc/rating/BasicDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/rating/DisabledDoc.vue b/apps/volt/doc/rating/DisabledDoc.vue
similarity index 89%
rename from apps/labs/doc/rating/DisabledDoc.vue
rename to apps/volt/doc/rating/DisabledDoc.vue
index dc267dcc8..ded4577f1 100644
--- a/apps/labs/doc/rating/DisabledDoc.vue
+++ b/apps/volt/doc/rating/DisabledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(3);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(3);
diff --git a/apps/labs/doc/slider/ImportDoc.vue b/apps/volt/doc/rating/ImportDoc.vue
similarity index 85%
rename from apps/labs/doc/slider/ImportDoc.vue
rename to apps/volt/doc/rating/ImportDoc.vue
index e265faeac..f47bd44dd 100644
--- a/apps/labs/doc/slider/ImportDoc.vue
+++ b/apps/volt/doc/rating/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import Slider from '@/plex/slider';
+import Rating from '@/volt/rating';
 `
         };
     }
diff --git a/apps/labs/doc/rating/NumberOfStarsDoc.vue b/apps/volt/doc/rating/NumberOfStarsDoc.vue
similarity index 89%
rename from apps/labs/doc/rating/NumberOfStarsDoc.vue
rename to apps/volt/doc/rating/NumberOfStarsDoc.vue
index 787a4e987..e4764beb7 100644
--- a/apps/labs/doc/rating/NumberOfStarsDoc.vue
+++ b/apps/volt/doc/rating/NumberOfStarsDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/rating/ReadOnlyDoc.vue b/apps/volt/doc/rating/ReadOnlyDoc.vue
similarity index 89%
rename from apps/labs/doc/rating/ReadOnlyDoc.vue
rename to apps/volt/doc/rating/ReadOnlyDoc.vue
index 8f6bdab12..dbe1de910 100644
--- a/apps/labs/doc/rating/ReadOnlyDoc.vue
+++ b/apps/volt/doc/rating/ReadOnlyDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(3);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(3);
diff --git a/apps/labs/doc/rating/TemplateDoc.vue b/apps/volt/doc/rating/TemplateDoc.vue
similarity index 95%
rename from apps/labs/doc/rating/TemplateDoc.vue
rename to apps/volt/doc/rating/TemplateDoc.vue
index 95c324610..6cf535d90 100644
--- a/apps/labs/doc/rating/TemplateDoc.vue
+++ b/apps/volt/doc/rating/TemplateDoc.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -36,7 +36,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Rating from '@/plex/rating';
+import Rating from '@/volt/rating';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/selectbutton/BasicDoc.vue b/apps/volt/doc/selectbutton/BasicDoc.vue
similarity index 91%
rename from apps/labs/doc/selectbutton/BasicDoc.vue
rename to apps/volt/doc/selectbutton/BasicDoc.vue
index 339204562..a19849577 100644
--- a/apps/labs/doc/selectbutton/BasicDoc.vue
+++ b/apps/volt/doc/selectbutton/BasicDoc.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value = ref('One Way');
@@ -26,7 +26,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value = ref('One Way');
diff --git a/apps/labs/doc/selectbutton/DisabledDoc.vue b/apps/volt/doc/selectbutton/DisabledDoc.vue
similarity index 93%
rename from apps/labs/doc/selectbutton/DisabledDoc.vue
rename to apps/volt/doc/selectbutton/DisabledDoc.vue
index 65d5ea1e1..86b0ec058 100644
--- a/apps/labs/doc/selectbutton/DisabledDoc.vue
+++ b/apps/volt/doc/selectbutton/DisabledDoc.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value1 = ref('One Way');
@@ -30,7 +30,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value1 = ref('One Way');
diff --git a/apps/volt/doc/selectbutton/ImportDoc.vue b/apps/volt/doc/selectbutton/ImportDoc.vue
new file mode 100644
index 000000000..bea8a59d9
--- /dev/null
+++ b/apps/volt/doc/selectbutton/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import SelectButton from '@/volt/selectbutton';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/InvalidDoc.vue b/apps/volt/doc/selectbutton/InvalidDoc.vue
similarity index 90%
rename from apps/labs/doc/selectbutton/InvalidDoc.vue
rename to apps/volt/doc/selectbutton/InvalidDoc.vue
index cf87a6367..949487a4e 100644
--- a/apps/labs/doc/selectbutton/InvalidDoc.vue
+++ b/apps/volt/doc/selectbutton/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -23,7 +23,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/selectbutton/MultipleDoc.vue b/apps/volt/doc/selectbutton/MultipleDoc.vue
similarity index 92%
rename from apps/labs/doc/selectbutton/MultipleDoc.vue
rename to apps/volt/doc/selectbutton/MultipleDoc.vue
index 137a0abe2..48a35a754 100644
--- a/apps/labs/doc/selectbutton/MultipleDoc.vue
+++ b/apps/volt/doc/selectbutton/MultipleDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -27,7 +27,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/selectbutton/SizesDoc.vue b/apps/volt/doc/selectbutton/SizesDoc.vue
similarity index 92%
rename from apps/labs/doc/selectbutton/SizesDoc.vue
rename to apps/volt/doc/selectbutton/SizesDoc.vue
index a1dd39730..0066bb796 100644
--- a/apps/labs/doc/selectbutton/SizesDoc.vue
+++ b/apps/volt/doc/selectbutton/SizesDoc.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -29,7 +29,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/doc/selectbutton/TemplateDoc.vue b/apps/volt/doc/selectbutton/TemplateDoc.vue
similarity index 94%
rename from apps/labs/doc/selectbutton/TemplateDoc.vue
rename to apps/volt/doc/selectbutton/TemplateDoc.vue
index ddfae29a9..e739e7c62 100644
--- a/apps/labs/doc/selectbutton/TemplateDoc.vue
+++ b/apps/volt/doc/selectbutton/TemplateDoc.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -36,7 +36,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import SelectButton from '@/plex/selectbutton';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/slider/BasicDoc.vue b/apps/volt/doc/slider/BasicDoc.vue
similarity index 89%
rename from apps/labs/doc/slider/BasicDoc.vue
rename to apps/volt/doc/slider/BasicDoc.vue
index d276012c8..6381da10f 100644
--- a/apps/labs/doc/slider/BasicDoc.vue
+++ b/apps/volt/doc/slider/BasicDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/slider/FilterDoc.vue b/apps/volt/doc/slider/FilterDoc.vue
similarity index 89%
rename from apps/labs/doc/slider/FilterDoc.vue
rename to apps/volt/doc/slider/FilterDoc.vue
index eaaf1124f..3757f3ac6 100644
--- a/apps/labs/doc/slider/FilterDoc.vue
+++ b/apps/volt/doc/slider/FilterDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/rating/ImportDoc.vue b/apps/volt/doc/slider/ImportDoc.vue
similarity index 85%
rename from apps/labs/doc/rating/ImportDoc.vue
rename to apps/volt/doc/slider/ImportDoc.vue
index c7526e53b..852e56b1a 100644
--- a/apps/labs/doc/rating/ImportDoc.vue
+++ b/apps/volt/doc/slider/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import Rating from '@/plex/rating';
+import Slider from '@/volt/slider';
 `
         };
     }
diff --git a/apps/labs/doc/slider/InputDoc.vue b/apps/volt/doc/slider/InputDoc.vue
similarity index 83%
rename from apps/labs/doc/slider/InputDoc.vue
rename to apps/volt/doc/slider/InputDoc.vue
index 4e507047e..899d414ca 100644
--- a/apps/labs/doc/slider/InputDoc.vue
+++ b/apps/volt/doc/slider/InputDoc.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
-import Slider from '@/plex/slider';
+import InputText from '@/volt/inputtext';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -27,8 +27,8 @@ const code = ref(`
 </div>
 
 <script setup>
-import InputText from '@/plex/inputtext';
-import Slider from '@/plex/slider';
+import InputText from '@/volt/inputtext';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/labs/doc/slider/RangeDoc.vue b/apps/volt/doc/slider/RangeDoc.vue
similarity index 90%
rename from apps/labs/doc/slider/RangeDoc.vue
rename to apps/volt/doc/slider/RangeDoc.vue
index befae54ee..b25fd9d41 100644
--- a/apps/labs/doc/slider/RangeDoc.vue
+++ b/apps/volt/doc/slider/RangeDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref([20, 80]);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref([20, 80]);
diff --git a/apps/labs/doc/slider/StepDoc.vue b/apps/volt/doc/slider/StepDoc.vue
similarity index 89%
rename from apps/labs/doc/slider/StepDoc.vue
rename to apps/volt/doc/slider/StepDoc.vue
index 909fb6b59..7416a3f4f 100644
--- a/apps/labs/doc/slider/StepDoc.vue
+++ b/apps/volt/doc/slider/StepDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(20);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(20);
diff --git a/apps/labs/doc/slider/VerticalDoc.vue b/apps/volt/doc/slider/VerticalDoc.vue
similarity index 90%
rename from apps/labs/doc/slider/VerticalDoc.vue
rename to apps/volt/doc/slider/VerticalDoc.vue
index 146281d0c..61362404d 100644
--- a/apps/labs/doc/slider/VerticalDoc.vue
+++ b/apps/volt/doc/slider/VerticalDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Slider from '@/plex/slider';
+import Slider from '@/volt/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/labs/doc/textarea/AutoResizeDoc.vue b/apps/volt/doc/textarea/AutoResizeDoc.vue
similarity index 89%
rename from apps/labs/doc/textarea/AutoResizeDoc.vue
rename to apps/volt/doc/textarea/AutoResizeDoc.vue
index de2bc47e0..b763656bd 100644
--- a/apps/labs/doc/textarea/AutoResizeDoc.vue
+++ b/apps/volt/doc/textarea/AutoResizeDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/BasicDoc.vue b/apps/volt/doc/textarea/BasicDoc.vue
similarity index 89%
rename from apps/labs/doc/textarea/BasicDoc.vue
rename to apps/volt/doc/textarea/BasicDoc.vue
index 8474194c0..96f2fea24 100644
--- a/apps/labs/doc/textarea/BasicDoc.vue
+++ b/apps/volt/doc/textarea/BasicDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/DisabledDoc.vue b/apps/volt/doc/textarea/DisabledDoc.vue
similarity index 89%
rename from apps/labs/doc/textarea/DisabledDoc.vue
rename to apps/volt/doc/textarea/DisabledDoc.vue
index 1421cd0e6..f28974736 100644
--- a/apps/labs/doc/textarea/DisabledDoc.vue
+++ b/apps/volt/doc/textarea/DisabledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/FilledDoc.vue b/apps/volt/doc/textarea/FilledDoc.vue
similarity index 90%
rename from apps/labs/doc/textarea/FilledDoc.vue
rename to apps/volt/doc/textarea/FilledDoc.vue
index 9d4c9382b..061bbb41d 100644
--- a/apps/labs/doc/textarea/FilledDoc.vue
+++ b/apps/volt/doc/textarea/FilledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/HelpTextDoc.vue b/apps/volt/doc/textarea/HelpTextDoc.vue
similarity index 88%
rename from apps/labs/doc/inputtext/HelpTextDoc.vue
rename to apps/volt/doc/textarea/HelpTextDoc.vue
index 5a1def75b..5e41700c5 100644
--- a/apps/labs/doc/inputtext/HelpTextDoc.vue
+++ b/apps/volt/doc/textarea/HelpTextDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputText from '@/plex/inputtext';
+import InputText from '@/volt/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/ImportDoc.vue b/apps/volt/doc/textarea/ImportDoc.vue
similarity index 84%
rename from apps/labs/doc/textarea/ImportDoc.vue
rename to apps/volt/doc/textarea/ImportDoc.vue
index d50fe1a9b..27c6cdfef 100644
--- a/apps/labs/doc/textarea/ImportDoc.vue
+++ b/apps/volt/doc/textarea/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 `
         };
     }
diff --git a/apps/labs/doc/textarea/InvalidDoc.vue b/apps/volt/doc/textarea/InvalidDoc.vue
similarity index 91%
rename from apps/labs/doc/textarea/InvalidDoc.vue
rename to apps/volt/doc/textarea/InvalidDoc.vue
index 140bc6e9a..45ed88497 100644
--- a/apps/labs/doc/textarea/InvalidDoc.vue
+++ b/apps/volt/doc/textarea/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref('');
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/SizesDoc.vue b/apps/volt/doc/textarea/SizesDoc.vue
similarity index 93%
rename from apps/labs/doc/textarea/SizesDoc.vue
rename to apps/volt/doc/textarea/SizesDoc.vue
index e863109b6..e7fa8f603 100644
--- a/apps/labs/doc/textarea/SizesDoc.vue
+++ b/apps/volt/doc/textarea/SizesDoc.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -28,7 +28,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Textarea from '@/plex/textarea';
+import Textarea from '@/volt/textarea';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/doc/timeline/AlignmentDoc.vue b/apps/volt/doc/timeline/AlignmentDoc.vue
similarity index 96%
rename from apps/labs/doc/timeline/AlignmentDoc.vue
rename to apps/volt/doc/timeline/AlignmentDoc.vue
index 507e403b9..062569904 100644
--- a/apps/labs/doc/timeline/AlignmentDoc.vue
+++ b/apps/volt/doc/timeline/AlignmentDoc.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref([
@@ -59,7 +59,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref([
diff --git a/apps/labs/doc/timeline/BasicDoc.vue b/apps/volt/doc/timeline/BasicDoc.vue
similarity index 95%
rename from apps/labs/doc/timeline/BasicDoc.vue
rename to apps/volt/doc/timeline/BasicDoc.vue
index 5fdd5fd64..7d5bcee7e 100644
--- a/apps/labs/doc/timeline/BasicDoc.vue
+++ b/apps/volt/doc/timeline/BasicDoc.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref([
@@ -35,7 +35,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref([
diff --git a/apps/labs/doc/timeline/HorizontalDoc.vue b/apps/volt/doc/timeline/HorizontalDoc.vue
similarity index 96%
rename from apps/labs/doc/timeline/HorizontalDoc.vue
rename to apps/volt/doc/timeline/HorizontalDoc.vue
index a8b51b18e..a28b6914f 100644
--- a/apps/labs/doc/timeline/HorizontalDoc.vue
+++ b/apps/volt/doc/timeline/HorizontalDoc.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref(['2020', '2021', '2022', '2023']);
@@ -56,7 +56,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref(['2020', '2021', '2022', '2023']);
diff --git a/apps/volt/doc/timeline/ImportDoc.vue b/apps/volt/doc/timeline/ImportDoc.vue
new file mode 100644
index 000000000..b75a848c4
--- /dev/null
+++ b/apps/volt/doc/timeline/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import Timeline from '@/volt/timeline';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/timeline/OppositeDoc.vue b/apps/volt/doc/timeline/OppositeDoc.vue
similarity index 96%
rename from apps/labs/doc/timeline/OppositeDoc.vue
rename to apps/volt/doc/timeline/OppositeDoc.vue
index 50533ee31..a7d7c35c8 100644
--- a/apps/labs/doc/timeline/OppositeDoc.vue
+++ b/apps/volt/doc/timeline/OppositeDoc.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref([
@@ -41,7 +41,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref([
diff --git a/apps/labs/doc/timeline/TemplateDoc.vue b/apps/volt/doc/timeline/TemplateDoc.vue
similarity index 98%
rename from apps/labs/doc/timeline/TemplateDoc.vue
rename to apps/volt/doc/timeline/TemplateDoc.vue
index dea81ab2b..c1fd39f0a 100644
--- a/apps/labs/doc/timeline/TemplateDoc.vue
+++ b/apps/volt/doc/timeline/TemplateDoc.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref([
@@ -75,7 +75,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import Timeline from '@/plex/timeline';
+import Timeline from '@/volt/timeline';
 import { ref } from 'vue';
 
 const events = ref([
diff --git a/apps/labs/doc/togglebutton/BasicDoc.vue b/apps/volt/doc/togglebutton/BasicDoc.vue
similarity index 87%
rename from apps/labs/doc/togglebutton/BasicDoc.vue
rename to apps/volt/doc/togglebutton/BasicDoc.vue
index deea3ea93..88a434cbc 100644
--- a/apps/labs/doc/togglebutton/BasicDoc.vue
+++ b/apps/volt/doc/togglebutton/BasicDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/togglebutton/CustomizedDoc.vue b/apps/volt/doc/togglebutton/CustomizedDoc.vue
similarity index 90%
rename from apps/labs/doc/togglebutton/CustomizedDoc.vue
rename to apps/volt/doc/togglebutton/CustomizedDoc.vue
index ac3f22dcf..0b39b9f60 100644
--- a/apps/labs/doc/togglebutton/CustomizedDoc.vue
+++ b/apps/volt/doc/togglebutton/CustomizedDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/togglebutton/DisabledDoc.vue b/apps/volt/doc/togglebutton/DisabledDoc.vue
similarity index 89%
rename from apps/labs/doc/togglebutton/DisabledDoc.vue
rename to apps/volt/doc/togglebutton/DisabledDoc.vue
index 702921bd5..039491a1f 100644
--- a/apps/labs/doc/togglebutton/DisabledDoc.vue
+++ b/apps/volt/doc/togglebutton/DisabledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/volt/doc/togglebutton/ImportDoc.vue b/apps/volt/doc/togglebutton/ImportDoc.vue
new file mode 100644
index 000000000..3d0aceb68
--- /dev/null
+++ b/apps/volt/doc/togglebutton/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import ToggleButton from '@/volt/togglebutton';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/togglebutton/InvalidDoc.vue b/apps/volt/doc/togglebutton/InvalidDoc.vue
similarity index 90%
rename from apps/labs/doc/togglebutton/InvalidDoc.vue
rename to apps/volt/doc/togglebutton/InvalidDoc.vue
index 304774a3c..aeb70fe63 100644
--- a/apps/labs/doc/togglebutton/InvalidDoc.vue
+++ b/apps/volt/doc/togglebutton/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/togglebutton/SizesDoc.vue b/apps/volt/doc/togglebutton/SizesDoc.vue
similarity index 92%
rename from apps/labs/doc/togglebutton/SizesDoc.vue
rename to apps/volt/doc/togglebutton/SizesDoc.vue
index 154f77f91..c2cdd9f60 100644
--- a/apps/labs/doc/togglebutton/SizesDoc.vue
+++ b/apps/volt/doc/togglebutton/SizesDoc.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked1 = ref(false);
@@ -28,7 +28,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleButton from '@/plex/togglebutton';
+import ToggleButton from '@/volt/togglebutton';
 import { ref } from 'vue';
 
 const checked1 = ref(false);
diff --git a/apps/labs/doc/toggleswitch/BasicDoc.vue b/apps/volt/doc/toggleswitch/BasicDoc.vue
similarity index 86%
rename from apps/labs/doc/toggleswitch/BasicDoc.vue
rename to apps/volt/doc/toggleswitch/BasicDoc.vue
index c797c205a..77700e070 100644
--- a/apps/labs/doc/toggleswitch/BasicDoc.vue
+++ b/apps/volt/doc/toggleswitch/BasicDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/toggleswitch/DisabledDoc.vue b/apps/volt/doc/toggleswitch/DisabledDoc.vue
similarity index 86%
rename from apps/labs/doc/toggleswitch/DisabledDoc.vue
rename to apps/volt/doc/toggleswitch/DisabledDoc.vue
index 0c1f9f423..2a36c55b5 100644
--- a/apps/labs/doc/toggleswitch/DisabledDoc.vue
+++ b/apps/volt/doc/toggleswitch/DisabledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/volt/doc/toggleswitch/ImportDoc.vue b/apps/volt/doc/toggleswitch/ImportDoc.vue
new file mode 100644
index 000000000..be138569e
--- /dev/null
+++ b/apps/volt/doc/toggleswitch/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import ToggleSwitch from '@/volt/toggleswitch';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/toggleswitch/InvalidDoc.vue b/apps/volt/doc/toggleswitch/InvalidDoc.vue
similarity index 88%
rename from apps/labs/doc/toggleswitch/InvalidDoc.vue
rename to apps/volt/doc/toggleswitch/InvalidDoc.vue
index 10de39ba3..245caca87 100644
--- a/apps/labs/doc/toggleswitch/InvalidDoc.vue
+++ b/apps/volt/doc/toggleswitch/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/toggleswitch/PreselectionDoc.vue b/apps/volt/doc/toggleswitch/PreselectionDoc.vue
similarity index 86%
rename from apps/labs/doc/toggleswitch/PreselectionDoc.vue
rename to apps/volt/doc/toggleswitch/PreselectionDoc.vue
index 5c6b9c69c..3382795b4 100644
--- a/apps/labs/doc/toggleswitch/PreselectionDoc.vue
+++ b/apps/volt/doc/toggleswitch/PreselectionDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(true);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(true);
diff --git a/apps/labs/doc/toggleswitch/TemplateDoc.vue b/apps/volt/doc/toggleswitch/TemplateDoc.vue
similarity index 91%
rename from apps/labs/doc/toggleswitch/TemplateDoc.vue
rename to apps/volt/doc/toggleswitch/TemplateDoc.vue
index 23be940ee..1d3f3f036 100644
--- a/apps/labs/doc/toggleswitch/TemplateDoc.vue
+++ b/apps/volt/doc/toggleswitch/TemplateDoc.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(false);
@@ -30,7 +30,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import ToggleSwitch from '@/plex/toggleswitch';
+import ToggleSwitch from '@/volt/toggleswitch';
 import { ref } from 'vue';
 
 const checked = ref(false);
diff --git a/apps/labs/doc/vite/CSSVariablesDoc.vue b/apps/volt/doc/vite/CSSVariablesDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/CSSVariablesDoc.vue
rename to apps/volt/doc/vite/CSSVariablesDoc.vue
diff --git a/apps/labs/doc/vite/DownloadDoc.vue b/apps/volt/doc/vite/DownloadDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/DownloadDoc.vue
rename to apps/volt/doc/vite/DownloadDoc.vue
diff --git a/apps/labs/doc/vite/ExampleDoc.vue b/apps/volt/doc/vite/ExampleDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/ExampleDoc.vue
rename to apps/volt/doc/vite/ExampleDoc.vue
diff --git a/apps/labs/doc/vite/PluginDoc.vue b/apps/volt/doc/vite/PluginDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/PluginDoc.vue
rename to apps/volt/doc/vite/PluginDoc.vue
diff --git a/apps/labs/doc/vite/StylesDoc.vue b/apps/volt/doc/vite/StylesDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/StylesDoc.vue
rename to apps/volt/doc/vite/StylesDoc.vue
diff --git a/apps/labs/doc/vite/TailwindDoc.vue b/apps/volt/doc/vite/TailwindDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/TailwindDoc.vue
rename to apps/volt/doc/vite/TailwindDoc.vue
diff --git a/apps/labs/doc/vite/tailwind/ImportStylesDoc.vue b/apps/volt/doc/vite/tailwind/ImportStylesDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/tailwind/ImportStylesDoc.vue
rename to apps/volt/doc/vite/tailwind/ImportStylesDoc.vue
diff --git a/apps/labs/doc/vite/tailwind/PostCSSImportDoc.vue b/apps/volt/doc/vite/tailwind/PostCSSImportDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/tailwind/PostCSSImportDoc.vue
rename to apps/volt/doc/vite/tailwind/PostCSSImportDoc.vue
diff --git a/apps/labs/doc/vite/tailwind/PrimeUIPluginDoc.vue b/apps/volt/doc/vite/tailwind/PrimeUIPluginDoc.vue
similarity index 100%
rename from apps/labs/doc/vite/tailwind/PrimeUIPluginDoc.vue
rename to apps/volt/doc/vite/tailwind/PrimeUIPluginDoc.vue
diff --git a/apps/labs/error.vue b/apps/volt/error.vue
similarity index 100%
rename from apps/labs/error.vue
rename to apps/volt/error.vue
diff --git a/apps/labs/layouts/AppEventBus.js b/apps/volt/layouts/AppEventBus.js
similarity index 100%
rename from apps/labs/layouts/AppEventBus.js
rename to apps/volt/layouts/AppEventBus.js
diff --git a/apps/labs/layouts/custom.vue b/apps/volt/layouts/custom.vue
similarity index 100%
rename from apps/labs/layouts/custom.vue
rename to apps/volt/layouts/custom.vue
diff --git a/apps/labs/layouts/default.vue b/apps/volt/layouts/default.vue
similarity index 100%
rename from apps/labs/layouts/default.vue
rename to apps/volt/layouts/default.vue
diff --git a/apps/labs/middleware/route.global.js b/apps/volt/middleware/route.global.js
similarity index 100%
rename from apps/labs/middleware/route.global.js
rename to apps/volt/middleware/route.global.js
diff --git a/apps/labs/nuxt.config.js b/apps/volt/nuxt.config.js
similarity index 98%
rename from apps/labs/nuxt.config.js
rename to apps/volt/nuxt.config.js
index ed3a4ccea..aaebce14e 100644
--- a/apps/labs/nuxt.config.js
+++ b/apps/volt/nuxt.config.js
@@ -40,7 +40,7 @@ export default defineNuxtConfig({
     app: {
         baseURL: baseUrl,
         head: {
-            title: 'Plex UI Component Library for Vue.js',
+            title: 'Volt UI Component Library for Vue.js',
             meta: [
                 { charset: 'utf-8' },
                 { name: 'viewport', content: 'width=device-width, initial-scale=1' },
diff --git a/apps/labs/package.json b/apps/volt/package.json
similarity index 96%
rename from apps/labs/package.json
rename to apps/volt/package.json
index 8a7a8f5ae..b32ada143 100644
--- a/apps/labs/package.json
+++ b/apps/volt/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "labs",
+    "name": "volt",
     "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
@@ -8,7 +8,7 @@
     "repository": {
         "type": "git",
         "url": "https://github.com/primefaces/primevue.git",
-        "directory": "packages/labs"
+        "directory": "packages/volt"
     },
     "bugs": {
         "url": "https://github.com/primefaces/primevue/issues"
diff --git a/apps/labs/pages/checkbox/index.vue b/apps/volt/pages/checkbox/index.vue
similarity index 100%
rename from apps/labs/pages/checkbox/index.vue
rename to apps/volt/pages/checkbox/index.vue
diff --git a/apps/labs/pages/icons/index.vue b/apps/volt/pages/icons/index.vue
similarity index 90%
rename from apps/labs/pages/icons/index.vue
rename to apps/volt/pages/icons/index.vue
index 17d8a42ef..e27888828 100644
--- a/apps/labs/pages/icons/index.vue
+++ b/apps/volt/pages/icons/index.vue
@@ -1,15 +1,15 @@
 <template>
     <div>
         <Head>
-            <Title>Icons - Plex</Title>
-            <Meta name="description" content="Plex components can be used with any icon library using the templating features." />
+            <Title>Icons - Volt</Title>
+            <Meta name="description" content="Volt components can be used with any icon library using the templating features." />
         </Head>
 
         <div class="doc">
             <div class="doc-main">
                 <div class="doc-intro">
                     <h1>Icons</h1>
-                    <p>Plex components can be used with any icon library using the templating features.</p>
+                    <p>Volt components can be used with any icon library using the templating features.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>
diff --git a/apps/labs/pages/index.vue b/apps/volt/pages/index.vue
similarity index 100%
rename from apps/labs/pages/index.vue
rename to apps/volt/pages/index.vue
diff --git a/apps/labs/pages/inputmask/index.vue b/apps/volt/pages/inputmask/index.vue
similarity index 100%
rename from apps/labs/pages/inputmask/index.vue
rename to apps/volt/pages/inputmask/index.vue
diff --git a/apps/labs/pages/inputtext/index.vue b/apps/volt/pages/inputtext/index.vue
similarity index 100%
rename from apps/labs/pages/inputtext/index.vue
rename to apps/volt/pages/inputtext/index.vue
diff --git a/apps/labs/pages/introduction/index.vue b/apps/volt/pages/introduction/index.vue
similarity index 100%
rename from apps/labs/pages/introduction/index.vue
rename to apps/volt/pages/introduction/index.vue
diff --git a/apps/labs/pages/nuxt/index.vue b/apps/volt/pages/nuxt/index.vue
similarity index 100%
rename from apps/labs/pages/nuxt/index.vue
rename to apps/volt/pages/nuxt/index.vue
diff --git a/apps/labs/pages/radiobutton/index.vue b/apps/volt/pages/radiobutton/index.vue
similarity index 100%
rename from apps/labs/pages/radiobutton/index.vue
rename to apps/volt/pages/radiobutton/index.vue
diff --git a/apps/labs/pages/rating/index.vue b/apps/volt/pages/rating/index.vue
similarity index 100%
rename from apps/labs/pages/rating/index.vue
rename to apps/volt/pages/rating/index.vue
diff --git a/apps/labs/pages/selectbutton/index.vue b/apps/volt/pages/selectbutton/index.vue
similarity index 100%
rename from apps/labs/pages/selectbutton/index.vue
rename to apps/volt/pages/selectbutton/index.vue
diff --git a/apps/labs/pages/slider/index.vue b/apps/volt/pages/slider/index.vue
similarity index 100%
rename from apps/labs/pages/slider/index.vue
rename to apps/volt/pages/slider/index.vue
diff --git a/apps/labs/pages/textarea/index.vue b/apps/volt/pages/textarea/index.vue
similarity index 100%
rename from apps/labs/pages/textarea/index.vue
rename to apps/volt/pages/textarea/index.vue
diff --git a/apps/labs/pages/timeline/index.vue b/apps/volt/pages/timeline/index.vue
similarity index 100%
rename from apps/labs/pages/timeline/index.vue
rename to apps/volt/pages/timeline/index.vue
diff --git a/apps/labs/pages/togglebutton/index.vue b/apps/volt/pages/togglebutton/index.vue
similarity index 100%
rename from apps/labs/pages/togglebutton/index.vue
rename to apps/volt/pages/togglebutton/index.vue
diff --git a/apps/labs/pages/toggleswitch/index.vue b/apps/volt/pages/toggleswitch/index.vue
similarity index 100%
rename from apps/labs/pages/toggleswitch/index.vue
rename to apps/volt/pages/toggleswitch/index.vue
diff --git a/apps/labs/pages/vite/index.vue b/apps/volt/pages/vite/index.vue
similarity index 100%
rename from apps/labs/pages/vite/index.vue
rename to apps/volt/pages/vite/index.vue
diff --git a/apps/labs/plugins/app.js b/apps/volt/plugins/app.js
similarity index 100%
rename from apps/labs/plugins/app.js
rename to apps/volt/plugins/app.js
diff --git a/apps/labs/public/favicon.ico b/apps/volt/public/favicon.ico
similarity index 100%
rename from apps/labs/public/favicon.ico
rename to apps/volt/public/favicon.ico
diff --git a/apps/labs/public/scripts/prism.js b/apps/volt/public/scripts/prism.js
similarity index 100%
rename from apps/labs/public/scripts/prism.js
rename to apps/volt/public/scripts/prism.js
diff --git a/apps/labs/scripts/build-presetdoc.js b/apps/volt/scripts/build-presetdoc.js
similarity index 100%
rename from apps/labs/scripts/build-presetdoc.js
rename to apps/volt/scripts/build-presetdoc.js
diff --git a/apps/labs/scripts/prebuild.js b/apps/volt/scripts/prebuild.js
similarity index 100%
rename from apps/labs/scripts/prebuild.js
rename to apps/volt/scripts/prebuild.js
diff --git a/apps/labs/service/CarService.js b/apps/volt/service/CarService.js
similarity index 100%
rename from apps/labs/service/CarService.js
rename to apps/volt/service/CarService.js
diff --git a/apps/labs/service/CountryService.js b/apps/volt/service/CountryService.js
similarity index 100%
rename from apps/labs/service/CountryService.js
rename to apps/volt/service/CountryService.js
diff --git a/apps/labs/service/CustomerService.js b/apps/volt/service/CustomerService.js
similarity index 100%
rename from apps/labs/service/CustomerService.js
rename to apps/volt/service/CustomerService.js
diff --git a/apps/labs/service/EventService.js b/apps/volt/service/EventService.js
similarity index 100%
rename from apps/labs/service/EventService.js
rename to apps/volt/service/EventService.js
diff --git a/apps/labs/service/IconService.js b/apps/volt/service/IconService.js
similarity index 100%
rename from apps/labs/service/IconService.js
rename to apps/volt/service/IconService.js
diff --git a/apps/labs/service/NodeService.js b/apps/volt/service/NodeService.js
similarity index 100%
rename from apps/labs/service/NodeService.js
rename to apps/volt/service/NodeService.js
diff --git a/apps/labs/service/PhotoService.js b/apps/volt/service/PhotoService.js
similarity index 100%
rename from apps/labs/service/PhotoService.js
rename to apps/volt/service/PhotoService.js
diff --git a/apps/labs/service/ProductService.js b/apps/volt/service/ProductService.js
similarity index 100%
rename from apps/labs/service/ProductService.js
rename to apps/volt/service/ProductService.js
diff --git a/apps/labs/tailwind.config.js b/apps/volt/tailwind.config.js
similarity index 96%
rename from apps/labs/tailwind.config.js
rename to apps/volt/tailwind.config.js
index 8b86ade7e..ef67c8f73 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/volt/tailwind.config.js
@@ -4,7 +4,7 @@ import plugin from 'tailwindcss/plugin';
 
 export default {
     darkMode: ['selector', '[class~="p-dark"]'],
-    content: ['./components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './plex/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
+    content: ['./components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './volt/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
     plugins: [
         PrimeUI,
         plugin(function ({ addVariant }) {
diff --git a/apps/labs/tsconfig.json b/apps/volt/tsconfig.json
similarity index 100%
rename from apps/labs/tsconfig.json
rename to apps/volt/tsconfig.json
diff --git a/apps/labs/plex/checkbox/index.vue b/apps/volt/volt/checkbox/index.vue
similarity index 100%
rename from apps/labs/plex/checkbox/index.vue
rename to apps/volt/volt/checkbox/index.vue
diff --git a/apps/labs/plex/inputmask/index.vue b/apps/volt/volt/inputmask/index.vue
similarity index 100%
rename from apps/labs/plex/inputmask/index.vue
rename to apps/volt/volt/inputmask/index.vue
diff --git a/apps/labs/plex/inputtext/index.vue b/apps/volt/volt/inputtext/index.vue
similarity index 100%
rename from apps/labs/plex/inputtext/index.vue
rename to apps/volt/volt/inputtext/index.vue
diff --git a/apps/labs/plex/radiobutton/index.vue b/apps/volt/volt/radiobutton/index.vue
similarity index 100%
rename from apps/labs/plex/radiobutton/index.vue
rename to apps/volt/volt/radiobutton/index.vue
diff --git a/apps/labs/plex/rating/index.vue b/apps/volt/volt/rating/index.vue
similarity index 100%
rename from apps/labs/plex/rating/index.vue
rename to apps/volt/volt/rating/index.vue
diff --git a/apps/labs/plex/selectbutton/index.vue b/apps/volt/volt/selectbutton/index.vue
similarity index 100%
rename from apps/labs/plex/selectbutton/index.vue
rename to apps/volt/volt/selectbutton/index.vue
diff --git a/apps/labs/plex/slider/index.vue b/apps/volt/volt/slider/index.vue
similarity index 100%
rename from apps/labs/plex/slider/index.vue
rename to apps/volt/volt/slider/index.vue
diff --git a/apps/labs/plex/textarea/index.vue b/apps/volt/volt/textarea/index.vue
similarity index 100%
rename from apps/labs/plex/textarea/index.vue
rename to apps/volt/volt/textarea/index.vue
diff --git a/apps/labs/plex/timeline/index.vue b/apps/volt/volt/timeline/index.vue
similarity index 100%
rename from apps/labs/plex/timeline/index.vue
rename to apps/volt/volt/timeline/index.vue
diff --git a/apps/labs/plex/togglebutton/index.vue b/apps/volt/volt/togglebutton/index.vue
similarity index 100%
rename from apps/labs/plex/togglebutton/index.vue
rename to apps/volt/volt/togglebutton/index.vue
diff --git a/apps/labs/plex/toggleswitch/index.vue b/apps/volt/volt/toggleswitch/index.vue
similarity index 100%
rename from apps/labs/plex/toggleswitch/index.vue
rename to apps/volt/volt/toggleswitch/index.vue
diff --git a/apps/labs/plex/utils/index.js b/apps/volt/volt/utils/index.js
similarity index 100%
rename from apps/labs/plex/utils/index.js
rename to apps/volt/volt/utils/index.js
diff --git a/package.json b/package.json
index 202d62e21..ad8563ee5 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
         "dev": "pnpm --filter showcase dev",
         "preview": "pnpm --filter showcase preview",
         "hot:dev": "DEV_ENV=hot pnpm --filter showcase dev",
-        "labs:dev": "pnpm --filter labs dev",
+        "volt:dev": "pnpm --filter volt dev",
         "module:dev": "pnpm --filter @primevue/nuxt-module dev",
         "security:check": "pnpm audit --prod --audit-level high",
         "lint": "eslint .",
@@ -59,7 +59,7 @@
         "prettier": "^3.5.2",
         "rollup-plugin-postcss": "^4.0.0",
         "rollup-plugin-vue": "^6.0.0-beta.9",
-        "typescript": "^5.7.3"
+        "typescript": "5.7.3"
     },
     "publishConfig": {
         "access": "public"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c09bd418..034c8361e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -97,87 +97,8 @@ importers:
         specifier: ^6.0.0-beta.9
         version: 6.0.0(@vue/compiler-sfc@3.5.13)
       typescript:
-        specifier: ^5.7.3
-        version: 5.8.2
-
-  apps/labs:
-    dependencies:
-      '@docsearch/js':
-        specifier: catalog:app
-        version: 3.9.0(@algolia/client-search@5.20.3)(search-insights@2.17.3)
-      '@primeuix/themes':
-        specifier: 'catalog:'
-        version: 1.0.0
-      '@primevue/core':
-        specifier: workspace:*
-        version: link:../../packages/core
-      '@primevue/forms':
-        specifier: workspace:*
-        version: link:../../packages/forms
-      '@primevue/nuxt-module':
-        specifier: workspace:*
-        version: link:../../packages/nuxt-module
-      chart.js:
-        specifier: catalog:app
-        version: 3.3.2
-      primeicons:
-        specifier: 'catalog:'
-        version: 7.0.0
-      primevue:
-        specifier: workspace:*
-        version: link:../../packages/primevue
-      quill:
-        specifier: catalog:app
-        version: 2.0.0
-      superstruct:
-        specifier: ^2.0.2
-        version: 2.0.2
-      valibot:
-        specifier: ^0.42.1
-        version: 0.42.1(typescript@5.8.2)
-      yup:
-        specifier: 1.4.0
-        version: 1.4.0
-      zod:
-        specifier: 3.23.8
-        version: 3.23.8
-    devDependencies:
-      '@stackblitz/sdk':
-        specifier: ^1.8.2
-        version: 1.11.0
-      autoprefixer:
-        specifier: ^10
-        version: 10.4.20(postcss@8.5.3)
-      jsdom:
-        specifier: ^19.0.0
-        version: 19.0.0
-      nuxt:
-        specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0)
-      postcss:
-        specifier: ^8.4.31
-        version: 8.5.3
-      sass:
-        specifier: catalog:app
-        version: 1.45.0
-      sass-loader:
-        specifier: catalog:app
-        version: 8.0.2(sass@1.45.0)(webpack@5.98.0)
-      tailwind-merge:
-        specifier: ^3.0.2
-        version: 3.0.2
-      tailwindcss:
-        specifier: ^3
-        version: 3.4.17
-      tailwindcss-primeui:
-        specifier: 'catalog:'
-        version: 0.5.1(tailwindcss@3.4.17)
-      typedoc:
-        specifier: 0.27.9
-        version: 0.27.9(typescript@5.8.2)
-      vite:
-        specifier: catalog:app
-        version: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+        specifier: 5.7.3
+        version: 5.7.3
 
   apps/showcase:
     dependencies:
@@ -213,7 +134,7 @@ importers:
         version: 2.0.2
       valibot:
         specifier: ^0.42.1
-        version: 0.42.1(typescript@5.8.2)
+        version: 0.42.1(typescript@5.7.3)
       yup:
         specifier: 1.4.0
         version: 1.4.0
@@ -232,7 +153,7 @@ importers:
         version: 19.0.0
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       postcss:
         specifier: ^8.4.31
         version: 8.5.3
@@ -250,7 +171,86 @@ importers:
         version: 0.5.1(tailwindcss@3.4.17)
       typedoc:
         specifier: 0.23.23
-        version: 0.23.23(typescript@5.8.2)
+        version: 0.23.23(typescript@5.7.3)
+      vite:
+        specifier: catalog:app
+        version: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+
+  apps/volt:
+    dependencies:
+      '@docsearch/js':
+        specifier: catalog:app
+        version: 3.9.0(@algolia/client-search@5.20.3)(search-insights@2.17.3)
+      '@primeuix/themes':
+        specifier: 'catalog:'
+        version: 1.0.0
+      '@primevue/core':
+        specifier: workspace:*
+        version: link:../../packages/core
+      '@primevue/forms':
+        specifier: workspace:*
+        version: link:../../packages/forms
+      '@primevue/nuxt-module':
+        specifier: workspace:*
+        version: link:../../packages/nuxt-module
+      chart.js:
+        specifier: catalog:app
+        version: 3.3.2
+      primeicons:
+        specifier: 'catalog:'
+        version: 7.0.0
+      primevue:
+        specifier: workspace:*
+        version: link:../../packages/primevue
+      quill:
+        specifier: catalog:app
+        version: 2.0.0
+      superstruct:
+        specifier: ^2.0.2
+        version: 2.0.2
+      valibot:
+        specifier: ^0.42.1
+        version: 0.42.1(typescript@5.7.3)
+      yup:
+        specifier: 1.4.0
+        version: 1.4.0
+      zod:
+        specifier: 3.23.8
+        version: 3.23.8
+    devDependencies:
+      '@stackblitz/sdk':
+        specifier: ^1.8.2
+        version: 1.11.0
+      autoprefixer:
+        specifier: ^10
+        version: 10.4.20(postcss@8.5.3)
+      jsdom:
+        specifier: ^19.0.0
+        version: 19.0.0
+      nuxt:
+        specifier: catalog:app
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+      postcss:
+        specifier: ^8.4.31
+        version: 8.5.3
+      sass:
+        specifier: catalog:app
+        version: 1.45.0
+      sass-loader:
+        specifier: catalog:app
+        version: 8.0.2(sass@1.45.0)(webpack@5.98.0)
+      tailwind-merge:
+        specifier: ^3.0.2
+        version: 3.0.2
+      tailwindcss:
+        specifier: ^3
+        version: 3.4.17
+      tailwindcss-primeui:
+        specifier: 'catalog:'
+        version: 0.5.1(tailwindcss@3.4.17)
+      typedoc:
+        specifier: 0.27.9
+        version: 0.27.9(typescript@5.7.3)
       vite:
         specifier: catalog:app
         version: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
@@ -263,10 +263,10 @@ importers:
     devDependencies:
       tsup:
         specifier: ^8.1.0
-        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0)
+        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
       unplugin-vue-components:
         specifier: ^0.27.0
-        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.8.2))
+        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3))
     publishDirectory: dist
 
   packages/core:
@@ -279,7 +279,7 @@ importers:
         version: 0.5.1
       vue:
         specifier: ^3.5.0
-        version: 3.5.13(typescript@5.8.2)
+        version: 3.5.13(typescript@5.7.3)
     publishDirectory: dist
 
   packages/forms:
@@ -309,7 +309,7 @@ importers:
     devDependencies:
       tsup:
         specifier: ^8.1.0
-        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0)
+        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
     publishDirectory: dist
 
   packages/nuxt-module:
@@ -337,23 +337,23 @@ importers:
         version: link:../primevue
       unplugin-vue-components:
         specifier: 28.4.1
-        version: 28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.8.2))
+        version: 28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.7.3))
     devDependencies:
       '@nuxt/devtools':
         specifier: ^2.1.0
-        version: 2.1.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+        version: 2.1.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/eslint-config':
         specifier: ^1.1.0
-        version: 1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+        version: 1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       '@nuxt/module-builder':
         specifier: ^0.8.4
-        version: 0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.4)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))
+        version: 0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.4)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
       '@nuxt/schema':
         specifier: ^3
         version: 3.15.4
       '@nuxt/test-utils':
         specifier: ^3
-        version: 3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+        version: 3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       '@primeuix/themes':
         specifier: 'catalog:'
         version: 1.0.0
@@ -365,13 +365,13 @@ importers:
         version: 0.6.0(magicast@0.3.5)
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       vitest:
         specifier: ^3.0.7
         version: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
       vue-tsc:
         specifier: ~2.1.6
-        version: 2.1.10(typescript@5.8.2)
+        version: 2.1.10(typescript@5.7.3)
 
   packages/primevue:
     dependencies:
@@ -5783,8 +5783,8 @@ packages:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
 
-  std-env@3.8.0:
-    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
+  std-env@3.8.1:
+    resolution: {integrity: sha512-vj5lIj3Mwf9D79hBkltk5qmkFI+biIKWS2IBxEyEU3AX1tUf7AoL8nSazCOiiqQsGKIq01SClsKEzweu34uwvA==}
 
   streamx@2.22.0:
     resolution: {integrity: sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==}
@@ -6124,8 +6124,8 @@ packages:
     peerDependencies:
       typescript: 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x
 
-  typescript@5.8.2:
-    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -8148,7 +8148,7 @@ snapshots:
       pkg-types: 2.0.1
       scule: 1.3.0
       semver: 7.7.1
-      std-env: 3.8.0
+      std-env: 3.8.1
       tinyexec: 0.3.2
       ufo: 1.5.4
     transitivePeerDependencies:
@@ -8210,13 +8210,13 @@ snapshots:
       prompts: 2.4.2
       semver: 7.7.1
 
-  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@antfu/utils': 0.7.10
       '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
@@ -8257,13 +8257,13 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/devtools@1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@nuxt/devtools@1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@antfu/utils': 0.7.10
       '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
@@ -8304,12 +8304,12 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/devtools@2.1.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@nuxt/devtools@2.1.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@nuxt/devtools-kit': 2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 2.1.1
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.7.2
       birpc: 2.2.0
       consola: 3.4.0
@@ -8345,20 +8345,20 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
+  '@nuxt/eslint-config@1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@clack/prompts': 0.10.0
       '@eslint/js': 9.21.0
-      '@nuxt/eslint-plugin': 1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
-      '@stylistic/eslint-plugin': 4.2.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
-      '@typescript-eslint/eslint-plugin': 8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2))(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
-      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@nuxt/eslint-plugin': 1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@stylistic/eslint-plugin': 4.2.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
       eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@2.4.2))
       eslint-flat-config-utils: 2.0.1
       eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@2.4.2))
-      eslint-plugin-import-x: 4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      eslint-plugin-import-x: 4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       eslint-plugin-jsdoc: 50.6.3(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-regexp: 2.7.0(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-unicorn: 57.0.0(eslint@9.21.0(jiti@2.4.2))
@@ -8373,10 +8373,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
+  '@nuxt/eslint-plugin@1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
     transitivePeerDependencies:
       - supports-color
@@ -8399,7 +8399,7 @@ snapshots:
       pkg-types: 1.3.1
       scule: 1.3.0
       semver: 7.7.1
-      std-env: 3.8.0
+      std-env: 3.8.1
       ufo: 1.5.4
       unctx: 2.4.1
       unimport: 4.1.2
@@ -8408,7 +8408,7 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.4)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))':
+  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.15.4(magicast@0.3.5))(nuxi@3.22.4)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       citty: 0.1.6
@@ -8419,8 +8419,8 @@ snapshots:
       nuxi: 3.22.4
       pathe: 1.1.2
       pkg-types: 1.3.1
-      tsconfck: 3.1.5(typescript@5.8.2)
-      unbuild: 2.0.0(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))
+      tsconfck: 3.1.5(typescript@5.7.3)
+      unbuild: 2.0.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -8432,7 +8432,7 @@ snapshots:
       consola: 3.4.0
       defu: 6.1.4
       pathe: 2.0.3
-      std-env: 3.8.0
+      std-env: 3.8.1
 
   '@nuxt/telemetry@2.6.5(magicast@0.3.5)':
     dependencies:
@@ -8448,12 +8448,12 @@ snapshots:
       parse-git-config: 3.0.0
       pathe: 2.0.3
       rc9: 2.1.2
-      std-env: 3.8.0
+      std-env: 3.8.1
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/test-utils@3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
+  '@nuxt/test-utils@3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
@@ -8473,14 +8473,14 @@ snapshots:
       perfect-debounce: 1.0.0
       radix3: 1.1.2
       scule: 1.3.0
-      std-env: 3.8.0
+      std-env: 3.8.1
       tinyexec: 0.3.2
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
       vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
-      vue: 3.5.13(typescript@5.8.2)
+      vitest-environment-nuxt: 1.0.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
       '@vue/test-utils': 2.4.6
       vitest: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
@@ -8500,12 +8500,12 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@3.29.5)
-      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
-      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       autoprefixer: 10.4.20(postcss@8.5.3)
       consola: 3.4.0
       cssnano: 7.0.6(postcss@8.5.3)
@@ -8525,14 +8525,14 @@ snapshots:
       pkg-types: 1.3.1
       postcss: 8.5.3
       rollup-plugin-visualizer: 5.14.0(rollup@3.29.5)
-      std-env: 3.8.0
+      std-env: 3.8.1
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
       vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vite-node: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))
-      vue: 3.5.13(typescript@5.8.2)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
+      vue: 3.5.13(typescript@5.7.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
       - '@biomejs/biome'
@@ -8559,12 +8559,12 @@ snapshots:
       - vue-tsc
       - yaml
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@4.34.9)
-      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
-      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       autoprefixer: 10.4.20(postcss@8.5.3)
       consola: 3.4.0
       cssnano: 7.0.6(postcss@8.5.3)
@@ -8584,14 +8584,14 @@ snapshots:
       pkg-types: 1.3.1
       postcss: 8.5.3
       rollup-plugin-visualizer: 5.14.0(rollup@4.34.9)
-      std-env: 3.8.0
+      std-env: 3.8.1
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
       vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vite-node: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))
-      vue: 3.5.13(typescript@5.8.2)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
+      vue: 3.5.13(typescript@5.7.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
       - '@biomejs/biome'
@@ -8938,9 +8938,9 @@ snapshots:
 
   '@stackblitz/sdk@1.11.0': {}
 
-  '@stylistic/eslint-plugin@4.2.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
+  '@stylistic/eslint-plugin@4.2.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
       eslint-visitor-keys: 4.2.0
       espree: 10.3.0
@@ -8996,32 +8996,32 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
-  '@typescript-eslint/eslint-plugin@8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2))(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
+  '@typescript-eslint/eslint-plugin@8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       '@typescript-eslint/scope-manager': 8.25.0
-      '@typescript-eslint/type-utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/type-utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       '@typescript-eslint/visitor-keys': 8.25.0
       eslint: 9.21.0(jiti@2.4.2)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 2.0.1(typescript@5.8.2)
-      typescript: 5.8.2
+      ts-api-utils: 2.0.1(typescript@5.7.3)
+      typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
+  '@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.25.0
       '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.8.2)
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
       '@typescript-eslint/visitor-keys': 8.25.0
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.21.0(jiti@2.4.2)
-      typescript: 5.8.2
+      typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
@@ -9030,20 +9030,20 @@ snapshots:
       '@typescript-eslint/types': 8.25.0
       '@typescript-eslint/visitor-keys': 8.25.0
 
-  '@typescript-eslint/type-utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
+  '@typescript-eslint/type-utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.21.0(jiti@2.4.2)
-      ts-api-utils: 2.0.1(typescript@5.8.2)
-      typescript: 5.8.2
+      ts-api-utils: 2.0.1(typescript@5.7.3)
+      typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@8.25.0': {}
 
-  '@typescript-eslint/typescript-estree@8.25.0(typescript@5.8.2)':
+  '@typescript-eslint/typescript-estree@8.25.0(typescript@5.7.3)':
     dependencies:
       '@typescript-eslint/types': 8.25.0
       '@typescript-eslint/visitor-keys': 8.25.0
@@ -9052,19 +9052,19 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.7.1
-      ts-api-utils: 2.0.1(typescript@5.8.2)
-      typescript: 5.8.2
+      ts-api-utils: 2.0.1(typescript@5.7.3)
+      typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)':
+  '@typescript-eslint/utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
       '@typescript-eslint/scope-manager': 8.25.0
       '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.8.2)
+      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
-      typescript: 5.8.2
+      typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
@@ -9093,13 +9093,13 @@ snapshots:
       '@unhead/schema': 1.11.20
       '@unhead/shared': 1.11.20
 
-  '@unhead/vue@1.11.20(vue@3.5.13(typescript@5.8.2))':
+  '@unhead/vue@1.11.20(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@unhead/schema': 1.11.20
       '@unhead/shared': 1.11.20
       hookable: 5.5.3
       unhead: 1.11.20
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
 
   '@vercel/nft@0.27.10(rollup@4.34.9)':
     dependencies:
@@ -9120,20 +9120,20 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
       vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
 
   '@vitest/expect@0.29.8':
     dependencies:
@@ -9210,7 +9210,7 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
-  '@vue-macros/common@1.16.1(vue@3.5.13(typescript@5.8.2))':
+  '@vue-macros/common@1.16.1(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/compiler-sfc': 3.5.13
       ast-kit: 1.4.0
@@ -9219,7 +9219,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
     optionalDependencies:
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
 
   '@vue/babel-helper-vue-transform-on@1.2.5': {}
 
@@ -9288,7 +9288,7 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.6.8
       '@vue/devtools-shared': 7.7.2
@@ -9296,11 +9296,11 @@ snapshots:
       nanoid: 5.1.2
       pathe: 1.1.2
       vite-hot-client: 0.2.4(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.6.8
       '@vue/devtools-shared': 7.7.2
@@ -9308,11 +9308,11 @@ snapshots:
       nanoid: 5.1.2
       pathe: 1.1.2
       vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.2
       '@vue/devtools-shared': 7.7.2
@@ -9320,7 +9320,7 @@ snapshots:
       nanoid: 5.1.2
       pathe: 2.0.3
       vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
 
@@ -9348,7 +9348,7 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/language-core@2.1.10(typescript@5.8.2)':
+  '@vue/language-core@2.1.10(typescript@5.7.3)':
     dependencies:
       '@volar/language-core': 2.4.11
       '@vue/compiler-dom': 3.5.13
@@ -9359,7 +9359,7 @@ snapshots:
       muggle-string: 0.4.1
       path-browserify: 1.0.1
     optionalDependencies:
-      typescript: 5.8.2
+      typescript: 5.7.3
 
   '@vue/reactivity@3.5.13':
     dependencies:
@@ -9377,11 +9377,11 @@ snapshots:
       '@vue/shared': 3.5.13
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.8.2))':
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.13
       '@vue/shared': 3.5.13
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
 
   '@vue/shared@3.5.13': {}
 
@@ -9857,7 +9857,7 @@ snapshots:
       pkg-types: 2.0.1
       scule: 1.3.0
       semver: 7.7.1
-      std-env: 3.8.0
+      std-env: 3.8.1
     transitivePeerDependencies:
       - magicast
 
@@ -10503,11 +10503,11 @@ snapshots:
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
 
-  eslint-plugin-import-x@4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2):
+  eslint-plugin-import-x@4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3):
     dependencies:
       '@types/doctrine': 0.0.9
       '@typescript-eslint/scope-manager': 8.25.0
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       debug: 4.4.0(supports-color@9.4.0)
       doctrine: 3.0.0
       enhanced-resolve: 5.18.1
@@ -11414,7 +11414,7 @@ snapshots:
       mlly: 1.7.4
       node-forge: 1.3.1
       pathe: 1.1.2
-      std-env: 3.8.0
+      std-env: 3.8.1
       ufo: 1.5.4
       untun: 0.1.3
       uqr: 0.1.2
@@ -11598,7 +11598,7 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mkdist@1.6.0(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2)):
+  mkdist@1.6.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3)):
     dependencies:
       autoprefixer: 10.4.20(postcss@8.5.3)
       citty: 0.1.6
@@ -11614,8 +11614,8 @@ snapshots:
       semver: 7.7.1
       tinyglobby: 0.2.12
     optionalDependencies:
-      typescript: 5.8.2
-      vue-tsc: 2.1.10(typescript@5.8.2)
+      typescript: 5.7.3
+      vue-tsc: 2.1.10(typescript@5.7.3)
 
   mlly@1.7.4:
     dependencies:
@@ -11650,7 +11650,7 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  nitropack@2.10.4(typescript@5.8.2):
+  nitropack@2.10.4(typescript@5.7.3):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
       '@netlify/functions': 2.8.2
@@ -11699,7 +11699,7 @@ snapshots:
       node-fetch-native: 1.6.6
       ofetch: 1.4.1
       ohash: 1.1.5
-      openapi-typescript: 7.6.1(typescript@5.8.2)
+      openapi-typescript: 7.6.1(typescript@5.7.3)
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -11711,7 +11711,7 @@ snapshots:
       semver: 7.7.1
       serve-placeholder: 2.0.2
       serve-static: 1.16.2
-      std-env: 3.8.0
+      std-env: 3.8.1
       ufo: 1.5.4
       uncrypto: 0.1.3
       unctx: 2.4.1
@@ -11803,19 +11803,19 @@ snapshots:
 
   nuxi@3.22.4: {}
 
-  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
     dependencies:
       '@nuxt/cli': 3.22.4(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
       '@unhead/dom': 1.11.20
       '@unhead/shared': 1.11.20
       '@unhead/ssr': 1.11.20
-      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))
+      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.7.3))
       '@vue/shared': 3.5.13
       acorn: 8.14.0
       c12: 2.0.4(magicast@0.3.5)
@@ -11841,7 +11841,7 @@ snapshots:
       magic-string: 0.30.17
       mlly: 1.7.4
       nanotar: 0.2.0
-      nitropack: 2.10.4(typescript@5.8.2)
+      nitropack: 2.10.4(typescript@5.7.3)
       nypm: 0.5.4
       ofetch: 1.4.1
       ohash: 1.1.5
@@ -11851,7 +11851,7 @@ snapshots:
       radix3: 1.1.2
       scule: 1.3.0
       semver: 7.7.1
-      std-env: 3.8.0
+      std-env: 3.8.1
       strip-literal: 3.0.0
       tinyglobby: 0.2.10
       ufo: 1.5.4
@@ -11862,13 +11862,13 @@ snapshots:
       unhead: 1.11.20
       unimport: 4.1.2
       unplugin: 2.2.0
-      unplugin-vue-router: 0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+      unplugin-vue-router: 0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
       untyped: 1.5.2
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
       vue-bundle-renderer: 2.1.1
       vue-devtools-stub: 0.1.0
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
       '@types/node': 22.13.8
@@ -11925,19 +11925,19 @@ snapshots:
       - xml2js
       - yaml
 
-  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
     dependencies:
       '@nuxt/cli': 3.22.4(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@nuxt/devtools': 1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
       '@unhead/dom': 1.11.20
       '@unhead/shared': 1.11.20
       '@unhead/ssr': 1.11.20
-      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))
+      '@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.7.3))
       '@vue/shared': 3.5.13
       acorn: 8.14.0
       c12: 2.0.4(magicast@0.3.5)
@@ -11963,7 +11963,7 @@ snapshots:
       magic-string: 0.30.17
       mlly: 1.7.4
       nanotar: 0.2.0
-      nitropack: 2.10.4(typescript@5.8.2)
+      nitropack: 2.10.4(typescript@5.7.3)
       nypm: 0.5.4
       ofetch: 1.4.1
       ohash: 1.1.5
@@ -11973,7 +11973,7 @@ snapshots:
       radix3: 1.1.2
       scule: 1.3.0
       semver: 7.7.1
-      std-env: 3.8.0
+      std-env: 3.8.1
       strip-literal: 3.0.0
       tinyglobby: 0.2.10
       ufo: 1.5.4
@@ -11984,13 +11984,13 @@ snapshots:
       unhead: 1.11.20
       unimport: 4.1.2
       unplugin: 2.2.0
-      unplugin-vue-router: 0.11.2(rollup@4.34.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+      unplugin-vue-router: 0.11.2(rollup@4.34.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
       untyped: 1.5.2
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
       vue-bundle-renderer: 2.1.1
       vue-devtools-stub: 0.1.0
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
       '@types/node': 22.13.8
@@ -12114,14 +12114,14 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  openapi-typescript@7.6.1(typescript@5.8.2):
+  openapi-typescript@7.6.1(typescript@5.7.3):
     dependencies:
       '@redocly/openapi-core': 1.31.3(supports-color@9.4.0)
       ansi-colors: 4.1.3
       change-case: 5.4.4
       parse-json: 8.1.0
       supports-color: 9.4.0
-      typescript: 5.8.2
+      typescript: 5.7.3
       yargs-parser: 21.1.1
 
   optionator@0.9.4:
@@ -12846,11 +12846,11 @@ snapshots:
     dependencies:
       glob: 10.4.5
 
-  rollup-plugin-dts@6.1.1(rollup@3.29.5)(typescript@5.8.2):
+  rollup-plugin-dts@6.1.1(rollup@3.29.5)(typescript@5.7.3):
     dependencies:
       magic-string: 0.30.17
       rollup: 3.29.5
-      typescript: 5.8.2
+      typescript: 5.7.3
     optionalDependencies:
       '@babel/code-frame': 7.26.2
 
@@ -13131,7 +13131,7 @@ snapshots:
 
   statuses@2.0.1: {}
 
-  std-env@3.8.0: {}
+  std-env@3.8.1: {}
 
   streamx@2.22.0:
     dependencies:
@@ -13411,19 +13411,19 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
-  ts-api-utils@2.0.1(typescript@5.8.2):
+  ts-api-utils@2.0.1(typescript@5.7.3):
     dependencies:
-      typescript: 5.8.2
+      typescript: 5.7.3
 
   ts-interface-checker@0.1.13: {}
 
-  tsconfck@3.1.5(typescript@5.8.2):
+  tsconfck@3.1.5(typescript@5.7.3):
     optionalDependencies:
-      typescript: 5.8.2
+      typescript: 5.7.3
 
   tslib@2.8.1: {}
 
-  tsup@8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0):
+  tsup@8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.0)
       cac: 6.7.14
@@ -13443,7 +13443,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       postcss: 8.5.3
-      typescript: 5.8.2
+      typescript: 5.7.3
     transitivePeerDependencies:
       - jiti
       - supports-color
@@ -13466,24 +13466,24 @@ snapshots:
 
   type-level-regexp@0.1.17: {}
 
-  typedoc@0.23.23(typescript@5.8.2):
+  typedoc@0.23.23(typescript@5.7.3):
     dependencies:
       lunr: 2.3.9
       marked: 4.3.0
       minimatch: 5.1.6
       shiki: 0.11.1
-      typescript: 5.8.2
+      typescript: 5.7.3
 
-  typedoc@0.27.9(typescript@5.8.2):
+  typedoc@0.27.9(typescript@5.7.3):
     dependencies:
       '@gerrit0/mini-shiki': 1.27.2
       lunr: 2.3.9
       markdown-it: 14.1.0
       minimatch: 9.0.5
-      typescript: 5.8.2
+      typescript: 5.7.3
       yaml: 2.7.0
 
-  typescript@5.8.2: {}
+  typescript@5.7.3: {}
 
   uc.micro@2.1.0: {}
 
@@ -13491,7 +13491,7 @@ snapshots:
 
   ultrahtml@1.5.3: {}
 
-  unbuild@2.0.0(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2)):
+  unbuild@2.0.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@3.29.5)
       '@rollup/plugin-commonjs': 25.0.8(rollup@3.29.5)
@@ -13508,17 +13508,17 @@ snapshots:
       hookable: 5.5.3
       jiti: 1.21.7
       magic-string: 0.30.17
-      mkdist: 1.6.0(typescript@5.8.2)(vue-tsc@2.1.10(typescript@5.8.2))
+      mkdist: 1.6.0(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))
       mlly: 1.7.4
       pathe: 1.1.2
       pkg-types: 1.3.1
       pretty-bytes: 6.1.1
       rollup: 3.29.5
-      rollup-plugin-dts: 6.1.1(rollup@3.29.5)(typescript@5.8.2)
+      rollup-plugin-dts: 6.1.1(rollup@3.29.5)(typescript@5.7.3)
       scule: 1.3.0
       untyped: 1.5.2
     optionalDependencies:
-      typescript: 5.8.2
+      typescript: 5.7.3
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -13629,7 +13629,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.8.2)):
+  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
@@ -13641,7 +13641,7 @@ snapshots:
       minimatch: 9.0.5
       mlly: 1.7.4
       unplugin: 1.16.1
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
       '@babel/parser': 7.26.9
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
@@ -13649,7 +13649,7 @@ snapshots:
       - rollup
       - supports-color
 
-  unplugin-vue-components@28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.8.2)):
+  unplugin-vue-components@28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.0(supports-color@9.4.0)
@@ -13659,18 +13659,18 @@ snapshots:
       tinyglobby: 0.2.12
       unplugin: 2.2.0
       unplugin-utils: 0.2.4
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
       '@babel/parser': 7.26.9
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-router@0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2)):
+  unplugin-vue-router@0.11.2(rollup@3.29.5)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@babel/types': 7.26.9
       '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
-      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.8.2))
+      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.7.3))
       ast-walker-scope: 0.6.2
       chokidar: 3.6.0
       fast-glob: 3.3.3
@@ -13683,16 +13683,16 @@ snapshots:
       unplugin: 2.1.2
       yaml: 2.7.0
     optionalDependencies:
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
     transitivePeerDependencies:
       - rollup
       - vue
 
-  unplugin-vue-router@0.11.2(rollup@4.34.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2)):
+  unplugin-vue-router@0.11.2(rollup@4.34.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@babel/types': 7.26.9
       '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
-      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.8.2))
+      '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.7.3))
       ast-walker-scope: 0.6.2
       chokidar: 3.6.0
       fast-glob: 3.3.3
@@ -13705,7 +13705,7 @@ snapshots:
       unplugin: 2.1.2
       yaml: 2.7.0
     optionalDependencies:
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
     transitivePeerDependencies:
       - rollup
       - vue
@@ -13790,9 +13790,9 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  valibot@0.42.1(typescript@5.8.2):
+  valibot@0.42.1(typescript@5.7.3):
     optionalDependencies:
-      typescript: 5.8.2
+      typescript: 5.7.3
 
   validate-npm-package-license@3.0.4:
     dependencies:
@@ -13856,7 +13856,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.8.2)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.8.2)):
+  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3)):
     dependencies:
       '@babel/code-frame': 7.26.2
       ansi-escapes: 4.3.2
@@ -13876,8 +13876,8 @@ snapshots:
     optionalDependencies:
       eslint: 9.21.0(jiti@2.4.2)
       optionator: 0.9.4
-      typescript: 5.8.2
-      vue-tsc: 2.1.10(typescript@5.8.2)
+      typescript: 5.7.3
+      vue-tsc: 2.1.10(typescript@5.7.3)
 
   vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
@@ -13999,9 +13999,9 @@ snapshots:
       terser: 5.39.0
       yaml: 2.7.0
 
-  vitest-environment-nuxt@1.0.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
+  vitest-environment-nuxt@1.0.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
     dependencies:
-      '@nuxt/test-utils': 3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.8.2)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      '@nuxt/test-utils': 3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -14046,7 +14046,7 @@ snapshots:
       pathe: 1.1.2
       picocolors: 1.1.1
       source-map: 0.6.1
-      std-env: 3.8.0
+      std-env: 3.8.1
       strip-literal: 1.3.0
       tinybench: 2.9.0
       tinypool: 0.4.0
@@ -14079,7 +14079,7 @@ snapshots:
       expect-type: 1.2.0
       magic-string: 0.30.17
       pathe: 2.0.3
-      std-env: 3.8.0
+      std-env: 3.8.1
       tinybench: 2.9.0
       tinyexec: 0.3.2
       tinypool: 1.0.2
@@ -14151,27 +14151,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)):
+  vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.7.3)
 
-  vue-tsc@2.1.10(typescript@5.8.2):
+  vue-tsc@2.1.10(typescript@5.7.3):
     dependencies:
       '@volar/typescript': 2.4.11
-      '@vue/language-core': 2.1.10(typescript@5.8.2)
+      '@vue/language-core': 2.1.10(typescript@5.7.3)
       semver: 7.7.1
-      typescript: 5.8.2
+      typescript: 5.7.3
 
-  vue@3.5.13(typescript@5.8.2):
+  vue@3.5.13(typescript@5.7.3):
     dependencies:
       '@vue/compiler-dom': 3.5.13
       '@vue/compiler-sfc': 3.5.13
       '@vue/runtime-dom': 3.5.13
-      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.8.2))
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.7.3))
       '@vue/shared': 3.5.13
     optionalDependencies:
-      typescript: 5.8.2
+      typescript: 5.7.3
 
   w3c-hr-time@1.0.2:
     dependencies:

From a40075764ed54c91212e95eea1b64f04a4bb73bb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 16:56:28 +0300
Subject: [PATCH 41/77] Implemented InputNumber

---
 apps/labs/assets/data/menu.json               |  4 +
 apps/labs/doc/inputnumber/ButtonsDoc.vue      | 73 +++++++++++++++++
 apps/labs/doc/inputnumber/CurrencyDoc.vue     | 67 +++++++++++++++
 apps/labs/doc/inputnumber/DisabledDoc.vue     | 31 +++++++
 apps/labs/doc/inputnumber/FilledDoc.vue       | 31 +++++++
 apps/labs/doc/inputnumber/ImportDoc.vue       | 16 ++++
 apps/labs/doc/inputnumber/InvalidDoc.vue      | 31 +++++++
 apps/labs/doc/inputnumber/LocaleDoc.vue       | 67 +++++++++++++++
 apps/labs/doc/inputnumber/NumeralsDoc.vue     | 67 +++++++++++++++
 apps/labs/doc/inputnumber/PrefixSuffixDoc.vue | 67 +++++++++++++++
 apps/labs/doc/inputnumber/SizesDoc.vue        | 39 +++++++++
 apps/labs/doc/inputnumber/VerticalDoc.vue     | 45 +++++++++++
 apps/labs/pages/inputnumber/index.vue         | 81 +++++++++++++++++++
 apps/labs/plex/inputnumber/index.vue          | 62 ++++++++++++++
 apps/labs/tailwind.config.js                  |  1 +
 apps/showcase/doc/inputnumber/ButtonsDoc.vue  |  6 +-
 .../primevue/src/inputnumber/InputNumber.vue  | 32 ++++++--
 17 files changed, 712 insertions(+), 8 deletions(-)
 create mode 100644 apps/labs/doc/inputnumber/ButtonsDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/CurrencyDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/DisabledDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/FilledDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/ImportDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/InvalidDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/LocaleDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/NumeralsDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/SizesDoc.vue
 create mode 100644 apps/labs/doc/inputnumber/VerticalDoc.vue
 create mode 100644 apps/labs/pages/inputnumber/index.vue
 create mode 100644 apps/labs/plex/inputnumber/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 49dffbe85..a8ef74d17 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -30,6 +30,10 @@
                     "name": "InputMask",
                     "to": "/inputmask"
                 },
+                {
+                    "name": "InputNumber",
+                    "to": "/inputnumber"
+                },
                 {
                     "name": "InputText",
                     "to": "/inputtext"
diff --git a/apps/labs/doc/inputnumber/ButtonsDoc.vue b/apps/labs/doc/inputnumber/ButtonsDoc.vue
new file mode 100644
index 000000000..2e2194ba3
--- /dev/null
+++ b/apps/labs/doc/inputnumber/ButtonsDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(20);
+const value2 = ref(25);
+const value3 = ref(10.5);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(20);
+const value2 = ref(25);
+const value3 = ref(10.5);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/CurrencyDoc.vue b/apps/labs/doc/inputnumber/CurrencyDoc.vue
new file mode 100644
index 000000000..2e51b6a1a
--- /dev/null
+++ b/apps/labs/doc/inputnumber/CurrencyDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="currency-us" class="font-bold block mb-2"> United States </label>
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-india" class="font-bold block mb-2"> India </label>
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(1500);
+const value2 = ref(2500);
+const value3 = ref(4250);
+const value4 = ref(5002);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="currency-us" class="font-bold block mb-2"> United States </label>
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-india" class="font-bold block mb-2"> India </label>
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(1500);
+const value2 = ref(2500);
+const value3 = ref(4250);
+const value4 = ref(5002);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/DisabledDoc.vue b/apps/labs/doc/inputnumber/DisabledDoc.vue
new file mode 100644
index 000000000..72b738e58
--- /dev/null
+++ b/apps/labs/doc/inputnumber/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" disabled prefix="%" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(50);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" disabled prefix="%" />
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/FilledDoc.vue b/apps/labs/doc/inputnumber/FilledDoc.vue
new file mode 100644
index 000000000..6d3bef177
--- /dev/null
+++ b/apps/labs/doc/inputnumber/FilledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/ImportDoc.vue b/apps/labs/doc/inputnumber/ImportDoc.vue
new file mode 100644
index 000000000..8a8773dce
--- /dev/null
+++ b/apps/labs/doc/inputnumber/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import InputNumber from '@/plex/inputnumber';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/inputnumber/InvalidDoc.vue b/apps/labs/doc/inputnumber/InvalidDoc.vue
new file mode 100644
index 000000000..7225599cf
--- /dev/null
+++ b/apps/labs/doc/inputnumber/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/LocaleDoc.vue b/apps/labs/doc/inputnumber/LocaleDoc.vue
new file mode 100644
index 000000000..ec82caa43
--- /dev/null
+++ b/apps/labs/doc/inputnumber/LocaleDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(151351);
+const value2 = ref(115744);
+const value3 = ref(635524);
+const value4 = ref(732762);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(151351);
+const value2 = ref(115744);
+const value3 = ref(635524);
+const value4 = ref(732762);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/NumeralsDoc.vue b/apps/labs/doc/inputnumber/NumeralsDoc.vue
new file mode 100644
index 000000000..8adf88af7
--- /dev/null
+++ b/apps/labs/doc/inputnumber/NumeralsDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(42723);
+const value2 = ref(58151);
+const value3 = ref(2351.35);
+const value4 = ref(50);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(42723);
+const value2 = ref(58151);
+const value3 = ref(2351.35);
+const value4 = ref(50);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue b/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
new file mode 100644
index 000000000..6f416962f
--- /dev/null
+++ b/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="mile" class="font-bold block mb-2"> Mile </label>
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="percent" class="font-bold block mb-2"> Percent </label>
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(20);
+const value2 = ref(50);
+const value3 = ref(10);
+const value4 = ref(20);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="mile" class="font-bold block mb-2"> Mile </label>
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="percent" class="font-bold block mb-2"> Percent </label>
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(20);
+const value2 = ref(50);
+const value3 = ref(10);
+const value4 = ref(20);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/SizesDoc.vue b/apps/labs/doc/inputnumber/SizesDoc.vue
new file mode 100644
index 000000000..eda20dd39
--- /dev/null
+++ b/apps/labs/doc/inputnumber/SizesDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputNumber provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/inputnumber/VerticalDoc.vue b/apps/labs/doc/inputnumber/VerticalDoc.vue
new file mode 100644
index 000000000..f531f50be
--- /dev/null
+++ b/apps/labs/doc/inputnumber/VerticalDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(50);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/inputnumber/index.vue b/apps/labs/pages/inputnumber/index.vue
new file mode 100644
index 000000000..9f0515cd0
--- /dev/null
+++ b/apps/labs/pages/inputnumber/index.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
+</template>
+
+<script>
+import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
+import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
+import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
+import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
+import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
+import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
+import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
+import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
+import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
+import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
+import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'numerals',
+                    label: 'Numerals',
+                    component: NumeralsDoc
+                },
+                {
+                    id: 'locale',
+                    label: 'Locale',
+                    component: LocaleDoc
+                },
+                {
+                    id: 'currency',
+                    label: 'Currency',
+                    component: CurrencyDoc
+                },
+                {
+                    id: 'prefixsuffix',
+                    label: 'Prefix & Suffix',
+                    component: PrefixSuffixDoc
+                },
+                {
+                    id: 'buttons',
+                    label: 'Buttons',
+                    component: ButtonsDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/inputnumber/index.vue b/apps/labs/plex/inputnumber/index.vue
new file mode 100644
index 000000000..7824f133b
--- /dev/null
+++ b/apps/labs/plex/inputnumber/index.vue
@@ -0,0 +1,62 @@
+<template>
+    <InputNumber unstyled :pt="theme" />
+</template>
+
+<script setup>
+import InputNumber from 'primevue/inputnumber';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `inline-flex relative 
+        p-vertical:flex-col p-fluid:w-full`,
+    pcInputText: {
+        root: `appearance-none rounded-md outline-none flex-auto
+        bg-surface-0 dark:bg-surface-950
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
+        text-surface-700 dark:text-surface-0
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        disabled:bg-surface-200 disabled:text-surface-500 
+        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
+        px-3 py-2 p-fluid:w-full
+        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
+        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
+        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+
+        p-horizontal:order-2 p-horizontal:rounded-none
+        p-vertical:order-2 p-vertical:rounded-none p-vertical:text-center
+        p-fluid:w-[1%] p-fluid:p-vertical:w-full`
+    },
+    buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`,
+    incrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
+        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
+        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
+        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
+        transition-colors duration-200
+        p-stacked:relative p-stacked:flex-auto p-stacked:border-none
+        p-stacked:p-0 p-stacked:rounded-tr-[5px]
+        p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
+        p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`,
+    incrementIcon: ``,
+    decrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
+        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
+        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
+        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
+        transition-colors duration-200
+        p-stacked:relative p-stacked:flex-auto p-stacked:border-none
+        p-stacked:p-0 p-stacked:rounded-br-[5px]
+        p-horizontal:order-1 p-horizontal:rounded-s-md p-horizontal:border-e-0
+        p-vertical:py-2 p-vertical:order-3 p-vertical:rounded-ee-md p-vertical:rounded-es-md p-vertical:w-full p-vertical:border-t-0`,
+    decrementIcon: ``
+});
+</script>
diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js
index 8b86ade7e..6e1f579c5 100644
--- a/apps/labs/tailwind.config.js
+++ b/apps/labs/tailwind.config.js
@@ -15,6 +15,7 @@ export default {
             addVariant('p-filled', '&[data-p~="filled"]');
             addVariant('p-horizontal', '&[data-p~="horizontal"]');
             addVariant('p-vertical', '&[data-p~="vertical"]');
+            addVariant('p-stacked', '&[data-p~="stacked"]');
             addVariant('p-checked', '&[data-p~="checked"]');
             addVariant('p-disabled', '&[data-p~="disabled"]');
             addVariant('p-enabled', '&:not([data-p~="disabled"])');
diff --git a/apps/showcase/doc/inputnumber/ButtonsDoc.vue b/apps/showcase/doc/inputnumber/ButtonsDoc.vue
index 9fc4ead2d..e14ad3cc7 100644
--- a/apps/showcase/doc/inputnumber/ButtonsDoc.vue
+++ b/apps/showcase/doc/inputnumber/ButtonsDoc.vue
@@ -5,16 +5,16 @@
     <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid disabled />
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid disabled />
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
         </div>
         <div class="flex-auto">
             <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid disabled>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
                 <template #incrementbuttonicon>
                     <span class="pi pi-plus" />
                 </template>
diff --git a/packages/primevue/src/inputnumber/InputNumber.vue b/packages/primevue/src/inputnumber/InputNumber.vue
index d864e0b1d..1807ab099 100755
--- a/packages/primevue/src/inputnumber/InputNumber.vue
+++ b/packages/primevue/src/inputnumber/InputNumber.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" v-bind="ptmi('root')">
+    <span :class="cx('root')" v-bind="ptmi('root')" :data-p="dataP">
         <InputText
             ref="input"
             :id="inputId"
@@ -29,17 +29,18 @@
             @blur="onInputBlur"
             :pt="ptm('pcInputText')"
             :unstyled="unstyled"
+            :data-p="dataP"
         />
-        <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
+        <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')" :data-p="dataP">
             <slot name="incrementbutton" :listeners="upButtonListeners">
-                <button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('incrementButton')">
+                <button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('incrementButton')" :data-p="dataP">
                     <slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
                         <component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
                     </slot>
                 </button>
             </slot>
             <slot name="decrementbutton" :listeners="downButtonListeners">
-                <button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('decrementButton')">
+                <button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('decrementButton')" :data-p="dataP">
                     <slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
                         <component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
                     </slot>
@@ -47,7 +48,17 @@
             </slot>
         </span>
         <slot name="incrementbutton" :listeners="upButtonListeners">
-            <button v-if="showButtons && buttonLayout !== 'stacked'" :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('incrementButton')">
+            <button
+                v-if="showButtons && buttonLayout !== 'stacked'"
+                :class="[cx('incrementButton'), incrementButtonClass]"
+                v-on="upButtonListeners"
+                :disabled="disabled"
+                :tabindex="-1"
+                aria-hidden="true"
+                type="button"
+                v-bind="ptm('incrementButton')"
+                :data-p="dataP"
+            >
                 <slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
                     <component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
                 </slot>
@@ -63,6 +74,7 @@
                 aria-hidden="true"
                 type="button"
                 v-bind="ptm('decrementButton')"
+                :data-p="dataP"
             >
                 <slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
                     <component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
@@ -74,6 +86,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { clearSelection, getSelection } from '@primeuix/utils/dom';
 import { isNotEmpty } from '@primeuix/utils/object';
 import AngleDownIcon from '@primevue/icons/angledown';
@@ -1002,6 +1015,15 @@ export default {
         },
         getFormatter() {
             return this.numberFormat;
+        },
+        dataP() {
+            return cn({
+                invalid: this.$invalid,
+                fluid: this.$fluid,
+                filled: this.$variant === 'filled',
+                [this.size]: this.size,
+                [this.buttonLayout]: this.showButtons && this.buttonLayout
+            });
         }
     },
     components: {

From ba03186465d872e25ca6d3f698ffabe7c30d2a28 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 16:58:17 +0300
Subject: [PATCH 42/77] Move inputnumber

---
 apps/volt/doc/inputnumber/ButtonsDoc.vue      | 73 +++++++++++++++++
 apps/volt/doc/inputnumber/CurrencyDoc.vue     | 67 +++++++++++++++
 apps/volt/doc/inputnumber/DisabledDoc.vue     | 31 +++++++
 apps/volt/doc/inputnumber/FilledDoc.vue       | 31 +++++++
 apps/volt/doc/inputnumber/ImportDoc.vue       | 16 ++++
 apps/volt/doc/inputnumber/InvalidDoc.vue      | 31 +++++++
 apps/volt/doc/inputnumber/LocaleDoc.vue       | 67 +++++++++++++++
 apps/volt/doc/inputnumber/NumeralsDoc.vue     | 67 +++++++++++++++
 apps/volt/doc/inputnumber/PrefixSuffixDoc.vue | 67 +++++++++++++++
 apps/volt/doc/inputnumber/SizesDoc.vue        | 39 +++++++++
 apps/volt/doc/inputnumber/VerticalDoc.vue     | 45 +++++++++++
 apps/volt/pages/inputnumber/index.vue         | 81 +++++++++++++++++++
 apps/volt/volt/inputnumber/index.vue          | 62 ++++++++++++++
 13 files changed, 677 insertions(+)
 create mode 100644 apps/volt/doc/inputnumber/ButtonsDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/CurrencyDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/DisabledDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/FilledDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/ImportDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/InvalidDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/LocaleDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/NumeralsDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/SizesDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/VerticalDoc.vue
 create mode 100644 apps/volt/pages/inputnumber/index.vue
 create mode 100644 apps/volt/volt/inputnumber/index.vue

diff --git a/apps/volt/doc/inputnumber/ButtonsDoc.vue b/apps/volt/doc/inputnumber/ButtonsDoc.vue
new file mode 100644
index 000000000..2e2194ba3
--- /dev/null
+++ b/apps/volt/doc/inputnumber/ButtonsDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(20);
+const value2 = ref(25);
+const value3 = ref(10.5);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(20);
+const value2 = ref(25);
+const value3 = ref(10.5);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/CurrencyDoc.vue b/apps/volt/doc/inputnumber/CurrencyDoc.vue
new file mode 100644
index 000000000..2e51b6a1a
--- /dev/null
+++ b/apps/volt/doc/inputnumber/CurrencyDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="currency-us" class="font-bold block mb-2"> United States </label>
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-india" class="font-bold block mb-2"> India </label>
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(1500);
+const value2 = ref(2500);
+const value3 = ref(4250);
+const value4 = ref(5002);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="currency-us" class="font-bold block mb-2"> United States </label>
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-india" class="font-bold block mb-2"> India </label>
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(1500);
+const value2 = ref(2500);
+const value3 = ref(4250);
+const value4 = ref(5002);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/DisabledDoc.vue b/apps/volt/doc/inputnumber/DisabledDoc.vue
new file mode 100644
index 000000000..72b738e58
--- /dev/null
+++ b/apps/volt/doc/inputnumber/DisabledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" disabled prefix="%" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(50);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" disabled prefix="%" />
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/FilledDoc.vue b/apps/volt/doc/inputnumber/FilledDoc.vue
new file mode 100644
index 000000000..6d3bef177
--- /dev/null
+++ b/apps/volt/doc/inputnumber/FilledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/ImportDoc.vue b/apps/volt/doc/inputnumber/ImportDoc.vue
new file mode 100644
index 000000000..8a8773dce
--- /dev/null
+++ b/apps/volt/doc/inputnumber/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import InputNumber from '@/plex/inputnumber';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/volt/doc/inputnumber/InvalidDoc.vue b/apps/volt/doc/inputnumber/InvalidDoc.vue
new file mode 100644
index 000000000..7225599cf
--- /dev/null
+++ b/apps/volt/doc/inputnumber/InvalidDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/LocaleDoc.vue b/apps/volt/doc/inputnumber/LocaleDoc.vue
new file mode 100644
index 000000000..ec82caa43
--- /dev/null
+++ b/apps/volt/doc/inputnumber/LocaleDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(151351);
+const value2 = ref(115744);
+const value3 = ref(635524);
+const value4 = ref(732762);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(151351);
+const value2 = ref(115744);
+const value3 = ref(635524);
+const value4 = ref(732762);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/NumeralsDoc.vue b/apps/volt/doc/inputnumber/NumeralsDoc.vue
new file mode 100644
index 000000000..8adf88af7
--- /dev/null
+++ b/apps/volt/doc/inputnumber/NumeralsDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(42723);
+const value2 = ref(58151);
+const value3 = ref(2351.35);
+const value4 = ref(50);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(42723);
+const value2 = ref(58151);
+const value3 = ref(2351.35);
+const value4 = ref(50);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue b/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
new file mode 100644
index 000000000..6f416962f
--- /dev/null
+++ b/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="mile" class="font-bold block mb-2"> Mile </label>
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="percent" class="font-bold block mb-2"> Percent </label>
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(20);
+const value2 = ref(50);
+const value3 = ref(10);
+const value4 = ref(20);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <label for="mile" class="font-bold block mb-2"> Mile </label>
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="percent" class="font-bold block mb-2"> Percent </label>
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+        </div>
+        <div class="flex-auto">
+            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(20);
+const value2 = ref(50);
+const value3 = ref(10);
+const value4 = ref(20);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/SizesDoc.vue b/apps/volt/doc/inputnumber/SizesDoc.vue
new file mode 100644
index 000000000..eda20dd39
--- /dev/null
+++ b/apps/volt/doc/inputnumber/SizesDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputNumber provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/inputnumber/VerticalDoc.vue b/apps/volt/doc/inputnumber/VerticalDoc.vue
new file mode 100644
index 000000000..f531f50be
--- /dev/null
+++ b/apps/volt/doc/inputnumber/VerticalDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(50);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
+    </div>
+</template>
+
+<script setup>
+import InputNumber from '@/plex/inputnumber';
+import { ref } from 'vue';
+
+const value = ref(50);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/pages/inputnumber/index.vue b/apps/volt/pages/inputnumber/index.vue
new file mode 100644
index 000000000..9f0515cd0
--- /dev/null
+++ b/apps/volt/pages/inputnumber/index.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
+</template>
+
+<script>
+import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
+import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
+import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
+import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
+import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
+import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
+import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
+import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
+import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
+import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
+import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'numerals',
+                    label: 'Numerals',
+                    component: NumeralsDoc
+                },
+                {
+                    id: 'locale',
+                    label: 'Locale',
+                    component: LocaleDoc
+                },
+                {
+                    id: 'currency',
+                    label: 'Currency',
+                    component: CurrencyDoc
+                },
+                {
+                    id: 'prefixsuffix',
+                    label: 'Prefix & Suffix',
+                    component: PrefixSuffixDoc
+                },
+                {
+                    id: 'buttons',
+                    label: 'Buttons',
+                    component: ButtonsDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/volt/volt/inputnumber/index.vue b/apps/volt/volt/inputnumber/index.vue
new file mode 100644
index 000000000..7824f133b
--- /dev/null
+++ b/apps/volt/volt/inputnumber/index.vue
@@ -0,0 +1,62 @@
+<template>
+    <InputNumber unstyled :pt="theme" />
+</template>
+
+<script setup>
+import InputNumber from 'primevue/inputnumber';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `inline-flex relative 
+        p-vertical:flex-col p-fluid:w-full`,
+    pcInputText: {
+        root: `appearance-none rounded-md outline-none flex-auto
+        bg-surface-0 dark:bg-surface-950
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
+        text-surface-700 dark:text-surface-0
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        disabled:bg-surface-200 disabled:text-surface-500 
+        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
+        px-3 py-2 p-fluid:w-full
+        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
+        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
+        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+
+        p-horizontal:order-2 p-horizontal:rounded-none
+        p-vertical:order-2 p-vertical:rounded-none p-vertical:text-center
+        p-fluid:w-[1%] p-fluid:p-vertical:w-full`
+    },
+    buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`,
+    incrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
+        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
+        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
+        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
+        transition-colors duration-200
+        p-stacked:relative p-stacked:flex-auto p-stacked:border-none
+        p-stacked:p-0 p-stacked:rounded-tr-[5px]
+        p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
+        p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`,
+    incrementIcon: ``,
+    decrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
+        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
+        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
+        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
+        transition-colors duration-200
+        p-stacked:relative p-stacked:flex-auto p-stacked:border-none
+        p-stacked:p-0 p-stacked:rounded-br-[5px]
+        p-horizontal:order-1 p-horizontal:rounded-s-md p-horizontal:border-e-0
+        p-vertical:py-2 p-vertical:order-3 p-vertical:rounded-ee-md p-vertical:rounded-es-md p-vertical:w-full p-vertical:border-t-0`,
+    decrementIcon: ``
+});
+</script>

From abec16422b456b755dc856a6f7a2b7271c58cad2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 17:06:06 +0300
Subject: [PATCH 43/77] Move inputnumber to volt

---
 apps/labs/doc/inputnumber/ButtonsDoc.vue      | 73 -----------------
 apps/labs/doc/inputnumber/CurrencyDoc.vue     | 67 ---------------
 apps/labs/doc/inputnumber/DisabledDoc.vue     | 31 -------
 apps/labs/doc/inputnumber/FilledDoc.vue       | 31 -------
 apps/labs/doc/inputnumber/ImportDoc.vue       | 16 ----
 apps/labs/doc/inputnumber/InvalidDoc.vue      | 31 -------
 apps/labs/doc/inputnumber/LocaleDoc.vue       | 67 ---------------
 apps/labs/doc/inputnumber/NumeralsDoc.vue     | 67 ---------------
 apps/labs/doc/inputnumber/PrefixSuffixDoc.vue | 67 ---------------
 apps/labs/doc/inputnumber/SizesDoc.vue        | 39 ---------
 apps/labs/doc/inputnumber/VerticalDoc.vue     | 45 -----------
 apps/labs/pages/inputnumber/index.vue         | 81 -------------------
 apps/labs/plex/inputnumber/index.vue          | 62 --------------
 apps/volt/doc/inputnumber/ButtonsDoc.vue      |  4 +-
 apps/volt/doc/inputnumber/CurrencyDoc.vue     |  4 +-
 apps/volt/doc/inputnumber/DisabledDoc.vue     |  4 +-
 apps/volt/doc/inputnumber/FilledDoc.vue       |  4 +-
 apps/volt/doc/inputnumber/ImportDoc.vue       |  2 +-
 apps/volt/doc/inputnumber/InvalidDoc.vue      |  4 +-
 apps/volt/doc/inputnumber/LocaleDoc.vue       |  4 +-
 apps/volt/doc/inputnumber/NumeralsDoc.vue     |  4 +-
 apps/volt/doc/inputnumber/PrefixSuffixDoc.vue |  4 +-
 apps/volt/doc/inputnumber/SizesDoc.vue        |  4 +-
 apps/volt/doc/inputnumber/VerticalDoc.vue     |  4 +-
 apps/volt/volt/inputnumber/index.vue          |  4 +-
 pnpm-lock.yaml                                | 38 ++++-----
 26 files changed, 42 insertions(+), 719 deletions(-)
 delete mode 100644 apps/labs/doc/inputnumber/ButtonsDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/CurrencyDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/DisabledDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/FilledDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/ImportDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/InvalidDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/LocaleDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/NumeralsDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/SizesDoc.vue
 delete mode 100644 apps/labs/doc/inputnumber/VerticalDoc.vue
 delete mode 100644 apps/labs/pages/inputnumber/index.vue
 delete mode 100644 apps/labs/plex/inputnumber/index.vue

diff --git a/apps/labs/doc/inputnumber/ButtonsDoc.vue b/apps/labs/doc/inputnumber/ButtonsDoc.vue
deleted file mode 100644
index 2e2194ba3..000000000
--- a/apps/labs/doc/inputnumber/ButtonsDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
-                <template #incrementbuttonicon>
-                    <span class="pi pi-plus" />
-                </template>
-                <template #decrementbuttonicon>
-                    <span class="pi pi-minus" />
-                </template>
-            </InputNumber>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(20);
-const value2 = ref(25);
-const value3 = ref(10.5);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
-                <template #incrementbuttonicon>
-                    <span class="pi pi-plus" />
-                </template>
-                <template #decrementbuttonicon>
-                    <span class="pi pi-minus" />
-                </template>
-            </InputNumber>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(20);
-const value2 = ref(25);
-const value3 = ref(10.5);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/CurrencyDoc.vue b/apps/labs/doc/inputnumber/CurrencyDoc.vue
deleted file mode 100644
index 2e51b6a1a..000000000
--- a/apps/labs/doc/inputnumber/CurrencyDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(1500);
-const value2 = ref(2500);
-const value3 = ref(4250);
-const value4 = ref(5002);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(1500);
-const value2 = ref(2500);
-const value3 = ref(4250);
-const value4 = ref(5002);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/DisabledDoc.vue b/apps/labs/doc/inputnumber/DisabledDoc.vue
deleted file mode 100644
index 72b738e58..000000000
--- a/apps/labs/doc/inputnumber/DisabledDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" disabled prefix="%" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(50);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" disabled prefix="%" />
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/FilledDoc.vue b/apps/labs/doc/inputnumber/FilledDoc.vue
deleted file mode 100644
index 6d3bef177..000000000
--- a/apps/labs/doc/inputnumber/FilledDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/ImportDoc.vue b/apps/labs/doc/inputnumber/ImportDoc.vue
deleted file mode 100644
index 8a8773dce..000000000
--- a/apps/labs/doc/inputnumber/ImportDoc.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" lang="script" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: `
-import InputNumber from '@/plex/inputnumber';
-`
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/InvalidDoc.vue b/apps/labs/doc/inputnumber/InvalidDoc.vue
deleted file mode 100644
index 7225599cf..000000000
--- a/apps/labs/doc/inputnumber/InvalidDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/LocaleDoc.vue b/apps/labs/doc/inputnumber/LocaleDoc.vue
deleted file mode 100644
index ec82caa43..000000000
--- a/apps/labs/doc/inputnumber/LocaleDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(151351);
-const value2 = ref(115744);
-const value3 = ref(635524);
-const value4 = ref(732762);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(151351);
-const value2 = ref(115744);
-const value3 = ref(635524);
-const value4 = ref(732762);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/NumeralsDoc.vue b/apps/labs/doc/inputnumber/NumeralsDoc.vue
deleted file mode 100644
index 8adf88af7..000000000
--- a/apps/labs/doc/inputnumber/NumeralsDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(42723);
-const value2 = ref(58151);
-const value3 = ref(2351.35);
-const value4 = ref(50);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(42723);
-const value2 = ref(58151);
-const value3 = ref(2351.35);
-const value4 = ref(50);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue b/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
deleted file mode 100644
index 6f416962f..000000000
--- a/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(20);
-const value2 = ref(50);
-const value3 = ref(10);
-const value4 = ref(20);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(20);
-const value2 = ref(50);
-const value3 = ref(10);
-const value4 = ref(20);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/SizesDoc.vue b/apps/labs/doc/inputnumber/SizesDoc.vue
deleted file mode 100644
index eda20dd39..000000000
--- a/apps/labs/doc/inputnumber/SizesDoc.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputNumber provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/VerticalDoc.vue b/apps/labs/doc/inputnumber/VerticalDoc.vue
deleted file mode 100644
index f531f50be..000000000
--- a/apps/labs/doc/inputnumber/VerticalDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
-            <template #incrementbuttonicon>
-                <span class="pi pi-plus" />
-            </template>
-            <template #decrementbuttonicon>
-                <span class="pi pi-minus" />
-            </template>
-        </InputNumber>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(50);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
-            <template #incrementbuttonicon>
-                <span class="pi pi-plus" />
-            </template>
-            <template #decrementbuttonicon>
-                <span class="pi pi-minus" />
-            </template>
-        </InputNumber>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/pages/inputnumber/index.vue b/apps/labs/pages/inputnumber/index.vue
deleted file mode 100644
index 9f0515cd0..000000000
--- a/apps/labs/pages/inputnumber/index.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
-</template>
-
-<script>
-import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
-import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
-import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
-import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
-import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
-import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
-import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
-import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
-import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
-import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
-import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'numerals',
-                    label: 'Numerals',
-                    component: NumeralsDoc
-                },
-                {
-                    id: 'locale',
-                    label: 'Locale',
-                    component: LocaleDoc
-                },
-                {
-                    id: 'currency',
-                    label: 'Currency',
-                    component: CurrencyDoc
-                },
-                {
-                    id: 'prefixsuffix',
-                    label: 'Prefix & Suffix',
-                    component: PrefixSuffixDoc
-                },
-                {
-                    id: 'buttons',
-                    label: 'Buttons',
-                    component: ButtonsDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/labs/plex/inputnumber/index.vue b/apps/labs/plex/inputnumber/index.vue
deleted file mode 100644
index 7824f133b..000000000
--- a/apps/labs/plex/inputnumber/index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <InputNumber unstyled :pt="theme" />
-</template>
-
-<script setup>
-import InputNumber from 'primevue/inputnumber';
-import { ref } from 'vue';
-
-const theme = ref({
-    root: `inline-flex relative 
-        p-vertical:flex-col p-fluid:w-full`,
-    pcInputText: {
-        root: `appearance-none rounded-md outline-none flex-auto
-        bg-surface-0 dark:bg-surface-950
-        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
-        text-surface-700 dark:text-surface-0
-        placeholder:text-surface-500 dark:placeholder:text-surface-400
-        border border-surface-300 dark:border-surface-700 
-        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
-        enabled:focus:border-primary
-        disabled:bg-surface-200 disabled:text-surface-500 
-        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
-        p-invalid:border-red-400 dark:p-invalid:border-red-300
-        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
-        px-3 py-2 p-fluid:w-full
-        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
-        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
-        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-
-        p-horizontal:order-2 p-horizontal:rounded-none
-        p-vertical:order-2 p-vertical:rounded-none p-vertical:text-center
-        p-fluid:w-[1%] p-fluid:p-vertical:w-full`
-    },
-    buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`,
-    incrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
-        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
-        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
-        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
-        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
-        p-stacked:relative p-stacked:flex-auto p-stacked:border-none
-        p-stacked:p-0 p-stacked:rounded-tr-[5px]
-        p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
-        p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`,
-    incrementIcon: ``,
-    decrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
-        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
-        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
-        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
-        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
-        p-stacked:relative p-stacked:flex-auto p-stacked:border-none
-        p-stacked:p-0 p-stacked:rounded-br-[5px]
-        p-horizontal:order-1 p-horizontal:rounded-s-md p-horizontal:border-e-0
-        p-vertical:py-2 p-vertical:order-3 p-vertical:rounded-ee-md p-vertical:rounded-es-md p-vertical:w-full p-vertical:border-t-0`,
-    decrementIcon: ``
-});
-</script>
diff --git a/apps/volt/doc/inputnumber/ButtonsDoc.vue b/apps/volt/doc/inputnumber/ButtonsDoc.vue
index 2e2194ba3..55f7acfbc 100644
--- a/apps/volt/doc/inputnumber/ButtonsDoc.vue
+++ b/apps/volt/doc/inputnumber/ButtonsDoc.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(20);
@@ -62,7 +62,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(20);
diff --git a/apps/volt/doc/inputnumber/CurrencyDoc.vue b/apps/volt/doc/inputnumber/CurrencyDoc.vue
index 2e51b6a1a..80f9f88d8 100644
--- a/apps/volt/doc/inputnumber/CurrencyDoc.vue
+++ b/apps/volt/doc/inputnumber/CurrencyDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(1500);
@@ -55,7 +55,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(1500);
diff --git a/apps/volt/doc/inputnumber/DisabledDoc.vue b/apps/volt/doc/inputnumber/DisabledDoc.vue
index 72b738e58..05456f253 100644
--- a/apps/volt/doc/inputnumber/DisabledDoc.vue
+++ b/apps/volt/doc/inputnumber/DisabledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/volt/doc/inputnumber/FilledDoc.vue b/apps/volt/doc/inputnumber/FilledDoc.vue
index 6d3bef177..0d94f0875 100644
--- a/apps/volt/doc/inputnumber/FilledDoc.vue
+++ b/apps/volt/doc/inputnumber/FilledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/volt/doc/inputnumber/ImportDoc.vue b/apps/volt/doc/inputnumber/ImportDoc.vue
index 8a8773dce..bda912887 100644
--- a/apps/volt/doc/inputnumber/ImportDoc.vue
+++ b/apps/volt/doc/inputnumber/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 `
         };
     }
diff --git a/apps/volt/doc/inputnumber/InvalidDoc.vue b/apps/volt/doc/inputnumber/InvalidDoc.vue
index 7225599cf..b50e1cf48 100644
--- a/apps/volt/doc/inputnumber/InvalidDoc.vue
+++ b/apps/volt/doc/inputnumber/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/volt/doc/inputnumber/LocaleDoc.vue b/apps/volt/doc/inputnumber/LocaleDoc.vue
index ec82caa43..685a8e188 100644
--- a/apps/volt/doc/inputnumber/LocaleDoc.vue
+++ b/apps/volt/doc/inputnumber/LocaleDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(151351);
@@ -55,7 +55,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(151351);
diff --git a/apps/volt/doc/inputnumber/NumeralsDoc.vue b/apps/volt/doc/inputnumber/NumeralsDoc.vue
index 8adf88af7..1facb7d8c 100644
--- a/apps/volt/doc/inputnumber/NumeralsDoc.vue
+++ b/apps/volt/doc/inputnumber/NumeralsDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(42723);
@@ -55,7 +55,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(42723);
diff --git a/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue b/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
index 6f416962f..4b8f7042c 100644
--- a/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
+++ b/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(20);
@@ -55,7 +55,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(20);
diff --git a/apps/volt/doc/inputnumber/SizesDoc.vue b/apps/volt/doc/inputnumber/SizesDoc.vue
index eda20dd39..0b2026b3f 100644
--- a/apps/volt/doc/inputnumber/SizesDoc.vue
+++ b/apps/volt/doc/inputnumber/SizesDoc.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -28,7 +28,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/volt/doc/inputnumber/VerticalDoc.vue b/apps/volt/doc/inputnumber/VerticalDoc.vue
index f531f50be..9b0195676 100644
--- a/apps/volt/doc/inputnumber/VerticalDoc.vue
+++ b/apps/volt/doc/inputnumber/VerticalDoc.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -36,7 +36,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/volt/volt/inputnumber/index.vue b/apps/volt/volt/inputnumber/index.vue
index 7824f133b..de4e5bff0 100644
--- a/apps/volt/volt/inputnumber/index.vue
+++ b/apps/volt/volt/inputnumber/index.vue
@@ -39,7 +39,7 @@ const theme = ref({
         dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
         dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
         dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
+        transition-colors duration-200 disabled:pointer-events-none
         p-stacked:relative p-stacked:flex-auto p-stacked:border-none
         p-stacked:p-0 p-stacked:rounded-tr-[5px]
         p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
@@ -52,7 +52,7 @@ const theme = ref({
         dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
         dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
         dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
+        transition-colors duration-200 disabled:pointer-events-none
         p-stacked:relative p-stacked:flex-auto p-stacked:border-none
         p-stacked:p-0 p-stacked:rounded-br-[5px]
         p-horizontal:order-1 p-horizontal:rounded-s-md p-horizontal:border-e-0
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 034c8361e..d72faa348 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3058,8 +3058,8 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
-  cronstrue@2.55.0:
-    resolution: {integrity: sha512-ZsBZNtQWb0Rk6CNGJlzpPBYqNE7t93Aez5ZCExLihGwmIpE5qThSTDQzDV8Z1Nw6ksmLkwI98nPKyciZ5sH7dw==}
+  cronstrue@2.56.0:
+    resolution: {integrity: sha512-/YC3b4D/E/S8ToQ7f676A2fqoC3vVpXKjJ4SMsP0jYsvRYJdZ6h9+Fq/Y7FoFDEUFCqLTca+G2qTV227lyyFZg==}
     hasBin: true
 
   cross-spawn@7.0.6:
@@ -4334,8 +4334,8 @@ packages:
     resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
     engines: {node: '>=14'}
 
-  local-pkg@1.1.0:
-    resolution: {integrity: sha512-xbZBuX6gYIWrlLmZG43aAVer4ocntYO09vPy9lxd6Ns8DnR4U7N+IIeDkubinqFOHHzoMlPxTxwo0jhE7oYjAw==}
+  local-pkg@1.1.1:
+    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
     engines: {node: '>=14'}
 
   locate-path@6.0.0:
@@ -8220,7 +8220,7 @@ snapshots:
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
-      cronstrue: 2.55.0
+      cronstrue: 2.56.0
       destr: 2.0.3
       error-stack-parser-es: 0.1.5
       execa: 7.2.0
@@ -8267,7 +8267,7 @@ snapshots:
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
-      cronstrue: 2.55.0
+      cronstrue: 2.56.0
       destr: 2.0.3
       error-stack-parser-es: 0.1.5
       execa: 7.2.0
@@ -8322,7 +8322,7 @@ snapshots:
       image-meta: 0.2.1
       is-installed-globally: 1.0.0
       launch-editor: 2.10.0
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magicast: 0.3.5
       nypm: 0.6.0
       ohash: 2.0.9
@@ -8365,7 +8365,7 @@ snapshots:
       eslint-plugin-vue: 9.32.0(eslint@9.21.0(jiti@2.4.2))
       eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))
       globals: 15.15.0
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       pathe: 2.0.3
       vue-eslint-parser: 9.4.3(eslint@9.21.0(jiti@2.4.2))
     transitivePeerDependencies:
@@ -8465,7 +8465,7 @@ snapshots:
       fake-indexeddb: 6.0.0
       get-port-please: 3.1.2
       h3: 1.15.1
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       node-fetch-native: 1.6.6
       ofetch: 1.4.1
@@ -9214,7 +9214,7 @@ snapshots:
     dependencies:
       '@vue/compiler-sfc': 3.5.13
       ast-kit: 1.4.0
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string-ast: 0.7.0
       pathe: 2.0.3
       picomatch: 4.0.2
@@ -10004,7 +10004,7 @@ snapshots:
 
   croner@9.0.0: {}
 
-  cronstrue@2.55.0: {}
+  cronstrue@2.56.0: {}
 
   cross-spawn@7.0.6:
     dependencies:
@@ -11438,10 +11438,10 @@ snapshots:
       mlly: 1.7.4
       pkg-types: 1.3.1
 
-  local-pkg@1.1.0:
+  local-pkg@1.1.1:
     dependencies:
       mlly: 1.7.4
-      pkg-types: 1.3.1
+      pkg-types: 2.0.1
       quansync: 0.2.8
 
   locate-path@6.0.0:
@@ -13572,7 +13572,7 @@ snapshots:
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -13591,7 +13591,7 @@ snapshots:
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -13608,7 +13608,7 @@ snapshots:
       acorn: 8.14.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -13653,7 +13653,7 @@ snapshots:
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.0(supports-color@9.4.0)
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       tinyglobby: 0.2.12
@@ -13675,7 +13675,7 @@ snapshots:
       chokidar: 3.6.0
       fast-glob: 3.3.3
       json5: 2.2.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -13697,7 +13697,7 @@ snapshots:
       chokidar: 3.6.0
       fast-glob: 3.3.3
       json5: 2.2.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3

From 095c2da7a76c7c7adb774185e21ab4f3abd46c99 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 17:07:50 +0300
Subject: [PATCH 44/77] Remove line

---
 apps/volt/volt/inputnumber/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/volt/volt/inputnumber/index.vue b/apps/volt/volt/inputnumber/index.vue
index de4e5bff0..defa2df64 100644
--- a/apps/volt/volt/inputnumber/index.vue
+++ b/apps/volt/volt/inputnumber/index.vue
@@ -26,7 +26,6 @@ const theme = ref({
         p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
         p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
         transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-
         p-horizontal:order-2 p-horizontal:rounded-none
         p-vertical:order-2 p-vertical:rounded-none p-vertical:text-center
         p-fluid:w-[1%] p-fluid:p-vertical:w-full`

From e50b415985e72ec5c49e5b867ca8a302003f3139 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 17:22:23 +0300
Subject: [PATCH 45/77] Add template

---
 apps/volt/volt/inputnumber/index.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/volt/volt/inputnumber/index.vue b/apps/volt/volt/inputnumber/index.vue
index defa2df64..daa18f522 100644
--- a/apps/volt/volt/inputnumber/index.vue
+++ b/apps/volt/volt/inputnumber/index.vue
@@ -1,5 +1,9 @@
 <template>
-    <InputNumber unstyled :pt="theme" />
+    <InputNumber unstyled :pt="theme">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </InputNumber>
 </template>
 
 <script setup>

From c001020ae9404dcf87f85a22940ff5985e1a2b1f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 17:38:58 +0300
Subject: [PATCH 46/77] Fixed paths to origin

---
 apps/volt/components/doc/DocComponent.vue | 32 +++++++++++++----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/volt/components/doc/DocComponent.vue b/apps/volt/components/doc/DocComponent.vue
index c046927ec..e45550917 100644
--- a/apps/volt/components/doc/DocComponent.vue
+++ b/apps/volt/components/doc/DocComponent.vue
@@ -21,14 +21,14 @@
                         </p>
                         <div class="pt-3 flex gap-2">
                             <a
-                                :href="`https://primevue.org/${apiLink}`"
+                                :href="`https://primevue.org${originPath}/#api`"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
                                 ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
                             ></a>
                             <a
-                                :href="`https://primevue.org/${ptLink}`"
+                                :href="`https://primevue.org${originPath}/#pt`"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
@@ -44,16 +44,20 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: ['title', 'header', 'description', 'componentDocs', 'className', 'presetDoc', 'apiLink', 'ptLink'],
-    data() {
-        return {
-            tab: 0
-        };
-    },
-    mounted() {
-        this.tab = this.$route.hash.includes('presets') ? 1 : 0;
-    }
-};
+<script setup>
+import { computed, defineProps, ref } from 'vue';
+
+defineProps({
+    title: String,
+    header: String,
+    description: String,
+    componentDocs: Object,
+    className: String,
+    presetDoc: Object
+});
+
+const route = useRoute();
+const tab = ref(0);
+
+const originPath = computed(() => route.path);
 </script>

From 69ebbb02cf8a36bfbf38d915c5e2d8ce169ec403 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 17:59:38 +0300
Subject: [PATCH 47/77] Implemented Chip

---
 apps/volt/assets/data/menu.json     |  4 +++
 apps/volt/doc/chip/BasicDoc.vue     | 28 ++++++++++++++++++
 apps/volt/doc/chip/IconDoc.vue      | 28 ++++++++++++++++++
 apps/volt/doc/chip/ImageDoc.vue     | 28 ++++++++++++++++++
 apps/volt/doc/chip/ImportDoc.vue    | 16 ++++++++++
 apps/volt/doc/chip/TemplateDoc.vue  | 28 ++++++++++++++++++
 apps/volt/pages/chip/index.vue      | 45 +++++++++++++++++++++++++++++
 apps/volt/tailwind.config.js        |  1 +
 apps/volt/volt/chip/index.vue       | 33 +++++++++++++++++++++
 packages/primevue/src/chip/Chip.vue | 10 ++++++-
 10 files changed, 220 insertions(+), 1 deletion(-)
 create mode 100644 apps/volt/doc/chip/BasicDoc.vue
 create mode 100644 apps/volt/doc/chip/IconDoc.vue
 create mode 100644 apps/volt/doc/chip/ImageDoc.vue
 create mode 100644 apps/volt/doc/chip/ImportDoc.vue
 create mode 100644 apps/volt/doc/chip/TemplateDoc.vue
 create mode 100644 apps/volt/pages/chip/index.vue
 create mode 100644 apps/volt/volt/chip/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index a8ef74d17..1bcfbe581 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -26,6 +26,10 @@
                     "name": "Checkbox",
                     "to": "/checkbox"
                 },
+                {
+                    "name": "Chip",
+                    "to": "/chip"
+                },
                 {
                     "name": "InputMask",
                     "to": "/inputmask"
diff --git a/apps/volt/doc/chip/BasicDoc.vue b/apps/volt/doc/chip/BasicDoc.vue
new file mode 100644
index 000000000..1ea935ca7
--- /dev/null
+++ b/apps/volt/doc/chip/BasicDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A basic chip with a text is created with the <i>label</i> property. In addition when <i>removable</i> is added, a delete icon is displayed to remove a chip.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Action" />
+        <Chip label="Comedy" />
+        <Chip label="Mystery" />
+        <Chip label="Thriller" removable />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Chip from '@/volt/chip';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Action" />
+        <Chip label="Comedy" />
+        <Chip label="Mystery" />
+        <Chip label="Thriller" removable />
+    </div>
+</template>
+`);
+</script>
diff --git a/apps/volt/doc/chip/IconDoc.vue b/apps/volt/doc/chip/IconDoc.vue
new file mode 100644
index 000000000..e1de2c3c2
--- /dev/null
+++ b/apps/volt/doc/chip/IconDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A font icon next to the label can be displayed with the <i>icon</i> property.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Apple" icon="pi pi-apple" />
+        <Chip label="Facebook" icon="pi pi-facebook" />
+        <Chip label="Google" icon="pi pi-google" />
+        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Chip from '@/volt/chip';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Apple" icon="pi pi-apple" />
+        <Chip label="Facebook" icon="pi pi-facebook" />
+        <Chip label="Google" icon="pi pi-google" />
+        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+    </div>
+</template>
+`);
+</script>
diff --git a/apps/volt/doc/chip/ImageDoc.vue b/apps/volt/doc/chip/ImageDoc.vue
new file mode 100644
index 000000000..cf8e25c80
--- /dev/null
+++ b/apps/volt/doc/chip/ImageDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>image</i> property is used to display an image like an avatar.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+        <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Chip from '@/volt/chip';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+        <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
+    </div>
+</template>
+`);
+</script>
diff --git a/apps/volt/doc/chip/ImportDoc.vue b/apps/volt/doc/chip/ImportDoc.vue
new file mode 100644
index 000000000..ef873110b
--- /dev/null
+++ b/apps/volt/doc/chip/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import Chip from '@/volt/chip';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/volt/doc/chip/TemplateDoc.vue b/apps/volt/doc/chip/TemplateDoc.vue
new file mode 100644
index 000000000..faf5feaeb
--- /dev/null
+++ b/apps/volt/doc/chip/TemplateDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The default slot allows displaying custom content inside a chip.</p>
+    </DocSectionText>
+    <div class="card">
+        <Chip class="py-0 pl-0 pr-4">
+            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
+            <span class="font-medium">PRIME</span>
+        </Chip>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Chip from '@/volt/chip';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Chip class="py-0 pl-0 pr-4">
+            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
+            <span class="font-medium">PRIME</span>
+        </Chip>
+    </div>
+</template>
+`);
+</script>
diff --git a/apps/volt/pages/chip/index.vue b/apps/volt/pages/chip/index.vue
new file mode 100644
index 000000000..df45f0017
--- /dev/null
+++ b/apps/volt/pages/chip/index.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/chip/BasicDoc.vue';
+import IconDoc from '@/doc/chip/IconDoc.vue';
+import ImageDoc from '@/doc/chip/ImageDoc.vue';
+import ImportDoc from '@/doc/chip/ImportDoc.vue';
+import TemplateDoc from '@/doc/chip/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                },
+                {
+                    id: 'templatedoc',
+                    label: 'Template',
+                    component: TemplateDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/volt/tailwind.config.js b/apps/volt/tailwind.config.js
index b8dd0dfa2..7211fe889 100644
--- a/apps/volt/tailwind.config.js
+++ b/apps/volt/tailwind.config.js
@@ -27,6 +27,7 @@ export default {
             addVariant('p-active', '&[data-p~="active"]');
             addVariant('p-focus-visible', '&[data-p~="focus-visible"]');
             addVariant('p-readonly', '&[data-p~="readonly"]');
+            addVariant('p-removable', '&[data-p~="removable"]');
         })
     ],
     theme: {
diff --git a/apps/volt/volt/chip/index.vue b/apps/volt/volt/chip/index.vue
new file mode 100644
index 000000000..591ed99ff
--- /dev/null
+++ b/apps/volt/volt/chip/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <Chip
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Chip>
+</template>
+
+<script setup>
+import Chip from 'primevue/chip';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex items-center rounded-2xl gap-2 px-3 py-2
+        bg-surface-100 dark:bg-surface-800
+        text-surface-800 dark:text-surface-0
+        has-[img]:pt-1 has-[img]:pb-1
+        p-removable:pe-2`,
+    image: `rounded-full w-8 h-8 -ms-2`,
+    icon: `text-surface-800 dark:bg-surface-0 text-base w-4 h-4`,
+    label: ``,
+    removeIcon: `cursor-pointer text-base w-4 h-4 rounded-full
+        text-surface-800 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary`
+});
+</script>
diff --git a/packages/primevue/src/chip/Chip.vue b/packages/primevue/src/chip/Chip.vue
index 1856a6a83..e06897e78 100644
--- a/packages/primevue/src/chip/Chip.vue
+++ b/packages/primevue/src/chip/Chip.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptmi('root')">
+    <div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptmi('root')" :data-p="dataP">
         <slot>
             <img v-if="image" :src="image" v-bind="ptm('image')" :class="cx('image')" />
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import TimesCircleIcon from '@primevue/icons/timescircle';
 import BaseChip from './BaseChip.vue';
 
@@ -37,6 +38,13 @@ export default {
             this.$emit('remove', event);
         }
     },
+    computed: {
+        dataP() {
+            return cn({
+                removable: this.removable
+            });
+        }
+    },
     components: {
         TimesCircleIcon
     }

From b42fb9e2c13fd91c7b16e7e7381d078d380f645d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 18:00:31 +0300
Subject: [PATCH 48/77] Add accessibility doc

---
 apps/volt/components/doc/DocComponent.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/volt/components/doc/DocComponent.vue b/apps/volt/components/doc/DocComponent.vue
index e45550917..2b2ccb7a7 100644
--- a/apps/volt/components/doc/DocComponent.vue
+++ b/apps/volt/components/doc/DocComponent.vue
@@ -34,6 +34,13 @@
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
                                 ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
                             ></a>
+                            <a
+                                :href="`https://primevue.org${originPath}/#accessibility`"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                            ></a>
                         </div>
                     </div>
                     <DocSections :docs="componentDocs" />

From ca4bc8b8637ab0862a072dc961ceb2a09b8d0cb8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 18:04:06 +0300
Subject: [PATCH 49/77] Update menu

---
 apps/volt/assets/data/menu.json | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 1bcfbe581..60fe20eb2 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -81,6 +81,16 @@
             "icon": "pi pi-eye",
             "to": "/icons"
         },
+        {
+            "name": "Templates",
+            "icon": "pi pi-heart",
+            "to": "https://primevue.org/templates"
+        },
+        {
+            "name": "PrimeBlocks",
+            "icon": "pi pi-server",
+            "href": "https://primeblocks.org"
+        },
         {
             "name": "Support",
             "icon": "pi pi-question",
@@ -117,7 +127,7 @@
                 },
                 {
                     "name": "Source Code",
-                    "href": "https://github.com/primefaces/primevue-tailwind"
+                    "href": "https://github.com/primefaces/primevue/tree/master/apps/volt/volt"
                 },
                 {
                     "name": "Store",

From 6704010e27a2d51cb6289eab63eb7523e9e690bf Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 18:42:50 +0300
Subject: [PATCH 50/77] Remove old files and

---
 apps/volt/scripts/build-presetdoc.js | 36 ----------------------------
 apps/volt/scripts/prebuild.js        | 20 ----------------
 2 files changed, 56 deletions(-)
 delete mode 100644 apps/volt/scripts/build-presetdoc.js
 delete mode 100644 apps/volt/scripts/prebuild.js

diff --git a/apps/volt/scripts/build-presetdoc.js b/apps/volt/scripts/build-presetdoc.js
deleted file mode 100644
index 443bcdba5..000000000
--- a/apps/volt/scripts/build-presetdoc.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const folderPath = path.join(__dirname, '../assets/styles/primevue');
-const jsonFilePath = path.join(__dirname, '../doc/common/presetdoc/index.json');
-
-fs.readdir(folderPath, (err, files) => {
-    if (err) {
-        return console.error(err);
-    }
-
-    const jsonObject = {};
-
-    files.forEach((file) => {
-        const filePath = path.join(folderPath, file);
-
-        if (path.extname(file) === '.css' && !file.startsWith('components')) {
-            const fileContent = fs.readFileSync(filePath, 'utf-8');
-            const fileName = path.parse(file).name;
-
-            jsonObject[fileName] = fileContent;
-        }
-    });
-
-    const dirPath = path.dirname(jsonFilePath);
-
-    if (!fs.existsSync(dirPath)) {
-        fs.mkdirSync(dirPath, { recursive: true });
-    }
-
-    fs.writeFile(jsonFilePath, JSON.stringify(jsonObject, null, 2), (err) => {
-        if (err) {
-            return console.error(err);
-        }
-    });
-});
diff --git a/apps/volt/scripts/prebuild.js b/apps/volt/scripts/prebuild.js
deleted file mode 100644
index 340594999..000000000
--- a/apps/volt/scripts/prebuild.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const rootDir = path.resolve(__dirname, '../');
-const workspaceDir = path.resolve(__dirname, '../../../');
-
-const pkg = path.resolve(rootDir, 'package.json');
-
-const pkgJson = require(pkg);
-const packageJson = require(path.resolve(workspaceDir, 'package.json'));
-
-pkgJson.version = packageJson.version;
-pkgJson.author = packageJson.author;
-pkgJson.homepage = packageJson.homepage;
-pkgJson.license = packageJson.license;
-pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
-pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
-pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
-
-fs.writeFileSync(pkg, JSON.stringify(pkgJson, null, 4));

From 76449af7a9285df29f1e19eed266c139491df2eb Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 18:43:05 +0300
Subject: [PATCH 51/77] change to esm module

---
 apps/volt/package.json         |  6 ++++--
 apps/volt/scripts/prebuild.mjs | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 apps/volt/scripts/prebuild.mjs

diff --git a/apps/volt/package.json b/apps/volt/package.json
index b32ada143..a410c0117 100644
--- a/apps/volt/package.json
+++ b/apps/volt/package.json
@@ -31,8 +31,7 @@
         "generate": "nuxt generate",
         "preview": "nuxt preview",
         "postinstall": "nuxt prepare",
-        "build:prebuild": "node ./scripts/prebuild.js",
-        "build:presetdoc": "node ./scripts/build-presetdoc.js"
+        "build:prebuild": "node ./scripts/prebuild.mjs"
     },
     "dependencies": {
         "@docsearch/js": "catalog:app",
@@ -62,5 +61,8 @@
         "tailwindcss-primeui": "catalog:",
         "typedoc": "0.27.9",
         "vite": "catalog:app"
+    },
+    "engines": {
+        "node": ">=12.11.0"
     }
 }
diff --git a/apps/volt/scripts/prebuild.mjs b/apps/volt/scripts/prebuild.mjs
new file mode 100644
index 000000000..cc3f2dc4d
--- /dev/null
+++ b/apps/volt/scripts/prebuild.mjs
@@ -0,0 +1,24 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const rootDir = resolve(__dirname, '../');
+const workspaceDir = resolve(__dirname, '../../../');
+
+const pkgPath = resolve(rootDir, 'package.json');
+
+const pkgJson = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+const packageJson = JSON.parse(readFileSync(resolve(workspaceDir, 'package.json'), 'utf-8'));
+
+pkgJson.version = packageJson.version;
+pkgJson.author = packageJson.author;
+pkgJson.homepage = packageJson.homepage;
+pkgJson.license = packageJson.license;
+pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
+pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
+pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
+
+writeFileSync(pkgPath, JSON.stringify(pkgJson, null, 4));

From d7c85574a4bb2dce9ef68a660932735eb01055b1 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 18:43:24 +0300
Subject: [PATCH 52/77] Fix build problems

---
 apps/volt/pages/introduction/index.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/volt/pages/introduction/index.vue b/apps/volt/pages/introduction/index.vue
index 337bdbd75..2ae225441 100644
--- a/apps/volt/pages/introduction/index.vue
+++ b/apps/volt/pages/introduction/index.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import FontAwesomeDoc from '@/doc/customicons/FontAwesomeDoc.vue';
-import ImageDoc from '@/doc/customicons/ImageDoc.vue';
-import MaterialDoc from '@/doc/customicons/MaterialDoc.vue';
-import SVGDoc from '@/doc/customicons/SVGDoc.vue';
-import VideoDoc from '@/doc/customicons/VideoDoc.vue';
+import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
+import ImageDoc from '@/doc/icons/ImageDoc.vue';
+import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
+import SVGDoc from '@/doc/icons/SVGDoc.vue';
+import VideoDoc from '@/doc/icons/VideoDoc.vue';
 
 export default {
     data() {

From d70b0d86ca126565d4664b48e4bd3f6f50945a76 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 18:43:42 +0300
Subject: [PATCH 53/77] Add theming tab

---
 apps/volt/components/doc/DocComponent.vue   | 11 ++++--
 apps/volt/components/doc/DocPreset.vue      | 37 +++++++++++++++++++++
 apps/volt/components/doc/DocSectionCode.vue |  3 +-
 apps/volt/doc/checkbox/ImportDoc.vue        |  3 +-
 apps/volt/doc/inputmask/ImportDoc.vue       |  3 +-
 apps/volt/doc/inputnumber/ImportDoc.vue     |  3 +-
 apps/volt/doc/inputtext/ImportDoc.vue       |  3 +-
 apps/volt/doc/radiobutton/ImportDoc.vue     |  3 +-
 apps/volt/doc/rating/ImportDoc.vue          |  3 +-
 apps/volt/doc/selectbutton/ImportDoc.vue    |  3 +-
 apps/volt/doc/slider/ImportDoc.vue          |  3 +-
 apps/volt/doc/textarea/ImportDoc.vue        |  3 +-
 apps/volt/doc/timeline/ImportDoc.vue        |  3 +-
 apps/volt/doc/togglebutton/ImportDoc.vue    |  3 +-
 apps/volt/doc/toggleswitch/ImportDoc.vue    |  3 +-
 15 files changed, 60 insertions(+), 27 deletions(-)
 create mode 100644 apps/volt/components/doc/DocPreset.vue

diff --git a/apps/volt/components/doc/DocComponent.vue b/apps/volt/components/doc/DocComponent.vue
index 2b2ccb7a7..ddbeedfbf 100644
--- a/apps/volt/components/doc/DocComponent.vue
+++ b/apps/volt/components/doc/DocComponent.vue
@@ -1,14 +1,17 @@
 <template>
     <div :class="['doc-component', className]">
         <Head>
-            <Title>Tailwind CSS | {{ title }}</Title>
-            <Meta name="description" :content="'Tailwind CSS | ' + description" />
+            <Title>Volt | {{ title }}</Title>
+            <Meta name="description" :content="'Volt | ' + description" />
         </Head>
 
         <ul class="doc-tabmenu">
             <li :class="{ 'doc-tabmenu-active': tab === 0 }">
                 <button type="button" @click="tab = 0">FEATURES</button>
             </li>
+            <li :class="{ 'doc-tabmenu-active': tab === 1 }">
+                <button type="button" @click="tab = 1">THEMING</button>
+            </li>
         </ul>
 
         <div class="doc-tabpanels">
@@ -47,6 +50,10 @@
                 </div>
                 <DocSectionNav :docs="componentDocs" />
             </div>
+
+            <div v-if="tab === 1" class="doc-tabpanel">
+                <DocPreset :presetKey="header?.toLowerCase()" :introText="`${header} Styles`" />
+            </div>
         </div>
     </div>
 </template>
diff --git a/apps/volt/components/doc/DocPreset.vue b/apps/volt/components/doc/DocPreset.vue
new file mode 100644
index 000000000..73369ea33
--- /dev/null
+++ b/apps/volt/components/doc/DocPreset.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>{{ introText }}</h1>
+        </div>
+        <div class="xl:pe-72 -mt-4">
+            <DocSectionCode :code="code" lang="script" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        presetKey: {
+            type: String,
+            default: null
+        },
+        introText: {
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+            code: ''
+        };
+    },
+    async mounted() {
+        if (this.presetKey) {
+            const content = await import(`../../volt/${this.presetKey}/index.vue?raw`);
+
+            this.code = content.default;
+        }
+    }
+};
+</script>
diff --git a/apps/volt/components/doc/DocSectionCode.vue b/apps/volt/components/doc/DocSectionCode.vue
index 4604ec209..256690d42 100644
--- a/apps/volt/components/doc/DocSectionCode.vue
+++ b/apps/volt/components/doc/DocSectionCode.vue
@@ -13,7 +13,8 @@
             </template>
 
             <template v-else-if="lang === 'script'">
-                <pre v-code.script><code>{{ code }}
+                <pre v-code.script><code>
+{{ code }}
 </code></pre>
             </template>
         </div>
diff --git a/apps/volt/doc/checkbox/ImportDoc.vue b/apps/volt/doc/checkbox/ImportDoc.vue
index 2cfbe2497..d23c8d795 100644
--- a/apps/volt/doc/checkbox/ImportDoc.vue
+++ b/apps/volt/doc/checkbox/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import Checkbox from '@/volt/checkbox';
+            code: `import Checkbox from '@/volt/checkbox';
 `
         };
     }
diff --git a/apps/volt/doc/inputmask/ImportDoc.vue b/apps/volt/doc/inputmask/ImportDoc.vue
index 59d8318a7..9b6e02bf3 100644
--- a/apps/volt/doc/inputmask/ImportDoc.vue
+++ b/apps/volt/doc/inputmask/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import InputMask from '@/volt/inputmask';
+            code: `import InputMask from '@/volt/inputmask';
 `
         };
     }
diff --git a/apps/volt/doc/inputnumber/ImportDoc.vue b/apps/volt/doc/inputnumber/ImportDoc.vue
index bda912887..4523bf240 100644
--- a/apps/volt/doc/inputnumber/ImportDoc.vue
+++ b/apps/volt/doc/inputnumber/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import InputNumber from '@/volt/inputnumber';
+            code: `import InputNumber from '@/volt/inputnumber';
 `
         };
     }
diff --git a/apps/volt/doc/inputtext/ImportDoc.vue b/apps/volt/doc/inputtext/ImportDoc.vue
index bc79b15e3..b098e1981 100644
--- a/apps/volt/doc/inputtext/ImportDoc.vue
+++ b/apps/volt/doc/inputtext/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import InputText from '@/volt/inputtext';
+            code: `import InputText from '@/volt/inputtext';
 `
         };
     }
diff --git a/apps/volt/doc/radiobutton/ImportDoc.vue b/apps/volt/doc/radiobutton/ImportDoc.vue
index e43156047..3c7e9dadb 100644
--- a/apps/volt/doc/radiobutton/ImportDoc.vue
+++ b/apps/volt/doc/radiobutton/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import RadioButton from '@/volt/radiobutton';
+            code: `import RadioButton from '@/volt/radiobutton';
 `
         };
     }
diff --git a/apps/volt/doc/rating/ImportDoc.vue b/apps/volt/doc/rating/ImportDoc.vue
index f47bd44dd..a6c45f087 100644
--- a/apps/volt/doc/rating/ImportDoc.vue
+++ b/apps/volt/doc/rating/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import Rating from '@/volt/rating';
+            code: `import Rating from '@/volt/rating';
 `
         };
     }
diff --git a/apps/volt/doc/selectbutton/ImportDoc.vue b/apps/volt/doc/selectbutton/ImportDoc.vue
index bea8a59d9..a25896e30 100644
--- a/apps/volt/doc/selectbutton/ImportDoc.vue
+++ b/apps/volt/doc/selectbutton/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import SelectButton from '@/volt/selectbutton';
+            code: `import SelectButton from '@/volt/selectbutton';
 `
         };
     }
diff --git a/apps/volt/doc/slider/ImportDoc.vue b/apps/volt/doc/slider/ImportDoc.vue
index 852e56b1a..81c445f7c 100644
--- a/apps/volt/doc/slider/ImportDoc.vue
+++ b/apps/volt/doc/slider/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import Slider from '@/volt/slider';
+            code: `import Slider from '@/volt/slider';
 `
         };
     }
diff --git a/apps/volt/doc/textarea/ImportDoc.vue b/apps/volt/doc/textarea/ImportDoc.vue
index 27c6cdfef..113928ee3 100644
--- a/apps/volt/doc/textarea/ImportDoc.vue
+++ b/apps/volt/doc/textarea/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import Textarea from '@/volt/textarea';
+            code: `import Textarea from '@/volt/textarea';
 `
         };
     }
diff --git a/apps/volt/doc/timeline/ImportDoc.vue b/apps/volt/doc/timeline/ImportDoc.vue
index b75a848c4..ee88fa698 100644
--- a/apps/volt/doc/timeline/ImportDoc.vue
+++ b/apps/volt/doc/timeline/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import Timeline from '@/volt/timeline';
+            code: `import Timeline from '@/volt/timeline';
 `
         };
     }
diff --git a/apps/volt/doc/togglebutton/ImportDoc.vue b/apps/volt/doc/togglebutton/ImportDoc.vue
index 3d0aceb68..cee97f107 100644
--- a/apps/volt/doc/togglebutton/ImportDoc.vue
+++ b/apps/volt/doc/togglebutton/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import ToggleButton from '@/volt/togglebutton';
+            code: `import ToggleButton from '@/volt/togglebutton';
 `
         };
     }
diff --git a/apps/volt/doc/toggleswitch/ImportDoc.vue b/apps/volt/doc/toggleswitch/ImportDoc.vue
index be138569e..34c1abaf9 100644
--- a/apps/volt/doc/toggleswitch/ImportDoc.vue
+++ b/apps/volt/doc/toggleswitch/ImportDoc.vue
@@ -7,8 +7,7 @@
 export default {
     data() {
         return {
-            code: `
-import ToggleSwitch from '@/volt/toggleswitch';
+            code: `import ToggleSwitch from '@/volt/toggleswitch';
 `
         };
     }

From 26bd5263057ea321b499a7bb544bf9fbb6325b4c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 18:44:27 +0300
Subject: [PATCH 54/77] Format code

---
 packages/nuxt-module/tsconfig.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/nuxt-module/tsconfig.json b/packages/nuxt-module/tsconfig.json
index 0b0072f12..2cc5225b3 100644
--- a/packages/nuxt-module/tsconfig.json
+++ b/packages/nuxt-module/tsconfig.json
@@ -10,9 +10,5 @@
             "@primevue/auto-import-resolver/*": ["../../packages/auto-import-resolver/src/*"]
         }
     },
-    "exclude": [
-      "dist",
-      "node_modules",
-      "playground"
-    ]
+    "exclude": ["dist", "node_modules", "playground"]
 }

From 19e49e852be2e25498d85a864b552432812f67f4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 20:00:34 +0300
Subject: [PATCH 55/77] Update demo for templating

---
 apps/showcase/doc/chip/IconDoc.vue | 20 ++++++++++++++++++++
 apps/volt/doc/chip/IconDoc.vue     | 10 ++++++++++
 apps/volt/doc/chip/TemplateDoc.vue |  4 ++--
 apps/volt/pages/chip/index.vue     |  2 +-
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/apps/showcase/doc/chip/IconDoc.vue b/apps/showcase/doc/chip/IconDoc.vue
index 339ff9656..a5b3e75da 100644
--- a/apps/showcase/doc/chip/IconDoc.vue
+++ b/apps/showcase/doc/chip/IconDoc.vue
@@ -7,6 +7,11 @@
         <Chip label="Facebook" icon="pi pi-facebook" />
         <Chip label="Google" icon="pi pi-google" />
         <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        <Chip label="GitHub" icon="pi pi-github" removable>
+            <template #removeicon="{ removeCallback, keydownCallback }">
+                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+            </template>
+        </Chip>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,6 +26,11 @@ export default {
 <Chip label="Facebook" icon="pi pi-facebook" />
 <Chip label="Google" icon="pi pi-google" />
 <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+<Chip label="GitHub" icon="pi pi-github" removable>
+    <template #removeicon="{ removeCallback, keydownCallback }">
+        <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+    </template>
+</Chip>
 `,
                 options: `
 <template>
@@ -29,6 +39,11 @@ export default {
         <Chip label="Facebook" icon="pi pi-facebook" />
         <Chip label="Google" icon="pi pi-google" />
         <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        <Chip label="GitHub" icon="pi pi-github" removable>
+            <template #removeicon="{ removeCallback, keydownCallback }">
+                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+            </template>
+        </Chip>
     </div>
 </template>
 <script>
@@ -42,6 +57,11 @@ export default {
         <Chip label="Facebook" icon="pi pi-facebook" />
         <Chip label="Google" icon="pi pi-google" />
         <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        <Chip label="GitHub" icon="pi pi-github" removable>
+            <template #removeicon="{ removeCallback, keydownCallback }">
+                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+            </template>
+        </Chip>
     </div>
 </template>
 <script setup>
diff --git a/apps/volt/doc/chip/IconDoc.vue b/apps/volt/doc/chip/IconDoc.vue
index e1de2c3c2..d7f65ad26 100644
--- a/apps/volt/doc/chip/IconDoc.vue
+++ b/apps/volt/doc/chip/IconDoc.vue
@@ -7,6 +7,11 @@
         <Chip label="Facebook" icon="pi pi-facebook" />
         <Chip label="Google" icon="pi pi-google" />
         <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        <Chip label="GitHub" icon="pi pi-github" removable>
+            <template #removeicon="{ removeCallback, keydownCallback }">
+                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+            </template>
+        </Chip>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,6 +27,11 @@ const code = ref(`
         <Chip label="Facebook" icon="pi pi-facebook" />
         <Chip label="Google" icon="pi pi-google" />
         <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        <Chip label="GitHub" icon="pi pi-github" removable>
+            <template #removeicon="{ removeCallback, keydownCallback }">
+                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+            </template>
+        </Chip>
     </div>
 </template>
 `);
diff --git a/apps/volt/doc/chip/TemplateDoc.vue b/apps/volt/doc/chip/TemplateDoc.vue
index faf5feaeb..11e9604e0 100644
--- a/apps/volt/doc/chip/TemplateDoc.vue
+++ b/apps/volt/doc/chip/TemplateDoc.vue
@@ -3,7 +3,7 @@
         <p>The default slot allows displaying custom content inside a chip.</p>
     </DocSectionText>
     <div class="card">
-        <Chip class="py-0 pl-0 pr-4">
+        <Chip pt:root:class="py-0 pl-0 pr-4" removable>
             <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
             <span class="font-medium">PRIME</span>
         </Chip>
@@ -18,7 +18,7 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card">
-        <Chip class="py-0 pl-0 pr-4">
+        <Chip pt:root:class="py-0 pl-0 pr-4">
             <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
             <span class="font-medium">PRIME</span>
         </Chip>
diff --git a/apps/volt/pages/chip/index.vue b/apps/volt/pages/chip/index.vue
index df45f0017..008930231 100644
--- a/apps/volt/pages/chip/index.vue
+++ b/apps/volt/pages/chip/index.vue
@@ -34,7 +34,7 @@ export default {
                     component: ImageDoc
                 },
                 {
-                    id: 'templatedoc',
+                    id: 'template',
                     label: 'Template',
                     component: TemplateDoc
                 }

From b51eca6679db22d8e77a82217788d21c6f4ef303 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Mar 2025 20:27:25 +0300
Subject: [PATCH 56/77] Fixed #7361 - Rating: add focus-visible after clicked
 and then shift-tab

---
 packages/primevue/src/rating/Rating.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/primevue/src/rating/Rating.vue b/packages/primevue/src/rating/Rating.vue
index 0bc048ea7..4a3980c10 100755
--- a/packages/primevue/src/rating/Rating.vue
+++ b/packages/primevue/src/rating/Rating.vue
@@ -67,6 +67,8 @@ export default {
         },
         onFocus(event, value) {
             this.focusedOptionIndex = value;
+            this.isFocusVisibleItem = event.sourceCapabilities?.firesTouchEvents === false;
+
             this.$emit('focus', event);
         },
         onBlur(event) {

From 7e5e5f6650e257b0089b291657110235ecbe035e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 22:38:57 +0300
Subject: [PATCH 57/77] Implemented Avatar

---
 apps/volt/assets/data/menu.json         |  4 ++
 apps/volt/doc/avatar/AvatarGroupDoc.vue | 41 +++++++++++++++
 apps/volt/doc/avatar/IconDoc.vue        | 67 +++++++++++++++++++++++++
 apps/volt/doc/avatar/ImageDoc.vue       | 63 +++++++++++++++++++++++
 apps/volt/doc/avatar/ImportDoc.vue      | 15 ++++++
 apps/volt/doc/avatar/LabelDoc.vue       | 67 +++++++++++++++++++++++++
 apps/volt/doc/chip/BasicDoc.vue         |  4 ++
 apps/volt/doc/chip/IconDoc.vue          |  4 ++
 apps/volt/doc/chip/ImageDoc.vue         |  4 ++
 apps/volt/doc/chip/TemplateDoc.vue      |  4 ++
 apps/volt/pages/avatar/index.vue        | 45 +++++++++++++++++
 apps/volt/tailwind.config.js            |  2 +
 apps/volt/volt/avatar/index.vue         | 32 ++++++++++++
 apps/volt/volt/avatargroup/index.vue    | 23 +++++++++
 packages/primevue/src/avatar/Avatar.vue | 17 +++++--
 15 files changed, 388 insertions(+), 4 deletions(-)
 create mode 100644 apps/volt/doc/avatar/AvatarGroupDoc.vue
 create mode 100644 apps/volt/doc/avatar/IconDoc.vue
 create mode 100644 apps/volt/doc/avatar/ImageDoc.vue
 create mode 100644 apps/volt/doc/avatar/ImportDoc.vue
 create mode 100644 apps/volt/doc/avatar/LabelDoc.vue
 create mode 100644 apps/volt/pages/avatar/index.vue
 create mode 100644 apps/volt/volt/avatar/index.vue
 create mode 100644 apps/volt/volt/avatargroup/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 60fe20eb2..d6cdc33ce 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -22,6 +22,10 @@
             "name": "Components",
             "icon": "pi pi-compass",
             "children": [
+                {
+                    "name": "Avatar",
+                    "to": "/avatar"
+                },
                 {
                     "name": "Checkbox",
                     "to": "/checkbox"
diff --git a/apps/volt/doc/avatar/AvatarGroupDoc.vue b/apps/volt/doc/avatar/AvatarGroupDoc.vue
new file mode 100644
index 000000000..10e62f828
--- /dev/null
+++ b/apps/volt/doc/avatar/AvatarGroupDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import AvatarGroup from '@/volt/avatargroup';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import AvatarGroup from '@/volt/avatargroup';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/avatar/IconDoc.vue b/apps/volt/doc/avatar/IconDoc.vue
new file mode 100644
index 000000000..254b5df45
--- /dev/null
+++ b/apps/volt/doc/avatar/IconDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/avatar/ImageDoc.vue b/apps/volt/doc/avatar/ImageDoc.vue
new file mode 100644
index 000000000..af47532db
--- /dev/null
+++ b/apps/volt/doc/avatar/ImageDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>image</i> property to display an image as an Avatar.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/avatar/ImportDoc.vue b/apps/volt/doc/avatar/ImportDoc.vue
new file mode 100644
index 000000000..b098e1981
--- /dev/null
+++ b/apps/volt/doc/avatar/ImportDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import InputText from '@/volt/inputtext';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/volt/doc/avatar/LabelDoc.vue b/apps/volt/doc/avatar/LabelDoc.vue
new file mode 100644
index 000000000..62f86e09a
--- /dev/null
+++ b/apps/volt/doc/avatar/LabelDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A letter Avatar is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/chip/BasicDoc.vue b/apps/volt/doc/chip/BasicDoc.vue
index 1ea935ca7..693acaea6 100644
--- a/apps/volt/doc/chip/BasicDoc.vue
+++ b/apps/volt/doc/chip/BasicDoc.vue
@@ -24,5 +24,9 @@ const code = ref(`
         <Chip label="Thriller" removable />
     </div>
 </template>
+
+<script setup>
+import Chip from '@/volt/chip';
+<\/script>
 `);
 </script>
diff --git a/apps/volt/doc/chip/IconDoc.vue b/apps/volt/doc/chip/IconDoc.vue
index d7f65ad26..ebdaec8c0 100644
--- a/apps/volt/doc/chip/IconDoc.vue
+++ b/apps/volt/doc/chip/IconDoc.vue
@@ -34,5 +34,9 @@ const code = ref(`
         </Chip>
     </div>
 </template>
+
+<script setup>
+import Chip from '@/volt/chip';
+<\/script>
 `);
 </script>
diff --git a/apps/volt/doc/chip/ImageDoc.vue b/apps/volt/doc/chip/ImageDoc.vue
index cf8e25c80..3ef9bf0c8 100644
--- a/apps/volt/doc/chip/ImageDoc.vue
+++ b/apps/volt/doc/chip/ImageDoc.vue
@@ -24,5 +24,9 @@ const code = ref(`
         <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
     </div>
 </template>
+
+<script setup>
+import Chip from '@/volt/chip';
+<\/script>
 `);
 </script>
diff --git a/apps/volt/doc/chip/TemplateDoc.vue b/apps/volt/doc/chip/TemplateDoc.vue
index 11e9604e0..a5529decc 100644
--- a/apps/volt/doc/chip/TemplateDoc.vue
+++ b/apps/volt/doc/chip/TemplateDoc.vue
@@ -24,5 +24,9 @@ const code = ref(`
         </Chip>
     </div>
 </template>
+
+<script setup>
+import Chip from '@/volt/chip';
+<\/script>
 `);
 </script>
diff --git a/apps/volt/pages/avatar/index.vue b/apps/volt/pages/avatar/index.vue
new file mode 100644
index 000000000..c1f1b65f1
--- /dev/null
+++ b/apps/volt/pages/avatar/index.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" />
+</template>
+
+<script>
+import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
+import IconDoc from '@/doc/avatar/IconDoc.vue';
+import ImageDoc from '@/doc/avatar/ImageDoc.vue';
+import ImportDoc from '@/doc/avatar/ImportDoc.vue';
+import LabelDoc from '@/doc/avatar/LabelDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'label',
+                    label: 'Label',
+                    component: LabelDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                },
+                {
+                    id: 'avatargroup',
+                    label: 'AvatarGroup',
+                    component: AvatarGroupDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/volt/tailwind.config.js b/apps/volt/tailwind.config.js
index 7211fe889..bd0cca4cc 100644
--- a/apps/volt/tailwind.config.js
+++ b/apps/volt/tailwind.config.js
@@ -11,6 +11,7 @@ export default {
             addVariant('p-invalid', '&[data-p~="invalid"]');
             addVariant('p-small', '&[data-p~="small"]');
             addVariant('p-large', '&[data-p~="large"]');
+            addVariant('p-xlarge', '&[data-p~="xlarge"]');
             addVariant('p-fluid', '&[data-p~="fluid"]');
             addVariant('p-filled', '&[data-p~="filled"]');
             addVariant('p-horizontal', '&[data-p~="horizontal"]');
@@ -28,6 +29,7 @@ export default {
             addVariant('p-focus-visible', '&[data-p~="focus-visible"]');
             addVariant('p-readonly', '&[data-p~="readonly"]');
             addVariant('p-removable', '&[data-p~="removable"]');
+            addVariant('p-circle', '&[data-p~="circle"]');
         })
     ],
     theme: {
diff --git a/apps/volt/volt/avatar/index.vue b/apps/volt/volt/avatar/index.vue
new file mode 100644
index 000000000..487d57e68
--- /dev/null
+++ b/apps/volt/volt/avatar/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <Avatar
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Avatar>
+</template>
+
+<script setup>
+import Avatar from 'primevue/avatar';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex items-center justify-center
+        w-8 h-8 text-base rounded-md
+        bg-surface-200 dark:bg-surface-700
+        has-[img]:bg-transparent
+        p-circle:rounded-full
+        p-large:w-12 p-large:h-12 p-large:text-2xl
+        p-xlarge:w-16 p-xlarge:h-16 p-xlarge:text-[2rem]`,
+    label: ``,
+    icon: `text-base p-large:text-2xl p-xlarge:text-[2rem]`,
+    image: `p-circle:rounded-full w-full h-full`
+});
+</script>
diff --git a/apps/volt/volt/avatargroup/index.vue b/apps/volt/volt/avatargroup/index.vue
new file mode 100644
index 000000000..9c949d837
--- /dev/null
+++ b/apps/volt/volt/avatargroup/index.vue
@@ -0,0 +1,23 @@
+<template>
+    <AvatarGroup
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </AvatarGroup>
+</template>
+
+<script setup>
+import AvatarGroup from 'primevue/avatargroup';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `flex items-center *:border-2 *:border-surface-200 dark:*:border-surface-700 *:-ms-3`
+});
+</script>
diff --git a/packages/primevue/src/avatar/Avatar.vue b/packages/primevue/src/avatar/Avatar.vue
index cbe30f81e..4c5a0f026 100644
--- a/packages/primevue/src/avatar/Avatar.vue
+++ b/packages/primevue/src/avatar/Avatar.vue
@@ -1,15 +1,16 @@
 <template>
-    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptmi('root')">
+    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptmi('root')" :data-p="dataP">
         <slot>
-            <span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
+            <span v-if="label" :class="cx('label')" v-bind="ptm('label')" :data-p="dataP">{{ label }}</span>
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
-            <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
-            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
+            <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" :data-p="dataP" />
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" :data-p="dataP" />
         </slot>
     </div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseAvatar from './BaseAvatar.vue';
 
 export default {
@@ -21,6 +22,14 @@ export default {
         onError(event) {
             this.$emit('error', event);
         }
+    },
+    computed: {
+        dataP() {
+            return cn({
+                [this.shape]: this.shape,
+                [this.size]: this.size
+            });
+        }
     }
 };
 </script>

From cc7ccb849559708718250a51a73971c3688864e0 Mon Sep 17 00:00:00 2001
From: Reddy Uppathi <popvictoria@gmail.com>
Date: Tue, 4 Mar 2025 01:15:11 +0530
Subject: [PATCH 58/77] fix: #7360 - Select: style error when resize window

---
 packages/primevue/src/select/Select.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/primevue/src/select/Select.vue b/packages/primevue/src/select/Select.vue
index 63c26a66f..f99e6943b 100755
--- a/packages/primevue/src/select/Select.vue
+++ b/packages/primevue/src/select/Select.vue
@@ -723,8 +723,10 @@ export default {
             if (this.appendTo === 'self') {
                 relativePosition(this.overlay, this.$el);
             } else {
-                this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
-                absolutePosition(this.overlay, this.$el);
+                if(this.overlay) {
+                    this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
+                    absolutePosition(this.overlay, this.$el);
+                }
             }
         },
         bindOutsideClickListener() {
@@ -806,6 +808,8 @@ export default {
                 this.queryOrientation = query;
 
                 this.matchMediaOrientationListener = () => {
+                    console.log('kkkkk');
+
                     this.alignOverlay();
                 };
 

From 6744594399b5aaac796931b9ff956c9d156980a7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 22:54:07 +0300
Subject: [PATCH 59/77] Implemented Skeleton for Volt

---
 apps/volt/assets/data/menu.json             |   4 +
 apps/volt/components/doc/DocComponent.vue   |   4 +-
 apps/volt/components/doc/DocPreset.vue      |   6 +-
 apps/volt/doc/skeleton/CardDoc.vue          |  54 ++++++++++
 apps/volt/doc/skeleton/ImportDoc.vue        |  15 +++
 apps/volt/doc/skeleton/ListDoc.vue          | 104 ++++++++++++++++++++
 apps/volt/doc/skeleton/ShapesDoc.vue        |  96 ++++++++++++++++++
 apps/volt/pages/skeleton/index.vue          |  39 ++++++++
 apps/volt/volt/skeleton/index.vue           |  19 ++++
 packages/primevue/src/skeleton/Skeleton.vue |   8 +-
 10 files changed, 343 insertions(+), 6 deletions(-)
 create mode 100644 apps/volt/doc/skeleton/CardDoc.vue
 create mode 100644 apps/volt/doc/skeleton/ImportDoc.vue
 create mode 100644 apps/volt/doc/skeleton/ListDoc.vue
 create mode 100644 apps/volt/doc/skeleton/ShapesDoc.vue
 create mode 100644 apps/volt/pages/skeleton/index.vue
 create mode 100644 apps/volt/volt/skeleton/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index d6cdc33ce..d3485fc3d 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -58,6 +58,10 @@
                     "name": "SelectButton",
                     "to": "/selectbutton"
                 },
+                {
+                    "name": "Skeleton",
+                    "to": "/skeleton"
+                },
                 {
                     "name": "Slider",
                     "to": "/slider"
diff --git a/apps/volt/components/doc/DocComponent.vue b/apps/volt/components/doc/DocComponent.vue
index ddbeedfbf..b0d8585eb 100644
--- a/apps/volt/components/doc/DocComponent.vue
+++ b/apps/volt/components/doc/DocComponent.vue
@@ -10,7 +10,7 @@
                 <button type="button" @click="tab = 0">FEATURES</button>
             </li>
             <li :class="{ 'doc-tabmenu-active': tab === 1 }">
-                <button type="button" @click="tab = 1">THEMING</button>
+                <button type="button" @click="tab = 1">CODE</button>
             </li>
         </ul>
 
@@ -52,7 +52,7 @@
             </div>
 
             <div v-if="tab === 1" class="doc-tabpanel">
-                <DocPreset :presetKey="header?.toLowerCase()" :introText="`${header} Styles`" />
+                <DocPreset :presetKey="header?.toLowerCase()" :introText="`${header} Code`" />
             </div>
         </div>
     </div>
diff --git a/apps/volt/components/doc/DocPreset.vue b/apps/volt/components/doc/DocPreset.vue
index 73369ea33..7a4dd5c12 100644
--- a/apps/volt/components/doc/DocPreset.vue
+++ b/apps/volt/components/doc/DocPreset.vue
@@ -3,8 +3,8 @@
         <div class="doc-intro">
             <h1>{{ introText }}</h1>
         </div>
-        <div class="xl:pe-72 -mt-4">
-            <DocSectionCode :code="code" lang="script" />
+        <div class="xl:pe-72">
+            <DocSectionCode :code="code" />
         </div>
     </div>
 </template>
@@ -30,7 +30,7 @@ export default {
         if (this.presetKey) {
             const content = await import(`../../volt/${this.presetKey}/index.vue?raw`);
 
-            this.code = content.default;
+            this.code = '\n' + content.default;
         }
     }
 };
diff --git a/apps/volt/doc/skeleton/CardDoc.vue b/apps/volt/doc/skeleton/CardDoc.vue
new file mode 100644
index 000000000..2a8fd2430
--- /dev/null
+++ b/apps/volt/doc/skeleton/CardDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sample Card implementation using different Skeleton components and Tailwind CSS utilities.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <div class="flex mb-4">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div>
+                    <Skeleton width="10rem" class="mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="mb-2"></Skeleton>
+                    <Skeleton height=".5rem"></Skeleton>
+                </div>
+            </div>
+            <Skeleton width="100%" height="150px"></Skeleton>
+            <div class="flex justify-between mt-4">
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Skeleton from '@/volt/skeleton';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+     <div class="card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <div class="flex mb-4">
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <div>
+                    <Skeleton width="10rem" class="mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="mb-2"></Skeleton>
+                    <Skeleton height=".5rem"></Skeleton>
+                </div>
+            </div>
+            <Skeleton width="100%" height="150px"></Skeleton>
+            <div class="flex justify-between mt-4">
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+                <Skeleton width="4rem" height="2rem"></Skeleton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Skeleton from '@/volt/skeleton';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/skeleton/ImportDoc.vue b/apps/volt/doc/skeleton/ImportDoc.vue
new file mode 100644
index 000000000..8722be9a0
--- /dev/null
+++ b/apps/volt/doc/skeleton/ImportDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import Skeleton from '@/volt/skeleton';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/volt/doc/skeleton/ListDoc.vue b/apps/volt/doc/skeleton/ListDoc.vue
new file mode 100644
index 000000000..c0420b1dd
--- /dev/null
+++ b/apps/volt/doc/skeleton/ListDoc.vue
@@ -0,0 +1,104 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Sample List implementation using different Skeleton components and Tailwind CSS utilities.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <ul class="m-0 p-0 list-none">
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Skeleton from '@/volt/skeleton';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <ul class="m-0 p-0 list-none">
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li class="mb-4">
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="flex">
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                        <div class="self-center" style="flex: 1">
+                            <Skeleton width="100%" class="mb-2"></Skeleton>
+                            <Skeleton width="75%"></Skeleton>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Skeleton from '@/volt/skeleton';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/skeleton/ShapesDoc.vue b/apps/volt/doc/skeleton/ShapesDoc.vue
new file mode 100644
index 000000000..98722c205
--- /dev/null
+++ b/apps/volt/doc/skeleton/ShapesDoc.vue
@@ -0,0 +1,96 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Various shapes and sizes can be created using styling properties like <i>shape</i>, <i>width</i>, <i>height</i>, <i>borderRadius</i> and <i>class</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rectangle</h5>
+                <Skeleton class="mb-2"></Skeleton>
+                <Skeleton width="10rem" class="mb-2"></Skeleton>
+                <Skeleton width="5rem" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2"></Skeleton>
+                <Skeleton width="10rem" height="4rem"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rounded</h5>
+                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Square</h5>
+                <div class="flex items-end">
+                    <Skeleton size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton size="5rem"></Skeleton>
+                </div>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Circle</h5>
+                <div class="flex items-end">
+                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="5rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Skeleton from '@/volt/skeleton';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rectangle</h5>
+                <Skeleton class="mb-2"></Skeleton>
+                <Skeleton width="10rem" class="mb-2"></Skeleton>
+                <Skeleton width="5rem" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2"></Skeleton>
+                <Skeleton width="10rem" height="4rem"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5>Rounded</h5>
+                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Square</h5>
+                <div class="flex items-end">
+                    <Skeleton size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton size="5rem"></Skeleton>
+                </div>
+            </div>
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Circle</h5>
+                <div class="flex items-end">
+                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="5rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Skeleton from '@/volt/skeleton';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/pages/skeleton/index.vue b/apps/volt/pages/skeleton/index.vue
new file mode 100644
index 000000000..8bd0f2839
--- /dev/null
+++ b/apps/volt/pages/skeleton/index.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" />
+</template>
+
+<script>
+import CardDoc from '@/doc/skeleton/CardDoc.vue';
+import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
+import ListDoc from '@/doc/skeleton/ListDoc.vue';
+import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'shapes',
+                    label: 'Shapes',
+                    component: ShapesDoc
+                },
+                {
+                    id: 'card',
+                    label: 'Card',
+                    component: CardDoc
+                },
+                {
+                    id: 'list',
+                    label: 'List',
+                    component: ListDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/volt/volt/skeleton/index.vue b/apps/volt/volt/skeleton/index.vue
new file mode 100644
index 000000000..10d154e2c
--- /dev/null
+++ b/apps/volt/volt/skeleton/index.vue
@@ -0,0 +1,19 @@
+<template>
+    <Skeleton
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    />
+</template>
+
+<script setup>
+import Skeleton from 'primevue/skeleton';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md p-circle:rounded-full`
+});
+</script>
diff --git a/packages/primevue/src/skeleton/Skeleton.vue b/packages/primevue/src/skeleton/Skeleton.vue
index efcc490dc..816dcdbc4 100644
--- a/packages/primevue/src/skeleton/Skeleton.vue
+++ b/packages/primevue/src/skeleton/Skeleton.vue
@@ -1,8 +1,9 @@
 <template>
-    <div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptmi('root')"></div>
+    <div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptmi('root')" :data-p="dataP"></div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseSkeleton from './BaseSkeleton.vue';
 
 export default {
@@ -13,6 +14,11 @@ export default {
         containerStyle() {
             if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };
             else return { width: this.width, height: this.height, borderRadius: this.borderRadius };
+        },
+        dataP() {
+            return cn({
+                [this.shape]: this.shape
+            });
         }
     }
 };

From 8d7f1416d54390c4d3797786c9fc5ec2a9a97f14 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 23:23:53 +0300
Subject: [PATCH 60/77] Implemented ProgressBar

---
 apps/volt/assets/data/menu.json               |  4 +
 apps/volt/doc/progressbar/BasicDoc.vue        | 26 +++++++
 apps/volt/doc/progressbar/DynamicDoc.vue      | 75 +++++++++++++++++++
 apps/volt/doc/progressbar/ImportDoc.vue       | 15 ++++
 .../volt/doc/progressbar/IndeterminateDoc.vue | 26 +++++++
 apps/volt/doc/progressbar/TemplateDoc.vue     | 30 ++++++++
 apps/volt/pages/progressbar/index.vue         | 45 +++++++++++
 apps/volt/tailwind.config.js                  |  2 +
 apps/volt/volt/progressbar/index.vue          | 65 ++++++++++++++++
 .../primevue/src/progressbar/ProgressBar.vue  | 15 +++-
 10 files changed, 299 insertions(+), 4 deletions(-)
 create mode 100644 apps/volt/doc/progressbar/BasicDoc.vue
 create mode 100644 apps/volt/doc/progressbar/DynamicDoc.vue
 create mode 100644 apps/volt/doc/progressbar/ImportDoc.vue
 create mode 100644 apps/volt/doc/progressbar/IndeterminateDoc.vue
 create mode 100644 apps/volt/doc/progressbar/TemplateDoc.vue
 create mode 100644 apps/volt/pages/progressbar/index.vue
 create mode 100644 apps/volt/volt/progressbar/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index d3485fc3d..a1bdc5803 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -46,6 +46,10 @@
                     "name": "InputText",
                     "to": "/inputtext"
                 },
+                {
+                    "name": "ProgressBar",
+                    "to": "/progressbar"
+                },
                 {
                     "name": "RadioButton",
                     "to": "/radiobutton"
diff --git a/apps/volt/doc/progressbar/BasicDoc.vue b/apps/volt/doc/progressbar/BasicDoc.vue
new file mode 100644
index 000000000..3046059d5
--- /dev/null
+++ b/apps/volt/doc/progressbar/BasicDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ProgressBar is used with the <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ProgressBar from '@/volt/progressbar';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+</template>
+
+<script setup>
+import ProgressBar from '@/volt/progressbar';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/progressbar/DynamicDoc.vue b/apps/volt/doc/progressbar/DynamicDoc.vue
new file mode 100644
index 000000000..3be29f310
--- /dev/null
+++ b/apps/volt/doc/progressbar/DynamicDoc.vue
@@ -0,0 +1,75 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Value is reactive so updating it dynamically changes the bar as well.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="progress"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ProgressBar from '@/volt/progressbar';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+onMounted(() => {
+    startProgress();
+});
+
+onBeforeUnmount(() => {
+    endProgress();
+});
+
+const progress = ref(0);
+const interval = ref();
+const startProgress = () => {
+    interval.value = setInterval(() => {
+        let newValue = progress.value + Math.floor(Math.random() * 10) + 1;
+        if (newValue >= 100) {
+            newValue = 100;
+        }
+        progress.value = newValue;
+    }, 2000);
+};
+const endProgress = () => {
+    clearInterval(interval.value);
+    interval.value = null;
+};
+
+const code = ref(`
+<template>
+    <div class="card">
+        <ProgressBar :value="progress"></ProgressBar>
+    </div>
+</template>
+
+<script setup>
+import ProgressBar from '@/volt/progressbar';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+onMounted(() => {
+    startProgress();
+});
+
+onBeforeUnmount(() => {
+    endProgress();
+});
+
+const progress = ref(0);
+const interval = ref();
+const startProgress = () => {
+    interval.value = setInterval(() => {
+        let newValue = progress.value + Math.floor(Math.random() * 10) + 1;
+        if (newValue >= 100) {
+            newValue = 100;
+        }
+        progress.value = newValue;
+    }, 2000);
+};
+const endProgress = () => {
+    clearInterval(interval.value);
+    interval.value = null;
+};
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/progressbar/ImportDoc.vue b/apps/volt/doc/progressbar/ImportDoc.vue
new file mode 100644
index 000000000..8b2ad1a06
--- /dev/null
+++ b/apps/volt/doc/progressbar/ImportDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import ProgressBar from '@/volt/progressbar';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/volt/doc/progressbar/IndeterminateDoc.vue b/apps/volt/doc/progressbar/IndeterminateDoc.vue
new file mode 100644
index 000000000..349d2bdb1
--- /dev/null
+++ b/apps/volt/doc/progressbar/IndeterminateDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>For progresses with no value to track, set the <i>mode</i> property to <i>indeterminate</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ProgressBar from '@/volt/progressbar';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+    </div>
+</template>
+
+<script setup>
+import ProgressBar from '@/volt/progressbar';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/progressbar/TemplateDoc.vue b/apps/volt/doc/progressbar/TemplateDoc.vue
new file mode 100644
index 000000000..eb0717ddc
--- /dev/null
+++ b/apps/volt/doc/progressbar/TemplateDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content inside the ProgressBar is defined with the <i>default</i> slot.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="progress"> {{ progress }}/100 </ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import ProgressBar from '@/volt/progressbar';
+import { ref } from 'vue';
+
+const progress = ref(40);
+
+const code = ref(`
+<template>
+    <div class="card">
+        <ProgressBar :value="progress"> {{ progress }}/100 </ProgressBar>
+    </div>
+</template>
+
+<script setup>
+import ProgressBar from '@/volt/progressbar';
+
+const progress = ref(40);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/pages/progressbar/index.vue b/apps/volt/pages/progressbar/index.vue
new file mode 100644
index 000000000..a2c7bffda
--- /dev/null
+++ b/apps/volt/pages/progressbar/index.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/progressbar/BasicDoc.vue';
+import DynamicDoc from '@/doc/progressbar/DynamicDoc.vue';
+import ImportDoc from '@/doc/progressbar/ImportDoc.vue';
+import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc.vue';
+import TemplateDoc from '@/doc/progressbar/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'indeterminate',
+                    label: 'Indeterminate',
+                    component: IndeterminateDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/volt/tailwind.config.js b/apps/volt/tailwind.config.js
index bd0cca4cc..149825ba5 100644
--- a/apps/volt/tailwind.config.js
+++ b/apps/volt/tailwind.config.js
@@ -30,6 +30,8 @@ export default {
             addVariant('p-readonly', '&[data-p~="readonly"]');
             addVariant('p-removable', '&[data-p~="removable"]');
             addVariant('p-circle', '&[data-p~="circle"]');
+            addVariant('p-determinate', '&[data-p~="determinate"]');
+            addVariant('p-indeterminate', '&[data-p~="indeterminate"]');
         })
     ],
     theme: {
diff --git a/apps/volt/volt/progressbar/index.vue b/apps/volt/volt/progressbar/index.vue
new file mode 100644
index 000000000..fa3dabae8
--- /dev/null
+++ b/apps/volt/volt/progressbar/index.vue
@@ -0,0 +1,65 @@
+<template>
+    <ProgressBar
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </ProgressBar>
+</template>
+
+<script setup>
+import ProgressBar from 'primevue/progressbar';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md`,
+    value: `m-0 bg-primary
+        p-determinate:h-full p-determinate:w-0 p-determinate:absolute p-determinate:flex p-determinate:items-center p-determinate:justify-center 
+        p-determinate:overflow-hidden p-determinate:transition-[width] p-determinate:duration-1000 p-determinate:ease-in-out
+        p-indeterminate:before:content-[''] p-indeterminate:before:absolute p-indeterminate:before:bg-inherit p-indeterminate:before:top-0 p-indeterminate:before:start-0 p-indeterminate:before:bottom-0 p-indeterminate:before:will-change-[inset-inline-start,inset-inline-end]
+        p-indeterminate:before:animate-[p-progressbar-indeterminate-anim_2.1s_cubic-bezier(0.65,0.815,0.735,0.395)_infinite]
+        p-indeterminate:after:content-[''] p-indeterminate:after:absolute p-indeterminate:after:bg-inherit p-indeterminate:after:top-0 p-indeterminate:after:start-0 p-indeterminate:after:bottom-0 p-indeterminate:after:will-change-[inset-inline-start,inset-inline-end]
+        p-indeterminate:after:animate-[p-progressbar-indeterminate-anim-short_2.1s_cubic-bezier(0.165,0.84,0.44,1)_infinite]
+        p-indeterminate:after:animate-delay-[1.15s]`,
+    label: `text-primary-contrast text-xs font-semibold
+        p-determinate:inline-flex`
+});
+</script>
+
+<style>
+@keyframes p-progressbar-indeterminate-anim {
+    0% {
+        inset-inline-start: -35%;
+        inset-inline-end: 100%;
+    }
+    60% {
+        inset-inline-start: 100%;
+        inset-inline-end: -90%;
+    }
+    100% {
+        inset-inline-start: 100%;
+        inset-inline-end: -90%;
+    }
+}
+
+@keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        inset-inline-start: -200%;
+        inset-inline-end: 100%;
+    }
+    60% {
+        inset-inline-start: 107%;
+        inset-inline-end: -8%;
+    }
+    100% {
+        inset-inline-start: 107%;
+        inset-inline-end: -8%;
+    }
+}
+</style>
diff --git a/packages/primevue/src/progressbar/ProgressBar.vue b/packages/primevue/src/progressbar/ProgressBar.vue
index 71a9a45b4..b0e3b330e 100755
--- a/packages/primevue/src/progressbar/ProgressBar.vue
+++ b/packages/primevue/src/progressbar/ProgressBar.vue
@@ -1,15 +1,16 @@
 <template>
-    <div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptmi('root')">
-        <div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')">
-            <div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="ptm('label')">
+    <div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptmi('root')" :data-p="dataP">
+        <div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')" :data-p="dataP">
+            <div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="ptm('label')" :data-p="dataP">
                 <slot>{{ value + '%' }}</slot>
             </div>
         </div>
-        <div v-else-if="indeterminate" :class="cx('value')" v-bind="ptm('value')"></div>
+        <div v-else-if="indeterminate" :class="cx('value')" v-bind="ptm('value')" :data-p="dataP"></div>
     </div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseProgressBar from './BaseProgressBar.vue';
 
 export default {
@@ -28,6 +29,12 @@ export default {
         },
         determinate() {
             return this.mode === 'determinate';
+        },
+        dataP() {
+            return cn({
+                determinate: this.determinate,
+                indeterminate: this.indeterminate
+            });
         }
     }
 };

From cfa3242d7d043cd43862b298b05efd4446e82a52 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 23:38:34 +0300
Subject: [PATCH 61/77] Fixed outline

---
 apps/volt/volt/checkbox/index.vue    | 5 +++--
 apps/volt/volt/radiobutton/index.vue | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/volt/volt/checkbox/index.vue b/apps/volt/volt/checkbox/index.vue
index 9273deccf..54169adc2 100644
--- a/apps/volt/volt/checkbox/index.vue
+++ b/apps/volt/volt/checkbox/index.vue
@@ -17,7 +17,8 @@ const theme = ref({
     root: `relative inline-flex select-none w-5 h-5 align-bottom
         p-small:w-4 p-small:h-4
         p-large:w-6 p-large:h-6`,
-    input: `peer cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
+    input: `peer cursor-pointer disabled:cursor-default appearance-none 
+        absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
         border border-transparent rounded-sm`,
     box: `flex justify-center items-center rounded-sm w-5 h-5
         border border-surface-300 dark:border-surface-700
@@ -26,7 +27,7 @@ const theme = ref({
         peer-enabled:peer-hover:border-surface-400 dark:peer-enabled:peer-hover:border-surface-600
         p-checked:border-primary p-checked:bg-primary p-checked:text-primary-contrast
         peer-enabled:peer-hover:p-checked:bg-primary-emphasis peer-enabled:peer-hover:p-checked:border-primary-emphasis
-        peer-focus-visible:outline peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary
+        peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary peer-focus-visible:outline 
         p-invalid:border-red-400 dark:p-invalid:border-red-300
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         p-disabled:bg-surface-200 dark:p-disabled:bg-surface-400 p-disabled:border-surface-300 dark:p-disabled:border-surface-700 p-disabled:text-surface-700 dark:p-disabled:text-surface-400
diff --git a/apps/volt/volt/radiobutton/index.vue b/apps/volt/volt/radiobutton/index.vue
index 6b025ea33..09502308b 100644
--- a/apps/volt/volt/radiobutton/index.vue
+++ b/apps/volt/volt/radiobutton/index.vue
@@ -25,7 +25,7 @@ const theme = ref({
         peer-enabled:peer-hover:border-surface-400 dark:peer-enabled:peer-hover:border-surface-600
         p-checked:border-primary p-checked:bg-primary
         peer-enabled:peer-hover:p-checked:bg-primary-emphasis peer-enabled:peer-hover:p-checked:border-primary-emphasis
-        peer-focus-visible:outline peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary
+        peer-focus-visible:outline-1 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary peer-focus-visible:outline 
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         p-invalid:border-red-400 dark:p-invalid:border-red-300
         p-disabled:bg-surface-200 dark:p-disabled:bg-surface-400 p-disabled:border-surface-300 dark:p-disabled:border-surface-700

From 501a43a2bb3be2e22cf27e654229198451cdc0ab Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Mar 2025 09:55:10 +0300
Subject: [PATCH 62/77] Update AutoComplete form doc

---
 apps/showcase/doc/autocomplete/FormsDoc.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/showcase/doc/autocomplete/FormsDoc.vue b/apps/showcase/doc/autocomplete/FormsDoc.vue
index 9307eb5cf..61166bebf 100644
--- a/apps/showcase/doc/autocomplete/FormsDoc.vue
+++ b/apps/showcase/doc/autocomplete/FormsDoc.vue
@@ -5,8 +5,8 @@
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+                <AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
+                <Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -41,8 +41,8 @@ export default {
                 basic: `
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
     <div class="flex flex-col gap-1">
-        <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-        <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+        <AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+        <Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -52,8 +52,8 @@ export default {
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+                <AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+                <Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -116,8 +116,8 @@ export default {
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+                <AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+                <Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>

From 11681f14cfc46f083220866b68eb63c1db8933af Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Mar 2025 09:59:59 +0300
Subject: [PATCH 63/77] Fixed #6788

---
 packages/primevue/src/autocomplete/AutoComplete.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/primevue/src/autocomplete/AutoComplete.vue b/packages/primevue/src/autocomplete/AutoComplete.vue
index 0b6a512bf..20ee3d69d 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.vue
+++ b/packages/primevue/src/autocomplete/AutoComplete.vue
@@ -702,8 +702,6 @@ export default {
                     this.hide();
                 }
             }
-
-            event.preventDefault();
         },
         onEscapeKey(event) {
             this.overlayVisible && this.hide(true);

From c0441ef4ea8d345fbe430bc55d766d92109e072b Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Mar 2025 10:04:33 +0300
Subject: [PATCH 64/77] Button type definition updates

---
 packages/primevue/src/button/Button.d.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/primevue/src/button/Button.d.ts b/packages/primevue/src/button/Button.d.ts
index 1993f91b4..29e378b81 100755
--- a/packages/primevue/src/button/Button.d.ts
+++ b/packages/primevue/src/button/Button.d.ts
@@ -103,7 +103,7 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * Position of the icon.
      * @defaultValue left
      */
-    iconPos?: 'left' | 'right' | 'top' | 'bottom' | undefined;
+    iconPos?: HintedString<'left' | 'right' | 'top' | 'bottom'> | undefined;
     /**
      * Style class of the icon.
      */
@@ -171,12 +171,12 @@ export interface ButtonProps extends ButtonHTMLAttributes {
     /**
      * Defines the size of the button.
      */
-    size?: 'small' | 'large' | undefined;
+    size?: HintedString<'small' | 'large'> | undefined;
     /**
      * Specifies the variant of the component.
      * @defaultValue undefined
      */
-    variant?: 'outlined' | 'text' | 'link' | undefined;
+    variant?: HintedString<'outlined' | 'text' | 'link'> | undefined;
     /**
      * Add a plain textual class to the button without a background initially.
      * @defaultValue false

From d55109551c0f8bf72e9029db4dcc1f6ad101a3c8 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 4 Mar 2025 07:05:22 +0000
Subject: [PATCH 65/77] Update API doc

---
 apps/showcase/doc/common/apidoc/index.json    |   8 +-
 .../components/doc/codeeditor/templates.js    |   8 +-
 apps/volt/tsconfig.json                       |   4 +-
 packages/nuxt-module/README.md                |  11 +-
 .../playground/server/tsconfig.json           |   2 +-
 packages/nuxt-module/playground/tsconfig.json |   2 +-
 packages/nuxt-module/test/basic.test.ts       |  24 +-
 .../test/fixtures/basic/nuxt.config.ts        |   8 +-
 .../test/fixtures/basic/package.json          |   6 +-
 pnpm-lock.yaml                                | 480 +++++++++---------
 10 files changed, 261 insertions(+), 292 deletions(-)

diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index 02e752ee7..f548c771f 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -8247,7 +8247,7 @@
                             "name": "iconPos",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"left\" | \"right\" | \"top\" | \"bottom\"",
+                            "type": "HintedString<\"left\" | \"right\" | \"top\" | \"bottom\">",
                             "default": "left",
                             "description": "Position of the icon."
                         },
@@ -8367,7 +8367,7 @@
                             "name": "size",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"small\" | \"large\"",
+                            "type": "HintedString<\"small\" | \"large\">",
                             "default": "",
                             "description": "Defines the size of the button."
                         },
@@ -8375,7 +8375,7 @@
                             "name": "variant",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"outlined\" | \"text\" | \"link\"",
+                            "type": "HintedString<\"outlined\" | \"text\" | \"link\">",
                             "default": "undefined",
                             "description": "Specifies the variant of the component."
                         },
@@ -80007,4 +80007,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/apps/volt/components/doc/codeeditor/templates.js b/apps/volt/components/doc/codeeditor/templates.js
index 1e7cb08e3..555622091 100644
--- a/apps/volt/components/doc/codeeditor/templates.js
+++ b/apps/volt/components/doc/codeeditor/templates.js
@@ -51,10 +51,10 @@ const getVueApp = (props = {}, sourceType) => {
         ? embedded
             ? extFiles['composition']
             : extFiles[sourceType.language]
-            ? { ...extFiles[sourceType.language] }
-            : Object.keys(extFiles)
-                  .filter((k) => !sourceTypes.includes(k))
-                  .reduce((result, current) => (result[current] = extFiles[current]) && result, {})
+              ? { ...extFiles[sourceType.language] }
+              : Object.keys(extFiles)
+                    .filter((k) => !sourceTypes.includes(k))
+                    .reduce((result, current) => (result[current] = extFiles[current]) && result, {})
         : {};
 
     if (deps !== null && component !== null) {
diff --git a/apps/volt/tsconfig.json b/apps/volt/tsconfig.json
index a746f2a70..76e2dd550 100644
--- a/apps/volt/tsconfig.json
+++ b/apps/volt/tsconfig.json
@@ -1,4 +1,4 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+    // https://nuxt.com/docs/guide/concepts/typescript
+    "extends": "./.nuxt/tsconfig.json"
 }
diff --git a/packages/nuxt-module/README.md b/packages/nuxt-module/README.md
index b168aa115..ad9271086 100644
--- a/packages/nuxt-module/README.md
+++ b/packages/nuxt-module/README.md
@@ -17,12 +17,13 @@ Find and replace all on all files (CMD+SHIFT+F):
 My new Nuxt module for doing amazing things.
 
 - [✨ &nbsp;Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+    <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+    <!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
 ## Features
 
 <!-- Highlight some of the features your module provide here -->
+
 - ⛰ &nbsp;Foo
 - 🚠 &nbsp;Bar
 - 🌲 &nbsp;Baz
@@ -37,7 +38,6 @@ npx nuxi module add my-module
 
 That's it! You can now use My Module in your Nuxt app ✨
 
-
 ## Contribution
 
 <details>
@@ -69,16 +69,13 @@ That's it! You can now use My Module in your Nuxt app ✨
 
 </details>
 
-
 <!-- Badges -->
+
 [npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
 [npm-version-href]: https://npmjs.com/package/my-module
-
 [npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
 [npm-downloads-href]: https://npm.chart.dev/my-module
-
 [license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
 [license-href]: https://npmjs.com/package/my-module
-
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
 [nuxt-href]: https://nuxt.com
diff --git a/packages/nuxt-module/playground/server/tsconfig.json b/packages/nuxt-module/playground/server/tsconfig.json
index b9ed69c19..deaaf79bf 100644
--- a/packages/nuxt-module/playground/server/tsconfig.json
+++ b/packages/nuxt-module/playground/server/tsconfig.json
@@ -1,3 +1,3 @@
 {
-  "extends": "../.nuxt/tsconfig.server.json"
+    "extends": "../.nuxt/tsconfig.server.json"
 }
diff --git a/packages/nuxt-module/playground/tsconfig.json b/packages/nuxt-module/playground/tsconfig.json
index 4b34df157..0d9b5cbd9 100644
--- a/packages/nuxt-module/playground/tsconfig.json
+++ b/packages/nuxt-module/playground/tsconfig.json
@@ -1,3 +1,3 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+    "extends": "./.nuxt/tsconfig.json"
 }
diff --git a/packages/nuxt-module/test/basic.test.ts b/packages/nuxt-module/test/basic.test.ts
index 5167cad11..f97a83fc7 100644
--- a/packages/nuxt-module/test/basic.test.ts
+++ b/packages/nuxt-module/test/basic.test.ts
@@ -1,15 +1,15 @@
-import { fileURLToPath } from 'node:url'
-import { describe, it, expect } from 'vitest'
-import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import { fileURLToPath } from 'node:url';
+import { describe, it, expect } from 'vitest';
+import { setup, $fetch } from '@nuxt/test-utils/e2e';
 
 describe('ssr', async () => {
-  await setup({
-    rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
-  })
+    await setup({
+        rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url))
+    });
 
-  it('renders the index page', async () => {
-    // Get response to a server-rendered page with `$fetch`.
-    const html = await $fetch('/')
-    expect(html).toContain('<div>basic</div>')
-  })
-})
+    it('renders the index page', async () => {
+        // Get response to a server-rendered page with `$fetch`.
+        const html = await $fetch('/');
+        expect(html).toContain('<div>basic</div>');
+    });
+});
diff --git a/packages/nuxt-module/test/fixtures/basic/nuxt.config.ts b/packages/nuxt-module/test/fixtures/basic/nuxt.config.ts
index ed0c53f1a..b35f4bbfe 100644
--- a/packages/nuxt-module/test/fixtures/basic/nuxt.config.ts
+++ b/packages/nuxt-module/test/fixtures/basic/nuxt.config.ts
@@ -1,7 +1,5 @@
-import MyModule from '../../../src/module'
+import MyModule from '../../../src/module';
 
 export default defineNuxtConfig({
-  modules: [
-    MyModule,
-  ],
-})
+    modules: [MyModule]
+});
diff --git a/packages/nuxt-module/test/fixtures/basic/package.json b/packages/nuxt-module/test/fixtures/basic/package.json
index decd43340..4a63509f5 100644
--- a/packages/nuxt-module/test/fixtures/basic/package.json
+++ b/packages/nuxt-module/test/fixtures/basic/package.json
@@ -1,5 +1,5 @@
 {
-  "private": true,
-  "name": "basic",
-  "type": "module"
+    "private": true,
+    "name": "basic",
+    "type": "module"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d72faa348..fdecaf2ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,7 +77,7 @@ importers:
         version: 10.0.2(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: ^5.2.3
-        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3)
+        version: 5.2.3(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3)
       eslint-plugin-vue:
         specifier: ^9.32.0
         version: 9.32.0(eslint@9.21.0(jiti@2.4.2))
@@ -153,7 +153,7 @@ importers:
         version: 19.0.0
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       postcss:
         specifier: ^8.4.31
         version: 8.5.3
@@ -174,7 +174,7 @@ importers:
         version: 0.23.23(typescript@5.7.3)
       vite:
         specifier: catalog:app
-        version: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+        version: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   apps/volt:
     dependencies:
@@ -229,7 +229,7 @@ importers:
         version: 19.0.0
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       postcss:
         specifier: ^8.4.31
         version: 8.5.3
@@ -253,7 +253,7 @@ importers:
         version: 0.27.9(typescript@5.7.3)
       vite:
         specifier: catalog:app
-        version: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+        version: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   packages/auto-import-resolver:
     dependencies:
@@ -266,7 +266,7 @@ importers:
         version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
       unplugin-vue-components:
         specifier: ^0.27.0
-        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3))
+        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4)(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3))
     publishDirectory: dist
 
   packages/core:
@@ -341,7 +341,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^2.1.0
-        version: 2.1.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        version: 2.1.3(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/eslint-config':
         specifier: ^1.1.0
         version: 1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
@@ -353,22 +353,22 @@ importers:
         version: 3.15.4
       '@nuxt/test-utils':
         specifier: ^3
-        version: 3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+        version: 3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       '@primeuix/themes':
         specifier: 'catalog:'
         version: 1.0.0
       '@types/node':
         specifier: latest
-        version: 22.13.8
+        version: 22.13.9
       changelogen:
         specifier: ^0.6.0
-        version: 0.6.0(magicast@0.3.5)
+        version: 0.6.1(magicast@0.3.5)
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       vitest:
         specifier: ^3.0.7
-        version: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
+        version: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
       vue-tsc:
         specifier: ~2.1.6
         version: 2.1.10(typescript@5.7.3)
@@ -1774,8 +1774,8 @@ packages:
     peerDependencies:
       vite: '*'
 
-  '@nuxt/devtools-kit@2.1.1':
-    resolution: {integrity: sha512-N3+qI41d4vdwZ8LdpxppWQ5GS3oDtRp7yTbW91osj7helkPLdLvsXUNVI2pJ2OZG0zdY8UNE1TbJe3DbgZL7wQ==}
+  '@nuxt/devtools-kit@2.1.3':
+    resolution: {integrity: sha512-OlLo8LZTp71Wi9q0ooE1bYeS5P7P1sU3JUb+zqJRX6/jMQa2QP06hc6TOz/5AIsEOq8YPQTum4oJ9gpHx53B0g==}
     peerDependencies:
       vite: '>=6.0'
 
@@ -1783,8 +1783,8 @@ packages:
     resolution: {integrity: sha512-86Gd92uEw0Dh2ErIYT9TMIrMOISE96fCRN4rxeryTvyiowQOsyrbkCeMNYrEehoRL+lohoyK6iDmFajadPNwWQ==}
     hasBin: true
 
-  '@nuxt/devtools-wizard@2.1.1':
-    resolution: {integrity: sha512-jdKmnDJVKCRyRl+MTArSJynRrqThnvIBQqtVoMLsKHX36TMi5IfJ8MmO/NRyqubd2J+g++j7zoixk1BCJWfNEQ==}
+  '@nuxt/devtools-wizard@2.1.3':
+    resolution: {integrity: sha512-J+EjL/4E2oLnNyw7Ar2qj/VDa9PeWIqNchZ6kQR+wAQTbWMHX/qbxEPz6Yuflj08ltIwouU6uocixTJQJjfmqQ==}
     hasBin: true
 
   '@nuxt/devtools@1.7.0':
@@ -1793,8 +1793,8 @@ packages:
     peerDependencies:
       vite: '*'
 
-  '@nuxt/devtools@2.1.1':
-    resolution: {integrity: sha512-jR3QChDs1mcCgC9efNAgjqgPUTWizV5TkUKBLK/1bDHIEGzkQ5WQwJ+PnjrDd4hj3QxL7pUvPCPLW9y3io/Q6w==}
+  '@nuxt/devtools@2.1.3':
+    resolution: {integrity: sha512-LBOSFh1UEjyp0vz2e9BEW5TfrsiuSOm5AAllcl/FFs7fYU/v4sZDcqrE+GGiwTQF14n9/4dsHQ5zBbNGr1pJvA==}
     hasBin: true
     peerDependencies:
       vite: '>=6.0'
@@ -2005,8 +2005,8 @@ packages:
   '@redocly/config@0.21.0':
     resolution: {integrity: sha512-JBtrrjBIURTnzb7KUIWOF46vSgpfC3rO6Mm8LjtRjtTNCLTyB+mOuU7HrTkVcvUCEBuSuzkivlTHMWT4JETz9A==}
 
-  '@redocly/openapi-core@1.31.3':
-    resolution: {integrity: sha512-SyE/1TwM33tgldc3k367sg2i1kqnILOJZo6J96Y/Tt1PHhJp+na637CzCuTgdyY86GTPvNw42834Ks0Lkfk3Hg==}
+  '@redocly/openapi-core@1.32.1':
+    resolution: {integrity: sha512-nZvPWneybAWen2rhFksvhpA1VYIsr2bIrpJU4z20SQeH8BKUzPRiO+EtCodRqQQe/NIvf/tD85POtLRJ9PjaiA==}
     engines: {node: '>=18.17.0', npm: '>=9.5.0'}
 
   '@rollup/plugin-alias@5.1.1':
@@ -2271,8 +2271,8 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/node@22.13.8':
-    resolution: {integrity: sha512-G3EfaZS+iOGYWLLRCEAXdWK9my08oHNZ+FHluRiggIYJPOXzhOiDgpVCUHaUvyIC5/fj7C/p637jdzC666AOKQ==}
+  '@types/node@22.13.9':
+    resolution: {integrity: sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -2286,51 +2286,51 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@typescript-eslint/eslint-plugin@8.25.0':
-    resolution: {integrity: sha512-VM7bpzAe7JO/BFf40pIT1lJqS/z1F8OaSsUB3rpFJucQA4cOSuH2RVVVkFULN+En0Djgr29/jb4EQnedUo95KA==}
+  '@typescript-eslint/eslint-plugin@8.26.0':
+    resolution: {integrity: sha512-cLr1J6pe56zjKYajK6SSSre6nl1Gj6xDp1TY0trpgPzjVbgDwd09v2Ws37LABxzkicmUjhEeg/fAUjPJJB1v5Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.8.0'
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/parser@8.25.0':
-    resolution: {integrity: sha512-4gbs64bnbSzu4FpgMiQ1A+D+urxkoJk/kqlDJ2W//5SygaEiAP2B4GoS7TEdxgwol2el03gckFV9lJ4QOMiiHg==}
+  '@typescript-eslint/parser@8.26.0':
+    resolution: {integrity: sha512-mNtXP9LTVBy14ZF3o7JG69gRPBK/2QWtQd0j0oH26HcY/foyJJau6pNUez7QrM5UHnSvwlQcJXKsk0I99B9pOA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.8.0'
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/scope-manager@8.25.0':
-    resolution: {integrity: sha512-6PPeiKIGbgStEyt4NNXa2ru5pMzQ8OYKO1hX1z53HMomrmiSB+R5FmChgQAP1ro8jMtNawz+TRQo/cSXrauTpg==}
+  '@typescript-eslint/scope-manager@8.26.0':
+    resolution: {integrity: sha512-E0ntLvsfPqnPwng8b8y4OGuzh/iIOm2z8U3S9zic2TeMLW61u5IH2Q1wu0oSTkfrSzwbDJIB/Lm8O3//8BWMPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@8.25.0':
-    resolution: {integrity: sha512-d77dHgHWnxmXOPJuDWO4FDWADmGQkN5+tt6SFRZz/RtCWl4pHgFl3+WdYCn16+3teG09DY6XtEpf3gGD0a186g==}
+  '@typescript-eslint/type-utils@8.26.0':
+    resolution: {integrity: sha512-ruk0RNChLKz3zKGn2LwXuVoeBcUMh+jaqzN461uMMdxy5H9epZqIBtYj7UiPXRuOpaALXGbmRuZQhmwHhaS04Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.8.0'
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/types@8.25.0':
-    resolution: {integrity: sha512-+vUe0Zb4tkNgznQwicsvLUJgZIRs6ITeWSCclX1q85pR1iOiaj+4uZJIUp//Z27QWu5Cseiw3O3AR8hVpax7Aw==}
+  '@typescript-eslint/types@8.26.0':
+    resolution: {integrity: sha512-89B1eP3tnpr9A8L6PZlSjBvnJhWXtYfZhECqlBl1D9Lme9mHO6iWlsprBtVenQvY1HMhax1mWOjhtL3fh/u+pA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.25.0':
-    resolution: {integrity: sha512-ZPaiAKEZ6Blt/TPAx5Ot0EIB/yGtLI2EsGoY6F7XKklfMxYQyvtL+gT/UCqkMzO0BVFHLDlzvFqQzurYahxv9Q==}
+  '@typescript-eslint/typescript-estree@8.26.0':
+    resolution: {integrity: sha512-tiJ1Hvy/V/oMVRTbEOIeemA2XoylimlDQ03CgPPNaHYZbpsc78Hmngnt+WXZfJX1pjQ711V7g0H7cSJThGYfPQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <5.8.0'
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/utils@8.25.0':
-    resolution: {integrity: sha512-syqRbrEv0J1wywiLsK60XzHnQe/kRViI3zwFALrNEgnntn1l24Ra2KvOAWwWbWZ1lBZxZljPDGOq967dsl6fkA==}
+  '@typescript-eslint/utils@8.26.0':
+    resolution: {integrity: sha512-2L2tU3FVwhvU14LndnQCA2frYC8JnPDVKyQtWFPf8IYFMt/ykEN1bPolNhNbCVgOmdzTlWdusCTKA/9nKrf8Ig==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.8.0'
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/visitor-keys@8.25.0':
-    resolution: {integrity: sha512-kCYXKAum9CecGVHGij7muybDfTS2sD3t0L4bJsEZLkyrXUImiCTq1M3LG2SRtOhiHFwMR9wAFplpT6XHYjTkwQ==}
+  '@typescript-eslint/visitor-keys@8.26.0':
+    resolution: {integrity: sha512-2z8JQJWAzPdDd51dRQ/oqIJxe99/hoLIqmf8RMCAJQtYDc535W/Jt2+RTP4bP0aKeBG1F65yjIZuczOXCmbWwg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@unhead/dom@1.11.20':
@@ -2838,14 +2838,6 @@ packages:
       magicast:
         optional: true
 
-  c12@3.0.1:
-    resolution: {integrity: sha512-xuYi2qvu3ne8+5KchFjNLeK/j7Antw/18JCJyMI7lPoBeZ2aF1wK6rILCBkCoD+H2zG2SfjlanfLUNQ6v1bbNQ==}
-    peerDependencies:
-      magicast: ^0.3.5
-    peerDependenciesMeta:
-      magicast:
-        optional: true
-
   c12@3.0.2:
     resolution: {integrity: sha512-6Tzk1/TNeI3WBPpK0j/Ss4+gPj3PUJYbWl/MWDJBThFvwNGNkXtd7Cz8BJtD4aRwoGHtzQD0SnxamgUiBH0/Nw==}
     peerDependencies:
@@ -2873,8 +2865,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001701:
-    resolution: {integrity: sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==}
+  caniuse-lite@1.0.30001702:
+    resolution: {integrity: sha512-LoPe/D7zioC0REI5W73PeR1e1MLCipRGq/VkovJnd6Df+QVqT+vT33OXCp8QUd7kA7RZrHWxb1B36OQKI/0gOA==}
 
   chai@4.5.0:
     resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
@@ -2895,8 +2887,8 @@ packages:
   change-case@5.4.4:
     resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
 
-  changelogen@0.6.0:
-    resolution: {integrity: sha512-bw9NbPIpPxZbjbIxvXqs39qKwPIV3VsFbRdXPCphWsEp84mBCAEszBj67AqBXN719zPs/x5ABFFRoLoANMJSeQ==}
+  changelogen@0.6.1:
+    resolution: {integrity: sha512-rTw2bZgiEHMgyYzWFMH+qTMFOSpCf4qwmd8LyxLDUKCtL4T/7O7978tPPtKYpjiFbPoHG64y4ugdF0Mt/l+lQg==}
     hasBin: true
 
   chart.js@3.3.2:
@@ -3019,6 +3011,9 @@ packages:
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
+  confbox@0.2.1:
+    resolution: {integrity: sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==}
+
   config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
@@ -3364,8 +3359,8 @@ packages:
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  electron-to-chromium@1.5.109:
-    resolution: {integrity: sha512-AidaH9JETVRr9DIPGfp1kAarm/W6hRJTPuCnkF+2MqhF4KaAgRIcBc8nvjk+YMXZhwfISof/7WG29eS4iGxQLQ==}
+  electron-to-chromium@1.5.112:
+    resolution: {integrity: sha512-oen93kVyqSb3l+ziUgzIOlWt/oOuy4zRmpwestMn4rhFWAoFJeFuCVte9F2fASjeZZo7l/Cif9TiyrdW4CwEMA==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3646,9 +3641,6 @@ packages:
     resolution: {integrity: sha512-80F22aiJ3GLyVnS/B3HzgR6RelZVumzj9jkL0Rhz4h0xYbNW9PjlQz5h3J/SShErbXBc295vseR4/MIbVmUbeA==}
     engines: {node: '>=12.0.0'}
 
-  exsolve@0.4.4:
-    resolution: {integrity: sha512-74RiT9i1G0eyFyE9n5f6mdX8+AicZFnhJ0CHB9VrkIl3Sy8vmW49ODbpwevdLswST7fhp3jvfPzD4DArTfjnsA==}
-
   exsolve@1.0.1:
     resolution: {integrity: sha512-Smf0iQtkQVJLaph8r/qS8C8SWfQkaq9Q/dFcD44MLbJj6DNhlWefVuaS21SjfqOsBbjVlKtbCj6L9ekXK6EZUg==}
 
@@ -4712,8 +4704,8 @@ packages:
   ohash@1.1.5:
     resolution: {integrity: sha512-AtXrG/lMFjPBWj3uhWYFwYVZQqutPYRsv6nnPLTipnC+gJuMFc+WFzf/jx+94Ebray1vxfQfEFDtpIpppOe4xQ==}
 
-  ohash@2.0.9:
-    resolution: {integrity: sha512-ljz2sybhXrRpBW9LleuJPP9uxbMKW8qxFz9lLOHW2QEel78rJ1sUgaX2cBNDt49w+JleNSkhYkVOCx6RgkKn0Q==}
+  ohash@2.0.10:
+    resolution: {integrity: sha512-jf9szh2McTXpXGqejbfHxy4wcs6CXc6MShfzLIdHuCrl2W3qG49qutlOMq1Bdmvpv3s/XJffTu4ElRBPtIOncQ==}
 
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
@@ -4890,8 +4882,8 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  pkg-types@2.0.1:
-    resolution: {integrity: sha512-LdDk/hlFeVBoEZqlkJ2bsxwq5fjKQg7i422zu78IC16CSR2XBe7kYxxBx0mkU8kLX6nh50Zp80lZHveKnsHTpQ==}
+  pkg-types@2.1.0:
+    resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
 
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
@@ -8142,10 +8134,10 @@ snapshots:
       listhen: 1.9.0
       nypm: 0.6.0
       ofetch: 1.4.1
-      ohash: 2.0.9
+      ohash: 2.0.10
       pathe: 2.0.3
       perfect-debounce: 1.0.0
-      pkg-types: 2.0.1
+      pkg-types: 2.1.0
       scule: 1.3.0
       semver: 7.7.1
       std-env: 3.8.1
@@ -8156,32 +8148,32 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 7.2.0
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 7.2.0
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/devtools-kit@2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@2.1.3(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 9.5.2
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
@@ -8199,24 +8191,24 @@ snapshots:
       rc9: 2.1.2
       semver: 7.7.1
 
-  '@nuxt/devtools-wizard@2.1.1':
+  '@nuxt/devtools-wizard@2.1.3':
     dependencies:
       consola: 3.4.0
       diff: 7.0.0
       execa: 9.5.2
       magicast: 0.3.5
       pathe: 2.0.3
-      pkg-types: 2.0.1
+      pkg-types: 2.1.0
       prompts: 2.4.2
       semver: 7.7.1
 
-  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
@@ -8245,9 +8237,9 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.10
       unimport: 3.14.6(rollup@3.29.5)
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       which: 3.0.1
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8257,13 +8249,13 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/devtools@1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
@@ -8292,9 +8284,9 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.10
       unimport: 3.14.6(rollup@4.34.9)
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       which: 3.0.1
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8304,12 +8296,12 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/devtools@2.1.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@2.1.3(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      '@nuxt/devtools-kit': 2.1.1(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      '@nuxt/devtools-wizard': 2.1.1
+      '@nuxt/devtools-kit': 2.1.3(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-wizard': 2.1.3
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.7.2
       birpc: 2.2.0
       consola: 3.4.0
@@ -8325,18 +8317,18 @@ snapshots:
       local-pkg: 1.1.1
       magicast: 0.3.5
       nypm: 0.6.0
-      ohash: 2.0.9
+      ohash: 2.0.10
       pathe: 2.0.3
       perfect-debounce: 1.0.0
-      pkg-types: 2.0.1
+      pkg-types: 2.1.0
       semver: 7.7.1
       simple-git: 3.27.0
       sirv: 3.0.1
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.12
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       which: 5.0.0
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8352,8 +8344,8 @@ snapshots:
       '@eslint/js': 9.21.0
       '@nuxt/eslint-plugin': 1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       '@stylistic/eslint-plugin': 4.2.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/eslint-plugin': 8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 8.26.0(@typescript-eslint/parser@8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
       eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@2.4.2))
       eslint-flat-config-utils: 2.0.1
@@ -8375,8 +8367,8 @@ snapshots:
 
   '@nuxt/eslint-plugin@1.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/types': 8.26.0
+      '@typescript-eslint/utils': 8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
     transitivePeerDependencies:
       - supports-color
@@ -8453,7 +8445,7 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/test-utils@3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
+  '@nuxt/test-utils@3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
@@ -8478,12 +8470,12 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vitest-environment-nuxt: 1.0.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
       '@vue/test-utils': 2.4.6
-      vitest: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
+      vitest: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -8500,12 +8492,12 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@3.29.5)
-      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       autoprefixer: 10.4.20(postcss@8.5.3)
       consola: 3.4.0
       cssnano: 7.0.6(postcss@8.5.3)
@@ -8529,9 +8521,9 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
       vue: 3.5.13(typescript@5.7.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
@@ -8559,12 +8551,12 @@ snapshots:
       - vue-tsc
       - yaml
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@4.34.9)
-      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       autoprefixer: 10.4.20(postcss@8.5.3)
       consola: 3.4.0
       cssnano: 7.0.6(postcss@8.5.3)
@@ -8588,9 +8580,9 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
       vue: 3.5.13(typescript@5.7.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
@@ -8721,7 +8713,7 @@ snapshots:
 
   '@redocly/config@0.21.0': {}
 
-  '@redocly/openapi-core@1.31.3(supports-color@9.4.0)':
+  '@redocly/openapi-core@1.32.1(supports-color@9.4.0)':
     dependencies:
       '@redocly/ajv': 8.11.2
       '@redocly/config': 0.21.0
@@ -8940,7 +8932,7 @@ snapshots:
 
   '@stylistic/eslint-plugin@4.2.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
       eslint-visitor-keys: 4.2.0
       espree: 10.3.0
@@ -8980,11 +8972,11 @@ snapshots:
 
   '@types/http-proxy@1.17.16':
     dependencies:
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/node@22.13.8':
+  '@types/node@22.13.9':
     dependencies:
       undici-types: 6.20.0
 
@@ -8996,14 +8988,14 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
-  '@typescript-eslint/eslint-plugin@8.25.0(@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/eslint-plugin@8.26.0(@typescript-eslint/parser@8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/scope-manager': 8.25.0
-      '@typescript-eslint/type-utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 8.25.0
+      '@typescript-eslint/parser': 8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.26.0
+      '@typescript-eslint/type-utils': 8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 8.26.0
       eslint: 9.21.0(jiti@2.4.2)
       graphemer: 1.4.0
       ignore: 5.3.2
@@ -9013,27 +9005,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/parser@8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.25.0
-      '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 8.25.0
+      '@typescript-eslint/scope-manager': 8.26.0
+      '@typescript-eslint/types': 8.26.0
+      '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 8.26.0
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.21.0(jiti@2.4.2)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.25.0':
+  '@typescript-eslint/scope-manager@8.26.0':
     dependencies:
-      '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/visitor-keys': 8.25.0
+      '@typescript-eslint/types': 8.26.0
+      '@typescript-eslint/visitor-keys': 8.26.0
 
-  '@typescript-eslint/type-utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/type-utils@8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.21.0(jiti@2.4.2)
       ts-api-utils: 2.0.1(typescript@5.7.3)
@@ -9041,12 +9033,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.25.0': {}
+  '@typescript-eslint/types@8.26.0': {}
 
-  '@typescript-eslint/typescript-estree@8.25.0(typescript@5.7.3)':
+  '@typescript-eslint/typescript-estree@8.26.0(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/visitor-keys': 8.25.0
+      '@typescript-eslint/types': 8.26.0
+      '@typescript-eslint/visitor-keys': 8.26.0
       debug: 4.4.0(supports-color@9.4.0)
       fast-glob: 3.3.3
       is-glob: 4.0.3
@@ -9057,20 +9049,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/utils@8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 8.25.0
-      '@typescript-eslint/types': 8.25.0
-      '@typescript-eslint/typescript-estree': 8.25.0(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.26.0
+      '@typescript-eslint/types': 8.26.0
+      '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.7.3)
       eslint: 9.21.0(jiti@2.4.2)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.25.0':
+  '@typescript-eslint/visitor-keys@8.26.0':
     dependencies:
-      '@typescript-eslint/types': 8.25.0
+      '@typescript-eslint/types': 8.26.0
       eslint-visitor-keys: 4.2.0
 
   '@unhead/dom@1.11.20':
@@ -9120,19 +9112,19 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
 
   '@vitest/expect@0.29.8':
@@ -9148,13 +9140,13 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@vitest/spy': 3.0.7
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   '@vitest/pretty-format@3.0.7':
     dependencies:
@@ -9288,38 +9280,38 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.6.8
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 1.1.2
-      vite-hot-client: 0.2.4(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vite-hot-client: 0.2.4(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.6.8
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 1.1.2
-      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.2
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 2.0.3
-      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
@@ -9632,7 +9624,7 @@ snapshots:
   autoprefixer@10.4.20(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.4
-      caniuse-lite: 1.0.30001701
+      caniuse-lite: 1.0.30001702
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -9703,8 +9695,8 @@ snapshots:
 
   browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001701
-      electron-to-chromium: 1.5.109
+      caniuse-lite: 1.0.30001702
+      electron-to-chromium: 1.5.112
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
@@ -9754,7 +9746,7 @@ snapshots:
       giget: 1.2.5
       jiti: 2.4.2
       mlly: 1.7.4
-      ohash: 2.0.9
+      ohash: 2.0.10
       pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
@@ -9762,23 +9754,6 @@ snapshots:
     optionalDependencies:
       magicast: 0.3.5
 
-  c12@3.0.1(magicast@0.3.5):
-    dependencies:
-      chokidar: 4.0.3
-      confbox: 0.1.8
-      defu: 6.1.4
-      dotenv: 16.4.7
-      exsolve: 0.4.4
-      giget: 2.0.0
-      jiti: 2.4.2
-      ohash: 2.0.9
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      pkg-types: 2.0.1
-      rc9: 2.1.2
-    optionalDependencies:
-      magicast: 0.3.5
-
   c12@3.0.2(magicast@0.3.5):
     dependencies:
       chokidar: 4.0.3
@@ -9788,10 +9763,10 @@ snapshots:
       exsolve: 1.0.1
       giget: 2.0.0
       jiti: 2.4.2
-      ohash: 2.0.9
+      ohash: 2.0.10
       pathe: 2.0.3
       perfect-debounce: 1.0.0
-      pkg-types: 2.0.1
+      pkg-types: 2.1.0
       rc9: 2.1.2
     optionalDependencies:
       magicast: 0.3.5
@@ -9810,11 +9785,11 @@ snapshots:
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.24.4
-      caniuse-lite: 1.0.30001701
+      caniuse-lite: 1.0.30001702
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001701: {}
+  caniuse-lite@1.0.30001702: {}
 
   chai@4.5.0:
     dependencies:
@@ -9843,10 +9818,10 @@ snapshots:
 
   change-case@5.4.4: {}
 
-  changelogen@0.6.0(magicast@0.3.5):
+  changelogen@0.6.1(magicast@0.3.5):
     dependencies:
-      c12: 3.0.1(magicast@0.3.5)
-      confbox: 0.1.8
+      c12: 3.0.2(magicast@0.3.5)
+      confbox: 0.2.1
       consola: 3.4.0
       convert-gitmoji: 0.1.5
       mri: 1.2.0
@@ -9854,7 +9829,7 @@ snapshots:
       ofetch: 1.4.1
       open: 10.1.0
       pathe: 2.0.3
-      pkg-types: 2.0.1
+      pkg-types: 2.1.0
       scule: 1.3.0
       semver: 7.7.1
       std-env: 3.8.1
@@ -9972,6 +9947,8 @@ snapshots:
 
   confbox@0.1.8: {}
 
+  confbox@0.2.1: {}
+
   config-chain@1.1.13:
     dependencies:
       ini: 1.3.8
@@ -10309,7 +10286,7 @@ snapshots:
 
   ee-first@1.1.1: {}
 
-  electron-to-chromium@1.5.109: {}
+  electron-to-chromium@1.5.112: {}
 
   emoji-regex@8.0.0: {}
 
@@ -10506,8 +10483,8 @@ snapshots:
   eslint-plugin-import-x@4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3):
     dependencies:
       '@types/doctrine': 0.0.9
-      '@typescript-eslint/scope-manager': 8.25.0
-      '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.26.0
+      '@typescript-eslint/utils': 8.26.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
       debug: 4.4.0(supports-color@9.4.0)
       doctrine: 3.0.0
       enhanced-resolve: 5.18.1
@@ -10540,14 +10517,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3):
+  eslint-plugin-prettier@5.2.3(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3):
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
       prettier: 3.5.3
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
-      '@types/eslint': 9.6.1
       eslint-config-prettier: 10.0.2(eslint@9.21.0(jiti@2.4.2))
 
   eslint-plugin-regexp@2.7.0(eslint@9.21.0(jiti@2.4.2)):
@@ -10747,8 +10723,6 @@ snapshots:
 
   expect-type@1.2.0: {}
 
-  exsolve@0.4.4: {}
-
   exsolve@1.0.1: {}
 
   externality@1.0.2:
@@ -11266,7 +11240,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -11441,7 +11415,7 @@ snapshots:
   local-pkg@1.1.1:
     dependencies:
       mlly: 1.7.4
-      pkg-types: 2.0.1
+      pkg-types: 2.1.0
       quansync: 0.2.8
 
   locate-path@6.0.0:
@@ -11803,15 +11777,15 @@ snapshots:
 
   nuxi@3.22.4: {}
 
-  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
     dependencies:
       '@nuxt/cli': 3.22.4(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
       '@unhead/dom': 1.11.20
       '@unhead/shared': 1.11.20
       '@unhead/ssr': 1.11.20
@@ -11871,7 +11845,7 @@ snapshots:
       vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -11925,15 +11899,15 @@ snapshots:
       - xml2js
       - yaml
 
-  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.8)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
     dependencies:
       '@nuxt/cli': 3.22.4(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/devtools': 1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.8)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
       '@unhead/dom': 1.11.20
       '@unhead/shared': 1.11.20
       '@unhead/ssr': 1.11.20
@@ -11993,7 +11967,7 @@ snapshots:
       vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -12072,7 +12046,7 @@ snapshots:
       citty: 0.1.6
       consola: 3.4.0
       pathe: 2.0.3
-      pkg-types: 2.0.1
+      pkg-types: 2.1.0
       tinyexec: 0.3.2
 
   object-assign@4.1.1: {}
@@ -12087,7 +12061,7 @@ snapshots:
 
   ohash@1.1.5: {}
 
-  ohash@2.0.9: {}
+  ohash@2.0.10: {}
 
   on-finished@2.4.1:
     dependencies:
@@ -12116,7 +12090,7 @@ snapshots:
 
   openapi-typescript@7.6.1(typescript@5.7.3):
     dependencies:
-      '@redocly/openapi-core': 1.31.3(supports-color@9.4.0)
+      '@redocly/openapi-core': 1.32.1(supports-color@9.4.0)
       ansi-colors: 4.1.3
       change-case: 5.4.4
       parse-json: 8.1.0
@@ -12250,9 +12224,9 @@ snapshots:
       mlly: 1.7.4
       pathe: 2.0.3
 
-  pkg-types@2.0.1:
+  pkg-types@2.1.0:
     dependencies:
-      confbox: 0.1.8
+      confbox: 0.2.1
       exsolve: 1.0.1
       pathe: 2.0.3
 
@@ -13629,7 +13603,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4)(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
@@ -13799,32 +13773,32 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  vite-dev-rpc@1.0.7(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-dev-rpc@1.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       birpc: 2.2.0
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-hot-client: 2.0.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-hot-client: 2.0.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
 
-  vite-hot-client@0.2.4(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@0.2.4(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-hot-client@0.2.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-hot-client@2.0.4(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@2.0.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-node@0.29.8(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0):
+  vite-node@0.29.8(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
       mlly: 1.7.4
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 4.5.9(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0)
+      vite: 4.5.9(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -13835,13 +13809,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite-node@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
       es-module-lexer: 1.6.0
       pathe: 2.0.3
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -13856,7 +13830,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3)):
+  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3)):
     dependencies:
       '@babel/code-frame': 7.26.2
       ansi-escapes: 4.3.2
@@ -13868,7 +13842,7 @@ snapshots:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.12
@@ -13879,7 +13853,7 @@ snapshots:
       typescript: 5.7.3
       vue-tsc: 2.1.10(typescript@5.7.3)
 
-  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
@@ -13890,14 +13864,14 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.1
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
@@ -13908,31 +13882,31 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.1
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       ansis: 3.17.0
       debug: 4.4.0(supports-color@9.4.0)
       error-stack-parser-es: 1.0.5
-      ohash: 2.0.9
+      ohash: 2.0.10
       open: 10.1.0
       perfect-debounce: 1.0.0
       sirv: 3.0.1
       unplugin-utils: 0.2.4
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-dev-rpc: 1.0.7(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-dev-rpc: 1.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-inspector@5.3.1(vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@@ -13943,11 +13917,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.17
-      vite: 6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-inspector@5.3.1(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@@ -13958,50 +13932,50 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.17
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@4.5.9(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0):
+  vite@4.5.9(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       esbuild: 0.18.20
       postcss: 8.5.3
       rollup: 3.29.5
     optionalDependencies:
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
       fsevents: 2.3.3
       sass: 1.45.0
       terser: 5.39.0
 
-  vite@6.0.11(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.24.2
       postcss: 8.5.3
       rollup: 4.34.9
     optionalDependencies:
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
       fsevents: 2.3.3
       jiti: 2.4.2
       sass: 1.45.0
       terser: 5.39.0
       yaml: 2.7.0
 
-  vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.0
       postcss: 8.5.3
       rollup: 4.34.9
     optionalDependencies:
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
       fsevents: 2.3.3
       jiti: 2.4.2
       sass: 1.45.0
       terser: 5.39.0
       yaml: 2.7.0
 
-  vitest-environment-nuxt@1.0.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
+  vitest-environment-nuxt@1.0.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
     dependencies:
-      '@nuxt/test-utils': 3.17.1(@types/node@22.13.8)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      '@nuxt/test-utils': 3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -14032,7 +14006,7 @@ snapshots:
     dependencies:
       '@types/chai': 4.3.20
       '@types/chai-subset': 1.3.5
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
       '@vitest/expect': 0.29.8
       '@vitest/runner': 0.29.8
       '@vitest/spy': 0.29.8
@@ -14051,8 +14025,8 @@ snapshots:
       tinybench: 2.9.0
       tinypool: 0.4.0
       tinyspy: 1.1.1
-      vite: 4.5.9(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0)
-      vite-node: 0.29.8(@types/node@22.13.8)(sass@1.45.0)(terser@5.39.0)
+      vite: 4.5.9(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0)
+      vite-node: 0.29.8(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       jsdom: 19.0.0
@@ -14065,10 +14039,10 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@3.0.7(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
+  vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       '@vitest/expect': 3.0.7
-      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
       '@vitest/pretty-format': 3.0.7
       '@vitest/runner': 3.0.7
       '@vitest/snapshot': 3.0.7
@@ -14084,11 +14058,11 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.8)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.13.8
+      '@types/node': 22.13.9
     transitivePeerDependencies:
       - jiti
       - less

From b7cee9f59ff14c85d94404416e90b772edd678f9 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 10:12:51 +0300
Subject: [PATCH 66/77] Implemented Card for Volt, migrated some of the pages
 to composition

---
 apps/volt/assets/data/menu.json        |   4 +
 apps/volt/doc/card/AdvancedDoc.vue     |  61 +++++++++++++
 apps/volt/doc/card/BasicDoc.vue        |  39 ++++++++
 apps/volt/doc/card/ImportDoc.vue       |  15 +++
 apps/volt/pages/avatar/index.vue       |  61 ++++++-------
 apps/volt/pages/card/index.vue         |  28 ++++++
 apps/volt/pages/checkbox/index.vue     | 101 ++++++++++-----------
 apps/volt/pages/chip/index.vue         |  61 ++++++-------
 apps/volt/pages/icons/index.vue        |  61 ++++++-------
 apps/volt/pages/inputnumber/index.vue  | 121 ++++++++++++-------------
 apps/volt/pages/introduction/index.vue |  61 ++++++-------
 apps/volt/pages/nuxt/index.vue         | 113 +++++++++++------------
 apps/volt/pages/progressbar/index.vue  |  61 ++++++-------
 apps/volt/pages/radiobutton/index.vue  |  81 ++++++++---------
 apps/volt/pages/rating/index.vue       |  71 +++++++--------
 apps/volt/pages/selectbutton/index.vue |  81 ++++++++---------
 apps/volt/pages/skeleton/index.vue     |  51 +++++------
 apps/volt/pages/timeline/index.vue     |  69 +++++++-------
 apps/volt/pages/togglebutton/index.vue |  71 +++++++--------
 apps/volt/pages/vite/index.vue         | 111 +++++++++++------------
 apps/volt/volt/button/index.vue        |  23 +++++
 apps/volt/volt/card/index.vue          |  33 +++++++
 22 files changed, 753 insertions(+), 625 deletions(-)
 create mode 100644 apps/volt/doc/card/AdvancedDoc.vue
 create mode 100644 apps/volt/doc/card/BasicDoc.vue
 create mode 100644 apps/volt/doc/card/ImportDoc.vue
 create mode 100644 apps/volt/pages/card/index.vue
 create mode 100644 apps/volt/volt/button/index.vue
 create mode 100644 apps/volt/volt/card/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index a1bdc5803..ae9a53645 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -26,6 +26,10 @@
                     "name": "Avatar",
                     "to": "/avatar"
                 },
+                {
+                    "name": "Card",
+                    "to": "/card"
+                },
                 {
                     "name": "Checkbox",
                     "to": "/checkbox"
diff --git a/apps/volt/doc/card/AdvancedDoc.vue b/apps/volt/doc/card/AdvancedDoc.vue
new file mode 100644
index 000000000..67666c1b1
--- /dev/null
+++ b/apps/volt/doc/card/AdvancedDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
+    </DocSectionText>
+    <div class="mb-4 p-8 flex items-center justify-center">
+        <Card style="width: 25rem; overflow: hidden">
+            <template #header>
+                <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
+            </template>
+            <template #title>Advanced Card</template>
+            <template #subtitle>Card subtitle</template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+            <template #footer>
+                <div class="flex gap-4 mt-1">
+                    <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                    <Button label="Save" class="w-full" />
+                </div>
+            </template>
+        </Card>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import Card from '@/volt/card';
+
+const code = ref(`
+<template>
+    <Card style="width: 25rem; overflow: hidden">
+        <template #header>
+            <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
+        </template>
+        <template #title>Advanced Card</template>
+        <template #subtitle>Card subtitle</template>
+        <template #content>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                quas!
+            </p>
+        </template>
+        <template #footer>
+            <div class="flex gap-4 mt-1">
+                <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                <Button label="Save" class="w-full" />
+            </div>
+        </template>
+    </Card>
+</template>
+
+<script setup>
+import Card from '@/volt/card';
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/card/BasicDoc.vue b/apps/volt/doc/card/BasicDoc.vue
new file mode 100644
index 000000000..dc3942d5a
--- /dev/null
+++ b/apps/volt/doc/card/BasicDoc.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
+    </DocSectionText>
+    <div class="mb-4 p-8">
+        <Card>
+            <template #title>Simple Card</template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+        </Card>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Card from '@/volt/card';
+
+const code = ref(`
+<template>
+    <Card>
+        <template #title>Simple Card</template>
+        <template #content>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                quas!
+            </p>
+        </template>
+    </Card>
+</template>
+
+<script setup>
+import Card from '@/volt/card';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/card/ImportDoc.vue b/apps/volt/doc/card/ImportDoc.vue
new file mode 100644
index 000000000..870d3cdd7
--- /dev/null
+++ b/apps/volt/doc/card/ImportDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import Card from '@/volt/card';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/volt/pages/avatar/index.vue b/apps/volt/pages/avatar/index.vue
index c1f1b65f1..6d0ecec31 100644
--- a/apps/volt/pages/avatar/index.vue
+++ b/apps/volt/pages/avatar/index.vue
@@ -2,44 +2,39 @@
     <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
 import IconDoc from '@/doc/avatar/IconDoc.vue';
 import ImageDoc from '@/doc/avatar/ImageDoc.vue';
 import ImportDoc from '@/doc/avatar/ImportDoc.vue';
 import LabelDoc from '@/doc/avatar/LabelDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'label',
-                    label: 'Label',
-                    component: LabelDoc
-                },
-                {
-                    id: 'icon',
-                    label: 'Icon',
-                    component: IconDoc
-                },
-                {
-                    id: 'image',
-                    label: 'Image',
-                    component: ImageDoc
-                },
-                {
-                    id: 'avatargroup',
-                    label: 'AvatarGroup',
-                    component: AvatarGroupDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'label',
+        label: 'Label',
+        component: LabelDoc
+    },
+    {
+        id: 'icon',
+        label: 'Icon',
+        component: IconDoc
+    },
+    {
+        id: 'image',
+        label: 'Image',
+        component: ImageDoc
+    },
+    {
+        id: 'avatargroup',
+        label: 'AvatarGroup',
+        component: AvatarGroupDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/card/index.vue b/apps/volt/pages/card/index.vue
new file mode 100644
index 000000000..7177c23c8
--- /dev/null
+++ b/apps/volt/pages/card/index.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" />
+</template>
+
+<script setup>
+import AdvancedDoc from '@/doc/card/AdvancedDoc.vue';
+import BasicDoc from '@/doc/card/BasicDoc.vue';
+import ImportDoc from '@/doc/card/ImportDoc.vue';
+import { ref } from 'vue';
+
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'advanced',
+        label: 'Advanced',
+        component: AdvancedDoc
+    }
+]);
+</script>
diff --git a/apps/volt/pages/checkbox/index.vue b/apps/volt/pages/checkbox/index.vue
index d5ce02e8f..4cf074246 100644
--- a/apps/volt/pages/checkbox/index.vue
+++ b/apps/volt/pages/checkbox/index.vue
@@ -2,7 +2,7 @@
     <DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import BasicDoc from '@/doc/checkbox/BasicDoc.vue';
 import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue';
 import DynamicDoc from '@/doc/checkbox/DynamicDoc.vue';
@@ -12,58 +12,53 @@ import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
 import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
 import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
 import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'indeterminate',
-                    label: 'Indeterminate',
-                    component: IndeterminateDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'group',
+        label: 'Group',
+        component: GroupDoc
+    },
+    {
+        id: 'dynamic',
+        label: 'Dynamic',
+        component: DynamicDoc
+    },
+    {
+        id: 'indeterminate',
+        label: 'Indeterminate',
+        component: IndeterminateDoc
+    },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/chip/index.vue b/apps/volt/pages/chip/index.vue
index 008930231..ff18830e2 100644
--- a/apps/volt/pages/chip/index.vue
+++ b/apps/volt/pages/chip/index.vue
@@ -2,44 +2,39 @@
     <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import BasicDoc from '@/doc/chip/BasicDoc.vue';
 import IconDoc from '@/doc/chip/IconDoc.vue';
 import ImageDoc from '@/doc/chip/ImageDoc.vue';
 import ImportDoc from '@/doc/chip/ImportDoc.vue';
 import TemplateDoc from '@/doc/chip/TemplateDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'icon',
-                    label: 'Icon',
-                    component: IconDoc
-                },
-                {
-                    id: 'image',
-                    label: 'Image',
-                    component: ImageDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'icon',
+        label: 'Icon',
+        component: IconDoc
+    },
+    {
+        id: 'image',
+        label: 'Image',
+        component: ImageDoc
+    },
+    {
+        id: 'template',
+        label: 'Template',
+        component: TemplateDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/icons/index.vue b/apps/volt/pages/icons/index.vue
index e27888828..5c0774b63 100644
--- a/apps/volt/pages/icons/index.vue
+++ b/apps/volt/pages/icons/index.vue
@@ -18,44 +18,39 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
 import ImageDoc from '@/doc/icons/ImageDoc.vue';
 import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
 import SVGDoc from '@/doc/icons/SVGDoc.vue';
 import VideoDoc from '@/doc/icons/VideoDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'material',
-                    label: 'Material',
-                    component: MaterialDoc
-                },
-                {
-                    id: 'fontawesome',
-                    label: 'FontAwesome',
-                    component: FontAwesomeDoc
-                },
-                {
-                    id: 'svg',
-                    label: 'SVG',
-                    component: SVGDoc
-                },
-                {
-                    id: 'image',
-                    label: 'Image',
-                    component: ImageDoc
-                },
-                {
-                    id: 'video',
-                    label: 'Video Tutorial',
-                    component: VideoDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'material',
+        label: 'Material',
+        component: MaterialDoc
+    },
+    {
+        id: 'fontawesome',
+        label: 'FontAwesome',
+        component: FontAwesomeDoc
+    },
+    {
+        id: 'svg',
+        label: 'SVG',
+        component: SVGDoc
+    },
+    {
+        id: 'image',
+        label: 'Image',
+        component: ImageDoc
+    },
+    {
+        id: 'video',
+        label: 'Video Tutorial',
+        component: VideoDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/inputnumber/index.vue b/apps/volt/pages/inputnumber/index.vue
index 9f0515cd0..893eddbe8 100644
--- a/apps/volt/pages/inputnumber/index.vue
+++ b/apps/volt/pages/inputnumber/index.vue
@@ -2,7 +2,7 @@
     <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
 import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
 import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
@@ -14,68 +14,63 @@ import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
 import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
 import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
 import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'numerals',
-                    label: 'Numerals',
-                    component: NumeralsDoc
-                },
-                {
-                    id: 'locale',
-                    label: 'Locale',
-                    component: LocaleDoc
-                },
-                {
-                    id: 'currency',
-                    label: 'Currency',
-                    component: CurrencyDoc
-                },
-                {
-                    id: 'prefixsuffix',
-                    label: 'Prefix & Suffix',
-                    component: PrefixSuffixDoc
-                },
-                {
-                    id: 'buttons',
-                    label: 'Buttons',
-                    component: ButtonsDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'numerals',
+        label: 'Numerals',
+        component: NumeralsDoc
+    },
+    {
+        id: 'locale',
+        label: 'Locale',
+        component: LocaleDoc
+    },
+    {
+        id: 'currency',
+        label: 'Currency',
+        component: CurrencyDoc
+    },
+    {
+        id: 'prefixsuffix',
+        label: 'Prefix & Suffix',
+        component: PrefixSuffixDoc
+    },
+    {
+        id: 'buttons',
+        label: 'Buttons',
+        component: ButtonsDoc
+    },
+    {
+        id: 'vertical',
+        label: 'Vertical',
+        component: VerticalDoc
+    },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/introduction/index.vue b/apps/volt/pages/introduction/index.vue
index 2ae225441..ffd902b29 100644
--- a/apps/volt/pages/introduction/index.vue
+++ b/apps/volt/pages/introduction/index.vue
@@ -18,44 +18,39 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
 import ImageDoc from '@/doc/icons/ImageDoc.vue';
 import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
 import SVGDoc from '@/doc/icons/SVGDoc.vue';
 import VideoDoc from '@/doc/icons/VideoDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'material',
-                    label: 'Material',
-                    component: MaterialDoc
-                },
-                {
-                    id: 'fontawesome',
-                    label: 'FontAwesome',
-                    component: FontAwesomeDoc
-                },
-                {
-                    id: 'svg',
-                    label: 'SVG',
-                    component: SVGDoc
-                },
-                {
-                    id: 'image',
-                    label: 'Image',
-                    component: ImageDoc
-                },
-                {
-                    id: 'video',
-                    label: 'Video Tutorial',
-                    component: VideoDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'material',
+        label: 'Material',
+        component: MaterialDoc
+    },
+    {
+        id: 'fontawesome',
+        label: 'FontAwesome',
+        component: FontAwesomeDoc
+    },
+    {
+        id: 'svg',
+        label: 'SVG',
+        component: SVGDoc
+    },
+    {
+        id: 'image',
+        label: 'Image',
+        component: ImageDoc
+    },
+    {
+        id: 'video',
+        label: 'Video Tutorial',
+        component: VideoDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/nuxt/index.vue b/apps/volt/pages/nuxt/index.vue
index 48098dcee..96f1509ec 100644
--- a/apps/volt/pages/nuxt/index.vue
+++ b/apps/volt/pages/nuxt/index.vue
@@ -15,7 +15,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import CSSVariablesDoc from '@/doc/nuxt/CSSVariablesDoc.vue';
 import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
 import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
@@ -25,64 +25,59 @@ import TailwindDoc from '@/doc/nuxt/TailwindDoc.vue';
 import ImportStylesDoc from '@/doc/nuxt/tailwind/ImportStylesDoc.vue';
 import PostCSSImportDoc from '@/doc/nuxt/tailwind/PostCSSImportDoc.vue';
 import PrimeUIPluginDoc from '@/doc/nuxt/tailwind/PrimeUIPluginDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'tailwind',
-                    label: 'Tailwind CSS',
-                    component: TailwindDoc
-                },
-                {
-                    id: 'download',
-                    label: 'Download',
-                    component: DownloadDoc
-                },
-                {
-                    id: 'nuxtconfig',
-                    label: 'Nuxt Config',
-                    component: NuxtConfigDoc
-                },
-                {
-                    id: 'styles',
-                    label: 'Styles',
-                    component: StylesDoc
-                },
-                {
-                    id: 'tailwind-config',
-                    label: 'Tailwind Config',
-                    children: [
-                        {
-                            id: 'primeuiplugin',
-                            label: 'PrimeUI Plugin',
-                            component: PrimeUIPluginDoc
-                        },
-                        {
-                            id: 'postcssimport',
-                            label: 'PostCSS Import',
-                            component: PostCSSImportDoc
-                        },
-                        {
-                            id: 'importstyles',
-                            label: 'Import Styles',
-                            component: ImportStylesDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'css-variables',
-                    label: 'CSS Variables',
-                    component: CSSVariablesDoc
-                },
-                {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'tailwind',
+        label: 'Tailwind CSS',
+        component: TailwindDoc
+    },
+    {
+        id: 'download',
+        label: 'Download',
+        component: DownloadDoc
+    },
+    {
+        id: 'nuxtconfig',
+        label: 'Nuxt Config',
+        component: NuxtConfigDoc
+    },
+    {
+        id: 'styles',
+        label: 'Styles',
+        component: StylesDoc
+    },
+    {
+        id: 'tailwind-config',
+        label: 'Tailwind Config',
+        children: [
+            {
+                id: 'primeuiplugin',
+                label: 'PrimeUI Plugin',
+                component: PrimeUIPluginDoc
+            },
+            {
+                id: 'postcssimport',
+                label: 'PostCSS Import',
+                component: PostCSSImportDoc
+            },
+            {
+                id: 'importstyles',
+                label: 'Import Styles',
+                component: ImportStylesDoc
+            }
+        ]
+    },
+    {
+        id: 'css-variables',
+        label: 'CSS Variables',
+        component: CSSVariablesDoc
+    },
+    {
+        id: 'example',
+        label: 'Example',
+        component: ExampleDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/progressbar/index.vue b/apps/volt/pages/progressbar/index.vue
index a2c7bffda..684ea708d 100644
--- a/apps/volt/pages/progressbar/index.vue
+++ b/apps/volt/pages/progressbar/index.vue
@@ -2,44 +2,39 @@
     <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import BasicDoc from '@/doc/progressbar/BasicDoc.vue';
 import DynamicDoc from '@/doc/progressbar/DynamicDoc.vue';
 import ImportDoc from '@/doc/progressbar/ImportDoc.vue';
 import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc.vue';
 import TemplateDoc from '@/doc/progressbar/TemplateDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'indeterminate',
-                    label: 'Indeterminate',
-                    component: IndeterminateDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'dynamic',
+        label: 'Dynamic',
+        component: DynamicDoc
+    },
+    {
+        id: 'template',
+        label: 'Template',
+        component: TemplateDoc
+    },
+    {
+        id: 'indeterminate',
+        label: 'Indeterminate',
+        component: IndeterminateDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/radiobutton/index.vue b/apps/volt/pages/radiobutton/index.vue
index 474df9c5c..cf04e8acf 100644
--- a/apps/volt/pages/radiobutton/index.vue
+++ b/apps/volt/pages/radiobutton/index.vue
@@ -2,7 +2,7 @@
     <DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
 import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
 import FilledDoc from '@/doc/radiobutton/FilledDoc.vue';
@@ -10,48 +10,43 @@ import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
 import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
 import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
 import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'group',
-                    label: 'Group',
-                    component: GroupDoc
-                },
-                {
-                    id: 'dynamic',
-                    label: 'Dynamic',
-                    component: DynamicDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'group',
+        label: 'Group',
+        component: GroupDoc
+    },
+    {
+        id: 'dynamic',
+        label: 'Dynamic',
+        component: DynamicDoc
+    },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/rating/index.vue b/apps/volt/pages/rating/index.vue
index e85b6ec66..fe540472f 100644
--- a/apps/volt/pages/rating/index.vue
+++ b/apps/volt/pages/rating/index.vue
@@ -2,50 +2,45 @@
     <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import BasicDoc from '@/doc/rating/BasicDoc.vue';
 import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
 import ImportDoc from '@/doc/rating/ImportDoc.vue';
 import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
 import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
 import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'numberofstars',
-                    label: 'Number of Stars',
-                    component: NumberOfStarsDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'readonly',
-                    label: 'ReadOnly',
-                    component: ReadOnlyDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'numberofstars',
+        label: 'Number of Stars',
+        component: NumberOfStarsDoc
+    },
+    {
+        id: 'template',
+        label: 'Template',
+        component: TemplateDoc
+    },
+    {
+        id: 'readonly',
+        label: 'ReadOnly',
+        component: ReadOnlyDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/selectbutton/index.vue b/apps/volt/pages/selectbutton/index.vue
index 4decbb6d5..bc9241224 100644
--- a/apps/volt/pages/selectbutton/index.vue
+++ b/apps/volt/pages/selectbutton/index.vue
@@ -2,7 +2,7 @@
     <DocComponent title="Vue SelectButton Component" header="SelectButton" description="SelectButton is used to choose single or multiple items from a list using buttons." :componentDocs="docs" :apiDocs="['SelectButton']" />
 </template>
 
-<script>
+<script setup>
 import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
 import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
 import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
@@ -10,48 +10,43 @@ import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
 import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
 import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
 import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'multiple',
+        label: 'Multiple',
+        component: MultipleDoc
+    },
+    {
+        id: 'template',
+        label: 'Template',
+        component: TemplateDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/skeleton/index.vue b/apps/volt/pages/skeleton/index.vue
index 8bd0f2839..26cbb4b5e 100644
--- a/apps/volt/pages/skeleton/index.vue
+++ b/apps/volt/pages/skeleton/index.vue
@@ -2,38 +2,33 @@
     <DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import CardDoc from '@/doc/skeleton/CardDoc.vue';
 import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
 import ListDoc from '@/doc/skeleton/ListDoc.vue';
 import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'shapes',
-                    label: 'Shapes',
-                    component: ShapesDoc
-                },
-                {
-                    id: 'card',
-                    label: 'Card',
-                    component: CardDoc
-                },
-                {
-                    id: 'list',
-                    label: 'List',
-                    component: ListDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'shapes',
+        label: 'Shapes',
+        component: ShapesDoc
+    },
+    {
+        id: 'card',
+        label: 'Card',
+        component: CardDoc
+    },
+    {
+        id: 'list',
+        label: 'List',
+        component: ListDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/timeline/index.vue b/apps/volt/pages/timeline/index.vue
index 84922d187..34ae8ef5f 100644
--- a/apps/volt/pages/timeline/index.vue
+++ b/apps/volt/pages/timeline/index.vue
@@ -9,43 +9,38 @@ import HorizontalDoc from '@/doc/timeline/HorizontalDoc.vue';
 import ImportDoc from '@/doc/timeline/ImportDoc.vue';
 import OppositeDoc from '@/doc/timeline/OppositeDoc.vue';
 import TemplateDoc from '@/doc/timeline/TemplateDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'alignment',
-                    label: 'Alignment',
-                    component: AlignmentDoc
-                },
-                {
-                    id: 'opposite',
-                    label: 'Opposite',
-                    component: OppositeDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'horizontal',
-                    label: 'Horizontal',
-                    component: HorizontalDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'alignment',
+        label: 'Alignment',
+        component: AlignmentDoc
+    },
+    {
+        id: 'opposite',
+        label: 'Opposite',
+        component: OppositeDoc
+    },
+    {
+        id: 'template',
+        label: 'Template',
+        component: TemplateDoc
+    },
+    {
+        id: 'horizontal',
+        label: 'Horizontal',
+        component: HorizontalDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/togglebutton/index.vue b/apps/volt/pages/togglebutton/index.vue
index 614f2a7ad..6732cd716 100644
--- a/apps/volt/pages/togglebutton/index.vue
+++ b/apps/volt/pages/togglebutton/index.vue
@@ -2,50 +2,45 @@
     <DocComponent title="Vue ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." :componentDocs="docs" />
 </template>
 
-<script>
+<script setup>
 import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
 import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
 import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
 import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
 import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
 import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'customized',
-                    label: 'Customized',
-                    component: CustomizedDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'customized',
+        label: 'Customized',
+        component: CustomizedDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/pages/vite/index.vue b/apps/volt/pages/vite/index.vue
index f0c96a402..0f611a065 100644
--- a/apps/volt/pages/vite/index.vue
+++ b/apps/volt/pages/vite/index.vue
@@ -25,64 +25,59 @@ import TailwindDoc from '@/doc/vite/TailwindDoc.vue';
 import ImportStylesDoc from '@/doc/vite/tailwind/ImportStylesDoc.vue';
 import PostCSSImportDoc from '@/doc/vite/tailwind/PostCSSImportDoc.vue';
 import PrimeUIPluginDoc from '@/doc/vite/tailwind/PrimeUIPluginDoc.vue';
+import { ref } from 'vue';
 
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'tailwind',
-                    label: 'Tailwind CSS',
-                    component: TailwindDoc
-                },
-                {
-                    id: 'download',
-                    label: 'Download',
-                    component: DownloadDoc
-                },
-                {
-                    id: 'plugin',
-                    label: 'Plugin',
-                    component: PluginDoc
-                },
-                {
-                    id: 'styles',
-                    label: 'Styles',
-                    component: StylesDoc
-                },
-                {
-                    id: 'tailwind-config',
-                    label: 'Tailwind Config',
-                    children: [
-                        {
-                            id: 'primeuiplugin',
-                            label: 'PrimeUI Plugin',
-                            component: PrimeUIPluginDoc
-                        },
-                        {
-                            id: 'postcssimport',
-                            label: 'PostCSS Import',
-                            component: PostCSSImportDoc
-                        },
-                        {
-                            id: 'importstyles',
-                            label: 'Import Styles',
-                            component: ImportStylesDoc
-                        }
-                    ]
-                },
-                {
-                    id: 'css-variables',
-                    label: 'CSS Variables',
-                    component: CSSVariablesDoc
-                },
-                {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
-                }
-            ]
-        };
+const docs = ref([
+    {
+        id: 'tailwind',
+        label: 'Tailwind CSS',
+        component: TailwindDoc
+    },
+    {
+        id: 'download',
+        label: 'Download',
+        component: DownloadDoc
+    },
+    {
+        id: 'plugin',
+        label: 'Plugin',
+        component: PluginDoc
+    },
+    {
+        id: 'styles',
+        label: 'Styles',
+        component: StylesDoc
+    },
+    {
+        id: 'tailwind-config',
+        label: 'Tailwind Config',
+        children: [
+            {
+                id: 'primeuiplugin',
+                label: 'PrimeUI Plugin',
+                component: PrimeUIPluginDoc
+            },
+            {
+                id: 'postcssimport',
+                label: 'PostCSS Import',
+                component: PostCSSImportDoc
+            },
+            {
+                id: 'importstyles',
+                label: 'Import Styles',
+                component: ImportStylesDoc
+            }
+        ]
+    },
+    {
+        id: 'css-variables',
+        label: 'CSS Variables',
+        component: CSSVariablesDoc
+    },
+    {
+        id: 'example',
+        label: 'Example',
+        component: ExampleDoc
     }
-};
+]);
 </script>
diff --git a/apps/volt/volt/button/index.vue b/apps/volt/volt/button/index.vue
new file mode 100644
index 000000000..7c2a40364
--- /dev/null
+++ b/apps/volt/volt/button/index.vue
@@ -0,0 +1,23 @@
+<template>
+    <Button
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Button>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: ``
+});
+</script>
diff --git a/apps/volt/volt/card/index.vue b/apps/volt/volt/card/index.vue
new file mode 100644
index 000000000..660cb7b51
--- /dev/null
+++ b/apps/volt/volt/card/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <Card
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Card>
+</template>
+
+<script setup>
+import Card from 'primevue/card';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `flex flex-col rounded-xl
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-md`,
+    header: ``,
+    body: `p-5 flex flex-col gap-2`,
+    caption: `flex flex-col gap-2`,
+    title: `font-medium text-xl`,
+    subtitle: `text-surface-500 dark:text-surface-400`,
+    content: ``,
+    footer: ``
+});
+</script>

From b9c1d6628ca3ad043a818bec8370ce3d0bce83ea Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 10:32:05 +0300
Subject: [PATCH 67/77] Remove legacy css

---
 .../volt/assets/styles/primevue/accordion.css |  58 ---
 .../assets/styles/primevue/autocomplete.css   | 143 ------
 apps/volt/assets/styles/primevue/avatar.css   |  50 ---
 apps/volt/assets/styles/primevue/badge.css    |  49 ---
 apps/volt/assets/styles/primevue/blockui.css  |  15 -
 .../assets/styles/primevue/breadcrumb.css     |  41 --
 apps/volt/assets/styles/primevue/button.css   | 331 --------------
 .../assets/styles/primevue/buttongroup.css    |  19 -
 apps/volt/assets/styles/primevue/card.css     |  22 -
 apps/volt/assets/styles/primevue/carousel.css |  64 ---
 .../assets/styles/primevue/cascadeselect.css  | 169 --------
 apps/volt/assets/styles/primevue/checkbox.css |  84 ----
 apps/volt/assets/styles/primevue/chip.css     |  27 --
 .../assets/styles/primevue/colorpicker.css    |  47 --
 apps/volt/assets/styles/primevue/common.css   |  81 ----
 .../assets/styles/primevue/confirmdialog.css  |  10 -
 .../assets/styles/primevue/confirmpopup.css   |  66 ---
 .../assets/styles/primevue/contextmenu.css    | 101 -----
 .../volt/assets/styles/primevue/datatable.css | 408 ------------------
 apps/volt/assets/styles/primevue/dataview.css |  29 --
 .../assets/styles/primevue/datepicker.css     | 211 ---------
 apps/volt/assets/styles/primevue/dialog.css   | 125 ------
 apps/volt/assets/styles/primevue/divider.css  |  52 ---
 apps/volt/assets/styles/primevue/dock.css     |  84 ----
 apps/volt/assets/styles/primevue/drawer.css   |  94 ----
 apps/volt/assets/styles/primevue/fieldset.css |  45 --
 .../assets/styles/primevue/fileupload.css     |  57 ---
 .../assets/styles/primevue/floatlabel.css     |  73 ----
 apps/volt/assets/styles/primevue/galleria.css | 244 -----------
 .../volt/assets/styles/primevue/iconfield.css |  23 -
 .../volt/assets/styles/primevue/iftalabel.css |  32 --
 apps/volt/assets/styles/primevue/image.css    |  56 ---
 .../assets/styles/primevue/imagecompare.css   |  38 --
 apps/volt/assets/styles/primevue/inplace.css  |  13 -
 .../assets/styles/primevue/inputgroup.css     |  67 ---
 .../assets/styles/primevue/inputnumber.css    |  84 ----
 apps/volt/assets/styles/primevue/inputotp.css |   9 -
 .../volt/assets/styles/primevue/inputtext.css |  34 --
 apps/volt/assets/styles/primevue/knob.css     |  37 --
 apps/volt/assets/styles/primevue/listbox.css  |  79 ----
 apps/volt/assets/styles/primevue/megamenu.css | 207 ---------
 apps/volt/assets/styles/primevue/menu.css     |  51 ---
 apps/volt/assets/styles/primevue/menubar.css  | 169 --------
 apps/volt/assets/styles/primevue/message.css  | 212 ---------
 .../assets/styles/primevue/metergroup.css     |  67 ---
 .../assets/styles/primevue/multiselect.css    | 143 ------
 .../volt/assets/styles/primevue/orderlist.css |  10 -
 .../styles/primevue/organizationchart.css     |  71 ---
 .../assets/styles/primevue/overlaybadge.css   |  13 -
 .../volt/assets/styles/primevue/paginator.css |  58 ---
 apps/volt/assets/styles/primevue/panel.css    |  27 --
 .../volt/assets/styles/primevue/panelmenu.css |  94 ----
 apps/volt/assets/styles/primevue/password.css |  61 ---
 apps/volt/assets/styles/primevue/picklist.css |  18 -
 apps/volt/assets/styles/primevue/popover.css  |  46 --
 .../assets/styles/primevue/progressbar.css    |  67 ---
 .../styles/primevue/progressspinner.css       |  58 ---
 .../assets/styles/primevue/radiobutton.css    |  93 ----
 apps/volt/assets/styles/primevue/rating.css   |  23 -
 apps/volt/assets/styles/primevue/ripple.css   |   7 -
 .../assets/styles/primevue/scrollpanel.css    |  41 --
 .../volt/assets/styles/primevue/scrolltop.css |  25 --
 apps/volt/assets/styles/primevue/select.css   | 144 -------
 .../assets/styles/primevue/selectbutton.css   |  25 --
 apps/volt/assets/styles/primevue/skeleton.css |  11 -
 apps/volt/assets/styles/primevue/slider.css   |  42 --
 .../volt/assets/styles/primevue/speeddial.css |  48 ---
 .../assets/styles/primevue/splitbutton.css    |  34 --
 apps/volt/assets/styles/primevue/splitter.css |  56 ---
 apps/volt/assets/styles/primevue/stepper.css  | 102 -----
 apps/volt/assets/styles/primevue/tabs.css     |  84 ----
 apps/volt/assets/styles/primevue/tag.css      |  38 --
 apps/volt/assets/styles/primevue/tailwind.css | 104 -----
 apps/volt/assets/styles/primevue/terminal.css |  22 -
 apps/volt/assets/styles/primevue/textarea.css |  38 --
 .../assets/styles/primevue/tieredmenu.css     | 105 -----
 apps/volt/assets/styles/primevue/timeline.css | 113 -----
 apps/volt/assets/styles/primevue/toast.css    | 172 --------
 .../assets/styles/primevue/togglebutton.css   |  63 ---
 .../assets/styles/primevue/toggleswitch.css   |  66 ---
 apps/volt/assets/styles/primevue/toolbar.css  |  12 -
 apps/volt/assets/styles/primevue/tooltip.css  |  38 --
 apps/volt/assets/styles/primevue/tree.css     | 103 -----
 .../assets/styles/primevue/treeselect.css     | 116 -----
 .../volt/assets/styles/primevue/treetable.css | 300 -------------
 apps/volt/assets/styles/tailwind.css          |   7 +-
 86 files changed, 3 insertions(+), 6672 deletions(-)
 delete mode 100644 apps/volt/assets/styles/primevue/accordion.css
 delete mode 100644 apps/volt/assets/styles/primevue/autocomplete.css
 delete mode 100644 apps/volt/assets/styles/primevue/avatar.css
 delete mode 100644 apps/volt/assets/styles/primevue/badge.css
 delete mode 100644 apps/volt/assets/styles/primevue/blockui.css
 delete mode 100644 apps/volt/assets/styles/primevue/breadcrumb.css
 delete mode 100644 apps/volt/assets/styles/primevue/button.css
 delete mode 100644 apps/volt/assets/styles/primevue/buttongroup.css
 delete mode 100644 apps/volt/assets/styles/primevue/card.css
 delete mode 100644 apps/volt/assets/styles/primevue/carousel.css
 delete mode 100644 apps/volt/assets/styles/primevue/cascadeselect.css
 delete mode 100644 apps/volt/assets/styles/primevue/checkbox.css
 delete mode 100644 apps/volt/assets/styles/primevue/chip.css
 delete mode 100644 apps/volt/assets/styles/primevue/colorpicker.css
 delete mode 100644 apps/volt/assets/styles/primevue/common.css
 delete mode 100644 apps/volt/assets/styles/primevue/confirmdialog.css
 delete mode 100644 apps/volt/assets/styles/primevue/confirmpopup.css
 delete mode 100644 apps/volt/assets/styles/primevue/contextmenu.css
 delete mode 100644 apps/volt/assets/styles/primevue/datatable.css
 delete mode 100644 apps/volt/assets/styles/primevue/dataview.css
 delete mode 100644 apps/volt/assets/styles/primevue/datepicker.css
 delete mode 100644 apps/volt/assets/styles/primevue/dialog.css
 delete mode 100644 apps/volt/assets/styles/primevue/divider.css
 delete mode 100644 apps/volt/assets/styles/primevue/dock.css
 delete mode 100644 apps/volt/assets/styles/primevue/drawer.css
 delete mode 100644 apps/volt/assets/styles/primevue/fieldset.css
 delete mode 100644 apps/volt/assets/styles/primevue/fileupload.css
 delete mode 100644 apps/volt/assets/styles/primevue/floatlabel.css
 delete mode 100644 apps/volt/assets/styles/primevue/galleria.css
 delete mode 100644 apps/volt/assets/styles/primevue/iconfield.css
 delete mode 100644 apps/volt/assets/styles/primevue/iftalabel.css
 delete mode 100644 apps/volt/assets/styles/primevue/image.css
 delete mode 100644 apps/volt/assets/styles/primevue/imagecompare.css
 delete mode 100644 apps/volt/assets/styles/primevue/inplace.css
 delete mode 100644 apps/volt/assets/styles/primevue/inputgroup.css
 delete mode 100644 apps/volt/assets/styles/primevue/inputnumber.css
 delete mode 100644 apps/volt/assets/styles/primevue/inputotp.css
 delete mode 100644 apps/volt/assets/styles/primevue/inputtext.css
 delete mode 100644 apps/volt/assets/styles/primevue/knob.css
 delete mode 100644 apps/volt/assets/styles/primevue/listbox.css
 delete mode 100644 apps/volt/assets/styles/primevue/megamenu.css
 delete mode 100644 apps/volt/assets/styles/primevue/menu.css
 delete mode 100644 apps/volt/assets/styles/primevue/menubar.css
 delete mode 100644 apps/volt/assets/styles/primevue/message.css
 delete mode 100644 apps/volt/assets/styles/primevue/metergroup.css
 delete mode 100644 apps/volt/assets/styles/primevue/multiselect.css
 delete mode 100644 apps/volt/assets/styles/primevue/orderlist.css
 delete mode 100644 apps/volt/assets/styles/primevue/organizationchart.css
 delete mode 100644 apps/volt/assets/styles/primevue/overlaybadge.css
 delete mode 100644 apps/volt/assets/styles/primevue/paginator.css
 delete mode 100644 apps/volt/assets/styles/primevue/panel.css
 delete mode 100644 apps/volt/assets/styles/primevue/panelmenu.css
 delete mode 100644 apps/volt/assets/styles/primevue/password.css
 delete mode 100644 apps/volt/assets/styles/primevue/picklist.css
 delete mode 100644 apps/volt/assets/styles/primevue/popover.css
 delete mode 100644 apps/volt/assets/styles/primevue/progressbar.css
 delete mode 100644 apps/volt/assets/styles/primevue/progressspinner.css
 delete mode 100644 apps/volt/assets/styles/primevue/radiobutton.css
 delete mode 100644 apps/volt/assets/styles/primevue/rating.css
 delete mode 100644 apps/volt/assets/styles/primevue/ripple.css
 delete mode 100644 apps/volt/assets/styles/primevue/scrollpanel.css
 delete mode 100644 apps/volt/assets/styles/primevue/scrolltop.css
 delete mode 100644 apps/volt/assets/styles/primevue/select.css
 delete mode 100644 apps/volt/assets/styles/primevue/selectbutton.css
 delete mode 100644 apps/volt/assets/styles/primevue/skeleton.css
 delete mode 100644 apps/volt/assets/styles/primevue/slider.css
 delete mode 100644 apps/volt/assets/styles/primevue/speeddial.css
 delete mode 100644 apps/volt/assets/styles/primevue/splitbutton.css
 delete mode 100644 apps/volt/assets/styles/primevue/splitter.css
 delete mode 100644 apps/volt/assets/styles/primevue/stepper.css
 delete mode 100644 apps/volt/assets/styles/primevue/tabs.css
 delete mode 100644 apps/volt/assets/styles/primevue/tag.css
 delete mode 100644 apps/volt/assets/styles/primevue/tailwind.css
 delete mode 100644 apps/volt/assets/styles/primevue/terminal.css
 delete mode 100644 apps/volt/assets/styles/primevue/textarea.css
 delete mode 100644 apps/volt/assets/styles/primevue/tieredmenu.css
 delete mode 100644 apps/volt/assets/styles/primevue/timeline.css
 delete mode 100644 apps/volt/assets/styles/primevue/toast.css
 delete mode 100644 apps/volt/assets/styles/primevue/togglebutton.css
 delete mode 100644 apps/volt/assets/styles/primevue/toggleswitch.css
 delete mode 100644 apps/volt/assets/styles/primevue/toolbar.css
 delete mode 100644 apps/volt/assets/styles/primevue/tooltip.css
 delete mode 100644 apps/volt/assets/styles/primevue/tree.css
 delete mode 100644 apps/volt/assets/styles/primevue/treeselect.css
 delete mode 100644 apps/volt/assets/styles/primevue/treetable.css

diff --git a/apps/volt/assets/styles/primevue/accordion.css b/apps/volt/assets/styles/primevue/accordion.css
deleted file mode 100644
index 11a13db0f..000000000
--- a/apps/volt/assets/styles/primevue/accordion.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.p-accordionpanel {
-    @apply flex flex-col border-b border-surface-200 dark:border-surface-700
-}
-
-.p-accordionheader {
-    @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold
-        bg-surface-0 dark:bg-surface-900
-        text-surface-500 dark:text-surface-400
-        transition-colors duration-200
-}
-
-.p-accordionpanel:first-child > .p-accordionheader {
-    @apply rounded-ss-md rounded-se-md
-}
-
-.p-accordionpanel:last-child > .p-accordionheader {
-    @apply rounded-ee-md rounded-es-md
-}
-
-.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
-    @apply rounded-ee-md rounded-es-md
-}
-
-.p-accordionheader-toggle-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
-    @apply outline outline-1 outline-offset-[-1px] outline-primary
-}
-
-.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-}
-
-.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {
-    @apply text-surface-700 dark:text-surface-0
-}
-
-.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-}
-
-.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
-    @apply text-surface-700 dark:text-surface-0;
-}
-
-.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-}
-
-.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  .p-accordionheader-toggle-icon {
-    @apply text-surface-700 dark:text-surface-0;
-}
-
-.p-accordioncontent-content {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]
-}
diff --git a/apps/volt/assets/styles/primevue/autocomplete.css b/apps/volt/assets/styles/primevue/autocomplete.css
deleted file mode 100644
index cb64d9833..000000000
--- a/apps/volt/assets/styles/primevue/autocomplete.css
+++ /dev/null
@@ -1,143 +0,0 @@
-@import './inputtext';
-@import './chip';
-
-.p-autocomplete {
-    @apply inline-flex
-}
-
-.p-autocomplete.p-disabled {
-    @apply opacity-100
-}
-
-.p-autocomplete-loader {
-    @apply absolute top-1/2 -mt-2 end-3
-}
-
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
-    @apply end-[3.25rem]
-}
-
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
-    @apply flex-auto w-[1%]
-}
-
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
-    @apply rounded-e-none
-}
-
-.p-autocomplete-dropdown {
-    @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-e-md
-        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
-        text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800
-        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
-        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        transition-colors duration-200
-}
-
-.p-autocomplete .p-autocomplete-overlay {
-    @apply min-w-full
-}
-
-.p-autocomplete-overlay {
-    @apply absolute top-0 left-0 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-autocomplete-list-container {
-    @apply overflow-auto
-}
-
-.p-autocomplete-list {
-    @apply m-0 p-1 list-none flex flex-col gap-[2px]
-}
-
-.p-autocomplete-option {
-    @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm
-        text-surface-700 dark:text-surface-0 bg-transparent border-none
-        transition-colors duration-200
-}
-
-.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0
-}
-
-.p-autocomplete-option-selected {
-    @apply bg-highlight
-}
-
-.p-autocomplete-option-selected.p-focus {
-    @apply bg-highlight-emphasis
-}
-
-.p-autocomplete-option-group {
-    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
-}
-
-.p-autocomplete-input-multiple {
-    @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap
-        px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950
-        border border-surface-300 dark:border-surface-700 rounded-md w-full
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        transition-colors duration-200 outline-none
-}
-
-.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
-    @apply border-surface-400 dark:border-surface-600
-}
-
-.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
-    @apply border-primary
-}
-
-.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-variant-filled.p-autocomplete-input-multiple {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
-    @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400
-}
-
-.p-autocomplete-chip.p-chip {
-    @apply py-1 rounded-sm
-}
-
-.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
-    @apply px-1
-}
-
-.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
-    @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0
-}
-
-.p-autocomplete-input-chip {
-    @apply flex-auto inline-flex py-1
-}
-
-.p-autocomplete-input-chip input {
-    @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit
-}
-
-.p-autocomplete-input-chip input::placeholder {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-autocomplete-empty-message {
-    @apply px-3 py-2
-}
-
-.p-autocomplete-fluid {
-    @apply flex
-}
-
-.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
-    @apply w-[1%]
-}
diff --git a/apps/volt/assets/styles/primevue/avatar.css b/apps/volt/assets/styles/primevue/avatar.css
deleted file mode 100644
index fde16bbb9..000000000
--- a/apps/volt/assets/styles/primevue/avatar.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.p-avatar {
-    @apply inline-flex items-center justify-center
-        w-8 h-8 text-base rounded-md
-        bg-surface-200 dark:bg-surface-700
-}
-
-.p-avatar-image {
-    @apply bg-transparent
-}
-
-.p-avatar-circle,
-.p-avatar-circle img {
-    @apply rounded-full
-}
-
-.p-avatar-icon {
-    @apply text-base
-}
-
-.p-avatar img {
-    @apply w-full h-full
-}
-
-.p-avatar-lg {
-    @apply w-12 h-12 text-2xl
-}
-
-.p-avatar-lg .p-avatar-icon {
-    @apply text-2xl
-}
-
-.p-avatar-xl {
-    @apply w-16 h-16 text-[2rem]
-}
-
-.p-avatar-xl .p-avatar-icon {
-    @apply text-[2rem]
-}
-
-.p-avatar-group {
-    @apply flex items-center
-}
-
-.p-avatar-group .p-avatar + .p-avatar {
-    @apply -ms-4
-}
-
-.p-avatar-group .p-avatar {
-    @apply border-2 border-surface-200 dark:border-surface-700
-}
diff --git a/apps/volt/assets/styles/primevue/badge.css b/apps/volt/assets/styles/primevue/badge.css
deleted file mode 100644
index 34a6e0c4d..000000000
--- a/apps/volt/assets/styles/primevue/badge.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.p-badge {
-    @apply inline-flex items-center justify-center rounded-md
-        py-0 px-2 text-xs font-bold min-w-6 h-6
-        bg-primary text-primary-contrast
-}
-
-.p-badge-dot {
-    @apply min-w-2 h-2 rounded-full p-0
-}
-
-.p-badge-circle {
-    @apply p-0 rounded-full
-}
-
-.p-badge-secondary {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300
-}
-
-.p-badge-success {
-    @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950
-}
-
-.p-badge-info {
-    @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950
-}
-
-.p-badge-warn {
-    @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950
-}
-
-.p-badge-danger {
-    @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950
-}
-
-.p-badge-contrast {
-    @apply bg-surface-950 dark:bg-white text-white dark:text-surface-950
-}
-
-.p-badge-sm {
-    @apply text-[0.625rem] min-w-5 h-5
-}
-
-.p-badge-lg {
-    @apply text-sm min-w-7 h-7
-}
-
-.p-badge-xl {
-    @apply text-base min-w-8 h-8
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/blockui.css b/apps/volt/assets/styles/primevue/blockui.css
deleted file mode 100644
index f4f01f34d..000000000
--- a/apps/volt/assets/styles/primevue/blockui.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.p-blockui {
-    @apply relative
-}
-
-.p-blockui-mask {
-    @apply rounded-md
-}
-
-.p-blockui-mask.p-overlay-mask {
-    @apply absolute
-}
-
-.p-blockui-mask-document.p-overlay-mask {
-    @apply fixed
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/breadcrumb.css b/apps/volt/assets/styles/primevue/breadcrumb.css
deleted file mode 100644
index 69beddf21..000000000
--- a/apps/volt/assets/styles/primevue/breadcrumb.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.p-breadcrumb {
-    @apply bg-surface-0 dark:bg-surface-900 p-4 overflow-x-auto
-}
-
-.p-breadcrumb-list {
-    @apply m-0 p-0 list-none flex items-center flex-nowrap gap-2
-}
-
-.p-breadcrumb-separator {
-    @apply flex items-center text-surface-400 dark:text-surface-500
-}
-
-.p-breadcrumb-separator-icon:dir(rtl) {
-    @apply rotate-180
-}
-
-.p-breadcrumb::-webkit-scrollbar {
-    @apply hidden
-}
-
-.p-breadcrumb-item-link {
-    @apply no-underline flex items-center gap-2 transition-colors duration-200 rounded-md
-        text-surface-500 dark:text-surface-400
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {
-    @apply text-surface-700 dark:text-surface-0
-}
-
-.p-breadcrumb-item-label {
-    @apply transition-colors duration-200
-}
-
-.p-breadcrumb-item-icon {
-    @apply text-surface-400 dark:text-surface-500 transition-colors duration-200
-}
-
-.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
diff --git a/apps/volt/assets/styles/primevue/button.css b/apps/volt/assets/styles/primevue/button.css
deleted file mode 100644
index d14f944c1..000000000
--- a/apps/volt/assets/styles/primevue/button.css
+++ /dev/null
@@ -1,331 +0,0 @@
-@import './badge';
-
-.p-button {
-    @apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
-        bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast
-        border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        px-3 py-2 transition-colors duration-200 gap-2 rounded-md
-        disabled:cursor-default
-}
-
-.p-button-icon-right {
-    @apply order-1
-}
-
-.p-button-icon-right:dir(rtl) {
-    @apply order-[-1]
-}
-
-.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {
-    @apply order-1
-}
-
-.p-button-icon-bottom {
-    @apply order-2
-}
-
-.p-button-icon-only {
-    @apply w-10 px-0 gap-0
-}
-
-.p-button-icon-only.p-button-rounded {
-    @apply rounded-full h-10
-}
-
-.p-button-icon-only .p-button-label {
-    @apply invisible w-0
-}
-
-.p-button-sm {
-    @apply text-sm px-[0.625rem] py-[0.375rem]
-}
-
-.p-button-sm .p-button-icon {
-    @apply text-sm
-}
-
-.p-button-lg {
-    @apply text-[1.125rem] px-[0.875rem] py-[0.625rem]
-}
-
-.p-button-lg .p-button-icon {
-    @apply text-[1.125rem]
-}
-
-.p-button-vertical {
-    @apply flex-col
-}
-
-.p-button-label {
-    @apply font-medium
-}
-
-.p-button-fluid {
-    @apply w-full
-}
-
-.p-button-fluid.p-button-icon-only {
-    @apply w-10
-}
-
-.p-button .p-badge {
-    @apply min-w-4 h-4 leading-4
-}
-
-.p-button-raised {
-    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
-}
-
-.p-button-rounded {
-    @apply rounded-[2rem]
-}
-
-.p-button-secondary {
-    @apply bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
-        border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300
-        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
-        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
-        dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600
-        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300
-}
-
-.p-button-success {
-    @apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700
-        border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700
-        text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200
-        dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200
-        dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-green-500 dark:focus-visible:outline-green-400
-}
-
-.p-button-info {
-    @apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700
-        border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700
-        text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200
-        dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200
-        dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400
-}
-
-.p-button-warn {
-    @apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700
-        border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700
-        text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200
-        dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200
-        dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400
-}
-
-.p-button-help {
-    @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700
-        border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700
-        text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200
-        dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200
-        dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400
-}
-
-.p-button-danger {
-    @apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700
-        border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700
-        text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200
-        dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200
-        dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-red-500 dark:focus-visible:outline-red-400
-}
-
-.p-button-contrast {
-    @apply bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800
-        border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800
-        text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200
-        dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300
-        dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0
-}
-
-.p-button-outlined {
-    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100
-        border-primary-200 enabled:hover:border-primary-200 enabled:active:border-primary-200
-        text-primary enabled:hover:text-primary enabled:active:text-primary
-        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15
-        dark:border-primary-700 dark:enabled:hover:border-primary-700 dark:enabled:active:border-primary-700
-        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary
-}
-
-.p-button-outlined.p-button-secondary {
-    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
-        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200
-        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
-        dark:bg-transparent dark:enabled:hover:bg-white/5 dark:enabled:active:bg-white/15
-        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
-        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
-}
-
-.p-button-outlined.p-button-success {
-    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
-        border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200
-        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
-        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
-        dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700
-        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
-}
-
-.p-button-outlined.p-button-info {
-    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
-        border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200
-        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
-        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
-        dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700
-        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
-}
-
-.p-button-outlined.p-button-warn {
-    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
-        border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200
-        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
-        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
-        dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700
-        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
-}
-
-.p-button-outlined.p-button-help {
-    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
-        border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200
-        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
-        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
-        dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700
-        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
-}
-
-.p-button-outlined.p-button-danger {
-    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
-        border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200
-        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
-        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
-        dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700
-        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
-}
-
-.p-button-outlined.p-button-contrast {
-    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
-        border-surface-700 enabled:hover:border-surface-700 enabled:active:border-surface-700
-        text-surface-950 enabled:hover:text-surface-950 enabled:active:text-surface-950
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-surface-500 dark:enabled:hover:border-surface-500 dark:enabled:active:border-surface-500
-        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
-}
-
-.p-button-outlined.p-button-plain {
-    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
-        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200
-        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-surface-600 dark:enabled:hover:border-surface-600 dark:enabled:active:border-surface-600
-        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
-}
-
-.p-button-text {
-    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-primary enabled:hover:text-primary enabled:active:text-primary
-        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary
-}
-
-.p-button-text.p-button-secondary {
-    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
-}
-
-.p-button-text.p-button-success {
-    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
-        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
-}
-
-.p-button-text.p-button-info {
-    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
-        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
-}
-
-.p-button-text.p-button-warn {
-    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
-        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
-}
-
-.p-button-text.p-button-help {
-    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
-        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
-}
-
-.p-button-text.p-button-danger {
-    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
-        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
-}
-
-.p-button-text.p-button-contrast {
-    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
-        dark:bg-transparent dark:enabled:hover:bg-surface-400/5 dark:enabled:active:bg-surface-400/15
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
-}
-
-.p-button-text.p-button-plain {
-    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
-}
-
-.p-button-link {
-    @apply bg-transparent enabled:hover:bg-transparent enabled:active:bg-transparent
-        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-primary enabled:hover:text-primary enabled:active:text-primary
-}
-
-.p-button-link:not(:disabled):hover .p-button-label {
-    @apply underline
-}
diff --git a/apps/volt/assets/styles/primevue/buttongroup.css b/apps/volt/assets/styles/primevue/buttongroup.css
deleted file mode 100644
index b5c888eef..000000000
--- a/apps/volt/assets/styles/primevue/buttongroup.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.p-buttongroup .p-button {
-    @apply m-0 focus-visible:relative focus-visible:z-10
-}
-
-.p-buttongroup .p-button:not(:last-child) {
-    @apply border-r-0
-}
-
-.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) {
-    @apply rounded-none
-}
-
-.p-buttongroup .p-button:first-of-type:not(:only-of-type) {
-    @apply rounded-e-none
-}
-
-.p-buttongroup .p-button:last-of-type:not(:only-of-type) {
-    @apply rounded-s-none
-}
diff --git a/apps/volt/assets/styles/primevue/card.css b/apps/volt/assets/styles/primevue/card.css
deleted file mode 100644
index 5c4a9a36c..000000000
--- a/apps/volt/assets/styles/primevue/card.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.p-card {
-    @apply flex flex-col rounded-xl
-        bg-surface-0 dark:bg-surface-900 
-        text-surface-700 dark:text-surface-0
-        shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]
-}
-
-.p-card-caption {
-    @apply flex flex-col gap-2
-}
-
-.p-card-body {
-    @apply p-5 flex flex-col gap-2
-}
-
-.p-card-title {
-    @apply font-medium text-xl
-}
-
-.p-card-subtitle {
-    @apply text-surface-500 dark:text-surface-400
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/carousel.css b/apps/volt/assets/styles/primevue/carousel.css
deleted file mode 100644
index 606a8b773..000000000
--- a/apps/volt/assets/styles/primevue/carousel.css
+++ /dev/null
@@ -1,64 +0,0 @@
-@import './button';
-
-.p-carousel {
-    @apply flex flex-col
-}
-
-.p-carousel-content-container {
-    @apply flex flex-col overflow-auto
-}
-
-.p-carousel-content {
-    @apply flex flex-row gap-1
-}
-
-.p-carousel-content:dir(rtl) {
-    @apply flex-row-reverse
-}
-
-.p-carousel-viewport {
-    @apply overflow-hidden w-full
-}
-
-.p-carousel-item-list {
-    @apply flex flex-row
-}
-
-.p-carousel-prev-button,
-.p-carousel-next-button {
-    @apply self-center flex-shrink-0
-}
-
-.p-carousel-indicator-list {
-    @apply flex flex-row justify-center flex-wrap p-4 gap-2 m-0 list-none
-}
-
-.p-carousel-indicator-list:dir(rtl) {
-    @apply rtl:flex-row-reverse
-}
-
-.p-carousel-indicator-button {
-    @apply flex items-center justify-center w-8 h-2 border-none rounded-md p-0 m-0 select-none cursor-pointer transition-colors duration-200
-        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-carousel-indicator-active .p-carousel-indicator-button {
-    @apply bg-primary
-}
-
-.p-carousel-vertical .p-carousel-content {
-    @apply flex-col
-}
-
-.p-carousel-vertical .p-carousel-item-list {
-    @apply flex-col h-full
-}
-
-.p-items-hidden .p-carousel-item {
-    @apply invisible
-}
-
-.p-items-hidden .p-carousel-item.p-carousel-item-active {
-    @apply visible
-}
diff --git a/apps/volt/assets/styles/primevue/cascadeselect.css b/apps/volt/assets/styles/primevue/cascadeselect.css
deleted file mode 100644
index a7034e050..000000000
--- a/apps/volt/assets/styles/primevue/cascadeselect.css
+++ /dev/null
@@ -1,169 +0,0 @@
-.p-cascadeselect {
-    @apply inline-flex cursor-pointer relative select-none rounded-md
-        bg-surface-0 dark:bg-surface-950
-        border border-surface-300 dark:border-surface-700
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        transition-colors duration-200
-}
-
-.p-cascadeselect:not(.p-disabled):hover {
-    @apply border-surface-400 dark:border-surface-600
-}
-
-.p-cascadeselect:not(.p-disabled).p-focus {
-    @apply border-primary
-}
-
-.p-cascadeselect.p-variant-filled {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-cascadeselect.p-invalid {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-cascadeselect.p-disabled {
-    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
-}
-
-.p-cascadeselect-dropdown {
-    @apply flex items-center justify-center shrink-0 bg-transparent
-        text-surface-500 dark:text-surface-400 w-10 rounded-e-md
-}
-
-.p-cascadeselect-clear-icon {
-    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
-}
-
-.p-cascadeselect-label {
-    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]
-        py-2 px-3 overflow-ellipsis
-        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none
-}
-
-.p-cascadeselect-label.p-placeholder {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-cascadeselect.p-disabled .p-cascadeselect-label {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-cascadeselect-label-empty {
-    @apply overflow-hidden opacity-0
-}
-
-.p-cascadeselect-fluid {
-    @apply flex
-}
-
-.p-cascadeselect-fluid .p-cascadeselect-label {
-    @apply w-[1%]
-}
-
-.p-cascadeselect-overlay {
-    @apply absolute top-0 left-0 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-cascadeselect .p-cascadeselect-overlay {
-    @apply min-w-full
-}
-
-.p-cascadeselect-option-list {
-    @apply hidden min-w-full absolute z-10
-}
-
-.p-cascadeselect-list {
-    @apply min-w-full m-0 list-none p-1 flex flex-col gap-[2px]
-}
-
-.p-cascadeselect-option {
-    @apply cursor-pointer font-normal whitespace-nowrap
-        text-surface-700 dark:text-surface-0 bg-transparent border-none
-        transition-colors duration-200 rounded-sm
-}
-
-.p-cascadeselect-option-active {
-    @apply overflow-visible
-}
-
-.p-cascadeselect-option-active > .p-cascadeselect-option-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-cascadeselect-option-selected .p-cascadeselect-option-content {
-    @apply bg-highlight
-}
-
-.p-cascadeselect-option-selected.p-focus {
-    @apply bg-highlight-emphasis
-}
-
-.p-cascadeselect-option-active > .p-cascadeselect-option-list {
-    @apply block start-full top-0
-}
-
-.p-cascadeselect-option-content {
-    @apply flex items-center justify-between overflow-hidden relative px-3 py-2
-}
-
-.p-cascadeselect-group-icon {
-    @apply text-sm w-[0.875rem] h-[0.875rem] text-surface-400 dark:text-surface-500
-}
-
-.p-cascadeselect-group-icon:dir(rtl) {
-    @apply rotate-180
-}
-
-
-.p-cascadeselect-mobile-active .p-cascadeselect-option-content {
-    @apply rounded-sm
-}
-
-.p-cascadeselect-mobile-active-active .p-cascadeselect-list {
-    @apply flex flex-col top-full start-0 z-10
-}
-
-.p-cascadeselect-mobile-active .p-cascadeselect-list > .p-cascadeselect-option > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
-    @apply ms-auto transition-transform duration-200
-}
-
-.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon {
-    @apply transition-transform duration-200 rotate-90
-}
-
-.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
-    @apply -rotate-90
-}
-
-.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
-    @apply static shadow-none border-none ps-4
-}
-
-.p-cascadeselect-sm .p-cascadeselect-label {
-    @apply text-sm px-[0.625rem] py-[0.375rem]
-}
-
-.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {
-    @apply text-sm w-[0.875rem] h-[0.875rem]
-}
-
-.p-cascadeselect-lg .p-cascadeselect-label {
-    @apply text-lg px-[0.875rem] py-[0.625rem]
-}
-
-.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {
-    @apply text-lg w-[1.125rem] h-[1.125rem]
-}
diff --git a/apps/volt/assets/styles/primevue/checkbox.css b/apps/volt/assets/styles/primevue/checkbox.css
deleted file mode 100644
index a5238b4b1..000000000
--- a/apps/volt/assets/styles/primevue/checkbox.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.p-checkbox {
-    @apply relative inline-flex select-none w-5 h-5 align-bottom
-}
-
-.p-checkbox-input {
-    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
-        border border-transparent rounded-sm
-}
-
-.p-checkbox-box {
-    @apply flex justify-center items-center rounded-sm w-5 h-5
-        border border-surface-300 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-950
-        transition-colors duration-200
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-}
-
-.p-checkbox-icon {
-    @apply text-surface-700 dark:text-surface-0
-        text-sm w-[0.875rem] h-[0.875rem]
-        transition-colors duration-200
-}
-
-.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    @apply border-surface-400 dark:border-surface-600
-}
-
-.p-checkbox-checked .p-checkbox-box {
-    @apply border-primary bg-primary
-}
-
-.p-checkbox-checked .p-checkbox-icon {
-    @apply text-primary-contrast
-}
-
-.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    @apply bg-primary-emphasis border-primary-emphasis
-}
-
-.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
-    @apply text-primary-contrast
-}
-
-.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    @apply outline outline-1 outline-offset-2 outline-primary
-}
-
-.p-checkbox.p-invalid > .p-checkbox-box {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-checkbox.p-variant-filled .p-checkbox-box {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-checkbox.p-disabled {
-    @apply opacity-100
-}
-
-.p-checkbox.p-disabled .p-checkbox-box {
-    @apply bg-surface-200 dark:bg-surface-400 border-surface-300 dark:border-surface-700
-}
-
-.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
-    @apply text-surface-700 dark:text-surface-900
-}
-
-.p-checkbox-sm,
-.p-checkbox-sm .p-checkbox-box {
-    @apply w-4 h-4
-}
-
-.p-checkbox-sm .p-checkbox-icon {
-    @apply w-3 h-3
-}
-
-.p-checkbox-lg,
-.p-checkbox-lg .p-checkbox-box {
-    @apply w-6 h-6
-}
-
-.p-checkbox-lg .p-checkbox-icon {
-    @apply w-4 h-4
-}
diff --git a/apps/volt/assets/styles/primevue/chip.css b/apps/volt/assets/styles/primevue/chip.css
deleted file mode 100644
index 7f10d74ed..000000000
--- a/apps/volt/assets/styles/primevue/chip.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.p-chip {
-    @apply inline-flex items-center rounded-2xl gap-2 px-3 py-2
-        bg-surface-100 dark:bg-surface-800
-        text-surface-800 dark:text-surface-0
-}
-
-.p-chip-icon {
-    @apply text-surface-800 dark:bg-surface-0 text-base w-4 h-4
-}
-
-.p-chip-image {
-    @apply rounded-full w-8 h-8 -ms-2
-}
-
-.p-chip:has(.p-chip-remove-icon) {
-    @apply pe-2
-}
-
-.p-chip:has(.p-chip-image) {
-    @apply pt-1 pb-1
-}
-
-.p-chip-remove-icon {
-    @apply cursor-pointer text-base w-4 h-4 rounded-full
-        text-surface-800 dark:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
diff --git a/apps/volt/assets/styles/primevue/colorpicker.css b/apps/volt/assets/styles/primevue/colorpicker.css
deleted file mode 100644
index 71c433548..000000000
--- a/apps/volt/assets/styles/primevue/colorpicker.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.p-colorpicker {
-    @apply inline-block relative;
-}
-
-.p-colorpicker-dragging {
-    @apply cursor-pointer
-}
-
-.p-colorpicker-preview {
-    @apply w-6 h-6 p-0 border-none rounded-md transition-colors duration-200 cursor-pointer disabled:cursor-auto
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-colorpicker-panel {
-    @apply bg-surface-800 dark:bg-surface-900
-        border border-surface-900 dark:border-surface-700
-        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-        w-[193px] h-[166px] absolute top-0 start-0
-}
-
-.p-colorpicker-panel-inline {
-    @apply static shadow-none
-}
-
-.p-colorpicker-content {
-    @apply relative;
-}
-
-.p-colorpicker-color-selector {
-    @apply w-[150px] h-[150px] top-[8px] start-[8px] absolute
-}
-
-.p-colorpicker-color-background {
-    @apply w-full h-full bg-[linear-gradient(to_top,#000_0%,rgba(0,0,0,0)_100%),linear-gradient(to_right,#fff_0%,rgba(255,255,255,0)_100%)];
-}
-
-.p-colorpicker-color-handle {
-    @apply absolute top-0 start-[150px] rounded-full w-[10px] h-[10px] border border-surface-0 -mt-[5px] me-0 mb-0 -ms-[5px] cursor-pointer opacity-85
-}
-
-.p-colorpicker-hue {
-    @apply w-[17px] h-[150px] top-[8px] start-[167px] absolute opacity-85 bg-[linear-gradient(0deg,red_0,#ff0_17%,#0f0_33%,#0ff_50%,#00f_67%,#f0f_83%,red)];
-}
-
-.p-colorpicker-hue-handle {
-    @apply absolute top-[150px] start-0 w-[21px] -ms-[2px] -mt-[5px] h-[10px] border-2 opacity-85 border-surface-0 cursor-pointer
-}
diff --git a/apps/volt/assets/styles/primevue/common.css b/apps/volt/assets/styles/primevue/common.css
deleted file mode 100644
index 0c4e67f1a..000000000
--- a/apps/volt/assets/styles/primevue/common.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.p-connected-overlay-enter-from {
-    @apply opacity-0 scale-y-75
-}
-
-.p-connected-overlay-leave-to {
-    @apply opacity-0
-}
-
-.p-connected-overlay-enter-active {
-    @apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)]
-}
-
-.p-connected-overlay-leave-active {
-    @apply transition-opacity duration-100 ease-linear
-}
-
-.p-toggleable-content-enter-from,
-.p-toggleable-content-leave-to {
-    @apply max-h-0
-}
-
-.p-toggleable-content-enter-to,
-.p-toggleable-content-leave-from {
-    @apply max-h-[1000px]
-}
-
-.p-toggleable-content-leave-active {
-    @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)];
-}
-
-.p-toggleable-content-enter-active {
-    @apply overflow-hidden transition-[max-height] duration-1000 ease-in-out
-}
-
-.p-disabled,
-.p-disabled * {
-    @apply cursor-default pointer-events-none select-none
-}
-
-.p-disabled,
-.p-component:disabled {
-    @apply opacity-60
-}
-
-.pi {
-    @apply text-base
-}
-
-.p-icon {
-    @apply w-4 h-4
-}
-
-.p-overlay-mask {
-    @apply bg-black/50 text-surface-200 transition-colors duration-150 fixed top-0 start-0 w-full h-full
-}
-
-.p-overlay-mask-enter {
-    animation: p-overlay-mask-enter-animation 150ms forwards;
-}
-
-.p-overlay-mask-leave {
-    animation: p-overlay-mask-leave-animation 150ms forwards;
-}
-
-@keyframes p-overlay-mask-enter-animation {
-    from {
-        background: transparent;
-    }
-    to {
-        background: rgba(0,0,0,0.5);
-    }
-}
-
-@keyframes p-overlay-mask-leave-animation {
-    from {
-        background: rgba(0,0,0,0.5);
-    }
-    to {
-        background: transparent;
-    }
-}
diff --git a/apps/volt/assets/styles/primevue/confirmdialog.css b/apps/volt/assets/styles/primevue/confirmdialog.css
deleted file mode 100644
index 2c822413e..000000000
--- a/apps/volt/assets/styles/primevue/confirmdialog.css
+++ /dev/null
@@ -1,10 +0,0 @@
-@import './dialog';
-@import './button';
-
-.p-confirmdialog .p-dialog-content {
-    @apply flex items-center gap-4
-}
-
-.p-confirmdialog-icon {
-    @apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/confirmpopup.css b/apps/volt/assets/styles/primevue/confirmpopup.css
deleted file mode 100644
index 861a29494..000000000
--- a/apps/volt/assets/styles/primevue/confirmpopup.css
+++ /dev/null
@@ -1,66 +0,0 @@
-@import './button';
-
-.p-confirmpopup {
-    @apply absolute mt-[10px] top-0 left-0
-        border border-surface-200 dark:border-surface-700 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
-        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
-        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
-        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
-}
-
-.p-confirmpopup-content {
-    @apply flex items-center p-3 gap-4
-}
-
-.p-confirmpopup-icon {
-    @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0
-}
-
-.p-confirmpopup-footer {
-    @apply flex justify-end gap-2 pt-0 px-3 pb-3
-}
-
-.p-confirmpopup-footer button {
-    @apply w-auto
-}
-
-.p-confirmpopup-footer button:last-child {
-    @apply m-0
-}
-
-.p-confirmpopup-flipped {
-    @apply -mt-[10px] mb-[10px]
-}
-
-.p-confirmpopup-enter-from {
-    @apply opacity-0 scale-y-75
-}
-
-.p-confirmpopup-leave-to {
-    @apply opacity-0
-}
-
-.p-confirmpopup-enter-active {
-    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
-}
-
-.p-confirmpopup-leave-active {
-    @apply transition-opacity duration-100 ease-linear
-}
-
-.p-confirmpopup-flipped:after,
-.p-confirmpopup-flipped:before {
-    @apply bottom-auto top-full
-}
-
-.p-confirmpopup-flipped:after {
-    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
-}
-
-.p-confirmpopup-flipped:before {
-    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
-}
diff --git a/apps/volt/assets/styles/primevue/contextmenu.css b/apps/volt/assets/styles/primevue/contextmenu.css
deleted file mode 100644
index d9af2908b..000000000
--- a/apps/volt/assets/styles/primevue/contextmenu.css
+++ /dev/null
@@ -1,101 +0,0 @@
-.p-contextmenu {
-    @apply bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700
-        rounded-md min-w-52 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-contextmenu-root-list,
-.p-contextmenu-submenu {
-    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
-}
-
-.p-contextmenu-submenu {
-    @apply absolute min-w-full z-10 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-contextmenu-item {
-    @apply relative
-}
-
-.p-contextmenu-item-content {
-    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
-}
-
-.p-contextmenu-item-link {
-    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
-        px-3 py-2 gap-2 select-none outline-none
-}
-
-.p-contextmenu-item-icon {
-    @apply text-surface-400 dark:text-surface-500
-}
-
-.p-contextmenu-submenu-icon {
-    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
-}
-
-.p-contextmenu-item.p-focus > .p-contextmenu-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-contextmenu-item-active > .p-contextmenu-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-contextmenu-separator {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-contextmenu-enter-from,
-.p-contextmenu-leave-active {
-    @apply opacity-0
-}
-
-.p-contextmenu-enter-active {
-    @apply transition-opacity duration-[250ms]
-}
-
-.p-contextmenu-mobile .p-contextmenu-submenu {
-    @apply static shadow-none border-none ps-4 pe-0
-}
-
-.p-contextmenu-mobile .p-contextmenu-submenu-icon {
-    @apply transition-transform duration-200 rotate-90
-}
-
-.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
-    @apply -rotate-90
-}
diff --git a/apps/volt/assets/styles/primevue/datatable.css b/apps/volt/assets/styles/primevue/datatable.css
deleted file mode 100644
index 2cd96b0a4..000000000
--- a/apps/volt/assets/styles/primevue/datatable.css
+++ /dev/null
@@ -1,408 +0,0 @@
-@import './paginator';
-
-.p-datatable {
-    @apply relative
-}
-
-.p-datatable-table {
-    @apply border-spacing-0 w-full
-}
-
-.p-datatable-scrollable > .p-datatable-table-container {
-    @apply relative
-}
-
-.p-datatable-scrollable-table > .p-datatable-thead {
-    @apply top-0 z-10
-}
-
-.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
-    @apply sticky z-10
-}
-
-.p-datatable-scrollable-table > .p-datatable-tfoot {
-    @apply bottom-0 z-10
-}
-
-.p-datatable-scrollable .p-datatable-frozen-column {
-    @apply sticky bg-surface-0 dark:bg-surface-900
-}
-
-.p-datatable-scrollable th.p-datatable-frozen-column {
-    @apply z-10
-}
-
-.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,
-.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
-    @apply bg-surface-0 dark:bg-surface-900
-}
-
-.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,
-.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
-    @apply bg-surface-0 dark:bg-surface-900
-}
-
-.p-datatable-flex-scrollable {
-    @apply flex flex-col h-full
-}
-
-.p-datatable-flex-scrollable > .p-datatable-table-container {
-    @apply flex flex-col flex-1 h-full
-}
-
-.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {
-    @apply sticky z-10
-}
-
-.p-datatable-resizable-table > .p-datatable-thead > tr > th,
-.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
-.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
-    @apply overflow-hidden whitespace-nowrap
-}
-
-.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {
-    @apply bg-clip-padding relative
-}
-
-.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {
-    @apply hidden
-}
-
-.p-datatable-column-resizer {
-    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
-}
-
-.p-datatable-column-header-content {
-    @apply flex items-center gap-2
-}
-
-.p-datatable-column-resize-indicator {
-    @apply w-px absolute z-10 hidden bg-primary
-}
-
-.p-datatable-row-reorder-indicator-up,
-.p-datatable-row-reorder-indicator-down {
-    @apply absolute hidden
-}
-
-.p-datatable-reorderable-column,
-.p-datatable-reorderable-row-handle {
-    @apply cursor-move
-}
-
-.p-datatable-mask {
-    @apply absolute flex items-center justify-center z-20
-}
-
-.p-datatable-inline-filter {
-    @apply flex items-center w-full gap-2
-}
-
-.p-datatable-inline-filter .p-datatable-filter-element-container {
-    @apply flex-auto w-[1%]
-}
-
-.p-datatable-filter-overlay {
-    @apply bg-surface-0 dark:bg-surface-900 rounded-md min-w-52
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-datatable-filter-constraint-list {
-    @apply m-0 list-none flex flex-col p-1 gap-[2px]
-}
-
-.p-datatable-filter-constraint {
-    @apply px-3 py-2 rounded-sm cursor-pointer transition-colors duration-200 text-surface-700 dark:text-surface-0
-}
-
-.p-datatable-filter-constraint-selected {
-    @apply bg-highlight
-}
-
-.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover
-{
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-datatable-filter-constraint:focus-visible {
-    @apply outline-none bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-datatable-filter-constraint-selected:focus-visible {
-    @apply bg-highlight-emphasis
-}
-
-.p-datatable-filter-constraint-separator {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-datatable-popover-filter {
-    @apply inline-flex ms-auto
-}
-
-.p-datatable-filter-overlay-popover {
-    @apply flex flex-col gap-2
-        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-datatable-filter-operator-dropdown {
-    @apply w-full
-}
-
-.p-datatable-filter-rule-list,
-.p-datatable-filter-rule {
-    @apply flex flex-col gap-2
-}
-
-.p-datatable-filter-rule {
-    @apply border-b border-surface-200 dark:border-surface-700 last:border-b-0 pb-2 last:pb-0
-}
-
-.p-datatable-filter-add-rule-button {
-    @apply w-full
-}
-
-.p-datatable-filter-remove-rule-button {
-    @apply w-full
-}
-
-.p-datatable-filter-buttonbar {
-    @apply p-0 flex items-center justify-between
-}
-
-.p-datatable-virtualscroller-spacer {
-    @apply flex
-}
-
-.p-datatable .p-virtualscroller .p-virtualscroller-loading {
-    @apply !transform-none min-h-0 sticky top-0 start-0
-}
-
-.p-datatable-paginator-top {
-    @apply border-b border-surface-200 dark:border-surface-700
-}
-
-.p-datatable-paginator-bottom {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-datatable-header {
-    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-datatable-footer {
-    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-datatable-header-cell {
-    @apply py-3 px-4 font-normal text-start transition-colors duration-200
-        border-b border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-datatable-column-title {
-    @apply font-semibold
-}
-
-.p-datatable-tbody > tr {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
-}
-
-.p-datatable-tbody > tr > td {
-    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
-}
-
-.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
-    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-datatable-tbody > tr.p-datatable-row-selected {
-    @apply bg-highlight
-}
-
-.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
-    @apply border-b-primary-100 dark:border-b-primary-900
-}
-
-.p-datatable-tbody > tr.p-datatable-row-selected > td {
-    @apply border-b-primary-100 dark:border-b-primary-900
-}
-
-.p-datatable-tbody > tr:focus-visible,
-.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {
-    @apply outline outline-1 -outline-offset-1 outline-primary
-}
-
-.p-datatable-tfoot > tr > td {
-    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-datatable-column-footer {
-    @apply font-semibold
-}
-
-.p-datatable-sortable-column {
-    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
-}
-
-.p-datatable-column-title,
-.p-datatable-sort-icon,
-.p-datatable-sort-badge {
-    @apply align-middle
-}
-
-.p-datatable-sort-icon {
-    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
-}
-
-.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
-    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
-    @apply text-surface-600 dark:text-surface-300
-}
-
-.p-datatable-column-sorted {
-    @apply bg-highlight
-}
-
-.p-datatable-column-sorted .p-datatable-sort-icon {
-    @apply bg-highlight
-}
-
-.p-datatable-hoverable .p-datatable-selectable-row {
-    @apply cursor-pointer
-}
-
-.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-    @apply shadow-[inset_0_2px_0_0_theme(colors.primary)]
-}
-
-.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-    @apply shadow-[inset_0_-2px_0_0_theme(colors.primary)]
-}
-
-.p-datatable-loading-icon {
-    @apply text-[2rem] w-8 h-8
-}
-
-.p-datatable-gridlines .p-datatable-header {
-    @apply border-t border-x
-}
-
-.p-datatable-gridlines .p-datatable-footer {
-    @apply border-b border-x
-}
-
-.p-datatable-gridlines .p-datatable-paginator-top {
-    @apply border-t border-x
-}
-
-.p-datatable-gridlines .p-datatable-paginator-bottom {
-    @apply border-b border-x
-}
-
-.p-datatable-gridlines .p-datatable-thead > tr > th {
-    @apply border-t border-x last:border
-}
-
-.p-datatable-gridlines .p-datatable-tbody > tr > td {
-    @apply border-t border-s last:border-r
-}
-
-.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
-    @apply border-y border-s last:border
-}
-
-.p-datatable-gridlines .p-datatable-tfoot > tr > td {
-    @apply border-y border-s last:border
-}
-
-.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
-    @apply border-b border-s last:border-r
-}
-
-.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
-    @apply border-b border-s last:border-r
-}
-
-.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
-    @apply border-s last:border-r
-}
-
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
-    @apply bg-surface-50 dark:bg-surface-950
-}
-
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected {
-    @apply bg-highlight
-}
-
-.p-datatable.p-datatable-sm .p-datatable-header {
-    @apply py-1 px-2
-}
-
-.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-    @apply py-1 px-2
-}
-
-.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-    @apply py-1 px-2
-}
-
-.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
-    @apply py-1 px-2
-}
-
-.p-datatable.p-datatable-sm .p-datatable-footer {
-    @apply py-1 px-2
-}
-
-.p-datatable.p-datatable-lg .p-datatable-header {
-    @apply py-4 px-5
-}
-
-.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
-    @apply py-4 px-5
-}
-
-.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td {
-    @apply py-4 px-5
-}
-
-.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td {
-    @apply py-4 px-5
-}
-
-.p-datatable.p-datatable-lg .p-datatable-footer {
-    @apply py-4 px-5
-}
-
-.p-datatable-row-toggle-button {
-    @apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none
-        transition-colors duration-200 rounded-full border-none bg-transparent
-        text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700
-        dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-
-}
-
-.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
-    @apply bg-surface-0 dark:bg-surface-900 text-primary
-}
-
-.p-datatable-row-toggle-icon:dir(rtl) {
-    @apply rotate-180
-}
diff --git a/apps/volt/assets/styles/primevue/dataview.css b/apps/volt/assets/styles/primevue/dataview.css
deleted file mode 100644
index dc413ef7c..000000000
--- a/apps/volt/assets/styles/primevue/dataview.css
+++ /dev/null
@@ -1,29 +0,0 @@
-@import './paginator';
-
-.p-dataview {
-    @apply border-none
-}
-
-.p-dataview-header {
-    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-dataview-content {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-}
-
-.p-dataview-footer {
-    @apply py-3 px-4 border-t border-surface-200 dark:border-surface-700 
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-dataview-paginator-top {
-    @apply border-b border-surface-200 dark:border-surface-700
-}
-
-.p-dataview-paginator-bottom {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/datepicker.css b/apps/volt/assets/styles/primevue/datepicker.css
deleted file mode 100644
index 122759842..000000000
--- a/apps/volt/assets/styles/primevue/datepicker.css
+++ /dev/null
@@ -1,211 +0,0 @@
-@import './button';
-@import './inputtext';
-
-.p-datepicker {
-    @apply inline-flex max-w-full
-}
-
-.p-datepicker-input {
-    @apply flex-auto w-[1%]
-}
-
-.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
-    @apply rounded-e-none
-}
-
-.p-datepicker-dropdown {
-    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
-        w-10 rounded-e-md border border-s-0 border-surface-300 dark:border-surface-700
-        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
-        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
-        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
-        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        transition-colors duration-200
-}
-
-.p-datepicker:has(.p-datepicker-input-icon-container) {
-    @apply relative
-}
-
-.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
-    @apply pe-10
-}
-
-.p-datepicker-input-icon-container {
-    @apply cursor-pointer absolute top-1/2 end-3 -mt-2 text-surface-400
-}
-
-.p-datepicker-fluid {
-    @apply flex
-}
-
-.p-datepicker-fluid .p-datepicker-input {
-    @apply w-[1%]
-}
-
-.p-datepicker .p-datepicker-panel {
-    @apply min-w-full
-}
-
-.p-datepicker-panel {
-    @apply w-auto p-3 rounded-md
-        border border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-datepicker-panel-inline {
-    @apply inline-block overflow-x-auto shadow-none
-}
-
-.p-datepicker-header {
-    @apply flex items-center justify-between pt-0 px-0 pb-2 font-medium gap-2
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        border-b border-surface-200 dark:border-surface-700
-}
-
-.p-datepicker-next-button:dir(rtl) {
-    @apply order-[-1]
-}
-.p-datepicker-prev-button:dir(rtl) {
-    @apply order-1
-}
-
-.p-datepicker-title {
-    @apply flex items-center justify-between gap-2 font-medium
-}
-
-.p-datepicker-select-year,
-.p-datepicker-select-month {
-    @apply border-none bg-transparent m-0 cursor-pointer font-medium transition-colors duration-200
-        py-1 px-2 rounded-md text-surface-700 dark:text-surface-0
-        enabled:hover:bg-surface-100 enabled:hover:text-surface-800
-        dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-datepicker-calendar-container {
-    @apply flex
-}
-
-.p-datepicker-calendar-container .p-datepicker-calendar {
-    @apply flex-auto border-s border-surface-200 dark:border-surface-700 gap-3
-        first:ps-0 first:border-s-0 last:pe-0
-}
-
-.p-datepicker-day-view {
-    @apply w-full border-collapse text-base mt-2 mx-0 mb-0
-}
-
-.p-datepicker-weekday-cell {
-    @apply p-1
-}
-
-.p-datepicker-weekday {
-    @apply font-medium text-surface-700 dark:text-surface-0
-}
-
-.p-datepicker-day-cell {
-    @apply p-1
-}
-
-.p-datepicker-day {
-    @apply flex items-center justify-center cursor-pointer my-0 mx-auto overflow-hidden relative w-8 h-8
-        rounded-full p-1 transition-colors duration-200 border border-transparent text-surface-700 dark:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
-    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-datepicker-day-selected {
-    @apply bg-primary text-primary-contrast
-}
-
-.p-datepicker-day-selected-range {
-    @apply bg-highlight
-}
-
-.p-datepicker-today > .p-datepicker-day {
-    @apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0
-}
-
-.p-datepicker-today > .p-datepicker-day-selected {
-    @apply bg-primary text-primary-contrast
-}
-
-.p-datepicker-today > .p-datepicker-day-selected-range {
-    @apply bg-highlight
-}
-
-.p-datepicker-weeknumber {
-    @apply text-center
-}
-
-.p-datepicker-month-view {
-    @apply mt-2 mb-0 mx-0
-}
-
-.p-datepicker-month {
-    @apply w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative
-        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
-    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-datepicker-month-selected {
-    @apply bg-primary text-primary-contrast
-}
-
-.p-datepicker-year-view {
-    @apply mt-2 mb-0 mx-0
-}
-
-.p-datepicker-year {
-    @apply w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative
-        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
-    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-datepicker-year-selected {
-    @apply bg-primary text-primary-contrast
-}
-
-.p-datepicker-buttonbar {
-    @apply flex justify-between items-center pt-2 pb-0 px-0 border-t border-surface-200 dark:border-surface-700
-}
-
-.p-datepicker-buttonbar .p-button {
-    @apply w-auto
-}
-
-.p-datepicker-time-picker {
-    @apply flex items-center justify-center border-t border-surface-200 dark:border-surface-700 p-0 gap-2
-}
-
-.p-datepicker-calendar-container + .p-datepicker-time-picker {
-    @apply pt-2 pb-0 px-0
-}
-
-.p-datepicker-time-picker > div {
-    @apply flex items-center flex-col gap-1
-}
-
-.p-datepicker-time-picker span {
-    @apply text-base
-}
-
-.p-datepicker-timeonly .p-datepicker-time-picker {
-    @apply border-t-0
-}
diff --git a/apps/volt/assets/styles/primevue/dialog.css b/apps/volt/assets/styles/primevue/dialog.css
deleted file mode 100644
index 8c9ddf89f..000000000
--- a/apps/volt/assets/styles/primevue/dialog.css
+++ /dev/null
@@ -1,125 +0,0 @@
-@import './button';
-
-.p-dialog {
-    @apply max-h-[90%] scale-100 rounded-xl
-        border border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
-}
-
-.p-dialog-content {
-    @apply overflow-y-auto pt-0 px-5 pb-5
-}
-
-.p-dialog-header {
-    @apply flex items-center justify-between shrink-0 p-5
-}
-
-.p-dialog-title {
-    @apply font-semibold text-xl
-}
-
-.p-dialog-footer {
-    @apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2
-}
-
-.p-dialog-header-actions {
-    @apply flex items-center gap-2
-}
-
-.p-dialog-enter-active {
-    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
-}
-
-.p-dialog-leave-active {
-    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
-}
-
-.p-dialog-enter-from,
-.p-dialog-leave-to {
-    @apply opacity-0 scale-75
-}
-
-.p-dialog-top .p-dialog,
-.p-dialog-bottom .p-dialog,
-.p-dialog-left .p-dialog,
-.p-dialog-right .p-dialog,
-.p-dialog-topleft .p-dialog,
-.p-dialog-topright .p-dialog,
-.p-dialog-bottomleft .p-dialog,
-.p-dialog-bottomright .p-dialog {
-    @apply m-3 [transform:translate3d(0,0,0)]
-}
-
-.p-dialog-top .p-dialog-enter-active,
-.p-dialog-top .p-dialog-leave-active,
-.p-dialog-bottom .p-dialog-enter-active,
-.p-dialog-bottom .p-dialog-leave-active,
-.p-dialog-left .p-dialog-enter-active,
-.p-dialog-left .p-dialog-leave-active,
-.p-dialog-right .p-dialog-enter-active,
-.p-dialog-right .p-dialog-leave-active,
-.p-dialog-topleft .p-dialog-enter-active,
-.p-dialog-topleft .p-dialog-leave-active,
-.p-dialog-topright .p-dialog-enter-active,
-.p-dialog-topright .p-dialog-leave-active,
-.p-dialog-bottomleft .p-dialog-enter-active,
-.p-dialog-bottomleft .p-dialog-leave-active,
-.p-dialog-bottomright .p-dialog-enter-active,
-.p-dialog-bottomright .p-dialog-leave-active {
-    @apply transition-all duration-300 ease-out
-}
-
-.p-dialog-top .p-dialog-enter-from,
-.p-dialog-top .p-dialog-leave-to {
-    @apply [transform:translate3d(0,-100%,0)]
-}
-
-.p-dialog-bottom .p-dialog-enter-from,
-.p-dialog-bottom .p-dialog-leave-to {
-    @apply [transform:translate3d(0,100%,0)]
-}
-
-.p-dialog-left .p-dialog-enter-from,
-.p-dialog-left .p-dialog-leave-to,
-.p-dialog-topleft .p-dialog-enter-from,
-.p-dialog-topleft .p-dialog-leave-to,
-.p-dialog-bottomleft .p-dialog-enter-from,
-.p-dialog-bottomleft .p-dialog-leave-to {
-    @apply [transform:translate3d(-100%,0,0)]
-}
-
-.p-dialog-right .p-dialog-enter-from,
-.p-dialog-right .p-dialog-leave-to,
-.p-dialog-topright .p-dialog-enter-from,
-.p-dialog-topright .p-dialog-leave-to,
-.p-dialog-bottomright .p-dialog-enter-from,
-.p-dialog-bottomright .p-dialog-leave-to {
-    @apply [transform:translate3d(100%,0,0)]
-}
-
-.p-dialog-left:dir(rtl) .p-dialog-enter-from,
-.p-dialog-left:dir(rtl) .p-dialog-leave-to,
-.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,
-.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,
-.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,
-.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to {
-    @apply [transform:translate3d(100%,0,0)]
-}
-.p-dialog-right:dir(rtl) .p-dialog-enter-from,
-.p-dialog-right:dir(rtl) .p-dialog-leave-to,
-.p-dialog-topright:dir(rtl) .p-dialog-enter-from,
-.p-dialog-topright:dir(rtl) .p-dialog-leave-to,
-.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,
-.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to {
-    @apply [transform:translate3d(-100%,0,0)]
-}
-
-.p-dialog-maximized {
-    @apply !w-screen !h-screen top-0 start-0 max-h-full rounded-none
-}
-
-.p-dialog-maximized .p-dialog-content {
-    @apply flex-grow
-}
diff --git a/apps/volt/assets/styles/primevue/divider.css b/apps/volt/assets/styles/primevue/divider.css
deleted file mode 100644
index 1bb448bb0..000000000
--- a/apps/volt/assets/styles/primevue/divider.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.p-divider-horizontal {
-    @apply flex w-full relative items-center my-4 mx-0 py-0 px-4
-        before:absolute before:block before:top-1/2 before:start-0 before:w-full
-        before:border-t before:border-surface-200 dark:before:border-surface-700
-}
-
-.p-divider-horizontal .p-divider-content {
-    @apply py-0 px-2
-}
-
-.p-divider-vertical {
-    @apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0
-        before:absolute before:block before:top-0 before:start-1/2 before:h-full
-        before:border-s before:border-surface-200 before:dark:border-surface-700
-}
-
-.p-divider.p-divider-vertical .p-divider-content {
-    @apply py-2 px-0
-}
-
-.p-divider-content {
-    @apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-}
-
-.p-divider-solid.p-divider-horizontal:before {
-    @apply border-solid
-}
-
-.p-divider-solid.p-divider-vertical:before {
-    @apply border-solid
-}
-
-.p-divider-dashed.p-divider-horizontal:before {
-    @apply border-dashed
-}
-
-.p-divider-dashed.p-divider-vertical:before {
-    @apply border-dashed
-}
-
-.p-divider-dotted.p-divider-horizontal:before {
-    @apply border-dotted
-}
-
-.p-divider-dotted.p-divider-vertical:before {
-    @apply border-dotted
-}
-
-.p-divider-left:dir(rtl),
-.p-divider-right:dir(rtl) {
-    @apply flex-row-reverse
-}
diff --git a/apps/volt/assets/styles/primevue/dock.css b/apps/volt/assets/styles/primevue/dock.css
deleted file mode 100644
index 54d5f9cfc..000000000
--- a/apps/volt/assets/styles/primevue/dock.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.p-dock {
-    @apply absolute z-10 flex justify-center items-center pointer-events-none
-}
-
-.p-dock-list-container {
-    @apply flex pointer-events-auto bg-white/10 border border-white/10 p-2 rounded-xl
-}
-
-.p-dock-list {
-    @apply m-0 p-0 list-none flex items-center justify-center outline-none
-}
-
-.p-dock-item {
-    @apply transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform p-2 rounded-md
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-dock-item-link {
-    @apply flex flex-col items-center justify-center relative cursor-default w-12 h-12
-}
-
-.p-dock-top {
-    @apply start-0 top-0 w-full
-}
-
-.p-dock-top .p-dock-item {
-    @apply origin-[center_top]
-}
-
-.p-dock-bottom {
-    @apply start-0 bottom-0 w-full
-}
-
-.p-dock-bottom .p-dock-item {
-    @apply origin-[center_bottom]
-}
-
-.p-dock-right {
-    @apply end-0 top-0 h-full
-}
-
-.p-dock-right .p-dock-item {
-    @apply origin-[center_right]
-}
-
-.p-dock-right .p-dock-list {
-    @apply flex-col
-}
-
-.p-dock-left {
-    @apply start-0 top-0 h-full
-}
-
-.p-dock-left .p-dock-item {
-    @apply origin-[center_left]
-}
-
-.p-dock-left .p-dock-list {
-    @apply flex-col
-}
-
-.p-dock-mobile.p-dock-top .p-dock-list-container,
-.p-dock-mobile.p-dock-bottom .p-dock-list-container {
-    @apply overflow-x-auto w-full
-}
-
-.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,
-.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
-    @apply mt-0 mx-auto
-}
-
-.p-dock-mobile.p-dock-left .p-dock-list-container,
-.p-dock-mobile.p-dock-right .p-dock-list-container {
-    @apply overflow-y-auto h-full
-}
-
-.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,
-.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
-    @apply mt-auto mx-0
-}
-
-.p-dock-mobile .p-dock-list .p-dock-item {
-    @apply transform-none m-0
-}
diff --git a/apps/volt/assets/styles/primevue/drawer.css b/apps/volt/assets/styles/primevue/drawer.css
deleted file mode 100644
index 1190e87ec..000000000
--- a/apps/volt/assets/styles/primevue/drawer.css
+++ /dev/null
@@ -1,94 +0,0 @@
-@import './button';
-
-.p-drawer {
-    @apply flex flex-col pointer-events-auto relative transition-transform duration-300
-        border border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
-}
-
-.p-drawer {
-    @apply [transform:translate3d(0,0,0)]
-}
-
-.p-drawer-content {
-    @apply overflow-y-auto flex-grow pt-0 pb-5 px-5
-}
-
-.p-drawer-header {
-    @apply flex items-center justify-between flex-shrink-0 p-5
-}
-
-.p-drawer-footer {
-    @apply p-5
-}
-
-.p-drawer-title {
-    @apply font-semibold text-2xl
-}
-
-.p-drawer-full .p-drawer {
-    @apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0
-}
-
-.p-drawer-left .p-drawer-enter-from,
-.p-drawer-left .p-drawer-leave-to {
-    @apply -translate-x-full
-}
-
-.p-drawer-right .p-drawer-enter-from,
-.p-drawer-right .p-drawer-leave-to {
-    @apply translate-x-full
-}
-
-.p-drawer-top .p-drawer-enter-from,
-.p-drawer-top .p-drawer-leave-to {
-    @apply -translate-y-full
-}
-
-.p-drawer-bottom .p-drawer-enter-from,
-.p-drawer-bottom .p-drawer-leave-to {
-    @apply translate-y-full
-}
-
-.p-drawer-full .p-drawer-enter-from,
-.p-drawer-full .p-drawer-leave-to {
-    @apply opacity-0
-}
-
-.p-drawer-full .p-drawer-enter-active,
-.p-drawer-full .p-drawer-leave-active {
-    @apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]
-}
-
-.p-drawer-left .p-drawer {
-    @apply w-80 h-full border-r
-}
-
-.p-drawer-right .p-drawer {
-    @apply w-80 h-full border-s
-}
-
-.p-drawer-top .p-drawer {
-    @apply h-40 w-full border-b
-}
-
-.p-drawer-bottom .p-drawer {
-    @apply h-40 w-full border-t
-}
-
-.p-drawer-left .p-drawer-content,
-.p-drawer-right .p-drawer-content,
-.p-drawer-top .p-drawer-content,
-.p-drawer-bottom .p-drawer-content {
-    @apply w-full h-full
-}
-
-.p-drawer-open {
-    @apply flex
-}
-
-.p-overlay-mask:dir(rtl) {
-    @apply flex-row-reverse;
-}
diff --git a/apps/volt/assets/styles/primevue/fieldset.css b/apps/volt/assets/styles/primevue/fieldset.css
deleted file mode 100644
index 7faed4e1a..000000000
--- a/apps/volt/assets/styles/primevue/fieldset.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.p-fieldset {
-    @apply border border-surface-200 dark:border-surface-700 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        px-[1.125rem] pt-0 pb-[1.125rem]
-}
-
-.p-fieldset-legend {
-    @apply border border-transparent rounded-md px-3 py-2
-        transition-colors duration-200
-}
-
-.p-fieldset-toggleable > .p-fieldset-legend {
-    @apply p-0
-}
-
-.p-fieldset-toggle-button {
-    @apply select-none overflow-hidden relative
-        flex items-center justify-center gap-2
-        px-3 py-2
-        border-none rounded-md
-        bg-surface-0 dark:bg-surface-900
-        hover:bg-surface-100 dark:hover:bg-surface-800
-        text-surface-700 dark:text-surface-0
-        hover:text-surface-800 dark:hover:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        transition-colors duration-200
-}
-
-.p-fieldset-legend-label {
-    @apply font-semibold;
-}
-
-.p-fieldset-toggle-icon {
-    @apply text-surface-500 dark:text-surface-400
-        transition-colors duration-200
-}
-
-.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon {
-    @apply text-surface-600 dark:text-surface-300
-}
-
-.p-fieldset .p-fieldset-content {
-    @apply p-0
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/fileupload.css b/apps/volt/assets/styles/primevue/fileupload.css
deleted file mode 100644
index 74ce46d9a..000000000
--- a/apps/volt/assets/styles/primevue/fileupload.css
+++ /dev/null
@@ -1,57 +0,0 @@
-@import './button';
-@import './message';
-@import './progressbar';
-
-.p-fileupload input[type="file"] {
-    @apply hidden
-}
-
-.p-fileupload-advanced {
-    @apply border border-surface-200 dark:border-surface-700 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-fileupload-header {
-    @apply flex items-center p-[1.125rem] gap-2 text-surface-700 dark:text-surface-0
-}
-
-.p-fileupload-content {
-    @apply border border-transparent relative transition-colors duration-200 pt-0 px-[1.125rem] pb-[1.125rem]
-}
-
-.p-fileupload-content .p-progressbar {
-    @apply w-full absolute top-0 start-0 h-1
-}
-
-.p-fileupload-file-list {
-    @apply flex flex-col gap-2 mt-[1.125rem]
-}
-
-.p-fileupload-file {
-    @apply flex flex-wrap items-center p-4 border-b border-surface-200 dark:border-surface-700 gap-2 last:border-b-0
-}
-
-.p-fileupload-file-info {
-    @apply flex flex-col gap-2
-}
-
-.p-fileupload-file-thumbnail {
-    @apply flex-shrink-0
-}
-
-.p-fileupload-file-actions {
-    @apply ms-auto
-}
-
-.p-fileupload-highlight {
-    @apply border border-dashed border-primary
-}
-
-.p-fileupload-advanced .p-message {
-    @apply mt-0
-}
-
-.p-fileupload-basic {
-    @apply flex flex-wrap items-center justify-center gap-2
-}
diff --git a/apps/volt/assets/styles/primevue/floatlabel.css b/apps/volt/assets/styles/primevue/floatlabel.css
deleted file mode 100644
index f2544ee7c..000000000
--- a/apps/volt/assets/styles/primevue/floatlabel.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.p-floatlabel {
-    @apply block relative
-}
-
-.p-floatlabel label {
-    @apply absolute pointer-events-none top-1/2 -translate-y-1/2 transition-all duration-200 ease-out leading-none font-medium
-        start-3 text-surface-500 dark:text-surface-400
-}
-
-.p-floatlabel:has(.p-textarea) label {
-    @apply top-2 translate-y-0
-}
-
-.p-floatlabel:has(.p-inputicon:first-child) label {
-    @apply start-10
-}
-
-.p-floatlabel:has(.p-invalid) label {
-    @apply text-red-400 dark:text-red-300
-}
-
-.p-floatlabel:has(input:focus) label,
-.p-floatlabel:has(input.p-filled) label,
-.p-floatlabel:has(input:-webkit-autofill) label,
-.p-floatlabel:has(textarea:focus) label,
-.p-floatlabel:has(textarea.p-filled) label,
-.p-floatlabel:has(.p-inputwrapper-focus) label,
-.p-floatlabel:has(.p-inputwrapper-filled) label {
-    @apply -top-5 translate-y-0 text-xs font-normal
-}
-
-.p-floatlabel:has(input.p-filled) label,
-.p-floatlabel:has(textarea.p-filled) label,
-.p-floatlabel:has(.p-inputwrapper-filled) label {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-floatlabel:has(input:focus) label,
-.p-floatlabel:has(input:-webkit-autofill) label,
-.p-floatlabel:has(textarea:focus) label ,
-.p-floatlabel:has(.p-inputwrapper-focus) label  {
-    @apply text-primary
-}
-
-.p-floatlabel-in .p-inputtext,
-.p-floatlabel-in .p-textarea,
-.p-floatlabel-in .p-select-label,
-.p-floatlabel-in .p-multiselect-label,
-.p-floatlabel-in .p-autocomplete-input-multiple,
-.p-floatlabel-in .p-cascadeselect-label,
-.p-floatlabel-in .p-treeselect-label {
-    @apply pt-6 pb-2
-}
-
-.p-floatlabel-in:has(input:focus) label,
-.p-floatlabel-in:has(input.p-filled) label,
-.p-floatlabel-in:has(input:-webkit-autofill) label,
-.p-floatlabel-in:has(textarea:focus) label,
-.p-floatlabel-in:has(textarea.p-filled) label,
-.p-floatlabel-in:has(.p-inputwrapper-focus) label,
-.p-floatlabel-in:has(.p-inputwrapper-filled) label {
-    @apply top-2
-}
-
-.p-floatlabel-on:has(input:focus) label,
-.p-floatlabel-on:has(input.p-filled) label,
-.p-floatlabel-on:has(input:-webkit-autofill) label,
-.p-floatlabel-on:has(textarea:focus) label,
-.p-floatlabel-on:has(textarea.p-filled) label,
-.p-floatlabel-on:has(.p-inputwrapper-focus) label,
-.p-floatlabel-on:has(.p-inputwrapper-filled) label {
-    @apply top-0 -translate-y-1/2 rounded-sm bg-surface-0 dark:bg-surface-950 py-0 px-[0.125rem]
-}
diff --git a/apps/volt/assets/styles/primevue/galleria.css b/apps/volt/assets/styles/primevue/galleria.css
deleted file mode 100644
index e4edff962..000000000
--- a/apps/volt/assets/styles/primevue/galleria.css
+++ /dev/null
@@ -1,244 +0,0 @@
-.p-galleria {
-    @apply overflow-hidden border border-surface-200 dark:border-surface-700 rounded-md
-}
-
-.p-galleria-content {
-    @apply flex flex-col
-}
-
-.p-galleria-items-container {
-    @apply flex flex-col relative
-}
-
-.p-galleria-items {
-    @apply relative flex h-full
-}
-
-.p-galleria-nav-button {
-    @apply absolute top-1/2 inline-flex justify-center items-center overflow-hidden select-none border-none cursor-pointer
-        w-12 h-12 transition-colors duration-200 p-0 -mt-12 mx-2 mb-0 rounded-full
-        bg-white/10 text-surface-100 enabled:hover:bg-white/20 enabled:hover:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-galleria-next-icon,
-.p-galleria-prev-icon {
-    @apply text-2xl w-6 h-6
-}
-
-.p-galleria-prev-button {
-    @apply start-0
-}
-
-.p-galleria-next-button {
-    @apply end-0
-}
-
-.p-galleria-prev-button:dir(rtl) {
-    @apply start-auto end-0
-}
-.p-galleria-next-button:dir(rtl) {
-    @apply end-auto start-0
-}
-
-.p-galleria-item {
-    @apply flex justify-center items-center h-full w-full
-}
-
-.p-galleria-hover-navigators .p-galleria-nav-button {
-    @apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out
-}
-
-.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
-    @apply pointer-events-auto opacity-100
-}
-
-.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
-    @apply pointer-events-none
-}
-
-.p-galleria-caption {
-    @apply absolute bottom-0 left-0 w-full bg-black/5 text-surface-100 p-4
-}
-
-.p-galleria-thumbnails {
-    @apply flex flex-col overflow-auto flex-shrink-0
-}
-
-.p-galleria-thumbnail-nav-button {
-    @apply self-center flex-grow-0 flex-shrink-0 basis-auto justify-center items-center overflow-hidden relative
-        my-0 mx-2 p-0 border-none select-none cursor-pointer w-8 h-8 rounded-md transition-colors duration-200 bg-transparent
-        text-surface-600 hover:bg-surface-100 hover:text-surface-700
-        dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
-.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {
-    @apply text-base w-4 h-4
-}
-
-.p-galleria-thumbnails-content {
-    @apply flex flex-row bg-surface-0 dark:bg-surface-900 py-4 px-1
-}
-
-.p-galleria-thumbnails-viewport {
-    @apply overflow-hidden w-full
-}
-
-.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),
-.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {
-    @apply rotate-180
-}
-
-.p-galleria-thumbnail-items {
-    @apply flex
-}
-
-.p-galleria-thumbnail-item {
-    @apply overflow-auto flex items-center justify-center cursor-pointer opacity-50
-}
-
-.p-galleria-thumbnail {
-    @apply outline-transparent transition-opacity duration-300 hover:opacity-100
-}
-
-.p-galleria-thumbnail-item-current {
-    @apply opacity-100
-}
-
-.p-galleria-thumbnails-left .p-galleria-content,
-.p-galleria-thumbnails-right .p-galleria-content {
-    @apply flex-row
-}
-
-.p-galleria-thumbnails-left .p-galleria-items-container,
-.p-galleria-thumbnails-right .p-galleria-items-container {
-    @apply flex-row
-}
-
-.p-galleria-thumbnails-left .p-galleria-items-container,
-.p-galleria-thumbnails-top .p-galleria-items-container {
-    @apply order-2
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnails,
-.p-galleria-thumbnails-top .p-galleria-thumbnails {
-    @apply order-1
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnails-content,
-.p-galleria-thumbnails-right .p-galleria-thumbnails-content {
-    @apply flex-col flex-grow
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
-.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
-    @apply flex-col h-full
-}
-
-.p-galleria-indicator-list {
-    @apply flex items-center justify-center p-4 gap-2 m-0 list-none
-}
-
-.p-galleria-indicator-button {
-    @apply inline-flex items-center w-4 h-4 rounded-full m-0 p-0 border-none select-none cursor-pointer transition-colors duration-200
-        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-galleria-indicator-active .p-galleria-indicator-button {
-    @apply bg-primary
-}
-
-.p-galleria-indicators-left .p-galleria-items-container,
-.p-galleria-indicators-right .p-galleria-items-container {
-    @apply flex-row items-center
-}
-
-.p-galleria-indicators-left .p-galleria-items,
-.p-galleria-indicators-top .p-galleria-items {
-    @apply order-2
-}
-
-.p-galleria-indicators-left .p-galleria-indicator-list,
-.p-galleria-indicators-top .p-galleria-indicator-list {
-    @apply order-1
-}
-
-.p-galleria-indicators-left .p-galleria-indicator-list,
-.p-galleria-indicators-right .p-galleria-indicator-list {
-    @apply flex-col
-}
-
-.p-galleria-inset-indicators .p-galleria-indicator-list {
-    @apply absolute flex z-10 bg-black/50
-}
-
-.p-galleria-inset-indicators .p-galleria-indicator-button {
-    @apply bg-white/40 hover:bg-white/60
-}
-
-.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
-    @apply bg-white/90
-}
-
-.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
-    @apply top-0 left-0 w-full items-start
-}
-
-.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
-    @apply right-0 top-0 h-full items-end
-}
-
-.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
-    @apply bottom-0 left-0 w-full items-end
-}
-
-.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
-    @apply left-0 top-0 h-full items-start
-}
-
-.p-galleria-mask {
-    @apply fixed top-0 left-0 w-full h-full flex items-center justify-center
-}
-
-.p-galleria-close-button {
-    @apply absolute top-0 right-0 flex items-center justify-center overflow-hidden m-2 rounded-full
-        transition-colors duration-200 select-none cursor-pointer w-12 h-12 p-0 border-none
-        bg-white/10 text-surface-50 hover:bg-white/20 hover:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-galleria-close-icon {
-    @apply text-2xl w-6 h-6
-}
-
-.p-galleria-mask .p-galleria-nav-button {
-    @apply fixed top-1/2
-}
-
-.p-galleria-enter-active {
-    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
-}
-
-.p-galleria-leave-active {
-    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
-}
-
-.p-galleria-enter-from,
-.p-galleria-leave-to {
-    @apply opacity-0 scale-75
-}
-
-.p-galleria-enter-active .p-galleria-nav-button {
-    @apply opacity-0
-}
-
-.p-items-hidden .p-galleria-thumbnail-item {
-    @apply invisible
-}
-
-.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
-    @apply visible
-}
diff --git a/apps/volt/assets/styles/primevue/iconfield.css b/apps/volt/assets/styles/primevue/iconfield.css
deleted file mode 100644
index d7aaf1118..000000000
--- a/apps/volt/assets/styles/primevue/iconfield.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.p-iconfield {
-    @apply relative
-}
-
-.p-inputicon {
-    @apply absolute top-1/2 -mt-2 text-surface-400 leading-none
-}
-
-.p-iconfield .p-inputicon:first-child {
-    @apply start-3
-}
-
-.p-iconfield .p-inputicon:last-child {
-    @apply end-3
-}
-
-.p-iconfield .p-inputtext:not(:first-child) {
-    @apply ps-10
-}
-
-.p-iconfield .p-inputtext:not(:last-child) {
-    @apply pe-10
-}
diff --git a/apps/volt/assets/styles/primevue/iftalabel.css b/apps/volt/assets/styles/primevue/iftalabel.css
deleted file mode 100644
index dc323f922..000000000
--- a/apps/volt/assets/styles/primevue/iftalabel.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.p-iftalabel {
-    @apply block relative
-}
-
-.p-iftalabel label {
-    @apply absolute pointer-events-none top-2 transition-all ease-out duration-200 leading-none text-xs font-medium start-3 text-surface-500 dark:text-surface-400
-}
-
-.p-iftalabel .p-inputtext,
-.p-iftalabel .p-textarea,
-.p-iftalabel .p-select-label,
-.p-iftalabel .p-multiselect-label,
-.p-iftalabel .p-autocomplete-input-multiple,
-.p-iftalabel .p-cascadeselect-label,
-.p-iftalabel .p-treeselect-label {
-    @apply pt-6 pb-2
-}
-
-.p-iftalabel:has(.p-invalid) label {
-    @apply text-red-400 dark:text-red-300
-}
-
-.p-iftalabel:has(input:focus) label ,
-.p-iftalabel:has(input:-webkit-autofill) label,
-.p-iftalabel:has(textarea:focus) label ,
-.p-iftalabel:has(.p-inputwrapper-focus) label  {
-    @apply text-primary
-}
-
-.p-iftalabel .p-inputicon {
-    @apply top-6 translate-y-1/4 mt-0
-}
diff --git a/apps/volt/assets/styles/primevue/image.css b/apps/volt/assets/styles/primevue/image.css
deleted file mode 100644
index 7cb3e4616..000000000
--- a/apps/volt/assets/styles/primevue/image.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.p-image-mask {
-    @apply flex items-center justify-center
-}
-
-.p-image-preview {
-    @apply relative inline-flex leading-none
-}
-
-.p-image-preview-mask {
-    @apply absolute start-0 top-0 w-full h-full flex items-center justify-center opacity-0
-        border-none p-0 cursor-pointer bg-transparent text-surface-200 transition-all duration-200
-}
-
-.p-image-preview:hover > .p-image-preview-mask {
-    @apply opacity-100 cursor-pointer bg-black/40 dark:bg-black/60
-}
-
-.p-image-preview-icon {
-    @apply text-2xl w-6 h-6
-}
-
-.p-image-toolbar {
-    @apply absolute top-4 end-4 start-auto bottom-auto flex z-10 p-2 bg-white/10 border border-white/20 rounded-3xl gap-2;
-}
-
-.p-image-action {
-    @apply inline-flex justify-center items-center text-surface-50 bg-transparent w-12 h-12 m-0 p-0
-        border-none cursor-pointer select-none rounded-full transition-colors duration-200
-        hover:text-surface-0 hover:bg-white/10
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-image-action .p-icon {
-    @apply text-2xl h-6 w-6
-}
-
-.p-image-action.p-disabled {
-    @apply pointer-events-auto
-}
-
-.p-image-original {
-    @apply transition-transform duration-150 max-w-[100vw] max-h-[100vh]
-}
-
-.p-image-original-enter-active {
-    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
-}
-
-.p-image-original-leave-active {
-    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
-}
-
-.p-image-original-enter-from,
-.p-image-original-leave-to {
-    @apply opacity-0 scale-75
-}
diff --git a/apps/volt/assets/styles/primevue/imagecompare.css b/apps/volt/assets/styles/primevue/imagecompare.css
deleted file mode 100644
index 64151b4dc..000000000
--- a/apps/volt/assets/styles/primevue/imagecompare.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.p-imagecompare {
-    @apply relative overflow-hidden w-full aspect-video
-}
-
-.p-imagecompare img {
-    @apply w-full h-full absolute
-}
-
-.p-imagecompare img + img {
-    @apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]
-}
-
-.p-imagecompare:dir(rtl) img + img {
-    @apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]
-}
-
-.p-imagecompare-slider {
-    @apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200
-        hover:w-[calc(100%+2rem)] hover:-ms-4
-}
-
-.p-imagecompare-slider::-webkit-slider-thumb {
-    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-imagecompare-slider::-moz-range-thumb {
-    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-imagecompare-slider:hover::-webkit-slider-thumb {
-    @apply bg-white/40 h-8 w-8
-}
-
-.p-imagecompare-slider:hover::-moz-range-thumb {
-    @apply bg-white/40 h-8 w-8
-}
diff --git a/apps/volt/assets/styles/primevue/inplace.css b/apps/volt/assets/styles/primevue/inplace.css
deleted file mode 100644
index ec4805db7..000000000
--- a/apps/volt/assets/styles/primevue/inplace.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.p-inplace-display {
-    @apply inline cursor-pointer border border-transparent px-3 py-2 rounded-md
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        transition-colors duration-200
-}
-
-.p-inplace-display:not(.p-disabled):hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-inplace-content {
-    @apply block
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/inputgroup.css b/apps/volt/assets/styles/primevue/inputgroup.css
deleted file mode 100644
index 99db68584..000000000
--- a/apps/volt/assets/styles/primevue/inputgroup.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.p-inputgroup,
-.p-inputgroup .p-floatlabel,
-.p-inputgroup .p-iftalabel {
-    @apply flex items-stretch w-full
-}
-
-.p-inputgroup .p-inputtext,
-.p-inputgroup .p-inputwrapper {
-    @apply flex-auto w-[1%]
-}
-
-.p-inputgroupaddon {
-    @apply flex items-center justify-center p-2 min-w-10
-        border-y border-surface-300 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-950 text-surface-400
-}
-
-.p-inputgroupaddon:first-child,
-.p-inputgroupaddon + .p-inputgroupaddon {
-    @apply border-s
-}
-
-.p-inputgroupaddon:last-child {
-    @apply border-e
-}
-
-.p-inputgroup > .p-component,
-.p-inputgroup > .p-inputwrapper > .p-component,
-.p-inputgroup > .p-floatlabel > .p-component,
-.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component,
-.p-inputgroup > .p-iftalabel > .p-component,
-.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component {
-    @apply rounded-none m-0
-}
-
-.p-inputgroupaddon:first-child,
-.p-inputgroup > .p-component:first-child,
-.p-inputgroup > .p-inputwrapper:first-child > .p-component,
-.p-inputgroup > .p-floatlabel:first-child > .p-component,
-.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component,
-.p-inputgroup > .p-iftalabel:first-child > .p-component,
-.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component {
-    @apply rounded-s-md
-}
-
-.p-inputgroupaddon:last-child,
-.p-inputgroup > .p-component:last-child,
-.p-inputgroup > .p-inputwrapper:last-child > .p-component,
-.p-inputgroup > .p-floatlabel:last-child > .p-component,
-.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component,
-.p-inputgroup > .p-iftalabel:last-child > .p-component,
-.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component {
-    @apply rounded-e-md
-}
-
-.p-inputgroup .p-component:focus,
-.p-inputgroup .p-component.p-focus,
-.p-inputgroup .p-inputwrapper-focus,
-.p-inputgroup .p-component:focus ~ label,
-.p-inputgroup .p-component.p-focus ~ label,
-.p-inputgroup .p-inputwrapper-focus ~ label {
-    @apply z-10
-}
-
-.p-inputgroup > .p-button:not(.p-button-icon-only) {
-    @apply w-auto
-}
diff --git a/apps/volt/assets/styles/primevue/inputnumber.css b/apps/volt/assets/styles/primevue/inputnumber.css
deleted file mode 100644
index bdef17232..000000000
--- a/apps/volt/assets/styles/primevue/inputnumber.css
+++ /dev/null
@@ -1,84 +0,0 @@
-@import './inputtext';
-
-.p-inputnumber {
-    @apply inline-flex relative
-}
-
-.p-inputnumber-button {
-    @apply flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
-        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
-        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
-        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
-        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
-}
-
-.p-inputnumber-stacked .p-inputnumber-button {
-    @apply relative flex-auto border-none
-}
-
-.p-inputnumber-stacked .p-inputnumber-button-group {
-    @apply flex flex-col absolute top-px end-px h-[calc(100%-2px)] z-10
-}
-
-.p-inputnumber-stacked .p-inputnumber-increment-button {
-    @apply p-0 rounded-tr-[5px]
-}
-
-.p-inputnumber-stacked .p-inputnumber-decrement-button {
-    @apply p-0 rounded-br-[5px]
-}
-
-.p-inputnumber-horizontal .p-inputnumber-increment-button {
-    @apply order-3 rounded-e-md border-s-0
-}
-
-.p-inputnumber-horizontal .p-inputnumber-input {
-    @apply order-2 rounded-none
-}
-
-.p-inputnumber-horizontal .p-inputnumber-decrement-button {
-    @apply order-1 rounded-s-md border-r-0
-}
-
-.p-floatlabel:has(.p-inputnumber-horizontal) label {
-    @apply ms-10
-}
-
-.p-inputnumber-vertical {
-    @apply flex-col
-}
-
-.p-inputnumber-vertical .p-inputnumber-button {
-    @apply py-2
-}
-
-.p-inputnumber-vertical .p-inputnumber-increment-button {
-    @apply order-1 rounded-ss-md rounded-se-md w-full border-b-0
-}
-
-.p-inputnumber-vertical .p-inputnumber-input {
-    @apply order-2 rounded-none text-center
-}
-
-.p-inputnumber-vertical .p-inputnumber-decrement-button {
-    @apply order-3 rounded-ee-md rounded-es-md w-full border-t-0
-}
-
-.p-inputnumber-input {
-    @apply flex-auto
-}
-
-.p-inputnumber-fluid {
-    @apply w-full
-}
-
-.p-inputnumber-fluid .p-inputnumber-input {
-    @apply w-[1%]
-}
-
-.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
-    @apply w-full
-}
diff --git a/apps/volt/assets/styles/primevue/inputotp.css b/apps/volt/assets/styles/primevue/inputotp.css
deleted file mode 100644
index a0b9b672f..000000000
--- a/apps/volt/assets/styles/primevue/inputotp.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@import './inputtext';
-
-.p-inputotp {
-    @apply flex items-center gap-2
-}
-
-.p-inputotp-input {
-    @apply text-center w-10
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/inputtext.css b/apps/volt/assets/styles/primevue/inputtext.css
deleted file mode 100644
index 7a05e6a3f..000000000
--- a/apps/volt/assets/styles/primevue/inputtext.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.p-inputtext {
-    @apply appearance-none rounded-md
-        border border-surface-300 dark:border-surface-700 
-        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
-        enabled:focus:border-primary dark:enabled:focus:border-primary
-        bg-surface-0 dark:bg-surface-950
-        text-surface-700 dark:text-surface-0
-        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 disabled:opacity-100
-        placeholder:text-surface-500 dark:placeholder:text-surface-400
-        px-3 py-2
-        transition-colors duration-200
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        outline-none
-}
-
-.p-inputtext.p-invalid {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-inputtext.p-variant-filled {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-inputtext-sm {
-    @apply text-sm px-[0.625rem] py-[0.375rem]
-}
-
-.p-inputtext-lg {
-    @apply text-lg px-[0.875rem] py-[0.625rem]
-}
-
-.p-inputtext-fluid {
-    @apply w-full
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/knob.css b/apps/volt/assets/styles/primevue/knob.css
deleted file mode 100644
index 5304c9e23..000000000
--- a/apps/volt/assets/styles/primevue/knob.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.p-knob-range {
-    @apply fill-none transition-[stroke] duration-100 ease-in
-}
-
-.p-knob-text {
-    @apply text-xl text-center
-}
-
-.p-knob svg {
-    @apply rounded-full
-        transition-colors duration-200
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-knob svg path:first-child {
-    @apply stroke-surface-200 dark:stroke-surface-700
-}
-
-.p-knob svg path + path {
-    @apply stroke-primary
-}
-
-.p-knob svg text {
-    @apply fill-surface-500 dark:fill-surface-400
-}
-
-.p-knob-value {
-    animation-name: p-knob-dash-frame;
-    animation-fill-mode: forwards;
-    fill: none;
-}
-
-@keyframes p-knob-dash-frame {
-    100% {
-        stroke-dashoffset: 0;
-    }
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/listbox.css b/apps/volt/assets/styles/primevue/listbox.css
deleted file mode 100644
index 30b0235f9..000000000
--- a/apps/volt/assets/styles/primevue/listbox.css
+++ /dev/null
@@ -1,79 +0,0 @@
-@import './inputtext';
-@import './iconfield';
-
-.p-listbox {
-    @apply bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0
-        border border-surface-300 dark:border-surface-700 rounded-md
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        transition-colors duration-200
-}
-
-.p-listbox.p-focus {
-    @apply border-primary
-}
-
-.p-listbox.p-disabled {
-    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
-}
-
-.p-listbox.p-disabled .p-listbox-option {
-    @apply text-surface-500 dark:text-surface-400 cursor-default
-}
-
-.p-listbox.p-invalid {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-listbox-header {
-    @apply pt-2 pb-1 px-4
-}
-
-.p-listbox-filter {
-    @apply w-full
-}
-
-.p-listbox-list-container {
-    @apply overflow-auto
-}
-
-.p-listbox-list {
-    @apply list-none m-0 p-1 outline-none flex flex-col gap-[2px]
-}
-
-.p-listbox-option {
-    @apply flex items-center cursor-pointer relative overflow-hidden px-3 py-2 border-none rounded-sm
-        text-surface-700 dark:text-surface-0
-        transition-colors duration-200
-}
-
-.p-listbox-striped li:nth-child(even of .p-listbox-option) {
-    @apply bg-surface-50 dark:bg-surface-900
-}
-
-.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
-    @apply bg-highlight
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
-    @apply bg-highlight-emphasis
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-listbox-option-check-icon {
-    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0
-}
-
-.p-listbox-option-group {
-    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold 
-}
-
-.p-listbox-empty-message {
-    @apply px-3 py-2
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/megamenu.css b/apps/volt/assets/styles/primevue/megamenu.css
deleted file mode 100644
index 08a232bce..000000000
--- a/apps/volt/assets/styles/primevue/megamenu.css
+++ /dev/null
@@ -1,207 +0,0 @@
-.p-megamenu {
-    @apply relative flex items-center rounded-md gap-2
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700
-}
-
-.p-megamenu-start,
-.p-megamenu-end {
-    @apply flex items-center
-}
-
-.p-megamenu-root-list {
-    @apply m-0 p-0 list-none outline-none flex items-center flex-wrap gap-2
-}
-
-.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content {
-    @apply rounded-md
-}
-
-.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {
-    @apply px-3 py-2
-}
-
-.p-megamenu-item-content {
-    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
-}
-
-.p-megamenu-item-link {
-    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
-        px-3 py-2 gap-2 select-none outline-none
-}
-
-.p-megamenu-item-icon {
-    @apply text-surface-400 dark:text-surface-500
-}
-
-.p-megamenu-submenu-icon {
-    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
-}
-
-.p-megamenu-item.p-focus > .p-megamenu-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-megamenu-item-active > .p-megamenu-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-megamenu-overlay {
-    @apply hidden absolute w-auto z-10 start-0 min-w-full rounded-md
-        bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
-    @apply block
-}
-
-.p-megamenu-submenu {
-    @apply m-0 p-1 list-none min-w-52 flex flex-col gap-[2px]
-}
-
-.p-megamenu-submenu-label {
-    @apply px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
-}
-
-.p-megamenu-separator {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-megamenu-horizontal {
-    @apply items-center px-3 py-2
-}
-
-.p-megamenu-horizontal .p-megamenu-root-list {
-    @apply flex items-center flex-wrap gap-2
-}
-
-.p-megamenu-horizontal .p-megamenu-end {
-    @apply ms-auto self-center
-}
-
-.p-megamenu-vertical {
-    @apply inline-flex min-w-52 flex-col items-stretch p-1
-}
-
-.p-megamenu-vertical .p-megamenu-root-list {
-    @apply items-stretch flex-col gap-[2px]
-}
-
-.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
-    @apply start-full top-0
-}
-
-.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
-    @apply ms-auto
-}
-
-.p-megamenu-grid {
-    @apply flex
-}
-
-.p-megamenu-col-2,
-.p-megamenu-col-3,
-.p-megamenu-col-4,
-.p-megamenu-col-6,
-.p-megamenu-col-12 {
-    @apply flex-grow-0 flex-shrink-0 basis-auto p-2
-}
-
-.p-megamenu-col-2 {
-    @apply w-1/6;
-}
-
-.p-megamenu-col-3 {
-    @apply w-1/4
-}
-
-.p-megamenu-col-4 {
-    @apply w-1/3
-}
-
-.p-megamenu-col-6 {
-    @apply w-1/2
-}
-
-.p-megamenu-col-12 {
-    @apply w-full
-}
-
-.p-megamenu-button {
-    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full
-        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300
-        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        transition-colors duration-200
-}
-
-.p-megamenu-mobile {
-    @apply flex
-}
-
-.p-megamenu-mobile .p-megamenu-button {
-    @apply flex
-}
-
-.p-megamenu-mobile .p-megamenu-root-list {
-    @apply absolute hidden flex-col top-full start-0 z-10 w-full p-1 gap-[2px]
-        bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-megamenu-mobile-active .p-megamenu-root-list {
-    @apply flex
-}
-
-.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
-    @apply w-full static
-}
-
-.p-megamenu-mobile .p-megamenu-overlay {
-    @apply static border-none rounded-none shadow-none
-}
-
-.p-megamenu-mobile .p-megamenu-grid {
-    @apply flex-wrap overflow-auto max-h-[90%]
-}
-
-.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
-    @apply ms-auto transition-transform duration-[200ms]
-}
-
-.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
-    @apply -rotate-180
-}
diff --git a/apps/volt/assets/styles/primevue/menu.css b/apps/volt/assets/styles/primevue/menu.css
deleted file mode 100644
index 8bb37084d..000000000
--- a/apps/volt/assets/styles/primevue/menu.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.p-menu {
-    @apply bg-surface-0 dark:bg-surface-900 
-        text-surface-700 dark:text-surface-0 
-        border border-surface-200 dark:border-surface-700
-        rounded-md min-w-52
-}
-
-.p-menu-list {
-    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
-}
-
-.p-menu-item-content {
-    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
-}
-
-.p-menu-item-link {
-    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
-        px-3 py-2 gap-2 select-none outline-none
-}
-
-.p-menu-item-icon {
-    @apply text-surface-400 dark:text-surface-500
-}
-
-.p-menu-item.p-focus .p-menu-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0 
-}
-
-.p-menu-item.p-focus .p-menu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-menu-overlay {
-    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-menu-submenu-label {
-    @apply bg-transparent px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold
-}
-
-.p-menu-separator {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/menubar.css b/apps/volt/assets/styles/primevue/menubar.css
deleted file mode 100644
index c989af621..000000000
--- a/apps/volt/assets/styles/primevue/menubar.css
+++ /dev/null
@@ -1,169 +0,0 @@
-.p-menubar {
-    @apply flex items-center rounded-md px-3 py-2 gap-2
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700
-}
-
-.p-menubar-start,
-.p-megamenu-end {
-    @apply flex items-center
-}
-
-.p-menubar-root-list,
-.p-menubar-submenu {
-    @apply flex m-0 p-0 list-none outline-none
-}
-
-.p-menubar-root-list {
-    @apply items-center flex-wrap gap-2
-}
-
-.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
-    @apply rounded-md
-}
-
-.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
-    @apply px-3 py-2
-}
-
-.p-menubar-item-content {
-    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
-}
-
-.p-menubar-item-link {
-    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
-        px-3 py-2 gap-2 select-none outline-none
-}
-
-.p-menubar-item-icon {
-    @apply text-surface-400 dark:text-surface-500
-}
-
-.p-menubar-submenu-icon {
-    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
-}
-
-.p-menubar-submenu-icon:dir(rtl) {
-    @apply rotate-180
-}
-
-.p-menubar-item.p-focus > .p-menubar-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-menubar-item-active > .p-menubar-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-menubar-submenu {
-    @apply hidden absolute min-w-52 z-10
-        bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        flex-col p-1 gap-[2px] rounded-md
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-menubar-submenu .p-menubar-separator {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-menubar-submenu .p-menubar-item {
-    @apply relative
-}
-
- .p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu {
-    @apply block start-full top-0
-}
-
-.p-menubar-end {
-    @apply ms-auto self-center
-}
-
-.p-menubar-button {
-    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full
-        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300
-        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        transition-colors duration-200
-}
-
-.p-menubar-mobile {
-    @apply relative
-}
-
-.p-menubar-mobile .p-menubar-button {
-    @apply flex
-}
-
-.p-menubar-mobile .p-menubar-root-list {
-    @apply absolute hidden w-full flex-col top-full start-0 z-10 p-1 gap-[2px] rounded-md
-        border border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
-    @apply px-3 py-3
-}
-
-.p-menubar-mobile-active .p-menubar-root-list {
-    @apply flex
-}
-
-.p-menubar-mobile .p-menubar-root-list .p-menubar-item {
-    @apply w-full static
-}
-
-.p-menubar-mobile .p-menubar-root-list .p-menubar-separator {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon {
-    @apply ms-auto transition-transform duration-[200ms]
-}
-
-.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
-    @apply -rotate-180
-}
-
-.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon {
-    @apply transition-transform duration-200 rotate-90
-}
-
-.p-menubar-mobile  .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
-    @apply -rotate-90
-}
-
-.p-menubar-mobile .p-menubar-submenu {
-    @apply w-full static shadow-none border-none ps-4 pe-0
-}
diff --git a/apps/volt/assets/styles/primevue/message.css b/apps/volt/assets/styles/primevue/message.css
deleted file mode 100644
index 7ba971140..000000000
--- a/apps/volt/assets/styles/primevue/message.css
+++ /dev/null
@@ -1,212 +0,0 @@
-.p-message {
-    @apply rounded-md outline outline-1
-}
-
-.p-message-content {
-    @apply flex items-center px-3 py-2 gap-2 h-full
-}
-
-.p-message-icon {
-    @apply flex-shrink-0
-}
-
-.p-message-close-button {
-    @apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none
-        w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-}
-
-.p-message-info {
-    @apply bg-blue-50/95 outline-blue-200 text-blue-600
-        dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500
-        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
-}
-
-.p-message-info .p-message-close-button {
-    @apply hover:bg-blue-100 focus-visible:outline-blue-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
-}
-
-.p-message-info.p-message-outlined {
-    @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600
-}
-
-.p-message-info.p-message-simple {
-    @apply text-blue-500 dark:text-blue-600
-}
-
-.p-message-success {
-    @apply bg-green-50/95 outline-green-200 text-green-600
-        dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500
-        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
-}
-
-.p-message-success .p-message-close-button {
-    @apply hover:bg-green-100 focus-visible:outline-green-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
-}
-
-.p-message-success.p-message-outlined {
-    @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600
-}
-
-.p-message-success.p-message-simple {
-    @apply text-green-500 dark:text-green-600
-}
-
-.p-message-warn {
-    @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600
-        dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500
-        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
-}
-
-.p-message-warn .p-message-close-button {
-    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
-}
-
-.p-message-warn.p-message-outlined {
-    @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600
-}
-
-.p-message-warn.p-message-simple {
-    @apply text-yellow-500 dark:text-yellow-600
-}
-
-.p-message-error {
-    @apply bg-red-50/95 outline-red-200 text-red-600
-        dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500
-        shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]
-}
-
-.p-message-error .p-message-close-button {
-    @apply hover:bg-red-100 focus-visible:outline-red-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
-}
-
-.p-message-error.p-message-outlined {
-    @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600
-}
-
-.p-message-error.p-message-simple {
-    @apply text-red-500 dark:text-red-600
-}
-
-.p-message-secondary {
-    @apply bg-surface-100 outline-surface-200 text-surface-600
-        dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300
-        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
-}
-
-.p-message-secondary .p-message-close-button {
-    @apply hover:bg-surface-200 focus-visible:outline-surface-600
-        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
-}
-
-.p-message-secondary.p-message-outlined {
-    @apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600
-}
-
-.p-message-secondary.p-message-simple {
-    @apply text-surface-500 dark:text-surface-600
-}
-
-.p-message-contrast {
-    @apply bg-surface-900 outline-surface-950 text-surface-50
-        dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950
-        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
-}
-
-.p-message-contrast .p-message-close-button {
-    @apply hover:bg-surface-800 focus-visible:outline-surface-50
-        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
-}
-
-.p-message-contrast.p-message-outlined {
-    @apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0
-}
-
-.p-message-contrast.p-message-simple {
-    @apply text-surface-950 dark:text-surface-0
-}
-
-.p-message-text {
-    @apply text-base font-medium
-}
-
-.p-message-icon {
-    @apply text-lg w-[1.125rem] h-[1.125rem]
-}
-
-.p-message-enter-from {
-    @apply opacity-0
-}
-
-.p-message-enter-active {
-    @apply transition-opacity duration-300
-}
-
-.p-message.p-message-leave-from {
-    @apply max-h-[1000px]
-}
-
-.p-message.p-message-leave-to {
-    @apply max-h-0 opacity-0 m-0
-}
-
-.p-message-leave-active {
-    @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]
-}
-
-.p-message-leave-active .p-message-close-button {
-    @apply opacity-0
-}
-
-.p-message-sm .p-message-content {
-    @apply px-2.5 py-[0.375rem]
-}
-
-.p-message-sm .p-message-text {
-    @apply text-sm
-}
-
-.p-message-sm .p-message-icon {
-    @apply w-4 h-4 text-sm
-}
-
-.p-message-sm .p-message-close-icon {
-    @apply w-3.5 h-3.5 text-sm
-}
-
-.p-message-lg .p-message-content {
-    @apply px-3.5 py-2.5
-}
-
-.p-message-lg .p-message-text {
-    @apply text-xl
-}
-
-.p-message-lg .p-message-icon {
-    @apply w-5 h-5 text-xl
-}
-
-.p-message-lg .p-message-close-icon {
-    @apply w-[1.125rem] h-[1.125rem] text-xl
-}
-
-.p-message-outlined {
-    @apply bg-transparent outline outline-1
-}
-
-.p-message-simple {
-    @apply bg-transparent outline-none shadow-none
-}
-
-.p-message-simple .p-message-content {
-    @apply p-0
-}
-
-.p-message-outlined .p-message-close-button:hover,
-.p-message-simple .p-message-close-button:hover {
-    @apply bg-transparent
-}
diff --git a/apps/volt/assets/styles/primevue/metergroup.css b/apps/volt/assets/styles/primevue/metergroup.css
deleted file mode 100644
index 74227a115..000000000
--- a/apps/volt/assets/styles/primevue/metergroup.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.p-metergroup {
-    @apply flex gap-4
-}
-
-.p-metergroup-meters {
-    @apply flex bg-surface-200 dark:bg-surface-700 rounded-md
-}
-
-.p-metergroup-label-list {
-    @apply flex flex-wrap m-0 p-0 list-none
-}
-
-.p-metergroup-label {
-    @apply inline-flex items-center gap-2
-}
-
-.p-metergroup-label-marker {
-    @apply inline-flex w-2 h-2 rounded-full
-}
-
-.p-metergroup-label-icon {
-    @apply text-base w-4 h-4
-}
-
-.p-metergroup-horizontal {
-    @apply flex-col
-}
-
-.p-metergroup-label-list-horizontal {
-    @apply gap-4
-}
-
-.p-metergroup-horizontal .p-metergroup-meters {
-    @apply h-2
-}
-
-.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
-    @apply rounded-s-md
-}
-
-.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
-    @apply rounded-e-md
-}
-
-.p-metergroup-vertical {
-    @apply flex-row
-}
-
-.p-metergroup-label-list-vertical {
-    @apply flex-col gap-2
-}
-
-.p-metergroup-vertical .p-metergroup-meters {
-    @apply flex-col w-2 h-full
-}
-
-.p-metergroup-vertical .p-metergroup-label-list {
-    @apply items-start
-}
-
-.p-metergroup-vertical .p-metergroup-meter:first-of-type {
-    @apply rounded-ss-md rounded-se-md
-}
-
-.p-metergroup-vertical .p-metergroup-meter:last-of-type {
-    @apply rounded-ee-md rounded-es-md
-}
diff --git a/apps/volt/assets/styles/primevue/multiselect.css b/apps/volt/assets/styles/primevue/multiselect.css
deleted file mode 100644
index b53b8d4d0..000000000
--- a/apps/volt/assets/styles/primevue/multiselect.css
+++ /dev/null
@@ -1,143 +0,0 @@
-@import './checkbox';
-@import './chip';
-@import './inputtext';
-@import './iconfield';
-
-.p-multiselect {
-    @apply inline-flex cursor-pointer relative select-none rounded-md
-        bg-surface-0 dark:bg-surface-950
-        border border-surface-300 dark:border-surface-700
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        transition-colors duration-200
-}
-
-.p-multiselect:not(.p-disabled):hover {
-    @apply border-surface-400 dark:border-surface-600
-}
-
-.p-multiselect:not(.p-disabled).p-focus {
-    @apply border-primary
-}
-
-.p-multiselect.p-variant-filled {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-multiselect.p-invalid {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-multiselect.p-disabled {
-    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
-}
-
-.p-multiselect-dropdown {
-    @apply flex items-center justify-center shrink-0 bg-transparent
-        text-surface-500 dark:text-surface-400 w-10 rounded-e-md
-}
-
-.p-multiselect-clear-icon {
-    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
-}
-
-.p-multiselect-label-container {
-    @apply overflow-hidden flex-auto
-}
-
-.p-multiselect-label {
-    @apply flex items-center gap-1 whitespace-nowrap overflow-hidden text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0
-}
-
-.p-multiselect-label.p-placeholder {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-multiselect.p-disabled .p-multiselect-label {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-multiselect-label-empty {
-    @apply overflow-hidden opacity-0
-}
-
-.p-multiselect .p-multiselect-overlay {
-    @apply min-w-full
-}
-
-.p-multiselect-overlay {
-    @apply absolute top-0 left-0 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-multiselect-header {
-    @apply flex items-center pt-2 pb-1 px-4
-}
-
-.p-multiselect-header .p-checkbox {
-    @apply me-2
-}
-
-.p-multiselect-filter-container {
-    @apply flex-auto
-}
-
-.p-multiselect-filter {
-    @apply w-full
-}
-
-.p-multiselect-list-container {
-    @apply overflow-auto
-}
-
-.p-multiselect-list {
-    @apply m-0 p-1 list-none gap-[2px] flex flex-col
-}
-
-.p-multiselect-option {
-    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-3 py-2
-        rounded-sm text-surface-700 dark:text-surface-0 bg-transparent border-none
-        transition-colors duration-200
-}
-
-.p-multiselect-option:not(.p-disabled).p-focus {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-0
-}
-
-.p-multiselect-option-group {
-    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold
-}
-
-.p-multiselect-empty-message {
-    @apply px-3 py-2
-}
-
-.p-multiselect-label .p-chip {
-    @apply py-1 rounded-sm
-}
-
-.p-multiselect-label:has(.p-chip) {
-    @apply py-1 px-[0.375rem]
-}
-
-.p-multiselect-fluid {
-    @apply flex
-}
-
-.p-multiselect-sm .p-multiselect-label {
-    @apply text-sm px-[0.625rem] py-[0.375rem]
-}
-
-.p-multiselect-sm .p-multiselect-dropdown .p-icon {
-    @apply text-sm w-[0.875rem] h-[0.875rem]
-}
-
-.p-multiselect-lg .p-multiselect-label {
-    @apply text-lg px-[0.875rem] py-[0.625rem]
-}
-
-.p-multiselect-lg .p-multiselect-dropdown .p-icon {
-    @apply text-lg w-[1.125rem] h-[1.125rem]
-}
diff --git a/apps/volt/assets/styles/primevue/orderlist.css b/apps/volt/assets/styles/primevue/orderlist.css
deleted file mode 100644
index 5a5b79016..000000000
--- a/apps/volt/assets/styles/primevue/orderlist.css
+++ /dev/null
@@ -1,10 +0,0 @@
-@import './button';
-@import './listbox';
-
-.p-orderlist {
-    @apply flex gap-[1.125rem]
-}
-
-.p-orderlist-controls {
-    @apply flex flex-col justify-center gap-2
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/organizationchart.css b/apps/volt/assets/styles/primevue/organizationchart.css
deleted file mode 100644
index 69bbb496a..000000000
--- a/apps/volt/assets/styles/primevue/organizationchart.css
+++ /dev/null
@@ -1,71 +0,0 @@
-.p-organizationchart-table {
-    @apply border-spacing-0 border-separate my-0 mx-auto
-}
-
-.p-organizationchart-table > tbody > tr > td {
-    @apply text-center align-top py-0 px-3
-}
-
-.p-organizationchart-node {
-    @apply inline-block relative py-3 px-4 rounded-md
-        border border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        transition-colors duration-200
-}
-
-.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
-    @apply pt-3 px-4 pb-5
-}
-
-.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover {
-    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-organizationchart-node-selected {
-    @apply bg-highlight
-}
-
-.p-organizationchart-node-toggle-button {
-    @apply absolute -bottom-3 -ms-3 z-20 start-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full
-        inline-flex items-center justify-center transition-colors duration-200
-        border border-surface-200 dark:border-surface-700
-        bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700
-        dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-.p-organizationchart-node-toggle-button-icon {
-    @apply relative top-px
-}
-
-.p-organizationchart-connector-down {
-    @apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700
-}
-
-.p-organizationchart-connector-right {
-    @apply rounded-none
-}
-
-.p-organizationchart-connector-left {
-    @apply rounded-none border-e border-surface-200 dark:border-surface-700
-}
-
-.p-organizationchart-connector-top {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-organizationchart-node-selectable {
-    @apply cursor-pointer
-}
-
-.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
-    @apply border-e-0
-}
-
-.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
-    @apply rounded-se-md
-}
-
-.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
-    @apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md
-}
diff --git a/apps/volt/assets/styles/primevue/overlaybadge.css b/apps/volt/assets/styles/primevue/overlaybadge.css
deleted file mode 100644
index c0193ea23..000000000
--- a/apps/volt/assets/styles/primevue/overlaybadge.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@import './badge';
-
-.p-overlaybadge {
-    @apply relative
-}
-
-.p-overlaybadge .p-badge {
-    @apply absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline outline-2 outline-surface-0 dark:outline-surface-900
-}
-
-.p-overlaybadge .p-badge:dir(rtl) {
-    @apply -translate-x-1/2 -translate-y-1/2
-}
diff --git a/apps/volt/assets/styles/primevue/paginator.css b/apps/volt/assets/styles/primevue/paginator.css
deleted file mode 100644
index 25d694302..000000000
--- a/apps/volt/assets/styles/primevue/paginator.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.p-paginator {
-    @apply flex items-center justify-center flex-wrap py-2 px-4 rounded-md gap-1
-        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-}
-
-.p-paginator-content {
-    @apply flex items-center justify-center flex-wrap gap-1
-}
-
-.p-paginator-content-start {
-    @apply ms-auto
-}
-
-.p-paginator-content-end {
-    @apply me-auto
-}
-
-.p-paginator-page,
-.p-paginator-next,
-.p-paginator-last,
-.p-paginator-first,
-.p-paginator-prev {
-    @apply cursor-pointer inline-flex items-center justify-center leading-none overflow-hidden relative
-        bg-transparent border-none min-w-10 h-10 transition-colors duration-200 rounded-full p-0 m-0
-        text-surface-500 dark:text-surface-400
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,
-.p-paginator-first:not(.p-disabled):hover,
-.p-paginator-prev:not(.p-disabled):hover,
-.p-paginator-next:not(.p-disabled):hover,
-.p-paginator-last:not(.p-disabled):hover {
-    @apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300
-}
-
-.p-paginator-page.p-paginator-page-selected {
-    @apply bg-highlight
-}
-
-.p-paginator-current {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-paginator-pages {
-    @apply flex items-center gap-1
-}
-
-.p-paginator-jtp-input .p-inputtext {
-    @apply max-w-10
-}
-
-.p-paginator-first:dir(rtl),
-.p-paginator-prev:dir(rtl),
-.p-paginator-next:dir(rtl),
-.p-paginator-last:dir(rtl) {
-    @apply rotate-180
-}
diff --git a/apps/volt/assets/styles/primevue/panel.css b/apps/volt/assets/styles/primevue/panel.css
deleted file mode 100644
index cb5d53e2c..000000000
--- a/apps/volt/assets/styles/primevue/panel.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@import './button';
-
-.p-panel {
-    @apply border border-surface-200 dark:border-surface-700 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-panel-header {
-    @apply flex justify-between items-center p-[1.125rem]
-}
-
-.p-panel-toggleable .p-panel-header {
-    @apply py-[0.375rem] px-[1.125rem]
-}
-
-.p-panel-title {
-    @apply leading-none font-semibold
-}
-
-.p-panel-content {
-    @apply pt-0 pb-[1.125rem] px-[1.125rem] 
-}
-
-.p-panel-footer {
-    @apply pt-0 pb-[1.125rem] px-[1.125rem] 
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/panelmenu.css b/apps/volt/assets/styles/primevue/panelmenu.css
deleted file mode 100644
index 77f28503b..000000000
--- a/apps/volt/assets/styles/primevue/panelmenu.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.p-panelmenu {
-    @apply flex flex-col gap-2
-}
-
-.p-panelmenu-panel {
-    @apply bg-surface-0 dark:bg-surface-900 rounded-md p-1
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-}
-
-.p-panelmenu-header {
-    @apply outline-none
-}
-
-.p-panelmenu-header-content {
-    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0
-}
-
-.p-panelmenu-header-link {
-    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer relative no-underline text-inherit
-}
-
-.p-panelmenu-header-icon,
-.p-panelmenu-item-icon {
-    @apply text-surface-400 dark:text-surface-500
-}
-
-.p-panelmenu-submenu-icon {
-    @apply text-surface-400 dark:text-surface-500
-}
-
-.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-panelmenu-header:not(.p-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) {
-    @apply rotate-180;
-}
-
-.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-panelmenu-submenu {
-    @apply m-0 py-0 ps-4 outline-none list-none
-}
-
-.p-panelmenu-item-link {
-    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer no-underline text-inherit relative overflow-hidden
-}
-
-.p-panelmenu-item-content {
-    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0
-}
-
-.p-panelmenu-item.p-focus > .p-panelmenu-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
diff --git a/apps/volt/assets/styles/primevue/password.css b/apps/volt/assets/styles/primevue/password.css
deleted file mode 100644
index e350fcbab..000000000
--- a/apps/volt/assets/styles/primevue/password.css
+++ /dev/null
@@ -1,61 +0,0 @@
-@import './inputtext';
-
-.p-password {
-    @apply inline-flex relative
-}
-
-.p-password .p-password-overlay {
-    @apply min-w-full
-}
-
-.p-password-meter {
-    @apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md
-}
-
-.p-password-meter-label {
-    @apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md
-}
-
-.p-password-meter-weak {
-    @apply bg-red-500 dark:bg-red-400
-}
-
-.p-password-meter-medium {
-    @apply bg-amber-500 dark:bg-amber-400
-}
-
-.p-password-meter-strong {
-    @apply bg-green-500 dark:bg-green-400
-}
-
-.p-password-fluid {
-    @apply flex
-}
-
-.p-password-fluid .p-password-input {
-    @apply w-full
-}
-
-.p-password-input::-ms-reveal,
-.p-password-input::-ms-clear {
-    @apply hidden
-}
-
-.p-password-overlay {
-    @apply p-3 rounded-md bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-password-content {
-    @apply flex flex-col gap-2
-}
-
-.p-password-toggle-mask-icon {
-    @apply end-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4
-}
-
-.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
-    @apply pe-10
-}
diff --git a/apps/volt/assets/styles/primevue/picklist.css b/apps/volt/assets/styles/primevue/picklist.css
deleted file mode 100644
index 97aa65f89..000000000
--- a/apps/volt/assets/styles/primevue/picklist.css
+++ /dev/null
@@ -1,18 +0,0 @@
-@import './button';
-@import './listbox';
-
-.p-picklist {
-    @apply flex gap-[1.125rem]
-}
-
-.p-picklist-controls {
-    @apply flex flex-col justify-center gap-2
-}
-
-.p-picklist-list-container {
-    @apply flex-grow flex-shrink basis-1/2
-}
-
-.p-picklist .p-listbox {
-    @apply h-full
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/popover.css b/apps/volt/assets/styles/primevue/popover.css
deleted file mode 100644
index 964d2d9df..000000000
--- a/apps/volt/assets/styles/primevue/popover.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.p-popover {
-    @apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700
-        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
-        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
-        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
-        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
-}
-
-.p-popover-content {
-    @apply p-3
-}
-
-.p-popover-flipped {
-    @apply -mt-[10px] mb-[10px]
-}
-
-.p-popover-enter-from {
-    @apply opacity-0 scale-y-75
-}
-
-.p-popover-leave-to {
-    @apply opacity-0
-}
-
-.p-popover-enter-active {
-    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
-}
-
-.p-popover-leave-active {
-    @apply transition-opacity duration-100 ease-linear
-}
-
-.p-popover-flipped:after,
-.p-popover-flipped:before {
-    @apply bottom-auto top-full
-}
-
-.p-popover.p-popover-flipped:after {
-    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
-}
-
-.p-popover.p-popover-flipped:before {
-    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
-}
diff --git a/apps/volt/assets/styles/primevue/progressbar.css b/apps/volt/assets/styles/primevue/progressbar.css
deleted file mode 100644
index 3788b236f..000000000
--- a/apps/volt/assets/styles/primevue/progressbar.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.p-progressbar {
-    @apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md
-}
-
-.p-progressbar-value {
-    @apply m-0 bg-primary
-}
-
-.p-progressbar-label {
-    @apply text-primary-contrast text-xs font-semibold
-}
-
-.p-progressbar-determinate .p-progressbar-value {
-    @apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out
-}
-
-.p-progressbar-determinate .p-progressbar-label {
-    @apply inline-flex
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::before {
-    @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::before {
-    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::after {
-    @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
-
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::after {
-    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-    animation-delay: 1.15s;
-}
-
-@keyframes p-progressbar-indeterminate-anim {
-    0% {
-        inset-inline-start: -35%;
-        inset-inline-end: 100%;
-    }
-    60% {
-        inset-inline-start: 100%;
-        inset-inline-end: -90%;
-    }
-    100% {
-        inset-inline-start: 100%;
-        inset-inline-end: -90%;
-    }
-}
-
-@keyframes p-progressbar-indeterminate-anim-short {
-    0% {
-        inset-inline-start: -200%;
-        inset-inline-end: 100%;
-    }
-    60% {
-        inset-inline-start: 107%;
-        inset-inline-end: -8%;
-    }
-    100% {
-        inset-inline-start: 107%;
-        inset-inline-end: -8%;
-    }
-}
diff --git a/apps/volt/assets/styles/primevue/progressspinner.css b/apps/volt/assets/styles/primevue/progressspinner.css
deleted file mode 100644
index 335abd177..000000000
--- a/apps/volt/assets/styles/primevue/progressspinner.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.p-progressspinner {
-    @apply relative my-0 mx-auto w-[100px] h-[100px] inline-block
-        before:block before:pt-[100%]
-}
-
-.p-progressspinner-spin {
-    @apply h-full origin-center w-full absolute top-0 bottom-0 start-0 end-0 m-auto;
-}
-
-.p-progressspinner-spin {
-    animation: p-progressspinner-rotate 2s linear infinite;
-}
-
-.p-progressspinner-circle {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: 0;
-    stroke: theme(colors.red.500);
-    stroke-linecap: round;
-    animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
-}
-
-@keyframes p-progressspinner-rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes p-progressspinner-dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
-
-@keyframes p-progressspinner-color {
-    100%,
-    0% {
-        stroke: theme(colors.red.500);
-    }
-    40% {
-        stroke: theme(colors.blue.500);
-    }
-    66% {
-        stroke: theme(colors.green.500);
-    }
-    80%,
-    90% {
-        stroke: theme(colors.yellow.500);
-    }
-}
diff --git a/apps/volt/assets/styles/primevue/radiobutton.css b/apps/volt/assets/styles/primevue/radiobutton.css
deleted file mode 100644
index bd88f93da..000000000
--- a/apps/volt/assets/styles/primevue/radiobutton.css
+++ /dev/null
@@ -1,93 +0,0 @@
-.p-radiobutton {
-    @apply relative inline-flex select-none w-5 h-5
-}
-
-.p-radiobutton-input {
-    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
-        border border-transparent rounded-full
-}
-
-.p-radiobutton-box {
-    @apply flex justify-center items-center rounded-full
-        border border-surface-300 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-950
-        w-5 h-5
-        transition-colors duration-200
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-}
-
-.p-radiobutton-icon {
-    @apply bg-transparent text-xs w-3 h-3 rounded-full
-        transition-all duration-200 backface-hidden
-}
-
-.p-radiobutton-icon {
-    @apply scale-[0.1]
-}
-
-.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    @apply border-surface-400 dark:border-surface-600
-}
-
-.p-radiobutton-checked .p-radiobutton-box {
-    @apply border-primary bg-primary
-}
-
-.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
-    @apply bg-primary-contrast visible
-}
-
-.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
-    @apply scale-100
-}
-
-.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    @apply border-primary-emphasis bg-primary-emphasis
-}
-
-.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
-    @apply bg-primary-contrast
-}
-
-.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    @apply outline outline-1 outline-offset-2 outline-primary
-}
-
-.p-radiobutton.p-invalid > .p-radiobutton-box {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-radiobutton.p-variant-filled .p-radiobutton-box {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-radiobutton.p-disabled {
-    @apply opacity-100
-}
-
-.p-radiobutton.p-disabled .p-radiobutton-box {
-    @apply bg-surface-200 dark:bg-surface-400
-        border-surface-300 dark:border-surface-700
-}
-
-.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
-    @apply bg-surface-700 dark:bg-surface-400
-}
-
-.p-radiobutton-sm,
-.p-radiobutton-sm .p-radiobutton-box {
-    @apply w-4 h-4
-}
-
-.p-radiobutton-sm .p-radiobutton-icon {
-    @apply w-2 h-2
-}
-
-.p-radiobutton-lg,
-.p-radiobutton-lg .p-radiobutton-box {
-    @apply w-6 h-6
-}
-
-.p-radiobutton-lg .p-radiobutton-icon {
-    @apply w-4 h-4
-}
diff --git a/apps/volt/assets/styles/primevue/rating.css b/apps/volt/assets/styles/primevue/rating.css
deleted file mode 100644
index 79b57febd..000000000
--- a/apps/volt/assets/styles/primevue/rating.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.p-rating {
-    @apply relative flex items-center gap-1
-}
-
-.p-rating-option {
-    @apply inline-flex items-center cursor-pointer rounded-full
-}
-
-.p-rating-option.p-focus-visible {
-    @apply outline outline-1 outline-offset-2 outline-primary
-}
-
-.p-rating-icon {
-    @apply text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200
-}
-
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
-    @apply text-primary
-}
-
-.p-rating-option-active .p-rating-icon {
-    @apply text-primary
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/ripple.css b/apps/volt/assets/styles/primevue/ripple.css
deleted file mode 100644
index 5e3cd2f43..000000000
--- a/apps/volt/assets/styles/primevue/ripple.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.p-ink {
-    @apply block absolute bg-black/10 dark:bg-white/30 scale-0 rounded-[100%] pointer-events-none
-}
-
-.p-ink-active {
-    @apply transition-[opacity,transform] duration-500 scale-[2.5] opacity-0 ease-linear
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/scrollpanel.css b/apps/volt/assets/styles/primevue/scrollpanel.css
deleted file mode 100644
index 8bf7fd55c..000000000
--- a/apps/volt/assets/styles/primevue/scrollpanel.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.p-scrollpanel-content-container {
-    @apply overflow-hidden w-full h-full relative z-10 float-left
-}
-
-.p-scrollpanel-content {
-    @apply relative overflow-auto
-        h-[calc(100%+18px)] w-[calc(100%+18px)]
-        pt-0 ps-0 pr-[18px] pb-[18px] [scrollbar-width:none]
-}
-
-.p-scrollpanel-content::-webkit-scrollbar {
-    @apply hidden
-}
-
-.p-scrollpanel-bar {
-    @apply relative rounded-sm z-20 cursor-pointer opacity-0
-        bg-surface-100 dark:bg-surface-800
-        transition-opacity duration-200 border-none
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-scrollpanel-bar-y {
-    @apply w-[9px] top-0
-}
-
-.p-scrollpanel-bar-x {
-    @apply h-[9px] bottom-0
-}
-
-.p-scrollpanel-hidden {
-    @apply invisible
-}
-
-.p-scrollpanel:hover .p-scrollpanel-bar,
-.p-scrollpanel:active .p-scrollpanel-bar {
-    @apply opacity-100
-}
-
-.p-scrollpanel-grabbed {
-    @apply select-none
-}
diff --git a/apps/volt/assets/styles/primevue/scrolltop.css b/apps/volt/assets/styles/primevue/scrolltop.css
deleted file mode 100644
index 40e5381f4..000000000
--- a/apps/volt/assets/styles/primevue/scrolltop.css
+++ /dev/null
@@ -1,25 +0,0 @@
-@import './button';
-
-.p-scrolltop.p-button {
-    @apply fixed bottom-5 end-5
-}
-
-.p-scrolltop-sticky.p-button {
-    @apply sticky flex ms-auto
-}
-
-.p-scrolltop-enter-from {
-    @apply opacity-0
-}
-
-.p-scrolltop-enter-active {
-    @apply transition-opacity duration-150
-}
-
-.p-scrolltop.p-scrolltop-leave-to {
-    @apply opacity-0
-}
-
-.p-scrolltop-leave-active {
-    @apply transition-opacity duration-150
-}
diff --git a/apps/volt/assets/styles/primevue/select.css b/apps/volt/assets/styles/primevue/select.css
deleted file mode 100644
index 85b108e83..000000000
--- a/apps/volt/assets/styles/primevue/select.css
+++ /dev/null
@@ -1,144 +0,0 @@
-@import './button';
-@import './inputtext';
-@import './iconfield';
-
-.p-select {
-    @apply inline-flex cursor-pointer relative select-none rounded-md
-        bg-surface-0 dark:bg-surface-950
-        border border-surface-300 dark:border-surface-700
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        transition-colors duration-200
-}
-
-.p-select:not(.p-disabled):hover {
-    @apply border-surface-400 dark:border-surface-600
-}
-
-.p-select:not(.p-disabled).p-focus {
-    @apply border-primary
-}
-
-.p-select.p-variant-filled {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-select.p-invalid {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-select.p-disabled {
-    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
-}
-
-.p-select-clear-icon {
-    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
-}
-
-.p-select-dropdown {
-    @apply flex items-center justify-center shrink-0 bg-transparent
-        text-surface-500 dark:text-surface-400 w-10 rounded-e-md
-}
-
-.p-select-label {
-    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]
-        py-2 px-3 overflow-ellipsis
-        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none
-}
-
-.p-select-label.p-placeholder {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-select:has(.p-select-clear-icon) .p-select-label {
-    @apply pe-7
-}
-
-.p-select.p-disabled .p-select-label {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-select-label-empty {
-    @apply overflow-hidden opacity-0
-}
-
-input.p-select-label {
-    @apply cursor-default
-}
-
-.p-select .p-select-overlay {
-    @apply min-w-full
-}
-
-.p-select-overlay {
-    @apply absolute top-0 left-0 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-select-header {
-    @apply pt-2 pb-1 px-4
-}
-
-.p-select-filter {
-    @apply w-full
-}
-
-.p-select-list-container {
-    @apply overflow-auto
-}
-
-.p-select-option-group {
-    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold
-}
-
-.p-select-list {
-    @apply m-0 p-1 list-none gap-[2px] flex flex-col
-}
-
-.p-select-option {
-    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center
-        px-3 py-2 border-none text-surface-700 dark:text-surface-0 bg-transparent rounded-sm
-        transition-colors duration-200
-}
-
-.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-select-option.p-select-option-selected {
-    @apply bg-highlight
-}
-
-.p-select-option.p-select-option-selected.p-focus {
-    @apply bg-highlight-emphasis
-}
-
-.p-select-option-check-icon {
-    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0
-}
-
-.p-select-empty-message {
-    @apply px-3 py-2
-}
-
-.p-select-fluid {
-    @apply flex
-}
-
-.p-select-sm .p-select-label {
-    @apply text-sm px-[0.625rem] py-[0.375rem]
-}
-
-.p-select-sm .p-select-dropdown .p-icon {
-    @apply text-sm w-[0.875rem] h-[0.875rem]
-}
-
-.p-select-lg .p-select-label {
-    @apply text-lg px-[0.875rem] py-[0.625rem]
-}
-
-.p-select-lg .p-select-dropdown .p-icon {
-    @apply text-lg w-[1.125rem] h-[1.125rem]
-}
diff --git a/apps/volt/assets/styles/primevue/selectbutton.css b/apps/volt/assets/styles/primevue/selectbutton.css
deleted file mode 100644
index 5350fdeef..000000000
--- a/apps/volt/assets/styles/primevue/selectbutton.css
+++ /dev/null
@@ -1,25 +0,0 @@
-@import './togglebutton';
-
-.p-selectbutton {
-    @apply inline-flex select-none rounded-md
-}
-
-.p-selectbutton .p-togglebutton {
-    @apply rounded-none border-y border-r border-s-0
-}
-
-.p-selectbutton .p-togglebutton:focus-visible {
-    @apply relative z-10
-}
-
-.p-selectbutton .p-togglebutton:first-child {
-    @apply border-s rounded-s-md
-}
-
-.p-selectbutton .p-togglebutton:last-child {
-    @apply rounded-e-md
-}
-
-.p-selectbutton.p-invalid {
-    @apply outline outline-offset-0 outline-red-400 dark:outline-red-300
-}
diff --git a/apps/volt/assets/styles/primevue/skeleton.css b/apps/volt/assets/styles/primevue/skeleton.css
deleted file mode 100644
index e2393cd21..000000000
--- a/apps/volt/assets/styles/primevue/skeleton.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.p-skeleton {
-    @apply overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md
-}
-
-.p-skeleton-circle {
-    @apply rounded-full
-}
-
-.p-skeleton-animation-none::after {
-    @apply animate-none
-}
diff --git a/apps/volt/assets/styles/primevue/slider.css b/apps/volt/assets/styles/primevue/slider.css
deleted file mode 100644
index ae3b9718b..000000000
--- a/apps/volt/assets/styles/primevue/slider.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.p-slider {
-    @apply relative bg-surface-200 dark:bg-surface-700 rounded-sm
-}
-
-.p-slider-handle {
-    @apply cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px]
-        bg-surface-200 dark:bg-surface-700 rounded-full
-        transition-colors duration-200
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        before:w-[16px] before:h-[16px] before:block before:rounded-full
-        before:bg-surface-0 dark:before:bg-surface-950
-        before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)]
-        before:transition-colors before:duration-200
-}
-
-.p-slider-range {
-    @apply block bg-primary rounded-sm
-}
-
-.p-slider.p-slider-horizontal {
-    @apply h-[3px]
-}
-
-.p-slider-horizontal .p-slider-range {
-    @apply top-0 start-0 h-full
-}
-
-.p-slider-horizontal .p-slider-handle {
-    @apply top-1/2 -mt-[10px] -ms-[10px]
-}
-
-.p-slider-vertical {
-    @apply min-h-[100px] w-[3px]
-}
-
-.p-slider-vertical .p-slider-handle {
-    @apply start-1/2 -mb-[10px] -ms-[10px]
-}
-
-.p-slider-vertical .p-slider-range {
-    @apply bottom-0 start-0 w-full
-}
diff --git a/apps/volt/assets/styles/primevue/speeddial.css b/apps/volt/assets/styles/primevue/speeddial.css
deleted file mode 100644
index 414ce756f..000000000
--- a/apps/volt/assets/styles/primevue/speeddial.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@import './button';
-
-.p-speeddial {
-    @apply static flex gap-2
-}
-
-.p-speeddial-button {
-    @apply z-10
-}
-
-.p-speeddial-button.p-speeddial-rotate {
-    @apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform
-}
-
-.p-speeddial-list {
-    @apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2
-        transition-[top] ease-linear duration-200
-}
-
-.p-speeddial-item {
-    @apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform
-}
-
-.p-speeddial-circle .p-speeddial-item,
-.p-speeddial-semi-circle .p-speeddial-item,
-.p-speeddial-quarter-circle .p-speeddial-item {
-    @apply absolute
-}
-
-.p-speeddial-mask {
-    @apply absolute start-0 top-0 w-full h-full opacity-0 bg-black/40 dark:bg-black/60 rounded-md transition-opacity duration-150
-}
-
-.p-speeddial-mask-visible {
-    @apply pointer-events-none opacity-100 transition-opacity duration-150
-}
-
-.p-speeddial-open .p-speeddial-list {
-    @apply pointer-events-auto
-}
-
-.p-speeddial-open .p-speeddial-item {
-    @apply scale-100 opacity-100
-}
-
-.p-speeddial-open .p-speeddial-rotate {
-    @apply rotate-45
-}
diff --git a/apps/volt/assets/styles/primevue/splitbutton.css b/apps/volt/assets/styles/primevue/splitbutton.css
deleted file mode 100644
index cf0cd0a49..000000000
--- a/apps/volt/assets/styles/primevue/splitbutton.css
+++ /dev/null
@@ -1,34 +0,0 @@
-@import './button';
-@import './tieredmenu';
-
-.p-splitbutton {
-    @apply inline-flex relative rounded-md
-}
-
-.p-splitbutton-button {
-    @apply rounded-e-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10
-}
-
-.p-splitbutton-dropdown {
-    @apply rounded-s-none focus-visible:z-10
-}
-
-.p-splitbutton .p-menu {
-    @apply min-w-full
-}
-
-.p-splitbutton-fluid {
-    @apply w-full
-}
-
-.p-splitbutton-rounded .p-splitbutton-dropdown {
-    @apply rounded-e-[2rem]
-}
-
-.p-splitbutton-rounded .p-splitbutton-button {
-    @apply rounded-s-[2rem]
-}
-
-.p-splitbutton-raised {
-    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
-}
diff --git a/apps/volt/assets/styles/primevue/splitter.css b/apps/volt/assets/styles/primevue/splitter.css
deleted file mode 100644
index e2f9f6f81..000000000
--- a/apps/volt/assets/styles/primevue/splitter.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.p-splitter {
-    @apply flex flex-wrap
-        border border-surface-200 dark:border-surface-700 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-splitter-vertical {
-    @apply flex-col
-}
-
-.p-splitter-gutter {
-    @apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700
-}
-
-.p-splitter-gutter-handle {
-    @apply rounded-md bg-transparent 
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        transition-colors duration-200
-}
-
-.p-splitter-horizontal.p-splitter-resizing {
-    @apply cursor-col-resize select-none
-}
-
-.p-splitter-vertical.p-splitter-resizing {
-    @apply cursor-row-resize select-none
-}
-
-.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
-    @apply h-[24px] w-full
-}
-
-.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
-    @apply w-[24px] h-full
-}
-
-.p-splitter-horizontal > .p-splitter-gutter {
-    @apply cursor-col-resize
-}
-
-.p-splitter-vertical > .p-splitter-gutter {
-    @apply cursor-row-resize
-}
-
-.p-splitterpanel {
-    @apply flex-grow overflow-hidden
-}
-
-.p-splitterpanel-nested {
-    @apply flex
-}
-
-.p-splitterpanel .p-splitter {
-    @apply flex-grow border-none
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/stepper.css b/apps/volt/assets/styles/primevue/stepper.css
deleted file mode 100644
index 43f44e75e..000000000
--- a/apps/volt/assets/styles/primevue/stepper.css
+++ /dev/null
@@ -1,102 +0,0 @@
-.p-steplist {
-    @apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto
-}
-
-.p-step {
-    @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial
-}
-
-.p-step-header {
-    @apply border-none inline-flex items-center no-underline cursor-pointer
-        transition-colors duration-200 rounded-md bg-transparent p-0 gap-2
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-}
-
-.p-step.p-disabled .p-step-header {
-    @apply cursor-default
-}
-
-
-.p-stepper.p-stepper-readonly .p-step {
-    @apply cursor-auto
-}
-
-.p-step-title {
-    @apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full
-        text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200
-}
-
-.p-step-number {
-    @apply flex items-center justify-center text-surface-500 dark:text-surface-400
-        bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700
-        min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative
-        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
-}
-
-.p-step-active .p-step-header {
-    @apply cursor-default
-}
-
-.p-step-active .p-step-number {
-    @apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700
-}
-
-.p-step-active .p-step-title {
-    @apply text-primary
-}
-
-.p-step:not(.p-disabled):focus-visible {
-    @apply outline outline-1 outline-offset-2 outline-primary
-}
-
-.p-step:has(~ .p-step-active) .p-stepper-separator {
-    @apply bg-primary
-}
-
-.p-stepper-separator {
-    @apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200
-}
-
-.p-steppanels {
-    @apply pt-[0.875rem] pb-[1.125rem] px-2
-}
-
-.p-steppanel {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-}
-
-.p-stepper:has(.p-stepitem) {
-    @apply flex flex-col
-}
-
-.p-stepitem {
-    @apply flex flex-col flex-initial
-}
-
-.p-stepitem.p-stepitem-active {
-    @apply flex-auto
-}
-
-.p-stepitem .p-step {
-    @apply flex-initial
-}
-
-.p-stepitem .p-steppanel-content {
-    @apply w-full ps-4
-}
-
-.p-stepitem .p-steppanel {
-    @apply flex flex-auto
-}
-
-.p-stepitem .p-stepper-separator {
-    @apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ms-[1.625rem] relative start-[-2.5px]
-}
-
-.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
-    @apply bg-primary
-}
-
-.p-stepitem:last-of-type .p-steppanel {
-    @apply ps-8
-}
diff --git a/apps/volt/assets/styles/primevue/tabs.css b/apps/volt/assets/styles/primevue/tabs.css
deleted file mode 100644
index 0ac004ba9..000000000
--- a/apps/volt/assets/styles/primevue/tabs.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.p-tabs {
-    @apply flex flex-col
-}
-
-.p-tablist {
-    @apply flex relative
-}
-
-.p-tabs-scrollable > .p-tablist {
-    @apply overflow-hidden
-}
-
-.p-tablist-viewport {
-    @apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto
-}
-
-.p-tablist-viewport::-webkit-scrollbar {
-    @apply hidden
-}
-
-.p-tablist-tab-list {
-    @apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700
-}
-
-.p-tablist-content {
-    @apply flex-grow
-}
-
-.p-tablist-nav-button {
-    @apply !absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer
-        bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10
-        shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50
-        focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary
-        transition-colors duration-200
-}
-
-.p-tablist-prev-button {
-    @apply start-0
-}
-
-.p-tablist-next-button {
-    @apply end-0
-}
-
-.p-tablist-prev-button:dir(rtl),
-.p-tablist-next-button:dir(rtl) {
-    @apply rotate-180
-}
-
-.p-tab {
-    @apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem]
-        border-b border-surface-200 dark:border-surface-700 font-semibold
-        text-surface-500 dark:text-surface-400
-        transition-colors duration-200 -mb-px
-}
-
-.p-tab.p-disabled {
-    @apply cursor-default
-}
-
-.p-tab:not(.p-disabled):focus-visible {
-    @apply z-10 outline outline-1 outline-offset-[-1px] outline-primary
-}
-
-.p-tab:not(.p-tab-active):not(.p-disabled):hover {
-    @apply text-surface-700 dark:text-surface-0
-}
-
-.p-tab-active {
-    @apply border-primary text-primary
-}
-
-.p-tabpanels {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
-        pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none
-}
-
-.p-tablist-active-bar {
-    @apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]
-}
-
-.p-tablist-viewport {
-    @apply [scrollbar-behavior:smooth] [scrollbar-width:none]
-}
diff --git a/apps/volt/assets/styles/primevue/tag.css b/apps/volt/assets/styles/primevue/tag.css
deleted file mode 100644
index 24e42867d..000000000
--- a/apps/volt/assets/styles/primevue/tag.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.p-tag {
-    @apply inline-flex items-center justify-center
-        bg-primary-100 dark:bg-primary-500/15
-        text-primary-700 dark:text-primary-300
-        text-sm font-bold py-1 px-2 rounded-md gap-1
-}
-
-.p-tag-icon {
-    @apply text-xs w-3 h-3
-}
-
-.p-tag-rounded {
-    @apply rounded-2xl
-}
-
-.p-tag-success {
-    @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300
-}
-
-.p-tag-info {
-    @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300
-}
-
-.p-tag-warn {
-    @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300
-}
-
-.p-tag-danger {
-    @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300
-}
-
-.p-tag-secondary {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300
-}
-
-.p-tag-contrast {
-    @apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/tailwind.css b/apps/volt/assets/styles/primevue/tailwind.css
deleted file mode 100644
index 7aec51300..000000000
--- a/apps/volt/assets/styles/primevue/tailwind.css
+++ /dev/null
@@ -1,104 +0,0 @@
-@import './common';
-
-/* Form */
-@import './autocomplete';
-@import './cascadeselect';
-@import './checkbox';
-@import './colorpicker';
-@import './datepicker';
-@import './iconfield';
-@import './iftalabel';
-@import './inputgroup';
-@import './inputnumber';
-@import './inputotp';
-@import './inputtext';
-@import './floatlabel';
-@import './knob';
-@import './listbox';
-@import './multiselect';
-@import './password';
-@import './radiobutton';
-@import './rating';
-@import './select';
-@import './selectbutton';
-@import './slider';
-@import './textarea';
-@import './togglebutton';
-@import './toggleswitch';
-@import './treeselect';
-
-/* Button */
-@import './button';
-@import './buttongroup';
-@import './speeddial';
-@import './splitbutton';
-
-/* Data */
-@import './datatable';
-@import './dataview';
-@import './paginator';
-@import './picklist';
-@import './orderlist';
-@import './organizationchart';
-@import './timeline';
-@import './tree';
-@import './treetable';
-
-/* Overlay */
-@import './confirmdialog';
-@import './confirmpopup';
-@import './dialog';
-@import './drawer';
-@import './popover';
-@import './tooltip';
-
-/* Menu */
-@import './breadcrumb';
-@import './contextmenu';
-@import './dock';
-@import './menu';
-@import './menubar';
-@import './megamenu';
-@import './panelmenu';
-@import './tieredmenu';
-
-/* Panel */
-@import './accordion';
-@import './card';
-@import './divider';
-@import './fieldset';
-@import './panel';
-@import './scrollpanel';
-@import './splitter';
-@import './stepper';
-@import './tabs';
-@import './toolbar';
-
-/* File */
-@import './fileupload';
-
-/* Message */
-@import './message';
-@import './toast';
-
-/* Media */
-@import './carousel';
-@import './galleria';
-@import './image';
-@import './imagecompare';
-
-/* Misc */
-@import './avatar';
-@import './badge';
-@import './blockui';
-@import './chip';
-@import './inplace';
-@import './metergroup';
-@import './overlaybadge';
-@import './progressbar';
-@import './progressspinner';
-@import './ripple';
-@import './scrolltop';
-@import './skeleton';
-@import './tag';
-@import './terminal';
diff --git a/apps/volt/assets/styles/primevue/terminal.css b/apps/volt/assets/styles/primevue/terminal.css
deleted file mode 100644
index 71d107d69..000000000
--- a/apps/volt/assets/styles/primevue/terminal.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.p-terminal {
-    @apply h-72 overflow-auto px-3 py-2 rounded-md
-        border border-surface-300 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-950
-        text-surface-700 dark:text-surface-0
-}
-
-.p-terminal-prompt {
-    @apply flex items-center
-}
-
-.p-terminal-prompt-value {
-    @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base
-}
-
-.p-terminal-prompt-label {
-    @apply me-1
-}
-
-.p-terminal-input::-ms-clear {
-    @apply hidden
-}
diff --git a/apps/volt/assets/styles/primevue/textarea.css b/apps/volt/assets/styles/primevue/textarea.css
deleted file mode 100644
index c5bb8fac5..000000000
--- a/apps/volt/assets/styles/primevue/textarea.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.p-textarea {
-    @apply appearance-none rounded-md
-        border border-surface-300 dark:border-surface-700
-        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
-        enabled:focus:border-primary
-        bg-surface-0 dark:bg-surface-950
-        text-surface-700 dark:text-surface-0
-        disabled:bg-surface-200 disabled:text-surface-500 disabled:opacity-100 dark:disabled:bg-surface-700 dark:disabled:text-surface-400
-        placeholder:text-surface-500 dark:placeholder:text-surface-400
-        px-3 py-2
-        transition-colors duration-200
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        outline-none
-}
-
-.p-textarea.p-invalid {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-textarea.p-variant-filled {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-textarea-fluid {
-    @apply w-full
-}
-
-.p-textarea-resizable {
-    @apply overflow-hidden resize-none
-}
-
-.p-textarea-sm {
-    @apply text-sm px-[0.625rem] py-[0.375rem]
-}
-
-.p-textarea-lg {
-    @apply text-lg px-[0.875rem] py-[0.625rem]
-}
diff --git a/apps/volt/assets/styles/primevue/tieredmenu.css b/apps/volt/assets/styles/primevue/tieredmenu.css
deleted file mode 100644
index 900dea161..000000000
--- a/apps/volt/assets/styles/primevue/tieredmenu.css
+++ /dev/null
@@ -1,105 +0,0 @@
-.p-tieredmenu {
-    @apply bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700
-        rounded-md min-w-52
-}
-
-.p-tieredmenu-root-list,
-.p-tieredmenu-submenu {
-    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
-}
-
-.p-tieredmenu-submenu {
-    @apply absolute min-w-full z-10 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-tieredmenu-item {
-    @apply relative
-}
-
-.p-tieredmenu-item-content {
-    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
-}
-
-.p-tieredmenu-item-link {
-    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
-        px-3 py-2 gap-2 select-none outline-none
-}
-
-.p-tieredmenu-item-icon {
-    @apply text-surface-400 dark:text-surface-500
-}
-
-.p-tieredmenu-submenu-icon {
-    @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]
-}
-
-.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-tieredmenu-item-active > .p-tieredmenu-item-content {
-    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
-}
-
-.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-tieredmenu-separator {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-tieredmenu-overlay {
-    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-tieredmenu-enter-from,
-.p-tieredmenu-leave-active {
-    @apply opacity-0
-}
-
-.p-tieredmenu-enter-active {
-    @apply transition-opacity duration-[250ms]
-}
-
-.p-tieredmenu-mobile .p-tieredmenu-submenu {
-    @apply static shadow-none border-none ps-4 pe-0
-}
-
-.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
-    @apply transition-transform duration-200 rotate-90
-}
-
-.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
-    @apply -rotate-90
-}
diff --git a/apps/volt/assets/styles/primevue/timeline.css b/apps/volt/assets/styles/primevue/timeline.css
deleted file mode 100644
index 4d00cd472..000000000
--- a/apps/volt/assets/styles/primevue/timeline.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.p-timeline {
-    @apply flex flex-col flex-grow
-}
-
-.p-timeline-left .p-timeline-event-opposite {
-    @apply text-end
-}
-
-.p-timeline-left .p-timeline-event-content {
-    @apply text-start
-}
-
-.p-timeline-right .p-timeline-event {
-    @apply flex-row-reverse
-}
-
-.p-timeline-right .p-timeline-event-opposite {
-    @apply text-start
-}
-
-.p-timeline-right .p-timeline-event-content {
-    @apply text-end
-}
-
-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
-    @apply flex-row-reverse
-}
-
-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
-    @apply text-end
-}
-
-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
-    @apply text-start
-}
-
-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
-    @apply text-start
-}
-
-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
-    @apply text-end
-}
-
-.p-timeline-vertical .p-timeline-event-opposite,
-.p-timeline-vertical .p-timeline-event-content {
-    @apply py-0 px-4 leading-none
-}
-
-.p-timeline-vertical .p-timeline-event-connector {
-    @apply w-[2px]
-}
-
-.p-timeline-event {
-    @apply flex relative min-h-20 last:min-h-0
-}
-
-.p-timeline-event-opposite {
-    @apply flex-1
-}
-
-.p-timeline-event-content {
-    @apply flex-1
-}
-
-.p-timeline-event-separator {
-    @apply flex-none flex flex-col items-center
-}
-
-.p-timeline-event-marker {
-    @apply inline-flex items-center justify-center relative self-baseline
-        border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem]
-        bg-surface-0 dark:bg-surface-900
-        before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary
-        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
-}
-
-.p-timeline-event-connector {
-    @apply flex-grow bg-surface-200 dark:bg-surface-700
-}
-
-.p-timeline-horizontal {
-    @apply flex-row
-}
-
-.p-timeline-horizontal .p-timeline-event {
-    @apply flex-col flex-1
-}
-
-.p-timeline-horizontal .p-timeline-event:last-child {
-    @apply flex-none
-}
-
-.p-timeline-horizontal .p-timeline-event-separator {
-    @apply flex-row
-}
-
-.p-timeline-horizontal .p-timeline-event-connector {
-    @apply w-full h-[2px]
-}
-
-.p-timeline-horizontal .p-timeline-event-opposite,
-.p-timeline-horizontal .p-timeline-event-content {
-    @apply py-4 px-0
-}
-
-.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
-    @apply flex-col-reverse
-}
-
-.p-timeline-bottom .p-timeline-event {
-    @apply flex-col-reverse
-}
diff --git a/apps/volt/assets/styles/primevue/toast.css b/apps/volt/assets/styles/primevue/toast.css
deleted file mode 100644
index c2b013f86..000000000
--- a/apps/volt/assets/styles/primevue/toast.css
+++ /dev/null
@@ -1,172 +0,0 @@
-.p-toast {
-    @apply w-96 rounded-md whitespace-pre-line break-words
-}
-
-.p-toast-message {
-    @apply mb-4
-}
-
-.p-toast-message-icon {
-    @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]
-}
-
-.p-toast-message-content {
-    @apply flex items-start p-3 gap-2
-}
-
-.p-toast-message-text {
-    @apply flex-auto flex flex-col gap-2
-}
-
-.p-toast-summary {
-    @apply font-medium text-base
-}
-
-.p-toast-detail {
-    @apply font-medium text-sm
-}
-
-.p-toast-close-button {
-    @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none
-        transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -end-1/4 p-0 border-none
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-}
-
-.p-toast-close-button:dir(rtl) {
-    @apply ms-auto end-auto
-}
-
-.p-toast-message-info,
-.p-toast-message-success,
-.p-toast-message-warn,
-.p-toast-message-error,
-.p-toast-message-secondary,
-.p-toast-message-contrast {
-    @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md
-}
-
-.p-toast-close-icon {
-    @apply text-base w-4 h-4
-}
-
-.p-toast-message-info {
-    @apply bg-blue-50/95 border-blue-200 text-blue-600
-        dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500
-        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
-}
-
-.p-toast-message-info .p-toast-detail {
-    @apply text-surface-700 dark:text-surface-0
-}
-
-.p-toast-message-info .p-toast-close-button {
-    @apply hover:bg-blue-100 focus-visible:outline-blue-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
-}
-
-.p-toast-message-success {
-    @apply bg-green-50/95 border-green-200 text-green-600
-        dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500
-        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
-}
-
-.p-toast-message-success .p-toast-detail {
-    @apply text-surface-700 dark:text-surface-0
-}
-
-.p-toast-message-success .p-toast-close-button {
-    @apply hover:bg-green-100 focus-visible:outline-green-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
-}
-
-.p-toast-message-warn {
-    @apply bg-yellow-50/95 border-yellow-200 text-yellow-600
-        dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500
-        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
-}
-
-.p-toast-message-warn .p-toast-detail {
-    @apply text-surface-700 dark:text-surface-0
-}
-
-.p-toast-message-warn .p-toast-close-button {
-    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
-}
-
-.p-toast-message-error {
-    @apply bg-red-50/95 border-red-200 text-red-600
-        dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500
-        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
-}
-
-.p-toast-message-error .p-toast-detail {
-    @apply text-surface-700 dark:text-surface-0
-}
-
-.p-toast-message-error .p-toast-close-button {
-    @apply hover:bg-red-100 focus-visible:outline-red-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
-}
-
-.p-toast-message-secondary {
-    @apply bg-surface-100 border-surface-200 text-surface-600
-        dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300
-        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
-}
-
-.p-toast-message-secondary .p-toast-detail {
-    @apply text-surface-700 dark:text-surface-0
-}
-
-.p-toast-message-secondary .p-toast-close-button {
-    @apply hover:bg-surface-200 focus-visible:outline-surface-600
-        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
-}
-
-.p-toast-message-contrast {
-    @apply bg-surface-900 border-surface-950 text-surface-50
-        dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950
-        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
-}
-
-.p-toast-message-contrast .p-toast-detail {
-    @apply text-surface-0 dark:text-surface-950
-}
-
-.p-toast-message-contrast .p-toast-close-button {
-    @apply hover:bg-surface-800 focus-visible:outline-surface-50
-        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
-}
-
-.p-toast-top-center {
-    @apply -translate-x-1/2;
-}
-
-.p-toast-bottom-center {
-    @apply -translate-x-1/2;
-}
-
-.p-toast-center {
-    @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2
-}
-
-.p-toast-message-enter-from {
-    @apply opacity-0 translate-y-1/2
-}
-
-.p-toast-message-leave-from {
-    @apply max-h-[1000px]
-}
-
-.p-toast .p-toast-message.p-toast-message-leave-to {
-    @apply max-h-0 opacity-0 mb-0 overflow-hidden
-}
-
-.p-toast-message-enter-active {
-    @apply [transition:transform_0.3s,opacity_0.3s]
-}
-
-.p-toast-message-leave-active {
-    @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]
-}
diff --git a/apps/volt/assets/styles/primevue/togglebutton.css b/apps/volt/assets/styles/primevue/togglebutton.css
deleted file mode 100644
index 0961add9b..000000000
--- a/apps/volt/assets/styles/primevue/togglebutton.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.p-togglebutton {
-    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
-        border border-surface-100 dark:border-surface-950 rounded-md
-        bg-surface-100 dark:bg-surface-950
-        text-surface-500 dark:text-surface-400 text-base font-medium
-        px-4 py-2
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        disabled:opacity-100 disabled:cursor-default
-        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500
-        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400
-        transition-colors duration-300
-        before:bg-transparent before:absolute before:start-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]
-        before:transition-colors before:duration-200
-}
-
-.p-togglebutton-content {
-    @apply relative inline-flex items-center justify-center gap-2
-}
-
-.p-togglebutton-label,
-.p-togglebutton-icon {
-    @apply relative transition-none
-}
-
-.p-togglebutton.p-togglebutton-checked::before {
-    @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]
-}
-
-.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
-    @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300
-}
-
-.p-togglebutton.p-togglebutton-checked {
-    @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0
-}
-
-.p-togglebutton.p-invalid {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-togglebutton-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
-    @apply text-surface-700 dark:text-surface-300
-}
-
-.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
-    @apply text-surface-900 dark:text-surface-0
-}
-
-.p-togglebutton:disabled .p-togglebutton-icon {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-togglebutton-sm {
-    @apply text-sm px-[0.75rem] py-[0.375rem]
-}
-
-.p-togglebutton-lg {
-    @apply text-lg px-[1.25rem] py-[0.625rem]
-}
diff --git a/apps/volt/assets/styles/primevue/toggleswitch.css b/apps/volt/assets/styles/primevue/toggleswitch.css
deleted file mode 100644
index ea4a9dc05..000000000
--- a/apps/volt/assets/styles/primevue/toggleswitch.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.p-toggleswitch {
-    @apply inline-block w-10 h-6
-}
-
-.p-toggleswitch-input {
-    @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 start-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]
-}
-
-.p-toggleswitch-slider {
-    @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        bg-surface-300 dark:bg-surface-700
-        border border-transparent
-        transition-colors duration-200
-}
-
-.p-toggleswitch-handle {
-    @apply absolute top-1/2 flex justify-center items-center
-        bg-surface-0 dark:bg-surface-400
-        text-surface-500 dark:text-surface-900
-        w-4 h-4 start-1 -mt-2 rounded-full
-        transition-[background,color,left] duration-200
-}
-
-.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
-    @apply bg-primary
-}
-
-.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
-    @apply bg-surface-0 dark:bg-surface-900 text-primary start-5
-}
-
-.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
-    @apply bg-surface-400 dark:bg-surface-600
-}
-
-.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {
-    @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800
-}
-
-.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
-    @apply bg-primary-emphasis
-}
-
-.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {
-    @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis
-}
-
-.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
-    @apply outline outline-1 outline-offset-2 outline-primary
-}
-
-.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-toggleswitch.p-disabled {
-    @apply opacity-100
-}
-
-.p-toggleswitch.p-disabled .p-toggleswitch-slider {
-    @apply bg-surface-200 dark:bg-surface-600
-}
-
-.p-toggleswitch.p-disabled .p-toggleswitch-handle {
-    @apply bg-surface-700 dark:bg-surface-900
-}
diff --git a/apps/volt/assets/styles/primevue/toolbar.css b/apps/volt/assets/styles/primevue/toolbar.css
deleted file mode 100644
index b5c1238cd..000000000
--- a/apps/volt/assets/styles/primevue/toolbar.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.p-toolbar {
-    @apply flex items-center justify-between flex-wrap p-3 gap-2
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-        border border-surface-200 dark:border-surface-700 rounded-md
-}
-
-.p-toolbar-start,
-.p-toolbar-center,
-.p-toolbar-end {
-    @apply flex items-center
-}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/primevue/tooltip.css b/apps/volt/assets/styles/primevue/tooltip.css
deleted file mode 100644
index a7aac7224..000000000
--- a/apps/volt/assets/styles/primevue/tooltip.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.p-tooltip {
-    @apply absolute hidden max-w-48
-}
-
-.p-tooltip-right,
-.p-tooltip-left {
-    @apply py-0 px-1
-}
-
-.p-tooltip-top,
-.p-tooltip-bottom {
-    @apply py-1 px-0
-}
-
-.p-tooltip-text {
-    @apply whitespace-pre-line break-words  bg-surface-700 text-surface-0 py-2 px-3
-        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-.p-tooltip-arrow {
-    @apply absolute w-0 h-0 border-solid border-transparent
-}
-
-.p-tooltip-right .p-tooltip-arrow {
-    @apply -mt-1 border-[.25rem] border-s-0 border-e-surface-700 rtl:rotate-180
-}
-
-.p-tooltip-left .p-tooltip-arrow {
-    @apply -mt-1 border-[.25rem] border-e-0 border-s-surface-700 rtl:rotate-180
-}
-
-.p-tooltip-top .p-tooltip-arrow {
-    @apply -ms-1 border-[.25rem] border-b-0 border-t-surface-700
-}
-
-.p-tooltip-bottom .p-tooltip-arrow {
-    @apply -ms-1 border-[.25rem] border-t-0 border-b-surface-700
-}
diff --git a/apps/volt/assets/styles/primevue/tree.css b/apps/volt/assets/styles/primevue/tree.css
deleted file mode 100644
index 933f1e196..000000000
--- a/apps/volt/assets/styles/primevue/tree.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.p-tree {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 p-4
-}
-
-.p-tree-root-children,
-.p-tree-node-children {
-    @apply flex flex-col list-none m-0 gap-[2px]
-}
-
-.p-tree-root-children {
-    @apply pt-[2px] pb-0 px-0
-}
-
-.p-tree-node-children {
-    @apply pt-[2px] pe-0 pb-0 ps-4
-}
-
-.p-tree-node {
-    @apply p-0 outline-none
-}
-
-.p-tree-node-content {
-    @apply rounded-md px-2 py-1 flex items-center text-surface-700 dark:text-surface-0 gap-1 transition-colors duration-200
-}
-
-.p-tree-node:focus-visible > .p-tree-node-content {
-    @apply outline outline-1 outline-offset-2 outline-primary
-}
-
-.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
-    @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
-    @apply text-surface-600 dark:text-surface-300
-}
-
-.p-tree-node-content.p-tree-node-selected {
-    @apply bg-highlight
-}
-
-.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {
-    @apply text-inherit
-}
-
-.p-tree-node-toggle-button {
-    @apply cursor-pointer select-none inline-flex justify-center rounded-full items-center overflow-hidden relative flex-shrink-0
-        w-7 h-7 p-0 transition-colors duration-200 border-none
-        bg-transparent enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-800
-        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-600 dark:enabled:hover:text-surface-300
-}
-
-.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
-    @apply bg-surface-0 dark:bg-surface-900 text-primary
-}
-
-.p-tree-root {
-    @apply overflow-auto
-}
-
-.p-tree-node-selectable {
-    @apply cursor-pointer select-none
-}
-
-.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {
-    @apply invisible
-}
-
-.p-tree-node-icon {
-    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
-}
-
-.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {
-    @apply text-primary
-}
-
-.p-tree-filter {
-    @apply mb-2
-}
-
-.p-tree-filter-input {
-    @apply w-full
-}
-
-.p-tree-loading {
-    @apply relative h-full
-}
-
-.p-tree-loading-icon {
-    @apply text-[2rem] h-8 w-8
-}
-
-.p-tree .p-tree-mask {
-    @apply absolute z-10 flex items-center justify-center
-}
-
-.p-tree-flex-scrollable {
-    @apply flex flex-1 h-full flex-col
-}
-
-.p-tree-flex-scrollable .p-tree-root {
-    @apply flex-1
-}
diff --git a/apps/volt/assets/styles/primevue/treeselect.css b/apps/volt/assets/styles/primevue/treeselect.css
deleted file mode 100644
index 6c3576e23..000000000
--- a/apps/volt/assets/styles/primevue/treeselect.css
+++ /dev/null
@@ -1,116 +0,0 @@
-@import './chip';
-@import './tree';
-
-.p-treeselect {
-    @apply inline-flex cursor-pointer relative select-none rounded-md
-        bg-surface-0 dark:bg-surface-950
-        border border-surface-300 dark:border-surface-700
-        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-        transition-colors duration-200
-}
-
-.p-treeselect:not(.p-disabled):hover {
-    @apply border-surface-400 dark:border-surface-600
-}
-
-.p-treeselect:not(.p-disabled).p-focus {
-    @apply border-primary
-}
-
-.p-treeselect.p-variant-filled {
-    @apply bg-surface-50 dark:bg-surface-800
-}
-
-.p-treeselect.p-invalid {
-    @apply border-red-400 dark:border-red-300
-}
-
-.p-treeselect.p-disabled {
-    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
-}
-
-.p-treeselect-dropdown {
-    @apply flex items-center justify-center shrink-0 bg-transparent
-        text-surface-500 dark:text-surface-400 w-10 rounded-e-md
-}
-
-.p-treeselect-clear-icon {
-    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
-}
-
-.p-treeselect-label-container {
-    @apply overflow-hidden flex-auto
-}
-
-.p-treeselect-label {
-    @apply flex items-center gap-1 whitespace-nowrap text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0
-}
-
-.p-treeselect-label.p-placeholder {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-treeselect.p-disabled .p-treeselect-label {
-    @apply text-surface-500 dark:text-surface-400
-}
-
-.p-treeselect-label-empty {
-    @apply overflow-hidden invisible
-}
-
-.p-treeselect .p-treeselect-overlay {
-    @apply min-w-full
-}
-
-.p-treeselect-overlay {
-    @apply absolute top-0 left-0 rounded-md
-        bg-surface-0 dark:bg-surface-900
-        border border-surface-200 dark:border-surface-700
-        text-surface-700 dark:text-surface-0
-        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
-}
-
-
-.p-treeselect-tree-container {
-    @apply overflow-auto
-}
-
-.p-treeselect-empty-message {
-    @apply px-3 py-2
-}
-
-.p-treeselect-fluid {
-    @apply flex
-}
-
-.p-treeselect-overlay .p-tree {
-    @apply p-1
-}
-
-.p-treeselect-overlay .p-tree-loading {
-    @apply min-h-12
-}
-
-.p-treeselect-label .p-chip {
-    @apply pt-1 pb-1 rounded-sm
-}
-
-.p-treeselect-label:has(.p-chip) {
-    @apply py-1 px-1
-}
-
-.p-treeselect-sm .p-treeselect-label {
-    @apply text-sm px-[0.625rem] py-[0.375rem]
-}
-
-.p-treeselect-sm .p-treeselect-dropdown .p-icon {
-    @apply text-sm w-[0.875rem] h-[0.875rem]
-}
-
-.p-treeselect-lg .p-treeselect-label {
-    @apply text-lg px-[0.875rem] py-[0.625rem]
-}
-
-.p-treeselect-lg .p-treeselect-dropdown .p-icon {
-    @apply text-lg w-[1.125rem] h-[1.125rem]
-}
diff --git a/apps/volt/assets/styles/primevue/treetable.css b/apps/volt/assets/styles/primevue/treetable.css
deleted file mode 100644
index a9c014240..000000000
--- a/apps/volt/assets/styles/primevue/treetable.css
+++ /dev/null
@@ -1,300 +0,0 @@
-@import './paginator';
-
-.p-treetable {
-    @apply relative
-}
-
-.p-treetable-table {
-    @apply border-spacing-0 w-full
-}
-
-.p-treetable-scrollable > .p-treetable-table-container {
-    @apply relative
-}
-
-.p-treetable-scrollable-table > .p-treetable-thead {
-    @apply top-0 z-10
-}
-
-.p-treetable-scrollable-table > .p-treetable-frozen-tbody {
-    @apply sticky z-10
-}
-
-.p-treetable-scrollable-table>.p-treetable-tfoot {
-    @apply bottom-0 z-10
-}
-
-.p-treetable-scrollable .p-treetable-frozen-column {
-    @apply sticky bg-surface-0 dark:bg-surface-900
-}
-
-.p-treetable-scrollable th.p-treetable-frozen-column {
-    @apply z-10
-}
-
-.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {
-    @apply bg-surface-0 dark:bg-surface-900
-}
-
-.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot  {
-    @apply bg-surface-0 dark:bg-surface-900
-}
-
-.p-treetable-flex-scrollable {
-    @apply flex flex-col h-full
-}
-
-.p-treetable-flex-scrollable > .p-treetable-table-container {
-    @apply flex flex-col flex-1 h-full
-}
-
-.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header {
-    @apply sticky z-10
-}
-
-.p-treetable-resizable-table > .p-treetable-thead > tr > th,
-.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,
-.p-treetable-resizable-table > .p-treetable-tbody > tr > td {
-    @apply overflow-hidden whitespace-nowrap
-}
-
-.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {
-    @apply bg-clip-padding relative
-}
-
-.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer {
-    @apply hidden
-}
-
-.p-treetable-column-resizer {
-    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
-}
-
-.p-treetable-column-header-content {
-    @apply flex items-center gap-2
-}
-
-.p-treetable-column-resize-indicator {
-    @apply w-px absolute z-10 hidden bg-primary
-}
-
-.p-treetable-mask {
-    @apply absolute flex items-center justify-center z-20
-}
-
-.p-treetable-paginator-top {
-    @apply border-b border-surface-200 dark:border-surface-700
-}
-
-.p-treetable-paginator-bottom {
-    @apply border-t border-surface-200 dark:border-surface-700
-}
-
-.p-treetable-header {
-    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-treetable-footer {
-    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-treetable-header-cell {
-    @apply py-3 px-4 font-normal text-start transition-colors duration-200
-        border-b border-surface-200 dark:border-surface-700
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-treetable-column-title {
-    @apply font-semibold
-}
-
-.p-treetable-tbody > tr {
-    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
-}
-
-.p-treetable-tbody > tr > td {
-    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
-}
-
-.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {
-    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-treetable-tbody > tr.p-treetable-row-selected {
-    @apply bg-highlight
-}
-
-.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {
-    @apply border-b-primary-100 dark:border-b-primary-900
-}
-
-.p-treetable-tbody > tr.p-treetable-row-selected > td {
-    @apply border-b-primary-100 dark:border-b-primary-900
-}
-
-.p-treetable-tbody > tr:focus-visible,
-.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {
-    @apply outline outline-1 -outline-offset-1 outline-primary
-}
-
-.p-treetable-tfoot > tr > td {
-    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
-        bg-surface-0 dark:bg-surface-900
-        text-surface-700 dark:text-surface-0
-}
-
-.p-treetable-column-footer {
-    @apply font-semibold
-}
-
-.p-treetable-sortable-column {
-    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
-}
-
-.p-treetable-column-title,
-.p-treetable-sort-icon,
-.p-treetable-sort-badge {
-    @apply align-middle
-}
-
-.p-treetable-sort-icon {
-    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
-}
-
-.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
-    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
-}
-
-.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
-    @apply text-surface-600 dark:text-surface-300
-}
-
-.p-treetable-column-sorted {
-    @apply bg-highlight
-}
-
-.p-treetable-column-sorted .p-treetable-sort-icon {
-    @apply bg-highlight
-}
-
-.p-treetable-hoverable .p-treetable-selectable-row {
-    @apply cursor-pointer
-}
-
-.p-treetable-loading-icon {
-    @apply text-[2rem] w-8 h-8
-}
-
-.p-treetable-gridlines .p-treetable-header {
-    @apply border-t border-x
-}
-
-.p-treetable-gridlines .p-treetable-footer {
-    @apply border-b border-x
-}
-
-.p-treetable-gridlines .p-treetable-paginator-top {
-    @apply border-t border-x
-}
-
-.p-treetable-gridlines .p-treetable-paginator-bottom {
-    @apply border-b border-x
-}
-
-.p-treetable-gridlines .p-treetable-thead > tr > th {
-    @apply border-t border-x last:border
-}
-
-.p-treetable-gridlines .p-treetable-tbody > tr > td {
-    @apply border-t border-s last:border-r
-}
-
-.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
-    @apply border-y border-s last:border
-}
-
-.p-treetable-gridlines .p-treetable-tfoot > tr > td {
-    @apply border-y border-s last:border
-}
-
-.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {
-    @apply border-b border-s last:border-r
-}
-
-.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {
-    @apply border-b border-s last:border-r
-}
-
-.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {
-    @apply border-x
-}
-
-.p-treetable.p-treetable-sm .p-treetable-header {
-    @apply py-1 px-2
-}
-
-.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
-    @apply py-1 px-2
-}
-
-.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
-    @apply py-1 px-2
-}
-
-.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
-    @apply py-1 px-2
-}
-
-.p-treetable.p-treetable-sm .p-treetable-footer {
-    @apply py-1 px-2
-}
-
-.p-treetable.p-treetable-lg .p-treetable-header {
-    @apply py-4 px-5
-}
-
-.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
-    @apply py-4 px-5
-}
-
-.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {
-    @apply py-4 px-5
-}
-
-.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {
-    @apply py-4 px-5
-}
-
-.p-treetable.p-treetable-lg .p-treetable-footer {
-    @apply py-4 px-5
-}
-
-.p-treetable-body-cell-content {
-    @apply flex items-center gap-2
-}
-
-.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button {
-    @apply text-inherit
-}
-
-.p-treetable-node-toggle-button {
-    @apply inline-flex items-center justify-center overflow-hidden relative select-none
-        transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer
-        enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900
-        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0
-        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-
-}
-
-.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {
-    @apply bg-surface-0 dark:bg-surface-900 text-primary
-}
-
-.p-treetable-node-toggle-icon:dir(rtl) {
-    @apply rotate-180
-}
diff --git a/apps/volt/assets/styles/tailwind.css b/apps/volt/assets/styles/tailwind.css
index 57c6c2a8a..bd6213e1d 100644
--- a/apps/volt/assets/styles/tailwind.css
+++ b/apps/volt/assets/styles/tailwind.css
@@ -1,4 +1,3 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "./primevue/tailwind.css";
-@import "tailwindcss/utilities";
\ No newline at end of file
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file

From b80bd6d784c7699642a0e31f47e73f2c46ebd43f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 11:05:19 +0300
Subject: [PATCH 68/77] Update to Tailwind v4

---
 apps/volt/assets/styles/app/_core.scss |  27 +-
 apps/volt/assets/styles/tailwind.css   |  39 +-
 apps/volt/nuxt.config.js               |  12 +-
 apps/volt/package.json                 |   3 +-
 apps/volt/tailwind.config.js           |  46 ---
 pnpm-lock.yaml                         | 502 +++++++++++++++++++------
 6 files changed, 433 insertions(+), 196 deletions(-)
 delete mode 100644 apps/volt/tailwind.config.js

diff --git a/apps/volt/assets/styles/app/_core.scss b/apps/volt/assets/styles/app/_core.scss
index 59bca1453..684b74075 100644
--- a/apps/volt/assets/styles/app/_core.scss
+++ b/apps/volt/assets/styles/app/_core.scss
@@ -1,7 +1,7 @@
 html {
     font-size: 14px;
     font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-feature-settings: "cv02","cv03","cv04","cv11";
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
 }
 
 body {
@@ -29,7 +29,12 @@ a {
     color: var(--selection-text-color);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-block: 1.5rem 1rem;
     margin-inline: 0;
     font-family: inherit;
@@ -75,20 +80,4 @@ p {
 .p-toast.p-toast-top-right,
 .p-toast.p-toast-top-left {
     top: 7rem;
-}
-
-button {
-    font-family: inherit;
-    font-feature-settings: inherit;
-}
-
-*,
-::before,
-::after {
-    border-width: 0;
-    border-style: solid;
-}
-
-textarea {
-    resize: none;
-}
+}
\ No newline at end of file
diff --git a/apps/volt/assets/styles/tailwind.css b/apps/volt/assets/styles/tailwind.css
index bd6213e1d..f803d4670 100644
--- a/apps/volt/assets/styles/tailwind.css
+++ b/apps/volt/assets/styles/tailwind.css
@@ -1,3 +1,36 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@custom-variant dark (&:where(.p-dark, .p-dark *));
+
+@theme {
+    --breakpoint-sm: '576px';
+    --breakpoint-md: '768px';
+    --breakpoint-lg: '992px';
+    --breakpoint-xl: '1200px';
+    --breakpoint-2xl: '1920px';
+}
+
+@custom-variant p-invalid (&[data-p~="invalid"]);
+@custom-variant p-small (&[data-p~="small"]);
+@custom-variant p-large (&[data-p~="large"]);
+@custom-variant p-xlarge (&[data-p~="xlarge"]);
+@custom-variant p-fluid (&[data-p~="fluid"]);
+@custom-variant p-filled (&[data-p~="filled"]);
+@custom-variant p-horizontal (&[data-p~="horizontal"]);
+@custom-variant p-vertical (&[data-p~="vertical"]);
+@custom-variant p-stacked (&[data-p~="stacked"]);
+@custom-variant p-checked (&[data-p~="checked"]);
+@custom-variant p-disabled (&[data-p~="disabled"]);
+@custom-variant p-enabled (&:not([data-p~="disabled"]));
+@custom-variant p-left (&[data-p~="left"]);
+@custom-variant p-right (&[data-p~="right"]);
+@custom-variant p-top (&[data-p~="top"]);
+@custom-variant p-bottom (&[data-p~="bottom"]);
+@custom-variant p-alternate (&[data-p~="alternate"]);
+@custom-variant p-active (&[data-p~="active"]);
+@custom-variant p-focus-visible (&[data-p~="focus-visible"]);
+@custom-variant p-readonly (&[data-p~="readonly"]);
+@custom-variant p-removable (&[data-p~="removable"]);
+@custom-variant p-circle (&[data-p~="circle"]);
+@custom-variant p-determinate (&[data-p~="determinate"]);
+@custom-variant p-indeterminate (&[data-p~="indeterminate"]);
\ No newline at end of file
diff --git a/apps/volt/nuxt.config.js b/apps/volt/nuxt.config.js
index aaebce14e..e53a1da00 100644
--- a/apps/volt/nuxt.config.js
+++ b/apps/volt/nuxt.config.js
@@ -1,5 +1,7 @@
 const baseUrl = '/';
 
+import tailwindcss from '@tailwindcss/vite';
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: '2024-11-01',
@@ -29,7 +31,8 @@ export default defineNuxtConfig({
                     silenceDeprecations: ['legacy-js-api'] //@todo
                 }
             }
-        }
+        },
+        plugins: [tailwindcss()]
     },
     runtimeConfig: {
         GITHUB_TOKEN: ''
@@ -71,13 +74,6 @@ export default defineNuxtConfig({
         }
     },
     css: ['@/assets/styles/tailwind.css', '@/assets/styles/app/app.scss', '@/assets/styles/demo/flags.css', 'primeicons/primeicons.css'],
-    postcss: {
-        plugins: {
-            'postcss-import': {},
-            tailwindcss: {},
-            autoprefixer: {}
-        }
-    },
     layouts: {
         default: '~/layouts/default.vue'
     }
diff --git a/apps/volt/package.json b/apps/volt/package.json
index a410c0117..c2387a866 100644
--- a/apps/volt/package.json
+++ b/apps/volt/package.json
@@ -57,8 +57,9 @@
         "sass": "catalog:app",
         "sass-loader": "catalog:app",
         "tailwind-merge": "^3.0.2",
-        "tailwindcss": "^3",
+        "tailwindcss": "^4",
         "tailwindcss-primeui": "catalog:",
+        "@tailwindcss/vite": "4.0.9",
         "typedoc": "0.27.9",
         "vite": "catalog:app"
     },
diff --git a/apps/volt/tailwind.config.js b/apps/volt/tailwind.config.js
deleted file mode 100644
index 149825ba5..000000000
--- a/apps/volt/tailwind.config.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-import PrimeUI from 'tailwindcss-primeui';
-import plugin from 'tailwindcss/plugin';
-
-export default {
-    darkMode: ['selector', '[class~="p-dark"]'],
-    content: ['./components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './volt/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
-    plugins: [
-        PrimeUI,
-        plugin(function ({ addVariant }) {
-            addVariant('p-invalid', '&[data-p~="invalid"]');
-            addVariant('p-small', '&[data-p~="small"]');
-            addVariant('p-large', '&[data-p~="large"]');
-            addVariant('p-xlarge', '&[data-p~="xlarge"]');
-            addVariant('p-fluid', '&[data-p~="fluid"]');
-            addVariant('p-filled', '&[data-p~="filled"]');
-            addVariant('p-horizontal', '&[data-p~="horizontal"]');
-            addVariant('p-vertical', '&[data-p~="vertical"]');
-            addVariant('p-stacked', '&[data-p~="stacked"]');
-            addVariant('p-checked', '&[data-p~="checked"]');
-            addVariant('p-disabled', '&[data-p~="disabled"]');
-            addVariant('p-enabled', '&:not([data-p~="disabled"])');
-            addVariant('p-left', '&[data-p~="left"]');
-            addVariant('p-right', '&[data-p~="right"]');
-            addVariant('p-top', '&[data-p~="top"]');
-            addVariant('p-bottom', '&[data-p~="bottom"]');
-            addVariant('p-alternate', '&[data-p~="alternate"]');
-            addVariant('p-active', '&[data-p~="active"]');
-            addVariant('p-focus-visible', '&[data-p~="focus-visible"]');
-            addVariant('p-readonly', '&[data-p~="readonly"]');
-            addVariant('p-removable', '&[data-p~="removable"]');
-            addVariant('p-circle', '&[data-p~="circle"]');
-            addVariant('p-determinate', '&[data-p~="determinate"]');
-            addVariant('p-indeterminate', '&[data-p~="indeterminate"]');
-        })
-    ],
-    theme: {
-        screens: {
-            sm: '576px',
-            md: '768px',
-            lg: '992px',
-            xl: '1200px',
-            '2xl': '1920px'
-        }
-    }
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fdecaf2ea..a6a286505 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,7 +77,7 @@ importers:
         version: 10.0.2(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: ^5.2.3
-        version: 5.2.3(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3)
+        version: 5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3)
       eslint-plugin-vue:
         specifier: ^9.32.0
         version: 9.32.0(eslint@9.21.0(jiti@2.4.2))
@@ -153,7 +153,7 @@ importers:
         version: 19.0.0
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       postcss:
         specifier: ^8.4.31
         version: 8.5.3
@@ -174,7 +174,7 @@ importers:
         version: 0.23.23(typescript@5.7.3)
       vite:
         specifier: catalog:app
-        version: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+        version: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   apps/volt:
     dependencies:
@@ -221,6 +221,9 @@ importers:
       '@stackblitz/sdk':
         specifier: ^1.8.2
         version: 1.11.0
+      '@tailwindcss/vite':
+        specifier: 4.0.9
+        version: 4.0.9(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       autoprefixer:
         specifier: ^10
         version: 10.4.20(postcss@8.5.3)
@@ -229,7 +232,7 @@ importers:
         version: 19.0.0
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       postcss:
         specifier: ^8.4.31
         version: 8.5.3
@@ -243,17 +246,17 @@ importers:
         specifier: ^3.0.2
         version: 3.0.2
       tailwindcss:
-        specifier: ^3
-        version: 3.4.17
+        specifier: ^4
+        version: 4.0.9
       tailwindcss-primeui:
         specifier: 'catalog:'
-        version: 0.5.1(tailwindcss@3.4.17)
+        version: 0.5.1(tailwindcss@4.0.9)
       typedoc:
         specifier: 0.27.9
         version: 0.27.9(typescript@5.7.3)
       vite:
         specifier: catalog:app
-        version: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+        version: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   packages/auto-import-resolver:
     dependencies:
@@ -266,7 +269,7 @@ importers:
         version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.7.3)(yaml@2.7.0)
       unplugin-vue-components:
         specifier: ^0.27.0
-        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4)(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3))
+        version: 0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3))
     publishDirectory: dist
 
   packages/core:
@@ -341,7 +344,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^2.1.0
-        version: 2.1.3(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        version: 2.1.3(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/eslint-config':
         specifier: ^1.1.0
         version: 1.1.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
@@ -353,7 +356,7 @@ importers:
         version: 3.15.4
       '@nuxt/test-utils':
         specifier: ^3
-        version: 3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+        version: 3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(lightningcss@1.29.1)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       '@primeuix/themes':
         specifier: 'catalog:'
         version: 1.0.0
@@ -365,10 +368,10 @@ importers:
         version: 0.6.1(magicast@0.3.5)
       nuxt:
         specifier: catalog:app
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0)
       vitest:
         specifier: ^3.0.7
-        version: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
+        version: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)
       vue-tsc:
         specifier: ~2.1.6
         version: 2.1.10(typescript@5.7.3)
@@ -396,7 +399,7 @@ importers:
         version: 2.4.6
       vitest:
         specifier: ^0.29.8
-        version: 0.29.8(jsdom@19.0.0)(sass@1.45.0)(terser@5.39.0)
+        version: 0.29.8(jsdom@19.0.0)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)
     publishDirectory: dist
 
   packages/themes:
@@ -2236,6 +2239,84 @@ packages:
     peerDependencies:
       eslint: '>=9.0.0'
 
+  '@tailwindcss/node@4.0.9':
+    resolution: {integrity: sha512-tOJvdI7XfJbARYhxX+0RArAhmuDcczTC46DGCEziqxzzbIaPnfYaIyRT31n4u8lROrsO7Q6u/K9bmQHL2uL1bQ==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.9':
+    resolution: {integrity: sha512-YBgy6+2flE/8dbtrdotVInhMVIxnHJPbAwa7U1gX4l2ThUIaPUp18LjB9wEH8wAGMBZUb//SzLtdXXNBHPUl6Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.9':
+    resolution: {integrity: sha512-pWdl4J2dIHXALgy2jVkwKBmtEb73kqIfMpYmcgESr7oPQ+lbcQ4+tlPeVXaSAmang+vglAfFpXQCOvs/aGSqlw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.9':
+    resolution: {integrity: sha512-4Dq3lKp0/C7vrRSkNPtBGVebEyWt9QPPlQctxJ0H3MDyiQYvzVYf8jKow7h5QkWNe8hbatEqljMj/Y0M+ERYJg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.9':
+    resolution: {integrity: sha512-k7U1RwRODta8x0uealtVt3RoWAWqA+D5FAOsvVGpYoI6ObgmnzqWW6pnVwz70tL8UZ/QXjeMyiICXyjzB6OGtQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.9':
+    resolution: {integrity: sha512-NDDjVweHz2zo4j+oS8y3KwKL5wGCZoXGA9ruJM982uVJLdsF8/1AeKvUwKRlMBpxHt1EdWJSAh8a0Mfhl28GlQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.9':
+    resolution: {integrity: sha512-jk90UZ0jzJl3Dy1BhuFfRZ2KP9wVKMXPjmCtY4U6fF2LvrjP5gWFJj5VHzfzHonJexjrGe1lMzgtjriuZkxagg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.9':
+    resolution: {integrity: sha512-3eMjyTC6HBxh9nRgOHzrc96PYh1/jWOwHZ3Kk0JN0Kl25BJ80Lj9HEvvwVDNTgPg154LdICwuFLuhfgH9DULmg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.9':
+    resolution: {integrity: sha512-v0D8WqI/c3WpWH1kq/HP0J899ATLdGZmENa2/emmNjubT0sWtEke9W9+wXeEoACuGAhF9i3PO5MeyditpDCiWQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.9':
+    resolution: {integrity: sha512-Kvp0TCkfeXyeehqLJr7otsc4hd/BUPfcIGrQiwsTVCfaMfjQZCG7DjI+9/QqPZha8YapLA9UoIcUILRYO7NE1Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.9':
+    resolution: {integrity: sha512-m3+60T/7YvWekajNq/eexjhV8z10rswcz4BC9bioJ7YaN+7K8W2AmLmG0B79H14m6UHE571qB0XsPus4n0QVgQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.9':
+    resolution: {integrity: sha512-dpc05mSlqkwVNOUjGu/ZXd5U1XNch1kHFJ4/cHkZFvaW1RzbHmRt24gvM8/HC6IirMxNarzVw4IXVtvrOoZtxA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.9':
+    resolution: {integrity: sha512-eLizHmXFqHswJONwfqi/WZjtmWZpIalpvMlNhTM99/bkHtUs6IqgI1XQ0/W5eO2HiRQcIlXUogI2ycvKhVLNcA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/vite@4.0.9':
+    resolution: {integrity: sha512-BIKJO+hwdIsN7V6I7SziMZIVHWWMsV/uCQKYEbeiGRDRld+TkqyRRl9+dQ0MCXbhcVr+D9T/qX2E84kT7V281g==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
+
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -4284,6 +4365,70 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -5915,6 +6060,9 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.0.9:
+    resolution: {integrity: sha512-12laZu+fv1ONDRoNR9ipTOpUD7RN9essRVkX36sjxuRUInpN7hIiHN4lBd/SIFjbISvnXzp8h/hXzmU8SQQYhw==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -6095,8 +6243,8 @@ packages:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
 
-  type-fest@4.36.0:
-    resolution: {integrity: sha512-3T/PUdKTCnkUmhQU6FFJEHsLwadsRegktX3TNHk+2JJB9HlA8gp1/VXblXVDI93kSnXF2rdPx0GMbHtJIV2LPg==}
+  type-fest@4.37.0:
+    resolution: {integrity: sha512-S/5/0kFftkq27FPNye0XM1e2NsnoD/3FS+pBmbjmmtLT6I+i344KoOf7pvXreaFsDamWeaJX55nczA1m5PsBDg==}
     engines: {node: '>=16'}
 
   type-level-regexp@0.1.17:
@@ -8148,32 +8296,32 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 7.2.0
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 7.2.0
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/devtools-kit@2.1.3(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@nuxt/devtools-kit@2.1.3(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       execa: 9.5.2
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
@@ -8202,13 +8350,13 @@ snapshots:
       prompts: 2.4.2
       semver: 7.7.1
 
-  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.6.8(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
@@ -8237,9 +8385,9 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.10
       unimport: 3.14.6(rollup@3.29.5)
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
       which: 3.0.1
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8249,13 +8397,13 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/devtools@1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 1.7.0
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.6.8(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
@@ -8284,9 +8432,9 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.10
       unimport: 3.14.6(rollup@4.34.9)
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       which: 3.0.1
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8296,12 +8444,12 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/devtools@2.1.3(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@2.1.3(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      '@nuxt/devtools-kit': 2.1.3(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/devtools-kit': 2.1.3(magicast@0.3.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/devtools-wizard': 2.1.3
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.7.2(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.7.2
       birpc: 2.2.0
       consola: 3.4.0
@@ -8326,9 +8474,9 @@ snapshots:
       sirv: 3.0.1
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.12
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
       which: 5.0.0
       ws: 8.18.1
     transitivePeerDependencies:
@@ -8445,7 +8593,7 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/test-utils@3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
+  '@nuxt/test-utils@3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(lightningcss@1.29.1)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
@@ -8470,12 +8618,12 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vitest-environment-nuxt: 1.0.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(lightningcss@1.29.1)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
       '@vue/test-utils': 2.4.6
-      vitest: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)
+      vitest: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -8492,12 +8640,12 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@3.29.5)
-      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       autoprefixer: 10.4.20(postcss@8.5.3)
       consola: 3.4.0
       cssnano: 7.0.6(postcss@8.5.3)
@@ -8521,9 +8669,9 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
       vue: 3.5.13(typescript@5.7.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
@@ -8551,12 +8699,12 @@ snapshots:
       - vue-tsc
       - yaml
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@4.34.9)
-      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue': 5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       autoprefixer: 10.4.20(postcss@8.5.3)
       consola: 3.4.0
       cssnano: 7.0.6(postcss@8.5.3)
@@ -8580,9 +8728,9 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 2.2.0
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-plugin-checker: 0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))
       vue: 3.5.13(typescript@5.7.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
@@ -8942,6 +9090,67 @@ snapshots:
       - supports-color
       - typescript
 
+  '@tailwindcss/node@4.0.9':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.9
+
+  '@tailwindcss/oxide-android-arm64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.9':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.9
+      '@tailwindcss/oxide-darwin-arm64': 4.0.9
+      '@tailwindcss/oxide-darwin-x64': 4.0.9
+      '@tailwindcss/oxide-freebsd-x64': 4.0.9
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.9
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.9
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.9
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.9
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.9
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.9
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.9
+
+  '@tailwindcss/vite@4.0.9(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))':
+    dependencies:
+      '@tailwindcss/node': 4.0.9
+      '@tailwindcss/oxide': 4.0.9
+      lightningcss: 1.29.1
+      tailwindcss: 4.0.9
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+
   '@tootallnate/once@2.0.0': {}
 
   '@trysound/sax@0.2.0': {}
@@ -9112,19 +9321,19 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
 
   '@vitest/expect@0.29.8':
@@ -9140,13 +9349,13 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))':
+  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@vitest/spy': 3.0.7
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
   '@vitest/pretty-format@3.0.7':
     dependencies:
@@ -9280,38 +9489,38 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.6.8(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.6.8
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 1.1.2
-      vite-hot-client: 0.2.4(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
+      vite-hot-client: 0.2.4(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.6.8(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.6.8
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 1.1.2
-      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.7.2(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.2
       '@vue/devtools-shared': 7.7.2
       mitt: 3.0.1
       nanoid: 5.1.2
       pathe: 2.0.3
-      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite-hot-client: 0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
@@ -10263,7 +10472,7 @@ snapshots:
 
   dot-prop@9.0.0:
     dependencies:
-      type-fest: 4.36.0
+      type-fest: 4.37.0
 
   dotenv@16.4.7: {}
 
@@ -10517,13 +10726,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-prettier@5.2.3(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3):
+  eslint-plugin-prettier@5.2.3(@types/eslint@9.6.1)(eslint-config-prettier@10.0.2(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.3):
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
       prettier: 3.5.3
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
+      '@types/eslint': 9.6.1
       eslint-config-prettier: 10.0.2(eslint@9.21.0(jiti@2.4.2))
 
   eslint-plugin-regexp@2.7.0(eslint@9.21.0(jiti@2.4.2)):
@@ -11362,6 +11572,51 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
+
   lilconfig@2.1.0: {}
 
   lilconfig@3.1.3: {}
@@ -11777,15 +12032,15 @@ snapshots:
 
   nuxi@3.22.4: {}
 
-  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
     dependencies:
       '@nuxt/cli': 3.22.4(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/devtools': 1.7.0(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
       '@unhead/dom': 1.11.20
       '@unhead/shared': 1.11.20
       '@unhead/ssr': 1.11.20
@@ -11899,15 +12154,15 @@ snapshots:
       - xml2js
       - yaml
 
-  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.2.4)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3))(yaml@2.7.0):
     dependencies:
       '@nuxt/cli': 3.22.4(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/devtools': 1.7.0(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.5(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.9)(eslint@9.21.0(jiti@2.4.2))(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(sass@1.45.0)(terser@5.39.0)(typescript@5.7.3)(vue-tsc@2.1.10(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
       '@unhead/dom': 1.11.20
       '@unhead/shared': 1.11.20
       '@unhead/ssr': 1.11.20
@@ -12158,7 +12413,7 @@ snapshots:
     dependencies:
       '@babel/code-frame': 7.26.2
       index-to-position: 0.1.2
-      type-fest: 4.36.0
+      type-fest: 4.37.0
 
   parse-ms@4.0.0: {}
 
@@ -12712,14 +12967,14 @@ snapshots:
     dependencies:
       find-up-simple: 1.0.1
       read-pkg: 9.0.1
-      type-fest: 4.36.0
+      type-fest: 4.37.0
 
   read-pkg@9.0.1:
     dependencies:
       '@types/normalize-package-data': 2.4.4
       normalize-package-data: 6.0.2
       parse-json: 8.1.0
-      type-fest: 4.36.0
+      type-fest: 4.37.0
       unicorn-magic: 0.1.0
 
   readable-stream@2.3.8:
@@ -13247,6 +13502,10 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.17
 
+  tailwindcss-primeui@0.5.1(tailwindcss@4.0.9):
+    dependencies:
+      tailwindcss: 4.0.9
+
   tailwindcss@3.4.17:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -13274,6 +13533,8 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tailwindcss@4.0.9: {}
+
   tapable@2.2.1: {}
 
   tar-stream@3.1.7:
@@ -13436,7 +13697,7 @@ snapshots:
 
   type-fest@2.19.0: {}
 
-  type-fest@4.36.0: {}
+  type-fest@4.37.0: {}
 
   type-level-regexp@0.1.17: {}
 
@@ -13603,7 +13864,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4)(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-components@0.27.5(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
@@ -13773,32 +14034,32 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  vite-dev-rpc@1.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-dev-rpc@1.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       birpc: 2.2.0
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-hot-client: 2.0.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-hot-client: 2.0.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
 
-  vite-hot-client@0.2.4(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@0.2.4(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-hot-client@0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@0.2.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-hot-client@2.0.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-hot-client@2.0.4(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
 
-  vite-node@0.29.8(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0):
+  vite-node@0.29.8(@types/node@22.13.9)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
       mlly: 1.7.4
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 4.5.9(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0)
+      vite: 4.5.9(@types/node@22.13.9)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -13809,13 +14070,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite-node@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
       es-module-lexer: 1.6.0
       pathe: 2.0.3
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -13830,7 +14091,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3)):
+  vite-plugin-checker@0.8.0(eslint@9.21.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.7.3)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.1.10(typescript@5.7.3)):
     dependencies:
       '@babel/code-frame': 7.26.2
       ansi-escapes: 4.3.2
@@ -13842,7 +14103,7 @@ snapshots:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.12
@@ -13853,7 +14114,7 @@ snapshots:
       typescript: 5.7.3
       vue-tsc: 2.1.10(typescript@5.7.3)
 
-  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@3.29.5)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@3.29.5)
@@ -13864,14 +14125,14 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.1
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.9)(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
@@ -13882,14 +14143,14 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.1
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-inspect@11.0.0(@nuxt/kit@3.15.4(magicast@0.3.5))(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       ansis: 3.17.0
       debug: 4.4.0(supports-color@9.4.0)
@@ -13899,14 +14160,14 @@ snapshots:
       perfect-debounce: 1.0.0
       sirv: 3.0.1
       unplugin-utils: 0.2.4
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-dev-rpc: 1.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-dev-rpc: 1.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
     optionalDependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-inspector@5.3.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@@ -13917,11 +14178,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.17
-      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-inspector@5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@@ -13932,11 +14193,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.17
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@4.5.9(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0):
+  vite@4.5.9(@types/node@22.13.9)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       esbuild: 0.18.20
       postcss: 8.5.3
@@ -13944,10 +14205,11 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.13.9
       fsevents: 2.3.3
+      lightningcss: 1.29.1
       sass: 1.45.0
       terser: 5.39.0
 
-  vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite@6.0.11(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.24.2
       postcss: 8.5.3
@@ -13956,11 +14218,12 @@ snapshots:
       '@types/node': 22.13.9
       fsevents: 2.3.3
       jiti: 2.4.2
+      lightningcss: 1.29.1
       sass: 1.45.0
       terser: 5.39.0
       yaml: 2.7.0
 
-  vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
+  vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.0
       postcss: 8.5.3
@@ -13969,13 +14232,14 @@ snapshots:
       '@types/node': 22.13.9
       fsevents: 2.3.3
       jiti: 2.4.2
+      lightningcss: 1.29.1
       sass: 1.45.0
       terser: 5.39.0
       yaml: 2.7.0
 
-  vitest-environment-nuxt@1.0.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
+  vitest-environment-nuxt@1.0.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(lightningcss@1.29.1)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0):
     dependencies:
-      '@nuxt/test-utils': 3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      '@nuxt/test-utils': 3.17.1(@types/node@22.13.9)(@vue/test-utils@2.4.6)(jiti@2.4.2)(lightningcss@1.29.1)(magicast@0.3.5)(terser@5.39.0)(typescript@5.7.3)(vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -14002,7 +14266,7 @@ snapshots:
       - vitest
       - yaml
 
-  vitest@0.29.8(jsdom@19.0.0)(sass@1.45.0)(terser@5.39.0):
+  vitest@0.29.8(jsdom@19.0.0)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0):
     dependencies:
       '@types/chai': 4.3.20
       '@types/chai-subset': 1.3.5
@@ -14025,8 +14289,8 @@ snapshots:
       tinybench: 2.9.0
       tinypool: 0.4.0
       tinyspy: 1.1.1
-      vite: 4.5.9(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0)
-      vite-node: 0.29.8(@types/node@22.13.9)(sass@1.45.0)(terser@5.39.0)
+      vite: 4.5.9(@types/node@22.13.9)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)
+      vite-node: 0.29.8(@types/node@22.13.9)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       jsdom: 19.0.0
@@ -14039,10 +14303,10 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0):
+  vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       '@vitest/expect': 3.0.7
-      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))
+      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
       '@vitest/pretty-format': 3.0.7
       '@vitest/runner': 3.0.7
       '@vitest/snapshot': 3.0.7
@@ -14058,8 +14322,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.1)(sass@1.45.0)(terser@5.39.0)(yaml@2.7.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.13.9

From 2911768e823aa9d821f6d90bbd018e8ad2d1021e Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Mar 2025 11:09:12 +0300
Subject: [PATCH 69/77] Fixed #7364 - Select: unexpected horizontal scroll

---
 packages/primevue/src/select/Select.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/primevue/src/select/Select.vue b/packages/primevue/src/select/Select.vue
index 63c26a66f..2636b8013 100755
--- a/packages/primevue/src/select/Select.vue
+++ b/packages/primevue/src/select/Select.vue
@@ -47,7 +47,7 @@
             @keydown="onKeyDown"
             v-bind="ptm('label')"
         >
-            <slot name="value" :value="d_value" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label ?? 'empty' }}</slot>
+            <slot name="value" :value="d_value" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : (label ?? 'empty') }}</slot>
         </span>
         <slot v-if="isClearIconVisible" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
             <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" />
@@ -919,7 +919,7 @@ export default {
                 const element = findSingle(this.list, `li[id="${id}"]`);
 
                 if (element) {
-                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
                 } else if (!this.virtualScrollerDisabled) {
                     this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
                 }

From 64cf32976f37ce0f75da8a852bdd7af4a27f872f Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Mar 2025 11:09:33 +0300
Subject: [PATCH 70/77] Fix stackblitz demos

---
 apps/showcase/components/doc/codeeditor/templates.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/showcase/components/doc/codeeditor/templates.js b/apps/showcase/components/doc/codeeditor/templates.js
index 8683c6da0..0af02b4f8 100644
--- a/apps/showcase/components/doc/codeeditor/templates.js
+++ b/apps/showcase/components/doc/codeeditor/templates.js
@@ -21,7 +21,7 @@ const core_dependencies = {
     tailwindcss: app_dependencies['tailwindcss'] || 'latest',
     autoprefixer: app_dependencies['autoprefixer'] || 'latest',
     postcss: app_dependencies['postcss'] || 'latest',
-    'tailwindcss-primeui': app_dependencies['tailwindcss-primeui'] || 'latest',
+    'tailwindcss-primeui': 'latest',
     'unplugin-vue-components': 'latest'
 };
 

From ab7cb7f02c3a2c1474c9306a508d82e334a59d8a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 11:42:07 +0300
Subject: [PATCH 71/77] Migrated classes to TW4

---
 apps/volt/doc/skeleton/CardDoc.vue     | 4 ++--
 apps/volt/doc/skeleton/ListDoc.vue     | 4 ++--
 apps/volt/doc/timeline/TemplateDoc.vue | 8 ++++----
 apps/volt/volt/checkbox/index.vue      | 4 ++--
 apps/volt/volt/inputmask/index.vue     | 2 +-
 apps/volt/volt/inputnumber/index.vue   | 6 +++---
 apps/volt/volt/inputtext/index.vue     | 2 +-
 apps/volt/volt/slider/index.vue        | 4 ++--
 apps/volt/volt/textarea/index.vue      | 2 +-
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/volt/doc/skeleton/CardDoc.vue b/apps/volt/doc/skeleton/CardDoc.vue
index 2a8fd2430..f4842f6b2 100644
--- a/apps/volt/doc/skeleton/CardDoc.vue
+++ b/apps/volt/doc/skeleton/CardDoc.vue
@@ -3,7 +3,7 @@
         <p>Sample Card implementation using different Skeleton components and Tailwind CSS utilities.</p>
     </DocSectionText>
     <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <div class="flex mb-4">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                 <div>
@@ -29,7 +29,7 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
      <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <div class="flex mb-4">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                 <div>
diff --git a/apps/volt/doc/skeleton/ListDoc.vue b/apps/volt/doc/skeleton/ListDoc.vue
index c0420b1dd..b0e5f9495 100644
--- a/apps/volt/doc/skeleton/ListDoc.vue
+++ b/apps/volt/doc/skeleton/ListDoc.vue
@@ -3,7 +3,7 @@
         <p>Sample List implementation using different Skeleton components and Tailwind CSS utilities.</p>
     </DocSectionText>
     <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <ul class="m-0 p-0 list-none">
                 <li class="mb-4">
                     <div class="flex">
@@ -54,7 +54,7 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <ul class="m-0 p-0 list-none">
                 <li class="mb-4">
                     <div class="flex">
diff --git a/apps/volt/doc/timeline/TemplateDoc.vue b/apps/volt/doc/timeline/TemplateDoc.vue
index c1fd39f0a..20d712274 100644
--- a/apps/volt/doc/timeline/TemplateDoc.vue
+++ b/apps/volt/doc/timeline/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <Timeline :value="events" align="alternate">
             <template #marker="slotProps">
-                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-xs" :style="{ backgroundColor: slotProps.item.color }">
                     <i :class="slotProps.item.icon"></i>
                 </span>
             </template>
@@ -18,7 +18,7 @@
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-xs" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
@@ -48,7 +48,7 @@ const code = ref(`
     <div class="card">
         <Timeline :value="events" align="alternate">
             <template #marker="slotProps">
-                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-xs" :style="{ backgroundColor: slotProps.item.color }">
                     <i :class="slotProps.item.icon"></i>
                 </span>
             </template>
@@ -61,7 +61,7 @@ const code = ref(`
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-xs" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
diff --git a/apps/volt/volt/checkbox/index.vue b/apps/volt/volt/checkbox/index.vue
index 54169adc2..7493b5cef 100644
--- a/apps/volt/volt/checkbox/index.vue
+++ b/apps/volt/volt/checkbox/index.vue
@@ -19,8 +19,8 @@ const theme = ref({
         p-large:w-6 p-large:h-6`,
     input: `peer cursor-pointer disabled:cursor-default appearance-none 
         absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
-        border border-transparent rounded-sm`,
-    box: `flex justify-center items-center rounded-sm w-5 h-5
+        border border-transparent rounded-xs`,
+    box: `flex justify-center items-center rounded-xs w-5 h-5
         border border-surface-300 dark:border-surface-700
         bg-surface-0 dark:bg-surface-950
         text-surface-700 dark:text-surface-0
diff --git a/apps/volt/volt/inputmask/index.vue b/apps/volt/volt/inputmask/index.vue
index fa2dfcf50..7c742cefd 100644
--- a/apps/volt/volt/inputmask/index.vue
+++ b/apps/volt/volt/inputmask/index.vue
@@ -14,7 +14,7 @@ import { ref } from 'vue';
 import { ptViewMerge } from '../utils';
 
 const theme = ref({
-    root: `appearance-none rounded-md outline-none
+    root: `appearance-none rounded-md outline-hidden
         bg-surface-0 dark:bg-surface-950
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
diff --git a/apps/volt/volt/inputnumber/index.vue b/apps/volt/volt/inputnumber/index.vue
index daa18f522..c9c59e2ec 100644
--- a/apps/volt/volt/inputnumber/index.vue
+++ b/apps/volt/volt/inputnumber/index.vue
@@ -14,7 +14,7 @@ const theme = ref({
     root: `inline-flex relative 
         p-vertical:flex-col p-fluid:w-full`,
     pcInputText: {
-        root: `appearance-none rounded-md outline-none flex-auto
+        root: `appearance-none rounded-md outline-hidden flex-auto
         bg-surface-0 dark:bg-surface-950
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
@@ -35,7 +35,7 @@ const theme = ref({
         p-fluid:w-[1%] p-fluid:p-vertical:w-full`
     },
     buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`,
-    incrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+    incrementButton: `flex items-center justify-center grow-0 shrink-0 basis-auto cursor-pointer w-10
         bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
         border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
         text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
@@ -48,7 +48,7 @@ const theme = ref({
         p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
         p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`,
     incrementIcon: ``,
-    decrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+    decrementButton: `flex items-center justify-center grow-0 shrink-0 basis-auto cursor-pointer w-10
         bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
         border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
         text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
diff --git a/apps/volt/volt/inputtext/index.vue b/apps/volt/volt/inputtext/index.vue
index 61b3bc6ee..013e90b7e 100644
--- a/apps/volt/volt/inputtext/index.vue
+++ b/apps/volt/volt/inputtext/index.vue
@@ -14,7 +14,7 @@ import { ref } from 'vue';
 import { ptViewMerge } from '../utils';
 
 const theme = ref({
-    root: `appearance-none rounded-md outline-none
+    root: `appearance-none rounded-md outline-hidden
         bg-surface-0 dark:bg-surface-950
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
diff --git a/apps/volt/volt/slider/index.vue b/apps/volt/volt/slider/index.vue
index 39b6d6987..1307e59a4 100644
--- a/apps/volt/volt/slider/index.vue
+++ b/apps/volt/volt/slider/index.vue
@@ -25,10 +25,10 @@ const handleCommon = `cursor-grab touch-none flex items-center justify-center h-
         p-vertical:start-1/2 p-vertical:-mb-[10px] p-vertical:-ms-[10px]`;
 
 const theme = ref({
-    root: `relative bg-surface-200 dark:bg-surface-700 rounded-sm
+    root: `relative bg-surface-200 dark:bg-surface-700 rounded-xs
             p-horizontal:h-[3px]
             p-vertical:min-h-[100px] p-vertical:w-[3px]`,
-    range: `block bg-primary rounded-sm
+    range: `block bg-primary rounded-xs
             p-horizontal:top-0 p-horizontal:start-0 p-horizontal:h-full
             p-vertical:bottom-0 p-vertical:start-0 p-vertical:w-full`,
     handle: handleCommon,
diff --git a/apps/volt/volt/textarea/index.vue b/apps/volt/volt/textarea/index.vue
index c7988f10a..ad9c5470f 100644
--- a/apps/volt/volt/textarea/index.vue
+++ b/apps/volt/volt/textarea/index.vue
@@ -14,7 +14,7 @@ import { ref } from 'vue';
 import { ptViewMerge } from '../utils';
 
 const theme = ref({
-    root: `appearance-none rounded-md outline-none
+    root: `appearance-none rounded-md outline-hidden
         bg-surface-0 dark:bg-surface-950
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0

From e27ce0970c71713c6bd5017b82ffb7c81b35ee17 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 11:43:38 +0300
Subject: [PATCH 72/77] Update menu

---
 apps/volt/assets/data/menu.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index ae9a53645..10a8c142e 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -97,6 +97,11 @@
             "icon": "pi pi-eye",
             "to": "/icons"
         },
+        {
+            "name": "Figma UI Kit",
+            "icon": "pi pi-pencil",
+            "to": "https://primevue.org/uikit"
+        },
         {
             "name": "Templates",
             "icon": "pi pi-heart",

From b3798724ce24433ada071f6a3322b8ad22c0ab58 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Mar 2025 12:36:02 +0300
Subject: [PATCH 73/77] Remove console log

---
 packages/primevue/src/select/Select.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/primevue/src/select/Select.vue b/packages/primevue/src/select/Select.vue
index 3258e0d5f..35b0b5cc5 100755
--- a/packages/primevue/src/select/Select.vue
+++ b/packages/primevue/src/select/Select.vue
@@ -723,7 +723,7 @@ export default {
             if (this.appendTo === 'self') {
                 relativePosition(this.overlay, this.$el);
             } else {
-                if(this.overlay) {
+                if (this.overlay) {
                     this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
                     absolutePosition(this.overlay, this.$el);
                 }
@@ -808,8 +808,6 @@ export default {
                 this.queryOrientation = query;
 
                 this.matchMediaOrientationListener = () => {
-                    console.log('kkkkk');
-
                     this.alignOverlay();
                 };
 

From 0862792cf5b4d49c5bd9a2d44c628aa07bf9f8d3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 13:12:57 +0300
Subject: [PATCH 74/77] Initiate button base

---
 apps/volt/assets/data/menu.json           |   4 +
 apps/volt/components/doc/DocComponent.vue |   8 +-
 apps/volt/doc/avatar/AvatarGroupDoc.vue   |   1 +
 apps/volt/doc/avatar/IconDoc.vue          |   1 +
 apps/volt/doc/avatar/ImageDoc.vue         |   1 +
 apps/volt/doc/avatar/LabelDoc.vue         |   1 +
 apps/volt/doc/button/BadgeDoc.vue         |  26 +++++
 apps/volt/doc/button/BasicDoc.vue         |  26 +++++
 apps/volt/doc/button/ButtonGroupDoc.vue   |  26 +++++
 apps/volt/doc/button/DisabledDoc.vue      |  26 +++++
 apps/volt/doc/button/HeadlessDoc.vue      |  26 +++++
 apps/volt/doc/button/IconOnlyDoc.vue      |  26 +++++
 apps/volt/doc/button/IconsDoc.vue         |  26 +++++
 apps/volt/doc/button/ImportDoc.vue        |  26 +++++
 apps/volt/doc/button/LinkDoc.vue          |  26 +++++
 apps/volt/doc/button/LoadingDoc.vue       |  26 +++++
 apps/volt/doc/button/OutlinedDoc.vue      |  26 +++++
 apps/volt/doc/button/RaisedDoc.vue        |  26 +++++
 apps/volt/doc/button/RaisedTextDoc.vue    |  26 +++++
 apps/volt/doc/button/RoundedDoc.vue       |  26 +++++
 apps/volt/doc/button/SeverityDoc.vue      |  26 +++++
 apps/volt/doc/button/SizesDoc.vue         |  26 +++++
 apps/volt/doc/button/TemplateDoc.vue      |  26 +++++
 apps/volt/doc/button/TextDoc.vue          |  26 +++++
 apps/volt/doc/card/AdvancedDoc.vue        |   1 +
 apps/volt/doc/card/BasicDoc.vue           |   1 +
 apps/volt/doc/textarea/DisabledDoc.vue    |   2 +-
 apps/volt/doc/textarea/HelpTextDoc.vue    |  31 ------
 apps/volt/pages/button/index.vue          | 121 ++++++++++++++++++++++
 29 files changed, 604 insertions(+), 36 deletions(-)
 create mode 100644 apps/volt/doc/button/BadgeDoc.vue
 create mode 100644 apps/volt/doc/button/BasicDoc.vue
 create mode 100644 apps/volt/doc/button/ButtonGroupDoc.vue
 create mode 100644 apps/volt/doc/button/DisabledDoc.vue
 create mode 100644 apps/volt/doc/button/HeadlessDoc.vue
 create mode 100644 apps/volt/doc/button/IconOnlyDoc.vue
 create mode 100644 apps/volt/doc/button/IconsDoc.vue
 create mode 100644 apps/volt/doc/button/ImportDoc.vue
 create mode 100644 apps/volt/doc/button/LinkDoc.vue
 create mode 100644 apps/volt/doc/button/LoadingDoc.vue
 create mode 100644 apps/volt/doc/button/OutlinedDoc.vue
 create mode 100644 apps/volt/doc/button/RaisedDoc.vue
 create mode 100644 apps/volt/doc/button/RaisedTextDoc.vue
 create mode 100644 apps/volt/doc/button/RoundedDoc.vue
 create mode 100644 apps/volt/doc/button/SeverityDoc.vue
 create mode 100644 apps/volt/doc/button/SizesDoc.vue
 create mode 100644 apps/volt/doc/button/TemplateDoc.vue
 create mode 100644 apps/volt/doc/button/TextDoc.vue
 delete mode 100644 apps/volt/doc/textarea/HelpTextDoc.vue
 create mode 100644 apps/volt/pages/button/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 10a8c142e..c5dc35a8c 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -26,6 +26,10 @@
                     "name": "Avatar",
                     "to": "/avatar"
                 },
+                {
+                    "name": "Button",
+                    "to": "/button"
+                },
                 {
                     "name": "Card",
                     "to": "/card"
diff --git a/apps/volt/components/doc/DocComponent.vue b/apps/volt/components/doc/DocComponent.vue
index b0d8585eb..d3e77197c 100644
--- a/apps/volt/components/doc/DocComponent.vue
+++ b/apps/volt/components/doc/DocComponent.vue
@@ -28,21 +28,21 @@
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                             <a
                                 :href="`https://primevue.org${originPath}/#pt`"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                             <a
                                 :href="`https://primevue.org${originPath}/#accessibility`"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
-                                ><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs text-surface-900 dark:text-surface-50"></i
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
                             ></a>
                         </div>
                     </div>
@@ -59,7 +59,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 defineProps({
     title: String,
diff --git a/apps/volt/doc/avatar/AvatarGroupDoc.vue b/apps/volt/doc/avatar/AvatarGroupDoc.vue
index 10e62f828..6afa848b0 100644
--- a/apps/volt/doc/avatar/AvatarGroupDoc.vue
+++ b/apps/volt/doc/avatar/AvatarGroupDoc.vue
@@ -18,6 +18,7 @@
 <script setup>
 import Avatar from '@/volt/avatar';
 import AvatarGroup from '@/volt/avatargroup';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/avatar/IconDoc.vue b/apps/volt/doc/avatar/IconDoc.vue
index 254b5df45..9e3b95732 100644
--- a/apps/volt/doc/avatar/IconDoc.vue
+++ b/apps/volt/doc/avatar/IconDoc.vue
@@ -31,6 +31,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/avatar/ImageDoc.vue b/apps/volt/doc/avatar/ImageDoc.vue
index af47532db..5ccd6b512 100644
--- a/apps/volt/doc/avatar/ImageDoc.vue
+++ b/apps/volt/doc/avatar/ImageDoc.vue
@@ -29,6 +29,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/avatar/LabelDoc.vue b/apps/volt/doc/avatar/LabelDoc.vue
index 62f86e09a..57526b9e0 100644
--- a/apps/volt/doc/avatar/LabelDoc.vue
+++ b/apps/volt/doc/avatar/LabelDoc.vue
@@ -31,6 +31,7 @@
 
 <script setup>
 import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/button/BadgeDoc.vue b/apps/volt/doc/button/BadgeDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/BadgeDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/BasicDoc.vue b/apps/volt/doc/button/BasicDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/BasicDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/ButtonGroupDoc.vue b/apps/volt/doc/button/ButtonGroupDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/ButtonGroupDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/DisabledDoc.vue b/apps/volt/doc/button/DisabledDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/DisabledDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/HeadlessDoc.vue b/apps/volt/doc/button/HeadlessDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/HeadlessDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/IconOnlyDoc.vue b/apps/volt/doc/button/IconOnlyDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/IconOnlyDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/IconsDoc.vue b/apps/volt/doc/button/IconsDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/IconsDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/ImportDoc.vue b/apps/volt/doc/button/ImportDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/ImportDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/LinkDoc.vue b/apps/volt/doc/button/LinkDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/LinkDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/LoadingDoc.vue b/apps/volt/doc/button/LoadingDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/LoadingDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/OutlinedDoc.vue b/apps/volt/doc/button/OutlinedDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/OutlinedDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/RaisedDoc.vue b/apps/volt/doc/button/RaisedDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/RaisedDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/RaisedTextDoc.vue b/apps/volt/doc/button/RaisedTextDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/RaisedTextDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/RoundedDoc.vue b/apps/volt/doc/button/RoundedDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/RoundedDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/SeverityDoc.vue b/apps/volt/doc/button/SeverityDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/SeverityDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/SizesDoc.vue b/apps/volt/doc/button/SizesDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/SizesDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/TemplateDoc.vue b/apps/volt/doc/button/TemplateDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/TemplateDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/TextDoc.vue b/apps/volt/doc/button/TextDoc.vue
new file mode 100644
index 000000000..4a7ea0d70
--- /dev/null
+++ b/apps/volt/doc/button/TextDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/card/AdvancedDoc.vue b/apps/volt/doc/card/AdvancedDoc.vue
index 67666c1b1..973fd7320 100644
--- a/apps/volt/doc/card/AdvancedDoc.vue
+++ b/apps/volt/doc/card/AdvancedDoc.vue
@@ -29,6 +29,7 @@
 <script setup>
 import Button from '@/volt/button';
 import Card from '@/volt/card';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/card/BasicDoc.vue b/apps/volt/doc/card/BasicDoc.vue
index dc3942d5a..4eacbb798 100644
--- a/apps/volt/doc/card/BasicDoc.vue
+++ b/apps/volt/doc/card/BasicDoc.vue
@@ -18,6 +18,7 @@
 
 <script setup>
 import Card from '@/volt/card';
+import { ref } from 'vue';
 
 const code = ref(`
 <template>
diff --git a/apps/volt/doc/textarea/DisabledDoc.vue b/apps/volt/doc/textarea/DisabledDoc.vue
index f28974736..f93ad4d46 100644
--- a/apps/volt/doc/textarea/DisabledDoc.vue
+++ b/apps/volt/doc/textarea/DisabledDoc.vue
@@ -16,7 +16,7 @@ const value = ref(null);
 
 const code = ref(`
 <template>
-     <div class="card flex justify-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
 </template>
diff --git a/apps/volt/doc/textarea/HelpTextDoc.vue b/apps/volt/doc/textarea/HelpTextDoc.vue
deleted file mode 100644
index 5e41700c5..000000000
--- a/apps/volt/doc/textarea/HelpTextDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputText from '@/volt/inputtext';
-import { ref } from 'vue';
-
-const value = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputText v-model="value" type="text" />
-    </div>
-</template>
-
-<script setup>
-import InputText from '@/volt/inputtext';
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`);
-</script>
diff --git a/apps/volt/pages/button/index.vue b/apps/volt/pages/button/index.vue
new file mode 100644
index 000000000..fd8c9eee3
--- /dev/null
+++ b/apps/volt/pages/button/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <DocComponent title="Vue Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." :componentDocs="docs" />
+</template>
+
+<script setup>
+import BadgeDoc from '@/doc/button/BadgeDoc.vue';
+import BasicDoc from '@/doc/button/BasicDoc.vue';
+import ButtonGroupDoc from '@/doc/button/ButtonGroupDoc.vue';
+import DisabledDoc from '@/doc/button/DisabledDoc.vue';
+import HeadlessDoc from '@/doc/button/HeadlessDoc.vue';
+import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
+import IconsDoc from '@/doc/button/IconsDoc.vue';
+import ImportDoc from '@/doc/button/ImportDoc.vue';
+import LinkDoc from '@/doc/button/LinkDoc.vue';
+import LoadingDoc from '@/doc/button/LoadingDoc.vue';
+import OutlinedDoc from '@/doc/button/OutlinedDoc.vue';
+import RaisedDoc from '@/doc/button/RaisedDoc.vue';
+import RaisedTextDoc from '@/doc/button/RaisedTextDoc.vue';
+import RoundedDoc from '@/doc/button/RoundedDoc.vue';
+import SeverityDoc from '@/doc/button/SeverityDoc.vue';
+import SizesDoc from '@/doc/button/SizesDoc.vue';
+import TemplateDoc from '@/doc/button/TemplateDoc.vue';
+import TextDoc from '@/doc/button/TextDoc.vue';
+
+import { ref } from 'vue';
+
+const docs = ref([
+    [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'icons',
+            label: 'Icons',
+            component: IconsDoc
+        },
+        {
+            id: 'loading',
+            label: 'Loading',
+            component: LoadingDoc
+        },
+        {
+            id: 'link',
+            label: 'Link',
+            component: LinkDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'raised',
+            label: 'Raised',
+            component: RaisedDoc
+        },
+        {
+            id: 'rounded',
+            label: 'Rounded',
+            component: RoundedDoc
+        },
+        {
+            id: 'text',
+            label: 'Text',
+            component: TextDoc
+        },
+        {
+            id: 'raisedtext',
+            label: 'Raised Text',
+            component: RaisedTextDoc
+        },
+        {
+            id: 'outlined',
+            label: 'Outlined',
+            component: OutlinedDoc
+        },
+        {
+            id: 'icononly',
+            label: 'Icon Only',
+            component: IconOnlyDoc
+        },
+        {
+            id: 'badge',
+            label: 'Badge',
+            component: BadgeDoc
+        },
+        {
+            id: 'buttongroup',
+            label: 'Button Group',
+            component: ButtonGroupDoc
+        },
+        {
+            id: 'sizes',
+            label: 'Sizes',
+            component: SizesDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'headless',
+            label: 'Headless',
+            component: HeadlessDoc
+        }
+    ]
+]);
+</script>

From fbdf551bacf2865df99f32cc0c34b54a60029a57 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 14:17:02 +0300
Subject: [PATCH 75/77] Add base button and demos

---
 apps/volt/assets/styles/tailwind.css    |   7 +-
 apps/volt/doc/button/BadgeDoc.vue       |  12 +-
 apps/volt/doc/button/ButtonGroupDoc.vue |  16 ++-
 apps/volt/doc/button/DisabledDoc.vue    |   6 +-
 apps/volt/doc/button/HeadlessDoc.vue    |  20 ++-
 apps/volt/doc/button/IconOnlyDoc.vue    | 139 +++++++++++++++++-
 apps/volt/doc/button/IconsDoc.vue       |  26 +++-
 apps/volt/doc/button/ImportDoc.vue      |  33 ++---
 apps/volt/doc/button/LinkDoc.vue        |  20 ++-
 apps/volt/doc/button/LoadingDoc.vue     |  25 +++-
 apps/volt/doc/button/OutlinedDoc.vue    |  24 +++-
 apps/volt/doc/button/RaisedDoc.vue      |  24 +++-
 apps/volt/doc/button/RaisedTextDoc.vue  |  24 +++-
 apps/volt/doc/button/RoundedDoc.vue     |  24 +++-
 apps/volt/doc/button/SeverityDoc.vue    |  24 +++-
 apps/volt/doc/button/SizesDoc.vue       |  14 +-
 apps/volt/doc/button/TemplateDoc.vue    |  28 +++-
 apps/volt/doc/button/TextDoc.vue        |  24 +++-
 apps/volt/pages/button/index.vue        | 182 ++++++++++++------------
 apps/volt/volt/button/index.vue         |  20 ++-
 apps/volt/volt/buttongroup/index.vue    |  23 +++
 packages/primevue/src/button/Button.vue |  33 ++++-
 22 files changed, 559 insertions(+), 189 deletions(-)
 create mode 100644 apps/volt/volt/buttongroup/index.vue

diff --git a/apps/volt/assets/styles/tailwind.css b/apps/volt/assets/styles/tailwind.css
index f803d4670..c9e31c457 100644
--- a/apps/volt/assets/styles/tailwind.css
+++ b/apps/volt/assets/styles/tailwind.css
@@ -33,4 +33,9 @@
 @custom-variant p-removable (&[data-p~="removable"]);
 @custom-variant p-circle (&[data-p~="circle"]);
 @custom-variant p-determinate (&[data-p~="determinate"]);
-@custom-variant p-indeterminate (&[data-p~="indeterminate"]);
\ No newline at end of file
+@custom-variant p-indeterminate (&[data-p~="indeterminate"]);
+@custom-variant p-icon-only (&[data-p~="icon-only"]);
+@custom-variant p-rounded (&[data-p~="rounded"]);
+@custom-variant p-raised (&[data-p~="raised"]);
+@custom-variant p-outlined (&[data-p~="outlined"]);
+@custom-variant p-text (&[data-p~="text"]);
\ No newline at end of file
diff --git a/apps/volt/doc/button/BadgeDoc.vue b/apps/volt/doc/button/BadgeDoc.vue
index 4a7ea0d70..13ae6c9d3 100644
--- a/apps/volt/doc/button/BadgeDoc.vue
+++ b/apps/volt/doc/button/BadgeDoc.vue
@@ -1,9 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +15,9 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/ButtonGroupDoc.vue b/apps/volt/doc/button/ButtonGroupDoc.vue
index 4a7ea0d70..eed11ca37 100644
--- a/apps/volt/doc/button/ButtonGroupDoc.vue
+++ b/apps/volt/doc/button/ButtonGroupDoc.vue
@@ -1,26 +1,36 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ButtonGroup from '@/volt/buttongroup';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ButtonGroup from '@/volt/buttongroup';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/DisabledDoc.vue b/apps/volt/doc/button/DisabledDoc.vue
index 4a7ea0d70..73909c733 100644
--- a/apps/volt/doc/button/DisabledDoc.vue
+++ b/apps/volt/doc/button/DisabledDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>When <i>disabled</i> is present, the element cannot be used.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button label="Submit" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,7 +15,7 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button label="Submit" disabled />
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/HeadlessDoc.vue b/apps/volt/doc/button/HeadlessDoc.vue
index 4a7ea0d70..ac0d00070 100644
--- a/apps/volt/doc/button/HeadlessDoc.vue
+++ b/apps/volt/doc/button/HeadlessDoc.vue
@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,7 +22,14 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/IconOnlyDoc.vue b/apps/volt/doc/button/IconOnlyDoc.vue
index 4a7ea0d70..c5f58efb7 100644
--- a/apps/volt/doc/button/IconOnlyDoc.vue
+++ b/apps/volt/doc/button/IconOnlyDoc.vue
@@ -1,26 +1,155 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Buttons can have icons without labels.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card">
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4">
+            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
+        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
+const size = ref('normal');
+const sizeOptions = ref([
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Large', value: 'large' }
+]);
+
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card">
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4">
+            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
+        </div>
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import SelectButton from '@/volt/selectbutton';
+import { ref } from 'vue';
+
+const size = ref('normal');
+const sizeOptions = ref([
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Large', value: 'large' }
+]);
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/IconsDoc.vue b/apps/volt/doc/button/IconsDoc.vue
index 4a7ea0d70..82ec9d1a9 100644
--- a/apps/volt/doc/button/IconsDoc.vue
+++ b/apps/volt/doc/button/IconsDoc.vue
@@ -1,9 +1,17 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +22,16 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/ImportDoc.vue b/apps/volt/doc/button/ImportDoc.vue
index 4a7ea0d70..afeb349e3 100644
--- a/apps/volt/doc/button/ImportDoc.vue
+++ b/apps/volt/doc/button/ImportDoc.vue
@@ -1,26 +1,15 @@
 <template>
-    <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
-    </div>
-    <DocSectionCode :code="code" />
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script setup>
-import Button from '@/volt/button';
-import { ref } from 'vue';
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
-    </div>
-</template>
-
-<script setup>
-import Button from '@/volt/button';
-<\/script>
-`);
+<script>
+export default {
+    data() {
+        return {
+            code: `import Button from '@/volt/button';
+`
+        };
+    }
+};
 </script>
diff --git a/apps/volt/doc/button/LinkDoc.vue b/apps/volt/doc/button/LinkDoc.vue
index 4a7ea0d70..67c47a1ca 100644
--- a/apps/volt/doc/button/LinkDoc.vue
+++ b/apps/volt/doc/button/LinkDoc.vue
@@ -1,9 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>The button element can be displayed as a link element, and similarly a regular link can be styled as a button.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center gap-4">
+        <Button label="Link" variant="link" />
+        <RouterLink
+            to="/"
+            class="bg-primary hover:bg-primary-emphasis active:bg-primary-emphasis-alt text-primary-contrast px-3 py-2 gap-2 rounded-md font-medium focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
+            >Router</RouterLink
+        >
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +19,13 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center gap-4">
+        <Button label="Link" variant="link" />
+        <RouterLink
+            to="/"
+            class="bg-primary hover:bg-primary-emphasis active:bg-primary-emphasis-alt text-primary-contrast px-3 py-2 gap-2 rounded-md font-medium focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
+            >Router</RouterLink
+        >
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/LoadingDoc.vue b/apps/volt/doc/button/LoadingDoc.vue
index 4a7ea0d70..8d776655b 100644
--- a/apps/volt/doc/button/LoadingDoc.vue
+++ b/apps/volt/doc/button/LoadingDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Busy state is controlled with the <i>loading</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +12,34 @@
 import Button from '@/volt/button';
 import { ref } from 'vue';
 
+const loading = ref(false);
+
+const load = () => {
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 2000);
+};
+
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const loading = ref(false);
+
+const load = () => {
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 2000);
+};
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/OutlinedDoc.vue b/apps/volt/doc/button/OutlinedDoc.vue
index 4a7ea0d70..0f342b17f 100644
--- a/apps/volt/doc/button/OutlinedDoc.vue
+++ b/apps/volt/doc/button/OutlinedDoc.vue
@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Outlined buttons display a border without a transparent background.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="outlined" />
+        <Button label="Secondary" severity="secondary" variant="outlined" />
+        <Button label="Success" severity="success" variant="outlined" />
+        <Button label="Info" severity="info" variant="outlined" />
+        <Button label="Warn" severity="warn" variant="outlined" />
+        <Button label="Help" severity="help" variant="outlined" />
+        <Button label="Danger" severity="danger" variant="outlined" />
+        <Button label="Contrast" severity="contrast" variant="outlined" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="outlined" />
+        <Button label="Secondary" severity="secondary" variant="outlined" />
+        <Button label="Success" severity="success" variant="outlined" />
+        <Button label="Info" severity="info" variant="outlined" />
+        <Button label="Warn" severity="warn" variant="outlined" />
+        <Button label="Help" severity="help" variant="outlined" />
+        <Button label="Danger" severity="danger" variant="outlined" />
+        <Button label="Contrast" severity="contrast" variant="outlined" />
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/RaisedDoc.vue b/apps/volt/doc/button/RaisedDoc.vue
index 4a7ea0d70..a3902a0d2 100644
--- a/apps/volt/doc/button/RaisedDoc.vue
+++ b/apps/volt/doc/button/RaisedDoc.vue
@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Raised buttons display a shadow to indicate elevation.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" raised />
+        <Button label="Secondary" severity="secondary" raised />
+        <Button label="Success" severity="success" raised />
+        <Button label="Info" severity="info" raised />
+        <Button label="Warn" severity="warn" raised />
+        <Button label="Help" severity="help" raised />
+        <Button label="Danger" severity="danger" raised />
+        <Button label="Contrast" severity="contrast" raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" raised />
+        <Button label="Secondary" severity="secondary" raised />
+        <Button label="Success" severity="success" raised />
+        <Button label="Info" severity="info" raised />
+        <Button label="Warn" severity="warn" raised />
+        <Button label="Help" severity="help" raised />
+        <Button label="Danger" severity="danger" raised />
+        <Button label="Contrast" severity="contrast" raised />
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/RaisedTextDoc.vue b/apps/volt/doc/button/RaisedTextDoc.vue
index 4a7ea0d70..b37cb14bf 100644
--- a/apps/volt/doc/button/RaisedTextDoc.vue
+++ b/apps/volt/doc/button/RaisedTextDoc.vue
@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" raised />
+        <Button label="Secondary" severity="secondary" variant="text" raised />
+        <Button label="Success" severity="success" variant="text" raised />
+        <Button label="Info" severity="info" variant="text" raised />
+        <Button label="Warn" severity="warn" variant="text" raised />
+        <Button label="Help" severity="help" variant="text" raised />
+        <Button label="Danger" severity="danger" variant="text" raised />
+        <Button label="Contrast" severity="contrast" variant="text" raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" raised />
+        <Button label="Secondary" severity="secondary" variant="text" raised />
+        <Button label="Success" severity="success" variant="text" raised />
+        <Button label="Info" severity="info" variant="text" raised />
+        <Button label="Warn" severity="warn" variant="text" raised />
+        <Button label="Help" severity="help" variant="text" raised />
+        <Button label="Danger" severity="danger" variant="text" raised />
+        <Button label="Contrast" severity="contrast" variant="text" raised />
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/RoundedDoc.vue b/apps/volt/doc/button/RoundedDoc.vue
index 4a7ea0d70..f2ce0140f 100644
--- a/apps/volt/doc/button/RoundedDoc.vue
+++ b/apps/volt/doc/button/RoundedDoc.vue
@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Rounded buttons have a circular border radius.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" rounded />
+        <Button label="Secondary" severity="secondary" rounded />
+        <Button label="Success" severity="success" rounded />
+        <Button label="Info" severity="info" rounded />
+        <Button label="Warn" severity="warn" rounded />
+        <Button label="Help" severity="help" rounded />
+        <Button label="Danger" severity="danger" rounded />
+        <Button label="Contrast" severity="contrast" rounded />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" rounded />
+        <Button label="Secondary" severity="secondary" rounded />
+        <Button label="Success" severity="success" rounded />
+        <Button label="Info" severity="info" rounded />
+        <Button label="Warn" severity="warn" rounded />
+        <Button label="Help" severity="help" rounded />
+        <Button label="Danger" severity="danger" rounded />
+        <Button label="Contrast" severity="contrast" rounded />
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/SeverityDoc.vue b/apps/volt/doc/button/SeverityDoc.vue
index 4a7ea0d70..03abca029 100644
--- a/apps/volt/doc/button/SeverityDoc.vue
+++ b/apps/volt/doc/button/SeverityDoc.vue
@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>The <i>severity</i> property defines the variant of a button.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warn" severity="warn" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
+        <Button label="Contrast" severity="contrast" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warn" severity="warn" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
+        <Button label="Contrast" severity="contrast" />
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/SizesDoc.vue b/apps/volt/doc/button/SizesDoc.vue
index 4a7ea0d70..660276244 100644
--- a/apps/volt/doc/button/SizesDoc.vue
+++ b/apps/volt/doc/button/SizesDoc.vue
@@ -1,9 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +16,10 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/TemplateDoc.vue b/apps/volt/doc/button/TemplateDoc.vue
index 4a7ea0d70..7d4cfd876 100644
--- a/apps/volt/doc/button/TemplateDoc.vue
+++ b/apps/volt/doc/button/TemplateDoc.vue
@@ -1,9 +1,20 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Custom content inside a button is defined as children.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,7 +26,18 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <Button label="Submit" />
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
     </div>
 </template>
 
diff --git a/apps/volt/doc/button/TextDoc.vue b/apps/volt/doc/button/TextDoc.vue
index 4a7ea0d70..199ef565a 100644
--- a/apps/volt/doc/button/TextDoc.vue
+++ b/apps/volt/doc/button/TextDoc.vue
@@ -1,9 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+        <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" />
+        <Button label="Secondary" severity="secondary" variant="text" />
+        <Button label="Success" severity="success" variant="text" />
+        <Button label="Info" severity="info" variant="text" />
+        <Button label="Warn" severity="warn" variant="text" />
+        <Button label="Help" severity="help" variant="text" />
+        <Button label="Danger" severity="danger" variant="text" />
+        <Button label="Contrast" severity="contrast" variant="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,8 +21,15 @@ import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" />
+        <Button label="Secondary" severity="secondary" variant="text" />
+        <Button label="Success" severity="success" variant="text" />
+        <Button label="Info" severity="info" variant="text" />
+        <Button label="Warn" severity="warn" variant="text" />
+        <Button label="Help" severity="help" variant="text" />
+        <Button label="Danger" severity="danger" variant="text" />
+        <Button label="Contrast" severity="contrast" variant="text" />
     </div>
 </template>
 
diff --git a/apps/volt/pages/button/index.vue b/apps/volt/pages/button/index.vue
index fd8c9eee3..9c8b6b00f 100644
--- a/apps/volt/pages/button/index.vue
+++ b/apps/volt/pages/button/index.vue
@@ -25,97 +25,95 @@ import TextDoc from '@/doc/button/TextDoc.vue';
 import { ref } from 'vue';
 
 const docs = ref([
-    [
-        {
-            id: 'import',
-            label: 'Import',
-            component: ImportDoc
-        },
-        {
-            id: 'basic',
-            label: 'Basic',
-            component: BasicDoc
-        },
-        {
-            id: 'icons',
-            label: 'Icons',
-            component: IconsDoc
-        },
-        {
-            id: 'loading',
-            label: 'Loading',
-            component: LoadingDoc
-        },
-        {
-            id: 'link',
-            label: 'Link',
-            component: LinkDoc
-        },
-        {
-            id: 'severity',
-            label: 'Severity',
-            component: SeverityDoc
-        },
-        {
-            id: 'disabled',
-            label: 'Disabled',
-            component: DisabledDoc
-        },
-        {
-            id: 'raised',
-            label: 'Raised',
-            component: RaisedDoc
-        },
-        {
-            id: 'rounded',
-            label: 'Rounded',
-            component: RoundedDoc
-        },
-        {
-            id: 'text',
-            label: 'Text',
-            component: TextDoc
-        },
-        {
-            id: 'raisedtext',
-            label: 'Raised Text',
-            component: RaisedTextDoc
-        },
-        {
-            id: 'outlined',
-            label: 'Outlined',
-            component: OutlinedDoc
-        },
-        {
-            id: 'icononly',
-            label: 'Icon Only',
-            component: IconOnlyDoc
-        },
-        {
-            id: 'badge',
-            label: 'Badge',
-            component: BadgeDoc
-        },
-        {
-            id: 'buttongroup',
-            label: 'Button Group',
-            component: ButtonGroupDoc
-        },
-        {
-            id: 'sizes',
-            label: 'Sizes',
-            component: SizesDoc
-        },
-        {
-            id: 'template',
-            label: 'Template',
-            component: TemplateDoc
-        },
-        {
-            id: 'headless',
-            label: 'Headless',
-            component: HeadlessDoc
-        }
-    ]
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'icons',
+        label: 'Icons',
+        component: IconsDoc
+    },
+    {
+        id: 'loading',
+        label: 'Loading',
+        component: LoadingDoc
+    },
+    {
+        id: 'link',
+        label: 'Link',
+        component: LinkDoc
+    },
+    {
+        id: 'severity',
+        label: 'Severity',
+        component: SeverityDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
+    },
+    {
+        id: 'raised',
+        label: 'Raised',
+        component: RaisedDoc
+    },
+    {
+        id: 'rounded',
+        label: 'Rounded',
+        component: RoundedDoc
+    },
+    {
+        id: 'text',
+        label: 'Text',
+        component: TextDoc
+    },
+    {
+        id: 'raisedtext',
+        label: 'Raised Text',
+        component: RaisedTextDoc
+    },
+    {
+        id: 'outlined',
+        label: 'Outlined',
+        component: OutlinedDoc
+    },
+    {
+        id: 'icononly',
+        label: 'Icon Only',
+        component: IconOnlyDoc
+    },
+    {
+        id: 'badge',
+        label: 'Badge',
+        component: BadgeDoc
+    },
+    {
+        id: 'buttongroup',
+        label: 'Button Group',
+        component: ButtonGroupDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'template',
+        label: 'Template',
+        component: TemplateDoc
+    },
+    {
+        id: 'headless',
+        label: 'Headless',
+        component: HeadlessDoc
+    }
 ]);
 </script>
diff --git a/apps/volt/volt/button/index.vue b/apps/volt/volt/button/index.vue
index 7c2a40364..014890d14 100644
--- a/apps/volt/volt/button/index.vue
+++ b/apps/volt/volt/button/index.vue
@@ -18,6 +18,24 @@ import { ref } from 'vue';
 import { ptViewMerge } from '../utils';
 
 const theme = ref({
-    root: ``
+    root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none transition-colors duration-200
+        bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast
+        border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        p-vertical:flex-col p-fluid:w-full p-fluid:p-icon-only:w-10
+        p-icon-only:w-10 p-icon-only:px-0 p-icon-only:gap-0
+        p-icon-only:p-rounded:rounded-full p-icon-only:p-rounded:h-10
+        p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
+        p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
+        p-raised:shadow-sm p-rounded:rounded-[2rem]
+    `,
+    loadingIcon: ``,
+    icon: `p-right:order-1 p-bottom:order-2`,
+    label: `font-medium p-icon-only:invisible p-icon-only:w-0
+        p-small:text-sm p-large:text-[1.125rem]`,
+    pcBadge: {
+        root: `min-w-4 h-4 leading-4`
+    }
 });
 </script>
diff --git a/apps/volt/volt/buttongroup/index.vue b/apps/volt/volt/buttongroup/index.vue
new file mode 100644
index 000000000..4e47789b9
--- /dev/null
+++ b/apps/volt/volt/buttongroup/index.vue
@@ -0,0 +1,23 @@
+<template>
+    <ButtonGroup
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </ButtonGroup>
+</template>
+
+<script setup>
+import ButtonGroup from 'primevue/buttongroup';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: ``
+});
+</script>
diff --git a/packages/primevue/src/button/Button.vue b/packages/primevue/src/button/Button.vue
index d0a4828e6..19ce18ae4 100755
--- a/packages/primevue/src/button/Button.vue
+++ b/packages/primevue/src/button/Button.vue
@@ -1,14 +1,14 @@
 <template>
-    <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" v-bind="attrs">
+    <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" :data-p="dataP" v-bind="attrs">
         <slot>
             <slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]" v-bind="ptm('loadingIcon')">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
                 <SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
             </slot>
             <slot v-else name="icon" :class="[cx('icon')]" v-bind="ptm('icon')">
-                <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
+                <span v-if="icon" :class="[cx('icon'), icon, iconClass]" :data-p="dataIconP" v-bind="ptm('icon')"></span>
             </slot>
-            <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
+            <span :class="cx('label')" v-bind="ptm('label')" :data-p="dataLabelP">{{ label || '&nbsp;' }}</span>
             <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('pcBadge')"></Badge>
         </slot>
     </component>
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { isEmpty } from '@primeuix/utils/object';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Badge from 'primevue/badge';
@@ -67,6 +68,32 @@ export default {
         },
         hasFluid() {
             return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+        },
+        dataP() {
+            return cn({
+                [this.size]: this.size,
+                'icon-only': this.hasIcon && !this.label && !this.badge,
+                loading: this.loading,
+                fluid: this.hasFluid,
+                rounded: this.rounded,
+                raised: this.raised,
+                outlined: this.variant === 'outlined',
+                text: this.variant === 'text',
+                link: this.link || this.variant === 'link',
+                vertical: (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label
+            });
+        },
+        dataIconP() {
+            return cn({
+                [this.iconPos]: this.iconPos,
+                [this.size]: this.size
+            });
+        },
+        dataLabelP() {
+            return cn({
+                [this.size]: this.size,
+                'icon-only': this.hasIcon && !this.label && !this.badge
+            });
         }
     },
     components: {

From 4c3203b0e05d48a666d4515cafe99ea17480f004 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Mar 2025 14:42:27 +0300
Subject: [PATCH 76/77] Refactor code

---
 packages/primevue/src/selectbutton/SelectButton.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/primevue/src/selectbutton/SelectButton.vue b/packages/primevue/src/selectbutton/SelectButton.vue
index 045cea1fe..30474df2d 100755
--- a/packages/primevue/src/selectbutton/SelectButton.vue
+++ b/packages/primevue/src/selectbutton/SelectButton.vue
@@ -64,7 +64,6 @@ export default {
             }
 
             let selected = this.isSelected(option);
-
             let optionValue = this.getOptionValue(option);
             let newValue;
 
@@ -72,7 +71,9 @@ export default {
                 if (selected) {
                     newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));
                     if (!this.allowEmpty && newValue.length === 0) return;
-                } else newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];
+                } else {
+                    newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];
+                }
             } else {
                 if (selected && !this.allowEmpty) return;
                 newValue = selected ? null : optionValue;

From c60d1cdcdcb5def7ed4acf23fc0b705c7b4a5ed6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 14:58:13 +0300
Subject: [PATCH 77/77] More work on buttons, add severities with variants

---
 apps/volt/doc/button/IconOnlyDoc.vue   | 124 +++++++++----------------
 apps/volt/doc/button/ImportDoc.vue     |   3 +
 apps/volt/doc/button/LinkDoc.vue       |  36 -------
 apps/volt/doc/button/OutlinedDoc.vue   |  26 +++---
 apps/volt/doc/button/RaisedDoc.vue     |  26 +++---
 apps/volt/doc/button/RaisedTextDoc.vue |  28 +++---
 apps/volt/doc/button/RoundedDoc.vue    |  26 +++---
 apps/volt/doc/button/SeverityDoc.vue   |  28 +++---
 apps/volt/doc/button/TextDoc.vue       |  26 +++---
 apps/volt/pages/button/index.vue       |   6 --
 apps/volt/volt/button/contrast.vue     |  58 ++++++++++++
 apps/volt/volt/button/danger.vue       |  58 ++++++++++++
 apps/volt/volt/button/index.vue        |  14 ++-
 apps/volt/volt/button/secondary.vue    |  58 ++++++++++++
 14 files changed, 310 insertions(+), 207 deletions(-)
 delete mode 100644 apps/volt/doc/button/LinkDoc.vue
 create mode 100644 apps/volt/volt/button/contrast.vue
 create mode 100644 apps/volt/volt/button/danger.vue
 create mode 100644 apps/volt/volt/button/secondary.vue

diff --git a/apps/volt/doc/button/IconOnlyDoc.vue b/apps/volt/doc/button/IconOnlyDoc.vue
index c5f58efb7..1014eee63 100644
--- a/apps/volt/doc/button/IconOnlyDoc.vue
+++ b/apps/volt/doc/button/IconOnlyDoc.vue
@@ -9,56 +9,37 @@
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
         </div>
 
-        <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -66,6 +47,9 @@
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
@@ -85,62 +69,46 @@ const code = ref(`
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
         </div>
 
-        <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
         </div>
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import SelectButton from '@/volt/selectbutton';
 import { ref } from 'vue';
 
diff --git a/apps/volt/doc/button/ImportDoc.vue b/apps/volt/doc/button/ImportDoc.vue
index afeb349e3..ef4a48713 100644
--- a/apps/volt/doc/button/ImportDoc.vue
+++ b/apps/volt/doc/button/ImportDoc.vue
@@ -8,6 +8,9 @@ export default {
     data() {
         return {
             code: `import Button from '@/volt/button';
+import SecondaryButton from '@/volt/button/secondary';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
 `
         };
     }
diff --git a/apps/volt/doc/button/LinkDoc.vue b/apps/volt/doc/button/LinkDoc.vue
deleted file mode 100644
index 67c47a1ca..000000000
--- a/apps/volt/doc/button/LinkDoc.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The button element can be displayed as a link element, and similarly a regular link can be styled as a button.</p>
-    </DocSectionText>
-    <div class="card flex justify-center gap-4">
-        <Button label="Link" variant="link" />
-        <RouterLink
-            to="/"
-            class="bg-primary hover:bg-primary-emphasis active:bg-primary-emphasis-alt text-primary-contrast px-3 py-2 gap-2 rounded-md font-medium focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
-            >Router</RouterLink
-        >
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import Button from '@/volt/button';
-import { ref } from 'vue';
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center gap-4">
-        <Button label="Link" variant="link" />
-        <RouterLink
-            to="/"
-            class="bg-primary hover:bg-primary-emphasis active:bg-primary-emphasis-alt text-primary-contrast px-3 py-2 gap-2 rounded-md font-medium focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
-            >Router</RouterLink
-        >
-    </div>
-</template>
-
-<script setup>
-import Button from '@/volt/button';
-<\/script>
-`);
-</script>
diff --git a/apps/volt/doc/button/OutlinedDoc.vue b/apps/volt/doc/button/OutlinedDoc.vue
index 0f342b17f..aaccac7a9 100644
--- a/apps/volt/doc/button/OutlinedDoc.vue
+++ b/apps/volt/doc/button/OutlinedDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="outlined" />
-        <Button label="Secondary" severity="secondary" variant="outlined" />
-        <Button label="Success" severity="success" variant="outlined" />
-        <Button label="Info" severity="info" variant="outlined" />
-        <Button label="Warn" severity="warn" variant="outlined" />
-        <Button label="Help" severity="help" variant="outlined" />
-        <Button label="Danger" severity="danger" variant="outlined" />
-        <Button label="Contrast" severity="contrast" variant="outlined" />
+        <SecondaryButton label="Secondary" variant="outlined" />
+        <ContrastButton label="Contrast" variant="outlined" />
+        <DangerButton label="Danger" variant="outlined" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="outlined" />
-        <Button label="Secondary" severity="secondary" variant="outlined" />
-        <Button label="Success" severity="success" variant="outlined" />
-        <Button label="Info" severity="info" variant="outlined" />
-        <Button label="Warn" severity="warn" variant="outlined" />
-        <Button label="Help" severity="help" variant="outlined" />
-        <Button label="Danger" severity="danger" variant="outlined" />
-        <Button label="Contrast" severity="contrast" variant="outlined" />
+        <SecondaryButton label="Secondary" variant="outlined" />
+        <ContrastButton label="Contrast" variant="outlined" />
+        <DangerButton label="Danger" variant="outlined" />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/RaisedDoc.vue b/apps/volt/doc/button/RaisedDoc.vue
index a3902a0d2..18dd821ab 100644
--- a/apps/volt/doc/button/RaisedDoc.vue
+++ b/apps/volt/doc/button/RaisedDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" raised />
-        <Button label="Secondary" severity="secondary" raised />
-        <Button label="Success" severity="success" raised />
-        <Button label="Info" severity="info" raised />
-        <Button label="Warn" severity="warn" raised />
-        <Button label="Help" severity="help" raised />
-        <Button label="Danger" severity="danger" raised />
-        <Button label="Contrast" severity="contrast" raised />
+        <SecondaryButton label="Secondary" raised />
+        <ContrastButton label="Contrast" raised />
+        <DangerButton label="Danger" raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" raised />
-        <Button label="Secondary" severity="secondary" raised />
-        <Button label="Success" severity="success" raised />
-        <Button label="Info" severity="info" raised />
-        <Button label="Warn" severity="warn" raised />
-        <Button label="Help" severity="help" raised />
-        <Button label="Danger" severity="danger" raised />
-        <Button label="Contrast" severity="contrast" raised />
+        <SecondaryButton label="Secondary" raised />
+        <ContrastButton label="Contrast" raised />
+        <DangerButton label="Danger" raised />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/RaisedTextDoc.vue b/apps/volt/doc/button/RaisedTextDoc.vue
index b37cb14bf..1d94027e9 100644
--- a/apps/volt/doc/button/RaisedTextDoc.vue
+++ b/apps/volt/doc/button/RaisedTextDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="text" raised />
-        <Button label="Secondary" severity="secondary" variant="text" raised />
-        <Button label="Success" severity="success" variant="text" raised />
-        <Button label="Info" severity="info" variant="text" raised />
-        <Button label="Warn" severity="warn" variant="text" raised />
-        <Button label="Help" severity="help" variant="text" raised />
-        <Button label="Danger" severity="danger" variant="text" raised />
-        <Button label="Contrast" severity="contrast" variant="text" raised />
+        <SecondaryButton label="Secondary" variant="text" raised />
+        <ContrastButton label="Contrast" variant="text" raised />
+        <DangerButton label="Danger" variant="text" raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
-    <div class="card flex justify-center flex-wrap gap-4">
+   <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="text" raised />
-        <Button label="Secondary" severity="secondary" variant="text" raised />
-        <Button label="Success" severity="success" variant="text" raised />
-        <Button label="Info" severity="info" variant="text" raised />
-        <Button label="Warn" severity="warn" variant="text" raised />
-        <Button label="Help" severity="help" variant="text" raised />
-        <Button label="Danger" severity="danger" variant="text" raised />
-        <Button label="Contrast" severity="contrast" variant="text" raised />
+        <SecondaryButton label="Secondary" variant="text" raised />
+        <ContrastButton label="Contrast" variant="text" raised />
+        <DangerButton label="Danger" variant="text" raised />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/RoundedDoc.vue b/apps/volt/doc/button/RoundedDoc.vue
index f2ce0140f..b191e8d0a 100644
--- a/apps/volt/doc/button/RoundedDoc.vue
+++ b/apps/volt/doc/button/RoundedDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" rounded />
-        <Button label="Secondary" severity="secondary" rounded />
-        <Button label="Success" severity="success" rounded />
-        <Button label="Info" severity="info" rounded />
-        <Button label="Warn" severity="warn" rounded />
-        <Button label="Help" severity="help" rounded />
-        <Button label="Danger" severity="danger" rounded />
-        <Button label="Contrast" severity="contrast" rounded />
+        <SecondaryButton label="Secondary" rounded />
+        <ContrastButton label="Contrast" rounded />
+        <DangerButton label="Danger" rounded />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" rounded />
-        <Button label="Secondary" severity="secondary" rounded />
-        <Button label="Success" severity="success" rounded />
-        <Button label="Info" severity="info" rounded />
-        <Button label="Warn" severity="warn" rounded />
-        <Button label="Help" severity="help" rounded />
-        <Button label="Danger" severity="danger" rounded />
-        <Button label="Contrast" severity="contrast" rounded />
+        <SecondaryButton label="Secondary" rounded />
+        <ContrastButton label="Contrast" rounded />
+        <DangerButton label="Danger" rounded />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/SeverityDoc.vue b/apps/volt/doc/button/SeverityDoc.vue
index 03abca029..a5d0faa1b 100644
--- a/apps/volt/doc/button/SeverityDoc.vue
+++ b/apps/volt/doc/button/SeverityDoc.vue
@@ -1,40 +1,38 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>severity</i> property defines the variant of a button.</p>
+        <p>Secondary, Contrast and Danger buttons are available as separate components for severity alternatives.</p>
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" />
-        <Button label="Secondary" severity="secondary" />
-        <Button label="Success" severity="success" />
-        <Button label="Info" severity="info" />
-        <Button label="Warn" severity="warn" />
-        <Button label="Help" severity="help" />
-        <Button label="Danger" severity="danger" />
-        <Button label="Contrast" severity="contrast" />
+        <SecondaryButton label="Secondary" />
+        <ContrastButton label="Contrast" />
+        <DangerButton label="Danger" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" />
-        <Button label="Secondary" severity="secondary" />
-        <Button label="Success" severity="success" />
-        <Button label="Info" severity="info" />
-        <Button label="Warn" severity="warn" />
-        <Button label="Help" severity="help" />
-        <Button label="Danger" severity="danger" />
-        <Button label="Contrast" severity="contrast" />
+        <SecondaryButton label="Secondary" />
+        <ContrastButton label="Contrast" />
+        <DangerButton label="Danger" />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/doc/button/TextDoc.vue b/apps/volt/doc/button/TextDoc.vue
index 199ef565a..14e92ff8a 100644
--- a/apps/volt/doc/button/TextDoc.vue
+++ b/apps/volt/doc/button/TextDoc.vue
@@ -4,37 +4,35 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="text" />
-        <Button label="Secondary" severity="secondary" variant="text" />
-        <Button label="Success" severity="success" variant="text" />
-        <Button label="Info" severity="info" variant="text" />
-        <Button label="Warn" severity="warn" variant="text" />
-        <Button label="Help" severity="help" variant="text" />
-        <Button label="Danger" severity="danger" variant="text" />
-        <Button label="Contrast" severity="contrast" variant="text" />
+        <SecondaryButton label="Secondary" variant="text" />
+        <ContrastButton label="Contrast" variant="text" />
+        <DangerButton label="Danger" variant="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 import { ref } from 'vue';
 
 const code = ref(`
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" variant="text" />
-        <Button label="Secondary" severity="secondary" variant="text" />
-        <Button label="Success" severity="success" variant="text" />
-        <Button label="Info" severity="info" variant="text" />
-        <Button label="Warn" severity="warn" variant="text" />
-        <Button label="Help" severity="help" variant="text" />
-        <Button label="Danger" severity="danger" variant="text" />
-        <Button label="Contrast" severity="contrast" variant="text" />
+        <SecondaryButton label="Secondary" variant="text" />
+        <ContrastButton label="Contrast" variant="text" />
+        <DangerButton label="Danger" variant="text" />
     </div>
 </template>
 
 <script setup>
 import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
 <\/script>
 `);
 </script>
diff --git a/apps/volt/pages/button/index.vue b/apps/volt/pages/button/index.vue
index 9c8b6b00f..2ed2a05ec 100644
--- a/apps/volt/pages/button/index.vue
+++ b/apps/volt/pages/button/index.vue
@@ -11,7 +11,6 @@ import HeadlessDoc from '@/doc/button/HeadlessDoc.vue';
 import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
 import IconsDoc from '@/doc/button/IconsDoc.vue';
 import ImportDoc from '@/doc/button/ImportDoc.vue';
-import LinkDoc from '@/doc/button/LinkDoc.vue';
 import LoadingDoc from '@/doc/button/LoadingDoc.vue';
 import OutlinedDoc from '@/doc/button/OutlinedDoc.vue';
 import RaisedDoc from '@/doc/button/RaisedDoc.vue';
@@ -45,11 +44,6 @@ const docs = ref([
         label: 'Loading',
         component: LoadingDoc
     },
-    {
-        id: 'link',
-        label: 'Link',
-        component: LinkDoc
-    },
     {
         id: 'severity',
         label: 'Severity',
diff --git a/apps/volt/volt/button/contrast.vue b/apps/volt/volt/button/contrast.vue
new file mode 100644
index 000000000..4f6c285dd
--- /dev/null
+++ b/apps/volt/volt/button/contrast.vue
@@ -0,0 +1,58 @@
+<template>
+    <Button
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Button>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 transition-colors duration-200
+        bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800
+        border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200
+        dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300
+        dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0
+        p-vertical:flex-col p-fluid:w-full p-fluid:p-icon-only:w-10
+        p-icon-only:w-10 p-icon-only:px-0 p-icon-only:gap-0
+        p-icon-only:p-rounded:rounded-full p-icon-only:p-rounded:h-10
+        p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
+        p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
+        p-raised:shadow-sm p-rounded:rounded-[2rem]
+        p-outlined:bg-transparent enabled:hover:p-outlined:bg-surface-50 enabled:active:p-outlined:bg-surface-100
+        p-outlined:border-surface-700 enabled:hover:p-outlined:border-surface-700 enabled:active:p-outlined:border-surface-700
+        p-outlined:text-surface-950 enabled:hover:p-outlined:text-surface-950 enabled:active:p-outlined:text-surface-950
+        dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-surface-800 dark:enabled:active:p-outlined:bg-surface-700
+        dark:p-outlined:border-surface-500 dark:enabled:hover:p-outlined:border-surface-500 dark:enabled:active:p-outlined:border-surface-500
+        dark:p-outlined:text-surface-0 dark:enabled:hover:p-outlined:text-surface-0 dark:enabled:active:p-outlined:text-surface-0
+        p-text:bg-transparent enabled:hover:p-text:bg-surface-50 enabled:active:p-text:bg-surface-100
+        p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
+        p-text:text-surface-950 enabled:hover:p-text:text-surface-950 enabled:active:p-text:text-surface-950
+        dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-surface-800 dark:enabled:active:p-text:bg-surface-700
+        dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
+        dark:p-text:text-surface-0 dark:enabled:hover:p-text:text-surface-0 dark:enabled:active:p-text:text-surface-0
+    `,
+    loadingIcon: ``,
+    icon: `p-right:order-1 p-bottom:order-2`,
+    label: `font-medium p-icon-only:invisible p-icon-only:w-0
+        p-small:text-sm p-large:text-[1.125rem]`,
+    pcBadge: {
+        root: `min-w-4 h-4 leading-4`
+    }
+});
+</script>
diff --git a/apps/volt/volt/button/danger.vue b/apps/volt/volt/button/danger.vue
new file mode 100644
index 000000000..d202e16ae
--- /dev/null
+++ b/apps/volt/volt/button/danger.vue
@@ -0,0 +1,58 @@
+<template>
+    <Button
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Button>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 transition-colors duration-200
+        bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700
+        border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200
+        dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200
+        dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-red-500 dark:focus-visible:outline-red-400
+        p-vertical:flex-col p-fluid:w-full p-fluid:p-icon-only:w-10
+        p-icon-only:w-10 p-icon-only:px-0 p-icon-only:gap-0
+        p-icon-only:p-rounded:rounded-full p-icon-only:p-rounded:h-10
+        p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
+        p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
+        p-raised:shadow-sm p-rounded:rounded-[2rem]
+        p-outlined:bg-transparent enabled:hover:p-outlined:bg-red-50 enabled:active:p-outlined:bg-red-100
+        p-outlined:border-red-200 enabled:hover:p-outlined:border-red-200 enabled:active:p-outlined:border-red-200
+        p-outlined:text-red-500 enabled:hover:p-outlined:text-red-500 enabled:active:p-outlined:text-red-500
+        dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-red-400/5 dark:enabled:active:p-outlined:bg-red-400/15
+        dark:p-outlined:border-red-700 dark:enabled:hover:p-outlined:border-red-700 dark:enabled:active:p-outlined:border-red-700
+        dark:p-outlined:text-red-400 dark:enabled:hover:p-outlined:text-red-400 dark:enabled:active:p-outlined:text-red-400
+        p-text:bg-transparent enabled:hover:p-text:bg-red-50 enabled:active:p-text:bg-red-100
+        p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
+        p-text:text-red-500 enabled:hover:p-text:text-red-500 enabled:active:p-text:text-red-500
+        dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-red-400/5 dark:enabled:active:p-text:bg-red-400/15
+        dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
+        dark:p-text:text-red-400 dark:enabled:hover:p-text:text-red-400 dark:enabled:active:p-text:text-red-400
+    `,
+    loadingIcon: ``,
+    icon: `p-right:order-1 p-bottom:order-2`,
+    label: `font-medium p-icon-only:invisible p-icon-only:w-0
+        p-small:text-sm p-large:text-[1.125rem]`,
+    pcBadge: {
+        root: `min-w-4 h-4 leading-4`
+    }
+});
+</script>
diff --git a/apps/volt/volt/button/index.vue b/apps/volt/volt/button/index.vue
index 014890d14..b6ef800a7 100644
--- a/apps/volt/volt/button/index.vue
+++ b/apps/volt/volt/button/index.vue
@@ -19,7 +19,7 @@ import { ptViewMerge } from '../utils';
 
 const theme = ref({
     root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
-        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none transition-colors duration-200
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 transition-colors duration-200
         bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast
         border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
@@ -29,6 +29,18 @@ const theme = ref({
         p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
         p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
         p-raised:shadow-sm p-rounded:rounded-[2rem]
+        p-outlined:bg-transparent enabled:hover:p-outlined:bg-primary-50 enabled:active:p-outlined:bg-primary-100
+        p-outlined:border-primary-200 enabled:hover:p-outlined:border-primary-200 enabled:active:p-outlined:border-primary-200
+        p-outlined:text-primary enabled:hover:p-outlined:text-primary enabled:active:p-outlined:text-primary
+        dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-primary/5 dark:enabled:active:p-outlined:bg-primary/15
+        dark:p-outlined:border-primary-700 dark:enabled:hover:p-outlined:border-primary-700 dark:enabled:active:p-outlined:border-primary-700
+        dark:p-outlined:text-primary dark:enabled:hover:p-outlined:text-primary dark:enabled:active:p-outlined:text-primary
+        p-text:bg-transparent enabled:hover:p-text:bg-primary-50 enabled:active:p-text:bg-primary-100
+        p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
+        p-text:text-primary enabled:hover:p-text:text-primary enabled:active:p-text:text-primary
+        dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-primary/5 dark:enabled:active:p-text:bg-primary/15
+        dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
+        dark:p-text:text-primary dark:enabled:hover:p-text:text-primary dark:enabled:active:p-text:text-primary
     `,
     loadingIcon: ``,
     icon: `p-right:order-1 p-bottom:order-2`,
diff --git a/apps/volt/volt/button/secondary.vue b/apps/volt/volt/button/secondary.vue
new file mode 100644
index 000000000..8daa9c68a
--- /dev/null
+++ b/apps/volt/volt/button/secondary.vue
@@ -0,0 +1,58 @@
+<template>
+    <Button
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Button>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
+        px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 transition-colors duration-200
+        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+        focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300
+        p-vertical:flex-col p-fluid:w-full p-fluid:p-icon-only:w-10
+        p-icon-only:w-10 p-icon-only:px-0 p-icon-only:gap-0
+        p-icon-only:p-rounded:rounded-full p-icon-only:p-rounded:h-10
+        p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
+        p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
+        p-raised:shadow-sm p-rounded:rounded-[2rem]
+        p-outlined:bg-transparent enabled:hover:p-outlined:bg-surface-50 enabled:active:p-outlined:bg-surface-100
+        p-outlined:border-surface-200 enabled:hover:p-outlined:border-surface-200 enabled:active:p-outlined:border-surface-200
+        p-outlined:text-surface-500 enabled:hover:p-outlined:text-surface-500 enabled:active:p-outlined:text-surface-500
+        dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-white/5 dark:enabled:active:p-outlined:bg-white/15
+        dark:p-outlined:border-surface-700 dark:enabled:hover:p-outlined:border-surface-700 dark:enabled:active:p-outlined:border-surface-700
+        dark:p-outlined:text-surface-400 dark:enabled:hover:p-outlined:text-surface-400 dark:enabled:active:p-outlined:text-surface-400
+        p-text:bg-transparent enabled:hover:p-text:bg-surface-50 enabled:active:p-text:bg-surface-100
+        p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
+        p-text:text-surface-500 enabled:hover:p-text:text-surface-500 enabled:active:p-text:text-surface-500
+        dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-surface-800 dark:enabled:active:p-text:bg-surface-700
+        dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
+        dark:p-text:text-surface-400 dark:enabled:hover:p-text:text-surface-400 dark:enabled:active:p-text:text-surface-400
+    `,
+    loadingIcon: ``,
+    icon: `p-right:order-1 p-bottom:order-2`,
+    label: `font-medium p-icon-only:invisible p-icon-only:w-0
+        p-small:text-sm p-large:text-[1.125rem]`,
+    pcBadge: {
+        root: `min-w-4 h-4 leading-4`
+    }
+});
+</script>